e2e4fba00d
* notifications using firefox's cssvars * Proton dark notification border color like windows10
67 lines
2.2 KiB
CSS
67 lines
2.2 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/proton_dark_light_notifications.css made available under Mozilla Public License v. 2.0
|
|
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. */
|
|
|
|
@-moz-document url("chrome://global/content/alerts/alert.xhtml") {
|
|
/* line below removes background from the notification "window" on linux */
|
|
#alertNotification{ background: transparent !important; }
|
|
|
|
#alertBox {
|
|
color: var(--menu-color, #15141a) !important;
|
|
background-color: var(--menu-background-color, #f9f9fb) !important;
|
|
border-color: var(--menu-border-color, #cfcfd8) !important;
|
|
border-radius: 6px !important;
|
|
-moz-window-shadow: cliprounded !important;
|
|
}
|
|
#alertSettings {
|
|
fill: currentColor !important;
|
|
color: inherit !important;
|
|
border-radius: 0 !important;
|
|
margin-inline: 0 !important;
|
|
margin-bottom: -4px !important;
|
|
}
|
|
|
|
/* Shape */
|
|
.close-icon > .toolbarbutton-icon,
|
|
#alertSettings > .button-box > .box-inherit {
|
|
border-radius: 4px !important;
|
|
padding: 2px !important;
|
|
margin: 2px 2px -2px 0 !important;
|
|
}
|
|
#alertSettings > .button-box > .box-inherit {
|
|
margin: -4px 4px 3px 0 !important;
|
|
}
|
|
#alertSettings > .button-box > .box-inherit > .button-icon {
|
|
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;
|
|
}
|
|
}
|
|
}
|