refactor: split theme.css into parts, issue #36
- extract remove-white-flash - extract toolbox code - extract a bit of header bar code
This commit is contained in:
parent
dab2ee9fd0
commit
df37a7af81
|
@ -0,0 +1,16 @@
|
|||
/* Header bar */
|
||||
|
||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
|
||||
/* Header bar colors */
|
||||
#nav-bar {
|
||||
background-image: var(--gnome-headerbar-bgimage) !important;
|
||||
border: none !important;
|
||||
border-bottom: var(--gnome-headerbar-border-bottom) !important;
|
||||
box-shadow: var(--gnome-headerbar-box-shadow) !important;
|
||||
}
|
||||
#nav-bar:-moz-window-inactive {
|
||||
background-image: var(--gnome-inactive-headerbar-bgimage) !important;
|
||||
border-bottom: var(--gnome-inactive-headerbar-border-bottom) !important;
|
||||
box-shadow: var(--gnome-inactive-headerbar-box-shadow) !important;
|
||||
}
|
|
@ -0,0 +1,11 @@
|
|||
/* Removes a white flash after you open or close a tab. Affects all variants,
|
||||
* but it's more visible on dark variants. */
|
||||
|
||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
|
||||
/* Overrides: Change the flash color */
|
||||
#tabbrowser-tabpanels,
|
||||
#tabbrowser-tabpanels[pendingpaint],
|
||||
browser {
|
||||
background-color: var(--gnome-browser-before-load-bgcolor) !important;
|
||||
}
|
|
@ -0,0 +1,55 @@
|
|||
/* Toolbox, a container for all toolbars (toolbox#navigator-toolbox):
|
||||
* - menu bar (toolbar#toolbar-menubar)
|
||||
* - tab bar (toolbar#TabsToolbar)
|
||||
* - header bar (toolbar#nav-bar)
|
||||
* - bookmark bar (toolbar#PersonalToolbar)
|
||||
* - add-ons can add their own toolbars (toolbar) */
|
||||
|
||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
|
||||
/* Toolbox colors */
|
||||
#navigator-toolbox {
|
||||
background-color: var(--gnome-tabbar-bgcolor) !important;
|
||||
border-bottom: var(--gnome-tabbar-border-bottom);
|
||||
}
|
||||
#navigator-toolbox:-moz-window-inactive {
|
||||
background-color: var(--gnome-inactive-tabbar-bgcolor) !important;
|
||||
border-bottom: var(--gnome-inactive-tabbar-border-bottom);
|
||||
}
|
||||
|
||||
/* Overrides: Remove border below the menu bar / above the header bar */
|
||||
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
|
||||
border-top-width: 0 !important;
|
||||
}
|
||||
#navigator-toolbox::after {
|
||||
border-bottom-width: 0 !important;
|
||||
}
|
||||
|
||||
/* Reorder toolbars */
|
||||
#navigator-toolbox #nav-bar {
|
||||
-moz-box-ordinal-group: 0;
|
||||
}
|
||||
#navigator-toolbox #toolbar-menubar {
|
||||
-moz-box-ordinal-group: 1;
|
||||
}
|
||||
#navigator-toolbox #PersonalToolbar {
|
||||
-moz-box-ordinal-group: 2;
|
||||
}
|
||||
#navigator-toolbox toolbar {
|
||||
-moz-box-ordinal-group: 10;
|
||||
}
|
||||
#navigator-toolbox #TabsToolbar {
|
||||
-moz-box-ordinal-group: 100;
|
||||
}
|
||||
|
||||
/* Overrides: Don't shift other toolbars on tab drag and drop */
|
||||
#TabsToolbar[movingtab] {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
#TabsToolbar[movingtab] > .tabbrowser-tabs {
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
#TabsToolbar[movingtab] + #nav-bar {
|
||||
margin-top: 0 !important;
|
||||
}
|
73
ui/theme.css
73
ui/theme.css
|
@ -1,72 +1,7 @@
|
|||
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
||||
|
||||
/* Browser area before a page starts loading */
|
||||
#tabbrowser-tabpanels, #tabbrowser-tabpanels[pendingpaint], browser {
|
||||
/* this is something white-ish by default which causes a white flash
|
||||
* everytime you open a new tab */
|
||||
background-color: var(--gnome-browser-before-load-bgcolor) !important;
|
||||
}
|
||||
|
||||
/* Container for all toolbars */
|
||||
#navigator-toolbox {
|
||||
background-color: var(--gnome-tabbar-bgcolor) !important;
|
||||
border-bottom: var(--gnome-tabbar-border-bottom);
|
||||
}
|
||||
#navigator-toolbox:-moz-window-inactive {
|
||||
background-color: var(--gnome-inactive-tabbar-bgcolor) !important;
|
||||
border-bottom: var(--gnome-inactive-tabbar-border-bottom);
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
#nav-bar {
|
||||
background-image: var(--gnome-headerbar-bgimage) !important;
|
||||
border: none !important;
|
||||
border-bottom: var(--gnome-headerbar-border-bottom) !important;
|
||||
box-shadow: var(--gnome-headerbar-box-shadow) !important;
|
||||
}
|
||||
#nav-bar:-moz-window-inactive {
|
||||
background-image: var(--gnome-inactive-headerbar-bgimage) !important;
|
||||
border-bottom: var(--gnome-inactive-headerbar-border-bottom) !important;
|
||||
box-shadow: var(--gnome-inactive-headerbar-box-shadow) !important;
|
||||
}
|
||||
|
||||
/* Tabs below the URL bar */
|
||||
#navigator-toolbox #nav-bar {
|
||||
-moz-box-ordinal-group: 0;
|
||||
}
|
||||
#navigator-toolbox #toolbar-menubar {
|
||||
-moz-box-ordinal-group: 1;
|
||||
}
|
||||
#navigator-toolbox #PersonalToolbar {
|
||||
-moz-box-ordinal-group: 2;
|
||||
}
|
||||
/* add-ons can add their own toolbars */
|
||||
#navigator-toolbox toolbar {
|
||||
-moz-box-ordinal-group: 10;
|
||||
}
|
||||
#navigator-toolbox #TabsToolbar {
|
||||
-moz-box-ordinal-group: 100;
|
||||
}
|
||||
|
||||
/* Don't teleport the URL bar when moving tabs */
|
||||
#TabsToolbar[movingtab] {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
#TabsToolbar[movingtab] > .tabbrowser-tabs {
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
#TabsToolbar[movingtab] + #nav-bar {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Remove border above the URL bar */
|
||||
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
|
||||
border-top-width: 0 !important;
|
||||
}
|
||||
#navigator-toolbox::after {
|
||||
border-bottom-width: 0 !important;
|
||||
}
|
||||
@import "parts/toolbox.css";
|
||||
@import "parts/headerbar.css";
|
||||
@import "parts/remove-white-flash.css";
|
||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
|
||||
/* Popup menus */
|
||||
.panel-arrowcontent {
|
||||
|
|
Loading…
Reference in New Issue