1060 lines
26 KiB
CSS
1060 lines
26 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);
|
|
--primary-accent-color-darkest: var(--blue-60);
|
|
}
|
|
@-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;
|
|
}
|
|
}
|
|
/* Bookmarks Pop up */
|
|
|
|
#editBMPanel_rows > row > textbox,
|
|
#editBMPanel_rows > row > hbox > textbox,
|
|
#editBMPanel_folderMenuList,
|
|
#editBookmarkPanelRemoveButton,
|
|
#editBookmarkPanelDoneButton,
|
|
#editBMPanel_foldersExpander,
|
|
#editBMPanel_tagsSelectorExpander {
|
|
-moz-appearance: none !important;
|
|
background: var(--grey-70) !important;
|
|
color: var(--primary-light-color) !important;
|
|
border: 1px solid var(--grey-50) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#editBookmarkPanel .expander-down > .button-box > .button-icon {
|
|
filter: invert(65%) !important;
|
|
}
|
|
|
|
#editBMPanel_folderTree,
|
|
#editBMPanel_tagsSelector {
|
|
-moz-appearance: none !important;
|
|
background: var(--grey-70) !important;
|
|
color: var(--primary-light-color) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
#editBMPanel_folderTree treechildren:not(.autocomplete-treebody)::-moz-tree-row,
|
|
#editBMPanel_tagsSelector treechildren:not(.autocomplete-treebody)::-moz-tree-row {
|
|
background: var(--grey-60) !important;
|
|
color: var(--primary-light-color) !important;
|
|
}
|
|
|
|
#editBMPanel_folderTree treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover),
|
|
#editBMPanel_tagsSelector treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
|
|
background: var(--dark-accent) !important;
|
|
color: var(--primary-accent-color) !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;
|
|
}
|
|
|
|
/* Change the outline of icons to light instead of dark */
|
|
|
|
#editBMPanel_folderTree treechildren::-moz-tree-image {
|
|
fill: var(--primary-light-color) !important;
|
|
}
|
|
|
|
#editBMPanel_folderTree treechildren::-moz-tree-image(selected) {
|
|
fill: white !important;
|
|
}
|
|
|
|
/* Selected, in focus */
|
|
|
|
#editBMPanel_folderTree treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) {
|
|
background: var(--primary-accent-color) !important;
|
|
}
|
|
|
|
listitem[selected="true"] {
|
|
background-color: var(--primary-accent-color) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
#editBMPanel_folderTree treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current) {
|
|
background: var(--blue-40) !important;
|
|
}
|
|
|
|
#editBMPanel_folderTree {
|
|
border: 1px solid var(--grey-50) !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
#editBMPanel_newFolderBox {
|
|
background: var(--grey-70) !important;
|
|
border: 1px solid var(--grey-50) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
@-moz-document url("chrome://global/content/commonDialog.xul") {
|
|
#commonDialog {
|
|
-moz-appearance: none !important;
|
|
background: var(--primary-dark-color) !important;
|
|
color: var(--primary-light-color) !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;
|
|
}
|
|
|
|
/* Context menu, display disabled items in a different colour */
|
|
|
|
menuitem[disabled="true"] {
|
|
color: var(--grey-50) !important;
|
|
}
|
|
|
|
menuitem:hover[disabled="true"] {
|
|
color: var(--grey-50) !important;
|
|
background-color: var(--grey-70) !important;
|
|
}
|
|
|
|
#context-navigation menuitem[disabled="true"] {
|
|
color: var(--grey-50) !important;
|
|
}
|
|
|
|
#context-navigation menuitem:hover[disabled="true"] {
|
|
color: var(--grey-50) !important;
|
|
background-color: var(--grey-80) !important;
|
|
}
|
|
|
|
menupopup menu:hover,
|
|
menuitem:hover {
|
|
color: var(--grey-10) !important;
|
|
background-color: var(--grey-80) !important;
|
|
}
|
|
|
|
/* Sidebar Header Context Menu */
|
|
|
|
.panel-arrowcontent {
|
|
color: var(--grey-10) !important;
|
|
background: var(--grey-60) !important;
|
|
}
|
|
|
|
/* Sidebar border */
|
|
|
|
vbox#sidebar-box.chromeclass-extrachrome {
|
|
border-color: var(--grey-80) !important;
|
|
border-right: 1px !important;
|
|
border-style: solid !important;
|
|
}
|
|
|
|
/* The following snippets are designed to fix problems
|
|
* only noticed on Windows computers */
|
|
|
|
@media screen and (-moz-windows-theme),
|
|
screen and (-moz-windows-classic),
|
|
screen and (-moz-windows-default-theme),
|
|
screen and (-moz-os-version: windows-win7),
|
|
screen and (-moz-os-version: windows-win8),
|
|
screen and (-moz-os-version: windows-win10) {
|
|
/* Remove white separators between menu items */
|
|
|
|
menupopup menuseparator {
|
|
-moz-appearance: none !important;
|
|
background: rgba(0, 0, 0, 0) !important;
|
|
border: 0px !important;
|
|
}
|
|
|
|
/* Removes white bar between icons and menu items */
|
|
|
|
#context-navigation,
|
|
#context-sep-navigation {
|
|
padding: 0px !important;
|
|
}
|
|
|
|
/* Bookmarks Toolbar, Toolbar Context menu, spacing tweaks */
|
|
|
|
#personal-bookmarks menupopup .bookmark-item,
|
|
#bookmarksMenuPopup,
|
|
menupopup#toolbar-context-menu,
|
|
menupopup#menu_ToolsPopup,
|
|
menupopup#goPopup,
|
|
menupopup#tabContextMenu {
|
|
padding-left: 4px !important;
|
|
padding-right: 4px !important;
|
|
}
|
|
|
|
/* Tab menu */
|
|
|
|
menupopup > menu > menupopup > .popup-internal-box,
|
|
menupopup#toolbar-context-menu > menuitem {
|
|
padding-left: 1px !important;
|
|
padding-right: 1px !important;
|
|
}
|
|
|
|
/* All menus padding tweaks */
|
|
|
|
menupopup,
|
|
menupopup > menu > menupopup,
|
|
#bookmarksMenuPopup menupopup > hbox {
|
|
padding: 4px 0px 4px 0px !important;
|
|
}
|
|
|
|
#bookmarksMenuPopup menupopup {
|
|
padding: 0px 0px 0px 0px !important;
|
|
}
|
|
|
|
#BMB_bookmarksPopup menupopup {
|
|
padding: 4px 0px 0px 0px !important;
|
|
}
|
|
|
|
/* Context menu, spacing and font size similar to macOS */
|
|
|
|
menupopup menuitem,
|
|
menupopup menu {
|
|
font-size: 1.167em !important;
|
|
padding-top: 1px !important;
|
|
padding-bottom: 1px !important;
|
|
}
|
|
|
|
menupopup menu menuitem,
|
|
menupopup menu menu {
|
|
font-size: 1em !important;
|
|
padding-top: 1px !important;
|
|
padding-bottom: 1px !important;
|
|
}
|
|
|
|
menupopup#contentAreaContextMenu menuitem,
|
|
menupopup#contentAreaContextMenu menu {
|
|
padding-top: 2px !important;
|
|
padding-bottom: 2px !important;
|
|
}
|
|
|
|
/* Menus, slightly adjust arrow */
|
|
|
|
menupopup .menu-right {
|
|
margin-right: 0px !important;
|
|
}
|
|
|
|
/* Menus, slightly increase separator margin */
|
|
|
|
menupopup menuseparator {
|
|
margin: 2px !important;
|
|
}
|
|
|
|
/* Context menus, border added because Windows has a different drop shadow effect than macOS */
|
|
|
|
#personal-bookmarks menupopup,
|
|
.panel-arrowcontent,
|
|
.box-inherit scrollbox-innerbox,
|
|
#BMB_bookmarksPopup menupopup[placespopup="true"] > hbox,
|
|
#bookmarksMenuPopup menupopup[placespopup="true"] > hbox,
|
|
menupopup#BMB_bookmarksPopup > menu > menupopup > hbox,
|
|
menupopup#bookmarksMenuPopup > menu > menupopup > hbox,
|
|
menupopup#contentAreaContextMenu,
|
|
menupopup#placesContext,
|
|
menupopup#bookmarksMenuPopup,
|
|
menupopup#PlacesChevronPopup,
|
|
menupopup#toolbar-context-menu,
|
|
menupopup#downloadsContextMenu,
|
|
menupopup#tabContextMenu,
|
|
menupopup > menu > menupopup {
|
|
border-color: var(--grey-70) !important;
|
|
border-width: 1px !important;
|
|
border-style: solid !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;
|
|
}
|
|
/* Color of tab throbber animation */
|
|
|
|
:root {
|
|
--tab-loading-fill: var(--primary-accent-color) !important;
|
|
}
|
|
|
|
.tab-throbber::before {
|
|
fill: var(--primary-accent-color) !important;
|
|
opacity: 1 !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;
|
|
}
|
|
|
|
#downloadsFooter[showingsummary] > stack:not(:hover) {
|
|
background-color: var(--grey-80) !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%;
|
|
}
|
|
|
|
toolbarbutton {
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
.panel-banner-item > .toolbarbutton-multiline-text {
|
|
color: var(--primary-light-color) !important;
|
|
}
|
|
|
|
.panel-banner-item {
|
|
background-color: hsla(96,65%,37%,.9) !important;
|
|
}
|
|
|
|
#update-manual-whats-new {
|
|
color: var(--primary-accent-color) !important;
|
|
}
|
|
|
|
/* Color of highlighted buttons */
|
|
|
|
toolbar[brighttext] {
|
|
--toolbarbutton-icon-fill-attention: var(--primary-accent-color-dark) !important;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: var(--blue-40);
|
|
color: white !important;
|
|
}
|
|
/* Remove white flash on load */
|
|
|
|
#sidebar,
|
|
#sidebar-box,
|
|
#webextpanels-window,
|
|
#webext-panels-browser {
|
|
background: var(--primary-dark-color) !important;
|
|
}
|
|
|
|
/* 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, 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;
|
|
}
|
|
|
|
/* Selected, in focus */
|
|
|
|
#places treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) {
|
|
background: var(--primary-accent-color) !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;
|
|
}
|
|
|
|
#placesMenu > menu {
|
|
color: var(--primary-light-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;
|
|
}
|
|
|
|
/* [WINDOWS ONLY] fixes */
|
|
|
|
@media screen and (-moz-windows-theme) {
|
|
#topBar {
|
|
-moz-appearance: none !important;
|
|
background-color: var(--grey-80) !important;
|
|
border: none !important;
|
|
padding-top: 5px !important;
|
|
padding-bottom: 5px !important;
|
|
color: var(--grey-20) !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (-moz-windows-theme) {
|
|
#metaTagsCaption,
|
|
#security-identity,
|
|
#security-privacy,
|
|
#security-technical,
|
|
#security-identity-groupbox,
|
|
#security-privacy-groupbox,
|
|
#security-technical-groupbox {
|
|
-moz-appearance: none !important;
|
|
background-color: var(--grey-70) !important;
|
|
border: none !important;
|
|
color: var(--grey-10) !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (-moz-windows-theme) {
|
|
#security-identity-groupbox,
|
|
#security-privacy-groupbox,
|
|
#security-technical-groupbox {
|
|
-moz-appearance: none !important;
|
|
background-color: var(--grey-80) !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: var(--primary-dark-color) !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;
|
|
} |