update with upstream

This commit is contained in:
Rafael Mardojai CM 2017-12-15 01:52:44 -05:00
commit ff662ad25a
9 changed files with 619 additions and 409 deletions

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
customChrome.css
customContent.css

View File

@ -21,7 +21,11 @@ Extensions can no longer style UI elements, but we can still use good old
git clone 'https://github.com/kurogetsusai/firefox-gnome-theme.git' chrome
```
3. The GTK theme variant must match the variant you picked for this Firefox
3. Enable the theme in your `userChrome.css` file. Open it with your favorite
text editor and follow instructions to enable one of the theme variants. You can
also enable extra features here.
The GTK theme variant must match the variant you picked for this Firefox
theme, which means you must either enable (for the dark variant) or disable (for
the light one) global dark theme in GNOME Tweak Tools, or alternativelly, you
can run Firefox with a specific variant without changing the global theme by
@ -35,20 +39,15 @@ supplying the GTK_THEME variable like this:
GTK_THEME=Adwaita:light firefox
```
If you choose the light variant, you must also enable it in your
`userChrome.css` file and disable the dark one. Just uncomment the
`@import "ui/theme-light.css";` file and comment the
`@import "ui/theme-dark.css";` one, so it looks like this:
4. Optionally you can enable styling of Firefox' internal pages in your
`userContent.css` file.
```css
/* Dark theme */
/*@import "ui/theme-dark.css"; /**/
/* Light theme */
@import "ui/theme-light.css"; /**/
```
The `userContent.css` file makes all the Firefox' internal pages dark, so if you
don't want them dark, just remove that file.
You can also create `customChrome.css` and `customContent.css` files, which will
be loaded after `userChrome.css` and `userContent.css` files. Everything you put
in those files will survive updates, so you can use them to apply your own
custom styles or copy the relevant `@import` lines to preserve your
configuration. Remember all `@import`s must be at the top of the file (other
rules are allowed below `@import` declarations).
You might want to adjust your default link colors so they are more visible on
dark background, either drop the code below into your

58
pages/about-dark.css Normal file
View File

@ -0,0 +1,58 @@
@import "about.css";
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
/* keep this selector the same as the next one */
*|*:root:not(#ublock0-epicker) {
/* Variables that start with --gnome- are added by me and are assigned
* to elements somewhere in this code. The rest of the variables are
* built-in in Firefox, so you need to add an !important if you wanna
* override them. */
--gnome-privatebrowsing-page-bgcolor: #111;
--in-content-page-color: #ccc !important;
--in-content-page-background: #2e3436 !important;
--in-content-text-color: #ccc !important;
--in-content-selected-text: #fff;
--in-content-box-background: #232729 !important;
--in-content-box-background-odd: #292e30 !important;
--in-content-box-background-hover: #232729 !important;
--in-content-box-background-active: #171a1b !important;
--in-content-box-border-color: #1e2123 !important;
--in-content-item-hover: rgba(0,149,221,0.25);
--in-content-item-selected: #0a84ff;
--in-content-border-highlight: #0a84ff;
--in-content-border-focus: #0a84ff;
--in-content-border-color: #1e2123 !important;
--in-content-category-border-focus: 1px dotted #0a84ff;
--in-content-category-text: #ccc !important;
--in-content-category-text-active: #eee !important;
--in-content-category-text-selected: #0a84ff;
--in-content-category-text-selected-active: #0060df;
--in-content-category-background-hover: rgba(12,12,13,0.1);
--in-content-category-background-active: rgba(12,12,13,0.15);
--in-content-category-background-selected-hover: rgba(12,12,13,0.15);
--in-content-category-background-selected-active: rgba(12,12,13,0.2);
--in-content-tab-color: #ccc !important;
--in-content-link-color: #0a8dff;
--in-content-link-color-hover: #0060df;
--in-content-link-color-active: #003eaa;
--in-content-link-color-visited: #0a8dff;
--in-content-primary-button-background: #0a84ff;
--in-content-primary-button-background-hover: #0060df;
--in-content-primary-button-background-active: #003eaa;
--in-content-table-border-dark-color: #1e2123 !important;
--in-content-table-header-background: #0a84ff;
/* Extensions' popups */
--popup-background: #292929;
}
/* A workaround for the screenshot tool, issue #7 */
@-moz-document regexp("^moz-extension://.+/blank.html$") {
/* keep this selector the same as the previous one */
*|*:root:not(#ublock0-epicker) {
--in-content-page-background: unset !important;
}
}

