From d37274c8a96a3f35f658cb2c209c3afb4890221f Mon Sep 17 00:00:00 2001 From: mgastonportillo Date: Wed, 5 Jul 2023 22:04:14 -0300 Subject: [PATCH] Add support for private window among other UI improvements --- README.md | 4 +-- darkTheme.css | 79 ++++++++++++++++++++++++++++++++++++++++++++ privTheme.css | 8 +++++ userChrome-linux.css | 79 +++++++++++++------------------------------- 4 files changed, 112 insertions(+), 58 deletions(-) create mode 100644 darkTheme.css create mode 100644 privTheme.css diff --git a/README.md b/README.md index e20eb1a..76e3f1e 100644 --- a/README.md +++ b/README.md @@ -30,9 +30,9 @@ to maintaining this theme actively.
  1. In Firefox, go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to True
    2. -
  2. Make sure you have userChrome.css file and folder path created properly
    3. +
  3. Make sure you have the chrome folder within your firefox profile
  4. Get Sidebery if you don't have it already installed
    5. -
  5. Copy the content in my userChrome.css to your file (I don't support this method) or replace/copy it in the corresponding folder path
    6. +
  6. Copy userChrome.css, darkTheme.css and privTheme.css to the chrome folder
  7. Go to Sidebery settings and paste the content of my sidebery.css file into Styles editor > Sidebar
  8. Enjoy your new setup!
diff --git a/darkTheme.css b/darkTheme.css new file mode 100644 index 0000000..2a0df4e --- /dev/null +++ b/darkTheme.css @@ -0,0 +1,79 @@ +/* Force default dark theme */ + +:root { + --gg-black: rgb(28, 27, 34); /* #1c1b22 */ + --gg-bg: rgb(43, 42, 51); /* #2b2a33 */ + --gg-fg: rgb(251, 251, 254); /* #fbfbfe */ + + --button-bgcolor: rgb(43, 42, 51) !important; + --button-hover-bgcolor: rgb(82, 82, 94) !important; + --button-active-bgcolor: rgb(91, 91, 102) !important; + --button-primary-bgcolor: rgb(0, 221, 255) !important; + --button-primary-hover-bgcolor: rgb(128, 235, 255) !important; + --button-primary-active-bgcolor: rgb(170, 242, 255) !important; + --button-primary-color: rgb(43, 42, 51) !important; + --input-bgcolor: rgb(66, 65, 77) !important; + --input-color: rgb(251, 251, 254) !important; + --input-border-color: rgb(143, 143, 157) !important; + --autocomplete-popup-separator-color: rgb(82, 82, 94) !important; + --panel-banner-item-update-supported-bgcolor: rgb(84, 255, 189) !important; + --panel-banner-item-info-icon-bgcolor: rgb(128, 235, 255) !important; + --tab-icon-overlay-stroke: rgb(66, 65, 77) !important; + --tab-icon-overlay-fill: rgb(251, 251, 254) !important; + --panel-item-hover-bgcolor: color-mix(in srgb, currentColor 9%, transparent) !important; + --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 14%, transparent) !important; + --panel-item-active-bgcolor: color-mix(in srgb, currentColor 25%, transparent) !important; + --urlbar-icon-fill-opacity: 1 !important; + --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) !important; + --lwt-accent-color: rgb(28, 27, 34) !important; + --lwt-text-color: rgba(251, 251, 254) !important; + --arrowpanel-background: rgb(66, 65, 77) !important; + --arrowpanel-color: rgb(251, 251, 254) !important; + --arrowpanel-border-color: rgb(82, 82, 94) !important; + --toolbar-field-background-color: rgb(28, 27, 34) !important; + --toolbar-field-color: rgb(251, 251, 254) !important; + --toolbar-field-border-color: rgba(0, 0, 0, 0) !important; + --toolbar-field-focus-background-color: rgba(66, 65, 77, 1) !important; + --toolbar-field-focus-color: rgb(251, 251, 254) !important; + --lwt-tab-text: rgb(251, 251, 254) !important; + --toolbar-bgcolor: rgb(43, 42, 51) !important; + --toolbar-color: rgb(251, 251, 254) !important; + --chrome-content-separator-color: rgb(12, 12, 13) !important; + --toolbarbutton-icon-fill: rgb(251, 251, 254) !important; + --lwt-selected-tab-background-color: rgb(66, 65, 77) !important; + --autocomplete-popup-highlight-background: rgb(43, 42, 51) !important; + --tabpanel-background-color: rgb(43, 42, 51) !important; + --sidebar-background-color: var(--gg-bg) !important; + --sidebar-text-color: var(--gg-fg) !important; +} + +.content-header { + background: var(--gg-bg) !important; +} + +.content-scrollable { + background: var(--gg-black) !important; +} + +#sidebar, +#sidebar-header { + background-color: var(--gg-bg) !important; + border-inline: 4px solid var(--gg-bg); +} + +.sidebar-panel { + background: var(--gg-bg) !important; +} + +.sidebar-placesTree { + background: var(--gg-black) !important; + color: #d4d4d4 !important; +} + +.sidebar-placesTree:before { + background: var(--gg-bg); +} + +.sidebar-panel[lwt-sidebar] { + background: var(--gg-bg); +} diff --git a/privTheme.css b/privTheme.css new file mode 100644 index 0000000..fe6ee6e --- /dev/null +++ b/privTheme.css @@ -0,0 +1,8 @@ +:root[privatebrowsingmode="temporary"] { + + --focus-outline-color: rgb(172, 112, 255) !important; + --toolbar-field-focus-border-color: rgb(172, 112, 255) !important; + --lwt-selected-tab-background-color: rgb(60, 31, 123) !important; + + --avatar-image-url: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important; +} diff --git a/userChrome-linux.css b/userChrome-linux.css index 12bce96..05fed4f 100644 --- a/userChrome-linux.css +++ b/userChrome-linux.css @@ -1,37 +1,20 @@ -/* --- TAB AND TITLE BAR --- */ +@import url("darkTheme.css"); +@import url("privTheme.css"); :root { - --sidebar-width: 267px; - --sidebar-background-color: #2b2a33; - --sidebar-text-color: #fbfbfe; + --sidebar-width: 267px; } -/* hide native tabs and title bar */ +/* --- TAB AND TITLE BAR --- */ + #TabsToolbar { - visibility: collapse !important; + display: none !important; height: 0 !important; } -/* mini patch to hide native tabs correctly */ -.tabbrowser-tab { - visibility: collapse; - height: 0px; -} - -.tabbrowser-tab[visuallyselected="true"] { - visibility: collvariables apse; - height: 0px; -} - -.tab[selected="true"] { - visibility: collapse; - height: 0px; -} - /* --- SIDEBAR --- */ #sidebar-header { - /* uncomment to hide the sidebar header */ display: none !important; border-bottom: none !important; border: none !important; @@ -40,8 +23,6 @@ #sidebar-box { margin-top: -1px; position: relative; - --sidebar-background-color: #2b2a33 !important; - --sidebar-text-color: #fbfbfe !important; min-width: var(--sidebar-width) !important; width: var(--sidebar-width) !important; max-width: var(--sidebar-width) !important; @@ -51,6 +32,7 @@ #sidebar-box[positionend] { direction: rtl; } + #sidebar-box[positionend] > * { direction: ltr; } @@ -63,30 +45,15 @@ direction: rtl; } -.content-header { - background: #2b2a33 !important; -} - -.content-scrollable { - background: #1c1b22 !important; -} - #sidebar-icon { filter: contrast(150%); opacity: 1; } -.sidebar-placesTree { - border-top-right-radius: 6px; - background: #1c1b22 !important; - color: #d4d4d4; -} - /* for sidebars placed to the left (default) */ .sidebar-placesTree:before { content: ""; z-index: -1; - background: #2b2a33 !important; position: absolute; height: 10px; width: 10px; @@ -95,22 +62,24 @@ } .sidebar-placesTree { - border-top-left-radius: 6px; - background: #1c1b22 !important; - color: #aaaaaa !important; + border-top-right-radius: 6px; } /* for sidebars placed to the right */ /* .sidebar-placesTree:before { content: ""; z-index: -1; - background: #2b2a33 !important; position: absolute; height: 10px; width: 10px; top: 45px; left: 0; -} */ +} + +.sidebar-placesTree { + border-top-left-radius: 6px; +} +*/ #sidebar-title { font-size: 1.1rem; @@ -132,11 +101,9 @@ display: none; } -/* add outline border */ +/* Add outline border */ #sidebar, #sidebar-header { - background-color: inherit !important; - border-inline: 4px solid #2b2a33; border-inline-width: 0px 4px; } @@ -145,15 +112,15 @@ border-inline-width: 4px 0px; } +#appcontent { + margin-top: -1px; +} + /* hide on fullscreen */ #main-window[sizemode="fullscreen"] #sidebar-box { - /* match the transition from the toolbar; swap to margin-right if you use the sidebar to the right */ - /* transition: .8s margin-left ease-out !important; */ - margin-left: -267px !important; /* modify the size if you use a custom one */ + /* match the transition from the toolbar; swap to margin-right if you use the sidebar to the right + transition: .8s margin-left ease-out !important; */ + /* modify the size if you use a custom one */ + margin-left: -267px !important; } -/* --- SEARCH BAR --- */ - -#sidebar-search-container { - background-color: #2b2a33 !important; -}