This commit is contained in:
vinceliuice 2023-10-03 20:56:41 +08:00
parent 56537e75fd
commit f82220eddd
14 changed files with 351 additions and 55 deletions

View File

@ -115,12 +115,16 @@
--gnome-tab-attention-icon-color: #718be8;
/* Switch */
--gnome-switch-background: #282828;
--gnome-switch-border-color: #1b1b1b;
--gnome-switch-background: #464646;
--gnome-switch-hover-background: #525252;
--gnome-switch-active-background: #606060;
--gnome-switch-border-color: transparent;
--gnome-switch-slider-background: linear-gradient(to bottom, #3c3c3c 20%, #353535 90%);
--gnome-switch-slider-border-color: #111111;
--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-background: #15539e;
--gnome-switch-pressed-background: #315bef;
--gnome-switch-pressed-hover-background: #5073f1;
--gnome-switch-pressed-active-background: #6584f3;
--gnome-switch-active-border-color: #030c17;
--gnome-switch-active-slider-border-color: #030c17;

View File

@ -114,14 +114,18 @@
--gnome-tab-attention-icon-color: #718be8;
/* Switch */
--gnome-switch-background: #e1dedb;
--gnome-switch-border-color: #cdc7c2;
--gnome-switch-background: #b2b2b2;
--gnome-switch-hover-background: #a0a0a0;
--gnome-switch-active-background: #929292;
--gnome-switch-border-color: transparent;
--gnome-switch-slider-background: linear-gradient(to bottom, white 10%, white 90%);
--gnome-switch-slider-border-color: #bfb8b1;
--gnome-switch-slider-border-color: #b8b8b8;
--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-background: #3584e4;
--gnome-switch-active-border-color: #185fb4;
--gnome-switch-active-slider-border-color: #185fb4;
--gnome-switch-pressed-background: #315bef;
--gnome-switch-pressed-hover-background: #5073f1;
--gnome-switch-pressed-active-background: #6584f3;
/* Dirty hacks for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be

View File

@ -219,3 +219,37 @@ toolbarspring {
opacity: 0.8 !important;
fill: var(--gnome-toolbar-color) !important;
}
/*translations-button*/
#translations-button[translationsactive] > #translations-button-icon {
fill: var(--theme-primary-active-color) !important;
fill-opacity: 1;
}
#translations-button-circle-arrows {
height: 16px;
width: 16px;
list-style-image: url("chrome://browser/skin/sync.svg");
fill: var(--theme-primary-active-color) !important;
fill-opacity: 1;
margin-inline: 1px;
}
#translations-button-locale {
background-color: var(--theme-primary-active-color) !important;
color: white !important;
border-radius: 4px;
font-size: 0.8em;
height: 20px;
min-width: 20px;
text-align: center;
padding-top: 3px;
padding-inline: 1px;
box-sizing: border-box;
margin-inline: 2px -2px;
margin-block: -2px;
}
#translations-button[translationsactive="true"] {
width: auto !important;
}

View File

@ -12,6 +12,7 @@
@import "parts/tabsbar-alt.css";
@import "parts/findbar.css";
@import "parts/dialogs.css";
@import "parts/notification.css";
@import "parts/video-player.css";
@import "parts/remove-white-flash.css";
@import "parts/custom-icons.css";

View File

@ -12,6 +12,7 @@
@import "parts/tabsbar.css";
@import "parts/findbar.css";
@import "parts/dialogs.css";
@import "parts/notification.css";
@import "parts/video-player.css";
@import "parts/remove-white-flash.css";
@import "parts/custom-icons.css";

View File

