shy-variables.css (17553B)
1 /*== ShyFox Variables =============================================================================================================================== 2 3 This is where most of variables are located 4 5 6 --- SETTINGS ---------------------------------------------------------------------------------------------------------------------------------------- 7 8 Values of these variables can be changed safely and most likely nothing will break. 9 10 */ 11 12 :root, #screenshots-component *{ 13 /* accent color */ 14 --shy-accent-color: #3584E4; 15 16 /* window border thickness and size of many margins */ 17 --margin: 0.8rem; 18 19 /* rounded corners radius of most elements */ 20 --rounding: 11.5px; 21 --big-rounding: 15px; 22 --bigger-rounding: 20px; 23 --giant-rounding: 30px; 24 25 /* animations time */ 26 --trans-dur: 0.25s; 27 28 /* width of some elements. 1vw is one hundredth of the screen width */ 29 --sdbr-wdt: 300px; 30 31 --navbar-wdt: 60vw; 32 33 --findbar-wdt: 70vw; 34 35 /* intensity of blur (new tab) */ 36 --blur-radius: 10px; 37 38 /* brightness of inactive window elements */ 39 --inactive-opct: 0.7; 40 41 /* transparency of indicator bars showing the position of hidden panels */ 42 --hide-bar-opct: 0.2; 43 &:-moz-window-inactive{--hide-bar-opct: 0.1;} 44 45 /* how much shorter these bars than panels */ 46 --hide-bar-wdt-pad: 10px; 47 48 /* size of the panel hitbox outside the window border */ 49 --panel-hide-ldg: 1px; /* f11 fullscreen */ 50 &:not([inFullscreen="true"]){ 51 --panel-hide-ldg: 0px; /* maximized window */ 52 &[sizemode="normal"]:not([titlepreface*=""]){ 53 --panel-hide-ldg: 9px; /* floating window */ 54 } 55 } 56 57 /* colors */ 58 --shadow-col: #00000020; /* color of the translucent outline that imitates a shadow */ 59 --private-col: #6e00bc80; /* private mode outline color */ 60 --debug-col: transparent; /* rgba(0, 0, 255, 0.2); color of hidden panels hover hitboxes */ 61 --debug-col-2: transparent; /* rgba(0, 255, 0, 0.2); color of window dragging hitboxes */ 62 } 63 64 65 /* accent color toggle */ 66 :root{--shy-color: var(--shy-accent-color)} 67 68 @media -moz-pref("shyfox.fill.accent.with.icons.fill.color"){ 69 :root{--shy-color: var(--toolbar-color, var(--shy-accent-color)) !important;} 70 } 71 72 /* 73 74 --- VARIABLES ---------------------------------------------------------------------------------------------------------------------------------- 75 76 Reserved values and all sorts of dynamic variables. You should not touch them. 77 78 */ 79 80 :root{ 81 82 --ActiveCaption: ActiveCaption; 83 84 /* pick browser colors */ /* used for: */ 85 --bg-col: var(--lwt-accent-color, var(--toolbox-bgcolor, Canvas)); /* darker background */ 86 --tb-col: var(--toolbar-bgcolor, var(--toolbar-background-color, Canvas)); /* toolbar */ 87 --bt-col: var(--toolbar-color, var(--lwt-text-color, CanvasText)); /* text/icons */ 88 --pp-col: var(--arrowpanel-background, var(--panel-background, Canvas)); /* popup */ 89 90 /* dynamic opacity */ 91 --dyn-opct: 1; 92 &:-moz-window-inactive{--dyn-opct: var(--inactive-opct);} 93 94 /* shared shortcuts for commonly used parameters */ 95 --outline: 1px solid var(--pp-col); /* outline around almost anything */ 96 --shadow: 2px solid var(--shadow-col); /* translucent outline that imitates a shadow */ 97 --transition: top var(--trans-dur) ease-out, left var(--trans-dur) ease-out, 98 right var(--trans-dur) ease-out, bottom var(--trans-dur) ease-out, 99 margin var(--trans-dur) ease-out, opacity var(--trans-dur) ease-out, 100 background-color var(--trans-dur) ease-out; 101 102 /* constant variables */ 103 --toolbar-item-hgt: 40px; /* height of all panels elements: buttons, urlbar, etc. */ 104 --toolbar-button-wdt: 45px; /* width of all panels buttons */ 105 --hide-bar-padding: 3px; /* how much indicator bars showing the position of hidden panels is thinner than --margin */ 106 --screenshot-tool-hgt: 145px; /* height of `ctrl + shift + s` tool buttons */ 107 108 /* hiding the window border in fullscreen mode and assigning --margin to it in windowed mode */ 109 --left-margin: 0px; 110 --right-margin: 0px; 111 --top-margin: 0px; 112 --bottom-margin: 0px; 113 114 &:not(:is([inFullscreen="true"], [inDOMFullscreen="true"], [titlepreface*=""]:is([sizemode="maximized"], [gtktiledwindow="true"]))){ 115 --left-margin: var(--margin); 116 --right-margin: var(--margin); 117 --top-margin: var(--margin); 118 --bottom-margin: var(--margin); 119 } 120 121 /* hide indication bars in fullscreen or clean mode */ 122 &:is([inFullscreen="true"], [inDOMFullscreen="true"], [titlepreface*=""]){ 123 --hide-bar-opct: 0 !important; 124 } 125 126 /* override built-in roundings with custom */ 127 --arrowpanel-border-radius: var(--big-rounding) !important; 128 --panel-border-radius: var(--big-rounding) !important; 129 130 --arrowpanel-menuitem-border-radius: var(--rounding) !important; 131 --toolbarbutton-border-radius: var(--rounding) !important; 132 --button-border-radius: var(--rounding) !important; 133 --border-radius-small: var(--rounding) !important; 134 --tab-border-radius: var(--rounding) !important; 135 136 /* override one padding in navbar to match style */ 137 --toolbar-start-end-padding: calc(var(--margin) / 2) !important; 138 139 /* fix bookmark toolbar */ 140 --bookmarks-toolbar-overlapping-browser-height: 0px !important; 141 } 142 143 /* current tab loading progress */ 144 #main-window{ 145 &:has(.tabbrowser-tab[selected][busy] ){--shy-tab-load-pcent: 20%;} 146 &:has(.tabbrowser-tab[selected][busy][pendingicon] ){--shy-tab-load-pcent: 50%;} 147 &:has(.tabbrowser-tab[selected][busy][pendingicon][progress] ){--shy-tab-load-pcent: 85%;} 148 &:has(.tabbrowser-tab[selected][busy][progress] ){--shy-tab-load-pcent: 95%;} 149 } 150 151 /* globalise download percentages (yes, i am a clown) */ 152 #main-window{ 153 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 0%;"]){--shy-download-pcent: 0%;} 154 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 1%;"]){--shy-download-pcent: 1%;} 155 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 2%;"]){--shy-download-pcent: 2%;} 156 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 3%;"]){--shy-download-pcent: 3%;} 157 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 4%;"]){--shy-download-pcent: 4%;} 158 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 5%;"]){--shy-download-pcent: 5%;} 159 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 6%;"]){--shy-download-pcent: 6%;} 160 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 7%;"]){--shy-download-pcent: 7%;} 161 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 8%;"]){--shy-download-pcent: 8%;} 162 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 9%;"]){--shy-download-pcent: 9%;} 163 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 10%;"]){--shy-download-pcent: 10%;} 164 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 11%;"]){--shy-download-pcent: 11%;} 165 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 12%;"]){--shy-download-pcent: 12%;} 166 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 13%;"]){--shy-download-pcent: 13%;} 167 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 14%;"]){--shy-download-pcent: 14%;} 168 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 15%;"]){--shy-download-pcent: 15%;} 169 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 16%;"]){--shy-download-pcent: 16%;} 170 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 17%;"]){--shy-download-pcent: 17%;} 171 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 18%;"]){--shy-download-pcent: 18%;} 172 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 19%;"]){--shy-download-pcent: 19%;} 173 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 20%;"]){--shy-download-pcent: 20%;} 174 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 21%;"]){--shy-download-pcent: 21%;} 175 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 22%;"]){--shy-download-pcent: 22%;} 176 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 23%;"]){--shy-download-pcent: 23%;} 177 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 24%;"]){--shy-download-pcent: 24%;} 178 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 25%;"]){--shy-download-pcent: 25%;} 179 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 26%;"]){--shy-download-pcent: 26%;} 180 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 27%;"]){--shy-download-pcent: 27%;} 181 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 28%;"]){--shy-download-pcent: 28%;} 182 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 29%;"]){--shy-download-pcent: 29%;} 183 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 30%;"]){--shy-download-pcent: 30%;} 184 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 31%;"]){--shy-download-pcent: 31%;} 185 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 32%;"]){--shy-download-pcent: 32%;} 186 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 33%;"]){--shy-download-pcent: 33%;} 187 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 34%;"]){--shy-download-pcent: 34%;} 188 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 35%;"]){--shy-download-pcent: 35%;} 189 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 36%;"]){--shy-download-pcent: 36%;} 190 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 37%;"]){--shy-download-pcent: 37%;} 191 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 38%;"]){--shy-download-pcent: 38%;} 192 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 39%;"]){--shy-download-pcent: 39%;} 193 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 40%;"]){--shy-download-pcent: 40%;} 194 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 41%;"]){--shy-download-pcent: 41%;} 195 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 42%;"]){--shy-download-pcent: 42%;} 196 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 43%;"]){--shy-download-pcent: 43%;} 197 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 44%;"]){--shy-download-pcent: 44%;} 198 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 45%;"]){--shy-download-pcent: 45%;} 199 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 46%;"]){--shy-download-pcent: 46%;} 200 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 47%;"]){--shy-download-pcent: 47%;} 201 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 48%;"]){--shy-download-pcent: 48%;} 202 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 49%;"]){--shy-download-pcent: 49%;} 203 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 50%;"]){--shy-download-pcent: 50%;} 204 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 51%;"]){--shy-download-pcent: 51%;} 205 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 52%;"]){--shy-download-pcent: 52%;} 206 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 53%;"]){--shy-download-pcent: 53%;} 207 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 54%;"]){--shy-download-pcent: 54%;} 208 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 55%;"]){--shy-download-pcent: 55%;} 209 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 56%;"]){--shy-download-pcent: 56%;} 210 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 57%;"]){--shy-download-pcent: 57%;} 211 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 58%;"]){--shy-download-pcent: 58%;} 212 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 59%;"]){--shy-download-pcent: 59%;} 213 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 60%;"]){--shy-download-pcent: 60%;} 214 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 61%;"]){--shy-download-pcent: 61%;} 215 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 62%;"]){--shy-download-pcent: 62%;} 216 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 63%;"]){--shy-download-pcent: 63%;} 217 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 64%;"]){--shy-download-pcent: 64%;} 218 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 65%;"]){--shy-download-pcent: 65%;} 219 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 66%;"]){--shy-download-pcent: 66%;} 220 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 67%;"]){--shy-download-pcent: 67%;} 221 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 68%;"]){--shy-download-pcent: 68%;} 222 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 69%;"]){--shy-download-pcent: 69%;} 223 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 70%;"]){--shy-download-pcent: 70%;} 224 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 71%;"]){--shy-download-pcent: 71%;} 225 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 72%;"]){--shy-download-pcent: 72%;} 226 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 73%;"]){--shy-download-pcent: 73%;} 227 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 74%;"]){--shy-download-pcent: 74%;} 228 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 75%;"]){--shy-download-pcent: 75%;} 229 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 76%;"]){--shy-download-pcent: 76%;} 230 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 77%;"]){--shy-download-pcent: 77%;} 231 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 78%;"]){--shy-download-pcent: 78%;} 232 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 79%;"]){--shy-download-pcent: 79%;} 233 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 80%;"]){--shy-download-pcent: 80%;} 234 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 81%;"]){--shy-download-pcent: 81%;} 235 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 82%;"]){--shy-download-pcent: 82%;} 236 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 83%;"]){--shy-download-pcent: 83%;} 237 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 84%;"]){--shy-download-pcent: 84%;} 238 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 85%;"]){--shy-download-pcent: 85%;} 239 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 86%;"]){--shy-download-pcent: 86%;} 240 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 87%;"]){--shy-download-pcent: 87%;} 241 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 88%;"]){--shy-download-pcent: 88%;} 242 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 89%;"]){--shy-download-pcent: 89%;} 243 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 90%;"]){--shy-download-pcent: 90%;} 244 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 91%;"]){--shy-download-pcent: 91%;} 245 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 92%;"]){--shy-download-pcent: 92%;} 246 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 93%;"]){--shy-download-pcent: 93%;} 247 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 94%;"]){--shy-download-pcent: 94%;} 248 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 95%;"]){--shy-download-pcent: 95%;} 249 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 96%;"]){--shy-download-pcent: 96%;} 250 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 97%;"]){--shy-download-pcent: 97%;} 251 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 98%;"]){--shy-download-pcent: 98%;} 252 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 99%;"]){--shy-download-pcent: 99%;} 253 &:has(#downloads-indicator-progress-inner[style="--download-progress-pcent: 100%;"]){--shy-download-pcent: 100%;} 254 }