From 810c96108af05f4921b9dbd57d81382fc8c85573 Mon Sep 17 00:00:00 2001 From: "t. Macleod Sawyer" Date: Tue, 14 Dec 2021 15:26:49 -0600 Subject: [PATCH] Version: 12021.12.14 :: Fixed sidebar header position and background color. --- firefox/treestyletabs.css | 429 +++++++++++++++++++------------------- 1 file changed, 209 insertions(+), 220 deletions(-) diff --git a/firefox/treestyletabs.css b/firefox/treestyletabs.css index ef57476..ddb698f 100644 --- a/firefox/treestyletabs.css +++ b/firefox/treestyletabs.css @@ -1,251 +1,240 @@ -/* - Title: Edge-Like (Better) Tree Style Tabs - Description: This is a recreation (and better) version of my pseudo-popular Vivaldi vertical tab integration, for tree style tabs in firefox. This is probably the best Tree Style Tabs interface out there. - Author: @Drannex42 (https://github.com/drannex42/linux-utils - https://macleodsawyer.com) - Notes: This works best with my custom userChrome.css file in the /firefox/ folder - Lots of very cool features built in. - Version: 12021.06.09 :: Fixed the new tab button after the latest TST bugged the layout. - + +/* + Title: Drannex42's Personal userChrome.css for Firefox + Description: This is my personal userChrome for Firefox, I specifically clean up the interface, change the folder icon to Vivaldi's (much better) and reduce padding in some areas, and add some in others. This overall creates a much more streamlined interface. + Features: Streamlines interface, folder icon replacement, works best with my custom Tree Style Tabs interface (check it out! treestyletabs.css in the /firefox/ directory), removes tab bar. + Version: 12021.12.14 :: Fixed sidebar header position and background color. */ -/* Hide .twisty and adjust margins so favicons have 7px on left. */ -.tab .twisty { - visibility: hidden; - margin-left: -8px; - display: none; -} - -/* Push tab labels slightly to the right so they're completely hidden in collapsed state */ -.tab .label { - font-size: 13px; - padding-left: 7.5px; -} - -.tab:not(:hover) > .closebox { - display: none; -} - -tab-item:hover { - background: var(--in-content-box-background-hover) !important; - opacity: 1; -} - -.closebox:hover { - font-weight: 900; -} - -.tab, .tabs, body, #background { - /* #F5F6F7; */ - background: transparent; +:root { + --sidebar-width: 50px; + --toolbar-height: -50px; + --menubar-height: -71px; + --toolmenubar-height: -80px; + --sidebar-padding: calc(var(--sidebar-width) + 5px); + --toolbar-start-end-padding: 5px !important; + --toolbar-start-end-padding: 5px !important; + --sidebar-bg-color: #fafafa; /* Change this if you have a different theme than the default light one to match the rest of your sideberry theme colors */ } -.favicon { - --favicon-size: 17px !important; - margin: 0; - padding: 0 !important; - --svg-small-icon-size: var(--favicon-size); - /*! text-align: center; */ - margin-left: .5px; - display: inline; - vertical-align: middle; +#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items { + opacity: 0; + pointer-events: none; } -tab-item { - border: 1px solid transparent !important; - height: auto !important; - position: relative !important; - font-size: 13px; - background: none !important; - box-shadow: none !important; - border-radius: 5px; - padding: 5px !important; - margin: 7.5px 10px !Important; - transition: 0 !Important; - text-align: left !important; - transition: width 0.1s !Important; +#main-window:not([tabsintitlebar="true"]) #TabsToolbar { + visibility: collapse !important; } -#tabbar-container{ - /*! width: 50px; */ - /*! margin: 2px; */ - transition: none; -} - - -tab-item:not(.faviconized) .contextual-identity-marker { - --contextual-identity-marker-margin: min(calc((var(--tab-current-size) - var(--favicon-size)) / 2), calc(var(--tab-current-size) * 0)); - left: -11px !important; - --contextual-identity-marker-width: 3.5px; - z-index: 9999; -} - -#all-tabs { -} - -:root.left #tabbar { - box-shadow: none !important; - border: none !important; - margin-top: -5px !important; -} - - -#tabbar tab-item { - text-align: center; - /*! width: 100%; */ - overflow: hidden !Important; -} -tab-item:not(:hover) { -} -tab-item .label, tab-item .highlighter, tab-item .contextual-identity-marker, tab-item .extra-items-container, tab-item .counter { +#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { /*! display: none; */ - /*! margin: 0px !Important; */ -} -tab-item.active { - background-color: var(--in-content-box-background) !important; - box-shadow: 0px 5px 10px var(--in-content-box-background-active) !important; } -tab-item:not(.pinned).collapsed.collapsed-completely { - visibility: collapse; - display: none !important; +/*Collapse in default state and add transition*/ +#sidebar-box #sidebar:hover { + /*! overflow: visible !important; */ + min-width: 40px; + max-width: 40px; + border-right: 1px solid var(--panel-separator-color); + z-index: 2; } -:root .tab .highlighter::before { +/*All other sidebar-boxes should be larger on hover*/ +#sidebar-box:hover { + min-width: 350px !important; + max-width: 350px !important; + z-index: 1; + margin-right: -300px !important; +} + +/*Tree Style Tabb && Sideberry specific sidebar width and size*/ + +#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover, +#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover { + min-width: 260px !important; + max-width: 260px !important; + z-index: 1; + margin-right: -210px !important; +} + + +#sidebar-header { + border: none !important; + background: var(--sidebar-bg-color) !important; +} + +#sidebar-close, #sidebar-title, #sidebar-switcher-arrow { + display: none; + border: none; + } + +#sidebar-switcher-target { + border: none !important; + margin-left: 4.5px !important; + padding-top: 4px !important; + padding-bottom: 3px !important; +} + +#sidebar-switcher-target:focus-visible:not(:hover, [open]), #sidebar-close:focus-visible:not(:hover, [open]) { + outline: none !important; +} + + +#main-window #PersonalToolbar { + margin-left: var(--sidebar-width); + padding: 2px 5px !important; + padding-top: 0px !important; + margin-top: -3px !important; +} + + +/* lock sidebar to height by doing the inverse margin of the toolbar element */ +#sidebar-box { + z-index: 1000 !important; + position: relative !important; + margin-top: var(--menubar-height) !important; + border-right: 1px solid #ccc; + background: #f6f7f8 !important; + transition: none !important; +} + +#main-window[title^="Firefox Developer Edition"] #sidebar-box { + margin-top: var(--toolmenubar-height) !important; +} + +/* lock sidebar to specified width */ +#sidebar-box { + min-width: var(--sidebar-width) !important; + max-width: var(--sidebar-width) !important; + overflow: hidden !important; + transition-property: width; + transition-duration: .25s; + transition-delay: .25s; + transition-timing-function: ease-in; +} + +.browser-toolbar { + margin-left: var(--sidebar-width); +} + +.sidebar-splitter { + opacity: 0 !important; + width: 0px !important; + border: none !Important; + --avatar-image-url: none !important; +} + +/* hide sidebar header for tree style tabs sidebar */ +#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { + /*! display: none; */ +} + +#sidebarMenu-popup .subviewbutton { + min-width: 0px; + padding: 0; + margin: 0 !Important; +} + +toolbarseparator { display: none; } -.after-tabs button { - border: none; - box-shadow: none; - padding: 5px; - margin: 11px; - text-align: left; - background: none; +#sidebar { border-right: 0px solid #ccc; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;} + + +/* OTHER CUSTOM OPTIONS */ + +/* Hide the title bar */ +#titlebar{ visibility: collapse; } + +/* hide normal horizontal tab bar */ +#TabsToolbar { visibility: collapse; } + + +:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon { + border: none !important; + background: none !important; } -.after-tabs button:hover { - background: var(--in-content-box-background-hover) !important; - opacity: 1; - border-radius: 5px; +/* --- Prevent enlargement */ +#urlbar[breakout-extend] { + top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; + left: 0 !important; + width: 100% !important; } - #tabbar [data-level] { +#urlbar[breakout-extend] #urlbar-input-container { + height: var(--urlbar-height) !important; + /*padding: 0px !important;*/ + padding-block: 0px !important; + padding-inline: 0px !important; +} +.urlbarView-row { + padding: 0px 2px 0px 2px; +} +/* END Prevent enlargement --- */ + +/*/* --- Reduce row paddings to make them more compact */ +.urlbarView-row { + padding: 2px 0px !important; + line-height: 1.2em !imortant; + margin: -1px; + margin-bottom:0px; +} +.urlbarView-row-inner { + padding-bottom: 6px !important; +} +.urlbarView { + margin: 0px !important; + width: 100% !important; +} +/* END Reduce row paddings to make them more compact --- */ + +/* Disable Urlbar Animation */ +#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background { + animation-name: none !important; + animation: none !important; } -#tabbar [data-level="1"] { - margin-left: 20px !important; +/* --- More compact "Search with Google" rows */ +.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner { + min-height: auto !important; + width: auto !important; +} +.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + margin-bottom: -1px; +} +/* END More compact "Search with Google" rows --- */ + +/* Remove active border on the addressbar when in focus */ + #nav-bar{ --toolbar-field-focus-border-color: #ccc } + +/* Remove box shadow on address bar */ +#urlbar-background, #searchbar { + box-shadow: none !important; } -#tabbar [data-level="2"] { - margin-left: 30px !important; -} - -#tabbar [data-level="3"] { - margin-left: 40px !important; -} - -#tabbar [data-level="4"] { - margin-left: 50px !important; -} - -#tabbar [data-level="5"] { - margin-left: 60px !important; -} - -#tabbar [data-level="6"] { - margin-left: 70px !important; -} - -#tabbar [data-level="7"] { - margin-left: 80px !important; -} - -#tabbar [data-level="8"] { - margin-left: 90px !important; -} - -#tabbar::before { - content: " "; - height: 24px; - width: 100%; - background: url('data:image/png;base64,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'); - background-size: contain; - background-repeat: no-repeat; - margin-top: 16px; - margin-bottom: 3px; - text-align: right; - margin-right: -12.5px !important; - opacity: 0.65; - width: 100%; - display: none; -} + /* Change Bookmark Folder Icon to the one Vivialdi uses */ +.bookmark-item[container] { + list-style-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi4zNTcxNyAzLjM2MDc1QzIuMTMzMjMgMy41ODY5MyAyLjAwNTE1IDMuODkyMjEgMiA0LjIxMjAzVjExLjc4NzJDMS45OTQ0MSAxMS45NDc5IDIuMDIxNjMgMTIuMTA4MSAyLjA3OTk2IDEyLjI1NzdDMi4xMzgyOCAxMi40MDczIDIuMjI2NDggMTIuNTQzMSAyLjMzOTA0IDEyLjY1NjhDMi40NTE2IDEyLjc3MDUgMi41ODYxMyAxMi44NTk2IDIuNzM0MjUgMTIuOTE4NUMyLjg4MjM3IDEyLjk3NzQgMy4wNDA5MSAxMy4wMDQ5IDMuMiAxMi45OTkzSDEyLjhDMTMuMTE2NyAxMi45OTQxIDEzLjQxODkgMTIuODY0NyAxMy42NDI4IDEyLjYzODVDMTMuODY2OCAxMi40MTIzIDEzLjk5NDggMTIuMTA3MSAxNCAxMS43ODcyTDE0IDZDMTQgNS41IDEzLjUgNSAxMyA1SDhMNi44IDNIMy4yQzIuODgzMzQgMy4wMDUyIDIuNTgxMSAzLjEzNDU3IDIuMzU3MTcgMy4zNjA3NVpNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjYgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIj48L3BhdGg+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjcgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIiBmaWxsLW9wYWNpdHk9IjAuMSI+PC9wYXRoPgo8L3N2Zz4=") !important; + padding-right: 15px !important; + margin-right: -1px !important; + } - -.newtab-button { - /*! text-align: left; */ - /*! margin: 8px !important; */ -} - -.newtab-button::after { - content: "New Tab"; - font-size: 13px; - padding-left: 12px; - margin-top: -2px; - position: absolute; - opacity: 0.85; - display: none; -} - -.after-tabs { - border-top: 1px solid var(--in-content-border-color); - margin-top: 6px; -} - -#tabbar-container .newtab-button::after { +/* Add down arrow to folders on the bookmark bar */ +.bookmark-item[container]::after { + content: "ˇ"; + opacity: 0.55; + padding-left: 3.5px; + font-size: 23px; display: inline-block; + position: absolute; + top: 6.9px; } - -#tabbar-container { - background: var(--theme-colors-toolbar); +/* Change the Avatar size for the Firefox Account to what makes sense */ +[label="Firefox Account"] #fxa-avatar-image { + scale: 1.175; } -.newtab-button::before { - padding-left: 1.5px; -} - - -tab-item.pinned { - --pinned-position-top: 0px !important; - --pinned-position-bottom: none !Important; - top: auto !Important; - bottom: auto !Important; - margin: none !Important; - left: initial !important; - right: initial !Important; -} - - -@media screen and (max-width: 51px) { - tab-item { - max-width: 30px !important; - } - - - #tabbar [data-level] { - margin-left: auto !important; - } - - #tabbar { - max-width: 100%; - } - - .tab > .closebox { - display: none; -} - - #tabbar-container .newtab-button::after { - display: none; -} - -}