@ -114,12 +114,16 @@
--gnome-tab-attention-icon-color: #718be8;
/* Switch */
--gnome-switch-background: #282828;
--gnome-switch-border-color: #1b1b1b;
--gnome-switch-background: #464646;
--gnome-switch-hover-background: #525252;
--gnome-switch-active-background: #606060;
--gnome-switch-border-color: transparent;
--gnome-switch-slider-background: linear-gradient(to bottom, #3c3c3c 20%, #353535 90%);
--gnome-switch-slider-border-color: #111111;
--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-background: #15539e;
--gnome-switch-pressed-background: #315bef;
--gnome-switch-pressed-hover-background: #5073f1;
--gnome-switch-pressed-active-background: #6584f3;
--gnome-switch-active-border-color: #030c17;
--gnome-switch-active-slider-border-color: #030c17;

View File

@ -112,14 +112,18 @@
--gnome-tab-attention-icon-color: #718be8;
/* Switch */
--gnome-switch-background: #e1dedb;
--gnome-switch-border-color: #cdc7c2;
--gnome-switch-background: #b2b2b2;
--gnome-switch-hover-background: #a0a0a0;
--gnome-switch-active-background: #929292;
--gnome-switch-border-color: transparent;
--gnome-switch-slider-background: linear-gradient(to bottom, white 10%, white 90%);
--gnome-switch-slider-border-color: #bfb8b1;
--gnome-switch-slider-border-color: #b8b8b8;
--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-background: #3584e4;
--gnome-switch-active-border-color: #185fb4;
--gnome-switch-active-slider-border-color: #185fb4;
--gnome-switch-pressed-background: #315bef;
--gnome-switch-pressed-hover-background: #5073f1;
--gnome-switch-pressed-active-background: #6584f3;
/* Dirty hacks for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be

View File

@ -235,3 +235,37 @@ toolbarspring {
opacity: 0.8 !important;
fill: var(--gnome-toolbar-color) !important;
}
/*translations-button*/
#translations-button[translationsactive] > #translations-button-icon {
fill: var(--theme-primary-active-color) !important;
fill-opacity: 1;
}
#translations-button-circle-arrows {
height: 16px;
width: 16px;
list-style-image: url("chrome://browser/skin/sync.svg");
fill: var(--theme-primary-active-color) !important;
fill-opacity: 1;
margin-inline: 1px;
}
#translations-button-locale {
background-color: var(--theme-primary-active-color) !important;
color: white !important;
border-radius: 4px;
font-size: 0.8em;
height: 20px;
min-width: 20px;
text-align: center;
padding-top: 3px;
padding-inline: 1px;
box-sizing: border-box;
margin-inline: 2px -2px;
margin-block: -2px;
}
#translations-button[translationsactive="true"] {
width: auto !important;
}

View File

@ -12,11 +12,11 @@
@import "parts/tabsbar.css";
@import "parts/findbar.css";
@import "parts/dialogs.css";
@import "parts/notification.css";
@import "parts/video-player.css";
@import "parts/remove-white-flash.css";
@import "parts/custom-icons.css";
@import "parts/icons.css";
@import "parts/video-player.css";
@import "colors/light.css";
@import "colors/dark.css";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m4 0v2h-4v1h7.0879c-0.32818 1.2173-1.0515 3.1702-2.5879 4.9609-1.1609-1.3551-1.8594-2.8064-2.2734-3.9609h-1.0449c0.44206 1.3182 1.2381 3.0697 2.6387 4.6855-0.76616 0.74967-1.6939 1.4449-2.8203 2.0117v1.1094c1.4202-0.64826 2.5701-1.4851 3.5-2.3984 0.97137 0.95419 2.1841 1.8252 3.6934 2.4844l-1.8965 4.1074h1.0996l1.3848-3h4.4375l1.3848 3h1.0996l-4.1523-8.998v-0.0019531h-1.0997l-1.8398 3.9844c-1.4071-0.61084-2.5328-1.4179-3.4336-2.3008 1.7975-2.073 2.599-4.3661 2.9355-5.6836h0.88672v-1h-4v-2h-1zm7 8.1914 1.7578 3.8086h-3.5156l1.7578-3.8086z" fill="#6584f3"/>
</svg>

After

Width:  |  Height:  |  Size: 657 B

View File

