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:
Sai Kurogetsu 2018-06-08 09:51:21 +00:00
parent dab2ee9fd0
commit df37a7af81
No known key found for this signature in database
GPG Key ID: 48E52EBE10D57BF6
4 changed files with 86 additions and 69 deletions

16
ui/parts/headerbar.css Normal file
View File

@ -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;
}

View File

@ -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;
}

55
ui/parts/toolbox.css Normal file
View File

@ -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;
}

View File

@ -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 {