Popover style improvement
- Fix transparent bookmarks menu (#324) - Urlbar suggestions: improve shadow and item focus style
This commit is contained in:
parent
5021fedf2e
commit
183b5f0b3d
|
@ -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 */
|
||||
|
|
|
@ -29,10 +29,8 @@
|
|||
/* 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-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 */
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue