1 files changed, 371 insertions, 0 deletions
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));
+    }
+}