252 lines
17 KiB
CSS
252 lines
17 KiB
CSS
/*== 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%;}
|
||
}
|