From 572ab7cb08b4673d36e7b792084c786c5eef11c3 Mon Sep 17 00:00:00 2001 From: BardofSprites <89086143+BardofSprites@users.noreply.github.com> Date: Mon, 10 Feb 2025 08:04:43 -0500 Subject: sideberry styles --- misc/sideberry.css | 371 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 371 insertions(+) create mode 100644 misc/sideberry.css (limited to 'misc') diff --git a/misc/sideberry.css b/misc/sideberry.css new file mode 100644 index 0000000..c54681c --- /dev/null +++ b/misc/sideberry.css @@ -0,0 +1,371 @@ +/* PINNED TABS */ + +#root.root {--pinned-tabs-col: 3;} +#root.root {--tabs-pinned-width: calc( (96vw - (var(--tabs-margin)*var(--pinned-tabs-col))) / var(--pinned-tabs-col));} +#root.root {--tabs-pinned-height: 42px;} + +.Tab[data-pin="true"] .body { + box-shadow: 0px 2px 1px #00000000; + background: #f2f2f250; + color: #ffffff20; +} +.Tab[data-pin="true"][data-active="true"]{ + background-color: #ffffff60; + border-radius: calc(var(--general-border-radius) + 2px); +} + +/* GENERAL */ + +#root.root {--tabs-height: 36px;} +#root.root {--tabs-margin: 8px;} +#root.root {--tabs-indent: 18px;} +#root.root {padding-top: 6px;} +#root.root {--tabs-close-btn-margin: 5px;} +#root.root {--tabs-inner-gap: 10px;} +#root.root {--general-border-radius: 6px;} +#root .popup-container {background-color: transparent;} +#root .hidden-panels-popup-layer:before {background-color: transparent;} + +/* Smoothen masking for overflowed tab title. */ +.Tab .title { + background: linear-gradient(90deg, var(--tabs-normal-fg) 80%, #f1f1f100 99%); + background-clip: text; + color: transparent; +} + +/* Uncomment this to apply Segoe UI Variable font - Make sure to install the font first */ +#root.root {--tabs-font: 0.9375rem Segoe UI Variable Small, Segoe UI;} + +/* NEW TAB BUTTON*/ + +.TabsPanel .new-tab-btns{ + position: relative; + /* padding-top: 5px; */ +} + +.TabsPanel .new-tab-btn { + justify-content: left; + padding-left: calc(var(--tabs-inner-gap)); + margin-left: calc(var(--tabs-margin)*0.6); + margin-right: calc(var(--tabs-margin)*0.6); + --ntb-btn-height: 37px; +} + +.TabsPanel .new-tab-btn > svg, .TabsPanel .new-tab-btn > img { + fill: transparent; + background-color: var(--nav-btn-fg); + opacity: 40%; + width: 17px; + height: 17px; + scale: 0.9; + mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwIDIuNUMxMCAyLjIyMzg2IDkuNzc2MTQgMiA5LjUgMkM5LjIyMzg2IDIgOSAyLjIyMzg2IDkgMi41VjlIMi41QzIuMjIzODYgOSAyIDkuMjIzODYgMiA5LjVDMiA5Ljc3NjE0IDIuMjIzODYgMTAgMi41IDEwSDlWMTYuNUM5IDE2Ljc3NjEgOS4yMjM4NiAxNyA5LjUgMTdDOS43NzYxNCAxNyAxMCAxNi43NzYxIDEwIDE2LjVWMTBIMTYuNUMxNi43NzYxIDEwIDE3IDkuNzc2MTQgMTcgOS41QzE3IDkuMjIzODYgMTYuNzc2MSA5IDE2LjUgOUgxMFYyLjVaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+"); +} + +.TabsPanel .new-tab-btn:after { + justify-content: left; + content: "New Tab"; + font: var(--tabs-font); + padding-left: calc(var(--tabs-inner-gap) + var(--tabs-margin) + 12px); + color: var(--nav-btn-fg); + opacity: 40%; +} + +/* NAVBAR */ + +#root.root {--nav-btn-width: 25px;} +#root.root {--nav-btn-height: 25px;} +#root.root {--nav-btn-margin: 2px;} +#root.root {--toolbar-bg: transparent;} + +/* Moving Sidebery navigation bar to bottom, to mimic how Space works on Arc Browser. Make sure to choose Horizontal when activating the navigation bar. */ +.NavigationBar {box-shadow: none;} +.top-horizontal-box { + display: flex; + order: 1; + margin-left: 5px; + margin-right: 5px; + margin-top: 3px; +} + +/* Remove background color, border and shadow for active tab panel. */ +.NavigationBar .nav-item[data-active="true"] { + background-color: transparent; + box-shadow: none; +} + +/* Making non-active tabs (including bookmark panels) grayscale. */ +.NavigationBar .nav-item[data-type="tabs"][data-active="false"] .icon { + fill: var(--nav-btn-fg); + opacity: 40%; + scale: 0.75; +} + +/* Settings related to Hidden Panels icon and popup layer, adapting to the flipped navbar orientation. */ +#hidden_panels_btn.nav-item .icon { + transform: scaleY(-1); + opacity: 40%; + scale: 0.9; +} +.hidden-panels-popup-layer { + transform: scaleY(-1); + margin-top: -15%; + --toolbar-bg: var(--frame-bg); +} +.NavigationBar .hidden-panels-popup-content { + transform: scaleY(-1); +} + +/* Adjust 'add tabs panel' size & position. */ +#root .PanelConfigPopup .popup { + width: 80vw; + margin-top: 25vh; +} + +/* Replacing 'add tabs panel' button with Fluent plus icon to mimic Arc's 'new space' button. */ +.NavigationBar #add_tp.nav-item .icon { + fill: transparent; + background-color: var(--nav-btn-fg); + width: 80%; + height: 80%; + mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwIDIuNUMxMCAyLjIyMzg2IDkuNzc2MTQgMiA5LjUgMkM5LjIyMzg2IDIgOSAyLjIyMzg2IDkgMi41VjlIMi41QzIuMjIzODYgOSAyIDkuMjIzODYgMiA5LjVDMiA5Ljc3NjE0IDIuMjIzODYgMTAgMi41IDEwSDlWMTYuNUM5IDE2Ljc3NjEgOS4yMjM4NiAxNyA5LjUgMTdDOS43NzYxNCAxNyAxMCAxNi43NzYxIDEwIDE2LjVWMTBIMTYuNUMxNi43NzYxIDEwIDE3IDkuNzc2MTQgMTcgOS41QzE3IDkuMjIzODYgMTYuNzc2MSA5IDE2LjUgOUgxMFYyLjVaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+"); +} + +/* Replacing 'history' panel with Fluent archive icon to mimic Arc's 'recently closed' button. */ +.NavigationBar #navhistory.nav-item .icon { + fill: transparent; + background-color: var(--nav-btn-fg); + display: flex; + padding: auto; + width: 80%; + height: 80%; + mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2LjUgMkMxNy4zMjg0IDIgMTggMi42NzE1NyAxOCAzLjVWNS41QzE4IDYuMTUyODUgMTcuNTgyOSA2LjcwODI4IDE3LjAwMDcgNi45MTQ0TDE3IDE0LjVDMTcgMTYuNDMzIDE1LjQzMyAxOCAxMy41IDE4SDYuNUM0LjU2NyAxOCAzIDE2LjQzMyAzIDE0LjVMMy4wMDAyOSA2LjkxNDc1QzIuNDE3NTQgNi43MDg5MSAyIDYuMTUzMjIgMiA1LjVWMy41QzIgMi42NzE1NyAyLjY3MTU3IDIgMy41IDJIMTYuNVpNMTYgN0g0VjE0LjVDNCAxNS44ODA3IDUuMTE5MjkgMTcgNi41IDE3SDEzLjVDMTQuODgwNyAxNyAxNiAxNS44ODA3IDE2IDE0LjVWN1pNOC41IDlIMTEuNUMxMS43NzYxIDkgMTIgOS4yMjM4NiAxMiA5LjVDMTIgOS43NDU0NiAxMS44MjMxIDkuOTQ5NjEgMTEuNTg5OSA5Ljk5MTk0TDExLjUgMTBIOC41QzguMjIzODYgMTAgOCA5Ljc3NjE0IDggOS41QzggOS4yNTQ1NCA4LjE3Njg4IDkuMDUwMzkgOC40MTAxMiA5LjAwODA2TDguNSA5SDExLjVIOC41Wk0xNi41IDNIMy41QzMuMjIzODYgMyAzIDMuMjIzODYgMyAzLjVWNS41QzMgNS43NzYxNCAzLjIyMzg2IDYgMy41IDZIMTYuNUMxNi43NzYxIDYgMTcgNS43NzYxNCAxNyA1LjVWMy41QzE3IDMuMjIzODYgMTYuNzc2MSAzIDE2LjUgM1oiIGZpbGw9IiMyMTIxMjEiLz48L3N2Zz4="); +} + +/* Replacing Sidebery 'settings' with Fluent settings icon to blend with Arc (Windows) aesthetic. */ +.NavigationBar #settings.nav-item .icon { + fill: transparent; + background-color: var(--nav-btn-fg); + width: 75%; + height: 75%; + mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuOTEwNzUgNy4zODI2NkMyLjI4MDA0IDYuMjQwNTMgMi44ODgzOSA1LjE5MjEzIDMuNjkxMDkgNC4zMDM2NEMzLjgyNjgzIDQuMTUzMzkgNC4wMzk3OCA0LjA5OTg0IDQuMjMwNDQgNC4xNjgwMkw2LjE0ODczIDQuODUzOTJDNi42Njg4IDUuMDM5NzcgNy4yNDEwNyA0Ljc2ODgzIDcuNDI2OTIgNC4yNDg3NUM3LjQ0NTIgNC4xOTc2MiA3LjQ1OTI3IDQuMTQ1MDcgNy40NjkgNC4wOTE3M0w3LjgzNDQ2IDIuMDg1NzNDNy44NzA4IDEuODg2MjcgOC4wMjM5OCAxLjcyODUgOC4yMjIyNyAxLjY4NjNDOC44MDI0NiAxLjU2MjggOS4zOTczNCAxLjUgMTAgMS41QzEwLjYwMjMgMS41IDExLjE5NjggMS41NjI3MyAxMS43NzY3IDEuNjg2MDdDMTEuOTc0OSAxLjcyODI0IDEyLjEyODEgMS44ODU5MSAxMi4xNjQ1IDIuMDg1MjlMMTIuNTMxIDQuMDkxNjVDMTIuNjMwMSA0LjYzNDk3IDEzLjE1MDkgNC45OTUxIDEzLjY5NDIgNC44OTYwMUMxMy43NDc2IDQuODg2MjcgMTMuODAwMiA0Ljg3MjE5IDEzLjg1MTIgNC44NTM5NUwxNS43Njk2IDQuMTY4MDJDMTUuOTYwMiA0LjA5OTg0IDE2LjE3MzIgNC4xNTMzOSAxNi4zMDg5IDQuMzAzNjRDMTcuMTExNiA1LjE5MjEzIDE3LjcyIDYuMjQwNTMgMTguMDg5MyA3LjM4MjY2QzE4LjE1MTYgNy41NzUzNCAxOC4wOTE1IDcuNzg2NTggMTcuOTM3MSA3LjkxNzY0TDE2LjM4MjMgOS4yMzc3M0MxNS45NjEzIDkuNTk1MiAxNS45MDk4IDEwLjIyNjMgMTYuMjY3MyAxMC42NDczQzE2LjMwMjQgMTAuNjg4NyAxNi4zNDA5IDEwLjcyNzEgMTYuMzgyMyAxMC43NjIzTDE3LjkzNzEgMTIuMDgyNEMxOC4wOTE1IDEyLjIxMzQgMTguMTUxNiAxMi40MjQ3IDE4LjA4OTMgMTIuNjE3M0MxNy43MiAxMy43NTk1IDE3LjExMTYgMTQuODA3OSAxNi4zMDg5IDE1LjY5NjRDMTYuMTczMiAxNS44NDY2IDE1Ljk2MDIgMTUuOTAwMiAxNS43Njk2IDE1LjgzMkwxMy44NTEzIDE1LjE0NjFDMTMuMzMxMiAxNC45NjAyIDEyLjc1OSAxNS4yMzEyIDEyLjU3MzEgMTUuNzUxMkMxMi41NTQ4IDE1LjgwMjQgMTIuNTQwOCAxNS44NTQ5IDEyLjUzMSAxNS45MDg1TDEyLjE2NDUgMTcuOTE0N0MxMi4xMjgxIDE4LjExNDEgMTEuOTc0OSAxOC4yNzE4IDExLjc3NjcgMTguMzEzOUMxMS4xOTY4IDE4LjQzNzMgMTAuNjAyMyAxOC41IDEwIDE4LjVDOS4zOTczNCAxOC41IDguODAyNDYgMTguNDM3MiA4LjIyMjI3IDE4LjMxMzdDOC4wMjM5OCAxOC4yNzE1IDcuODcwOCAxOC4xMTM3IDcuODM0NDYgMTcuOTE0M0w3LjQ2OTAyIDE1LjkwODRDNy4zNjk5MyAxNS4zNjUgNi44NDkxNiAxNS4wMDQ5IDYuMzA1ODMgMTUuMTA0QzYuMjUyNDEgMTUuMTEzNyA2LjE5OTg3IDE1LjEyNzggNi4xNDg4MSAxNS4xNDYxTDQuMjMwNDQgMTUuODMyQzQuMDM5NzggMTUuOTAwMiAzLjgyNjgzIDE1Ljg0NjYgMy42OTEwOSAxNS42OTY0QzIuODg4MzkgMTQuODA3OSAyLjI4MDA0IDEzLjc1OTUgMS45MTA3NSAxMi42MTczQzEuODQ4NDUgMTIuNDI0NyAxLjkwODUyIDEyLjIxMzQgMi4wNjI4OSAxMi4wODI0TDMuNjE3NzMgMTAuNzYyM0M0LjAzODcyIDEwLjQwNDggNC4wOTAyMSA5Ljc3MzczIDMuNzMyNzQgOS4zNTI3NEMzLjY5NzU5IDkuMzExMzUgMy42NTkxMyA5LjI3Mjg4IDMuNjE3NzUgOS4yMzc3NUwyLjA2Mjg5IDcuOTE3NjRDMS45MDg1MiA3Ljc4NjU4IDEuODQ4NDUgNy41NzUzNCAxLjkxMDc1IDcuMzgyNjZaTTIuOTcxMyA3LjM3NzA5TDQuMjY0OTkgOC40NzU0NkM0LjM0Nzc4IDguNTQ1NzYgNC40MjQ3MSA4LjYyMjY5IDQuNDk1MDEgOC43MDU0OEM1LjIwOTk1IDkuNTQ3NDYgNS4xMDY5NyAxMC44MDk2IDQuMjY0OTcgMTEuNTI0NkwyLjk3MTMgMTIuNjIyOUMzLjI2MzM1IDEzLjQwNTEgMy42ODQ4IDE0LjEzMjIgNC4yMTYyMyAxNC43NzUxTDUuODEyMjEgMTQuMjA0NEM1LjkxNDQ5IDE0LjE2NzkgNi4wMTk1OCAxNC4xMzk3IDYuMTI2NDMgMTQuMTIwMkM3LjIxMzA3IDEzLjkyMiA4LjI1NDYyIDE0LjY0MjMgOC40NTI4MSAxNS43MjlMOC43NTY3OCAxNy4zOTc1QzkuMTY0NjUgMTcuNDY1NSA5LjU4IDE3LjUgMTAgMTcuNUMxMC40MTk3IDE3LjUgMTAuODM0OCAxNy40NjU2IDExLjI0MjQgMTcuMzk3NkwxMS41NDcyIDE1LjcyODlDMTEuNTY2NyAxNS42MjIxIDExLjU5NDkgMTUuNTE3IDExLjYzMTQgMTUuNDE0N0MxMi4wMDMxIDE0LjM3NDYgMTMuMTQ3NyAxMy44MzI3IDE0LjE4NzkgMTQuMjA0NEwxNS43ODM4IDE0Ljc3NTFDMTYuMzE1MiAxNC4xMzIyIDE2LjczNjcgMTMuNDA1MSAxNy4wMjg3IDEyLjYyMjlMMTUuNzM1IDExLjUyNDVDMTUuNjUyMiAxMS40NTQyIDE1LjU3NTMgMTEuMzc3MyAxNS41MDUgMTEuMjk0NUMxNC43OTAxIDEwLjQ1MjUgMTQuODkzMSA5LjE5MDQgMTUuNzM1MSA4LjQ3NTQ0TDE3LjAyODcgNy4zNzcwOUMxNi43MzY3IDYuNTk0ODYgMTYuMzE1MiA1Ljg2NzgzIDE1Ljc4MzggNS4yMjQ5NEwxNC4xODc4IDUuNzk1NTlDMTQuMDg1NSA1LjgzMjE0IDEzLjk4MDQgNS44NjAzIDEzLjg3MzYgNS44Nzk3OUMxMi43ODcgNi4wNzc5NiAxMS43NDU0IDUuMzU3NyAxMS41NDczIDQuMjcxMTlMMTEuMjQyNCAyLjYwMjM1QzEwLjgzNDggMi41MzQ0MyAxMC40MTk3IDIuNSAxMCAyLjVDOS41OCAyLjUgOS4xNjQ2NSAyLjUzNDQ4IDguNzU2NzggMi42MDI0OUw4LjQ1Mjc5IDQuMjcxMDVDOC40MzMzMSA0LjM3NzkxIDguNDA1MTUgNC40ODI5OSA4LjM2ODYgNC41ODUyN0M3Ljk5Njg5IDUuNjI1NDIgNi44NTIzNiA2LjE2NzMgNS44MTIxMyA1Ljc5NTU2TDQuMjE2MjMgNS4yMjQ5NEMzLjY4NDggNS44Njc4MyAzLjI2MzM1IDYuNTk0ODYgMi45NzEzIDcuMzc3MDlaTTcuNTAwMDEgMTBDNy41MDAwMSA4LjYxOTI5IDguNjE5MyA3LjUgMTAgNy41QzExLjM4MDcgNy41IDEyLjUgOC42MTkyOSAxMi41IDEwQzEyLjUgMTEuMzgwNyAxMS4zODA3IDEyLjUgMTAgMTIuNUM4LjYxOTMgMTIuNSA3LjUwMDAxIDExLjM4MDcgNy41MDAwMSAxMFpNOC41MDAwMSAxMEM4LjUwMDAxIDEwLjgyODQgOS4xNzE1OSAxMS41IDEwIDExLjVDMTAuODI4NCAxMS41IDExLjUgMTAuODI4NCAxMS41IDEwQzExLjUgOS4xNzE1NyAxMC44Mjg0IDguNSAxMCA4LjVDOS4xNzE1OSA4LjUgOC41MDAwMSA5LjE3MTU3IDguNTAwMDEgMTBaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+") +} + +/* OLD STYLES +#root.root { +--tabs-indent: 0px; +--general-border-radius: 4px; +--toolbar-bg-light: #f1f1fa; +--toolbar-bg-dark: #262629; +--frame-bg-light: #f1f1fa; +--frame-bg-dark: #262629; +--tabs-height: 32px; +--tabs-margin: 6px; +--pinned-tabs-col: 4; +--toolbar-bg: var(--toolbar-bg-light); +--frame-bg: var(--frame-bg-light); +flex-direction: column-reverse; +} + +@media (prefers-color-scheme: dark) { +#root.root { +--toolbar-bg: var(--toolbar-bg-dark); +--frame-bg: var(--frame-bg-dark); +} +} + +.NavigationBar .main-items { +justify-content: center; +} + +.Tab { +min-width: 33px; +transition: all ease-in-out 200ms; +} + +.NavigationBar { +transition: all ease-in-out 200ms; +} + +.NavigationBar[data-layout="inline"] .main-items .nav-item { +transform: translateX(0) !important; +position: relative !important; +flex-grow: 1; +max-width: 66px; +} + +.NavigationBar[data-layout="inline"] .main-items .nav-item[data-active="false"] { +display: none; +} + +.BottomBar { +display: none; +} + +.Tab .audio, .Tab .title { +opacity: 0 !important; +transition: ease-in-out 250ms; +} + +.Tab[data-pin="true"] .fav, .Tab[data-pin="true"] .fav-icon { +width: 20px; +height: 20px; +} + +.Tab[data-pin="false"] .fav, .Tab[data-pin="false"] .fav-icon { +width: 18px; +height: 18px; +} + +.Tab[data-pin="true"][data-active="true"] .color-layer { +background-color: #ffffff !important; +} + +.Tab[data-pin="false"] .color-layer { +opacity: 0 !important; +border: 0 !important; +} + +.Tab[data-pin="false"][data-active="true"] .body { +box-shadow: rgba(17, 17, 26, 0.15) 0px 0px 16px; +} + +.Tab[data-pin="false"] { +border: 0 !important; +} + +.Tab .title { +background: linear-gradient(90deg, var(--tabs-normal-fg) 80%, #f1f1f100 99%); +background-clip: text; +color: transparent; +} + +@media screen and (min-width: 350px) { +.NavigationBar[data-layout="inline"] .main-items .nav-item[data-active="false"] { +display: flex; +} +.BottomBar { +display: flex; +} +#root.root { +--tabs-indent: 14px; +} +.Tab .audio, .Tab .title { +opacity: 1 !important; +} +#root.root { +--tabs-pinned-height: 40px; +} +#root.root { +--tabs-pinned-width: calc((100vw - (var(--tabs-margin) * (var(--pinned-tabs-col) + 1))) / var(--pinned-tabs-col)); +} +} + +/* OLD STYLES +#root.root { +--tabs-indent: 0px; +--general-border-radius: 4px; +--toolbar-bg-light: #f1f1fa; +--toolbar-bg-dark: #262629; +--frame-bg-light: #f1f1fa; +--frame-bg-dark: #262629; +--tabs-height: 32px; +--tabs-margin: 6px; +--pinned-tabs-col: 4; +--toolbar-bg: var(--toolbar-bg-light); +--frame-bg: var(--frame-bg-light); +flex-direction: column-reverse; +} + +@media (prefers-color-scheme: dark) { +#root.root { +--toolbar-bg: var(--toolbar-bg-dark); +--frame-bg: var(--frame-bg-dark); +} +} + +.NavigationBar .main-items { +justify-content: center; +} + +.Tab { +min-width: 33px; +transition: all ease-in-out 200ms; +} + +.NavigationBar { +transition: all ease-in-out 200ms; +} + +.NavigationBar[data-layout="inline"] .main-items .nav-item { +transform: translateX(0) !important; +position: relative !important; +flex-grow: 1; +max-width: 66px; +} + +.NavigationBar[data-layout="inline"] .main-items .nav-item[data-active="false"] { +display: none; +} + +.BottomBar { +display: none; +} + +.Tab .audio, .Tab .title { +opacity: 0 !important; +transition: ease-in-out 250ms; +} + +.Tab[data-pin="true"] .fav, .Tab[data-pin="true"] .fav-icon { +width: 20px; +height: 20px; +} + +.Tab[data-pin="false"] .fav, .Tab[data-pin="false"] .fav-icon { +width: 18px; +height: 18px; +} + +.Tab[data-pin="true"][data-active="true"] .color-layer { +background-color: #ffffff !important; +} + +.Tab[data-pin="false"] .color-layer { +opacity: 0 !important; +border: 0 !important; +} + +.Tab[data-pin="false"][data-active="true"] .body { + box-shadow: rgba(17, 17, 26, 0.15) 0px 0px 16px; +} + +.Tab[data-pin="false"] { + border: 0 !important; +} + +.Tab .title { + background: linear-gradient(90deg, var(--tabs-normal-fg) 80%, #f1f1f100 99%); + background-clip: text; + color: transparent; +} + +@media screen and (min-width: 350px) { + .NavigationBar[data-layout="inline"] .main-items .nav-item[data-active="false"] { + display: flex; + } + .BottomBar { + display: flex; + } + #root.root { + --tabs-indent: 14px; + } + .Tab .audio, .Tab .title { + opacity: 1 !important; + } + #root.root { + --tabs-pinned-height: 40px; + } + #root.root { + --tabs-pinned-width: calc((100vw - (var(--tabs-margin) * (var(--pinned-tabs-col) + 1))) / var(--pinned-tabs-col)); + } +} -- cgit v1.2.3