refactor userContent.css

- separate colors from the actual rules, issue #2
- prepare for importing a custom stylesheet, issue #14
- everything disabled by default to allow future custom styles to preserve
  config between updates, issue #14
This commit is contained in:
Sai Kurogetsu 2017-12-15 03:36:33 +00:00
parent 5ad6434299
commit 36162185a9
5 changed files with 414 additions and 384 deletions

View File

@ -39,8 +39,8 @@ supplying the GTK_THEME variable like this:
GTK_THEME=Adwaita:light firefox
```
The `userContent.css` file makes all the Firefox' internal pages dark, so if you
don't want them dark, just remove that file.
4. Optionally you can enable styling of Firefox' internal pages in your
`userContent.css` file.
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;
}
}

View File

@ -1,384 +1,25 @@
@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;
}
}
/*******************************************************************************
* 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;
}
}
/* Firefox' source viewer
* Applies to all view-source: pages. */
/*@import "pages/view-source-dark.css"; /**/