From 9e6f6929a8e0137c3b7aa5e4c34f1fff73935abb Mon Sep 17 00:00:00 2001 From: overdodactyl Date: Fri, 23 Feb 2018 19:07:59 -0700 Subject: [PATCH] variable clean up --- alternative_user_files/userChrome_windows.css | 276 ++++++++++-------- .../userContent_no_addons.css | 159 +++++----- color_variables.css | 117 ++++---- common-files/checkboxes.css | 7 +- common-files/trees.css | 43 +-- userChrome-files/common_dialog.css | 4 +- userChrome-files/library.css | 6 +- userChrome-files/windows_fixes/library.css | 6 +- userChrome.css | 164 ++++++----- userContent-files/pdf.css | 6 +- userContent.css | 158 +++++----- 11 files changed, 498 insertions(+), 448 deletions(-) diff --git a/alternative_user_files/userChrome_windows.css b/alternative_user_files/userChrome_windows.css index 9268a3a..3f7f4ba 100644 --- a/alternative_user_files/userChrome_windows.css +++ b/alternative_user_files/userChrome_windows.css @@ -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; } } \ No newline at end of file diff --git a/alternative_user_files/userContent_no_addons.css b/alternative_user_files/userContent_no_addons.css index 1ee2d88..eaf4d52 100644 --- a/alternative_user_files/userContent_no_addons.css +++ b/alternative_user_files/userContent_no_addons.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,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; } diff --git a/color_variables.css b/color_variables.css index 67d838c..c112663 100644 --- a/color_variables.css +++ b/color_variables.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; @@ -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 */ diff --git a/common-files/checkboxes.css b/common-files/checkboxes.css index f598e32..dba6881 100644 --- a/common-files/checkboxes.css +++ b/common-files/checkboxes.css @@ -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 } -} +} \ No newline at end of file diff --git a/common-files/trees.css b/common-files/trees.css index d6caf45..6ecc76a 100644 --- a/common-files/trees.css +++ b/common-files/trees.css @@ -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 } - -} +} \ No newline at end of file diff --git a/userChrome-files/common_dialog.css b/userChrome-files/common_dialog.css index d617905..8055217 100644 --- a/userChrome-files/common_dialog.css +++ b/userChrome-files/common_dialog.css @@ -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 } } \ No newline at end of file diff --git a/userChrome-files/library.css b/userChrome-files/library.css index eedd217..5844e25 100644 --- a/userChrome-files/library.css +++ b/userChrome-files/library.css @@ -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 } } } \ No newline at end of file diff --git a/userChrome-files/windows_fixes/library.css b/userChrome-files/windows_fixes/library.css index 3f4d557..4ccd5c9 100644 --- a/userChrome-files/windows_fixes/library.css +++ b/userChrome-files/windows_fixes/library.css @@ -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 } } \ No newline at end of file diff --git a/userChrome.css b/userChrome.css index 8faf730..6b5da53 100644 --- a/userChrome.css +++ b/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; -} \ No newline at end of file +} diff --git a/userContent-files/pdf.css b/userContent-files/pdf.css index 5214550..23f9446 100644 --- a/userContent-files/pdf.css +++ b/userContent-files/pdf.css @@ -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 } diff --git a/userContent.css b/userContent.css index 9a23b57..a9ff42a 100644 --- a/userContent.css +++ b/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; }