143 lines
4.3 KiB
CSS
143 lines
4.3 KiB
CSS
/*== ShyFox Sidebery ===============================================================================================================================
|
|
|
|
Styles for Sidebery extension
|
|
|
|
|
|
--- VARIABLES ---------------------------------------------------------------------------------------------------------------------------------------
|
|
|
|
*/
|
|
|
|
|
|
@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html"){ /* wrap start */
|
|
|
|
#root.root {
|
|
--general-border-radius: var(--rounding) !important;
|
|
--general-margin: 4px !important;
|
|
|
|
--button-size: 35px;
|
|
--pin-favicon-size: 30px;
|
|
|
|
--nav-btn-margin: calc(var(--margin) / 2) !important;
|
|
--nav-btn-width: var(--button-size) !important;
|
|
--nav-btn-height: var(--button-size) !important;
|
|
--nav-btn-len-margin: calc(var(--rounding) / 4) !important;
|
|
|
|
--audio-btn-round-margin: calc(var(--big-rounding) / 2) !important;
|
|
|
|
--tabs-audio-btn-width: 22px !important;
|
|
--tabs-margin: 6px !important;
|
|
--tabs-height: var(--button-size) !important;
|
|
--tabs-inner-gap: calc(var(--margin) / 2) !important;
|
|
--tabs-border-radius: var(--big-rounding) !important;
|
|
|
|
@media (-moz-bool-pref: "shyfox.fill.accent.with.icons.fill.color") {--shy-color: var(--s-toolbar-fg, var(--shy-accent-color)) !important;}
|
|
--accent: var(--shy-color) !important;
|
|
--frame-el-overlay-selected-border: var(--accent) !important;
|
|
--toolbar-el-overlay-selected-border: var(--accent) !important;
|
|
--status-notice: var(--accent) !important;
|
|
}
|
|
|
|
/*
|
|
|
|
--- PINNED TABS -------------------------------------------------------------------------------------------------------------------------------------
|
|
|
|
*/
|
|
|
|
/* size calculation */
|
|
.PinnedTabsBar .tab-wrapper .Tab {
|
|
--n: 3; --m: 1;
|
|
|
|
width: calc(
|
|
100vw / var(--n)
|
|
- var(--tabs-margin) * (1/var(--n) + 1)
|
|
) !important;
|
|
|
|
height: calc( (
|
|
(100vw - var(--tabs-margin)) / 3.6
|
|
) / var(--m) ) !important;
|
|
}
|
|
|
|
/* 1 pinned tab */
|
|
.PinnedTabsBar
|
|
.tab-wrapper:nth-child(1):last-child .Tab
|
|
{--n: 1; --m: 1.4;}
|
|
|
|
/* 2 tabs in bottom row */
|
|
.PinnedTabsBar:has(.tab-wrapper:nth-child(3n + 2):last-child)
|
|
.tab-wrapper:nth-last-child(-n + 2) .Tab
|
|
{--n: 2; --m: 1.2;}
|
|
|
|
/* 4 tabs in bottom row */
|
|
.PinnedTabsBar:has(.tab-wrapper:nth-child(3n + 4):last-child)
|
|
.tab-wrapper:nth-last-child(-n + 4) .Tab
|
|
{--n: 4; --m: 1.3;}
|
|
|
|
/* audio icon */
|
|
.Tab[data-pin="true"] > .body > .audio {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
right: var(--audio-btn-round-margin) !important;
|
|
top: var(--audio-btn-round-margin) !important;
|
|
}
|
|
|
|
/* bigger favicon */
|
|
.Tab[data-pin="true"] :is(.fav, .fav-icon){
|
|
width: var(--pin-favicon-size) !important;
|
|
height: var(--pin-favicon-size) !important;
|
|
}
|
|
|
|
/* shadow, outline and background */
|
|
.Tab[data-pin="true"] .body {
|
|
border: 1px solid var(--s-frame-bg) !important;
|
|
background-color: var(--toolbar-bg) !important;
|
|
}
|
|
|
|
/* selected tab outline */
|
|
.Tab[data-pin="true"][data-active="true"] .body
|
|
{border: 1px solid var(--s-frame-fg) !important;}
|
|
|
|
/* remove bottom margin */
|
|
.PinnedTabsBar {margin-bottom: 0px !important;}
|
|
|
|
/*
|
|
|
|
--- OTHER -------------------------------------------------------------------------------------------------------------------------------------------
|
|
|
|
*/
|
|
|
|
/* consistent navbar background */
|
|
#nav_bar {background-color: transparent !important;}
|
|
|
|
/* padding */
|
|
#nav_bar {
|
|
padding-top: var(--nav-btn-margin) !important;
|
|
padding-bottom: var(--general-margin) !important;
|
|
}
|
|
|
|
.BottomBar {padding: var(--nav-btn-margin) !important;}
|
|
|
|
/* popup */
|
|
.popup {margin: var(--tabs-margin) !important;}
|
|
.popup-container {background-color: transparent !important;}
|
|
|
|
/* search */
|
|
#search_bar {margin: 4px !important;}
|
|
#search_bar[data-showed="false"]{display: none !important;}
|
|
#search_bar .clear-btn{margin-inline-end: var(--general-margin)}
|
|
|
|
.NavigationBar{box-shadow: none !important}
|
|
|
|
/* accent colored selection */
|
|
::selection {background: var(--shy-accent-color) !important;}
|
|
|
|
/* notification */
|
|
.notification{
|
|
border-radius: var(--rounding) !important;
|
|
&::after{
|
|
top: calc(var(--rounding) / 4 + 3px) !important;
|
|
right: calc(var(--rounding) / 4 + 3px) !important;
|
|
}
|
|
}
|
|
|
|
} /* wrap end */
|