/*== ShyFox Variables ===============================================================================================================================
This is where most of variables are located
--- SETTINGS ----------------------------------------------------------------------------------------------------------------------------------------
Values of these variables can be changed safely and most likely nothing will break.
*/
:root, #screenshots-component *{
/* accent color */
--shy-accent-color: #3584E4;
/* window border thickness and size of many margins */
--margin: 0.8rem;
/* rounded corners radius of most elements */
--rounding: 11.5px;
--big-rounding: 15px;
--bigger-rounding: 20px;
--giant-rounding: 30px;
/* animations time */
--trans-dur: 0.25s;
/* width of some elements. 1vw is one hundredth of the screen width */
--sdbr-wdt: 300px;
--navbar-wdt: 60vw;
--findbar-wdt: 70vw;
/* intensity of blur (new tab) */
--blur-radius: 10px;
/* brightness of inactive window elements */
--inactive-opct: 0.7;
/* transparency of indicator bars showing the position of hidden panels */
--hide-bar-opct: 0.2;
&:-moz-window-inactive{--hide-bar-opct: 0.1;}
/* how much shorter these bars than panels */
--hide-bar-wdt-pad: 10px;
/* size of the panel hitbox outside the window border */
--panel-hide-ldg: 1px; /* f11 fullscreen */
&:not([inFullscreen="true"]){
--panel-hide-ldg: 0px; /* maximized window */
&[sizemode="normal"]:not([titlepreface*=""]){
--panel-hide-ldg: 9px; /* floating window */
}
}
/* colors */
--shadow-col: #00000020; /* color of the translucent outline that imitates a shadow */
--private-col: #6e00bc80; /* private mode outline color */
--debug-col: transparent; /* rgba(0, 0, 255, 0.2); color of hidden panels hover hitboxes */
--debug-col-2: transparent; /* rgba(0, 255, 0, 0.2); color of window dragging hitboxes */
}
/* accent color toggle */
:root{--shy-color: var(--shy-accent-color)}
@media (-moz-bool-pref: "shyfox.fill.accent.with.icons.fill.color"){
:root{--shy-color: var(--toolbar-color, var(--shy-accent-color)) !important;}
}
/*
--- VARIABLES ----------------------------------------------------------------------------------------------------------------------------------
Reserved values and all sorts of dynamic variables. You should not touch them.
*/
:root{
--ActiveCaption: ActiveCaption;
/* pick browser colors */ /* used for: */
--bg-col: var(--lwt-accent-color, var(--ActiveCaption, tomato)); /* darker background */ /* tomato is the fallback color */
--tb-col: var(--toolbar-bgcolor, tomato); /* lighter background */ /* meaning something went wrong */
--bt-col: var(--toolbarbutton-icon-fill); /* text or icons */
--pp-col: var(--arrowpanel-background); /* popup color */
/* dynamic opacity */
--dyn-opct: 1;
&:-moz-window-inactive{--dyn-opct: var(--inactive-opct);}
/* shared shortcuts for commonly used parameters */
--outline: 1px solid var(--arrowpanel-background); /* outline around almost anything */
--shadow: 2px solid var(--shadow-col); /* translucent outline that imitates a shadow */
--transition: all var(--trans-dur) ease-out; /* animation for smooth transitions */
/* constant variables */
--toolbar-item-hgt: 40px; /* height of all panels elements: buttons, urlbar, etc. */
--toolbar-button-wdt: 45px; /* width of all panels buttons */
--hide-bar-padding: 3px; /* how much indicator bars showing the position of hidden panels is thinner than --margin */
--screenshot-tool-hgt: 145px; /* height of `ctrl + shift + s` tool buttons */
/* hiding the window border in fullscreen mode and assigning --margin to it in windowed mode */
--left-margin: 0px;
--right-margin: 0px;
--top-margin: 0px;
--bottom-margin: 0px;
&:not(:is([inFullscreen="true"], [inDOMFullscreen="true"], [titlepreface*=""]:is([sizemode="maximized"], [gtktiledwindow="true"]))){
--left-margin: var(--margin);
--right-margin: var(--margin);
--top-margin: var(--margin);
--bottom-margin: var(--margin);
}
/* hide indication bars in fullscreen or clean mode */
&:is([inFullscreen="true"], [inDOMFullscreen="true"], [titlepreface*=""]){
--hide-bar-opct: 0 !important;
}
/* override built-in roundings with custom */
--arrowpanel-border-radius: var(--big-rounding) !important;
--panel-border-radius: var(--big-rounding) !important;
--arrowpanel-menuitem-border-radius: var(--rounding) !important;
--toolbarbutton-border-radius: var(--rounding) !important;
--button-border-radius: var(--rounding) !important;
--border-radius-small: var(--rounding) !important;
--tab-border-radius: var(--rounding) !important;
/* override one padding in navbar to match style */
--toolbar-start-end-padding: calc(var(--margin) / 2) !important;
/* fix bookmark toolbar */
--bookmarks-toolbar-overlapping-browser-height: 0px !important;
}
/* current tab loading progress */
#main-window{
&:has(.tabbrowser-tab[selected][busy] ){--shy-tab-load-pcent: 20%;}
&:has(.tabbrowser-tab[selected][busy][pendingicon] ){--shy-tab-load-pcent: 50%;}
&:has(.tabbrowser-tab[selected][busy][pendingicon][progress] ){--shy-tab-load-pcent: 85%;}
&:has(.tabbrowser-tab[selected][busy][progress] ){--shy-tab-load-pcent: 95%;}
}
/* globalise download percentages (yes, i am a clown) */
#main-window{
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 0%;"]){--shy-download-pcent: 0%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 1%;"]){--shy-download-pcent: 1%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 2%;"]){--shy-download-pcent: 2%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 3%;"]){--shy-download-pcent: 3%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 4%;"]){--shy-download-pcent: 4%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 5%;"]){--shy-download-pcent: 5%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 6%;"]){--shy-download-pcent: 6%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 7%;"]){--shy-download-pcent: 7%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 8%;"]){--shy-download-pcent: 8%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 9%;"]){--shy-download-pcent: 9%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 10%;"]){--shy-download-pcent: 10%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 11%;"]){--shy-download-pcent: 11%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 12%;"]){--shy-download-pcent: 12%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 13%;"]){--shy-download-pcent: 13%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 14%;"]){--shy-download-pcent: 14%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 15%;"]){--shy-download-pcent: 15%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 16%;"]){--shy-download-pcent: 16%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 17%;"]){--shy-download-pcent: 17%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 18%;"]){--shy-download-pcent: 18%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 19%;"]){--shy-download-pcent: 19%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 20%;"]){--shy-download-pcent: 20%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 21%;"]){--shy-download-pcent: 21%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 22%;"]){--shy-download-pcent: 22%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 23%;"]){--shy-download-pcent: 23%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 24%;"]){--shy-download-pcent: 24%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 25%;"]){--shy-download-pcent: 25%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 26%;"]){--shy-download-pcent: 26%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 27%;"]){--shy-download-pcent: 27%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 28%;"]){--shy-download-pcent: 28%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 29%;"]){--shy-download-pcent: 29%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 30%;"]){--shy-download-pcent: 30%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 31%;"]){--shy-download-pcent: 31%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 32%;"]){--shy-download-pcent: 32%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 33%;"]){--shy-download-pcent: 33%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 34%;"]){--shy-download-pcent: 34%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 35%;"]){--shy-download-pcent: 35%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 36%;"]){--shy-download-pcent: 36%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 37%;"]){--shy-download-pcent: 37%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 38%;"]){--shy-download-pcent: 38%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 39%;"]){--shy-download-pcent: 39%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 40%;"]){--shy-download-pcent: 40%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 41%;"]){--shy-download-pcent: 41%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 42%;"]){--shy-download-pcent: 42%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 43%;"]){--shy-download-pcent: 43%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 44%;"]){--shy-download-pcent: 44%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 45%;"]){--shy-download-pcent: 45%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 46%;"]){--shy-download-pcent: 46%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 47%;"]){--shy-download-pcent: 47%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 48%;"]){--shy-download-pcent: 48%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 49%;"]){--shy-download-pcent: 49%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 50%;"]){--shy-download-pcent: 50%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 51%;"]){--shy-download-pcent: 51%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 52%;"]){--shy-download-pcent: 52%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 53%;"]){--shy-download-pcent: 53%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 54%;"]){--shy-download-pcent: 54%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 55%;"]){--shy-download-pcent: 55%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 56%;"]){--shy-download-pcent: 56%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 57%;"]){--shy-download-pcent: 57%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 58%;"]){--shy-download-pcent: 58%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 59%;"]){--shy-download-pcent: 59%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 60%;"]){--shy-download-pcent: 60%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 61%;"]){--shy-download-pcent: 61%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 62%;"]){--shy-download-pcent: 62%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 63%;"]){--shy-download-pcent: 63%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 64%;"]){--shy-download-pcent: 64%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 65%;"]){--shy-download-pcent: 65%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 66%;"]){--shy-download-pcent: 66%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 67%;"]){--shy-download-pcent: 67%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 68%;"]){--shy-download-pcent: 68%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 69%;"]){--shy-download-pcent: 69%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 70%;"]){--shy-download-pcent: 70%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 71%;"]){--shy-download-pcent: 71%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 72%;"]){--shy-download-pcent: 72%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 73%;"]){--shy-download-pcent: 73%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 74%;"]){--shy-download-pcent: 74%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 75%;"]){--shy-download-pcent: 75%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 76%;"]){--shy-download-pcent: 76%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 77%;"]){--shy-download-pcent: 77%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 78%;"]){--shy-download-pcent: 78%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 79%;"]){--shy-download-pcent: 79%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 80%;"]){--shy-download-pcent: 80%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 81%;"]){--shy-download-pcent: 81%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 82%;"]){--shy-download-pcent: 82%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 83%;"]){--shy-download-pcent: 83%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 84%;"]){--shy-download-pcent: 84%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 85%;"]){--shy-download-pcent: 85%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 86%;"]){--shy-download-pcent: 86%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 87%;"]){--shy-download-pcent: 87%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 88%;"]){--shy-download-pcent: 88%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 89%;"]){--shy-download-pcent: 89%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 90%;"]){--shy-download-pcent: 90%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 91%;"]){--shy-download-pcent: 91%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 92%;"]){--shy-download-pcent: 92%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 93%;"]){--shy-download-pcent: 93%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 94%;"]){--shy-download-pcent: 94%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 95%;"]){--shy-download-pcent: 95%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 96%;"]){--shy-download-pcent: 96%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 97%;"]){--shy-download-pcent: 97%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 98%;"]){--shy-download-pcent: 98%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 99%;"]){--shy-download-pcent: 99%;}
&:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 100%;"]){--shy-download-pcent: 100%;}
}