ShadowFox/userChrome.css

763 lines
18 KiB
CSS

/* Photon Colors CSS Variables v1.4.0
* Colors are taken from: https://github.com/FirefoxUX/design-tokens */
:root {
--magenta-50: #ff1ad9;
--magenta-60: #ed00b5;
--magenta-70: #b5007f;
--magenta-80: #7d004f;
--magenta-90: #440027;
--purple-50: #9400ff;
--purple-60: #8000d7;
--purple-70: #6200a4;
--purple-80: #440071;
--purple-90: #25003e;
--blue-40: #45a1ff;
--blue-50: #0a84ff;
--blue-60: #0060df;
--blue-70: #003eaa;
--blue-80: #002275;
--blue-90: #000f40;
--teal-50: #00feff;
--teal-60: #00c8d7;
--teal-70: #008ea4;
--teal-80: #005a71;
--teal-90: #002d3e;
--green-50: #30e60b;
--green-60: #12bc00;
--green-70: #058b00;
--green-80: #006504;
--green-90: #003706;
--yellow-50: #ffe900;
--yellow-60: #d7b600;
--yellow-70: #a47f00;
--yellow-80: #715100;
--yellow-90: #3e2800;
--red-50: #ff0039;
--red-60: #d70022;
--red-70: #a4000f;
--red-80: #5a0002;
--red-90: #3e0200;
--orange-50: #ff9400;
--orange-60: #d76e00;
--orange-70: #a44900;
--orange-80: #712b00;
--orange-90: #3e1300;
--grey-10: #f9f9fa;
--grey-20: #ededf0;
--grey-30: #d7d7db;
--grey-40: #b1b1b3;
--grey-50: #737373;
--grey-60: #4a4a4f;
--grey-70: #38383d;
--grey-80: #2a2a2e;
--grey-90: #0c0c0d;
--ink-70: #363959;
--ink-80: #202340;
--ink-90: #0f1126;
}
:root {
--primary-dark-color: var(--grey-70);
/* Color of FF dark theme nav-bar */
--primary-light-color: var(--grey-40);
/* Off white */
--light-accent-color: var(--grey-50);
/* Slightly darker off white */
--dark-accent: var(--grey-80);
/* darker shade of main color */
--mid-way-color: var(--grey-60);
/* inbetween main dark and light color */
--primary-accent-color: var(--blue-40);
--primary-accent-color-dark: var(--blue-50);
}
@-moz-document url(chrome://browser/content/aboutDialog.xul) {
#clientBox {
color: var(--primary-light-color) !important;
background-color: var(--primary-dark-color) !important;
}
#bottomBox {
background: var(--dark-accent) !important;
}
}
/* The following code is based on that found on
* https://www.jeffersonscher.com/gm/url-bar-tweaks.html
* Copyright © 2017 Jefferson Scher (BSD-3-Clause License or CC-BY License) */
:root {
--panel-separator-color: var(--grey-60) !important;
}
#urlbar[focused=true],
.searchbar-textbox[focused=true] {
border: 1px solid var(--primary-accent-color) !important;
box-shadow: 0 1px 4px var(--primary-accent-color) !important;
}
/* URL Bar Drop Down */
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
background-color: var(--grey-60) !important;
}
#PopupAutoCompleteRichResult .autocomplete-richlistitem {
border-bottom-color: var(--primary-light-color) !important;
}
/* Hover color */
.autocomplete-richlistitem:hover,
treechildren.searchbar-treebody::-moz-tree-row(hover) {
background-color: var(--grey-70) !important;
}
.autocomplete-richlistitem .ac-title,
.autocomplete-richlistitem .ac-action,
.autocomplete-richlistitem .ac-separator,
#PopupSearchAutoComplete {
color: var(--primary-light-color) !important;
}
.autocomplete-richlistitem[selected=true] {
background-color: var(--primary-accent-color) !important;
}
.autocomplete-richlistitem[selected=true] .ac-title,
.ac-title[selected],
.autocomplete-richlistitem[selected=true] .ac-action,
.ac-action[selected],
.autocomplete-richlistitem[selected=true] .ac-separator,
.ac-separator[selected] {
color: white !important;
}
.autocomplete-richlistitem[selected=true] .ac-url,
.ac-url[selected] {
color: white !important;
}
.ac-url {
color: var(--primary-accent-color) !important;
}
.search-one-offs {
background: var(--grey-60) !important;
}
.search-panel-input-value {
color: var(--primary-accent-color) !important;
}
/* Search one-offs */
.search-panel-one-offs {
background: var(--grey-80) !important;
}
.search-panel-header {
background-color: var(--grey-80) !important;
border-top: none !important;
}
.search-panel-one-offs {
border-top: none !important;
}
/* Searchbar */
panel[type="autocomplete"],
panel[type="autocomplete-richlistbox"],
.autocomplete-history-popup {
color: var(--primary-light-color) !important;
background: var(--primary-dark-color) !important;
}
/* Changes the hover color and text color */
.autocomplete-tree {
color: var(--primary-light-color) !important;
}
.searchbar-treebody::-moz-tree-row {
background-color: var(--grey-60) !important;
}
.searchbar-treebody::-moz-tree-row(hover) {
background-color: background-color: var(--grey-70) !important;
}
.searchbar-treebody::-moz-tree-row(selected) {
background-color: var(--primary-accent-color) !important;
}
/* Main context menu */
menupopup,
popup,
popup > menu > menupopup,
menupopup > menu > menupopup,
menupopup scrollbox {
-moz-appearance: none !important;
background: var(--grey-60) !important;
border: none !important;
padding: 0px 0px 0px 0px !important;
}
/* More options right arrow */
.menu-right {
filter: invert(95%)!important;
}
/* Top Row of Navigation Options */
#context-navigation menuitem {
color: var(--grey-10) !important;
background: var(--grey-70) !important;
}
#context-navigation menuitem:hover {
background: var(--grey-80) !important;
}
/* Menu items */
menupopup menu,
menuitem {
-moz-appearance: none !important;
color: var(--grey-10) !important;
}
/* Menu Separators - removed */
menupopup menuseparator {
padding: 0 !important;
border-top: none !important;
margin: 2px 6px 2px 6px !important;
}
menupopup menu:hover,
menuitem:hover {
color: var(--grey-10) !important;
background-color: var(--grey-80) !important;
}
/* Sidebar Header Context Menue */
.panel-arrowcontent {
color: var(--grey-10) !important;
background: var(--grey-60) !important;
}
/* The following snippets are designed to fix promblems
* only noticed on Windows computers. Thank you to u/markdarkness!
* for helping me with these issues. */
/* Remove white separators between menu items */
menupopup menuseparator {
-moz-appearance: none !important;
background: rgba(0, 0, 0, 0) !important;
border: 0px !important;
}
/* Increase height between menu items */
menupopup menu,
menuitem {
padding-top: .5px !important;
}
/* Removes white bar between icons and menu items */
#context-navigation,
#context-sep-navigation {
padding: 0px !important;
}
#customization-done-button {
color: var(--primary-light-color);
font-weight: 700;
border-color: var(--primary-accent-color-dark) !important;
background-color: var(--primary-accent-color) !important;
}
#customization-done-button:-moz-any(:focus, :active, :hover):not([disabled]) {
background-color: var(--primary-accent-color-dark) !important;
}
/*Pop Down Arrow */
.panel-arrow {
filter: invert(70%) !important;
}
/* main menu */
.panel-subview-body,
#appMenu-zoomReset-button {
color: var(--grey-10) !important;
background: var(--grey-60) !important;
}
/* header of sub menus */
.panel-subview-footer,
[class^="PanelUI-"] {
color: var(--grey-10) !important;
background: var(--grey-70) !important;
}
/* webextension popup fix */
.webextension-popup-browser {
background: white !important;
}
/* Fix for downloads menu */
photonpanelmultiview panelview {
background: none !important;
color: var(--primary-light-color) !important;
}
#emptyDownloads {
background: var(--grey-60) !important;
color: var(--primary-light-color) !important;
}
#downloadsFooterButtons {
background: var(--grey-70) !important;
color: var(--primary-light-color) !important;
}
/* Fix downloads list - only appears to be necessary in Nightly */
#downloadsListBox {
background: var(--primary-dark-color) !important;
}
#appMenu-mainView toolbarbutton:hover,
#customizationui-widget-multiview toolbarbutton:hover,
#widget-overflow-list toolbarbutton:hover {
background: var(--grey-80) !important;
}
#BMB_bookmarksPopup {
background: none !important;
}
/* Secure Connection Drop Down */
#identity-popup-securityView {
background: var(--grey-60) !important;
}
/* Divider */
#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
background: var(--primary-light-color) !important;
}
/* Button */
.identity-popup-expander[panel-multiview-anchor] {
background-color: var(--primary-accent-color) !important;
fill: var(--primary-light-color) !important;
}
/* Secure connection drop-down - necessary change for FF 59 */
/* Main Background */
#identity-popup-mainView {
background: var(--grey-60) !important;
color: var(--primary-light-color) !important;
}
/* Lock color */
#identity-popup[connection^="secure"] .identity-popup-security-content {
fill: var(--primary-accent-color) !important;
}
/* Permissions logo - white (can't change background image only)
* Temporary hack until I fish out the icon and invert that */
#identity-popup-permissions-content {
filter: invert(90%) !important;
}
/* Change color of text to account for ^^ */
#identity-popup-permissions-content {
color: var(--grey-70) !important;
}
/* More info right button */
.identity-popup-expander {
border-right: solid 1px var(--grey-50) !important;
background-color: var(--grey-60) !important;
fill: var(--grey-50) !important;
}
/* New update is available */
.popup-notification-button[default][highlight="true"]:not([disabled]) {
background-color: var(--primary-accent-color) !important;
color: #ccc;
}
#update-available-whats-new {
color: var(--primary-accent-color) !important;
}
.popup-notification-icon[popupid="update-available"],
.popup-notification-icon[popupid="update-manual"],
.popup-notification-icon[popupid="update-restart"] {
background-color: var(--primary-accent-color) !important;
border-radius: 50%;
}
/* Sidebar */
.sidebar-placesTree {
-moz-appearance: none !important;
background: var(--grey-70) !important;
color: var(--primary-light-color) !important;
opacity: 1 !important;
}
/* Change the outline of icons to light instead of dark */
.sidebar-placesTree::-moz-tree-image,
.sidebar-placesTreechildren::-moz-tree-image {
fill: var(--primary-light-color) !important;
}
/* Sidebar Header */
.sidebar-header,
#sidebar-header {
background: var(--grey-80) !important;
color: var(--primary-light-color) !important;
}
/* Sidebar search container */
#sidebar-search-container {
background: var(--grey-80) !important;
color: var(--primary-light-color) !important;
}
/* Sidebar search box */
#sidebar-search-container textbox {
-moz-appearance: none !important;
border-radius: .3em !important;
background-color: var(--grey-60) !important;
color: var(--primary-light-color) !important;
border: solid 1px var(--mid-way-color) !important;
}
/* Sidebar "view" button */
#sidebar-search-container #viewButton {
color: var(--primary-light-color) !important;
}
/* Drop down arrow - next to "view" */
.button-menu-dropmarker,
.button-menubutton-dropmarker {
filter: invert(65%);
}
/* Sidebar splitter
* Adjust width to personal preference -
* I keep it at 4 for easy mobility and Tree Style Tabs
* utilizes it for container indicators */
#sidebar-splitter {
width: 4px !important;
background: var(--primary-dark-color) !important;
opacity: 0 !important;
}
/* Reverse color of sidebar header icon for Tree Style Tabs
* you may delete this snippit if you don't use the extension */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-icon {
filter: invert(60%);
}
#button_treestyletab_piro_sakura_ne_jp-sidebar-action .toolbarbutton-icon {
filter: invert(87%);
}
/* Siderbar slider - thank you u/_Dimitri_
* Add this section if on Windows
scrollbar > slider {
max-width: 4px !important;
}
scrollbar > slider > thumb, scrollbar > scrollbarbutton {
-moz-appearance: none !important;
background-color: var(--grey-80) !important;;
}
*/
statuspanel .statuspanel-label {
background-color: var(--grey-80) !important;
color: var(--primary-light-color) !important;
border: none !important;
}
/* Top Border */
.browserContainer > findbar {
border-top: 1px solid var(--grey-80) !important;
}
/* Alter buttons */
.findbar-find-previous,
.findbar-find-next {
border: none !important;
background: none !important;
border-radius: 2px !important;
fill: var(--primary-light-color) !important;
}
/* Fix spacing */
.findbar-find-previous {
margin-left: 6px !important;
}
/* Buttons on hover */
.findbar-find-previous:hover,
.findbar-find-next:hover {
background: var(--toolbarbutton-hover-background) !important;
}
@-moz-document url(chrome://browser/content/places/places.xul),
url(chrome://browser/content/places/bookmarkProperties.xul) {
/* Details Dock and Bookmark Properties*/
#detailsDeck,
#bookmarkproperties {
-moz-appearance: none !important;
background-color: var(--grey-70) !important;
color: var(--primary-light-color) !important;
border: 0px solid black !important;
}
/* Toolbar */
toolbar {
-moz-appearance: none !important;
background-color: var(--grey-80) !important;
border: 0px solid black !important;
}
/* Main Area */
#placeContent,
#places #downloadsRichListBox {
-moz-appearance: none !important;
border: 1px solid var(--grey-60) !important;
color: rgb(200,200,200) !important;
background-color: var(--grey-60) !important;
}
/* Sidebar */
#placesList {
-moz-appearance: none !important;
color: rgb(200,200,200) !important;
background-color: rgba(12, 12, 13, .8) !important;
}
/* Column Header */
#contentView treecol {
-moz-appearance: none !important;
border: 0px solid !important;
border-bottom: 1px solid !important;
border-right: 1px solid rgb(0,0,0) !important;
-moz-border-bottom-colors: rgb(0,0,0) !important;
background: linear-gradient(to bottom,
rgba(56,70,82,1) 0%,
rgba(35,39,48,1) 100%) !important;
color: white !important;
}
/* Text Boxes - One Line */
#places textbox:not([multiline="true"]),
#editBookmarkPanelContent textbox:not([multiline="true"]) {
-moz-appearance: none !important;
color: var(--primary-light-color) !important;
background-color: var(--grey-60) !important;
}
/* Bookmarks Description Field */
#places #editBMPanel_descriptionField,
#editBookmarkPanelContent #editBMPanel_descriptionField {
-moz-appearance: none !important;
background-color: var(--grey-60) !important;
color: var(--primary-light-color) !important;
}
/* Bookmark Tag Options */
listbox {
-moz-appearance: none !important;
background-color: var(--grey-60) !important;
color: var(--primary-light-color) !important;
}
#places listbox:focus > listitem[selected="true"] {
background-color: var(--primary-accent-color) !important;
color: black !important;
}
/* *
* Tree Items *
* */
#places treechildren::-moz-tree-row {
background-color: transparent !important;
overflow-y: scroll !important;
}
/* Change the outline of icons to light instead of dark */
#places treechildren::-moz-tree-image,
#places treechildren::-moz-tree-image {
fill: var(--primary-light-color) !important;
}
/* Selected, in focus */
#places treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) {
background: var(--primary-accent-color) !important;
}
/* Selected, not in focus */
#places treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current) {
background: var(--blue-40) !important;
}
treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
-moz-border-top-colors: var(--grey-80) !important;
-moz-border-right-colors: var(--grey-80) !important;
-moz-border-left-colors: var(--grey-80) !important;
-moz-border-bottom-colors: var(--grey-80) !important;
}
#placeContent treechildren:not(.autocomplete-treebody)::-moz-tree-row(odd) {
background: rgba(12, 12, 13, .1) !important;
}
#places treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
background: var(--dark-accent) !important;
-moz-border-top-colors: var(--dark-accent) !important;
-moz-border-right-colors: var(--dark-accent) !important;
-moz-border-left-colors: var(--dark-accent) !important;
-moz-border-bottom-colors: var(--dark-accent) !important;
}
#places treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) {
background: var(--primary-accent-color) !important;
}
}
@-moz-document url(chrome://browser/content/pageinfo/pageInfo.xul) {
#topBar {
-moz-appearance: none !important;
background: var(--grey-80) !important;
}
#mainDeck {
background: var(--primary-dark-color) !important;
color: white !important;
}
textbox {
color: var(--primary-light-color) !important;
}
tree {
-moz-appearance: none !important;
border: 1px solid rgb(0,0,0) !important;
color: rgb(200,200,200) !important;
background-color: var(--grey-60) !important;
}
treechildren::-moz-tree-row {
background-color: transparent !important;
overflow-y: scroll !important;
}
treecol {
-moz-appearance: none !important;
border: 0px solid !important;
border-bottom: 1px solid !important;
border-right: 1px solid rgb(0,0,0) !important;
-moz-border-bottom-colors: rgb(0,0,0) !important;
background: linear-gradient(to bottom,
rgba(56,70,82,1) 0%,
rgba(35,39,48,1) 100%) !important;
color: white !important;
}
treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) {
background: var(--primary-accent-color) !important;
}
.permission {
-moz-appearance: none !important;
background: var(--grey-60) !important;
color: var(--primary-light-color) !important;
border-color: var(--grey-70) !important;
}
#permPluginTemplate {
color: var(--primary-light-color) !important;
}
#permList {
border: 2px solid var(--grey-70) !important;
}
}
/* Remove 1px border underneath bookmarks bar */
#navigator-toolbox::after {
border-bottom: 0px !important;
}
/* Minimize white flash when loading some sites */
browser[type="content-primary"],
#content,
browser[type="content"] > html {
background: #323234 !important;
}
#identity-box.verifiedIdentity {
--urlbar-separator-color: var(--grey-50) !important;
}
.identity-popup-connection-secure,
#identity-box.verifiedIdentity #identity-icon-labels {
color: var(--primary-accent-color) !important;
}
#identity-popup[connection^=secure] #identity-popup-securityView,
#identity-popup[connection^=secure] #identity-popup-security-content,
#connection-icon {
fill: var(--primary-accent-color) !important;
}
/* Change active tab line color */
.tab-line[selected="true"] {
background-color: var(--primary-accent-color) !important;
}