Ahmad Ansori Palembani
93a26accd1
Technically not a config but a compose file, so I think it's better to have outside of `.config` dir
97 lines
2.8 KiB
CSS
97 lines
2.8 KiB
CSS
/**
|
|
* Better Floorp vertical tabs
|
|
*
|
|
* This makes Floorp's (expanded) vertical tabs not affecting sites' width,
|
|
* which can cause lag on heavy websites like Twitch and YouTube.
|
|
*
|
|
* This also fixed vertical tabs' width breaking when some preference related
|
|
* to browser's "head" is changed
|
|
*
|
|
* Based on my changes for Pulse, but Pulse is dead.
|
|
* REF: https://github.com/null2264/pulse/commit/fce966a110c2987b08d35bcd04c5992655b24b13
|
|
*/
|
|
:root {
|
|
/* from Floorp source code, too big for me */
|
|
/*--default-verticaltab-width: 45px;*/
|
|
/*--hoverd-verticaltab-width: 20em;*/
|
|
|
|
--default-verticaltab-width: 4.125em !important;
|
|
--hoverd-verticaltab-width: /*ZI:VERTICAL-TAB-HOVER-WIDTH-IN-EM*/ !important;
|
|
}
|
|
|
|
@charset "UTF-8";
|
|
@-moz-document url(chrome://browser/content/browser.xhtml) {
|
|
.browserContainer {
|
|
border-inline-width: 0 !important;
|
|
}
|
|
|
|
/* >> Fix height being inconsistent on hover */
|
|
.tab-icon-stack,
|
|
.tab-label-container {
|
|
height: 2.7em !important;
|
|
}
|
|
|
|
.tab-icon-stack {
|
|
align-items: center;
|
|
}
|
|
/* << Fix height being inconsistent on hover */
|
|
|
|
/* >> Fix vertical bar icon inconsistency */
|
|
/* FIXME: Tabs become inconsistent if one of them is pinned */
|
|
#tabbrowser-tabs {
|
|
margin-right: 0px !important;
|
|
}
|
|
|
|
#TabsToolbar .toolbarbutton-icon {
|
|
padding: 1em !important;
|
|
height: 3.5em !important;
|
|
width: 3.5em !important;
|
|
}
|
|
|
|
#TabsToolbar .toolbarbutton-badge-stack {
|
|
width: 3.5em !important;
|
|
}
|
|
|
|
.sidepanel-icon, .sidepanel-browser-icon {
|
|
padding: 0px !important;
|
|
height: 3.5em !important;
|
|
width: 3.5em !important;
|
|
}
|
|
|
|
#TabsToolbar .tab-throbber,
|
|
#TabsToolbar .tab-icon-pending,
|
|
#TabsToolbar .tab-icon-image,
|
|
#TabsToolbar .tab-sharing-icon-overlay,
|
|
#TabsToolbar .tab-icon-overlay {
|
|
margin-left: 0.5em !important;
|
|
margin-inline-end: 1.9em !important;
|
|
}
|
|
/* << Fix vertical bar icon inconsistency */
|
|
|
|
#sidebar-select-box {
|
|
width: var(--default-verticaltab-width) !important;
|
|
min-width: var(--default-verticaltab-width) !important;
|
|
max-width: var(--default-verticaltab-width) !important;
|
|
}
|
|
|
|
#TabsToolbar {
|
|
position: relative !important;
|
|
transition: all 300ms !important;
|
|
width: calc(var(--default-verticaltab-width) + 0.125em) !important;
|
|
min-width: calc(var(--default-verticaltab-width) + 0.125em) !important;
|
|
max-width: calc(var(--default-verticaltab-width) + 0.125em) !important;
|
|
z-index: 1; /* Probably not needed, since Floorp already handle this */
|
|
}
|
|
#TabsToolbar:not(:hover) {
|
|
scrollbar-width: none !important;
|
|
}
|
|
|
|
#TabsToolbar:hover {
|
|
transition: all 300ms !important;
|
|
width: var(--hoverd-verticaltab-width) !important;
|
|
min-width: var(--hoverd-verticaltab-width) !important;
|
|
max-width: var(--hoverd-verticaltab-width) !important;
|
|
z-index: 2; /* Probably not needed, since Floorp already handle this */
|
|
margin-right: calc((var(--hoverd-verticaltab-width) - var(--default-verticaltab-width) - 0.125em) * -1) !important;
|
|
}
|
|
}
|