initial commit
This commit is contained in:
Sai Kurogetsu
commit
2d14d7209a
|
|
@ -0,0 +1,24 @@
|
||||||
|
This is free and unencumbered software released into the public domain.
|
||||||
|
|
||||||
|
Anyone is free to copy, modify, publish, use, compile, sell, or
|
||||||
|
distribute this software, either in source code form or as a compiled
|
||||||
|
binary, for any purpose, commercial or non-commercial, and by any
|
||||||
|
means.
|
||||||
|
|
||||||
|
In jurisdictions that recognize copyright laws, the author or authors
|
||||||
|
of this software dedicate any and all copyright interest in the
|
||||||
|
software to the public domain. We make this dedication for the benefit
|
||||||
|
of the public at large and to the detriment of our heirs and
|
||||||
|
successors. We intend this dedication to be an overt act of
|
||||||
|
relinquishment in perpetuity of all present and future rights to this
|
||||||
|
software under copyright law.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||||
|
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
|
||||||
|
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
|
||||||
|
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||||
|
OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
|
||||||
|
For more information, please refer to <http://unlicense.org>
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
# Firefox Gnome Dark
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Description
|
||||||
|
|
||||||
|
This is a bunch of CSS code to make Firefox 57+ look closer to GNOME's default
|
||||||
|
dark theme. It styles the UI and interal Firefox' pages like about: and
|
||||||
|
view-source:. I only wrote styles for the dark variant, not the light one.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
Extensions can no longer style UI elements, but we can still use good old
|
||||||
|
`userChrome.css` and `userContent.css` files. Just drop this repo to your
|
||||||
|
`chrome` directory:
|
||||||
|
|
||||||
|
1. Go to your Firefox profile's directory.
|
||||||
|
2. Clone this repo to the `chrome` directory:
|
||||||
|
|
||||||
|
git clone 'https://github.com/kurogetsusai/firefox-gnome-dark.git' chrome
|
||||||
|
|
||||||
|
You must run Firefox with the dark theme, either by setting it globally as your
|
||||||
|
default theme in GNOME Tweak Tools, or by running Firefox with the GTK_THEME
|
||||||
|
variable like this:
|
||||||
|
|
||||||
|
GTK_THEME=Adwaita:dark firefox
|
||||||
|
|
||||||
|
You might want to adjust your default link colors so they are more visible on
|
||||||
|
dark background, either drop the code below into your
|
||||||
|
`(firefox profile)/user.js` file or change them manually in `about:config`.
|
||||||
|
|
||||||
|
user_pref("browser.active_color", "#cc1a1a");
|
||||||
|
user_pref("browser.anchor_color", "#0a8dff");
|
||||||
|
user_pref("browser.visited_color", "#0871cc");
|
||||||
|
user_pref("browser.display.background_color", "#2e3436");
|
||||||
|
user_pref("browser.display.foreground_color", "#ccc");
|
||||||
|
|
||||||
|
You can't get rid of the title bar for now (except for Fedora I think, where you
|
||||||
|
can enable CSD in about:config), but you will be able to do it when they add
|
||||||
|
client-side decoration support. For now you can use a GNOME extension like
|
||||||
|
[No Title Bar](https://extensions.gnome.org/extension/1267/no-title-bar/) to
|
||||||
|
hide it.
|
||||||
|
|
||||||
|
## Broken stuff
|
||||||
|
|
||||||
|
If you use the bookmark bar, it's now above the URL bar. Also the menu bar is
|
||||||
|
below the tab bar (things are flipped upside down to move the tabs below the URL
|
||||||
|
bar). That's pretty shit, but I haven't figured out how to move the tab bar
|
||||||
|
without flipping everything else yet and I don't use the bookmark bar anyway so
|
||||||
|
I'm fine with that. I actually like having the menu bar below the tab bar, feels
|
||||||
|
cozy.
|
||||||
|
|
||||||
|
Icons might appear black where they should be white on some systems. I have no
|
||||||
|
idea why, but you can adjust them in the `ui/theme.css` file, look for
|
||||||
|
`filter: invert`.
|
||||||
|
|
||||||
|
I haven't finished styling the new... new tab page. I just replaced it with a
|
||||||
|
blank page, because I don't like all that clutter anyway, but feel free to
|
||||||
|
finish it yourself (my attempts are in the `userContent.css` file, look for
|
||||||
|
`about:newtab`).
|
||||||
|
|
||||||
|
Probably more things are broken, it looks okay for me, feel free to report
|
||||||
|
issues here on GitHub and share your ideas if you know how to fix them.
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
If you wanna mess around the styles and change something, or create a light
|
||||||
|
variant of this theme, you might find these things useful.
|
||||||
|
|
||||||
|
To use the Inspector to debug the UI, open the developer tools (F12) on any
|
||||||
|
page, go to options, check both of those:
|
||||||
|
|
||||||
|
- Enable browser chrome and add-on debugging toolboxes
|
||||||
|
- Enable remote debugging
|
||||||
|
|
||||||
|
Now you can close those tools and press Ctrl+Alt+Shift+I to Inspect the browser
|
||||||
|
UI.
|
||||||
|
|
||||||
|
Also you can inspect any GTK3 application, for example type this into a terminal
|
||||||
|
and it will run Epiphany with the GTK Inspector, so you can check the CSS styles
|
||||||
|
of its elements too.
|
||||||
|
|
||||||
|
GTK_DEBUG=interactive epiphany
|
||||||
|
|
||||||
|
Feel free to use any parts of my code to develop your own themes, I don't force
|
||||||
|
any specific license on your code.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
|
|
@ -0,0 +1,6 @@
|
||||||
|
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
||||||
|
|
||||||
|
/* Prevent white flash */
|
||||||
|
tabbrowser tabpanels {
|
||||||
|
background-color: #2e3436 !important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,406 @@
|
||||||
|
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--toolbar-bgcolor: #000 !important;
|
||||||
|
--toolbar-bgimage: linear-gradient(rgb(67, 74, 74), rgb(57, 63, 63)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toolbar */
|
||||||
|
#nav-bar {
|
||||||
|
background-image: var(--toolbar-bgimage);
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: 1px solid rgb(28, 31, 31) !important;
|
||||||
|
box-shadow: 0 -1px rgb(45, 50, 50) inset, 0 1px rgba(238, 238, 236, .1) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabs below the URL bar */
|
||||||
|
#navigator-toolbox {
|
||||||
|
-moz-box-direction: reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Don't teleport the URL bar when moving tabs */
|
||||||
|
#TabsToolbar[movingtab] {
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
#TabsToolbar[movingtab] > .tabbrowser-tabs {
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
#TabsToolbar[movingtab] + #nav-bar {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove border above the URL bar */
|
||||||
|
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
|
||||||
|
border-top-width: 0 !important;
|
||||||
|
}
|
||||||
|
#navigator-toolbox::after {
|
||||||
|
border-bottom-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Burger menu text and icons color */
|
||||||
|
.panel-arrowcontent {
|
||||||
|
--arrowpanel-color: #d3d4d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Zoom reset in the buger menu */
|
||||||
|
#appMenu-zoomReset-button {
|
||||||
|
background-color: var(--arrowpanel-background) !important;
|
||||||
|
border-color: var(--panel-separator-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color of the last item in the bookmark menu and downloads menu */
|
||||||
|
.subviewbutton.panel-subview-footer,
|
||||||
|
.downloadsPanelFooter {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-top-color: var(--panel-separator-color) !important;
|
||||||
|
}
|
||||||
|
.subviewbutton.panel-subview-footer:hover,
|
||||||
|
.downloadsPanelFooter:hover {
|
||||||
|
background-color: var(--arrowpanel-dimmed) !important;
|
||||||
|
border-top-color: var(--panel-separator-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove icons from context menu */
|
||||||
|
#contentAreaContextMenu menuitem image, #contentAreaContextMenu menu image {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
#contentAreaContextMenu menugroup menuitem image {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove hover effects on toolbar buttons */
|
||||||
|
#nav-bar {
|
||||||
|
--backbutton-background: transparent !important;
|
||||||
|
--backbutton-active-background: transparent !important;
|
||||||
|
--backbutton-hover-background: transparent !important;
|
||||||
|
--toolbarbutton-active-background: transparent !important;
|
||||||
|
--toolbarbutton-hover-background: transparent !important;
|
||||||
|
}
|
||||||
|
#back-button > .toolbarbutton-icon {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
:root:not([uidensity=compact]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
|
||||||
|
background-color: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toolbar buttons */
|
||||||
|
#nav-bar toolbarbutton.chromeclass-toolbar-additional,
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined,
|
||||||
|
#nav-bar #reload-button,
|
||||||
|
#nav-bar #stop-button,
|
||||||
|
#PanelUI-menu-button {
|
||||||
|
border: 1px solid rgba(28, 31, 31) !important;
|
||||||
|
border-radius: 3px !important;
|
||||||
|
height: 34px;
|
||||||
|
margin: 4px 3px !important;
|
||||||
|
padding: 0 2px !important;
|
||||||
|
width: 34px;
|
||||||
|
}
|
||||||
|
#nav-bar toolbarbutton.chromeclass-toolbar-additional:not([disabled]),
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined:not([disabled]),
|
||||||
|
#nav-bar #reload-button:not([disabled]),
|
||||||
|
#nav-bar #stop-button:not([disabled]),
|
||||||
|
#PanelUI-menu-button:not([disabled]) {
|
||||||
|
background-image: linear-gradient(rgb(69, 76, 76), rgb(57, 63, 63) 40%, rgb(45, 50, 50));
|
||||||
|
box-shadow: 0 1px rgba(255, 255, 255, .1) inset, 0 1px rgba(238, 238, 236, .1);
|
||||||
|
}
|
||||||
|
#nav-bar toolbarbutton.chromeclass-toolbar-additional:not([disabled]):hover,
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined:not([disabled]):hover,
|
||||||
|
#nav-bar #reload-button:not([disabled]):hover,
|
||||||
|
#nav-bar #stop-button:not([disabled]):hover,
|
||||||
|
#PanelUI-menu-button:not([disabled]):hover {
|
||||||
|
background-image: linear-gradient(rgb(91, 100, 100), rgb(67, 73, 73) 40%, rgb(55, 60, 60));
|
||||||
|
}
|
||||||
|
#nav-bar toolbarbutton.chromeclass-toolbar-additional:not([disabled]):active,
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined:not([disabled]):active,
|
||||||
|
#nav-bar #reload-button:not([disabled]):active,
|
||||||
|
#nav-bar #stop-button:not([disabled]):active,
|
||||||
|
#PanelUI-menu-button:not([disabled]):active,
|
||||||
|
#nav-bar toolbarbutton.chromeclass-toolbar-additional[open=true]:not([disabled]),
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined[open=true]:not([disabled]),
|
||||||
|
#nav-bar #reload-button[open=true]:not([disabled]),
|
||||||
|
#nav-bar #stop-button[open=true]:not([disabled]),
|
||||||
|
#PanelUI-menu-button[open=true]:not([disabled]) {
|
||||||
|
background-image: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50));
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
#nav-bar toolbarbutton.chromeclass-toolbar-additional[disabled],
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined[disabled],
|
||||||
|
#nav-bar #reload-button[disabled],
|
||||||
|
#nav-bar #stop-button[disabled]
|
||||||
|
#PanelUI-menu-button[disabled] {
|
||||||
|
background-color: #323636;
|
||||||
|
box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(238, 238, 236, .1);
|
||||||
|
}
|
||||||
|
#nav-bar toolbarbutton.chromeclass-toolbar-additional#back-button {
|
||||||
|
margin-left: 6px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
#back-button > .toolbarbutton-icon {
|
||||||
|
width: 30px !important;
|
||||||
|
}
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined#zoom-out-button {
|
||||||
|
margin-left: 1px !important;
|
||||||
|
}
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined#zoom-in-button {
|
||||||
|
margin-right: 1px !important;
|
||||||
|
}
|
||||||
|
#zoom-controls separator {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
#PanelUI-button {
|
||||||
|
border: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
#PanelUI-menu-button {
|
||||||
|
margin-right: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Combined buttons */
|
||||||
|
#nav-bar toolbarbutton.chromeclass-toolbar-additional#back-button,
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined#zoom-out-button,
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined#zoom-reset-button {
|
||||||
|
border-bottom-right-radius: 0 !important;
|
||||||
|
border-right-width: 0 !important;
|
||||||
|
border-top-right-radius: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
}
|
||||||
|
#nav-bar toolbarbutton.chromeclass-toolbar-additional#forward-button,
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined#zoom-reset-button,
|
||||||
|
#nav-bar toolbarbutton.toolbarbutton-combined#zoom-in-button {
|
||||||
|
border-bottom-left-radius: 0 !important;
|
||||||
|
border-top-left-radius: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Replace icons (they load from /usr/share/icons/<theme>/)
|
||||||
|
* On some systems they need to be inverted, on others they don't, so just
|
||||||
|
* adjusts the filters below to your needs (probably just removing them might
|
||||||
|
* work if you see black icons, you may also adjust icon brightness here).
|
||||||
|
*/
|
||||||
|
#back-button .toolbarbutton-icon {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/go-previous-symbolic?size=menu") !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#forward-button .toolbarbutton-icon {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/go-next-symbolic?size=menu") !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glitch - animations (may be possible to fix in about:config)
|
||||||
|
#reload-button .toolbarbutton-icon {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/view-refresh-symbolic?size=menu") !important;
|
||||||
|
}
|
||||||
|
#stop-button .toolbarbutton-icon {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/process-stop-symbolic?size=menu") !important;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/* Default looks nicer
|
||||||
|
#new-tab-button .toolbarbutton-icon {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/tab-new-symbolic?size=menu") !important;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
#zoom-out-button .toolbarbutton-icon {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/zoom-out-symbolic?size=menu") !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* No icon, just text
|
||||||
|
#zoom-reset-button .toolbarbutton-icon {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/zoom-original-symbolic?size=menu") !important;
|
||||||
|
} */
|
||||||
|
|
||||||
|
#zoom-in-button .toolbarbutton-icon {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/zoom-in-symbolic?size=menu") !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default is ok
|
||||||
|
#nav-bar-overflow-button .toolbarbutton-icon {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/view-more-symbolic?size=menu") !important;
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* Glitch - it swaps to the default one anyway
|
||||||
|
#downloads-button {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/folder-download-symbolic?size=menu") !important;
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* Default is ok
|
||||||
|
#PanelUI-menu-button {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/open-menu-symbolic?size=menu") !important;
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* URL bar */
|
||||||
|
#urlbar {
|
||||||
|
background-color: #2c2c2c;
|
||||||
|
border: 1px solid #1e2222;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: none !important;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
.urlbar-icon:hover,
|
||||||
|
.urlbar-icon-wrapper:hover,
|
||||||
|
.urlbar-icon[open],
|
||||||
|
.urlbar-icon-wrapper[open],
|
||||||
|
.urlbar-icon:hover:active,
|
||||||
|
.urlbar-icon-wrapper:hover:active {
|
||||||
|
background-color: transparent !important;
|
||||||
|
fill-opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tab bar */
|
||||||
|
#tabbrowser-tabs {
|
||||||
|
background-color: #2f3434;
|
||||||
|
border-bottom: 1px solid #1e2222;
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
#TabsToolbar toolbarbutton:not(.scrollbutton-up):not(.scrollbutton-down):not(.tab-close-button) {
|
||||||
|
background-color: #2f3434;
|
||||||
|
border-bottom: 1px solid #1e2222;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
tab > stack {
|
||||||
|
height: 37px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove hover effects on tab bar buttons */
|
||||||
|
#TabsToolbar {
|
||||||
|
--toolbarbutton-active-background: transparent !important;
|
||||||
|
--toolbarbutton-hover-background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* New hover effect */
|
||||||
|
#TabsToolbar toolbarbutton {
|
||||||
|
fill-opacity: .6 !important;
|
||||||
|
}
|
||||||
|
#TabsToolbar toolbarbutton:not([disabled]):hover,
|
||||||
|
#TabsToolbar toolbarbutton[open=true] {
|
||||||
|
fill-opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove shadow next to tab scroll buttons */
|
||||||
|
.arrowscrollbox-overflow-start-indicator,
|
||||||
|
.arrowscrollbox-overflow-end-indicator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove tab separators */
|
||||||
|
.tabbrowser-tab::after,
|
||||||
|
.tabbrowser-tab::before {
|
||||||
|
border-color: transparent !important;
|
||||||
|
border-image: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Space between tabs */
|
||||||
|
.tabbrowser-tab:not([pinned=true]) {
|
||||||
|
margin: 0 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tab labels */
|
||||||
|
tab {
|
||||||
|
color: rgb(147, 150, 149) !important;
|
||||||
|
/* font-family: Ubuntu;*/
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
tab:hover {
|
||||||
|
color: rgb(192, 194, 192) !important;
|
||||||
|
}
|
||||||
|
tab[selected] {
|
||||||
|
color: rgb(238, 238, 236) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make tab icons look kinda like symbolic icons */
|
||||||
|
tab .tab-icon-image {
|
||||||
|
filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove tab icons */
|
||||||
|
/* tab:not([pinned=true]) .tab-icon-image {
|
||||||
|
display: none;
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* Close tab button */
|
||||||
|
.tab-close-button {
|
||||||
|
filter: invert(85%);
|
||||||
|
list-style-image: url("moz-icon://stock/window-close-symbolic?size=menu") !important;
|
||||||
|
height: 22px;
|
||||||
|
width: 22px;
|
||||||
|
}
|
||||||
|
.tab-close-button:hover {
|
||||||
|
/* border: 1px solid #1c1f1f; /* (without filter: invert) */
|
||||||
|
border: 1px solid #e3e0e0; /* (with filter: invert) */
|
||||||
|
border-radius: 3px;
|
||||||
|
filter: invert(100%); /* if you're removing this, change border too (above) */
|
||||||
|
}
|
||||||
|
.tab-close-button:active {
|
||||||
|
/* without filter: invert */
|
||||||
|
/* background-image: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50));
|
||||||
|
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); */
|
||||||
|
/* with filter: invert */
|
||||||
|
background-image: linear-gradient(rgb(220, 216, 216), rgb(214, 210, 210) 40%, rgb(210, 205, 205));
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
.tab-close-button:active:not(:hover) {
|
||||||
|
background-image: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
.tab-close-button > .toolbarbutton-icon {
|
||||||
|
height: 16px !important;
|
||||||
|
width: 16px !important;
|
||||||
|
opacity: .2;
|
||||||
|
}
|
||||||
|
.tab-close-button:hover > .toolbarbutton-icon {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove blue line above tabs */
|
||||||
|
.tab-line {
|
||||||
|
--tab-line-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Move container lines to the top */
|
||||||
|
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background {
|
||||||
|
border-top: 2px solid var(--identity-tab-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active tab */
|
||||||
|
.tab-background[selected=true] {
|
||||||
|
background-color: #343939 !important;
|
||||||
|
background-image: none !important;
|
||||||
|
border-right-color: #282b2b !important;
|
||||||
|
border-left-color: #282b2b !important;
|
||||||
|
border-image: none !important;
|
||||||
|
border-bottom: 3px solid #215d9c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tab hover */
|
||||||
|
.tabbrowser-tab:hover > .tab-stack > .tab-background[selected=true] {
|
||||||
|
background-color: #363c3c !important;
|
||||||
|
}
|
||||||
|
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
|
||||||
|
#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
|
||||||
|
#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
|
||||||
|
border-image: none !important;
|
||||||
|
border-right: 1px solid #2a2f2f !important;
|
||||||
|
border-left: 1px solid #2a2f2f !important;
|
||||||
|
border-bottom: 3px solid #1c1f1f !important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
@import "ui/theme.css";
|
||||||
|
@import "ui/no-white-flash.css";
|
||||||
|
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
||||||
|
|
@ -0,0 +1,367 @@
|
||||||
|
@namespace html "http://www.w3.org/1999/xhtml";
|
||||||
|
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||||
|
|
||||||
|
@-moz-document url-prefix("moz-extension://") {
|
||||||
|
:root {
|
||||||
|
--popup-background: #292929;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--in-content-page-background) !important;
|
||||||
|
color: var(--in-content-page-color) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*******************************************************************************
|
||||||
|
* Dark about: pages */
|
||||||
|
|
||||||
|
*|*:root {
|
||||||
|
--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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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: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