1// Shadows 2$shadow_0: 0px 1px 2px 0px rgba(16, 16, 16, 0.1), 0px 2px 2px 0px rgba(16, 16, 16, 0.05); // Slider hover shadow 3$shadow_1: 0px 1px 1px 0px rgba(16, 16, 16, 0.12), 0px 1px 2px 0px rgba(16, 16, 16, 0.06); // Header-button shadow 4$shadow_2: 0px 1px 1px 0px rgba(16, 16, 16, 0.1), 0px 1px 2px 0px rgba(16, 16, 16, 0.05); // Slider normal shadow 5$shadow_3: 0px 1px 1px 0px rgba(16, 16, 16, 0.04), 0px 1px 2px 0px rgba(16, 16, 16, 0.01); // Normal button shadow 6$shadow_4: 0px 2px 3px 0px rgba(16, 16, 16, 0.2), 0px 3px 5px 0px rgba(16, 16, 16, 0.15); // Switch-slider hover shadow 7$shadow_5: 0px 1px 2px 0px rgba(16, 16, 16, 0.15), 0px 2px 3px 0px rgba(16, 16, 16, 0.1); // Switch-slider normal shadow 8$text_shadow: 0 -1px rgba(#ffffff, 0.04), -1px 0px rgba(#202020, 0.05), 1px 0px rgba(#202020, 0.05), 9 0px 1px rgba(#202020, 0.3), 0px 2px rgba(#202020, 0.05); // text and icon shadow 10 11// Transitions 12$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); 13$transition_1: all 0.2s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1); 14$transition_2: all 0.1s cubic-bezier(0, 0, 0.2, 1); 15$shadow_transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1); 16$button_transition: all 100ms $ease-out-quad; 17$backdrop_transition: 200ms ease-out; 18 19// Animations 20$switch_animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1); 21 22@keyframes switch_ripple_effect { 23 from { 24 background-image: radial-gradient(circle farthest-corner at center, 25 $success_color 0%, 26 transparent 0%); 27 } 28 29 to { 30 background-image: radial-gradient(circle farthest-corner at center, 31 $success_color 100%, 32 transparent 0%); 33 } 34} 35 36@keyframes header_ripple_effect { 37 from { 38 background-image: radial-gradient(circle farthest-corner at center, 39 $header_bg 0%, 40 transparent 0%); 41 } 42 43 to { 44 background-image: radial-gradient(circle farthest-corner at center, 45 $header_bg 100%, 46 transparent 0%); 47 } 48} 49 50// Drawing mixins 51 52// Solid color image 53@function _solid($c) { 54 @return linear-gradient(to bottom, $c, $c); 55} 56 57// Entries 58 59@mixin entry($t) { 60// 61// Entries drawing function 62// 63// $t: entry type 64// 65 66 @if $t==normal { 67 // 68 // normal entry 69 // 70 color: $text_color; 71 border-color: $entry_border; 72 background-color: $entry_bg; 73 @if $variant == 'light' { box-shadow: $shadow_3, inset 0 0 0 1px rgba($borders_color, 0.01); } 74 } 75 76 @if $t==focus { 77 // 78 // focused entry 79 // 80 color: $text_color; 81 border-color: $entry_highlight; 82 background-color: $entry_bg; 83 @if $variant == 'dark' {box-shadow: inset 0 0 0 2px $entry_highlight; } 84 @if $variant == 'light' { box-shadow: 0px 1px 1px 0px transparent, 85 0px 1px 2px 0px transparent, // set the same size transparent shadow for entry transition 86 inset 0 0 0 2px $entry_highlight; } 87 } 88 89 @if $t==insensitive { 90 // 91 // insensitive entry 92 // 93 color: $insensitive_fg_color; 94 border-color: $entry_border; 95 background-color: transparentize($entry_bg, 0.45); 96 } 97 98 @if $t==header-normal { 99 // 100 // normal header-bar entry 101 // 102 @if $variant == 'dark' { border: none; } 103 color: $header_fg; 104 background-color: $header_button_bg; 105 background-image: if($variant=='light', linear-gradient( 0deg, #f1f1f1 0%, #fdfdfd 95%, #fefefe 100%), none); 106 107 image, image:hover { color: inherit; } 108 } 109 110 @if $t==header-focus { 111 // 112 // focused header-bar entry 113 // 114 @if $variant == 'dark' { border: none; box-shadow: 0 0 0 2px $entry_highlight, inset 0 0 0 1px $entry_highlight; } 115 @if $variant == 'light' and $compact == 'false' { box-shadow: 0 0 0 2px $entry_highlight; border-color: $entry_highlight; } 116 @if $variant == 'light' and $compact == 'true' { box-shadow: 0 0 0 2px $entry_highlight; } 117 background-image: none; 118 } 119 120 @if $t==header-insensitive { 121 // 122 // insensitive header-bar entry 123 // 124 125 color: transparentize($header_fg, 0.45); 126 background-color: transparentize($header_entry_bg, 0.15); 127 } 128 129 @else if $t==osd { 130 // 131 // normal osd entry 132 // 133 color: $osd_fg_color; 134 border-color: $osd_entry_border; 135 background-color: $osd_entry_bg; 136 137 image, image:hover { color: inherit; } 138 } 139 140 @else if $t==osd-focus { 141 // 142 // active osd entry 143 // 144 color: $selected_fg_color; 145 border-color: $osd_entry_border; 146 background-color: $selected_bg_color; 147 } 148 149 @else if $t==osd-insensitive { 150 // 151 // insensitive osd entry 152 // 153 color: $osd_fg_color; 154 background-color: transparentize($osd_entry_bg, 0.15); 155 } 156} 157 158// Buttons 159 160@mixin button($t, $actionb_bg:red, $actionb_fg: green) { 161// 162// Button drawing function 163// 164// $t: button type, 165// $actionb_bg, $actionb_fg: used for destructive and suggested action buttons 166 167 @if $t==normal { 168 // 169 // normal button 170 // 171 color: $fg_color; 172 border-color: $button_border; 173 background-color: $button_bg; 174 @if $variant=='light' { box-shadow: $shadow_3, inset 0 0 0 1px rgba($borders_color, 0.01); } 175 } 176 177 @else if $t==hover { 178 // 179 // hovered button 180 // 181 color: darken($fg_color, 10%); 182 border-color: $borders_color; 183 background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 8%)); 184 box-shadow: none; 185 } 186 187 @else if $t==active { 188 // 189 // pushed button 190 // 191 color: $selected_fg_color; 192 background-color: $selection_mode_bg; 193 border-color: $selection_mode_bg; 194 background-image: linear-gradient( 180deg, #4c97fe 0%, #0564e3 100%); 195 box-shadow: none; 196 } 197 198 @else if $t==insensitive { 199 // 200 // insensitive button 201 // 202 label, & { color: $insensitive_fg_color; } 203 204 border-color: $button_border; 205 background-color: transparentize($button_bg, 0.45); 206 box-shadow: $shadow_3; 207 } 208 209 @else if $t==insensitive-active { 210 // 211 // insensitive pushed button 212 // 213 label, & { color: transparentize($selected_fg_color, 0.2); } 214 215 border-color: transparentize($selected_bg_color, 0.25); 216 background-color: transparentize($selected_bg_color, 0.25); 217 box-shadow: none; 218 219 opacity: 0.6; 220 } 221 222 @if $t==flat-normal { 223 // 224 // normal button 225 // 226 border: none; 227 background-color: transparent; 228 box-shadow: none; 229 } 230 231 @else if $t==flat-hover { 232 // 233 // hovered button 234 // 235 color: darken($fg_color, 10%); 236 background-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15)); 237 border-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15)); 238 } 239 240 @else if $t==flat-active { 241 // 242 // pushed button 243 // 244 background-image: none; 245 color: $selected_fg_color; 246 background-color: if($variant=='light', rgba(black, 0.5), rgba(white, 0.25)); 247 text-shadow: if($variant=='light', $text_shadow, none); 248 -gtk-icon-shadow: if($variant=='light', $text_shadow, none); 249 } 250 251 @else if $t==flat-checked { 252 // 253 // pushed button 254 // 255 background-image: none; 256 color: $selected_fg_color; 257 background-color: if($variant=='light', rgba(black, 0.65), rgba(white, 0.35)); 258 text-shadow: if($variant=='light', $text_shadow, none); 259 -gtk-icon-shadow: if($variant=='light', $text_shadow, none); 260 } 261 262 @else if $t==flat-insensitive { 263 // 264 // insensitive button 265 // 266 label, & { color: $insensitive_fg_color; } 267 268 background-color: transparent; 269// border: none; 270 } 271 272 @else if $t==flat-insensitive-active { 273 // 274 // insensitive pushed button 275 // 276 label, & { color: transparentize($selected_fg_color, 0.2); } 277 278 background-color: lighten($fg_color, 20%); 279 border-color: lighten($fg_color, 20%); 280 opacity: 0.6; 281 } 282 283 @if $t==header-normal { 284 // 285 // normal header-bar button 286 // 287 border-color: $borders_color; 288 color: $header_fg; 289 background-color: $header_button_bg; 290 background-image: if($variant == 'light', linear-gradient( 0deg, #f1f1f1 0%, #fdfdfd 95%, #fefefe 100%), none); 291 box-shadow: $shadow_3; 292 293 @if $variant == 'dark' { border: none; } 294 295 } 296 297 @else if $t==header-hover { 298 // 299 // hovered header-bar button 300 // 301 border-color: $borders_color; 302 color: darken($header_fg, 2%); 303 background-color: $header_button_hover_bg; 304 background-image: if($variant == 'light', linear-gradient( 0deg, #f8f8f8 0%, #ffffff 100%), none); 305 box-shadow: none; 306 } 307 308 @else if $t==header-active { 309 // 310 // pushed header-bar button 311 // 312 color: $selected_fg_color; 313 background-color: $header_button_active_bg; 314 background-image: none; 315 border-color: $borders_color; 316 text-shadow: if($variant == 'light', $text_shadow, none); 317 -gtk-icon-shadow: if($variant == 'light', $text_shadow, none); 318 box-shadow: none; 319 } 320 321 @else if $t==header-checked { 322 // 323 // pushed header-bar button 324 // 325 color: $selected_fg_color; 326 background-color: $header_button_checked_bg; 327 background-image: if($variant == 'light', linear-gradient( 0deg, #656565 0%, #707070 100%), none); 328 border-color: $borders_color; 329 border-top-color: if($variant == 'light', lighten($borders_color, 0%), $borders_color); 330 border-bottom-color: if($variant == 'light', lighten($borders_color, 0%), $borders_color); 331 text-shadow: if($variant == 'light', $text_shadow, none); 332 -gtk-icon-shadow: if($variant == 'light', $text_shadow, none); 333 box-shadow: none; 334 } 335 336 @else if $t==header-insensitive { 337 // 338 // insensitive header-bar button 339 // 340 label, & { color: transparentize($header_fg, 0.45); } 341 342 background-color: $header_button_bg; 343 box-shadow: $shadow_3; 344 } 345 346 @else if $t==header-insensitive-active { 347 // 348 // header-bar insensitive pushed button 349 // 350 color: transparentize($selected_fg_color, 0.25); 351 background-color: transparentize($header_button_active_bg, 0.35); 352 box-shadow: $shadow_3; 353 } 354 355 @else if $t==osd { 356 // 357 // normal osd button 358 // 359 color: $osd_fg_color; 360 border-color: $osd_button_border; 361 background-color: $osd_button_bg; 362 } 363 364 @else if $t==osd-hover { 365 // 366 // active osd button 367 // 368 color: $osd_fg_color; 369 border-color: $osd_button_border; 370 background-color: opacify(lighten($osd_button_bg, 7%), 0.1); 371 } 372 373 @else if $t==osd-active { 374 // 375 // active osd button 376 // 377 color: $selected_fg_color; 378 border-color: $osd_button_border; 379 background-color: $selected_bg_color; 380 } 381 382 @else if $t==osd-insensitive { 383 // 384 // insensitive osd button 385 // 386 color: $osd_insensitive_fg_color; 387 border-color: $osd_button_border; 388 background-color: transparentize($osd_button_bg, 0.15); 389 } 390 391 @else if $t==suggested_destructive { 392 // 393 // suggested or destructive action buttons 394 // 395 background-clip: border-box; 396 397 color: $actionb_fg; 398 background-color: $actionb_bg; 399 border-color: darken($actionb_bg, 10%); 400 background-image: none; 401// box-shadow: none; 402 } 403 404 @else if $t==undecorated { 405 // 406 // reset 407 // 408 border-color: transparent; 409 background-color: transparent; 410 background-image: none; 411 box-shadow: none; 412 } 413} 414 415// 416// Overshoot 417// 418@mixin overshoot($p, $c:$selected_bg_color) { 419// $p: position 420// $c: base color 421// 422// possible $p values: 423// top, bottom, right, left 424// 425 426 $_big_gradient_length: 60%; 427 428 $_position: center top; 429 $_big_gradient_size: 100% $_big_gradient_length; 430 431 @if $p==bottom { 432 $_position: center bottom; 433 } 434 435 @else if $p==right { 436 $_position: right center; 437 $_big_gradient_size: $_big_gradient_length 100%; 438 } 439 440 @else if $p==left { 441 $_position: left center; 442 $_big_gradient_size: $_big_gradient_length 100%; 443 } 444 445 background-image: -gtk-gradient(radial, 446 $_position, 0, 447 $_position, 0.6, 448 from(transparentize($c, 0.8)), 449 to(transparentize($c, 1))); 450 451 background-size: $_big_gradient_size; 452 background-repeat: no-repeat; 453 background-position: $_position; 454 455 background-color: transparent; // reset some properties to be sure to not inherit them somehow 456 border: none; // 457 box-shadow: none; // 458} 459 460// 461// Undershoot 462// 463@mixin undershoot($p) { 464// $p: position 465// 466// possible $p values: 467// top, bottom, right, left 468// 469 470 $_undershoot_color_dark: transparentize(black, 0.8); 471 $_undershoot_color_light: transparentize(white, 0.8); 472 473 $_gradient_dir: left; 474 $_dash_bg_size: 10px 1px; 475 $_gradient_repeat: repeat-x; 476 $_bg_pos: center $p; 477 478 background-color: transparent; // shouldn't be needed, but better to be sure; 479 480 @if ($p == left) or ($p == right) { 481 $_gradient_dir: top; 482 $_dash_bg_size: 1px 10px; 483 $_gradient_repeat: repeat-y; 484 $_bg_pos: $p center; 485 } 486 487 background-image: linear-gradient(to $_gradient_dir, // this is the dashed line 488 $_undershoot_color_light 50%, 489 $_undershoot_color_dark 50%); 490 491 padding-#{$p}: 1px; 492 background-size: $_dash_bg_size; 493 background-repeat: $_gradient_repeat; 494 background-origin: content-box; 495 background-position: $_bg_pos; 496 border: none; 497} 498