272
pages/about.css Normal file
View File

@ -0,0 +1,272 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
/* Checkboxes and radios */
xul|*.checkbox-check, xul|*.radio-check {
background-color: var(--in-content-box-background) !important;
box-shadow: none !important;
}
xul|*.checkbox-check[checked], xul|*.radio-check[selected] {
background-color: var(--in-content-box-background) !important;
fill: var(--in-content-page-color) !important;
}
html|input[type="checkbox"] {
background-color: var(--in-content-box-background) !important;
background-image: none !important;
box-shadow: none !important;
}
html|input[type="checkbox"]:checked {
background-image: url("chrome://global/skin/in-content/check.svg") !important;
fill: var(--in-content-page-color) !important;
}
/* Fixes for treecol's sort icon and border between header cells, examples:
* about:preferences, about:sessionrestore */
xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
fill: var(--in-content-page-color) !important;
}
xul|treecol:not([hideheader="true"]):not(:first-child), xul|treecolpicker {
border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-border-color) 20%, var(--in-content-border-color) 80%, transparent 80%, transparent 100%) 1 1 !important;
}
/* Try to make popups added by add-ons and their settings pages look dark too,
* doesn't always work tho because of their weird styles */
@-moz-document url-prefix("moz-extension://") {
body {
background-color: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
}
@-moz-document url("about:"), url("about:accounts"), url("about:buildconfig"),
url("about:cache"), url("about:checkerboard"), url("about:memory"),
url("about:mozilla"), url("about:webrtc") {
html {
background: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
}
@-moz-document url("about:accounts") {
#stage {
background: var(--in-content-box-background) !important;
color: var(--in-content-page-color) !important;
}
}
@-moz-document url("about:addons") {
/* Gear button */
#header-utils-btn:active:hover:not([disabled="true"]),
#header-utils-btn[open="true"] {
background-color: var(--in-content-box-background-active) !important;
}
.header-button:hover:not([disabled="true"]),
#header-utils-btn:hover:not([disabled="true"]) {
background-color: var(--in-content-box-background-hover) !important;
}
/* Text on the addon list */
.addon {
color: var(--in-content-page-color) !important;
}
/* Shadow on removed addons */
.addon-view[notification], .addon-view[pending] {
background-image: none !important;
}
/* Addon details */
.detail-view-container {
color: var(--in-content-page-color) !important;
}
.detail-row, .detail-row-complex, setting {
text-shadow: none !important;
}
/* Tabs when searching addons */
.sorter {
color: var(--in-content-tab-color) !important;
}
.sorter[checkState="1"], .sorter[checkState="2"] {
background-color: transparent !important;
}
/* Some hints above lists in themes and plugins */
.alert {
background-color: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:newtab"), url("about:home"), url("about:blank") {
body {
background: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
overflow: auto !important;
}
/* Preferences button */
.prefs-pane-button button, #newtab-customize-button {
fill: var(--in-content-page-color) !important;
}
.prefs-pane-button button:hover, #newtab-customize-button:hover {
background-color: transparent !important;
fill: var(--in-content-item-selected) !important;
}
/* Old about:newtab's overlay */
#newtab-customize-overlay {
background-color: transparent !important;
}
/* Old about:newtab's preferences menu */
#newtab-customize-panel-anchor, #newtab-customize-panel-inner-wrapper, #newtab-customize-panel-inner-wrapper * {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
color: var(--in-content-page-color) !important;
}
/* Sidebar (after clicking the preferences button) */
.prefs-pane .sidebar {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
color: var(--in-content-page-color) !important;
}
.prefs-pane .prefs-modal-inner-wrapper .options {
background: none !important;
}
.icon.icon-topsites {
fill: var(--in-content-page-color) !important;
}
.prefs-pane .actions {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
}
/* Let's get started tour (after clicking the Firefox button) */
#onboarding-overlay {
background-color: var(--in-content-page-background) !important;
}
#onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
color: var(--in-content-page-color) !important;
}
/* Search bar */
.search-wrapper .search-label, .search-wrapper .search-button,
#searchIcon, #searchSubmit {
fill: var(--in-content-page-color) !important;
}
/* Snippets on the old about:home page */
#snippets {
color: inherit !important;
}
/* Some other parts (partial) */
.section-top-bar .info-option-icon {
fill: var(--in-content-page-color) !important;
}
.section-top-bar .info-option {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
}
.section-title span {
color: var(--in-content-page-color) !important;
fill: var(--in-content-page-color) !important;
}
}
@-moz-document url("about:config") {
#warningTitle {
color: unset !important;
}
}
@-moz-document url("about:debugging") {
.addon-target-container, .service-worker-multi-process {
background-color: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:performance") {
#subprocess-reports td {
background-color: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:plugins"), url("about:robots") {
html, body {
background: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
}
@-moz-document url-prefix("about:preferences"),
url-prefix("chrome://browser/content/preferences/"),
url("chrome://passwordmgr/content/passwordManager.xul"),
url("chrome://mozapps/content/preferences/changemp.xul"),
url("chrome://mozapps/content/update/history.xul"),
url("chrome://browser/content/sanitize.xul"),
url("chrome://pippki/content/certManager.xul"),
url("chrome://pippki/content/device_manager.xul") {
/* Dialogs */
.dialogBox, dialog, window, prefpane, prefwindow, .windowDialog {
background-color: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
.dialogBox > .groupbox-title {
background-color: var(--in-content-box-background) !important;
border-bottom-color: var(--in-content-box-border-color) !important;
}
}
@-moz-document url("about:privatebrowsing") {
body {
background-color: var(--gnome-privatebrowsing-page-bgcolor);
}
a.button {
background-color: transparent !important;
border-color: var(--in-content-page-color) !important;
}
}
@-moz-document url("about:profiles") {
html {
--aboutProfiles-table-background: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:studies") {
:root {
--info-box-background-color: var(--in-content-box-background) !important;
--info-box-border-color: var(--in-content-box-border-color) !important;
}
}
@-moz-document url("about:support") {
html {
--aboutSupport-table-background: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:telemetry") {
#ping-picker {
background-color: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:url-classifier") {
html {
--aboutUrlClassifier-table-background: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:webrtc") {
#content > div {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
border-radius: 3px !important;
}
}

View File

@ -0,0 +1,59 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@-moz-document url("chrome://global/content/viewSource.xul"),
url("chrome://global/content/viewPartialSource.xul"),
url-prefix("view-source:") {
html, body {
background: #2e3436 !important;
color: #babdb6 !important;
font-family: "Ubuntu Mono", monospace;
font-size: 14px;
-moz-tab-size: 8 !important;
}
::-moz-selection {
background-color: #888a85 !important;
color: #eeeeec !important;
}
pre[id]::before, span[id]::before {
background: #2e3436 !important;
color: #888a85 !important;
}
span {
font-style: normal !important;
font-weight: normal !important;
text-decoration: none !important;
}
a {
color: #0a8dff !important;
}
.comment {
color: #888a85 !important;
}
.start-tag, .end-tag {
color: #729fcf !important;
}
.attribute-name {
color: #ce5c00 !important;
}
.attribute-value {
color: #669900 !important;
}
.entity, .doctype, .pi {
color: #dd4a68 !important;
}
.error {
background: #cc0000 !important;
color: #eeeeec !important;
}
}

72
ui/gnome-3.18-dark.css Normal file
View File

@ -0,0 +1,72 @@
@import "theme.css";
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Colors */
:root {
/* Variables that start with --gnome- are added by me and are assigned
* to elements somewhere in this code. The rest of the variables are
* built-in in Firefox, so you need to add an !important if you wanna
* override them. */
/* Browser area before a page starts loading */
--gnome-browser-before-load-bgcolor: #2e3436;
/* Extra toolbars like the bookmark bar */
--toolbar-bgcolor: #2f3434 !important;
--toolbar-bgimage: none !important;
/* Header bar */
--gnome-headerbar-bgimage: linear-gradient(rgb(67, 74, 74), rgb(57, 63, 63));
--gnome-headerbar-border-bottom: 1px solid rgb(28, 31, 31);
--gnome-headerbar-box-shadow: 0 -1px rgb(45, 50, 50) inset, 0 1px rgba(238, 238, 236, .1) inset;
--gnome-headerbar-button-bgimage: linear-gradient(rgb(69, 76, 76), rgb(57, 63, 63) 40%, rgb(45, 50, 50));
--gnome-headerbar-button-border: 1px solid rgba(28, 31, 31);
--gnome-headerbar-button-box-shadow: 0 1px rgba(255, 255, 255, .1) inset, 0 1px rgba(238, 238, 236, .1);
--gnome-headerbar-button-hover-bgimage: linear-gradient(rgb(91, 100, 100), rgb(67, 73, 73) 40%, rgb(55, 60, 60));
--gnome-headerbar-button-active-bgimage: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50));
--gnome-headerbar-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1);
--gnome-headerbar-button-disabled-bgcolor: #323636;
--gnome-headerbar-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(238, 238, 236, .1);
/* URL bar */
--gnome-urlbar-bgimage: linear-gradient(rgb(28, 31, 31), rgb(35, 37, 37) 3px, rgb(41, 41, 41) 90%);
--gnome-urlbar-border: 1px solid #1e2222;
--gnome-urlbar-box-shadow: 0 0 0 1px rgba(33, 93, 156, 0) inset, 0 1px rgba(238, 238, 236, .1);
--gnome-urlbar-height: 32px;
/* Tab bar */
--gnome-tabbar-bgcolor: #2f3434;
--gnome-tabbar-border-bottom: 1px solid #1e2222;
--gnome-tabbar-tab-color: rgb(147, 150, 149);
--gnome-tabbar-tab-hover-border-bottom: 3px solid #1c1f1f;
--gnome-tabbar-tab-hover-border-sides: 1px solid #2a2f2f;
--gnome-tabbar-tab-hover-color: rgb(192, 194, 192);
--gnome-tabbar-tab-active-bgcolor: #343939;
--gnome-tabbar-tab-active-border-bottom: 3px solid #215d9c;
--gnome-tabbar-tab-active-border-color-sides: #282b2b;
--gnome-tabbar-tab-active-color: rgb(238, 238, 236);
--gnome-tabbar-tab-active-hover-bgcolor: #363c3c;
--gnome-tabbar-tab-icon-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%);
/* Bookmark bar */
--gnome-bookmarkbar-border-bottom: 1px solid #1e2222;
--gnome-bookmarkbar-height: 38px;
/* Burger menu */
/*--arrowpanel-padding: 10px;*/
/*--arrowpanel-background: -moz-field;*/
--arrowpanel-color: #d3d4d2 !important; /* applies to text and icons */
/*--arrowpanel-border-color: ThreeDShadow;*/
/* Dirty hack for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be
* inverted, on others they don't, adjusts the filters below to your
* needs (you may also adjust icon brightness here). */
--gnome-icons-hack-filter: invert(85%); /* without invert: none */
--gnome-icons-hack-close-button-border: 1px solid #e3e0e0; /* without invert: 1px solid #1c1f1f */
--gnome-icons-hack-close-button-filter: invert(100%); /* without invert: none */
--gnome-icons-hack-close-button-active-bgimage: linear-gradient(rgb(220, 216, 216), rgb(214, 210, 210) 40%, rgb(210, 205, 205));
/* ^ without invert: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)) */
--gnome-icons-hack-close-button-active-box-shadow: 0 1px rgba(255, 255, 255, .07) inset, 0 2px 1px -2px rgba(255, 255, 255, .6) inset, 0 1px rgba(17, 17, 19, .1);
/* ^ without invert: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1) */
}

72
ui/gnome-3.18-light.css Normal file
View File

@ -0,0 +1,72 @@
@import "theme.css";
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Colors */
:root {
/* Variables that start with --gnome- are added by me and are assigned
* to elements somewhere in this code. The rest of the variables are
* built-in in Firefox, so you need to add an !important if you wanna
* override them. */
/* Browser area before a page starts loading */
--gnome-browser-before-load-bgcolor: #d6d6d6;
/* Extra toolbars like the bookmark bar */
--toolbar-bgcolor: #d6d6d6 !important;
--toolbar-bgimage: none !important;
/* Header bar */
--gnome-headerbar-bgimage: linear-gradient(rgb(247, 247, 247), rgb(237, 237, 237));
--gnome-headerbar-border-bottom: 1px solid rgb(161, 161, 161);
--gnome-headerbar-box-shadow: 0 -1px rgb(217, 217, 217) inset, 0 1px #fff inset;
--gnome-headerbar-button-bgimage: linear-gradient(rgb(250, 250, 250), rgb(237, 237, 237) 40%, rgb(224, 224, 224));
--gnome-headerbar-button-border: 1px solid rgba(161, 161, 161);
--gnome-headerbar-button-box-shadow: 0 1px #fff inset, 0 1px #fff;
--gnome-headerbar-button-hover-bgimage: linear-gradient(#fff, rgb(247, 247, 247) 40%, rgb(237, 237, 237));
--gnome-headerbar-button-active-bgimage: linear-gradient(rgb(214, 214, 214), rgb(220, 220, 220) 40%, rgb(224, 224, 224));
--gnome-headerbar-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 0px -2px rgba(0, 0, 0, .6) inset, 0 1px #fff;
--gnome-headerbar-button-disabled-bgcolor: rgb(244, 244, 244);
--gnome-headerbar-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0);
/* URL bar */
--gnome-urlbar-bgimage: linear-gradient(rgb(222, 222, 222), rgb(248, 248, 248) 3px, rgb(255, 255, 255) 90%);
--gnome-urlbar-border: 1px solid rgb(161, 161, 161);
--gnome-urlbar-box-shadow: 0 0 0 1px rgba(74, 144, 217, 0) inset, 0 1px #fff;
--gnome-urlbar-height: 32px;
/* Tab bar */
--gnome-tabbar-bgcolor: #d6d6d6;
--gnome-tabbar-border-bottom: 1px solid #a1a1a1;
--gnome-tabbar-tab-color: rgb(141, 144, 145);
--gnome-tabbar-tab-hover-border-bottom: 3px solid #a1a1a1;
--gnome-tabbar-tab-hover-border-sides: 1px solid #c9c9c9;
--gnome-tabbar-tab-hover-color: rgb(93, 98, 99);
--gnome-tabbar-tab-active-bgcolor: #e1e1e1;
--gnome-tabbar-tab-active-border-bottom: 4px solid #4a90d9;
--gnome-tabbar-tab-active-border-color-sides: #c0c0c0;
--gnome-tabbar-tab-active-color: rgb(46, 52, 54);
--gnome-tabbar-tab-active-hover-bgcolor: #e6e6e6;
--gnome-tabbar-tab-icon-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%);
/* Bookmark bar */
--gnome-bookmarkbar-border-bottom: 1px solid #a1a1a1;
--gnome-bookmarkbar-height: 38px;
/* Burger menu */
/*--arrowpanel-padding: 10px;*/
/*--arrowpanel-background: -moz-field;*/
--arrowpanel-color: rgb(46, 52, 54) !important; /* applies to text and icons */
/*--arrowpanel-border-color: ThreeDShadow;*/
/* Dirty hack for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be
* inverted, on others they don't, adjusts the filters below to your
* needs (you may also adjust icon brightness here). */
--gnome-icons-hack-filter: none ; /* with invert: invert(85%) */
--gnome-icons-hack-close-button-border: 1px solid #a1a1a1; /* with invert: 1px solid #5e5e5e */
--gnome-icons-hack-close-button-filter: none; /* with invert: invert(100%) */
--gnome-icons-hack-close-button-active-bgimage: linear-gradient(rgb(214, 214, 214), rgb(220, 220, 220) 40%, rgb(224, 224, 224));
/* ^ with invert: linear-gradient(rgb(41, 41, 41), rgb(35, 35, 35) 40%, rgb(31, 31, 31)) */
--gnome-icons-hack-close-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset;
/* ^ with invert: 0 1px rgba(255, 255, 255, .07) inset, 0 2px 1px -2px rgba(255, 255, 255, .6) inset */
}

