diff --git a/README.md b/README.md index 27aca52..ef8d4e8 100755 --- a/README.md +++ b/README.md @@ -28,29 +28,23 @@ to maintaining this theme actively. ### How to install? -
    -
  1. In Firefox, go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to True
    2. -
  2. Make sure you have the chrome folder within your firefox profile
    3. -
  3. Get Sidebery v5 (beta) if you don't have it already installed
    4. -
  4. Copy userChrome.css, darkTheme.css and private.css to the chrome folder
    5. -
  5. Go to Sidebery settings and paste the content of my sidebery.css file into Styles editor > Sidebar
    6. -
  6. Enjoy your new setup!
    7. -
-
+1. In Firefox, go to `about:config` and set `toolkit.legacyUserProfileCustomizations.stylesheets` to `True`. Make sure you have the chrome folder within your Firefox profile +2. Get Sidebery v5 (beta) if you don't have it already installed +3. Copy `userChrome.css`, `darkTheme.css` and `private.css` to the chrome folder +4. Go to Sidebery settings and paste the content of my `sidebery.css` file into _Styles editor > Sidebar_ +5. Enjoy your new setup!
### Known bugs - +- In Sidebery beta, autoshrink triggers when you're moving a tab even though the mouse is still hovering the panel. I decided to disable that characteristic until I find a workaround. +- ~~When moving a tab, the tab position indicator doesn't follow the `margin-top` CSS rule for tabs~~ **_Fixed!_** +
### Credits - +- to @MrOtherGuy for his Firefox CSS Hacks +- to u/captainkaba for his Denkfabrik theme (which I used as a base for legacy) +- to Reddit user u/It_Was_The_Other_Guy for his tip which was very useful in legacy +- to Reddit user u/GainghisKhan for finding a bug and providing a solution idea for it in legacy + diff --git a/darkTheme.css b/darkTheme.css index 5a3e600..673feb9 100755 --- a/darkTheme.css +++ b/darkTheme.css @@ -1,25 +1,37 @@ -/* Dark theme variables */ - :root { - --gg-bg: rgb(43, 42, 51); /* #2b2a33 */ - --gg-fg: rgb(251, 251, 254); /* #fbfbfe */ - --gg-fg-faded: rgb(153, 153, 157); /* #99999d (alt #8f8f9d) */ - --gg-black: rgb(28, 27, 34); /* #1c1b22 */ - --gg-grey: rgb(82, 82, 94); /* #52525e */ - --gg-darkgrey: rgb(66, 65, 77); /* #42414d */ - --gg-cyan: rgb(128, 235, 255); /* #80ebff */ + /* --- Colour variables --- */ + --gg-bg: #2a2932; + --gg-fg: #fbfbfe; + --gg-fg-alt: #d4d4d4; + --gg-fg-faded: #8f8f9d; + --gg-grey-alt: #5b5b67; + --gg-grey: #53535f; + --gg-darkgrey: #43424d; + --gg-black: #1c1b22; + --gg-black-bold: #0c0c0d; + --gg-pseudotransparent: rgba(0, 0, 0, 0); + --gg-cyan: #80ecff; + --gg-lightblue: #00ddff; + --gg-skyblue: #a8f2ff; + --gg-turquoise: #52ffbd; + --gg-purple-dark: #3c1f7a; + --gg-purple-mid: #ac70ff; + --gg-purple: #9059ff; + --gg-pink: #ff4aa2; + --gg-yellow: #ffbd4f; + /* Attributes */ --button-bgcolor: var(--gg-bg) !important; --button-hover-bgcolor: var(--gg-grey) !important; - --button-active-bgcolor: rgb(91, 91, 102) !important; - --button-primary-bgcolor: rgb(0, 221, 255) !important; + --button-active-bgcolor: var(--gg-grey-alt) !important; + --button-primary-bgcolor: var(--gg-lightblue) !important; --button-primary-hover-bgcolor: var(--gg-cyan) !important; - --button-primary-active-bgcolor: rgb(170, 242, 255) !important; + --button-primary-active-bgcolor: var(--gg-skyblue) !important; --button-primary-color: var(--gg-bg) !important; --input-bgcolor: var(--gg-darkgrey) !important; --input-color: var(--gg-fg) !important; --input-border-color: var(--gg-fg-faded) !important; --autocomplete-popup-separator-color: var(--gg-grey) !important; - --panel-banner-item-update-supported-bgcolor: rgb(84, 255, 189) !important; + --panel-banner-item-update-supported-bgcolor: var(--gg-turquoise) !important; --panel-banner-item-info-icon-bgcolor: var(--gg-cyan) !important; --tab-icon-overlay-stroke: var(--gg-darkgrey) !important; --tab-icon-overlay-fill: var(--gg-fg) !important; @@ -41,9 +53,9 @@ --urlbar-icon-fill-opacity: 1 !important; --panel-separator-zap-gradient: linear-gradient( 90deg, - #9059ff 0%, - #ff4aa2 52.08%, - #ffbd4f 100% + var(--gg-purple) 0%, + var(--gg-pink) 52.08%, + var(--gg-yellow) 100% ) !important; --lwt-accent-color: var(--gg-black) !important; --lwt-text-color: var(--gg-fg) !important; @@ -52,13 +64,13 @@ --arrowpanel-border-color: var(--gg-grey) !important; --toolbar-field-background-color: var(--gg-black) !important; --toolbar-field-color: var(--gg-fg) !important; - --toolbar-field-border-color: rgba(0, 0, 0, 0) !important; + --toolbar-field-border-color: var(--gg-pseudotransparent) !important; --toolbar-field-focus-background-color: var(--gg-darkgrey) !important; --toolbar-field-focus-color: var(--gg-fg) !important; --lwt-tab-text: var(--gg-fg) !important; --toolbar-bgcolor: var(--gg-bg) !important; --toolbar-color: var(--gg-fg) !important; - --chrome-content-separator-color: rgb(12, 12, 13) !important; + --chrome-content-separator-color: var(--gg-black-bold) !important; --toolbarbutton-icon-fill: var(--gg-fg) !important; --lwt-selected-tab-background-color: var(--gg-darkgrey) !important; --autocomplete-popup-highlight-background: var(--gg-bg) !important; @@ -66,3 +78,4 @@ --sidebar-background-color: var(--gg-bg) !important; --sidebar-text-color: var(--gg-fg) !important; } + diff --git a/private.css b/private.css index fe6ee6e..09041c4 100755 --- a/private.css +++ b/private.css @@ -1,8 +1,9 @@ -: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; +@import url("darkTheme.css"); - --avatar-image-url: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important; +:root[privatebrowsingmode="temporary"] { + --focus-outline-color: var(--gg-purple) !important; + --toolbar-field-focus-border-color: var(--gg-purple) !important; + --lwt-selected-tab-background-color: var(--gg-purple-dark) !important; + --avatar-image-url: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important; } + diff --git a/sidebery.css b/sidebery.css index 0c043e8..9b94c22 100755 --- a/sidebery.css +++ b/sidebery.css @@ -1,8 +1,8 @@ #root.root { --s-frame-bg: #1c1b22 !important; --s-toolbar-bg: #2b2a33 !important; - /* --s-frame-fg: #fbfbfe !important; */ - /* --s-toolbar-fg: #fbfbfe !important; */ + /* --s-frame-fg: #fbfbfe !important; + --s-toolbar-fg: #fbfbfe !important; */ } /* --- NAV BAR --- */ @@ -12,7 +12,7 @@ display: flex; align-items: center; padding: 0 6px; - height: 48px; + height: 50px; } /* --- PINNED TABS --- */ @@ -44,10 +44,6 @@ opacity: 100%; } -.TabsPanel { - margin: 5px 0; -} - .TabsPanel .new-tab-btn { height: var(--tabs-height); margin: 0 4px; @@ -55,23 +51,35 @@ /* --- IMPROVEMENTS --- */ +.TabsPanel { + margin: 5px 0; +} + .central-box { z-index: 1; background: var(--s-frame-bg); border-top-right-radius: 6px; + border-top-left-radius: 6px; } .main-box:after { position: absolute; z-index: 0; top: -5px; + left: auto; right: -5px; content: ""; - background: var(--s-toolbar-bg); + background: #2b2a33; height: 10px; width: 10px; } +/* Uncomment if you place your sidebar to the right */ +/* .main-box:after { + right: auto; + left: -5px; +} */ + .popup { margin-top: 50px; max-width: 97%; diff --git a/userChrome.css b/userChrome.css index 7dfd9df..dc85d15 100755 --- a/userChrome.css +++ b/userChrome.css @@ -31,6 +31,7 @@ position: relative; } +/* Support for languages that are read from right to left */ #sidebar-box[positionend] { direction: rtl; } @@ -60,42 +61,23 @@ opacity: 1; } -/* for sidebars placed to the left (default) */ .sidebar-placesTree { + position: relative; border-top-right-radius: 6px; background: var(--gg-black) !important; - color: #d4d4d4 !important; -} - -.sidebar-placesTree:before { - content: ""; - z-index: -1; - position: absolute; - height: 10px; - width: 10px; - top: 45px; - right: 0; - background: var(--gg-bg); + color: var(--gg-fg-alt) !important; } -/* for sidebars placed to the right */ -/* -.sidebar-placesTree { +/* Uncomment if you place your sidebar to the right */ +/* .sidebar-placesTree { + border-top-right-radius: 0; border-top-left-radius: 6px; - background: var(--gg-black) !important; - color: #d4d4d4 !important; -} +} */ .sidebar-placesTree:before { - content: ""; - z-index: -1; - position: absolute; - height: 10px; - width: 10px; - top: 45px; - left: 0; + right: auto; + left: 0; } -*/ #sidebar-title { font-size: 1.1rem; @@ -114,11 +96,11 @@ } #sidebar-splitter { + margin-top: -1px; width: 0px !important; border: 2px solid var(--gg-bg) !important; } -/* Add outline border */ #sidebar, #sidebar-header { border-inline-width: 0px 4px; @@ -129,16 +111,17 @@ border-inline-width: 4px 0px; } +/* --- IMPROVEMENTS & FEATS --- */ + #appcontent { margin-top: -1px; } -/* hide on fullscreen */ +/* Hide on fullscreen */ #main-window[sizemode="fullscreen"] #sidebar-box, #main-window[sizemode="fullscreen"] #sidebar-splitter { - /* 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 */ + /* --- 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; */ display: none !important; }