jarno
/
firefox-gnome-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Popover style improvement 

- Fix transparent bookmarks menu (#324)
- Urlbar suggestions: improve shadow and item focus style
This commit is contained in:
Rafael Mardojai CM 2022-05-18 13:06:59 -05:00
parent 5021fedf2e
commit 183b5f0b3d
6 changed files with 111 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
theme/colors/dark.css
View File

@ -29,10 +29,8 @@
/* Popups */
--gnome-menu-background: #2f2f2f;
--gnome-menu-border-color: #1b1b1b;
--gnome-popover-background: #383838;
--gnome-popover-border-color: #1b1b1b;
--gnome-popover-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
--gnome-popover-button-hover-background: var(--gnome-button-hover-background);
--gnome-menu-shadow: 0 1px 5px 1px rgba(0,0,0, .09), 0 2px 14px 3px rgba(0,0,0, .05);
--gnome-menu-button-hover-background: var(--gnome-button-hover-background);
--gnome-popover-separator-color: rgba(0, 0, 0, 0.1);
/* Header bar */

8
theme/colors/light.css
View File

@ -29,11 +29,9 @@
/* Popups */
--gnome-menu-background: #ffffff;
--gnome-menu-border-color: #cdc7c2;
--gnome-popover-background: #ffffff;
--gnome-popover-border-color: #cdc7c2;
--gnome-popover-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
--gnome-popover-button-hover-background: var(--gnome-button-hover-background);
--gnome-popover-separator-color: rgba(0, 0, 0, 0.1);
--gnome-menu-shadow: 0 1px 5px 1px rgba(0,0,0, .09), 0 2px 14px 3px rgba(0,0,0, .05);
--gnome-menu-button-hover-background: var(--gnome-button-hover-background);
--gnome-popover-separator-color: rgba(0, 0, 0, 0.1);
/* Header bar */
--gnome-headerbar-background: #EBEBEB;

22
theme/parts/icons.css
View File

@ -119,28 +119,28 @@ arrowscrollbox[orient="horizontal"] {
/* Popovers subview menu arrow */
#identity-popup-mainView .subviewbutton-nav::after,
.widget-overflow-list .subviewbutton-nav::after,
.PanelUI-subView .subviewbutton-nav::after,
.protections-popup-category::after,
.subviewbutton-back {
fill-opacity: 1 !important;
opacity: .3;
}
#identity-popup-mainView .subviewbutton-nav::after,
.widget-overflow-list .subviewbutton-nav::after,
.PanelUI-subView .subviewbutton-nav::after {
content: "" !important;
background: url("../icons/pan-end-symbolic.svg");
background: url("../icons/go-next-symbolic.svg");
background-size: contain;
height: 16px;
width: 16px;
margin-top: -2px !important;
fill-opacity: 1 !important;
}
.protections-popup-category::after {
content: url("../icons/pan-end-symbolic.svg") !important;
}
.identity-popup-content-blocking-category::after {
content: url("../icons/pan-start-symbolic.svg") !important;
}
#identity-popup-security-expander .button-icon {
list-style-image: url("../icons/pan-start-symbolic.svg") !important;
content: url("../icons/go-next-symbolic.svg") !important;
}
/* Popovers subview back button */
.subviewbutton-back {
list-style-image: url("../icons/pan-start-symbolic.svg") !important;
list-style-image: url("../icons/go-previous-symbolic.svg") !important;
}
/* Sub menu arrow */

19
theme/parts/popups-contents.css
View File

@ -37,6 +37,10 @@
#appMenu-popup .toolbaritem-combined-buttons .before-label {
width: 32px !important;
}
.subviewbutton#appMenu-zoom-controls2 {
padding-right: 0 !important;
padding-top: 6px !important;
}
/* User sync account remove avatar */
#fxa-menu-avatar {
@ -148,6 +152,16 @@
max-width: initial !important;
}
/* URLbar popups */
#identity-popup-mainView,
#permission-popup-mainView,
#protections-popup-mainView,
#identity-popup-mainView-panel-header,
#permission-popup-mainView-panel-header,
#protections-popup-mainView-panel-header {
min-width: calc(var(--popup-width) + 16px) !important;
max-width: calc(var(--popup-width) + 16px) !important;
}
/* Identity popup */
#identity-popup-security,
@ -311,11 +325,6 @@
opacity: 0.7;
}
#protections-popup-content,
#protections-popup-footer {
padding: 0 !important;
}
#protections-popup-footer {
display: flex;
justify-content: flex-start;

