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

Notifications using firefox's cssvars (#122)

Browse source 
* notifications using firefox's cssvars

* Proton dark notification border color like windows10
This commit is contained in:
MS_Y 2021-07-05 13:06:55 +00:00 committed by GitHub
parent 7893bb7db3
commit e2e4fba00d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
chrome/proton_dark_light_notifications.css
View file

@ -5,9 +5,15 @@ See the above repository for updates as well as full license text. */
@-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 */ /* line below removes background from the notification "window" on linux */
#alertNotification{ background: transparent !important } #alertNotification{ background: transparent !important; }
#alertBox{ border-radius: 6px !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 { #alertSettings {
fill: currentColor !important; fill: currentColor !important;
color: inherit !important; color: inherit !important;
@ -15,32 +21,45 @@ 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;
} }
#alertSettings,
.close-icon{ background: transparent !important }
.close-icon:hover > .toolbarbutton-icon, /* Shape */
#alertSettings:is(:hover,[open]) > .button-box > .box-inherit{ .close-icon > .toolbarbutton-icon,
background-color: rgba(0,0,0,.09) !important; #alertSettings > .button-box > .box-inherit {
} border-radius: 4px !important;
#alertSettings > .button-box > .box-inherit,
.close-icon > .toolbarbutton-icon{
padding: 2px !important; padding: 2px !important;
margin: 2px 2px -2px 0 !important; margin: 2px 2px -2px 0 !important;
border-radius: 4px !important;
} }
#alertSettings > .button-box > .box-inherit > .button-icon { padding: 1px } #alertSettings > .button-box > .box-inherit {
#alertSettings > .button-box > .box-inherit{ margin: -4px 4px 3px 0 !important; } 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;
}
@media (-moz-toolbar-prefers-color-scheme:dark){
#alertBox { #alertBox {
border-color: rgba(107,107,107,.3) !important; color: var(--menu-color, #fbfbfe) !important;
background-color: rgb(43,42,51) !important; background-color: var(--menu-background-color, #2b2a33) !important;
color: rgba(215,215,215,.9) !important;
} }
.close-icon:hover > .toolbarbutton-icon, .close-icon:hover > .toolbarbutton-icon,
#alertSettings:is(:hover,[open]) > .button-box > .box-inherit { #alertSettings:is(:hover, [open]) > .button-box > .box-inherit {
background-color: rgba(215,215,215,.1) !important; background-color: var(--menuitem-hover-background-color, #52525e) !important;
} }
#alertSourceLabel { #alertSourceLabel {
color: rgb(5,209,241) !important; color: rgb(5,209,241) !important;
} }