pmOS-tweaks/fenix-fox
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Define color variables for the notification popup

Browse source 
Variable values are defined such that Firefox' own rules will override
them where applicable (Win10 currently). This change lets us simplify
css by not requiring fallback values and it is clearer since color definitions are all in one place.
This commit is contained in:
MrOtherGuy 2021-07-05 17:27:33 +03:00
parent e2e4fba00d
commit 73a9bdd072
1 changed files with 37 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
chrome/proton_dark_light_notifications.css
View file

@ -4,13 +4,34 @@ See the above repository for updates as well as full license text. */
/* Makes web notifications use dark/light theme based on your selected theme, and makes them fit a bit better to rounded proton style. */ /* Makes web notifications use dark/light theme based on your selected theme, and makes them fit a bit better to rounded proton style. */
@-moz-document url("chrome://global/content/alerts/alert.xhtml") { @-moz-document url("chrome://global/content/alerts/alert.xhtml") {
/* line below removes background from the notification "window" on linux */
#alertNotification{ background: transparent !important; }
/* Color scheme definitions
* Intentionally let Firefox override these on Windows10
*/
:root{
--menu-color: #15141a;
--menu-background-color: #f9f9fb;
--menu-border-color: #cfcfd8;
--menuitem-hover-background-color: #e0e0e6;
}
@media (-moz-toolbar-prefers-color-scheme:dark) {
:root {
--menu-border-color: #5b5b66;
--menu-color: #fbfbfe;
--menu-background-color: #2b2a33;
--menuitem-hover-background-color: #52525e;
}
#alertSourceLabel { color: rgb(5,209,241) !important; }
}
/* The line below removes background "layer" from the notification on linux, Windows and macOS don't have that layer in the first place */
:root{ background: transparent !important; }
/* Make Firefox actually use the colors set above */
#alertBox { #alertBox {
color: var(--menu-color, #15141a) !important; color: var(--menu-color) !important;
background-color: var(--menu-background-color, #f9f9fb) !important; background-color: var(--menu-background-color) !important;
border-color: var(--menu-border-color, #cfcfd8) !important; border-color: var(--menu-border-color) !important;
border-radius: 6px !important; border-radius: 6px !important;
-moz-window-shadow: cliprounded !important; -moz-window-shadow: cliprounded !important;
} }
@ -21,8 +42,16 @@ See the above repository for updates as well as full license text. */
margin-inline: 0 !important; margin-inline: 0 !important;
margin-bottom: -4px !important; margin-bottom: -4px !important;
} }
.close-icon,
#alertSettings {
background: transparent !important
}
.close-icon:hover > .toolbarbutton-icon,
#alertSettings:is(:hover,[open]) > .button-box > .box-inherit {
background-color: var(--menuitem-hover-background-color);
}
/* Shape */ /* Reshape and move the buttons a bit */
.close-icon > .toolbarbutton-icon, .close-icon > .toolbarbutton-icon,
#alertSettings > .button-box > .box-inherit { #alertSettings > .button-box > .box-inherit {
border-radius: 4px !important; border-radius: 4px !important;
@ -35,33 +64,4 @@ See the above repository for updates as well as full license text. */
#alertSettings > .button-box > .box-inherit > .button-icon { #alertSettings > .button-box > .box-inherit > .button-icon {
padding: 1px; padding: 1px;
} }
/* Color */
.close-icon,
#alertSettings {
background: transparent !important
}
.close-icon:hover > .toolbarbutton-icon,
#alertSettings:is(:hover,[open]) > .button-box > .box-inherit {
background-color: var(--menuitem-hover-background-color, #e0e0e6) !important;
}
@media (-moz-toolbar-prefers-color-scheme:dark) {
:root {
--menu-border-color: #5b5b66 !important;
}
#alertBox {
color: var(--menu-color, #fbfbfe) !important;
background-color: var(--menu-background-color, #2b2a33) !important;
}
.close-icon:hover > .toolbarbutton-icon,
#alertSettings:is(:hover, [open]) > .button-box > .box-inherit {
background-color: var(--menuitem-hover-background-color, #52525e) !important;
}
#alertSourceLabel {
color: rgb(5,209,241) !important;
}
}
} }