74 lines
1.9 KiB
CSS
74 lines
1.9 KiB
CSS
|
#root.root {--tabs-font: 0.92rem sans-serif;}
|
||
|
|
#root {
|
||
|
|
--transition-delay-out: 300ms;
|
||
|
|
--transition-delay-in: 600ms;
|
||
|
|
--thin-icon-width: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Collapse main */
|
||
|
|
#root:not(:hover) .main-items {
|
||
|
|
width: var(--thin-icon-width);
|
||
|
|
transition-delay: var(--transition-delay-out) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root:not(:hover) #nav_bar .main-items div[data-active="false"] {
|
||
|
|
opacity: 0;
|
||
|
|
transition-delay: var(--transition-delay-in) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root:not(:hover) #nav_bar .main-items .nav-item {
|
||
|
|
transform: translateX(0) !important;
|
||
|
|
transition-delay: var(--transition-delay-in) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root #nav_bar .main-items .nav-item {
|
||
|
|
transition-delay: var(--transition-delay-out) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Collapse new tab btn */
|
||
|
|
#root .new-tab-btns {
|
||
|
|
transition: all 300ms !important;
|
||
|
|
transition-delay: var(--transition-delay-out) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root:not(:hover) .new-tab-btns {
|
||
|
|
width: var(--thin-icon-width);
|
||
|
|
transition: all 300ms !important;
|
||
|
|
transition-delay: var(--transition-delay-in) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Collapse tabs */
|
||
|
|
#root:not(:hover) {
|
||
|
|
--tabs-indent: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root:not(:hover) .Tab {
|
||
|
|
width: var(--thin-icon-width) !important;
|
||
|
|
transition: all 300ms !important;
|
||
|
|
transition-delay: var(--transition-delay-in) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root:hover .Tab {
|
||
|
|
transition: all 300ms !important;
|
||
|
|
transition-delay: var(--transition-delay-out) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root .Tab > .body > :not(div.fav) {
|
||
|
|
transition: all 300ms !important;
|
||
|
|
transition-delay: var(--transition-delay-out) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Collapse pinned */
|
||
|
|
#root:not(:hover) .PinnedTabsBar {
|
||
|
|
max-width: var(--thin-icon-width) !important;
|
||
|
|
transition: all 300ms !important;
|
||
|
|
transition-delay: var(--transition-delay-in) !important;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root:hover .PinnedTabsBar {
|
||
|
|
max-width: 600px !important;
|
||
|
|
transition: all 300ms !important;
|
||
|
|
transition-delay: var(--transition-delay-out) !important;
|
||
|
|
}
|