View File

@ -1,29 +1,57 @@
/* Here you can switch between the dark and the light theme. Don't use both, coz
* it ain't gonna work. */
/*
* In this file you can enable styles which apply to Firefox' user interface.
* To enable a specific feature, uncomment its @import line by removing "/*" at
* the beginning of the line. To disable it, put the "/*" back.
*/
/* Dark theme */
@import "ui/theme-dark.css"; /**/
/* Light theme */
/*@import "ui/theme-light.css"; /**/
/*******************************************************************************
* GNOME Theme
* Pick whichever variant you like, it doesn't have to match your GNOME version,
* but it will probably look better if it does. Remember that your GTK theme
* variant must match the variant you pick here, eg. if you pick a light
* variant, you must also run Firefox using the light variant by either
* disabling global dark theme in GNOME Tweak Tool or running Firefox explicity
* with the light theme:
* $ GTK_THEME=Adwaita:light firefox
* The opposite applies to the dark variant, you must either enable global dark
* theme or run Firefox like this:
* $ GTK_THEME=Adwaita:dark firefox
*/
/* Symbolic tab icons */
/* GNOME 3.18 light theme */
/*@import "ui/gnome-3.18-light.css"; /**/
/* GNOME 3.18 dark theme */
/*@import "ui/gnome-3.18-dark.css"; /**/
/*******************************************************************************
* Optional features
*/
/* Make all tab icons look kinda like symbolic icons */
/*@import "ui/symbolic-tab-icons.css"; /**/
/* Client-side decorations (Fedora only)
/* Enable client-side decorations (Fedora only)
* WARNING: This setting is experimental and doesn't work exactly as it should.
* Don't forget to enable widget.allow-client-side-decoration in about:config
* if you're using it. */
@import "ui/fedora-csd.css"; /**/
/*@import "ui/fedora-csd.css"; /**/
/* Client-side decorations window buttons options (Fedora only)*/
#nav-bar {
/* Close window button only */
margin-right: 44px;
/* Close window button only
margin-right: 43px;
*/
/* Two window buttons
margin-right: 84px;
margin-right: 83px;
*/
/* Three window buttons
margin-right: 124px;
margin-right: 123px;
*/
}
/* Import a custom stylesheet
* Everything you add in your customChrome.css file (it doesn't exist by
* default) will be included here and preserved between updates, so you can move
* your configuration to that file if you don't like setting it up after every
* update. You can also apply your own custom styles in that file. */
@import "customChrome.css"; /**/

