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:
parent
5ad6434299
commit
36162185a9
|
@ -39,8 +39,8 @@ supplying the GTK_THEME variable like this:
|
||||||
GTK_THEME=Adwaita:light firefox
|
GTK_THEME=Adwaita:light firefox
|
||||||
```
|
```
|
||||||
|
|
||||||
The `userContent.css` file makes all the Firefox' internal pages dark, so if you
|
4. Optionally you can enable styling of Firefox' internal pages in your
|
||||||
don't want them dark, just remove that file.
|
`userContent.css` file.
|
||||||
|
|
||||||
You might want to adjust your default link colors so they are more visible on
|
You might want to adjust your default link colors so they are more visible on
|
||||||
dark background, either drop the code below into your
|
dark background, either drop the code below into your
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
405
userContent.css
405
userContent.css
|
@ -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,
|
/* Firefox' internal pages
|
||||||
* doesn't always work tho because of their weird styles */
|
* Applies to all about: pages (settings, addons, new tab, etc). */
|
||||||
@-moz-document url-prefix("moz-extension://") {
|
/*@import "pages/about-dark.css"; /**/
|
||||||
:root {
|
|
||||||
--popup-background: #292929;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
/* Firefox' source viewer
|
||||||
background-color: var(--in-content-page-background) !important;
|
* Applies to all view-source: pages. */
|
||||||
color: var(--in-content-page-color) !important;
|
/*@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue