mirror of
https://github.com/vinceliuice/WhiteSur-gtk-theme.git
synced 2025-06-06 15:33:02 +00:00
Fixed #943
This commit is contained in:
parent
56537e75fd
commit
f82220eddd
@ -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;
|
||||
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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";
|
||||
|
@ -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";
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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";
|
||||
|
3
src/other/firefox/common/icons/translations.svg
Normal file
3
src/other/firefox/common/icons/translations.svg
Normal 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 |
@ -60,6 +60,7 @@ button.customizationmode-button {
|
||||
|
||||
.permission-popup-permission-remove-button {
|
||||
padding: 2px 4px !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
menulist {
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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;
|
||||
|
202
src/other/firefox/common/parts/notification.css
Normal file
202
src/other/firefox/common/parts/notification.css
Normal 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%;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user