View File

@ -1,384 +1,32 @@
@namespace html "http://www.w3.org/1999/xhtml";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
/*
*******************************************************************************
* WARNING: If you are using this file with Firefox 57, there is a bug that
* breaks it. You must disable those two options in about:config if you want to
* use it:
* - browser.tabs.remote.autostart
* - browser.tabs.remote.autostart.2
* If you are using Firefox 58 or higher, you don't need to disable anything.
* More information:
* https://bugzilla.mozilla.org/show_bug.cgi?id=1416184
* https://github.com/kurogetsusai/firefox-gnome-theme/issues/14
*******************************************************************************
*
* In this file you can enable styles which apply to web pages' content.
* To enable a specific feature, uncomment its @import line by removing "/*" at
* the beginning of the line. To disable it, put the "/*" back.
*/
/* Try to make popups added by add-ons and their settings pages look dark too,
* doesn't always work tho because of their weird styles */
@-moz-document url-prefix("moz-extension://") {
:root {
--popup-background: #292929;
}
/* Firefox' internal pages
* Applies to all about: pages (settings, addons, new tab, etc). */
/*@import "pages/about-dark.css"; /**/
body {
background-color: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
}
/* Firefox' source viewer
* Applies to all view-source: pages. */
/*@import "pages/view-source-dark.css"; /**/
/*******************************************************************************
* Dark about: pages */
/* keep this selector the same as the next one */
*|*:root:not(#ublock0-epicker) {
--in-content-page-color: #ccc !important;
--in-content-page-background: #2e3436 !important;
--in-content-text-color: #ccc !important;
--in-content-selected-text: #fff;
--in-content-box-background: #232729 !important;
--in-content-box-background-odd: #292e30 !important;
--in-content-box-background-hover: #232729 !important;
--in-content-box-background-active: #171a1b !important;
--in-content-box-border-color: #1e2123 !important;
--in-content-item-hover: rgba(0,149,221,0.25);
--in-content-item-selected: #0a84ff;
--in-content-border-highlight: #0a84ff;
--in-content-border-focus: #0a84ff;
--in-content-border-color: #1e2123 !important;
--in-content-category-border-focus: 1px dotted #0a84ff;
--in-content-category-text: #ccc !important;
--in-content-category-text-active: #eee !important;
--in-content-category-text-selected: #0a84ff;
--in-content-category-text-selected-active: #0060df;
--in-content-category-background-hover: rgba(12,12,13,0.1);
--in-content-category-background-active: rgba(12,12,13,0.15);
--in-content-category-background-selected-hover: rgba(12,12,13,0.15);
--in-content-category-background-selected-active: rgba(12,12,13,0.2);
--in-content-tab-color: #ccc !important;
--in-content-link-color: #0a8dff;
--in-content-link-color-hover: #0060df;
--in-content-link-color-active: #003eaa;
--in-content-link-color-visited: #0a8dff;
--in-content-primary-button-background: #0a84ff;
--in-content-primary-button-background-hover: #0060df;
--in-content-primary-button-background-active: #003eaa;
--in-content-table-border-dark-color: #1e2123 !important;
--in-content-table-header-background: #0a84ff;
}
/* A workaround for the screenshot tool, issue #7 */
@-moz-document regexp("^moz-extension://.+/blank.html$") {
/* keep this selector the same as the previous one */
*|*:root:not(#ublock0-epicker) {
--in-content-page-background: unset !important;
}
}
/* Checkboxes and radios */
xul|*.checkbox-check, xul|*.radio-check {
background-color: var(--in-content-box-background) !important;
box-shadow: none !important;
}
xul|*.checkbox-check[checked], xul|*.radio-check[selected] {
background-color: var(--in-content-box-background) !important;
fill: var(--in-content-page-color) !important;
}
html|input[type="checkbox"] {
background-color: var(--in-content-box-background) !important;
background-image: none !important;
box-shadow: none !important;
}
html|input[type="checkbox"]:checked {
background-image: url("chrome://global/skin/in-content/check.svg") !important;
fill: var(--in-content-page-color) !important;
}
/* Fixes for treecol's sort icon and border between header cells, examples:
* about:preferences, about:sessionrestore */
xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
fill: var(--in-content-page-color) !important;
}
xul|treecol:not([hideheader="true"]):not(:first-child), xul|treecolpicker {
border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-border-color) 20%, var(--in-content-border-color) 80%, transparent 80%, transparent 100%) 1 1 !important;
}
@-moz-document url("about:"), url("about:accounts"), url("about:buildconfig"),
url("about:cache"), url("about:checkerboard"), url("about:memory"),
url("about:mozilla"), url("about:webrtc") {
html {
background: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
}
@-moz-document url("about:accounts") {
#stage {
background: var(--in-content-box-background) !important;
color: var(--in-content-page-color) !important;
}
}
@-moz-document url("about:addons") {
/* Gear button */
#header-utils-btn:active:hover:not([disabled="true"]),
#header-utils-btn[open="true"] {
background-color: var(--in-content-box-background-active) !important;
}
.header-button:hover:not([disabled="true"]),
#header-utils-btn:hover:not([disabled="true"]) {
background-color: var(--in-content-box-background-hover) !important;
}
/* Text on the addon list */
.addon {
color: var(--in-content-page-color) !important;
}
/* Shadow on removed addons */
.addon-view[notification], .addon-view[pending] {
background-image: none !important;
}
/* Addon details */
.detail-view-container {
color: var(--in-content-page-color) !important;
}
.detail-row, .detail-row-complex, setting {
text-shadow: none !important;
}
/* Tabs when searching addons */
.sorter {
color: var(--in-content-tab-color) !important;
}
.sorter[checkState="1"], .sorter[checkState="2"] {
background-color: transparent !important;
}
/* Some hints above lists in themes and plugins */
.alert {
background-color: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:newtab"), url("about:home"), url("about:blank") {
body {
background: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
overflow: auto !important;
}
/* Preferences button */
.prefs-pane-button button, #newtab-customize-button {
fill: var(--in-content-page-color) !important;
}
.prefs-pane-button button:hover, #newtab-customize-button:hover {
background-color: transparent !important;
fill: var(--in-content-item-selected) !important;
}
/* Old about:newtab's overlay */
#newtab-customize-overlay {
background-color: transparent !important;
}
/* Old about:newtab's preferences menu */
#newtab-customize-panel-anchor, #newtab-customize-panel-inner-wrapper, #newtab-customize-panel-inner-wrapper * {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
color: var(--in-content-page-color) !important;
}
/* Sidebar (after clicking the preferences button) */
.prefs-pane .sidebar {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
color: var(--in-content-page-color) !important;
}
.prefs-pane .prefs-modal-inner-wrapper .options {
background: none !important;
}
.icon.icon-topsites {
fill: var(--in-content-page-color) !important;
}
.prefs-pane .actions {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
}
/* Let's get started tour (after clicking the Firefox button) */
#onboarding-overlay {
background-color: var(--in-content-page-background) !important;
}
#onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
color: var(--in-content-page-color) !important;
}
/* Search bar */
.search-wrapper .search-label, .search-wrapper .search-button,
#searchIcon, #searchSubmit {
fill: var(--in-content-page-color) !important;
}
/* Snippets on the old about:home page */
#snippets {
color: inherit !important;
}
/* Some other parts (partial) */
.section-top-bar .info-option-icon {
fill: var(--in-content-page-color) !important;
}
.section-top-bar .info-option {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
}
.section-title span {
color: var(--in-content-page-color) !important;
fill: var(--in-content-page-color) !important;
}
}
@-moz-document url("about:config") {
#warningTitle {
color: unset !important;
}
}
@-moz-document url("about:debugging") {
.addon-target-container, .service-worker-multi-process {
background-color: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:performance") {
#subprocess-reports td {
background-color: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:plugins"), url("about:robots") {
html, body {
background: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
}
@-moz-document url-prefix("about:preferences"),
url-prefix("chrome://browser/content/preferences/"),
url("chrome://passwordmgr/content/passwordManager.xul"),
url("chrome://mozapps/content/preferences/changemp.xul"),
url("chrome://mozapps/content/update/history.xul"),
url("chrome://browser/content/sanitize.xul"),
url("chrome://pippki/content/certManager.xul"),
url("chrome://pippki/content/device_manager.xul") {
/* Dialogs */
.dialogBox, dialog, window, prefpane, prefwindow, .windowDialog {
background-color: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
.dialogBox > .groupbox-title {
background-color: var(--in-content-box-background) !important;
border-bottom-color: var(--in-content-box-border-color) !important;
}
}
@-moz-document url("about:privatebrowsing") {
body {
background-color: #111;
}
a.button {
background-color: transparent !important;
border-color: var(--in-content-page-color) !important;
}
}
@-moz-document url("about:profiles") {
html {
--aboutProfiles-table-background: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:studies") {
:root {
--info-box-background-color: var(--in-content-box-background) !important;
--info-box-border-color: var(--in-content-box-border-color) !important;
}
}
@-moz-document url("about:support") {
html {
--aboutSupport-table-background: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:telemetry") {
#ping-picker {
background-color: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:url-classifier") {
html {
--aboutUrlClassifier-table-background: var(--in-content-box-background) !important;
}
}
@-moz-document url("about:webrtc") {
#content > div {
background-color: var(--in-content-box-background) !important;
border-color: var(--in-content-box-border-color) !important;
border-radius: 3px !important;
}
}
/*******************************************************************************
* Dark view-source: pages */
@-moz-document url("chrome://global/content/viewSource.xul"),
url("chrome://global/content/viewPartialSource.xul"),
url-prefix("view-source:") {
html, body {
background: #2e3436 !important;
color: #babdb6 !important;
font-family: "Ubuntu Mono", monospace;
font-size: 14px;
-moz-tab-size: 8 !important;
}
::-moz-selection {
background-color: #888a85 !important;
color: #eeeeec !important;
}
pre[id]::before, span[id]::before {
background: #2e3436 !important;
color: #888a85 !important;
}
span {
font-style: normal !important;
font-weight: normal !important;
text-decoration: none !important;
}
a {
color: #0a8dff !important;
}
.comment {
color: #888a85 !important;
}
.start-tag, .end-tag {
color: #729fcf !important;
}
.attribute-name {
color: #ce5c00 !important;
}
.attribute-value {
color: #669900 !important;
}
.entity, .doctype, .pi {
color: #dd4a68 !important;
}
.error {
background: #cc0000 !important;
color: #eeeeec !important;
}
}
/* Import a custom stylesheet
* Everything you add in your customContent.css file (it doesn't exist by
* default) will be included here and preserved between updates, so you can move
* your configuration to that file if you don't like setting it up after every
* update. You can also apply your own custom styles in that file. */
@import "customContent.css"; /**/