Remove old buttons styling
This commit is contained in:
Rafael Mardojai CM
parent
38015ae6ac
commit
77e013f956
|
|
@ -1,197 +0,0 @@
|
|||
/* Header bar's buttons */
|
||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
|
||||
/* Overrides: Make the back button the same as other buttons */
|
||||
:root:not([uidensity=compact]) #back-button {
|
||||
border-radius: var(--toolbarbutton-border-radius) !important;
|
||||
}
|
||||
:root:not([uidensity=compact]) #back-button > .toolbarbutton-icon {
|
||||
background-color: unset !important;
|
||||
border: unset !important;
|
||||
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
|
||||
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
|
||||
padding: var(--toolbarbutton-inner-padding) !important;
|
||||
border-radius: var(--toolbarbutton-border-radius);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:root:not([uidensity=compact]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
|
||||
background-color: var(--toolbarbutton-hover-background) !important;
|
||||
box-shadow: unset;
|
||||
border-color: unset;
|
||||
}
|
||||
:root:not([uidensity=compact]) #back-button[open] > .toolbarbutton-icon,
|
||||
:root:not([uidensity=compact]) #back-button:not([disabled]):hover:active > .toolbarbutton-icon {
|
||||
background-color: var(--toolbarbutton-active-background) !important;
|
||||
border-color: unset;
|
||||
}
|
||||
|
||||
/* Remove the header bar buttons' hover styles */
|
||||
#nav-bar {
|
||||
--toolbarbutton-active-background: transparent !important;
|
||||
--toolbarbutton-hover-background: transparent !important;
|
||||
}
|
||||
|
||||
/* Header bar buttons */
|
||||
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton) {
|
||||
border: 1px solid var(--gnome-button-border-color);
|
||||
border-bottom-color: var(--gnome-button-border-accent-color);
|
||||
border-radius: 5px !important;
|
||||
margin: 6px 3px !important;
|
||||
padding: 0 2px !important;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
color: var(--gnome-toolbar-color) !important;
|
||||
}
|
||||
/* Inactive window */
|
||||
:root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton) {
|
||||
border: 1px solid var(--gnome-inactive-button-border-color);
|
||||
}
|
||||
:root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton) image,
|
||||
/* Glitch: Downloads button's icon */
|
||||
:root:-moz-window-inactive #downloads-indicator-anchor {
|
||||
opacity: .7 !important;
|
||||
}
|
||||
|
||||
/* Enabled header bar buttons */
|
||||
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([disabled]),
|
||||
/* Glitch: Reload button */
|
||||
:root[customizing] #nav-bar > hbox toolbaritem toolbarbutton {
|
||||
background-image: var(--gnome-button-background);
|
||||
box-shadow: var(--gnome-button-box-shadow);
|
||||
}
|
||||
/* Glitch: Cut / Copy / Paste buttons' icons
|
||||
* :not(#hack) is there just to elevate rule priority */
|
||||
:root[customizing] #nav-bar > hbox toolbaritem toolbarbutton image:not(#hack) {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
/* Hovered */
|
||||
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([open]):not([disabled]):hover {
|
||||
background-image: var(--gnome-button-hover-background);
|
||||
}
|
||||
/* Active */
|
||||
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled]):active,
|
||||
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled])[open] {
|
||||
background-image: var(--gnome-button-active-background);
|
||||
box-shadow: var(--gnome-button-active-box-shadow);
|
||||
border-color: var(--gnome-button-active-border-color);
|
||||
border-bottom-color: var(--gnome-button-active-border-color);
|
||||
border-top-color: var(--gnome-button-active-border-accent-color);
|
||||
}
|
||||
/* Inactive window */
|
||||
:root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled]) {
|
||||
background-image: var(--gnome-inactive-button-background);
|
||||
box-shadow: var(--gnome-inactive-button-box-shadow);
|
||||
}
|
||||
/* Glitch: Reload and Cut / Copy / Paste buttons */
|
||||
:root:-moz-window-inactive[customizing] #nav-bar #stop-reload-button toolbarbutton,
|
||||
:root:-moz-window-inactive[customizing] #nav-bar #edit-controls toolbarbutton {
|
||||
background-image: var(--gnome-inactive-button-background);
|
||||
box-shadow: var(--gnome-inactive-button-box-shadow);
|
||||
}
|
||||
/* Glitch: Reload and Cut / Copy / Paste buttons' icons */
|
||||
:root:-moz-window-inactive[customizing] #nav-bar #stop-reload-button image.toolbarbutton-icon,
|
||||
:root:-moz-window-inactive[customizing] #nav-bar #edit-controls image.toolbarbutton-icon {
|
||||
opacity: .7 !important;
|
||||
}
|
||||
|
||||
/* Disabled header bar buttons */
|
||||
#nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] {
|
||||
background-color: var(--gnome-button-disabled-background);
|
||||
border: 1px solid var(--gnome-button-disabled-border-color) !important;
|
||||
box-shadow: var(--gnome-button-disabled-box-shadow);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
#nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled]:hover {
|
||||
background-color: var(--gnome-button-disabled-background) !important;
|
||||
}
|
||||
#nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] image {
|
||||
opacity: .4 !important;
|
||||
}
|
||||
/* Glitch: Overflow and Burger buttons
|
||||
* :not(#hack) is there just to elevate rule priority */
|
||||
:root[customizing] #nav-bar > toolbarbutton[disabled]:not(#hack),
|
||||
:root[customizing] #nav-bar > toolbaritem > toolbarbutton[disabled]:not(#hack) {
|
||||
opacity: .5 !important;
|
||||
}
|
||||
/* Glitch: Overflow button's icon */
|
||||
:root[customizing] #nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] image {
|
||||
fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
|
||||
}
|
||||
/* Inactive window */
|
||||
:root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] {
|
||||
background-color: var(--gnome-inactive-button-disabled-background);
|
||||
border: var(--gnome-inactive-button-disabled-border);
|
||||
box-shadow: var(--gnome-inactive-button-disabled-box-shadow);
|
||||
}
|
||||
:root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] image {
|
||||
opacity: .3 !important;
|
||||
}
|
||||
|
||||
/* Combined buttons
|
||||
* :not(#hack) is there just to elevate rule priority */
|
||||
#nav-bar .toolbaritem-combined-buttons toolbarbutton:not(:last-child):not(#hack),
|
||||
#nav-bar #back-button:not(#hack) {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
border-right-width: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
#nav-bar .toolbaritem-combined-buttons toolbarbutton:not(:first-child):not(#hack),
|
||||
#nav-bar #forward-button:not(#hack) {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
/* Glitch: Combined buttons' margin */
|
||||
#nav-bar .toolbaritem-combined-buttons {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
/* Remove combined buttons' separators */
|
||||
#nav-bar .toolbaritem-combined-buttons separator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Bookmark buttons */
|
||||
#nav-bar toolbarbutton.bookmark-item {
|
||||
width: auto !important;
|
||||
}
|
||||
#nav-bar toolbarbutton.bookmark-item .toolbarbutton-icon {
|
||||
margin-left: 6px;
|
||||
}
|
||||
#nav-bar toolbarbutton.bookmark-item .toolbarbutton-text {
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
/* Remove Burger button's left separator */
|
||||
#PanelUI-button {
|
||||
border: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Space main menu button from other headerbar buttons
|
||||
#nav-bar #PanelUI-menu-button:not(#hack) {
|
||||
margin-left: 10px !important;
|
||||
}*/
|
||||
|
||||
/* User sync menu, bigger avatar */
|
||||
#fxa-toolbar-menu-button .toolbarbutton-badge-stack {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
#fxa-avatar-image {
|
||||
height: 26px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 26px !important;
|
||||
}
|
||||
|
||||
/* Fix library animation */
|
||||
#library-animatable-box {
|
||||
--library-button-height: 46px !important;
|
||||
--library-icon-x: 1716px !important;
|
||||
/*--library-icon-x: 1715.9833984375px !important;*/
|
||||
}
|
||||
#library-button[animate] > .toolbarbutton-icon {
|
||||
fill: transparent !important;
|
||||
}
|
||||
|
|
@ -2,21 +2,10 @@
|
|||
|
||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
|
||||
/* Style main context menu buttons */
|
||||
/* Style main context menu & buttons */
|
||||
#context-navigation {
|
||||
padding: 4px 8px 8px;
|
||||
}
|
||||
#context-navigation menuitem {
|
||||
-moz-appearance: none !important;
|
||||
background-image: var(--gnome-button-background);
|
||||
box-shadow: var(--gnome-button-box-shadow);
|
||||
border-width: 1px 1px 1px 0;
|
||||
border-style: solid;
|
||||
border-color: var(--gnome-button-border-color);
|
||||
border-bottom-color: var(--gnome-button-border-accent-color);
|
||||
height: 34px;
|
||||
text-align: center !important;
|
||||
}
|
||||
#context-navigation > menuitem > .menu-iconic-left {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
|
@ -24,24 +13,6 @@
|
|||
--toolbarbutton-active-background: transparent !important;
|
||||
--toolbarbutton-hover-background: transparent !important;
|
||||
}
|
||||
#context-navigation menuitem:hover:not([disabled]) {
|
||||
background-image: var(--gnome-button-hover-background);
|
||||
color: var(--gnome-toolbar-color) !important;
|
||||
}
|
||||
#context-navigation menuitem:active:not([disabled]) {
|
||||
background-image: var(--gnome-button-active-background) !important;
|
||||
box-shadow: var(--gnome-button-active-box-shadow) !important;
|
||||
border-color: var(--gnome-button-active-border-color) !important;
|
||||
border-bottom-color: var(--gnome-button-active-border-color) !important;
|
||||
border-top-color: var(--gnome-button-active-border-accent-color) !important;
|
||||
}
|
||||
#context-navigation menuitem:first-child {
|
||||
border-radius: 5px 0 0 5px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
#context-navigation menuitem:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
/* Remove icons from the main context menu */
|
||||
#contentAreaContextMenu menuitem image,
|
||||
|
|
@ -52,60 +23,6 @@
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Main menu combined buttons */
|
||||
#appMenu-popup .toolbaritem-combined-buttons toolbarbutton {
|
||||
-moz-appearance: none !important;
|
||||
background: var(--gnome-button-background) !important;
|
||||
box-shadow: var(--gnome-button-box-shadow) !important;
|
||||
border-width: 1px 1px 1px 0 !important;
|
||||
border-style: solid !important;
|
||||
border-color: var(--gnome-button-border-color) !important;
|
||||
border-bottom-color: var(--gnome-button-border-accent-color) !important;
|
||||
border-radius: 0 !important;
|
||||
height: 34px !important;
|
||||
min-width: 34px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
#appMenu-popup .toolbaritem-combined-buttons toolbarbutton:first-of-type,
|
||||
#appMenu-popup #appMenu-fullscreen-button {
|
||||
border-top-left-radius: 5px !important;
|
||||
border-bottom-left-radius: 5px !important;
|
||||
border-left-width: 1px !important;
|
||||
}
|
||||
#appMenu-popup .toolbaritem-combined-buttons toolbarbutton:last-of-type,
|
||||
#appMenu-popup #appMenu-zoomEnlarge-button {
|
||||
border-top-right-radius: 5px !important;
|
||||
border-bottom-right-radius: 5px !important;
|
||||
}
|
||||
#appMenu-popup .toolbaritem-combined-buttons toolbarbutton[disabled] {
|
||||
background: var(--gnome-button-disabled-background) !important;
|
||||
border-color: var(--gnome-button-disabled-border-color) !important;
|
||||
box-shadow: var(--gnome-button-disabled-box-shadow) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
#appMenu-popup .toolbaritem-combined-buttons toolbarbutton[disabled]:hover {
|
||||
background: var(--gnome-button-disabled-background) !important;
|
||||
}
|
||||
#appMenu-popup .toolbaritem-combined-buttons toolbarbutton[disabled] image {
|
||||
opacity: .4 !important;
|
||||
}
|
||||
#appMenu-popup .toolbaritem-combined-buttons toolbarbutton:hover {
|
||||
background: var(--gnome-button-hover-background) !important;
|
||||
}
|
||||
#appMenu-popup .toolbaritem-combined-buttons toolbarbutton:active {
|
||||
background-image: var(--gnome-button-active-background) !important;
|
||||
box-shadow: var(--gnome-button-active-box-shadow) !important;
|
||||
border-color: var(--gnome-button-active-border-color) !important;
|
||||
border-bottom-color: var(--gnome-button-active-border-color) !important;
|
||||
border-top-color: var(--gnome-button-active-border-accent-color) !important;
|
||||
}
|
||||
#appMenu-popup .toolbaritem-combined-buttons toolbarseparator {
|
||||
border: 0 !important;
|
||||
}
|
||||
#appMenu-zoomReset-button {
|
||||
padding: 2px 16px !important;
|
||||
}
|
||||
|
||||
/* Main menu remove items icons */
|
||||
panelview vbox.panel-subview-body > toolbarbutton image {
|
||||
display: none;
|
||||
|
|
@ -175,29 +92,6 @@ panelview vbox.panel-subview-body > toolbarbutton label {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
#downloadsPanel-mainView .download-state .downloadButton {
|
||||
-moz-appearance: none !important;
|
||||
background-image: var(--gnome-button-background) !important;
|
||||
box-shadow: var(--gnome-button-box-shadow) !important;
|
||||
border: 1px solid var(--gnome-button-border-color) !important;
|
||||
border-bottom-color: var(--gnome-button-border-accent-color) !important;
|
||||
border-radius: 100%;
|
||||
min-width: 34px !important;
|
||||
width: 34px !important;
|
||||
height: 34px !important;
|
||||
margin: auto;
|
||||
}
|
||||
#downloadsPanel-mainView .download-state .downloadButton:hover {
|
||||
background: var(--gnome-button-hover-background) !important;
|
||||
}
|
||||
#downloadsPanel-mainView .download-state .downloadButton:active {
|
||||
background-image: var(--gnome-button-active-background) !important;
|
||||
box-shadow: var(--gnome-button-active-box-shadow) !important;
|
||||
border-color: var(--gnome-button-active-border-color) !important;
|
||||
border-bottom-color: var(--gnome-button-active-border-color) !important;
|
||||
border-top-color: var(--gnome-button-active-border-accent-color) !important;
|
||||
}
|
||||
|
||||
#downloadsPanel-mainView .download-state .downloadButton .button-box {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
|
@ -205,3 +99,26 @@ panelview vbox.panel-subview-body > toolbarbutton label {
|
|||
#downloadsPanel-mainView .download-state toolbarseparator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Customization overflow menu position */
|
||||
#customization-panel-container {
|
||||
padding: 0 75px 25px !important;
|
||||
margin-top: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
#customization-panelWrapper > .panel-arrowbox {
|
||||
margin-bottom: -5px !important;
|
||||
}
|
||||
|
||||
/* Confirmation Hint */
|
||||
#confirmation-hint .panel-arrowcontent {
|
||||
background: var(--gnome-button-suggested-action-background) !important;
|
||||
border-color: var(--gnome-button-suggested-action-border-color) !important;
|
||||
}
|
||||
#confirmation-hint .panel-arrow {
|
||||
fill: var(--gnome-button-suggested-action-border-color) !important;
|
||||
stroke: var(--gnome-button-suggested-action-border-color) !important;
|
||||
}
|
||||
#confirmation-hint-message {
|
||||
color: white !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,112 +91,4 @@ toolbarseparator[orient="vertical"] {
|
|||
/* Style popover header */
|
||||
.panel-header {
|
||||
border-bottom: 1px solid var(--gnome-popover-separator-color) !important;
|
||||
}
|
||||
|
||||
/* Style popovers buttons */
|
||||
.subviewbutton.panel-subview-footer,
|
||||
.panel-footer button,
|
||||
#downloadsHistory,
|
||||
#overflowMenu-customize-button,
|
||||
#appMenu-popup .panel-banner-item {
|
||||
-moz-appearance: none !important;
|
||||
background: var(--gnome-button-background) !important;
|
||||
box-shadow: var(--gnome-button-box-shadow) !important;
|
||||
border: 1px solid var(--gnome-button-border-color) !important;
|
||||
border-bottom-color: var(--gnome-button-border-accent-color) !important;
|
||||
border-radius: 5px !important;
|
||||
padding: 2px 16px !important;
|
||||
height: 34px !important;
|
||||
min-height: 34px !important;
|
||||
}
|
||||
|
||||
.subviewbutton.panel-subview-footer:not(:only-of-type),
|
||||
.panel-footer button:not(:only-of-type) {
|
||||
border-right-width: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.subviewbutton.panel-subview-footer:not(:only-of-type):first-of-type,
|
||||
.panel-footer button:not(:only-of-type):first-of-type {
|
||||
border-radius: 5px 0 0 5px !important;
|
||||
}
|
||||
.subviewbutton.panel-subview-footer:not(:only-of-type):last-of-type,
|
||||
.panel-footer button:not(:only-of-type):last-of-type {
|
||||
border-right-width: 1px !important;
|
||||
border-radius: 0 5px 5px 0 !important;
|
||||
}
|
||||
|
||||
.subviewbutton.panel-subview-footer:hover,
|
||||
.panel-footer button:hover,
|
||||
#downloadsHistory:hover,
|
||||
#overflowMenu-customize-button:hover,
|
||||
#appMenu-popup .panel-banner-item:hover {
|
||||
outline: 0 !important;
|
||||
background: var(--gnome-button-hover-background) !important;
|
||||
}
|
||||
|
||||
.subviewbutton.panel-subview-footer:active,
|
||||
.panel-footer button:active,
|
||||
#downloadsHistory:active,
|
||||
#overflowMenu-customize-button:active,
|
||||
#appMenu-popup .panel-banner-item:active {
|
||||
background-image: var(--gnome-button-active-background) !important;
|
||||
box-shadow: var(--gnome-button-active-box-shadow) !important;
|
||||
border-color: var(--gnome-button-active-border-color) !important;
|
||||
border-bottom-color: var(--gnome-button-active-border-color) !important;
|
||||
border-top-color: var(--gnome-button-active-border-accent-color) !important;
|
||||
}
|
||||
|
||||
/* Style popovers buttons with suggested action */
|
||||
button.popup-notification-primary-button,
|
||||
#editBookmarkPanelDoneButton {
|
||||
color: white !important;
|
||||
background: var(--gnome-button-suggested-action-background) !important;
|
||||
border-color: var(--gnome-button-suggested-action-border-color) !important;
|
||||
border-bottom-color: var(--gnome-button-suggested-action-border-bottom-color) !important;
|
||||
box-shadow: var(--gnome-button-suggested-action-box-shadow) !important;
|
||||
text-shadow: 0 -1px rgba(0, 0, 0, 0.543529);
|
||||
}
|
||||
button.popup-notification-primary-button.popup-notification-button:hover,
|
||||
#editBookmarkPanelDoneButton:hover {
|
||||
background: var(--gnome-button-suggested-action-hover-background) !important;
|
||||
}
|
||||
button.popup-notification-primary-button:active {
|
||||
|
||||
}
|
||||
|
||||
/* Style popovers footer buttons with destructive action */
|
||||
#editBookmarkPanelRemoveButton {
|
||||
color: white !important;
|
||||
background: var(--gnome-button-destructive-action-background) !important;
|
||||
border-radius: 3px 0 0 3px !important;
|
||||
border-color: var(--gnome-button-destructive-action-border-color) !important;
|
||||
border-bottom-color: var(--gnome-button-destructive-action-border-bottom-color) !important;
|
||||
box-shadow: var(--gnome-button-destructive-action-box-shadow) !important;
|
||||
text-shadow: 0 -1px rgba(0, 0, 0, 0.560784);
|
||||
}
|
||||
#editBookmarkPanelRemoveButton:hover {
|
||||
background: var(--gnome-button-destructive-action-hover-background) !important;
|
||||
}
|
||||
|
||||
/* Customization overflow menu position */
|
||||
#customization-panel-container {
|
||||
padding: 0 75px 25px !important;
|
||||
margin-top: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
#customization-panelWrapper > .panel-arrowbox {
|
||||
margin-bottom: -5px !important;
|
||||
}
|
||||
|
||||
/* Confirmation Hint */
|
||||
#confirmation-hint .panel-arrowcontent {
|
||||
background: var(--gnome-button-suggested-action-background) !important;
|
||||
border-color: var(--gnome-button-suggested-action-border-color) !important;
|
||||
}
|
||||
#confirmation-hint .panel-arrow {
|
||||
fill: var(--gnome-button-suggested-action-border-color) !important;
|
||||
stroke: var(--gnome-button-suggested-action-border-color) !important;
|
||||
}
|
||||
#confirmation-hint-message {
|
||||
color: white !important;
|
||||
}
|
||||
Loading…
Reference in New Issue