117
theme/parts/popups.css
View File

@ -7,13 +7,12 @@ menupopup {
-moz-appearance: none !important;
background: var(--gnome-menu-background) !important;
border: 1px solid var(--gnome-menu-border-color) !important;
border-radius: 5px;
border-radius: 12px;
padding: 4px 0 !important;
color: var(--gnome-toolbar-color) !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}
#PlacesToolbar menupopup {
background: var(--gnome-popover-background) !important;
padding: 4px !important;
}
.menupopup-arrowscrollbox {
@ -44,34 +43,69 @@ panel[type=arrow] {
}
/* Style popovers */
.panel-arrowcontent,
.panel-header, .PanelUI-subView,
.panel-subview-body, #widget-overflow-mainView, #protections-popup-footer,
panelview {
border: 0 !important;
background: transparent !important;
panel:not([remote]), #BMB_bookmarksPopup {
--arrowpanel-background: var(--gnome-menu-background) !important;
}
panel {
--arrowpanel-border-color: var(--gnome-menu-border-color) !important;
--arrowpanel-border-radius: 12px !important;
--arrowpanel-padding: 0 !important;
}
/* Padding rules */
.panel-subview-body, .panel-header,
.protections-popup-section,
#protections-popup-mainView-panel-header-section,
.identity-popup-section {
padding: 0 8px 8px !important;
}
:is(
.panel-subview-body, .panel-header,
.protections-popup-section,
#protections-popup-mainView-panel-header-section,
.identity-popup-section
):first-child {
padding-top: 8px !important;
}
/* Padding with margign */
.subviewbutton.panel-subview-footer-button {
margin: 8px !important;
}
#identity-popup-security-button {
margin: 0 8px !important;
}
/* Separator */
.PanelUI-subView toolbarseparator:not([orient="vertical"]) {
margin: 6px 2px !important;
}
.panel-subview-body + toolbarseparator:not([orient="vertical"]),
#identity-popup-clear-sitedata-footer toolbarseparator,
#identity-popup-more-info-footer toolbarseparator {
margin: 0 !important;
}
.panel-subview-body:has(scrollbar) {
background: red !important;
border-top: 1px solid var(--gnome-popover-separator-color) !important;
}
/* Panel arrow */
.panel-arrowcontent {
background: var(--arrowpanel-background) !important;
border: 1px solid !important;
border-color: var(--gnome-popover-border-color) !important;
border-radius: 9px !important;
border: 1px solid var(--gnome-menu-border-color) !important;
border-radius: 12px !important;
color: var(--gnome-toolbar-color) !important;
}
.panel-arrow {
fill: var(--arrowpanel-background) !important;
stroke: var(--gnome-popover-border-color) !important;
stroke: var(--gnome-menu-border-color) !important;
display: -moz-inline-box !important;
}
panel:not([remote]), #BMB_bookmarksPopup {
--arrowpanel-background: var(--gnome-popover-background) !important;
}
panel {
--panel-padding: 12px !important;
}
.panel-no-padding panelview, .panel-no-padding > .panel-subview-body, .panel-no-padding > .panel-header {
padding: var(--panel-padding) !important;
}
.panel-no-padding > .panel-header {
padding-bottom: 0 !important;
@ -80,20 +114,12 @@ panel[type="arrow"].panel-no-padding::part(content) {
padding: var(--panel-padding) !important;
}
.PanelUI-subView toolbarseparator:not([orient="vertical"]) {
margin: 10px 2px !important;
}
/* Panel header */
.panel-header {
padding: 0 0 10px 0 !important;
position: relative !important;
}
.panel-header + toolbarseparator,
#identity-popup-mainView-panel-header + toolbarseparator,
#permission-popup-mainView-panel-header + toolbarseparator,
#protections-popup-mainView-panel-header-section + toolbarseparator {
display: none !important;
}
/* Panel footer */
.panel-footer {
background-color: transparent !important;
display: flex;
@ -110,28 +136,33 @@ panel[type="arrow"].panel-no-padding::part(content) {
.proton-zap {
border-image: unset !important;
}
.panel-subview-body {
padding: 0 !important;
}
.panel-subview-footer {
margin-top: 10px !important;
}
/* Remove unwanted separators */
.panel-header + toolbarseparator,
#identity-popup-mainView-panel-header + toolbarseparator,
#permission-popup-mainView-panel-header + toolbarseparator,
#protections-popup-mainView-panel-header-section + toolbarseparator {
display: none !important;
}
/* Style popovers menu buttons */
.subviewbutton:not(#appMenu-fxa-label2),
.toolbarbutton-1, .protections-popup-category,
.identity-popup-content-blocking-category,
#PlacesToolbar .bookmark-item {
border-radius: 5px !important;
border-radius: 6px !important;
color: var(--gnome-toolbar-color) !important;
font: menu !important;
width: 100%;
padding: 0 12px !important;
}
.subviewbutton,
.protections-popup-category,
.identity-popup-content-blocking-category {
padding: 4px !important;
min-height: 32px !important;
margin: 0 !important;
}
@ -151,7 +182,10 @@ panel[type="arrow"].panel-no-padding::part(content) {
.subviewbutton:not([disabled], #appMenu-zoom-controls2, #appMenu-fxa-label2):hover, .toolbarbutton-1:not([disabled]):hover, .protections-popup-category:not([disabled]):hover,
.identity-popup-content-blocking-category:not([disabled]):hover, #PlacesToolbar .bookmark-item:hover, #PlacesToolbar .bookmark-item[open], #PlacesToolbar .bookmark-item[_moz-menuactive] {
background-color: var(--gnome-popover-button-hover-background) !important;
background-color: var(--gnome-menu-button-hover-background) !important;
}
#appMenu-fxa-label2 {
padding: 0 !important;
}
#appMenu-fxa-label2:hover {
background: transparent !important;
@ -159,17 +193,16 @@ panel[type="arrow"].panel-no-padding::part(content) {
.subviewbutton-back {
width: 100%;
-moz-box-align: start !important;
-moz-box-align: center !important;
-moz-box-pack: start !important;
padding: 10px !important;
}
.subviewbutton-back + h1 {
font-weight: normal !important;
font-weight: bold !important;
left: 0 !important;
padding: 5px !important;
padding: 0 !important;
pointer-events: none;
position: absolute !important;
top: 0 !important;
top: 11px !important;
width: 100%;
}
@ -178,7 +211,7 @@ toolbarseparator, menuseparator {
border-color: var(--gnome-popover-separator-color) !important;
}
toolbarseparator:not([orient="vertical"]) {
margin: 8px 0 !important;
margin: 3px 0 !important;
}
toolbarseparator[orient="vertical"] {
margin: 0 3px !important;

11
theme/parts/urlbar.css
View File

@ -41,7 +41,7 @@ toolbarspring {
margin: 11px 0 0 0 !important;
width: 100% !important;
position: absolute !important;
box-shadow: var(--gnome-popover-shadow) !important;
box-shadow: var(--gnome-menu-shadow) !important;
border-radius: 8px !important
}
@ -67,12 +67,11 @@ toolbarspring {
}
.urlbarView-row[selected] .urlbarView-row-inner {
background: transparent !important;
outline: 2px solid var(--gnome-focused-urlbar-border-color) !important;
color: var(--gnome-toolbar-color) !important;
background: var(--gnome-accent) !important;
color: white !important;
}
.urlbarView-row:hover .urlbarView-row-inner {
background: var(--gnome-focused-urlbar-item-hover) !important;
.urlbarView-row:not([selected]):hover .urlbarView-row-inner {
background: var(--gnome-menu-button-hover-background) !important;
}
.urlbarView-action {