@ -60,6 +60,7 @@ button.customizationmode-button {
.permission-popup-permission-remove-button {
padding: 2px 4px !important;
align-items: center !important;
}
menulist {

View File

@ -4,50 +4,48 @@
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
/* Switchers */
.protections-popup-tp-switch-box {
padding: 0 !important;
-moz-box-pack: start !important;
.toggle-button {
--toggle-height: 26px !important;
--toggle-width: 48px !important;
--toggle-border-radius: 24px !important;
--toggle-border-color: var(--gnome-switch-border-color) !important;
--toggle-background-color: var(--gnome-switch-background) !important;
--toggle-background-color-hover: var(--gnome-switch-hover-background) !important;
--toggle-background-color-active: var(--gnome-switch-active-background) !important;
--toggle-background-color-pressed: var(--gnome-switch-pressed-background) !important;
--toggle-background-color-pressed-hover: var(--gnome-switch-pressed-hover-background) !important;
--toggle-background-color-pressed-active: var(--gnome-switch-pressed-active-background) !important;
--toggle-dot-height: 22px !important;
--toggle-dot-background-color: #ffffff !important;
--toggle-dot-background-color-on-pressed: #ffffff !important;
--toggle-dot-margin: 1px !important/* border: 0 !important;*/
}
#protections-popup-tp-switch:not([enabled])[showdotindicator]::after {
display: none !important;
.toggle-button:enabled:hover {
background: var(--toggle-background-color-hover);
border-color: var(--toggle-border-color);
}
#protections-popup-tp-switch {
background: var(--gnome-switch-background) !important;
border: 1px solid var(--gnome-switch-border-color) !important;
border-radius: 24px !important;
min-width: 50px !important;
width: 50px !important;
min-height: 26px !important;
padding: 0 !important;
position: relative !important;
display: block !important;
margin: 0 !important;
.toggle-button:enabled:active {
background: var(--toggle-background-color-active);
border-color: var(--toggle-border-color);
}
#protections-popup-tp-switch:hover {
border-color: var(--gnome-switch-border-color) !important;
.toggle-button[aria-pressed="true"] {
background: var(--toggle-background-color-pressed);
border-color: transparent;
}
#protections-popup-tp-switch::before {
position: absolute !important;
top: -1px;
left: -1px;
background: var(--gnome-switch-slider-background) !important;
border: 1px solid var(--gnome-switch-slider-border-color) !important;
box-shadow: var(--gnome-switch-slider-box-shadow);
border-radius: 24px !important;
height: 24px !important;
width: 24px !important;
transition: left .2s ease;
outline: 0 !important;
.toggle-button[aria-pressed="true"]:enabled:hover {
background: var(--toggle-background-color-pressed-hover);
border-color: transparent;
}
#protections-popup-tp-switch[enabled] {
background: var(--gnome-switch-active-background) !important;
border-color: var(--gnome-switch-active-border-color) !important;
padding-inline-start: 24px !important;
.toggle-button[aria-pressed="true"]:enabled:active {
background: var(--toggle-background-color-pressed-active);
border-color: transparent;
}
#protections-popup-tp-switch[enabled]:hover {
border-color: var(--gnome-switch-active-border-color) !important;
}
#protections-popup-tp-switch[enabled]::before {
border-color: var(--gnome-switch-active-slider-border-color) !important;
left: 24px;
.toggle-button::before {
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

View File

@ -108,6 +108,12 @@ arrowscrollbox[orient="horizontal"] {
margin: 2px 0;
}
/*translations-button*/
#translations-button-icon {
list-style-image: url("../icons/translations.svg") !important;
margin-right: 0 !important;
}
/* Tree views */
treechildren::-moz-tree-twisty {
list-style-image: url("../icons/pan-end-symbolic.svg") !important;

View File

@ -0,0 +1,202 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* 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/. */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html "http://www.w3.org/1999/xhtml";
.notificationbox-stack {
/* Prevent the animation from overlapping the navigation toolbar */
overflow: clip;
}
.notificationbox-stack[notificationside="top"] {
/* Create a stacking context for the box-shadow */
position: relative;
z-index: 1;
}
notification {
min-height: 32px;
padding-inline-start: 16px;
color: var(--gnome-toolbar-color);
background: var(--gnome-toolbar-background) !important;
border-color: var(--gnome-toolbar-border-color) !important;
border-style: solid;
border-width: 1px 0;
text-shadow: none;
font-size: 1.15em;
align-items: center !important;
vertical-align: middle !important;
--notification-background: var(--gnome-toolbar-background);
--notification-text: var(--gnome-toolbar-color);
--notification-border: var(--gnome-toolbar-border-color);
--notification-button-background: var(--gnome-button-background);
--notification-button-background-hover: var(--gnome-button-hover-background);
--notification-button-background-active: var(--gnome-button-active-background);
--notification-button-text: inherit;
--notification-primary-button-background: #0060df;
--notification-primary-button-background-hover: #003eaa;
--notification-primary-button-background-active: #002275;
--notification-primary-button-text: var(--gnome-toolbar-color);
}
notification:-moz-window-inactive {
background: var(--gnome-inactive-toolbar-background) !important;
}
notification description {
margin-bottom: 0 !important;
}
notification element {
vertical-align: middle !important;
margin-top: 0 !important;
margin-right: 0 !important;
}
@media (prefers-color-scheme: dark) {
notification[type="info"]:-moz-lwtheme {
--notification-background: var(--gnome-toolbar-background);
--notification-text: var(--gnome-toolbar-color);
}
notification[type="info"] {
--notification-button-background: var(--gnome-button-background);
--notification-button-background-hover: var(--gnome-button-hover-background);
--notification-button-background-active: var(--gnome-button-active-background);
}
}
.notificationbox-stack[notificationside="top"] > notification {
border-top-style: none;
}
.notificationbox-stack[notificationside="bottom"] > notification {
border-bottom-style: none;
}
notification[type="warning"] {
--notification-background: #ffe900;
--notification-text: #0c0c0d;
}
notification[type="critical"] {
--notification-background: #d70022;
--notification-text: #fff;
}
notification[type="critical"] > .close-icon:hover {
background-color: color-mix(in srgb, currentColor 20%, transparent);
}
notification[type="critical"] > .close-icon:hover:active {
background-color: color-mix(in srgb, currentColor 30%, transparent);
}
.messageText {
margin-inline-start: 12px !important;
margin-block: 0;
}
.messageText > .text-link {
text-decoration: underline;
margin-block: 0;
}
.messageText > .text-link:not(.notification-link) {
color: inherit !important;
margin-inline: 0;
}
.messageImage {
width: 24px;
margin: 0;
-moz-context-properties: fill;
fill: currentColor;
vertical-align: middle !important;
}
notification[type="info"] > hbox > .messageImage {
list-style-image: url("chrome://global/skin/icons/help.svg");
}
notification[type="warning"] > hbox > .messageImage {
list-style-image: url("chrome://global/skin/icons/warning.svg");
}
notification[type="critical"] > hbox > .messageImage {
list-style-image: url("chrome://global/skin/icons/error.svg");
}
.messageCloseButton {
margin: 0 6px !important;
padding: 0;
}
.messageCloseButton > .toolbarbutton-icon {
padding: 6px;
width: 32px;
/* Close button needs to be clickable from the edge of the window */
margin-inline-end: 8px;
}
.messageCloseButton:focus-visible {
/* Override the dotted outline from button.css */
outline: none;
}
.messageCloseButton:focus-visible > .toolbarbutton-icon {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
border-radius: var(--toolbarbutton-border-radius, 4px);
}
.notification-button {
appearance: none;
border: 1px solid transparent;
border-radius: 4px;
background-color: var(--notification-button-background);
color: var(--notification-button-text);
padding: 0 6px;
margin: 4px 6px;
height: 24px;
vertical-align: middle !important;
}
.notification-button[disabled] {
opacity: 0.5;
}
.notification-button:not([disabled]):hover {
background-color: var(--notification-button-background-hover);
}
.notification-button:not([disabled]):hover:active {
background-color: var(--notification-button-background-active);
}
.notification-button:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
.notification-button.primary {
background-color: var(--notification-primary-button-background);
color: var(--notification-primary-button-text);
}
.notification-button.primary:not([disabled]):hover {
background-color: var(--notification-primary-button-background-hover);
}
.notification-button.primary:not([disabled]):hover:active {
background-color: var(--notification-primary-button-background-active);
}
.notificationbox-stack {
background-color: var(--toolbar-bgcolor);
width: 100%;
}