shy-controls.css (9665B)
1 /*== ShyFox Window Controls ========================================================================================================================= 2 3 Styles for Min Max Close buttons 4 5 6 --- JUST IMPORTANT THINGS --------------------------------------------------------------------------------------------------------------------------- 7 8 */ 9 10 /* move buttons to correct position */ 11 #TabsToolbar .titlebar-buttonbox-container{ display: none !important; } 12 #toolbar-menubar .titlebar-buttonbox-container{ display: flex !important; } 13 14 .titlebar-buttonbox-container{ 15 position: fixed !important; 16 overflow: clip !important; 17 18 z-index: -1 !important; 19 20 transition: var(--transition) !important; 21 & *{transition: var(--transition) !important;} 22 23 /* set position to right */ 24 right: 0px; 25 top: 8px; 26 } 27 28 /* 29 30 --- VARIABLES ---------------------------------------------------------------------------------------------------------------------------------- 31 32 */ 33 34 /* paddings */ 35 :root{ 36 --buttonbox-right-wdt: var(--window-control-wdt); 37 --buttonbox-right-hgt: 35px; 38 39 --buttonbox-left-wdt: 0px; 40 --buttonbox-left-hgt: 0px; 41 } 42 43 /* useful variables */ 44 :root{ 45 --nav-rgt-btnbx-margin: var(--margin); 46 --nav-rgt-btnbx-button: var(--toolbar-button-wdt); 47 48 --nav-lft-btnbx-margin: 0px; 49 --nav-lft-btnbx-button: 0px; 50 } 51 52 /* remove window controls in f11 fullscreen or in clean mode */ 53 #main-window:is([sizemode="fullscreen"], [titlepreface*=""]:not([customizing])) { 54 --window-control-wdt: 0px !important; /* < */ 55 --buttonbox-left-hgt: 0px !important; /* < !DUPLICATE! */ 56 --buttonbox-right-hgt: 0px !important; /* < */ 57 --nav-rgt-btnbx-margin: 0px !important; /* < This code block must be */ 58 --nav-rgt-btnbx-button: 0px !important; /* < identical to the */ 59 --nav-lft-btnbx-margin: 0px !important; /* < code block below */ 60 --nav-lft-btnbx-button: 0px !important; /* < */ 61 .titlebar-buttonbox-container {display: none !important;} /* < vvvvvvvvvvvvvvvvvvvvvvvvvvv */ 62 } 63 64 /* remove window controls by setting */ 65 @media -moz-pref("shyfox.remove.window.controls") { 66 #main-window{ 67 --window-control-wdt: 0px !important; /* < ^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ 68 --buttonbox-left-hgt: 0px !important; /* < */ 69 --buttonbox-right-hgt: 0px !important; /* < !DUPLICATE! */ 70 --nav-rgt-btnbx-margin: 0px !important; /* < */ 71 --nav-rgt-btnbx-button: 0px !important; /* < This code block must be */ 72 --nav-lft-btnbx-margin: 0px !important; /* < identical to the */ 73 --nav-lft-btnbx-button: 0px !important; /* < code block above */ 74 .titlebar-buttonbox-container {display: none !important;} /* < */ 75 } 76 } 77 78 /* 79 80 --- DETECT SYSTEM AND CALCULATE VALUES ------------------------------------------------------------------------------------------------------------- 81 82 */ 83 84 /* default (if system not detected) */ 85 :root {--window-control-wdt: 140px;} 86 87 /* Windows */ 88 89 @media (-moz-platform: windows) { 90 :root {--window-control-wdt: 138px;} 91 .titlebar-buttonbox-container{ 92 top: 0px; 93 height: var(--toolbar-item-hgt); 94 } 95 96 /* style when not enough space - merged into window border */ 97 #main-window[titlepreface*=""][titlepreface*=""] { 98 .titlebar-button {padding: calc(var(--margin) / 2) 15px !important;} 99 .titlebar-buttonbox-container{ 100 height: var(--margin) !important; 101 top: 0px; 102 opacity: calc(var(--hide-bar-opct) / 2 ); 103 &:hover{opacity: 1} 104 } 105 } 106 107 /* style when right toolbar is visible but navbar hidden - vertical orientation */ 108 #main-window:not([titlepreface*=""])[titlepreface*=""]:not([customizing]){ 109 .titlebar-buttonbox-container{height: 85px} 110 .titlebar-buttonbox{ 111 display: flex; 112 flex-direction: column-reverse; 113 } 114 115 --buttonbox-left-wdt: 0px !important; 116 --buttonbox-right-hgt: 85px; 117 } 118 } 119 120 /* Linux (GTK) */ 121 122 :root{ 123 --window-control-gtk-max-wdt: 0px; 124 --window-control-gtk-min-wdt: 0px; 125 } 126 127 @media (-moz-gtk-csd-maximize-button) { :root {--window-control-gtk-max-wdt: 40px;} } 128 @media (-moz-gtk-csd-minimize-button) { :root {--window-control-gtk-min-wdt: 40px;} } 129 130 @media (-moz-gtk-csd-available) { 131 :root { 132 --window-control-wdt: calc( 133 40px 134 + var(--window-control-gtk-min-wdt) 135 + var(--window-control-gtk-max-wdt) 136 ); 137 } 138 139 /* GTK buttons design */ 140 .titlebar-button{ 141 .toolbarbutton-icon { 142 background-image: none !important; 143 stroke: none !important; 144 -moz-context-properties: fill, fill-opacity !important; 145 } 146 147 &:hover .toolbarbutton-icon {background-color: color-mix(in srgb, var(--bt-col) 15%, transparent) !important;} 148 149 margin-inline: 8px !important; 150 padding: 0 !important; 151 fill: var(--bt-col) !important; 152 color: var(--bt-col) !important; 153 } 154 155 @media not -moz-pref("shyfox.force.native.controls"){ 156 .titlebar-close {list-style-image: url("../icons/gtk-window-close-symbolic.svg") !important;} 157 .titlebar-min {list-style-image: url("../icons/gtk-window-minimize-symbolic.svg") !important;} 158 .titlebar-max {list-style-image: url("../icons/gtk-window-maximize-symbolic.svg") !important;} 159 .titlebar-restore {list-style-image: url("../icons/gtk-window-restore-symbolic.svg") !important;} 160 161 .titlebar-button .toolbarbutton-icon{ 162 background-color: color-mix(in srgb, var(--bt-col) 5%, transparent); 163 appearance: none !important; 164 border-radius: 100%; 165 padding: 4px !important; 166 } 167 } 168 169 @media -moz-pref("shyfox.force.native.controls"){ 170 .titlebar-close {appearance: -moz-window-button-close !important;} 171 .titlebar-min {appearance: -moz-window-button-minimize !important;} 172 .titlebar-max {appearance: -moz-window-button-maximize !important;} 173 .titlebar-restore {appearance: -moz-window-button-restore !important;} 174 } 175 } 176 177 /* if GTK buttons position is right */ 178 @media (-moz-gtk-csd-available){ 179 @media not (-moz-gtk-csd-reversed-placement){ 180 181 .titlebar-buttonbox-container{padding-right: 4px} 182 183 /* style when not enough space - merged into window border */ 184 #main-window:is([titlepreface*=""][titlepreface*=""], [titlepreface*=""]):not([customizing]){ 185 .titlebar-buttonbox-container{ 186 opacity: calc(var(--hide-bar-opct) / 2 ); 187 &:hover{opacity: 1}; 188 right: 5px; 189 } 190 191 .titlebar-button {margin: 0px !important;} 192 193 @media not -moz-pref("shyfox.force.native.controls"){ 194 .titlebar-buttonbox-container{ 195 top: 0px; 196 height: var(--margin); 197 } 198 199 .titlebar-button .toolbarbutton-icon {border-radius: 0 !important;} 200 } 201 202 @media -moz-pref("shyfox.force.native.controls"){ 203 .titlebar-buttonbox-container{ 204 top: -6px; 205 height: calc(var(--margin) + 6px); 206 } 207 } 208 } 209 210 /* style when right toolbar is visible but navbar hidden - vertical orientation */ 211 #main-window:not([titlepreface*=""])[titlepreface*=""]:not([customizing]){ 212 213 .titlebar-buttonbox{ 214 display: flex; 215 flex-direction: column-reverse; 216 top: -6px; 217 218 & * { 219 margin-top: 3px !important; 220 margin-bottom: 3px !important; 221 } 222 } 223 224 --buttonbox-right-wdt: 0px !important; 225 --buttonbox-right-hgt: calc( 226 35px 227 + var(--window-control-gtk-max-wdt) 228 + var(--window-control-gtk-min-wdt) 229 ); 230 } 231 } 232 } 233 234 /* MacOS */ 235 @media (-moz-platform: macos){ 236 :root {--window-control-wdt: 72px;} 237 } 238 239 /* 240 --- CONTROLS ON LEFT --------------------------------------------------------------------------------------------------------------------------- 241 242 Styles when GTK window controls on left or system is MacOS 243 244 */ 245 246 @media (-moz-gtk-csd-reversed-placement), (-moz-platform: macos){ 247 :root{ 248 --buttonbox-right-wdt: 0px; 249 --buttonbox-right-hgt: 0px; 250 251 --buttonbox-left-wdt: var(--window-control-wdt); 252 --buttonbox-left-hgt: 35px; 253 254 --nav-rgt-btnbx-margin: 0px; 255 --nav-rgt-btnbx-button: 0px; 256 257 --nav-lft-btnbx-margin: var(--margin); 258 --nav-lft-btnbx-button: var(--toolbar-button-wdt); 259 } 260 261 .titlebar-buttonbox-container{padding-left: 3px} 262 263 /* set position to left */ 264 .titlebar-buttonbox-container{ 265 left: 0px; 266 right: auto !important; 267 } 268 269 /* style when not enough space - merged into window border */ 270 #main-window:is([titlepreface*=""][titlepreface*=""], [titlepreface*=""]):not([customizing]){ 271 .titlebar-buttonbox-container{ 272 opacity: calc(var(--hide-bar-opct) / 2 ); 273 &:hover{opacity: 1}; 274 left: 5px; 275 } 276 277 .titlebar-button {margin: 0px !important;} 278 279 @media not -moz-pref("shyfox.force.native.controls"){ 280 .titlebar-buttonbox-container{ 281 top: 0px; 282 height: var(--margin); 283 } 284 285 .titlebar-button .toolbarbutton-icon {border-radius: 0 !important;} 286 } 287 288 @media -moz-pref("shyfox.force.native.controls"){ 289 .titlebar-buttonbox-container{ 290 top: -6px; 291 height: calc(var(--margin) + 6px); 292 } 293 } 294 } 295 }