зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1701448 - Tweak in-content page styling further for Proton. r=desktop-theme-reviewers,dao
* Update green color used for success * Fix actions menulist alignment * Make various elements use new accent colors * Fix lack of border on HTML checkboxes * Update various colors to proton colors * Update input border-radius to 4px * Update border colors Differential Revision: https://phabricator.services.mozilla.com/D110033
This commit is contained in:
Tim Nguyen
Родитель
6c1d6cb52f
Коммит
8a016c64aa
|
|
@ -8,17 +8,27 @@
|
|||
--reveal-checkbox-opacity: .8;
|
||||
--reveal-checkbox-opacity-hover: .6;
|
||||
--reveal-checkbox-opacity-active: 1;
|
||||
--success-color: #00c100;
|
||||
--success-color: #2AC3A2;
|
||||
--edit-delete-button-color: #4a4a4f;
|
||||
}
|
||||
|
||||
/* Only overwrite the deemphasized text color in non-dark mode. */
|
||||
@media not all and (prefers-color-scheme: dark) {
|
||||
@media not (prefers-color-scheme: dark) {
|
||||
:host {
|
||||
--in-content-deemphasized-text: #737373;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:host {
|
||||
--reveal-checkbox-opacity: .8;
|
||||
--reveal-checkbox-opacity-hover: 1;
|
||||
--reveal-checkbox-opacity-active: .6;
|
||||
--success-color: #54FFBD;
|
||||
--edit-delete-button-color: #cfcfd1;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
overflow: auto;
|
||||
padding: 40px;
|
||||
|
|
@ -454,13 +464,3 @@ input[name="password"] {
|
|||
text-decoration: underline;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:host {
|
||||
--reveal-checkbox-opacity: .8;
|
||||
--reveal-checkbox-opacity-hover: 1;
|
||||
--reveal-checkbox-opacity-active: .6;
|
||||
--success-color: #86DE74;
|
||||
--edit-delete-button-color: #cfcfd1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
:host {
|
||||
border-inline-end: 1px solid var(--in-content-box-border-color);
|
||||
border-inline-end: 1px solid var(--in-content-border-color);
|
||||
background-color: var(--in-content-box-background);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 9px 16px;
|
||||
border-bottom: 1px solid var(--in-content-box-border-color);
|
||||
border-bottom: 1px solid var(--in-content-border-color);
|
||||
background-color: var(--in-content-box-background);
|
||||
color: var(--in-content-deemphasized-text);
|
||||
font-size: 0.8em;
|
||||
|
|
@ -99,7 +99,7 @@ ol {
|
|||
}
|
||||
|
||||
.create-login-button-container {
|
||||
border-top: 1px solid var(--in-content-box-border-color);
|
||||
border-top: 1px solid var(--in-content-border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -117,17 +117,25 @@ ol {
|
|||
border-top: 1px solid var(--in-content-border-color);
|
||||
}
|
||||
|
||||
@supports not -moz-bool-pref("browser.proton.enabled") {
|
||||
.login-list-item:hover {
|
||||
background-color: var(--in-content-page-background);
|
||||
}
|
||||
} /*** END !proton ***/
|
||||
|
||||
.login-list-item:hover:active {
|
||||
@supports -moz-bool-pref("browser.proton.enabled") {
|
||||
.login-list-item:not(.selected):hover {
|
||||
background-color: var(--in-content-button-background-hover);
|
||||
}
|
||||
|
||||
.login-list-item:not(.selected):hover:active {
|
||||
background-color: var(--in-content-button-background-active);
|
||||
}
|
||||
} /*** END proton ***/
|
||||
|
||||
.login-list-item.keyboard-selected {
|
||||
border-inline-start-color: var(--in-content-border-color);
|
||||
background-color: var(--in-content-page-background);
|
||||
background-color: var(--in-content-button-background-hover);
|
||||
}
|
||||
|
||||
.login-list-item.selected {
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
<html:span data-l10n-id="content-blocking-reload-description"
|
||||
class="content-blocking-reload-description" />
|
||||
</html:div>
|
||||
<button class="accessory-button reload-tabs-button"
|
||||
<button class="accessory-button reload-tabs-button primary"
|
||||
is="highlightable-button"
|
||||
data-l10n-id="content-blocking-reload-tabs-button"/>
|
||||
</html:div>
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
<html:span data-l10n-id="content-blocking-reload-description"
|
||||
class="content-blocking-reload-description" />
|
||||
</html:div>
|
||||
<button class="accessory-button reload-tabs-button"
|
||||
<button class="accessory-button reload-tabs-button primary"
|
||||
is="highlightable-button"
|
||||
data-l10n-id="content-blocking-reload-tabs-button"/>
|
||||
</html:div>
|
||||
|
|
@ -305,7 +305,7 @@
|
|||
<html:span data-l10n-id="content-blocking-reload-description"
|
||||
class="content-blocking-reload-description" />
|
||||
</html:div>
|
||||
<button class="accessory-button reload-tabs-button"
|
||||
<button class="accessory-button reload-tabs-button primary"
|
||||
is="highlightable-button"
|
||||
data-l10n-id="content-blocking-reload-tabs-button"/>
|
||||
</html:div>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,6 @@
|
|||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
/**
|
||||
* Line up the actions menu with action labels above and below it.
|
||||
* Equalize the distance from the left side of the action box to the left side
|
||||
* of the icon for both the menu and the non-menu versions of the action box.
|
||||
* Also make sure the labels are the same distance away from the icons.
|
||||
*/
|
||||
.actionsMenu {
|
||||
margin-block: -1px;
|
||||
margin-inline: -1px 0;
|
||||
}
|
||||
|
||||
.typeIcon,
|
||||
.actionIcon {
|
||||
margin-inline: 3px;
|
||||
}
|
||||
|
||||
#handlersView > richlistitem label {
|
||||
margin-inline-start: 1px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#handlersView > richlistitem {
|
||||
min-height: 25px;
|
||||
}
|
||||
|
||||
richlistitem[appHandlerIcon="handleInternally"],
|
||||
menuitem[appHandlerIcon="handleInternally"] {
|
||||
list-style-image: url("chrome://branding/content/icon32.png");
|
||||
|
|
@ -47,21 +22,6 @@ menuitem[appHandlerIcon="plugin"] {
|
|||
list-style-image: url("chrome://global/skin/icons/plugin.svg");
|
||||
}
|
||||
|
||||
.actionsMenu::part(icon) {
|
||||
margin-inline: 3px 6px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.actionsMenu > menupopup > menuitem > .menu-iconic-left {
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 4px !important;
|
||||
}
|
||||
|
||||
.actionsMenu > menupopup > menuitem {
|
||||
padding-inline-start: 3px;
|
||||
}
|
||||
|
||||
#appList {
|
||||
min-height: 212px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,31 +2,6 @@
|
|||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
/**
|
||||
* Line up the actions menu with action labels above and below it.
|
||||
* Equalize the distance from the left side of the action box to the left side
|
||||
* of the icon for both the menu and the non-menu versions of the action box.
|
||||
* Also make sure the labels are the same distance away from the icons.
|
||||
*/
|
||||
.actionsMenu {
|
||||
margin-inline-start: -2px;
|
||||
margin-block: 0 -1px;
|
||||
}
|
||||
|
||||
.typeIcon,
|
||||
.actionIcon {
|
||||
margin-inline: 3px 2px;
|
||||
}
|
||||
|
||||
#handlersView > richlistitem label {
|
||||
margin-inline-start: 3px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#handlersView > richlistitem {
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
.typeIcon,
|
||||
.actionIcon,
|
||||
.actionsMenu::part(icon) {
|
||||
|
|
@ -34,11 +9,6 @@
|
|||
width: 16px;
|
||||
}
|
||||
|
||||
.actionsMenu::part(icon) {
|
||||
margin-top: 2px;
|
||||
margin-inline: 0px 8px;
|
||||
}
|
||||
|
||||
.actionsMenu > menupopup > menuitem > .menu-iconic-left {
|
||||
/* Undo content/browser/preferences/handlers.css - we don't
|
||||
* want icon-less labels to line up with the other labels.
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
cursor: pointer;
|
||||
/* Override button background-color and color from common.css */
|
||||
background-color: transparent;
|
||||
color: #0a84ff !important;
|
||||
color: var(--in-content-link-color) !important;
|
||||
-moz-context-properties: fill;
|
||||
fill: currentColor;
|
||||
border: none;
|
||||
|
|
@ -86,22 +86,22 @@ treechildren::-moz-tree-image(container, noicon) {
|
|||
list-style-image: url("chrome://browser/skin/window.svg");
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(checked),
|
||||
treechildren::-moz-tree-image(partial) {
|
||||
-moz-context-properties: fill, stroke;
|
||||
fill: var(--in-content-accent-color);
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(checked, selected),
|
||||
treechildren::-moz-tree-image(partial, selected) {
|
||||
fill: var(--in-content-item-selected-text);
|
||||
stroke: var(--in-content-item-selected);
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(checked) {
|
||||
list-style-image: url("chrome://global/skin/icons/check.svg");
|
||||
-moz-context-properties: fill, stroke;
|
||||
fill: #2292d0;
|
||||
}
|
||||
treechildren::-moz-tree-image(checked, selected) {
|
||||
fill: white;
|
||||
stroke: #0095dd;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(partial) {
|
||||
list-style-image: url("chrome://global/skin/icons/check-partial.svg");
|
||||
-moz-context-properties: fill, stroke;
|
||||
fill: #2292d0;
|
||||
}
|
||||
treechildren::-moz-tree-image(partial, selected) {
|
||||
fill: white;
|
||||
stroke: #0095dd;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,22 +36,22 @@ treechildren::-moz-tree-image(container, noicon) {
|
|||
list-style-image: url("chrome://browser/skin/window.svg");
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(checked),
|
||||
treechildren::-moz-tree-image(partial) {
|
||||
-moz-context-properties: fill, stroke;
|
||||
fill: var(--in-content-accent-color);
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(checked, selected),
|
||||
treechildren::-moz-tree-image(partial, selected) {
|
||||
fill: var(--in-content-item-selected-text);
|
||||
stroke: var(--in-content-item-selected);
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(checked) {
|
||||
list-style-image: url("chrome://global/skin/icons/check.svg");
|
||||
-moz-context-properties: fill, stroke;
|
||||
fill: #2292d0;
|
||||
}
|
||||
treechildren::-moz-tree-image(checked, selected) {
|
||||
fill: white;
|
||||
stroke: #0095dd;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(partial) {
|
||||
list-style-image: url("chrome://global/skin/icons/check-partial.svg");
|
||||
-moz-context-properties: fill, stroke;
|
||||
fill: #2292d0;
|
||||
}
|
||||
treechildren::-moz-tree-image(partial, selected) {
|
||||
fill: white;
|
||||
stroke: #0095dd;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
#containersView richlistitem {
|
||||
padding-block: 4px;
|
||||
border-block-end: 1px solid var(--in-content-box-border-color);
|
||||
border-block-end: 1px solid var(--in-content-border-color);
|
||||
}
|
||||
|
||||
/* Crop the label at the end using CSS. This isn't using XUL crop
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
</style>
|
||||
<rect width="630" height="35" x=".5" y=".5" fill="context-fill" class="addressBarOutline" rx="4" ry="4"/>
|
||||
<rect width="434" height="23" x="110.5" y="6.5" fill="rgba(255,255,255,0.05)" class="addressBarOutline" rx="4" ry="4"/>
|
||||
<path d="M604 .5h.5v34h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574zm500.57-1.986h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/>
|
||||
<circle cx="18.5" cy="18" r="12" fill="rgba(195, 195, 205, 0.1)" class="addressBarOutline"/>
|
||||
<path d="M604 .5h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574zm500.57-1.986h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/>
|
||||
<path d="M23.783 17.292h-8.649l3.206-3.2a.738.738 0 0 0-1.044-1.043l-4.474 4.47a.72.72 0 0 0 0 1.043l4.474 4.47a.72.72 0 0 0 1.044 0 .72.72 0 0 0 0-1.043l-3.206-3.2h8.649a.749.749 0 1 0 0-1.497z" class="addressBarIcons"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 3.0 KiB После Ширина: | Высота: | Размер: 2.9 KiB |
|
|
@ -142,8 +142,8 @@ checkbox {
|
|||
}
|
||||
|
||||
.spotlight {
|
||||
background-color: var(--blue-40-a10);
|
||||
outline: var(--blue-60) 1px dotted;
|
||||
background-color: color-mix(in srgb, var(--in-content-accent-color) 15%, transparent);
|
||||
outline: var(--in-content-accent-color) 1px dotted;
|
||||
-moz-outline-radius: 2px;
|
||||
animation: fade-out 0.5s ease-out 2s forwards;
|
||||
/* Show the border to spotlight the components in high-contrast mode. */
|
||||
|
|
@ -349,13 +349,19 @@ checkbox {
|
|||
}
|
||||
|
||||
#handlersView > richlistitem {
|
||||
min-height: 30px !important;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
#handlersView > richlistitem > hbox > hbox > menulist {
|
||||
margin-block: 0;
|
||||
margin-inline-end: 0;
|
||||
#handlersView .actionsMenu {
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
|
||||
#handlersView .actionsMenu::part(label) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.certManagerRichlistBox > richlistitem {
|
||||
|
|
@ -366,14 +372,11 @@ checkbox {
|
|||
margin-inline: 10px 9px !important;
|
||||
}
|
||||
|
||||
#handlersView .actionsMenu::part(icon),
|
||||
.actionIcon {
|
||||
margin-inline: 11px 8px !important;
|
||||
}
|
||||
|
||||
.actionsMenu {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.actionsMenu > menupopup > menuitem {
|
||||
padding-inline-start: 10px !important;
|
||||
}
|
||||
|
|
@ -450,13 +453,13 @@ checkbox {
|
|||
#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
|
||||
list-style-image: url("chrome://global/skin/icons/check.svg");
|
||||
-moz-context-properties: fill, stroke;
|
||||
fill: #2292d0;
|
||||
fill: var(--in-content-accent-color);
|
||||
}
|
||||
|
||||
#engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
|
||||
#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
|
||||
fill: white;
|
||||
stroke: #0095dd;
|
||||
fill: var(--in-content-item-selected-text);
|
||||
stroke: var(--in-content-item-selected);
|
||||
}
|
||||
|
||||
#engineList > treechildren::-moz-tree-row,
|
||||
|
|
@ -548,7 +551,7 @@ checkbox {
|
|||
/* `transparent` will use the dialogText color in high-contrast themes and
|
||||
when page colors are disabled */
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3.5px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
|
||||
display: -moz-box;
|
||||
margin: 0;
|
||||
|
|
@ -565,11 +568,20 @@ checkbox {
|
|||
|
||||
.dialogTitleBar {
|
||||
margin-top: 0;
|
||||
padding: 3.5px 0;
|
||||
background-color: var(--in-content-dialog-header-background);
|
||||
padding: 6px 4px;
|
||||
border-bottom: 1px solid var(--in-content-border-color);
|
||||
}
|
||||
|
||||
@supports not -moz-bool-pref("browser.proton.enabled") {
|
||||
.dialogBox {
|
||||
border-radius: 3.5px;
|
||||
}
|
||||
.dialogTitleBar {
|
||||
padding: 3.5px 0;
|
||||
background-color: var(--in-content-dialog-header-background);
|
||||
}
|
||||
} /*** END !proton ***/
|
||||
|
||||
.dialogTitle {
|
||||
font-size: .9em;
|
||||
font-weight: 600;
|
||||
|
|
@ -582,6 +594,8 @@ checkbox {
|
|||
background-color: transparent; /* override common.css, but keep hover/active states */
|
||||
min-width: 0;
|
||||
min-height: auto;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
margin-inline: 0 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
/* Permissions */
|
||||
|
||||
#trackingGroup {
|
||||
--section-highlight-background-color: rgba(69, 161, 255, 0.2);
|
||||
--section-highlight-background-color: color-mix(in srgb, var(--in-content-accent-color) 20%, transparent);
|
||||
}
|
||||
|
||||
.content-blocking-icon,
|
||||
|
|
@ -151,8 +151,8 @@
|
|||
}
|
||||
|
||||
.content-blocking-category {
|
||||
border: 1px solid var(--in-content-border-color);
|
||||
background-color: rgba(215, 215, 219, 0.2);
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
background-color: rgba(215, 215, 219, 0.1);
|
||||
}
|
||||
|
||||
.content-blocking-category.disabled {
|
||||
|
|
@ -183,11 +183,11 @@
|
|||
|
||||
.arrowhead:not([disabled]):hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--grey-90-a10);
|
||||
background-color: var(--in-content-button-background-hover);
|
||||
}
|
||||
|
||||
.arrowhead:not([disabled]):hover:active {
|
||||
background-color: var(--grey-90-a20);
|
||||
background-color: var(--in-content-button-background-active);
|
||||
}
|
||||
|
||||
.arrowhead.up {
|
||||
|
|
@ -236,29 +236,20 @@
|
|||
min-height: 30px;
|
||||
padding: 0 20px;
|
||||
list-style-image: url("chrome://browser/skin/reload.svg");
|
||||
background-color: var(--blue-50);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.reload-tabs-button:not([disabled="true"]):hover {
|
||||
background-color: var(--blue-60);
|
||||
}
|
||||
|
||||
.reload-tabs-button:not([disabled="true"]):hover:active {
|
||||
background-color: var(--blue-70);
|
||||
}
|
||||
|
||||
.reload-tabs-button .button-icon {
|
||||
margin: 0 6px;
|
||||
color: white;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.reload-tabs-button .button-text {
|
||||
color: white;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.content-blocking-category.expanded:not(.selected) .content-blocking-warning {
|
||||
background-color: var(--grey-90-a10);
|
||||
background-color: var(--in-content-box-info-background);
|
||||
}
|
||||
|
||||
.content-blocking-category.selected .arrowhead {
|
||||
|
|
@ -266,7 +257,7 @@
|
|||
}
|
||||
|
||||
.content-blocking-category.selected {
|
||||
border: 1px solid #45A1FF;
|
||||
border: 1px solid var(--in-content-accent-color);
|
||||
background-color: var(--section-highlight-background-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,10 +18,8 @@
|
|||
</style>
|
||||
<rect width="630" height="35" x=".5" y=".5" fill="context-fill" class="addressBarOutline" rx="4" ry="4"/>
|
||||
<rect width="314" height="23" x="110.5" y="6.5" fill="rgba(255,255,255,0.05)" class="addressBarOutline" rx="4" ry="4"/>
|
||||
<path d="M604 .5h.5v34h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="addressBarIcons"/>
|
||||
<rect width="115" height="23" x="429.5" y="6.5" fill-opacity=".2" stroke="#0a84ff" rx="4" ry="4" class="searchBarFill"/>
|
||||
<path d="M604 .5h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="addressBarIcons"/> <rect width="115" height="23" x="429.5" y="6.5" fill-opacity=".2" stroke="#0a84ff" rx="4" ry="4" class="searchBarFill"/>
|
||||
<path fill-rule="evenodd" d="M445.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="searchBarFill"/>
|
||||
<path d="M620.75 17.25h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/>
|
||||
<circle cx="18.5" cy="18" r="12" fill="rgba(195, 195, 205, 0.1)" class="addressBarOutline"/>
|
||||
<path d="M23.783 17.292h-8.649l3.206-3.2a.738.738 0 0 0-1.044-1.043l-4.474 4.47a.72.72 0 0 0 0 1.043l4.474 4.47a.72.72 0 0 0 1.044 0 .72.72 0 0 0 0-1.043l-3.206-3.2h8.649a.749.749 0 1 0 0-1.497z" class="addressBarIcons"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 3.4 KiB После Ширина: | Высота: | Размер: 3.3 KiB |
|
|
@ -96,6 +96,7 @@ p {
|
|||
box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
|
||||
cursor: text;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding-block: 0;
|
||||
padding-inline: 46px 48px;
|
||||
|
|
|
|||
|
|
@ -2,31 +2,6 @@
|
|||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
/**
|
||||
* Line up the actions menu with action labels above and below it.
|
||||
* Equalize the distance from the left side of the action box to the left side
|
||||
* of the icon for both the menu and the non-menu versions of the action box.
|
||||
* Also make sure the labels are the same distance away from the icons.
|
||||
*/
|
||||
.actionsMenu {
|
||||
margin-block: 0;
|
||||
margin-inline: -2px 0;
|
||||
}
|
||||
|
||||
.typeIcon,
|
||||
.actionIcon {
|
||||
margin-inline: 3px;
|
||||
}
|
||||
|
||||
#handlersView > richlistitem label {
|
||||
margin-inline-start: 1px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#handlersView > richlistitem {
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
richlistitem[appHandlerIcon="handleInternally"],
|
||||
menuitem[appHandlerIcon="handleInternally"] {
|
||||
list-style-image: url("chrome://branding/content/icon32.png");
|
||||
|
|
@ -47,20 +22,6 @@ menuitem[appHandlerIcon="plugin"] {
|
|||
list-style-image: url("chrome://global/skin/icons/plugin.svg");
|
||||
}
|
||||
|
||||
.actionsMenu::part(icon) {
|
||||
margin-inline: 4px 6px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.actionsMenu > menupopup > menuitem > .menu-iconic-left {
|
||||
padding-inline: 0 2px;
|
||||
}
|
||||
|
||||
.actionsMenu > menupopup > menuitem {
|
||||
padding-inline-start: 4px;
|
||||
}
|
||||
|
||||
#appList {
|
||||
min-height: 212px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -136,7 +136,6 @@ button {
|
|||
padding: 10px 20px;
|
||||
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,15 +5,14 @@
|
|||
:host {
|
||||
display: grid;
|
||||
padding: 1em 0 1em;
|
||||
background-color: var(--in-content-box-background);
|
||||
border-block: 0.5px solid var(--in-content-box-border-color);
|
||||
border-block: 0.5px solid var(--in-content-border-color);
|
||||
border-inline: 0.5px solid transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:host(:hover) {
|
||||
background-color: var(--in-content-item-hover);
|
||||
border-inline-color: var(--in-content-box-border-color);
|
||||
border-inline-color: var(--in-content-border-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -234,6 +234,7 @@ section:not(.active) {
|
|||
padding-block: 12px;
|
||||
padding-inline: 20px;
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
background-color: var(--in-content-box-background);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 24px;
|
||||
margin-inline-end: 24px;
|
||||
|
|
@ -281,8 +282,8 @@ section:not(.active) {
|
|||
}
|
||||
|
||||
.bar-inner {
|
||||
background-color: #0a84ff;
|
||||
border: 1px solid #0060df;
|
||||
background-color: var(--in-content-accent-color);
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -304,7 +305,7 @@ table {
|
|||
|
||||
td {
|
||||
padding-bottom: 0.25em;
|
||||
border-bottom: 1px solid var(--in-content-box-border-color);
|
||||
border-bottom: 1px solid var(--in-content-border-color);
|
||||
}
|
||||
|
||||
tr:not(:first-child):hover {
|
||||
|
|
|
|||
|
|
@ -521,7 +521,7 @@ addon-details {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--in-content-box-border-color);
|
||||
border-top: 1px solid var(--in-content-border-color);
|
||||
margin: 0 calc(var(--card-padding) * -1);
|
||||
padding: var(--card-padding);
|
||||
color: var(--in-content-text-color);
|
||||
|
|
@ -691,8 +691,8 @@ li.permission-info > label {
|
|||
margin-top: 8px;
|
||||
/* Pull the buttons flush with the side of the card */
|
||||
margin-inline: calc(var(--card-padding) * -1);
|
||||
border-bottom: 1px solid var(--in-content-box-border-color);
|
||||
border-top: 1px solid var(--in-content-box-border-color);
|
||||
border-bottom: 1px solid var(--in-content-border-color);
|
||||
border-top: 1px solid var(--in-content-border-color);
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
@supports -moz-bool-pref("browser.proton.enabled") {
|
||||
label {
|
||||
margin: 1px 3px !important;
|
||||
margin: 1px 3px;
|
||||
}
|
||||
|
||||
:host([native]) {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ richlistitem[selected="true"] {
|
|||
color: -moz-cellhighlighttext;
|
||||
}
|
||||
|
||||
richlistbox:focus > richlistitem[selected="true"] {
|
||||
richlistbox:where(:focus) > richlistitem[selected="true"] {
|
||||
background-color: Highlight;
|
||||
color: HighlightText;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
@supports -moz-bool-pref("browser.proton.enabled") {
|
||||
label:not([native]) {
|
||||
margin: 0 3px !important;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
:host([native]) {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ richlistitem[selected="true"] {
|
|||
color: -moz-DialogText;
|
||||
}
|
||||
|
||||
richlistbox:focus > richlistitem[selected="true"] {
|
||||
richlistbox:where(:focus) > richlistitem[selected="true"] {
|
||||
background-color: Highlight;
|
||||
color: HighlightText;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,5 +76,5 @@ th {
|
|||
|
||||
td {
|
||||
padding-bottom: 0.25em;
|
||||
border-bottom: 1px solid var(--in-content-box-border-color);
|
||||
border-bottom: 1px solid var(--in-content-border-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@
|
|||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
|
||||
<circle cx="8" cy="8" r="4.5"/>
|
||||
<circle cx="8" cy="8" r="4"/>
|
||||
</svg>
|
||||
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 394 B После Ширина: | Высота: | Размер: 392 B |
|
|
@ -8,17 +8,17 @@
|
|||
|
||||
:host,
|
||||
:root {
|
||||
--in-content-page-color: #0c0c0d;
|
||||
--in-content-page-color: rgb(21, 20, 26);
|
||||
--in-content-page-background: #fff;
|
||||
--in-content-text-color: var(--grey-90);
|
||||
--in-content-text-color: var(--in-content-page-color);
|
||||
--in-content-deemphasized-text: var(--grey-60);
|
||||
--in-content-box-background: #fff;
|
||||
--in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
|
||||
--in-content-box-border-color: var(--grey-90-a30);
|
||||
--in-content-box-border-color: rgb(143, 143, 157);
|
||||
--in-content-box-info-background: #f0f0f4;
|
||||
--in-content-item-hover: rgba(69, 161, 255, 0.2); /* blue 40 a20 */
|
||||
--in-content-item-selected: #0a84ff;
|
||||
--in-content-item-selected-text: #fff;
|
||||
--in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent);
|
||||
--in-content-item-selected: var(--in-content-primary-button-background);
|
||||
--in-content-item-selected-text: var(--in-content-primary-button-text-color);
|
||||
--in-content-icon-color: rgb(91,91,102);
|
||||
--in-content-accent-color: #0a84ff;
|
||||
--in-content-accent-color-active: #0060df;
|
||||
|
|
@ -62,11 +62,11 @@
|
|||
--checkbox-unchecked-active-bgcolor: rgb(207,207,216);
|
||||
--checkbox-checked-bgcolor: rgb(0,97,224);
|
||||
--checkbox-checked-color: rgb(251,251,254);
|
||||
--checkbox-checked-border-color: transparent;
|
||||
--checkbox-checked-hover-bgcolor: rgb(2,80,187);
|
||||
--checkbox-checked-active-bgcolor: rgb(5,62,148);
|
||||
|
||||
--blue-40: #45a1ff;
|
||||
--blue-40-a10: rgb(69, 161, 255, 0.1);
|
||||
--blue-50: #0a84ff;
|
||||
--blue-50-a30: rgba(10, 132, 255, 0.3);
|
||||
--blue-60: #0060df;
|
||||
|
|
@ -76,7 +76,6 @@
|
|||
--grey-30: #d7d7db;
|
||||
--grey-40: #b1b1b3;
|
||||
--grey-60: #4a4a4f;
|
||||
--grey-90: #0c0c0d;
|
||||
--grey-90-a10: rgba(12, 12, 13, 0.1);
|
||||
--grey-90-a20: rgba(12, 12, 13, 0.2);
|
||||
--grey-90-a30: rgba(12, 12, 13, 0.3);
|
||||
|
|
@ -115,6 +114,8 @@
|
|||
:host,
|
||||
:root {
|
||||
--in-content-page-background: #f9f9fa;
|
||||
--in-content-page-color: #0c0c0d;
|
||||
--in-content-box-border-color: var(--grey-90-a30);
|
||||
--in-content-box-info-background: var(--grey-20);
|
||||
--in-content-button-background: var(--grey-90-a10);
|
||||
--in-content-button-background-hover: var(--grey-90-a20);
|
||||
|
|
@ -138,17 +139,15 @@
|
|||
/* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
|
||||
--in-content-page-background: rgb(28,27,34);
|
||||
--in-content-page-color: rgb(251,251,254);
|
||||
--in-content-text-color: var(--in-content-page-color);
|
||||
--in-content-deemphasized-text: rgb(191,191,201);
|
||||
|
||||
--in-content-box-background: #202023;
|
||||
--in-content-box-background: rgb(35, 34, 43);
|
||||
--in-content-box-background-odd: rgba(249,249,250,0.05);
|
||||
--in-content-box-info-background: rgba(249,249,250,0.15);
|
||||
|
||||
--in-content-border-color: rgba(249,249,250,0.2);
|
||||
--in-content-border-hover: rgba(249,249,250,0.3);
|
||||
--in-content-border-invalid: rgb(255,132,139);
|
||||
--in-content-box-border-color: rgba(249,249,250,0.2);
|
||||
|
||||
--in-content-button-background: rgb(43,42,51);
|
||||
--in-content-button-background-hover: rgb(82,82,94);
|
||||
|
|
@ -164,9 +163,9 @@
|
|||
--in-content-danger-button-background-hover: #ffbdc5;
|
||||
--in-content-danger-button-background-active: #ffdfe7;
|
||||
|
||||
--in-content-table-background: #202023;
|
||||
--in-content-table-background: rgb(35, 34, 43);
|
||||
--in-content-table-border-dark-color: rgba(249,249,250,0.2);
|
||||
--in-content-table-header-background: #002b57;
|
||||
--in-content-table-header-background: rgb(5, 64, 150);
|
||||
--in-content-dialog-header-background: rgba(249,249,250,0.05);
|
||||
|
||||
--in-content-accent-color: var(--in-content-primary-button-background);
|
||||
|
|
@ -200,6 +199,9 @@
|
|||
--in-content-page-color: rgb(249, 249, 250);
|
||||
--in-content-deemphasized-text: var(--grey-40);
|
||||
|
||||
--in-content-box-background: #202023;
|
||||
--in-content-box-border-color: rgba(249,249,250,0.2);
|
||||
|
||||
--in-content-button-background: rgba(249,249,250,0.1);
|
||||
--in-content-button-background-hover: rgba(249,249,250,0.15);
|
||||
--in-content-button-background-active: rgba(249,249,250,0.2);
|
||||
|
|
@ -215,6 +217,9 @@
|
|||
--in-content-link-color-hover: var(--blue-50);
|
||||
--in-content-link-color-active: var(--blue-60);
|
||||
--in-content-link-color-visited: var(--blue-40);
|
||||
|
||||
--in-content-table-background: #202023;
|
||||
--in-content-table-header-background: #002b57;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -268,7 +273,7 @@ xul|tabpanels {
|
|||
|
||||
xul|tabs {
|
||||
margin-bottom: 10px;
|
||||
border-block: 1px solid var(--in-content-border-color);
|
||||
border-bottom: 1px solid var(--in-content-border-color);
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -559,7 +564,7 @@ html|textarea,
|
|||
xul|search-textbox {
|
||||
appearance: none;
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
color: inherit;
|
||||
background-color: var(--in-content-box-background);
|
||||
}
|
||||
|
|
@ -577,11 +582,13 @@ html|textarea {
|
|||
margin: 2px 4px;
|
||||
}
|
||||
|
||||
@supports not -moz-bool-pref("browser.proton.enabled") {
|
||||
html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):enabled:not(:focus):hover,
|
||||
html|textarea:enabled:not(:focus):hover,
|
||||
xul|search-textbox:not([disabled="true"], [focused]):hover {
|
||||
border-color: var(--in-content-border-hover);
|
||||
}
|
||||
} /*** END !proton ***/
|
||||
|
||||
html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
|
||||
html|textarea:focus,
|
||||
|
|
@ -597,6 +604,12 @@ html|textarea:-moz-ui-invalid {
|
|||
}
|
||||
|
||||
@supports not -moz-bool-pref("browser.proton.enabled") {
|
||||
html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
|
||||
html|textarea,
|
||||
xul|search-textbox {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
|
||||
html|textarea:focus,
|
||||
xul|search-textbox[focused] {
|
||||
|
|
@ -777,8 +790,8 @@ xul|radio {
|
|||
html|input[type="radio"],
|
||||
xul|*.radio-check {
|
||||
appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 100%;
|
||||
|
|
@ -805,20 +818,13 @@ xul|*.radio-check[selected] {
|
|||
fill: currentColor;
|
||||
color: var(--in-content-primary-button-text-color);
|
||||
background-color: var(--in-content-primary-button-background);
|
||||
background-image: url("chrome://global/skin/icons/radio.svg");
|
||||
border-color: transparent;
|
||||
|
||||
/* Style the button also when printing with "Print Backgrounds" unchecked */
|
||||
color-adjust: exact;
|
||||
}
|
||||
|
||||
html|input[type="radio"]:checked {
|
||||
background-image: url("chrome://global/skin/icons/radio.svg");
|
||||
}
|
||||
|
||||
xul|*.radio-check[selected] {
|
||||
list-style-image: url("chrome://global/skin/icons/radio.svg");
|
||||
}
|
||||
|
||||
html|input[type="radio"]:enabled:checked:hover,
|
||||
xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
|
||||
background-color: var(--in-content-primary-button-background-hover);
|
||||
|
|
@ -1028,16 +1034,25 @@ xul|richlistbox {
|
|||
margin-inline: 0;
|
||||
background-color: var(--in-content-box-background);
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
color: var(--in-content-text-color);
|
||||
}
|
||||
|
||||
@supports not -moz-bool-pref("browser.proton.enabled") {
|
||||
html|select[size][multiple],
|
||||
xul|listheader,
|
||||
xul|richlistbox {
|
||||
border-radius: 2px;
|
||||
}
|
||||
} /*** END !proton ***/
|
||||
|
||||
xul|listheader {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding-bottom: 1px;
|
||||
box-shadow: inset 0 -1px var(--in-content-border-color);
|
||||
overflow: clip; /* Clip border-radius */
|
||||
}
|
||||
|
||||
xul|listheader + xul|richlistbox {
|
||||
|
|
@ -1065,8 +1080,17 @@ xul|treechildren::-moz-tree-row(hover) {
|
|||
background-color: var(--in-content-item-hover);
|
||||
}
|
||||
|
||||
xul|richlistbox > xul|richlistitem[selected],
|
||||
xul|treechildren::-moz-tree-row(selected) {
|
||||
background-color: var(--in-content-item-selected);
|
||||
color: var(--in-content-item-selected-text);
|
||||
}
|
||||
|
||||
xul|richlistbox:not(#categories) > xul|richlistitem[selected] {
|
||||
/* Ensure buttons inside richlistitems (containers, applications) look OK */
|
||||
--in-content-button-background: color-mix(in srgb, currentColor 20%, transparent);
|
||||
--in-content-button-background-hover: color-mix(in srgb, currentColor 40%, transparent);
|
||||
--in-content-button-background-active: color-mix(in srgb, currentColor 60%, transparent);
|
||||
}
|
||||
|
||||
/* Use a 2px border so that selected row highlight is still visible behind
|
||||
|
|
@ -1090,7 +1114,7 @@ xul|tree {
|
|||
appearance: none;
|
||||
font-size: 1em;
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--in-content-box-background);
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
|
|
@ -1105,10 +1129,23 @@ xul|richlistbox:-moz-focusring {
|
|||
xul|treecols {
|
||||
appearance: none;
|
||||
border: none;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom: 1px solid var(--in-content-border-color);
|
||||
overflow: clip; /* Clip border-radius */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@supports not -moz-bool-pref("browser.proton.enabled") {
|
||||
xul|tree {
|
||||
border-radius: 2px;
|
||||
}
|
||||
xul|treecols {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
} /*** END !proton ***/
|
||||
|
||||
xul|treecol:not([hideheader="true"]),
|
||||
xul|treecolpicker {
|
||||
appearance: none;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
@supports -moz-bool-pref("browser.proton.enabled") {
|
||||
label {
|
||||
margin: 0 3px !important;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
:host([native]) {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ richlistitem[selected="true"] {
|
|||
color: -moz-cellhighlighttext;
|
||||
}
|
||||
|
||||
richlistbox:focus > richlistitem[selected="true"] {
|
||||
richlistbox:where(:focus) > richlistitem[selected="true"] {
|
||||
background-color: Highlight;
|
||||
color: HighlightText;
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче