variable clean up
This commit is contained in:
overdodactyl
parent
c76ec7e3c1
commit
9e6f6929a8
|
|
@ -2,12 +2,47 @@
|
|||
* 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;
|
||||
|
|
@ -29,17 +64,6 @@
|
|||
--accent-1: var(--blue-40);
|
||||
--accent-2: var(--blue-50);
|
||||
--accent-3: var(--blue-60);
|
||||
/*
|
||||
--primary-light-color: var(--grey-40);
|
||||
--light-accent-color: var(--grey-50);
|
||||
--mid-way-color: var(--grey-60);
|
||||
--primary-dark-color: var(--grey-70);
|
||||
--dark-accent: var(--grey-80);
|
||||
--darksest: var(--grey-90);
|
||||
--primary-accent-color: var(--blue-40);
|
||||
--primary-accent-color-dark: var(--blue-50);
|
||||
--primary-accent-color-darkest: var(--blue-60);
|
||||
*/
|
||||
--in-content-page-color: var(--tone-4) !important;
|
||||
/* Main Background Color */
|
||||
--in-content-page-background: var(--tone-7) !important;
|
||||
|
|
@ -87,6 +111,10 @@
|
|||
--theme-selection-background-hover: var(--accent-1) !important;
|
||||
--in-content-category-header-background: var(--tone-8) !important;
|
||||
--selected-icon-fill-color: var(--tone-2) !important;
|
||||
--in-content-dark-header-background: var(--tone-9) !important;
|
||||
--code-green: #86de74 !important;
|
||||
--warning-color: #FCE19F;
|
||||
--warning-background-color: #44391F;
|
||||
}
|
||||
|
||||
/*! Begin color overrides */
|
||||
|
|
@ -104,11 +132,12 @@ url-prefix(chrome://) {
|
|||
background-color: var(--in-content-box-background)!important;
|
||||
background-image: none!important;
|
||||
box-shadow: none!important;
|
||||
border-color: var(--in-content-box-border-color)!important;
|
||||
}
|
||||
|
||||
.radio-check[selected] {
|
||||
list-style-image: url("chrome://global/skin/in-content/radio.svg");
|
||||
fill: var(--accent-1)!important;
|
||||
fill: var(--in-content-border-highlight)!important;
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix(about:),
|
||||
|
|
@ -315,8 +344,8 @@ listitem[selected=true] {
|
|||
@-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;
|
||||
background: var(--in-content-page-background)!important;
|
||||
color: var(--in-content-page-color)!important;
|
||||
}
|
||||
}
|
||||
menupopup,
|
||||
|
|
@ -646,6 +675,33 @@ screen and (-moz-os-version:windows-win10) {
|
|||
tree {
|
||||
background-color: var(--in-content-box-background)!important;
|
||||
}
|
||||
|
||||
@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) {
|
||||
#metaTagsCaption,
|
||||
#security-identity,
|
||||
#security-identity-groupbox,
|
||||
#security-privacy,
|
||||
#security-privacy-groupbox,
|
||||
#security-technical,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--in-content-page-background)!important;
|
||||
border: none!important;
|
||||
color: var(--in-content-selected-text)!important;
|
||||
}
|
||||
|
||||
#security-identity-groupbox,
|
||||
#security-privacy-groupbox,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--in-content-category-header-background)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--tab-loading-fill: var(--in-content-category-text-selected)!important;
|
||||
|
|
@ -952,196 +1008,168 @@ statuspanel .statuspanel-label {
|
|||
.tab-line[selected=true] {
|
||||
background-color: var(--in-content-border-focus)!important;
|
||||
}
|
||||
/* Remove white separators between menu items */
|
||||
|
||||
menupopup menuseparator {
|
||||
-moz-appearance: none !important;
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
border: 0px !important;
|
||||
-moz-appearance: none!important;
|
||||
background: rgba(0,0,0,0)!important;
|
||||
border: 0!important;
|
||||
}
|
||||
|
||||
/* Removes white bar between icons and menu items */
|
||||
|
||||
#context-navigation,
|
||||
#context-sep-navigation {
|
||||
padding: 0px !important;
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
/* Bookmark Toolbar, fix border */
|
||||
|
||||
#BMB_bookmarksPopup menupopup {
|
||||
padding: 4px 0px 0px 0px !important;
|
||||
padding: 4px 0 0!important;
|
||||
}
|
||||
|
||||
/* Context menus, border added because Windows has a different drop shadow effect than macOS */
|
||||
|
||||
#BMB_bookmarksPopup menupopup[placespopup=true] > hbox,
|
||||
#personal-bookmarks menupopup,
|
||||
.panel-arrowcontent,
|
||||
.box-inherit scrollbox-innerbox,
|
||||
#BMB_bookmarksPopup menupopup[placespopup="true"] > hbox,
|
||||
.panel-arrowcontent,
|
||||
menupopup#BMB_bookmarksPopup > menu > menupopup > hbox,
|
||||
menupopup#PlacesChevronPopup,
|
||||
menupopup#bookmarksMenuPopup,
|
||||
menupopup#bookmarksMenuPopup > menu > menupopup,
|
||||
menupopup#bookmarksMenuPopup menupopup[placespopup="true"],
|
||||
menupopup#bookmarksMenuPopup menupopup[placespopup=true],
|
||||
menupopup#contentAreaContextMenu,
|
||||
menupopup#contentAreaContextMenu menupopup,
|
||||
menupopup#placesContext,
|
||||
menupopup#bookmarksMenuPopup,
|
||||
menupopup#PlacesChevronPopup,
|
||||
menupopup#toolbar-context-menu,
|
||||
menupopup#downloadsContextMenu,
|
||||
menupopup#placesContext,
|
||||
menupopup#tabContextMenu,
|
||||
menupopup#tabContextMenu menupopup,
|
||||
toolbaritem#menubar-items menupopup {
|
||||
border-color: var(--primary-dark-color) !important;
|
||||
border-width: 1px !important;
|
||||
border-style: solid !important;
|
||||
}
|
||||
|
||||
/* Bookmarks Toolbar, Toolbar Context menu, LEFT/RIGHT padding fixes */
|
||||
|
||||
#personal-bookmarks menupopup .bookmark-item,
|
||||
#bookmarksMenuPopup,
|
||||
menupopup#goPopup {
|
||||
padding-left: 4px !important;
|
||||
padding-right: 4px !important;
|
||||
}
|
||||
|
||||
/* Tab menu, LEFT/RIGHT padding fixes */
|
||||
|
||||
menupopup#tabContextMenu > menu > menupopup > .popup-internal-box,
|
||||
menupopup#toolbar-context-menu,
|
||||
menupopup#contentAreaContextMenu menupopup {
|
||||
padding-left: 2px !important;
|
||||
padding-right: 2px !important;
|
||||
toolbaritem#menubar-items menupopup {
|
||||
border-color: var(--in-content-page-color)!important;
|
||||
border-width: 1px!important;
|
||||
border-style: solid!important;
|
||||
}
|
||||
|
||||
/* Context menus, TOP/BOTTOM padding fixes */
|
||||
#bookmarksMenuPopup,
|
||||
#personal-bookmarks menupopup .bookmark-item,
|
||||
menupopup#goPopup {
|
||||
padding-left: 4px!important;
|
||||
padding-right: 4px!important;
|
||||
}
|
||||
|
||||
menupopup#contentAreaContextMenu menupopup,
|
||||
menupopup#tabContextMenu > menu > menupopup > .popup-internal-box,
|
||||
menupopup#toolbar-context-menu {
|
||||
padding-left: 2px!important;
|
||||
padding-right: 2px!important;
|
||||
}
|
||||
|
||||
menupopup,
|
||||
menupopup > menu > menupopup {
|
||||
padding: 4px 0px 4px 0px !important;
|
||||
padding: 4px 0!important;
|
||||
}
|
||||
|
||||
/* Menus, text size to match macOS */
|
||||
|
||||
menupopup#contentAreaContextMenu > menuitem,
|
||||
menupopup#contentAreaContextMenu > menu,
|
||||
#PlacesToolbar menupopup > menuitem,
|
||||
#PlacesToolbar menupopup > menu,
|
||||
menupopup#tabContextMenu > menuitem,
|
||||
#PlacesToolbar menupopup > menuitem,
|
||||
menupopup#contentAreaContextMenu > menu,
|
||||
menupopup#contentAreaContextMenu > menuitem,
|
||||
menupopup#placesContext menuitem,
|
||||
menupopup#tabContextMenu > menu,
|
||||
menupopup#tabContextMenu menupopup > menuitem,
|
||||
menupopup#tabContextMenu > menuitem,
|
||||
menupopup#tabContextMenu menupopup > menu,
|
||||
menupopup#toolbar-context-menu > menuitem,
|
||||
menupopup#placesContext menuitem {
|
||||
font-size: 1.167em !important;
|
||||
padding-top: 1px !important;
|
||||
padding-bottom: 1px !important;
|
||||
menupopup#tabContextMenu menupopup > menuitem,
|
||||
menupopup#toolbar-context-menu > menuitem {
|
||||
font-size: 1.167em!important;
|
||||
padding-top: 1px!important;
|
||||
padding-bottom: 1px!important;
|
||||
}
|
||||
|
||||
menupopup#contentAreaContextMenu menupopup > menuitem,
|
||||
menupopup#contentAreaContextMenu menupopup > menu,
|
||||
#PlacesToolbar menupopup menupopup > menuitem,
|
||||
#PlacesToolbar menupopup menupopup > menu,
|
||||
menupopup#tabContextMenu menupopup > menuitem,
|
||||
#PlacesToolbar menupopup menupopup > menuitem,
|
||||
menupopup#contentAreaContextMenu menupopup > menu,
|
||||
menupopup#contentAreaContextMenu menupopup > menuitem,
|
||||
menupopup#tabContextMenu menupopup > menu,
|
||||
menupopup#tabContextMenu menupopup > menuitem,
|
||||
menupopup.textbox-contextmenu > menuitem {
|
||||
font-size: 1em !important;
|
||||
font-size: 1em!important;
|
||||
}
|
||||
|
||||
/* Menu Bar menus, text size to match macOS */
|
||||
|
||||
toolbaritem#menubar-items menupopup > menuitem,
|
||||
toolbaritem#menubar-items menupopup > menu {
|
||||
font-size: 1.167em !important;
|
||||
toolbaritem#menubar-items menupopup > menu,
|
||||
toolbaritem#menubar-items menupopup > menuitem {
|
||||
font-size: 1.167em!important;
|
||||
}
|
||||
|
||||
toolbaritem#menubar-items menupopup menupopup > menuitem,
|
||||
toolbaritem#menubar-items menupopup menupopup > menu {
|
||||
font-size: 1em !important;
|
||||
toolbaritem#menubar-items menupopup menupopup > menu,
|
||||
toolbaritem#menubar-items menupopup menupopup > menuitem {
|
||||
font-size: 1em!important;
|
||||
}
|
||||
|
||||
/* Toolbar menu, LEFT/RIGHT padding fixes */
|
||||
|
||||
#customization-toolbar-menu,
|
||||
toolbaritem#menubar-items menupopup,
|
||||
toolbaritem#menubar-items menupopup > menu > menupopup {
|
||||
padding-left: 2px !important;
|
||||
padding-right: 2px !important;
|
||||
padding-left: 2px!important;
|
||||
padding-right: 2px!important;
|
||||
}
|
||||
|
||||
/* Context menu, TOP/BOTTOM padding fixes */
|
||||
|
||||
#personal-bookmarks menupopup menuitem {
|
||||
padding-top: 1px !important;
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
|
||||
menupopup#contentAreaContextMenu menuitem,
|
||||
menupopup#contentAreaContextMenu menu {
|
||||
padding-top: 1px !important;
|
||||
padding-bottom: 1px !important;
|
||||
#personal-bookmarks menupopup menuitem,
|
||||
menupopup#contentAreaContextMenu menu,
|
||||
menupopup#contentAreaContextMenu menuitem {
|
||||
padding-top: 1px!important;
|
||||
padding-bottom: 1px!important;
|
||||
}
|
||||
|
||||
menupopup#contentAreaContextMenu > .menuitem-iconic {
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 0px !important;
|
||||
padding-top: 0!important;
|
||||
padding-bottom: 0!important;
|
||||
}
|
||||
|
||||
/* Menus, slightly adjust arrow */
|
||||
|
||||
menupopup .menu-right {
|
||||
margin-right: 0px !important;
|
||||
margin-right: 0!important;
|
||||
}
|
||||
@-moz-document url(chrome://browser/content/places/places.xul),
|
||||
url(chrome://browser/content/places/bookmarkProperties.xul) {
|
||||
#metaTagsCaption,
|
||||
#security-identity,
|
||||
#security-privacy,
|
||||
#security-technical,
|
||||
#security-identity-groupbox,
|
||||
#security-privacy,
|
||||
#security-privacy-groupbox,
|
||||
#security-technical,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none !important;
|
||||
background-color: var(--primary-dark-color) !important;
|
||||
border: none !important;
|
||||
color: var(--grey-10) !important;
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--in-content-page-background)!important;
|
||||
border: none!important;
|
||||
color: var(--in-content-selected-text)!important;
|
||||
}
|
||||
|
||||
#security-identity-groupbox,
|
||||
#security-privacy-groupbox,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none !important;
|
||||
background-color: var(--dark-accent) !important;
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--in-content-category-header-background)!important;
|
||||
}
|
||||
}
|
||||
@-moz-document url(chrome://browser/content/pageinfo/pageInfo.xul) {
|
||||
#topBar {
|
||||
-moz-appearance: none !important;
|
||||
background-color: var(--dark-accent) !important;
|
||||
border: none !important;
|
||||
padding-top: 5px !important;
|
||||
padding-bottom: 5px !important;
|
||||
color: var(--grey-20) !important;
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--in-content-category-header-background)!important;
|
||||
border: none!important;
|
||||
padding-top: 5px!important;
|
||||
padding-bottom: 5px!important;
|
||||
color: var(--selected-icon-fill-color)!important;
|
||||
}
|
||||
|
||||
#metaTagsCaption,
|
||||
#security-identity,
|
||||
#security-privacy,
|
||||
#security-technical,
|
||||
#security-identity-groupbox,
|
||||
#security-privacy,
|
||||
#security-privacy-groupbox,
|
||||
#security-technical,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none !important;
|
||||
background-color: var(--primary-dark-color) !important;
|
||||
border: none !important;
|
||||
color: var(--grey-10) !important;
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--in-content-page-color)!important;
|
||||
border: none!important;
|
||||
color: var(--in-content-selected-text)!important;
|
||||
}
|
||||
|
||||
#security-identity-groupbox,
|
||||
#security-privacy-groupbox,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none !important;
|
||||
background-color: var(--dark-accent) !important;
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--in-content-category-header-background)!important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,45 @@
|
|||
/* 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;
|
||||
|
|
@ -29,64 +61,47 @@
|
|||
--accent-1: var(--blue-40);
|
||||
--accent-2: var(--blue-50);
|
||||
--accent-3: var(--blue-60);
|
||||
/*
|
||||
--primary-light-color: var(--grey-40);
|
||||
--light-accent-color: var(--grey-50);
|
||||
--mid-way-color: var(--grey-60);
|
||||
--primary-dark-color: var(--grey-70);
|
||||
--dark-accent: var(--grey-80);
|
||||
--darksest: var(--grey-90);
|
||||
--primary-accent-color: var(--blue-40);
|
||||
--primary-accent-color-dark: var(--blue-50);
|
||||
--primary-accent-color-darkest: var(--blue-60);
|
||||
*/
|
||||
--in-content-page-color: var(--tone-4) !important;
|
||||
/* Main Background Color */
|
||||
--in-content-page-background: var(--tone-7) !important;
|
||||
/* Main Text Color */
|
||||
--in-content-text-color: var(--tone-3) !important;
|
||||
/* Text in Search Boxes */
|
||||
--in-content-selected-text: var(--tone-1) !important;
|
||||
--in-content-box-background: var(--tone-6) !important;
|
||||
/* Text Boxes */
|
||||
--in-content-page-color: var(--tone-4)!important;
|
||||
--in-content-page-background: var(--tone-7)!important;
|
||||
--in-content-text-color: var(--tone-3)!important;
|
||||
--in-content-selected-text: var(--tone-1)!important;
|
||||
--in-content-box-background: var(--tone-6)!important;
|
||||
--in-content-box-background-odd: #f3f6fa;
|
||||
--in-content-box-background-hover: var(--tone-6) !important;
|
||||
/* Box Hover */
|
||||
--in-content-box-background-active: var(--tone-6) !important;
|
||||
/* Selected, but not hovered */
|
||||
--in-content-box-border-color: var(--tone-5) !important;
|
||||
/* Text Box Border */
|
||||
--in-content-box-background-hover: var(--tone-6)!important;
|
||||
--in-content-box-background-active: var(--tone-6)!important;
|
||||
--in-content-box-border-color: var(--tone-5)!important;
|
||||
--in-content-item-hover: rgba(0,149,221,0.25);
|
||||
--in-content-item-selected: var(--tone-8) !important;
|
||||
--in-content-border-highlight: var(--accent-1) !important;
|
||||
--in-content-border-focus: var(--accent-1) !important;
|
||||
/* Border on Focus */
|
||||
--in-content-border-color: var(--tone-6) !important;
|
||||
--in-content-item-selected: var(--tone-8)!important;
|
||||
--in-content-border-highlight: var(--accent-1)!important;
|
||||
--in-content-border-focus: var(--accent-1)!important;
|
||||
--in-content-border-color: var(--tone-6)!important;
|
||||
--in-content-category-outline-focus: 1px dotted #0a84ff;
|
||||
--in-content-category-text: var(--tone-4) !important;
|
||||
/* Non-selected Menu Items */
|
||||
--in-content-category-text: var(--tone-4)!important;
|
||||
--in-content-category-text-active: #0c0c0d;
|
||||
--in-content-category-text-selected: var(--accent-1) !important;
|
||||
/* Selected Menu Itemes */
|
||||
--in-content-category-text-selected: var(--accent-1)!important;
|
||||
--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: #424f5a;
|
||||
--in-content-link-color: var(--accent-1) !important;
|
||||
--in-content-link-color-hover: var(--accent-2) !important;
|
||||
--in-content-link-color: var(--accent-1)!important;
|
||||
--in-content-link-color-hover: var(--accent-2)!important;
|
||||
--in-content-link-color-active: #003eaa;
|
||||
--in-content-link-color-visited: #0a8dff;
|
||||
--in-content-primary-button-background: var(--accent-2) !important;
|
||||
--in-content-primary-button-background-hover: var(--accent-3) !important;
|
||||
--in-content-primary-button-background-active: var(--accent-3) !important;
|
||||
--in-content-table-border-dark-color: var(--tone-7) !important;
|
||||
--in-content-table-header-background: var(--accent-2) !important;
|
||||
--theme-selection-background: var(--accent-2) !important;
|
||||
--theme-selection-background-hover: var(--accent-1) !important;
|
||||
--in-content-category-header-background: var(--tone-8) !important;
|
||||
--selected-icon-fill-color: var(--tone-2) !important;
|
||||
--in-content-primary-button-background: var(--accent-2)!important;
|
||||
--in-content-primary-button-background-hover: var(--accent-3)!important;
|
||||
--in-content-primary-button-background-active: var(--accent-3)!important;
|
||||
--in-content-table-border-dark-color: var(--tone-7)!important;
|
||||
--in-content-table-header-background: var(--accent-2)!important;
|
||||
--theme-selection-background: var(--accent-2)!important;
|
||||
--theme-selection-background-hover: var(--accent-1)!important;
|
||||
--in-content-category-header-background: var(--tone-8)!important;
|
||||
--selected-icon-fill-color: var(--tone-2)!important;
|
||||
--in-content-dark-header-background: var(--tone-9)!important;
|
||||
--code-green: #86de74!important;
|
||||
--warning-color: #FCE19F;
|
||||
--warning-background-color: #44391F;
|
||||
}
|
||||
|
||||
/*! Begin color overrides */
|
||||
|
|
@ -104,11 +119,12 @@ url-prefix(chrome://) {
|
|||
background-color: var(--in-content-box-background)!important;
|
||||
background-image: none!important;
|
||||
box-shadow: none!important;
|
||||
border-color: var(--in-content-box-border-color)!important;
|
||||
}
|
||||
|
||||
.radio-check[selected] {
|
||||
list-style-image: url("chrome://global/skin/in-content/radio.svg");
|
||||
fill: var(--accent-1)!important;
|
||||
fill: var(--in-content-border-highlight)!important;
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix(about:),
|
||||
|
|
@ -117,43 +133,37 @@ url(chrome://passwordmgr/content/passwordManager.xul),
|
|||
url(chrome://formautofill/content/manageAddresses.xhtml),
|
||||
url-prefix(chrome://pippki) {
|
||||
treechildren::-moz-tree-row,
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(multicol, odd) {
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(multicol,odd) {
|
||||
background-color: var(--in-content-box-background)!important;
|
||||
}
|
||||
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
|
||||
background-color: var(--theme-selection-background-hover) !important;
|
||||
background-color: var(--theme-selection-background-hover)!important;
|
||||
}
|
||||
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
|
||||
background-color: var(--theme-selection-background) !important;
|
||||
background-color: var(--theme-selection-background)!important;
|
||||
}
|
||||
|
||||
tree {
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
background-color: var(--in-content-box-background)!important;
|
||||
}
|
||||
|
||||
/* Inbetween Border */
|
||||
|
||||
treecol:not([hideheader="true"]):not(:first-child),
|
||||
treecol:not([hideheader=true]):not(:first-child),
|
||||
treecolpicker {
|
||||
border-image: linear-gradient(transparent 0%, transparent 20%, var(--tone-5) 20%, var(--tone-5) 80%, transparent 80%, transparent 100%) 1 1 !important;
|
||||
border-image: linear-gradient(transparent 0,transparent 20%,var(--tone-5) 20%,var(--tone-5) 80%,transparent 80%,transparent 100%) 1 1!important;
|
||||
}
|
||||
|
||||
/* Dropdown Markers */
|
||||
|
||||
menulist:not([editable="true"]) > *.menulist-dropmarker,
|
||||
treecol:not([hideheader="true"]) > *.treecol-sortdirection[sortDirection] {
|
||||
fill: var(--in-content-category-text) !important;
|
||||
menulist:not([editable=true]) > .menulist-dropmarker,
|
||||
treecol:not([hideheader=true]) > .treecol-sortdirection[sortDirection] {
|
||||
fill: var(--in-content-category-text)!important;
|
||||
}
|
||||
|
||||
/* Tree Headers */
|
||||
|
||||
treecol:not([hideheader="true"]),
|
||||
treecolpicker,
|
||||
fieldset > legend {
|
||||
background-color: var(--in-content-category-header-background) !important;
|
||||
color: var(--in-content-page-color) !important;
|
||||
fieldset > legend,
|
||||
treecol:not([hideheader=true]),
|
||||
treecolpicker {
|
||||
background-color: var(--in-content-category-header-background)!important;
|
||||
color: var(--in-content-page-color)!important;
|
||||
}
|
||||
}
|
||||
@-moz-document regexp("^about:(?!reader).*"),
|
||||
|
|
@ -456,7 +466,6 @@ url-prefix(https://discovery.addons.mozilla.org) {
|
|||
}
|
||||
|
||||
#content > div,
|
||||
#errorPageContainer,
|
||||
.info-box-content,
|
||||
.notice,
|
||||
div.opsRow,
|
||||
|
|
@ -853,11 +862,11 @@ url-prefix(https://discovery.addons.mozilla.org) {
|
|||
}
|
||||
|
||||
#sidebarContainer {
|
||||
background-color: var(--primary-dark-color)!important;
|
||||
background-color: var(--in-content-table-header-background)!important;
|
||||
}
|
||||
|
||||
#toolbarSidebar {
|
||||
background-color: var(--dark-accent)!important;
|
||||
background-color: var(--in-content-table-header-background)!important;
|
||||
background-image: none!important;
|
||||
border-color: var(--in-content-box-background)!important;
|
||||
}
|
||||
|
|
@ -896,7 +905,7 @@ url-prefix(https://discovery.addons.mozilla.org) {
|
|||
|
||||
.secondaryToolbarButton:focus,
|
||||
.secondaryToolbarButton:hover {
|
||||
background-color: var(--primary-dark-color)!important;
|
||||
background-color: var(--in-content-page-background)!important;
|
||||
background-image: none!important;
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,45 @@
|
|||
/* 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;
|
||||
|
|
@ -17,7 +49,6 @@
|
|||
--grey-70: #38383d;
|
||||
--grey-80: #2a2a2e;
|
||||
--grey-90: #0c0c0d;
|
||||
|
||||
--tone-1: var(--grey-10);
|
||||
--tone-2: var(--grey-20);
|
||||
--tone-3: var(--grey-30);
|
||||
|
|
@ -27,70 +58,50 @@
|
|||
--tone-7: var(--grey-70);
|
||||
--tone-8: var(--grey-80);
|
||||
--tone-9: var(--grey-90);
|
||||
|
||||
--accent-1: var(--blue-40);
|
||||
--accent-1: var(--blue-40);
|
||||
--accent-2: var(--blue-50);
|
||||
--accent-3: var(--blue-60);
|
||||
|
||||
/*
|
||||
--primary-light-color: var(--grey-40);
|
||||
--light-accent-color: var(--grey-50);
|
||||
--mid-way-color: var(--grey-60);
|
||||
--primary-dark-color: var(--grey-70);
|
||||
--dark-accent: var(--grey-80);
|
||||
--darksest: var(--grey-90);
|
||||
--primary-accent-color: var(--blue-40);
|
||||
--primary-accent-color-dark: var(--blue-50);
|
||||
--primary-accent-color-darkest: var(--blue-60);
|
||||
*/
|
||||
--in-content-page-color: var(--tone-4) !important; /* Main Background Color */
|
||||
--in-content-page-background: var(--tone-7) !important; /* Main Text Color */
|
||||
--in-content-text-color: var(--tone-3) !important; /* Text in Search Boxes */
|
||||
--in-content-selected-text: var(--tone-1) !important;
|
||||
--in-content-box-background: var(--tone-6) !important; /* Text Boxes */
|
||||
--in-content-page-color: var(--tone-4)!important;
|
||||
--in-content-page-background: var(--tone-7)!important;
|
||||
--in-content-text-color: var(--tone-3)!important;
|
||||
--in-content-selected-text: var(--tone-1)!important;
|
||||
--in-content-box-background: var(--tone-6)!important;
|
||||
--in-content-box-background-odd: #f3f6fa;
|
||||
--in-content-box-background-hover: var(--tone-6) !important; /* Box Hover */
|
||||
--in-content-box-background-active: var(--tone-6) !important; /* Selected, but not hovered */
|
||||
--in-content-box-border-color: var(--tone-5) !important; /* Text Box Border */
|
||||
--in-content-box-background-hover: var(--tone-6)!important;
|
||||
--in-content-box-background-active: var(--tone-6)!important;
|
||||
--in-content-box-border-color: var(--tone-5)!important;
|
||||
--in-content-item-hover: rgba(0,149,221,0.25);
|
||||
--in-content-item-selected: var(--tone-8) !important;
|
||||
--in-content-border-highlight: var(--accent-1) !important;
|
||||
--in-content-border-focus: var(--accent-1) !important; /* Border on Focus */
|
||||
--in-content-border-color: var(--tone-6) !important;
|
||||
--in-content-item-selected: var(--tone-8)!important;
|
||||
--in-content-border-highlight: var(--accent-1)!important;
|
||||
--in-content-border-focus: var(--accent-1)!important;
|
||||
--in-content-border-color: var(--tone-6)!important;
|
||||
--in-content-category-outline-focus: 1px dotted #0a84ff;
|
||||
--in-content-category-text: var(--tone-4) !important; /* Non-selected Menu Items */
|
||||
--in-content-category-text: var(--tone-4)!important;
|
||||
--in-content-category-text-active: #0c0c0d;
|
||||
--in-content-category-text-selected: var(--accent-1) !important; /* Selected Menu Itemes */
|
||||
--in-content-category-text-selected: var(--accent-1)!important;
|
||||
--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: #424f5a;
|
||||
--in-content-link-color: var(--accent-1) !important;
|
||||
--in-content-link-color-hover: var(--accent-2) !important;
|
||||
--in-content-link-color: var(--accent-1)!important;
|
||||
--in-content-link-color-hover: var(--accent-2)!important;
|
||||
--in-content-link-color-active: #003eaa;
|
||||
--in-content-link-color-visited: #0a8dff;
|
||||
--in-content-primary-button-background: var(--accent-2) !important;
|
||||
--in-content-primary-button-background-hover: var(--accent-3) !important;
|
||||
--in-content-primary-button-background-active: var(--accent-3) !important;
|
||||
--in-content-table-border-dark-color: var(--tone-7) !important;
|
||||
--in-content-table-header-background: var(--accent-2) !important;
|
||||
|
||||
--theme-selection-background: var(--accent-2) !important;
|
||||
--theme-selection-background-hover: var(--accent-1) !important;
|
||||
|
||||
--in-content-category-header-background: var(--tone-8) !important;
|
||||
--selected-icon-fill-color: var(--tone-2) !important;
|
||||
|
||||
--in-content-dark-header-background: var(--tone-9) !important;
|
||||
|
||||
--code-green: #86de74 !important;
|
||||
|
||||
--in-content-primary-button-background: var(--accent-2)!important;
|
||||
--in-content-primary-button-background-hover: var(--accent-3)!important;
|
||||
--in-content-primary-button-background-active: var(--accent-3)!important;
|
||||
--in-content-table-border-dark-color: var(--tone-7)!important;
|
||||
--in-content-table-header-background: var(--accent-2)!important;
|
||||
--theme-selection-background: var(--accent-2)!important;
|
||||
--theme-selection-background-hover: var(--accent-1)!important;
|
||||
--in-content-category-header-background: var(--tone-8)!important;
|
||||
--selected-icon-fill-color: var(--tone-2)!important;
|
||||
--in-content-dark-header-background: var(--tone-9)!important;
|
||||
--code-green: #86de74!important;
|
||||
--warning-color: #FCE19F;
|
||||
--warning-background-color: #44391F;
|
||||
|
||||
--warning-background-color: #44391F
|
||||
}
|
||||
|
||||
/*! Begin color overrides */
|
||||
/*! End color overrides */
|
||||
|
|
|
|||
|
|
@ -9,10 +9,11 @@ url-prefix(chrome://) {
|
|||
border: 1px solid!important;
|
||||
background-color: var(--in-content-box-background)!important;
|
||||
background-image: none!important;
|
||||
box-shadow: none!important
|
||||
box-shadow: none!important;
|
||||
border-color: var(--in-content-box-border-color)!important
|
||||
}
|
||||
.radio-check[selected] {
|
||||
list-style-image: url(chrome://global/skin/in-content/radio.svg);
|
||||
fill: var(--accent-1)!important
|
||||
fill: var(--in-content-border-highlight)!important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,42 +3,31 @@ url-prefix(chrome://browser/content/preferences/),
|
|||
url(chrome://passwordmgr/content/passwordManager.xul),
|
||||
url(chrome://formautofill/content/manageAddresses.xhtml),
|
||||
url-prefix(chrome://pippki) {
|
||||
|
||||
treechildren::-moz-tree-row,
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(multicol, odd){
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(multicol,odd) {
|
||||
background-color: var(--in-content-box-background)!important
|
||||
}
|
||||
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
|
||||
background-color: var(--theme-selection-background-hover) !important;
|
||||
background-color: var(--theme-selection-background-hover)!important
|
||||
}
|
||||
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
|
||||
background-color: var(--theme-selection-background) !important;
|
||||
background-color: var(--theme-selection-background)!important
|
||||
}
|
||||
|
||||
tree {
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
background-color: var(--in-content-box-background)!important
|
||||
}
|
||||
|
||||
/* Inbetween Border */
|
||||
treecol:not([hideheader="true"]):not(:first-child),
|
||||
treecol:not([hideheader=true]):not(:first-child),
|
||||
treecolpicker {
|
||||
border-image: linear-gradient(transparent 0%, transparent 20%, var(--tone-5) 20%, var(--tone-5) 80%, transparent 80%, transparent 100%) 1 1 !important;
|
||||
border-image: linear-gradient(transparent 0,transparent 20%,var(--tone-5) 20%,var(--tone-5) 80%,transparent 80%,transparent 100%) 1 1!important
|
||||
}
|
||||
|
||||
/* Dropdown Markers */
|
||||
menulist:not([editable="true"]) > *.menulist-dropmarker,
|
||||
treecol:not([hideheader="true"]) > *.treecol-sortdirection[sortDirection]{
|
||||
fill: var(--in-content-category-text) !important;
|
||||
menulist:not([editable=true]) > .menulist-dropmarker,
|
||||
treecol:not([hideheader=true]) > .treecol-sortdirection[sortDirection] {
|
||||
fill: var(--in-content-category-text)!important
|
||||
}
|
||||
|
||||
/* Tree Headers */
|
||||
treecol:not([hideheader="true"]),
|
||||
treecolpicker,
|
||||
fieldset > legend {
|
||||
background-color: var(--in-content-category-header-background) !important;
|
||||
color: var(--in-content-page-color) !important;
|
||||
fieldset > legend,
|
||||
treecol:not([hideheader=true]),
|
||||
treecolpicker {
|
||||
background-color: var(--in-content-category-header-background)!important;
|
||||
color: var(--in-content-page-color)!important
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
@-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
|
||||
background: var(--in-content-page-background)!important;
|
||||
color: var(--in-content-page-color)!important
|
||||
}
|
||||
}
|
||||
|
|
@ -97,15 +97,15 @@
|
|||
#security-technical,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--primary-dark-color)!important;
|
||||
background-color: var(--in-content-page-background)!important;
|
||||
border: none!important;
|
||||
color: var(--grey-10)!important
|
||||
color: var(--in-content-selected-text)!important
|
||||
}
|
||||
#security-identity-groupbox,
|
||||
#security-privacy-groupbox,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--dark-accent)!important
|
||||
background-color: var(--in-content-category-header-background)!important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,14 +8,14 @@ url(chrome://browser/content/places/bookmarkProperties.xul) {
|
|||
#security-technical,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--primary-dark-color)!important;
|
||||
background-color: var(--in-content-page-background)!important;
|
||||
border: none!important;
|
||||
color: var(--grey-10)!important
|
||||
color: var(--in-content-selected-text)!important
|
||||
}
|
||||
#security-identity-groupbox,
|
||||
#security-privacy-groupbox,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--dark-accent)!important
|
||||
background-color: var(--in-content-category-header-background)!important
|
||||
}
|
||||
}
|
||||
164
userChrome.css
164
userChrome.css
|
|
@ -1,13 +1,45 @@
|
|||
/* 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;
|
||||
|
|
@ -29,66 +61,45 @@
|
|||
--accent-1: var(--blue-40);
|
||||
--accent-2: var(--blue-50);
|
||||
--accent-3: var(--blue-60);
|
||||
/*
|
||||
--primary-light-color: var(--grey-40);
|
||||
--light-accent-color: var(--grey-50);
|
||||
--mid-way-color: var(--grey-60);
|
||||
--primary-dark-color: var(--grey-70);
|
||||
--dark-accent: var(--grey-80);
|
||||
--darksest: var(--grey-90);
|
||||
--primary-accent-color: var(--blue-40);
|
||||
--primary-accent-color-dark: var(--blue-50);
|
||||
--primary-accent-color-darkest: var(--blue-60);
|
||||
*/
|
||||
--in-content-page-color: var(--tone-4) !important;
|
||||
/* Main Background Color */
|
||||
--in-content-page-background: var(--tone-7) !important;
|
||||
/* Main Text Color */
|
||||
--in-content-text-color: var(--tone-3) !important;
|
||||
/* Text in Search Boxes */
|
||||
--in-content-selected-text: var(--tone-1) !important;
|
||||
--in-content-box-background: var(--tone-6) !important;
|
||||
/* Text Boxes */
|
||||
--in-content-page-color: var(--tone-4)!important;
|
||||
--in-content-page-background: var(--tone-7)!important;
|
||||
--in-content-text-color: var(--tone-3)!important;
|
||||
--in-content-selected-text: var(--tone-1)!important;
|
||||
--in-content-box-background: var(--tone-6)!important;
|
||||
--in-content-box-background-odd: #f3f6fa;
|
||||
--in-content-box-background-hover: var(--tone-6) !important;
|
||||
/* Box Hover */
|
||||
--in-content-box-background-active: var(--tone-6) !important;
|
||||
/* Selected, but not hovered */
|
||||
--in-content-box-border-color: var(--tone-5) !important;
|
||||
/* Text Box Border */
|
||||
--in-content-box-background-hover: var(--tone-6)!important;
|
||||
--in-content-box-background-active: var(--tone-6)!important;
|
||||
--in-content-box-border-color: var(--tone-5)!important;
|
||||
--in-content-item-hover: rgba(0,149,221,0.25);
|
||||
--in-content-item-selected: var(--tone-8) !important;
|
||||
--in-content-border-highlight: var(--accent-1) !important;
|
||||
--in-content-border-focus: var(--accent-1) !important;
|
||||
/* Border on Focus */
|
||||
--in-content-border-color: var(--tone-6) !important;
|
||||
--in-content-item-selected: var(--tone-8)!important;
|
||||
--in-content-border-highlight: var(--accent-1)!important;
|
||||
--in-content-border-focus: var(--accent-1)!important;
|
||||
--in-content-border-color: var(--tone-6)!important;
|
||||
--in-content-category-outline-focus: 1px dotted #0a84ff;
|
||||
--in-content-category-text: var(--tone-4) !important;
|
||||
/* Non-selected Menu Items */
|
||||
--in-content-category-text: var(--tone-4)!important;
|
||||
--in-content-category-text-active: #0c0c0d;
|
||||
--in-content-category-text-selected: var(--accent-1) !important;
|
||||
/* Selected Menu Itemes */
|
||||
--in-content-category-text-selected: var(--accent-1)!important;
|
||||
--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: #424f5a;
|
||||
--in-content-link-color: var(--accent-1) !important;
|
||||
--in-content-link-color-hover: var(--accent-2) !important;
|
||||
--in-content-link-color: var(--accent-1)!important;
|
||||
--in-content-link-color-hover: var(--accent-2)!important;
|
||||
--in-content-link-color-active: #003eaa;
|
||||
--in-content-link-color-visited: #0a8dff;
|
||||
--in-content-primary-button-background: var(--accent-2) !important;
|
||||
--in-content-primary-button-background-hover: var(--accent-3) !important;
|
||||
--in-content-primary-button-background-active: var(--accent-3) !important;
|
||||
--in-content-table-border-dark-color: var(--tone-7) !important;
|
||||
--in-content-table-header-background: var(--accent-2) !important;
|
||||
--theme-selection-background: var(--accent-2) !important;
|
||||
--theme-selection-background-hover: var(--accent-1) !important;
|
||||
--in-content-category-header-background: var(--tone-8) !important;
|
||||
--selected-icon-fill-color: var(--tone-2) !important;
|
||||
--in-content-dark-header-background: var(--tone-9) !important;
|
||||
--code-green: #86de74 !important;
|
||||
--in-content-primary-button-background: var(--accent-2)!important;
|
||||
--in-content-primary-button-background-hover: var(--accent-3)!important;
|
||||
--in-content-primary-button-background-active: var(--accent-3)!important;
|
||||
--in-content-table-border-dark-color: var(--tone-7)!important;
|
||||
--in-content-table-header-background: var(--accent-2)!important;
|
||||
--theme-selection-background: var(--accent-2)!important;
|
||||
--theme-selection-background-hover: var(--accent-1)!important;
|
||||
--in-content-category-header-background: var(--tone-8)!important;
|
||||
--selected-icon-fill-color: var(--tone-2)!important;
|
||||
--in-content-dark-header-background: var(--tone-9)!important;
|
||||
--code-green: #86de74!important;
|
||||
--warning-color: #FCE19F;
|
||||
--warning-background-color: #44391F;
|
||||
}
|
||||
|
|
@ -108,11 +119,12 @@ url-prefix(chrome://) {
|
|||
background-color: var(--in-content-box-background)!important;
|
||||
background-image: none!important;
|
||||
box-shadow: none!important;
|
||||
border-color: var(--in-content-box-border-color)!important;
|
||||
}
|
||||
|
||||
.radio-check[selected] {
|
||||
list-style-image: url("chrome://global/skin/in-content/radio.svg");
|
||||
fill: var(--accent-1)!important;
|
||||
fill: var(--in-content-border-highlight)!important;
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix(about:),
|
||||
|
|
@ -121,43 +133,37 @@ url(chrome://passwordmgr/content/passwordManager.xul),
|
|||
url(chrome://formautofill/content/manageAddresses.xhtml),
|
||||
url-prefix(chrome://pippki) {
|
||||
treechildren::-moz-tree-row,
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(multicol, odd) {
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(multicol,odd) {
|
||||
background-color: var(--in-content-box-background)!important;
|
||||
}
|
||||
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
|
||||
background-color: var(--theme-selection-background-hover) !important;
|
||||
background-color: var(--theme-selection-background-hover)!important;
|
||||
}
|
||||
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
|
||||
background-color: var(--theme-selection-background) !important;
|
||||
background-color: var(--theme-selection-background)!important;
|
||||
}
|
||||
|
||||
tree {
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
background-color: var(--in-content-box-background)!important;
|
||||
}
|
||||
|
||||
/* Inbetween Border */
|
||||
|
||||
treecol:not([hideheader="true"]):not(:first-child),
|
||||
treecol:not([hideheader=true]):not(:first-child),
|
||||
treecolpicker {
|
||||
border-image: linear-gradient(transparent 0%, transparent 20%, var(--tone-5) 20%, var(--tone-5) 80%, transparent 80%, transparent 100%) 1 1 !important;
|
||||
border-image: linear-gradient(transparent 0,transparent 20%,var(--tone-5) 20%,var(--tone-5) 80%,transparent 80%,transparent 100%) 1 1!important;
|
||||
}
|
||||
|
||||
/* Dropdown Markers */
|
||||
|
||||
menulist:not([editable="true"]) > *.menulist-dropmarker,
|
||||
treecol:not([hideheader="true"]) > *.treecol-sortdirection[sortDirection] {
|
||||
fill: var(--in-content-category-text) !important;
|
||||
menulist:not([editable=true]) > .menulist-dropmarker,
|
||||
treecol:not([hideheader=true]) > .treecol-sortdirection[sortDirection] {
|
||||
fill: var(--in-content-category-text)!important;
|
||||
}
|
||||
|
||||
/* Tree Headers */
|
||||
|
||||
treecol:not([hideheader="true"]),
|
||||
treecolpicker,
|
||||
fieldset > legend {
|
||||
background-color: var(--in-content-category-header-background) !important;
|
||||
color: var(--in-content-page-color) !important;
|
||||
fieldset > legend,
|
||||
treecol:not([hideheader=true]),
|
||||
treecolpicker {
|
||||
background-color: var(--in-content-category-header-background)!important;
|
||||
color: var(--in-content-page-color)!important;
|
||||
}
|
||||
}
|
||||
@-moz-document url(chrome://browser/content/aboutDialog.xul) {
|
||||
|
|
@ -319,8 +325,8 @@ listitem[selected=true] {
|
|||
@-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;
|
||||
background: var(--in-content-page-background)!important;
|
||||
color: var(--in-content-page-color)!important;
|
||||
}
|
||||
}
|
||||
menupopup,
|
||||
|
|
@ -665,16 +671,16 @@ screen and (-moz-os-version:windows-win10) {
|
|||
#security-technical,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--primary-dark-color)!important;
|
||||
background-color: var(--in-content-page-background)!important;
|
||||
border: none!important;
|
||||
color: var(--grey-10)!important;
|
||||
color: var(--in-content-selected-text)!important;
|
||||
}
|
||||
|
||||
#security-identity-groupbox,
|
||||
#security-privacy-groupbox,
|
||||
#security-technical-groupbox {
|
||||
-moz-appearance: none!important;
|
||||
background-color: var(--dark-accent)!important;
|
||||
background-color: var(--in-content-category-header-background)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -982,4 +988,4 @@ statuspanel .statuspanel-label {
|
|||
}
|
||||
.tab-line[selected=true] {
|
||||
background-color: var(--in-content-border-focus)!important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,10 +40,10 @@
|
|||
border-bottom: 1px solid!important
|
||||
}
|
||||
#sidebarContainer {
|
||||
background-color: var(--primary-dark-color)!important
|
||||
background-color: var(--in-content-table-header-background)!important
|
||||
}
|
||||
#toolbarSidebar {
|
||||
background-color: var(--dark-accent)!important;
|
||||
background-color: var(--in-content-table-header-background)!important;
|
||||
background-image: none!important;
|
||||
border-color: var(--in-content-box-background)!important
|
||||
}
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
}
|
||||
.secondaryToolbarButton:focus,
|
||||
.secondaryToolbarButton:hover {
|
||||
background-color: var(--primary-dark-color)!important;
|
||||
background-color: var(--in-content-page-background)!important;
|
||||
background-image: none!important;
|
||||
box-shadow: none!important
|
||||
}
|
||||
|
|
|
|||
158
userContent.css
158
userContent.css
|
|
@ -1,13 +1,45 @@
|
|||
/* 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;
|
||||
|
|
@ -29,66 +61,45 @@
|
|||
--accent-1: var(--blue-40);
|
||||
--accent-2: var(--blue-50);
|
||||
--accent-3: var(--blue-60);
|
||||
/*
|
||||
--primary-light-color: var(--grey-40);
|
||||
--light-accent-color: var(--grey-50);
|
||||
--mid-way-color: var(--grey-60);
|
||||
--primary-dark-color: var(--grey-70);
|
||||
--dark-accent: var(--grey-80);
|
||||
--darksest: var(--grey-90);
|
||||
--primary-accent-color: var(--blue-40);
|
||||
--primary-accent-color-dark: var(--blue-50);
|
||||
--primary-accent-color-darkest: var(--blue-60);
|
||||
*/
|
||||
--in-content-page-color: var(--tone-4) !important;
|
||||
/* Main Background Color */
|
||||
--in-content-page-background: var(--tone-7) !important;
|
||||
/* Main Text Color */
|
||||
--in-content-text-color: var(--tone-3) !important;
|
||||
/* Text in Search Boxes */
|
||||
--in-content-selected-text: var(--tone-1) !important;
|
||||
--in-content-box-background: var(--tone-6) !important;
|
||||
/* Text Boxes */
|
||||
--in-content-page-color: var(--tone-4)!important;
|
||||
--in-content-page-background: var(--tone-7)!important;
|
||||
--in-content-text-color: var(--tone-3)!important;
|
||||
--in-content-selected-text: var(--tone-1)!important;
|
||||
--in-content-box-background: var(--tone-6)!important;
|
||||
--in-content-box-background-odd: #f3f6fa;
|
||||
--in-content-box-background-hover: var(--tone-6) !important;
|
||||
/* Box Hover */
|
||||
--in-content-box-background-active: var(--tone-6) !important;
|
||||
/* Selected, but not hovered */
|
||||
--in-content-box-border-color: var(--tone-5) !important;
|
||||
/* Text Box Border */
|
||||
--in-content-box-background-hover: var(--tone-6)!important;
|
||||
--in-content-box-background-active: var(--tone-6)!important;
|
||||
--in-content-box-border-color: var(--tone-5)!important;
|
||||
--in-content-item-hover: rgba(0,149,221,0.25);
|
||||
--in-content-item-selected: var(--tone-8) !important;
|
||||
--in-content-border-highlight: var(--accent-1) !important;
|
||||
--in-content-border-focus: var(--accent-1) !important;
|
||||
/* Border on Focus */
|
||||
--in-content-border-color: var(--tone-6) !important;
|
||||
--in-content-item-selected: var(--tone-8)!important;
|
||||
--in-content-border-highlight: var(--accent-1)!important;
|
||||
--in-content-border-focus: var(--accent-1)!important;
|
||||
--in-content-border-color: var(--tone-6)!important;
|
||||
--in-content-category-outline-focus: 1px dotted #0a84ff;
|
||||
--in-content-category-text: var(--tone-4) !important;
|
||||
/* Non-selected Menu Items */
|
||||
--in-content-category-text: var(--tone-4)!important;
|
||||
--in-content-category-text-active: #0c0c0d;
|
||||
--in-content-category-text-selected: var(--accent-1) !important;
|
||||
/* Selected Menu Itemes */
|
||||
--in-content-category-text-selected: var(--accent-1)!important;
|
||||
--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: #424f5a;
|
||||
--in-content-link-color: var(--accent-1) !important;
|
||||
--in-content-link-color-hover: var(--accent-2) !important;
|
||||
--in-content-link-color: var(--accent-1)!important;
|
||||
--in-content-link-color-hover: var(--accent-2)!important;
|
||||
--in-content-link-color-active: #003eaa;
|
||||
--in-content-link-color-visited: #0a8dff;
|
||||
--in-content-primary-button-background: var(--accent-2) !important;
|
||||
--in-content-primary-button-background-hover: var(--accent-3) !important;
|
||||
--in-content-primary-button-background-active: var(--accent-3) !important;
|
||||
--in-content-table-border-dark-color: var(--tone-7) !important;
|
||||
--in-content-table-header-background: var(--accent-2) !important;
|
||||
--theme-selection-background: var(--accent-2) !important;
|
||||
--theme-selection-background-hover: var(--accent-1) !important;
|
||||
--in-content-category-header-background: var(--tone-8) !important;
|
||||
--selected-icon-fill-color: var(--tone-2) !important;
|
||||
--in-content-dark-header-background: var(--tone-9) !important;
|
||||
--code-green: #86de74 !important;
|
||||
--in-content-primary-button-background: var(--accent-2)!important;
|
||||
--in-content-primary-button-background-hover: var(--accent-3)!important;
|
||||
--in-content-primary-button-background-active: var(--accent-3)!important;
|
||||
--in-content-table-border-dark-color: var(--tone-7)!important;
|
||||
--in-content-table-header-background: var(--accent-2)!important;
|
||||
--theme-selection-background: var(--accent-2)!important;
|
||||
--theme-selection-background-hover: var(--accent-1)!important;
|
||||
--in-content-category-header-background: var(--tone-8)!important;
|
||||
--selected-icon-fill-color: var(--tone-2)!important;
|
||||
--in-content-dark-header-background: var(--tone-9)!important;
|
||||
--code-green: #86de74!important;
|
||||
--warning-color: #FCE19F;
|
||||
--warning-background-color: #44391F;
|
||||
}
|
||||
|
|
@ -108,11 +119,12 @@ url-prefix(chrome://) {
|
|||
background-color: var(--in-content-box-background)!important;
|
||||
background-image: none!important;
|
||||
box-shadow: none!important;
|
||||
border-color: var(--in-content-box-border-color)!important;
|
||||
}
|
||||
|
||||
.radio-check[selected] {
|
||||
list-style-image: url("chrome://global/skin/in-content/radio.svg");
|
||||
fill: var(--accent-1)!important;
|
||||
fill: var(--in-content-border-highlight)!important;
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix(about:),
|
||||
|
|
@ -121,43 +133,37 @@ url(chrome://passwordmgr/content/passwordManager.xul),
|
|||
url(chrome://formautofill/content/manageAddresses.xhtml),
|
||||
url-prefix(chrome://pippki) {
|
||||
treechildren::-moz-tree-row,
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(multicol, odd) {
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(multicol,odd) {
|
||||
background-color: var(--in-content-box-background)!important;
|
||||
}
|
||||
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
|
||||
background-color: var(--theme-selection-background-hover) !important;
|
||||
background-color: var(--theme-selection-background-hover)!important;
|
||||
}
|
||||
|
||||
treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
|
||||
background-color: var(--theme-selection-background) !important;
|
||||
background-color: var(--theme-selection-background)!important;
|
||||
}
|
||||
|
||||
tree {
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
background-color: var(--in-content-box-background)!important;
|
||||
}
|
||||
|
||||
/* Inbetween Border */
|
||||
|
||||
treecol:not([hideheader="true"]):not(:first-child),
|
||||
treecol:not([hideheader=true]):not(:first-child),
|
||||
treecolpicker {
|
||||
border-image: linear-gradient(transparent 0%, transparent 20%, var(--tone-5) 20%, var(--tone-5) 80%, transparent 80%, transparent 100%) 1 1 !important;
|
||||
border-image: linear-gradient(transparent 0,transparent 20%,var(--tone-5) 20%,var(--tone-5) 80%,transparent 80%,transparent 100%) 1 1!important;
|
||||
}
|
||||
|
||||
/* Dropdown Markers */
|
||||
|
||||
menulist:not([editable="true"]) > *.menulist-dropmarker,
|
||||
treecol:not([hideheader="true"]) > *.treecol-sortdirection[sortDirection] {
|
||||
fill: var(--in-content-category-text) !important;
|
||||
menulist:not([editable=true]) > .menulist-dropmarker,
|
||||
treecol:not([hideheader=true]) > .treecol-sortdirection[sortDirection] {
|
||||
fill: var(--in-content-category-text)!important;
|
||||
}
|
||||
|
||||
/* Tree Headers */
|
||||
|
||||
treecol:not([hideheader="true"]),
|
||||
treecolpicker,
|
||||
fieldset > legend {
|
||||
background-color: var(--in-content-category-header-background) !important;
|
||||
color: var(--in-content-page-color) !important;
|
||||
fieldset > legend,
|
||||
treecol:not([hideheader=true]),
|
||||
treecolpicker {
|
||||
background-color: var(--in-content-category-header-background)!important;
|
||||
color: var(--in-content-page-color)!important;
|
||||
}
|
||||
}
|
||||
@-moz-document regexp("^about:(?!reader).*"),
|
||||
|
|
@ -856,11 +862,11 @@ url-prefix(https://discovery.addons.mozilla.org) {
|
|||
}
|
||||
|
||||
#sidebarContainer {
|
||||
background-color: var(--primary-dark-color)!important;
|
||||
background-color: var(--in-content-table-header-background)!important;
|
||||
}
|
||||
|
||||
#toolbarSidebar {
|
||||
background-color: var(--dark-accent)!important;
|
||||
background-color: var(--in-content-table-header-background)!important;
|
||||
background-image: none!important;
|
||||
border-color: var(--in-content-box-background)!important;
|
||||
}
|
||||
|
|
@ -899,7 +905,7 @@ url-prefix(https://discovery.addons.mozilla.org) {
|
|||
|
||||
.secondaryToolbarButton:focus,
|
||||
.secondaryToolbarButton:hover {
|
||||
background-color: var(--primary-dark-color)!important;
|
||||
background-color: var(--in-content-page-background)!important;
|
||||
background-image: none!important;
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue