1$corner-radius: 2px; 2 3 4/* GLOBALS */ 5$font-size: 10; 6$_bubble_bg_color: $osd_bg_color; 7$_bubble_fg_color: $fg_color; 8$_bubble_borders_color: $fg_color; 9$_bubble_transparent: transparentize($osd_bg_color, 0.17); 10$topbar_bg_color: transparentize($dracula,0); 11 12stage { 13 @include fontsize($font-size); 14 color: $fg_color; 15} 16 17/* WIDGETS */ 18 19/* Buttons */ 20.button { 21 @include button(normal); 22 border-radius: 4px; 23 border-width: 0; 24 padding: 4px 32px; 25 &:focus { @include button(focus); } 26 &:insensitive { @include button(insensitive); } 27 &:active { @include button(active); } 28 &:hover { 29 @include button(hover); 30 } 31} 32 33.modal-dialog-linked-button { 34 padding: 10px; 35 border: 1px solid $borders_color; 36 color: $fg_color; 37 background: $main_dark; 38 text-shadow: none; 39 icon-shadow: none; 40 box-shadow: none; 41 &:insensitive { @include button(insensitive); } 42 &:active { 43 @include button(active); 44 } 45 &:focus { 46 @include button(focus); 47 &:hover { 48 @include button(focus); 49 } 50 } 51 &:hover { 52 @include button(hover); 53 } 54 55 &:first-child { border-radius: 0px 0px 0px 2px; } 56 &:last-child { border-radius: 0px 0px 2px 0px; } 57 &:first-child:last-child { border-radius: 0px 0px 2px 2px; } 58} 59 60/* Entries */ 61StEntry { 62 @include entry(normal); 63 border-radius: 2px; 64 padding: 4px; 65 border-width: 0; 66 color: $fg_color; 67 //&:hover { @include entry(hover);} 68 &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));} 69 &:insensitive { @include entry(insensitive);} 70 selection-background-color: $selected_bg_color; 71 selected-color: $selected_fg_color; 72 StIcon.capslock-warning { 73 icon-size: 16px; 74 warning-color: $warning_color; 75 padding: 0 4px; 76 } 77 78 StLabel.hint-text { color: transparentize($fg_color, 0.3); } 79 80} 81 82 83/* Scrollbars */ 84 85StScrollView { 86 &.vfade { -st-vfade-offset: 68px; } 87 &.hfade { -st-hfade-offset: 68px; } 88} 89 90StScrollBar { 91 padding: 0; 92 93 StScrollView & { 94 min-width: 14px; 95 min-height: 14px; 96 } 97 98 StBin#trough { 99 border-radius: 0; 100 background-color: transparent; 101 } 102 103 StButton#vhandle, StButton#hhandle { 104 border-radius: 8px; 105 background-color: mix($fg_color, $bg_color, 20%); 106 //border: 3px solid transparent; //would be nice to margin or at least to transparent 107 margin: 3px; 108 &:hover { background-color: mix($fg_color, $bg_color, 80%); } 109 &:active { background-color: $selected_bg_color; } 110 } 111} 112 113/* Slider */ 114 115.slider { 116 height: 1em; 117 color: $selected_fg_color; 118 border-color: black; 119 -slider-height: 0.3em; 120 -slider-background-color: $gray; //background of the trough 121 -slider-border-color: black; //trough border color 122 -slider-active-background-color: $selected_bg_color; //active trough fill 123 -slider-active-border-color: $lime; //active trough border 124 -slider-border-width: 0; 125 -slider-handle-radius: 6px; 126 127 -barlevel-height: 0.3em; 128 -barlevel-background-color: $gray; 129 -barlevel-border-color: black; 130 -barlevel-active-background-color: $selected_bg_color; 131 -barlevel-active-border-color: $lime; 132 -barlevel-border-width: 0; 133 -barlevel-handle-radius: 6px; 134 -barlevel-overdrive-color: $selected_bg_color; 135 -barlevel-overdrive-border-color: transparent; 136 -barlevel-overdrive-separator-width: 0px; 137} 138 139/* Check Boxes */ 140 141.check-box { 142 StBoxLayout { spacing: .8em; } 143 StBin { 144 width: 24px; 145 height: 22px; 146 background-image: url("assets/checkbox-off.svg"); 147 } 148 &:focus, &:hover StBin { 149 background-image: url("assets/checkbox-off-focused.svg"); 150 } 151 &:checked StBin { background-image: url("assets/checkbox.svg"); } 152 &:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); } 153} 154 155/* Switches */ 156.toggle-switch { 157 width: 65px; 158 height: 22px; 159 background-size: contain; 160 //Gnome 3.32// 161 background-image: url("assets/toggle-off.svg"); 162 &:checked { background-image: url("assets/toggle-on.svg"); } 163} 164 165 @each $v in us, intl { 166 .toggle-switch-#{$v} { 167 background-image: url("assets/toggle-off.svg"); 168 &:checked { background-image: url("assets/toggle-on.svg"); } 169 } 170 } 171 172/* links */ 173.shell-link { 174 color: $link_color; 175 &:hover { color: lighten($link_color,10%); } 176} 177 178/* Modal Dialogs */ 179 180.headline { font-size: 110%; } 181.lightbox { background-color: black; } 182.flashspot { background-color: white; } 183 184.modal-dialog { 185 border: none; 186 border-radius: 2px; 187 color: $osd_fg_color; 188 background-color: darken($osd_bg_color,5%); 189 box-shadow: $depth6; 190 191 .modal-dialog-content-box { padding: 24px; } 192 .run-dialog-entry { 193 width: 20em; 194 margin-bottom: 6px; 195 } 196 .run-dialog-error-box { 197 color: $error_color; 198 padding-top: 16px; 199 spacing: 6px; 200 } 201 .run-dialog-button-box { padding-top: 1em; } 202 .run-dialog-label { 203 @include fontsize($font-size + 1.1); 204 font-weight: bold; 205 color: darken($osd_fg_color,10%); 206 padding-bottom: .4em; 207 } 208 209 .run-dialog-description { 210 color: $fg_color; 211 } 212 213} 214 215 .mount-dialog-subject, 216 .end-session-dialog-subject { //this should be a generic header class 217 @include fontsize($font-size * 1.3); 218 } 219 220/* Message Dialog */ 221 .message-dialog-main-layout { 222 padding: 12px 20px 0; 223 spacing: 12px; 224 } 225 226 .message-dialog-content { 227 max-width: 28em; 228 spacing: 20px; 229 } 230 231 .message-dialog-icon { 232 min-width: 48px; 233 icon-size: 48px; 234 } 235 236 .message-dialog-title { 237 font-weight: bold; 238 } 239 240 .message-dialog-subtitle { 241 color: darken($fg_color,40%); 242 font-weight: bold; 243 } 244 245/* End Session Dialog */ 246.end-session-dialog { 247 spacing: 42px; 248 border: none; 249 & .modal-dialog-linked-button:last-child { 250 background: $error_color; 251 &:hover, &:focus { 252 background: lighten($error_color, 3%); 253 color: #fff; 254 } 255 } 256} 257 258 .end-session-dialog-list { 259 padding-top: 20px; 260 } 261 262 .end-session-dialog-layout { 263 padding-left: 17px; 264 &:rtl { padding-right: 17px; } 265 } 266 267 .end-session-dialog-description { 268 width: 28em; 269 padding-bottom: 10px; 270 &:rtl { 271 text-align: right; 272 } 273 } 274 275 .end-session-dialog-warning { 276 width: 28em; 277 color: $warning_color; 278 padding-top: 6px; 279 &:rtl { 280 text-align: right; 281 } 282 } 283 284 .end-session-dialog-logout-icon { 285 //border: 2px solid #8b8b8b; 286 border-radius: 3px; 287 width: 48px; 288 height: 48px; 289 background-size: contain; 290 } 291 292 .end-session-dialog-shutdown-icon { 293 color: $error_color; 294 width: 48px; 295 height: 48px; 296 } 297 298 .end-session-dialog-inhibitor-layout { 299 spacing: 16px; 300 max-height: 200px; 301 padding-right: 65px; 302 padding-left: 65px; 303 } 304 305 .end-session-dialog-session-list, 306 .end-session-dialog-app-list { 307 spacing: 1em; 308 } 309 310 .end-session-dialog-list-header { 311 font-weight: bold; 312 &:rtl { text-align: right; } 313 } 314 315 .end-session-dialog-app-list-item, 316 .end-session-dialog-session-list-item { 317 spacing: 1em; 318 } 319 320 .end-session-dialog-app-list-item-name, 321 .end-session-dialog-session-list-item-name { 322 font-weight: bold; 323 } 324 325 .end-session-dialog-app-list-item-description { 326 color: darken($fg_color,5%); 327 font-size: 10pt; 328 } 329 330/* ShellMountOperation Dialogs */ 331.shell-mount-operation-icon { icon-size: 48px; } 332 333 .mount-dialog { 334 spacing: 24px; 335 336 .message-dialog-title { 337 padding-top: 10px; 338 padding-left: 17px; 339 padding-bottom: 6px; 340 max-width: 34em; 341 } 342 343 .message-dialog-title:rtl { 344 padding-left: 0px; 345 padding-right: 17px; 346 } 347 348 .message-dialog-body { 349 padding-left: 17px; 350 width: 28em; 351 } 352 353 .message-dialog-body:rtl { 354 padding-left: 0px; 355 padding-right: 17px; 356 } 357 } 358 359 .mount-dialog-app-list { 360 max-height: 200px; 361 padding-top: 24px; 362 padding-left: 49px; 363 padding-right: 32px; 364 } 365 366 .mount-dialog-app-list:rtl { 367 padding-right: 49px; 368 padding-left: 32px; 369 } 370 371 .mount-dialog-app-list-item { 372 color: darken($fg_color,10%); 373 &:hover { color: $fg_color; } 374 &:ltr { padding-right: 1em; } 375 &:rtl { padding-left: 1em; } 376 } 377 378 .mount-dialog-app-list-item-icon { 379 &:ltr { padding-right: 17px; } 380 &:rtl { padding-left: 17px; } 381 } 382 383 .mount-dialog-app-list-item-name { 384 font-size: 10pt; 385 } 386 387 388/* Password or Authentication Dialog */ 389 390.prompt-dialog { 391 //this is the width of the entire modal popup 392 width: 34em; 393 border: none; 394 border-radius: 2px; 395 396 .message-dialog-main-layout { spacing: 24px; padding: 10px; } 397 .message-dialog-content { spacing: 16px; } 398 .message-dialog-title { color: darken($osd_fg_color,25%); } 399} 400 401 .prompt-dialog-description:rtl { 402 text-align: right; 403 } 404 405 .prompt-dialog-password-box { 406 spacing: 1em; 407 padding-bottom: 1em; 408 } 409 410 .prompt-dialog-error-label { 411 font-size: 10pt; 412 color: $error_color; 413 padding-bottom: 8px; 414 } 415 416 .prompt-dialog-info-label { 417 font-size: 10pt; 418 padding-bottom: 8px; 419 } 420 421 .hidden { 422 color: rgba(0,0,0,0); 423 } 424 425 .prompt-dialog-null-label { 426 font-size: 10pt; 427 padding-bottom: 8px; 428 } 429 430 431/* Polkit Dialog */ 432 433.polkit-dialog-user-layout { 434 padding-left: 10px; 435 spacing: 10px; 436 &:rtl { 437 padding-left: 0px; 438 padding-right: 10px; 439 } 440} 441 442 .polkit-dialog-user-root-label { 443 color: $warning_color; 444 } 445 446 .polkit-dialog-user-icon { 447 border-radius: 3px; 448 background-size: contain; 449 width: 48px; 450 height: 48px; 451 } 452 453/* Audio selection dialog */ 454.audio-device-selection-dialog { 455 spacing: 30px; 456} 457 458 .audio-selection-content { 459 spacing: 20px; 460 padding: 24px; 461 } 462 463 .audio-selection-title { 464 font-weight: bold; 465 text-align: center; 466 } 467 468 .audio-selection-box { 469 spacing: 20px; 470 } 471 472 .audio-selection-device { 473 border: 1px solid $_bubble_borders_color; 474 border-radius: 12px; 475 &:active,&:hover,&:focus { background-color: $selected_bg_color; } 476 } 477 478 .audio-selection-device-box { 479 padding: 20px; 480 spacing: 20px; 481 } 482 483 .audio-selection-device-icon { 484 icon-size: 64px; 485 } 486 487/* Access Dialog */ 488.access-dialog { 489 spacing: 30px; 490} 491 492/* Geolocation Dialog */ 493.geolocation-dialog { 494 spacing: 30px; 495} 496 497/* Extension Dialog */ 498.extension-dialog { 499 .message-dialog-main-layout { spacing: 24px; padding: 10px; } 500 .message-dialog-title { color: darken($osd_fg_color,25%); } 501} 502 503/* Inhibit-Shortcuts Dialog */ 504.inhibit-shortcuts-dialog { 505 spacing: 30px; 506} 507 508/* Network Agent Dialog */ 509 510.network-dialog-secret-table { 511 spacing-rows: 15px; 512 spacing-columns: 1em; 513} 514 515.keyring-dialog-control-table { 516 spacing-rows: 15px; 517 spacing-columns: 1em; 518} 519 520/* Popovers/Menus */ 521 522.popup-menu { 523 min-width: 15em; 524 background-color: transparent; 525 color: $fg_color; 526 .popup-menu-arrow { } //defined globally in the TOP BAR 527 .popup-sub-menu { 528 background-color: transparentize(darken($main_dark,57%), 0.8); 529 box-shadow: $depth6; 530 } 531 532 .popup-menu-content { 533 padding: 16px 0; 534 background-color: $bg_color; 535 border-radius: 5px; 536 } 537 .popup-menu-item { 538 spacing: 6px; 539 padding: 6px; 540 541 &:ltr { padding-right: 1.75em; padding-left: 0; } 542 &:rtl { padding-right: 0; padding-left: 1.75em; } 543 544 &:checked { 545 background-color: transparentize($selected_bg_color,0.1); 546 color: $selected_fg_color; 547 box-shadow: inset 0 1px 0px lighten($borders_color,5%); 548 font-weight: bold; 549 &:hover{ 550 background-color: transparentize($selected_bg_color,0.1); 551 color: $selected_fg_color; 552 } 553 } 554 &.selected { background-color: transparentize($fg_color,0.9); color: $fg_color; } 555 &:active { background-color: $selected_bg_color; color: $selected_fg_color; } 556 &:insensitive { color: transparentize($fg_color,.5); } 557 } 558 559 .popup-inactive-menu-item { //all icons and other graphical elements 560 color: $fg_color; 561 562 &:insensitive { color: transparentize($fg_color,0.5); } 563 } 564 //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is 565 &.panel-menu { 566 -boxpointer-gap: 4px; 567 margin-bottom: 1.75em; 568 } 569} 570 571 .popup-menu-ornament { 572 text-align: right; 573 width: 1.2em; 574 } 575 .popup-menu-boxpointer, 576 .candidate-popup-boxpointer { 577 -arrow-border-radius: 5px; 578 -arrow-background-color: $bg_color; 579 -arrow-border-width: 1px; 580 -arrow-border-color: $borders_color; 581 -arrow-base: 24px; 582 -arrow-rise: 11px; 583 -arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995 584 } 585 586 .popup-separator-menu-item { 587 588 &-separator { 589 //-margin-horizontal: 24px; 590 height: 1px; //not really the whole box 591 margin: 6px 64px; 592 background-color: transparent; 593 border-color: transparent; 594 border-bottom-width: 1px; 595 border-bottom-style: solid; 596 } 597 .popup-sub-menu & &-separator { //submenu separators 598 margin: 0 64px 0 32px; 599 background: transparent; 600 } 601 } 602 603 604// Background menu 605.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } 606 607/* fallback menu 608- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled 609 app menu inside the main app window itself rather than the top bar 610*/ 611 612 613/* OSD */ 614.osd-window { 615 text-align: center; 616 font-weight: bold; 617 spacing: 1em; 618 margin: 32px; 619 min-width: 64px; 620 min-height: 64px; 621 622 .osd-monitor-label { font-size: 3em; } 623 .level { 624 height: 0.4em; 625 border-radius: 0.3em; 626 color: $osd_fg_color; 627 border: 1px solid $borders_color; 628 629 -barlevel-height: 0.4em; 630 -barlevel-background-color: transparentize(darken($main_dark,15%),0.5); 631 -barlevel-active-background-color: $selected_bg_color; 632 -barlevel-overdrive-color: $red; 633 -barlevel-overdrive-separator-width: 0.2em; 634 } 635 .level-bar { 636 background-color: $selected_bg_color; 637 border-radius: 0.3em; 638 } 639} 640 641/* Pad OSD */ 642.pad-osd-window { 643 padding: 32px; 644 background-color: transparentize(black, 0.2); 645 646 .pad-osd-title-box { spacing: 12px; } 647 .pad-osd-title-menu-box { spacing: 6px; } 648} 649 650.combo-box-label { 651 width: 15em; 652} 653 654/* App Switcher */ 655.switcher-popup { 656 padding: 8px; 657 spacing: 16px; 658} 659 660.osd-window, 661.resize-popup, 662.switcher-list { 663 @extend %osd-panel; 664} 665 666 .switcher-list-item-container { spacing: 8px; } 667 668 .switcher-list .item-box { 669 padding: 8px; 670 border-radius: 4px; 671 } 672 673 .switcher-list .item-box:outlined { 674 padding: 6px; 675 border: 2px solid darken($borders_color,10%); 676 } 677 678 .switcher-list .item-box:selected { 679 background-color: $selected_bg_color; 680 color: $selected_fg_color; 681 } 682 683 .switcher-list .thumbnail-box { 684 padding: 2px; 685 spacing: 4px; 686 } 687 688 .switcher-list .thumbnail { 689 width: 256px; 690 } 691 692 .switcher-list .separator { 693 width: 1px; 694 background: $borders_color; 695 } 696 697 .switcher-arrow { 698 border-color: rgba(0,0,0,0); 699 color: transparentize($fg_color,0.2); 700 &:highlighted { 701 color: $fg_color; 702 } 703 } 704 705 .input-source-switcher-symbol { 706 font-size: 34pt; 707 width: 96px; 708 height: 96px; 709 } 710 711/* Window Cycler */ 712.cycler-highlight { border: 5px solid $selected_bg_color; } 713 714/* Workspace Switcher */ 715.workspace-switcher-group { padding: 12px; } 716 717 .workspace-switcher-container { 718 @extend %osd-panel; 719 } 720 721 .workspace-switcher { 722 background: transparent; 723 border: 0px; 724 border-radius: 0px; 725 padding: 0px; 726 spacing: 8px; 727 } 728 729 .ws-switcher-active-up, 730 .ws-switcher-active-down, 731 .ws-switcher-active-left, 732 .ws-switcher-active-right { 733 height: 50px; 734 background-color: $selected_bg_color; 735 color: $selected_fg_color; 736 //background-image: url("resource:///org/gnome/shell/theme/assets/ws-switch-arrow-up.png"); 737 background-size: 32px; 738 border-radius: 8px; 739 border-color: $selected_bg_color; 740 } 741 .ws-switcher-active-up { 742 background-image: url("assets/ws-switch-arrow-up.png"); } 743 744 .ws-switcher-active-down { 745 background-image: url("assets/ws-switch-arrow-down.png"); } 746 747 .ws-switcher-box { 748 height: 50px; 749 border: 1px solid transparentize($osd_fg_color,0.9); 750 background: darken($_bubble_bg_color, 10%); 751 border-radius: 8px; 752 } 753 754%osd-panel { 755 color: $_bubble_fg_color; 756 background-color: $_bubble_bg_color; 757 border: 1px solid $borders_color; 758 box-shadow: 0px 0px 5px $borders_color; 759 border-radius: 5px; 760 padding: 12px; 761} 762 763/* Tiled window previews */ 764.tile-preview { 765 background-color: transparentize($selected_bg_color,0.5); 766 border: 1px solid $selected_bg_color; 767} 768 769 .tile-preview-left.on-primary { 770 border-radius: $corner-radius $corner-radius 0 0; 771 } 772 773 .tile-preview-right.on-primary { 774 border-radius: 0 $corner-radius 0 0; 775 } 776 777 .tile-preview-left.tile-preview-right.on-primary { 778 border-radius: $corner-radius $corner-radius 0 0; 779 } 780 781/* TOP BAR */ 782 783#panel { 784 background-gradient-direction: none; 785 background-color: $topbar_bg_color; 786 /* transition from solid to transparent */ 787 transition-duration: 500ms; 788 font-weight: bold; 789 height: 1.86em; 790 padding: 0px 0px; 791 792 &.unlock-screen, 793 &.login-screen, 794 &.lock-screen { 795 background-color: transparent; 796 } 797 798 #panelLeft, #panelCenter { // spacing between activities<>app menu and such 799 spacing: 4px; 800 } 801 802 .panel-corner { 803 -panel-corner-radius: 0px; 804 -panel-corner-background-color: rgba(0, 0, 0, 0.2); 805 -panel-corner-border-width: 2px; 806 -panel-corner-border-color: transparent; 807 808 &:active, &:overview, &:focus { 809 -panel-corner-border-color: lighten($selected_bg_color,5%); 810 } 811 812 &.lock-screen, &.login-screen, &.unlock-screen { 813 -panel-corner-radius: 0; 814 -panel-corner-background-color: transparent; 815 -panel-corner-border-color: transparent; 816 } 817 } 818 819 .panel-button { 820 -natural-hpadding: 12px; 821 -minimum-hpadding: 6px; 822 font-weight: bold; 823 color: $topbar_color; 824 transition-duration: 100ms; 825 826 .app-menu-icon { 827 -st-icon-style: symbolic; 828 margin-left: 4px; 829 margin-right: 4px; 830 //dimensions of the icon are hardcoded 831 } 832 833 &:hover { 834 background: lighten($topbar_bg_color, 10%); 835 color: lighten($topbar_color, 10%); 836 } 837 838 &:active, &:overview, &:focus, &:checked { 839 // Trick due to St limitations. It needs a background to draw 840 // a box-shadow 841 background: $selected_bg_color; 842 box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%); 843 color: #fff; 844 } 845 846 .system-status-icon { icon-size: 1.09em; padding: 0 5px; } 847 .unlock-screen &, 848 .login-screen &, 849 .lock-screen & { 850 color: lighten($fg_color, 10%); 851 &:focus, &:hover, &:active { color: lighten($fg_color, 10%); } 852 } 853 854 // Remove default bottom border 855 &.clock-display { 856 &:active, &:overview, &:focus, &:checked { 857 box-shadow: none; 858 .clock { 859 box-shadow: none; 860 } 861 } 862 } 863 } 864 865 .panel-status-indicators-box, 866 .panel-status-menu-box { 867 spacing: 2px; 868 } 869 870 // spacing between power icon and (optional) percentage label 871 .power-status.panel-status-indicators-box { 872 spacing: 0; 873 } 874 875 .screencast-indicator { color: $warning_color; } 876 877 &.solid { 878 background-color: $dracula; 879 /* transition from transparent to solid */ 880 transition-duration: 300ms; 881 882 .panel-corner { 883 -panel-corner-background-color: black; 884 } 885 .system-status-icon, 886 .app-menu-icon > StIcon, 887 .popup-menu-arrow { 888 icon-shadow: none; 889 } 890 } 891} 892 893 // calendar popover 894 #calendarArea { 895 padding: 0.75em 1.0em; 896 } 897 898 .calendar { 899 margin-bottom: 1em; 900 } 901 902 .calendar, .world-clocks-button, .weather-button, .events-button { 903 background: transparent; 904 border: none; 905 } 906 907 .calendar, 908 .datemenu-today-button, 909 .datemenu-displays-box, 910 .message-list-sections { 911 margin: 0 1.5em; 912 } 913 914 .datemenu-calendar-column { spacing: 0.5em; } 915 .datemenu-displays-section { padding-bottom: 3em; } 916 .datemenu-displays-box { spacing: 1em; } 917 918 .datemenu-calendar-column { 919 border: 0 solid transparent; 920 &:ltr { border-left-width: 1px; } 921 &:rtl { border-right-width: 1px; } 922 } 923 924 .datemenu-today-button, 925 .world-clocks-button, 926 .weather-button, 927 .events-section-title, 928 .message-list-section-title, 929 .events-button { 930 border-radius: 4px; 931 color: $fg_color; 932 padding: .4em; 933 } 934 935 .message-list-section-list:ltr { 936 padding-left: .4em; 937 } 938 939 .message-list-section-list:rtl { 940 padding-right: .4em; 941 } 942 943 .datemenu-today-button, 944 .world-clocks-button, 945 .weather-button, 946 .events-section-title, 947 .message-list-section-title, 948 .events-button { 949 &:hover,&:focus { background-color: lighten($bg_color,5%); } 950 &:active { 951 color: lighten($selected_fg_color,5%); 952 background-color: $selected_bg_color; 953 } 954 } 955 956 .datemenu-today-button .day-label { 957 } 958 959 .datemenu-today-button .date-label { 960 font-size: 1.5em; 961 } 962 963 .world-clocks-header, 964 .weather-header, 965 .events-section-title, 966 .message-list-section-title, 967 .events-title { 968 color: darken($fg_color, 40%); 969 font-weight: bold; 970 } 971 972 .events-button .event-time { 973 color: darken($fg_color, 4%); 974 } 975 976 .world-clocks-grid { 977 spacing-rows: 0.4em; 978 } 979 980 .weather-box { 981 spacing: 0.4em; 982 } 983 984 .calendar-month-label { 985 color: darken($fg_color,5%); 986 font-weight: bold; 987 padding: 8px 0; 988 &:focus {} 989 } 990 991 .pager-button { 992 color: white; 993 background-color: transparent; 994 width: 32px; 995 border-radius: 4px; 996 &:hover, &:focus { background-color: transparentize($fg_color,0.95); } 997 &:active { background-color: transparentize($bg_color,0.95); } 998 } 999 1000 .calendar-change-month-back { //arrow back 1001 background-image: url("assets/calendar-arrow-left.svg"); 1002 &:rtl { background-image: url("assets/calendar-arrow-right.svg"); } 1003 } 1004 .calendar-change-month-forward { //arrow foreward 1005 background-image: url("assets/calendar-arrow-right.svg"); 1006 &:rtl { background-image: url("assets/calendar-arrow-left.svg"); } 1007 } 1008 1009 .calendar-change-month-back StIcon, 1010 .calendar-change-month-forward StIcon { 1011 color:darken($fg_color, 7%); 1012 } 1013 1014 .calendar-day-base { 1015 font-size: 80%; 1016 text-align: center; 1017 width: 2.4em; height: 2.4em; 1018 padding: 0.1em; 1019 margin: 2px; 1020 border-radius: 1.4em; 1021 color: $fg_color; 1022 &:hover,&:focus { background-color: lighten($bg_color,5%); } 1023 &:active,&:selected { 1024 color: lighten($selected_fg_color,5%); 1025 background-color: $selected_bg_color; 1026 border-color: transparent; //avoid jumparound due to today 1027 } 1028 &.calendar-day-heading { //day of week heading 1029 color: darken($fg_color,40%); 1030 margin-top: 1em; 1031 font-size: 70%; 1032 } 1033 } 1034 .calendar-day { //border collapse hack - see calendar.js 1035 border-width: 0; 1036 } 1037 .calendar-day-top { border-top-width: 1px; } 1038 .calendar-day-left { border-left-width: 1px; } 1039 .calendar-work-day { 1040 1041 } 1042 .calendar-nonwork-day { 1043 color: $insensitive_fg_color; 1044 } 1045 .calendar-today { 1046 font-weight: bold; 1047 //color: lighten($fg_color,10%); 1048 //background-color: darken($bg_color,5%); 1049 border: 1px solid transparentize($borders_color,0.5); 1050 } 1051 .calendar-day-with-events { 1052 color: lighten($fg_color,10%); 1053 font-weight: bold; 1054 background-image: url("assets/calendar-today.svg"); 1055 } 1056 .calendar-other-month-day { 1057 color: $insensitive_fg_color; 1058 opacity: 0.5; 1059 } 1060 .calendar-week-number { 1061 font-size: 70%; 1062 font-weight: bold; 1063 width: 2.3em; height: 1.8em; 1064 border-radius: 2px; 1065 padding: 0.5em 0 0; 1066 margin: 6px; 1067 background-color: transparentize($fg_color,0.7); 1068 color: $bg_color; 1069 } 1070 1071 /* Message list */ 1072 .message-list { 1073 width: 31.5em; 1074 .message-title, .message-content, .message-body { 1075 color: darken($fg_color, 5%); 1076 } 1077 } 1078 1079 .message-list-clear-button.button { 1080 // background-color: transparent; 1081 border: 1px solid $borders_color; 1082 box-shadow: none; 1083 &:hover,&:focus { background-color: lighten($bg_color,5%); } 1084 margin: 1.5em 1.5em 0; 1085 } 1086 1087 .message-list-sections { 1088 spacing: 1em; 1089 } 1090 1091 .message-list-section, 1092 .message-list-section-list { 1093 spacing: 0.4em; 1094 } 1095 .message-list-section-close{ 1096 & > StIcon { 1097 icon-size: 16px; 1098 border-radius: 16px; 1099 padding: 8px; 1100 color: $fg_color; 1101 background-color: transparent; 1102 } 1103 &:hover > StIcon, 1104 &:focus > StIcon 1105 &:active > StIcon{ 1106 color: $red; 1107 background: transparent; 1108 } 1109 } 1110 1111 .message { 1112 &:hover,&:focus { 1113 background-color: lighten($bg_color,2%); 1114 box-shadow: 3px 0px 0px 0px $selected_bg_color inset; 1115 } 1116 border: 1px solid $borders_color; 1117 border-radius: 3px; 1118 background: darken($bg_color, 0.7%); 1119 box-shadow: none; 1120 } 1121 1122 .message-icon-bin { 1123 padding: 10px 3px 10px 10px; 1124 &:rtl { padding: 10px 10px 10px 3px; } 1125 } 1126 1127 .message-icon-bin > StIcon { 1128 icon-size: 16px; 1129 -st-icon-style: symbolic; 1130 } 1131 1132 .message-secondary-bin { 1133 padding: 0 12px; 1134 } 1135 1136 .message-secondary-bin > .event-time { 1137 color: darken($fg_color, 15%); 1138 font-size: 0.7em; 1139 /* HACK: the label should be baseline-aligned with a 1em label, 1140 fake this with some bottom padding */ 1141 padding-bottom: 0.13em; 1142 1143 } 1144 1145 .message-secondary-bin > StIcon { 1146 icon-size: 16px; 1147 } 1148 1149 .message-title { 1150 //color: darken($fg_color,5%); 1151 1152 } 1153 1154 .message-content { 1155 // color: darken($fg_color,20%); 1156 padding: 10px; 1157 *:hover > StIcon, 1158 *:focus > StIcon, { 1159 color: $red; 1160 } 1161 } 1162 1163 .message-media-control { 1164 padding: 12px; 1165 color: darken($fg_color, 20%); 1166 1167 &:last-child:ltr { padding-right: 18px; } 1168 &:last-child:rtl { padding-left: 18px; } 1169 &:hover { color: $fg_color; } 1170 &:insensitive { color: darken($fg_color,40%); } 1171 } 1172 1173 .media-message-cover-icon { 1174 icon-size: 48px !important; 1175 &.fallback { 1176 color: lighten($bg_color,10%); 1177 background-color: $bg_color; 1178 border: 2px solid $bg_color; 1179 border-radius: 2px; 1180 icon-size: 16px; 1181 padding: 8px; } 1182 } 1183 1184/* World clocks */ 1185.world-clocks-button { 1186 1187 // city label 1188 .world-clocks-city { 1189 color: $fg_color; 1190 font-weight: normal; 1191 } 1192 1193 // timezone time 1194 .world-clocks-time { 1195 font-weight: bold; 1196 color: $fg_color; 1197 font-feature-settings: "lnum"; 1198 text-align: right; 1199 } 1200 1201 // timezone offset label 1202 .world-clocks-timezone { 1203 color: darken($fg_color,20%); 1204 font-feature-settings: "tnum"; 1205 } 1206} 1207 1208 1209/* Weather */ 1210.weather-button { 1211 1212 .weather-header { 1213 color: darken($fg_color, 10%); 1214 font-weight: bold; 1215 1216 &.location { 1217 font-weight: normal; 1218 } 1219 } 1220 1221 .weather-forecast-time { 1222 color: darken($fg_color, 10%); 1223 font-feature-settings: "tnum"; 1224 font-weight: normal; 1225 padding-top: 0.2em; 1226 padding-bottom: 0.4em; 1227 } 1228 1229 .weather-forecast-temp { 1230 font-weight: bold; 1231 } 1232} 1233 1234 // a little unstructured mess: 1235 1236 .system-switch-user-submenu-icon.user-icon { 1237 icon-size: 20px; 1238 padding: 0 2px; 1239 } 1240 .system-switch-user-submenu-icon.default-icon { 1241 icon-size: 16px; 1242 padding: 0 4px; 1243 } 1244 1245 #appMenu { 1246 spinner-image: url("assets/process-working.svg"); 1247 spacing: 4px; 1248 1249 .label-shadow { color: transparent; } 1250 } 1251 1252 .aggregate-menu { 1253 min-width: 21em; 1254 .popup-menu-icon { padding: 0 4px; } 1255 } 1256 1257 .system-menu-action { 1258 1259 color: $fg_color; 1260 1261 border-radius: 32px; /* wish we could do 50% */ 1262 border: 1px solid $borders_color; 1263 background: darken($bg_color, 3%); 1264 padding: 13px; 1265 1266 &:hover, &:focus { 1267 border: 1px solid $selected_bg_color; 1268 color: $selected_bg_color; 1269 background: transparent; 1270 } 1271 &:active { background-color: darken($selected_bg_color, 10%); color: $selected_fg_color;} 1272 1273 & > StIcon { icon-size: 16px; } 1274 } 1275 1276//Activities Ripples 1277.ripple-box { 1278 width: 52px; 1279 height: 52px; 1280 background-image: url("assets/corner-ripple-ltr.png"); 1281 background-size: contain; 1282} 1283 1284.ripple-box:rtl { 1285 background-image: url("assets/corner-ripple-rtl.png"); 1286} 1287 1288// not really top bar only 1289.popup-menu-arrow { width: 16px; height: 16px; } 1290.popup-menu-icon { icon-size: 1.09em; } 1291 1292//close buttons 1293 1294.window-close { 1295 background-color: transparent; 1296 background-image: url("assets/close-window.svg"); 1297 background-size: 32px; 1298 border: none; 1299 box-shadow: none; 1300 color: transparent; 1301 height: 32px; 1302 width: 32px; 1303} 1304 .window-close { 1305 -shell-close-overlap: 16px; 1306 &:rtl { -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); } 1307 } 1308 1309/* NETWORK DIALOGS */ 1310 1311.nm-dialog { 1312 max-height: 34em; 1313 min-height: 31em; 1314 min-width: 32em; 1315} 1316 1317 .nm-dialog-content { 1318 spacing: 20px; 1319 padding: 24px; 1320 } 1321 .nm-dialog-header-hbox { spacing: 10px; } 1322 .nm-dialog-airplane-box { spacing: 12px; } 1323 1324 .nm-dialog-airplane-headline { 1325 font-weight: bold; 1326 text-align: center; 1327 } 1328 1329 .nm-dialog-airplane-text { color: $fg_color; } 1330 .nm-dialog-header-icon { icon-size: 32px; } 1331 .nm-dialog-scroll-view { border: 2px solid $borders_color; background: transparent; } 1332 .nm-dialog-header { font-weight: bold; } 1333 1334 .nm-dialog-item { 1335 font-size: 110%; 1336 border-bottom: 1px solid $borders_color; 1337 padding: 12px; 1338 spacing: 20px; 1339 } 1340 1341 .nm-dialog-item:selected { 1342 background-color: $selected_bg_color; 1343 color: $selected_fg_color; 1344 } 1345 1346 .nm-dialog-icons { spacing: .5em; } 1347 .nm-dialog-icon { icon-size: 16px; } 1348 .no-networks-label { color: #999999; } 1349 .no-networks-box { spacing: 12px; } 1350 1351/* OVERVIEW */ 1352 1353#overview { 1354 spacing: 24px; // 1355} 1356 1357#overview.cosmic-solid-bg { 1358 background-color: $topbar_bg_color !important; 1359} 1360 1361.overview-controls { 1362 padding-bottom: 32px; 1363} 1364 1365 .window-picker { //container around window thumbnails 1366 -horizontal-spacing: 16px; 1367 -vertical-spacing: 16px; 1368 padding: 0 16px 16px; 1369 1370 &.external-monitor { padding: 16px; } 1371 } 1372 1373 .window-clone-border { 1374 border: 4px solid transparentize($selected_bg_color, .7); 1375 border-radius: 0px; 1376 // For window decorations with round corners we can't match 1377 // the exact shape when the window is scaled. So apply a shadow 1378 // to fix that case 1379 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); 1380 } 1381 .window-caption { 1382 spacing: 20px; 1383 color: $fg_color; 1384 background-color: transparentize($osd_bg_color,.3); 1385 border-radius: 2px; 1386 padding: 4px 8px; 1387 } 1388 1389 //search entry 1390 .search-entry { 1391 width: 320px; 1392 padding: 9px; 1393 border-radius: 2px; 1394 border: none; 1395 color: $fg_color; 1396 background-color: transparentize($bg_color, 0.4); 1397 box-shadow: $depth; 1398 &:focus { 1399 border-width: 0; 1400 color: $fg_color; 1401 background-color: transparentize($bg_color, 0.2); 1402 box-shadow: $depth2; 1403 } 1404 1405 .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); } 1406 1407 &:hover, &:focus { 1408 background-color: transparentize($bg_color, 0.2); 1409 .search-entry-icon { color: $fg_color; } 1410 } 1411 } 1412 1413 //search results 1414 1415 %search-section-content-item { 1416 &:focus, 1417 &:hover, 1418 &:selected { 1419 background-color: transparentize($osd_fg_color, .9); 1420 transition-duration: 200ms; 1421 } 1422 1423 &:active, 1424 &:checked { 1425 background-color: transparentize(darken($osd_bg_color, 10%), .1); 1426 } 1427 } 1428 1429 #searchResultsBin { 1430 max-width: 1000px; 1431 } 1432 1433 #searchResultsContent { 1434 padding-left: 20px; 1435 padding-right: 20px; 1436 spacing: 16px; 1437 } 1438 1439 .search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing 1440 1441 .search-section-content { 1442 background-color: transparent; 1443 border-radius: 0; 1444 border: none; 1445 box-shadow: none; 1446 // This is the space between the provider icon and the results container 1447 spacing: 32px; 1448 } 1449 1450 .search-statustext { // "no results" 1451 @extend %status_text; 1452 } 1453 .list-search-results { spacing: 3px; } 1454 1455 .search-section-separator { height: 2px; background-color: $gray; } 1456 1457 .list-search-result-content { spacing: 30px; } 1458 .list-search-result-title { color: lighten($topbar_color,5%); spacing: 12px; } 1459 .list-search-result-description { color: transparentize(lighten($topbar_color,15%), 0.5); } 1460 .list-search-provider-details { width: 150px; color: lighten($topbar_color,5%); margin-top: 0.24em; } 1461 .list-search-provider-content { spacing: 20px; } 1462 .search-provider-icon { padding: 15px; } 1463 1464 //Icon tile 1465 .search-provider-icon, 1466 .list-search-result { 1467 @extend %search-section-content-item; 1468 } 1469 1470 1471 /* DASHBOARD */ 1472 1473 #dash { 1474 font-size: 9pt; 1475 color: $topbar_color; 1476 background-color: $topbar_bg_color; 1477 padding: 6px 0; 1478 border: 1px solid $borders_color; 1479 border-left: 0px; 1480 border-radius: 0px 5px 5px 0px; 1481 1482 &:rtl { 1483 border-radius: 9px 0 0 9px; 1484 } 1485 1486 .placeholder { 1487 background-image: url("assets/dash-placeholder.svg"); 1488 background-size: contain; 1489 height: 24px; 1490 } 1491 1492 .empty-dash-drop-target { 1493 width: 24px; 1494 height: 24px; 1495 } 1496 1497 } 1498 1499 .dash-item-container > StWidget { 1500 padding: 4px 8px; 1501 } 1502 1503 .dash-label { //osd tooltip 1504 border-radius: 7px; 1505 padding: 4px 12px; 1506 color: $topbar_color; 1507 background-color: $topbar_bg_color; 1508 text-align: center; 1509 -x-offset: 8px; 1510 } 1511 1512 /* App Vault/Grid */ 1513 .icon-grid { 1514 spacing: 30px; 1515 -shell-grid-horizontal-item-size: 136px; 1516 -shell-grid-vertical-item-size: 136px; 1517 1518 .overview-icon { icon-size: 96px; } 1519 } 1520 //.app-display { spacing: 20px; } 1521 1522 .system-action-icon { 1523 background-color: black; 1524 color: white; 1525 border-radius: 99px; 1526 icon-size: 48px; 1527 } 1528 1529 .app-view-controls { //favorties | all toggle container 1530 padding-bottom: 32px; 1531 1532 } 1533 .app-view-control { //favorties | all toggle button 1534 padding: 4px 32px; 1535 &:checked { @include button(active); } 1536 &:first-child { 1537 border-right-width: 0; 1538 border-radius: 3px 0 0 3px; 1539 } 1540 &:last-child { 1541 border-radius: 0 3px 3px 0; 1542 } 1543 } 1544 1545 .app-well-app, 1546 .app-well-app.app-folder, 1547 .show-apps, 1548 .grid-search-result { 1549 1550 border: none; 1551 & .overview-icon { 1552 @extend %icon_tile; 1553 } 1554 &:active .overview-icon, 1555 &:checked .overview-icon { 1556 background-color: transparentize(darken($osd_bg_color,7%),.1); 1557 box-shadow: inset $depth2; 1558 color: $fg_color; 1559 } 1560 &:hover .overview-icon, 1561 &:focus .overview-icon, 1562 &:selected .overview-icon { 1563 background-color: transparentize($bg_color,.5); 1564 transition-duration: 0ms; 1565 border-image: none; 1566 background-image: none; 1567 } 1568 1569 } 1570 1571 .app-well-app-running-dot { //running apps indicator 1572 width: 4px; height: 4px; 1573 background-color: $selected_bg_color; 1574 border-radius: 10px !important; 1575 box-shadow: 0px 0px 5px 4px transparentize($selected_bg_color,0.2); 1576 margin-bottom: 0px; 1577 } 1578 1579 %icon_tile { 1580 color: $selected_fg_color; 1581 border-radius: 2px; 1582 padding: 7px 6px; 1583 border: none; 1584 transition-duration: 100ms; 1585 text-align: center; 1586 box-shadow: $depth; 1587 } 1588 1589 .app-well-app.app-folder > .overview-icon { 1590 background-color: transparentize($osd_bg_color,.6); 1591 } 1592 .show-apps .show-apps-icon { 1593 color: $topbar_color; 1594 } 1595 .show-apps:checked .show-apps-icon, 1596 .show-apps:focus .show-apps-icon { 1597 color: $fg_color; 1598 transition-duration: 100ms; 1599 } 1600 1601 1602 // Collections 1603 .app-folder-popup { //expanded collection 1604 -arrow-border-radius: 8px; 1605 -arrow-background-color: transparentize($bg_color,0.5); 1606 -arrow-base: 24px; 1607 -arrow-rise: 11px; 1608 } 1609 .app-folder-popup-bin { padding: 5px; background: transparentize($bg_color,.5);;} 1610 .app-folder-icon { 1611 padding: 5px; 1612 spacing-rows: 5px; 1613 spacing-columns: 5px; 1614 } 1615 1616 .page-indicator { 1617 padding: 15px 20px; 1618 1619 .page-indicator-icon { 1620 width: 12px; 1621 height: 12px; 1622 border-radius: 12px; 1623 background-image: none; 1624 background-color: rgba(255, 255, 255, 0.3); 1625 } 1626 1627 &:hover .page-indicator-icon { 1628 background-image: none; 1629 background-color: rgba(255, 255, 255, 0.5); 1630 } 1631 &:active .page-indicator-icon { 1632 background-image: none; 1633 background-color: rgba(255, 255, 255, 0.7); 1634 } 1635 &:checked .page-indicator-icon{ 1636 background-image: none; 1637 background-color: #FFFFFF; 1638 transition-duration: 0s; 1639 } 1640 } 1641 1642 .no-frequent-applications-label { @extend %status_text; } 1643 1644 .app-well-app > .overview-icon.overview-icon-with-label, 1645 .grid-search-result .overview-icon.overview-icon-with-label { 1646 padding: 10px 8px 5px 8px; 1647 spacing: 4px; 1648 } 1649 1650 // Workspace pager 1651 .workspace-thumbnails { //container ala dash 1652 @extend %overview-panel; 1653 visible-width: 32px; //amount visible before hover 1654 spacing: 11px; 1655 padding: 8px; 1656 border-radius: 0; 1657 //border-width: 1px 0 1px 1px; //fixme: can't have non unoform borders :( 1658 &:rtl { border-radius: 0;} 1659 } 1660 .workspace-thumbnail-indicator { 1661 border: 4px solid transparentize($selected_bg_color, .2); 1662 box-shadow: $depth; 1663 padding: 0; 1664 } 1665 1666 //Some hacks I don't even 1667 .search-display > StBoxLayout, 1668 .all-apps, 1669 .frequent-apps > StBoxLayout { 1670 // horizontal padding to make sure scrollbars or dash don't overlap content 1671 padding: 0px 88px 10px 88px; 1672 } 1673 1674%overview-panel { 1675 color: $_bubble_fg_color; 1676 background-color: transparent; 1677 border: none; 1678} 1679 1680%status_text { 1681 font-size: 2em; 1682 font-weight: bold; 1683 color: $fg_color; 1684} 1685 1686/* NOTIFICATIONS & MESSAGE TRAY */ 1687 1688 .url-highlighter { link-color: lighten($selected_bg_color,10%); } 1689 1690 // Banners 1691 .notification-banner { 1692 font-size: 11pt; 1693 width: 34em; 1694 margin: 5px; 1695 border-radius: 3px; 1696 color: $topbar_color; 1697 background-color: $bg_color; 1698 border: 1px solid $borders_color; 1699 box-shadow: 0 1px 4px black; 1700 &:hover { background-color: transparentize($bg_color, 0.04); } 1701 &:focus { background-color: transparentize($bg_color, 0.04); } 1702 *{ color: $topbar_color; } 1703 1704 .notification-icon { padding: 5px; } 1705 .notification-content { padding: 5px; spacing: 5px; } 1706 .secondary-icon { icon-size: 1.09em; } 1707 .notification-actions { 1708 background-color: darken($bg_color, 2%); 1709 padding-top: 2px; 1710 spacing: 1px; 1711 } 1712 .notification-button { 1713 padding: 5px; 1714 background-color: transparentize($bg_color, 0.1); 1715 box-shadow: none; 1716 &:first-child { border-radius: 0 0 0 3px; } 1717 &:last-child { border-radius: 0 0 3px 0; } 1718 &:hover, &focus { background-color: darken($bg_color,2%); color: $selected_bg_color;} 1719 } 1720 } 1721 .summary-source-counter { 1722 font-size: 10pt; 1723 font-weight: bold; 1724 height: 1.6em; width: 1.6em; 1725 -shell-counter-overlap-x: 3px; 1726 -shell-counter-overlap-y: 3px; 1727 background-color: $selected_bg_color; 1728 color: $selected_fg_color; 1729 border: 2px solid $osd_fg_color; 1730 box-shadow: 0 2px 2px rgba(0,0,0,0.5); 1731 border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%; 1732 } 1733 1734 .secondary-icon { icon-size: 1.09em; } 1735 1736 //chat bubbles 1737 .chat-body { spacing: 5px; } 1738 .chat-response { margin: 5px; } 1739 .chat-log-message { color: darken($fg_color,10%); } 1740 .chat-new-group { padding-top: 1em; } 1741 .chat-received { 1742 padding-left: 4px; 1743 &:rtl { padding-left: 0px; padding-right: 4px; } 1744 } 1745 .chat-sent { 1746 padding-left: 18pt; 1747 color: darken($fg_color, 15%); 1748 &:rtl { padding-left: 0; padding-right: 18pt; } 1749 } 1750 .chat-meta-message { 1751 padding-left: 4px; 1752 font-size: 9pt; 1753 font-weight: bold; 1754 color: darken($fg_color,20%); 1755 &:rtl { padding-left: 0; padding-right: 4px; } 1756 } 1757 1758 //hotplug 1759 .hotplug-transient-box { 1760 spacing: 6px; 1761 padding: 2px 72px 2px 12px; 1762 } 1763 .hotplug-notification-item { 1764 padding: 2px 10px; 1765 &:focus { padding: 1px 71px 1px 11px; } 1766 } 1767 1768 .hotplug-notification-item-icon { 1769 icon-size: 24px; 1770 padding: 2px 5px; 1771 } 1772 1773 .hotplug-resident-box { spacing: 8px; } 1774 1775 .hotplug-resident-mount { 1776 spacing: 8px; 1777 border-radius: 4px; 1778 &:hover { background-color: transparentize($bg_color,0.7); } 1779 } 1780 1781 .hotplug-resident-mount-label { 1782 color: inherit; 1783 padding-left: 6px; 1784 } 1785 1786 .hotplug-resident-mount-icon { 1787 icon-size: 24px; 1788 padding-left: 6px; 1789 } 1790 1791 .hotplug-resident-eject-icon { 1792 icon-size: 16px; 1793 } 1794 1795 .hotplug-resident-eject-button { 1796 padding: 7px; 1797 border-radius: 5px; 1798 color: pink; 1799 } 1800 1801/* Eeeky things */ 1802 1803//magnifier 1804 1805.magnifier-zoom-region { 1806 border: 2px solid $selected_bg_color; 1807 &.full-screen { border-width: 0; } 1808} 1809 1810//Keyboard 1811/* On-screen Keyboard */ 1812 1813#keyboard { 1814 background-color: transparentize($osd_bg_color, 0.3); 1815} 1816 1817 .keyboard-layout { 1818 spacing: 10px; 1819 padding: 10px; 1820 } 1821 1822 .keyboard-row { spacing: 15px; } 1823 1824 .keyboard-key { 1825 @include button(normal); 1826 background-color: $base_color; 1827 min-height: 2em; 1828 min-width: 2em; 1829 font-size: 14pt; 1830 font-weight: bold; 1831 border-radius: 5px; 1832 &:focus { @include button(focus); } 1833 &:hover,&:checked { @include button(hover); } 1834 &:active { @include button(active);} 1835 &:grayed { //FIXME 1836 background-color: $osd_bg_color; 1837 color: $osd_fg_color; 1838 border-color: $osd_borders_color; 1839 } 1840 } 1841 1842 .keyboard-subkeys { //long press on a key popup 1843 color: white; 1844 padding: 5px; 1845 -arrow-border-radius: 10px; 1846 -arrow-background-color: transparentize($osd_bg_color, 0.3); 1847 -arrow-border-width: 2px; 1848 -arrow-border-color: $_bubble_borders_color; 1849 -arrow-base: 20px; 1850 -arrow-rise: 10px; 1851 -boxpointer-gap: 5px; 1852 } 1853 1854// IBus Candidate Popup 1855 1856.candidate-popup-content { 1857 padding: 0.5em; 1858 spacing: 0.3em; 1859} 1860 1861 .candidate-index { 1862 padding: 0 0.5em 0 0; 1863 color: darken($fg_color,10%); 1864 } 1865 1866 .candidate-box { 1867 padding: 0.3em 0.5em 0.3em 0.5em; 1868 border-radius: 4px; 1869 &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; } 1870 } 1871 1872 .candidate-page-button-box { 1873 height: 2em; 1874 .vertical & { padding-top: 0.5em; } 1875 .horizontal & { padding-left: 0.5em; } 1876 } 1877 1878 .candidate-page-button { 1879 padding: 4px; 1880 } 1881 1882 .candidate-page-button-previous { border-radius: 4px 0px 0px 4px; border-right-width: 0; } 1883 .candidate-page-button-next { border-radius: 0px 4px 4px 0px; } 1884 .candidate-page-button-icon { icon-size: 1em; } 1885 1886/* Auth Dialogs & Screen Shield */ 1887 1888.framed-user-icon { 1889 background-size: contain; 1890 border: 2px solid $osd_fg_color; 1891 color: $osd_fg_color; 1892 border-radius: 3px; 1893 &:hover { 1894 border-color: lighten($osd_fg_color,30%); 1895 color: lighten($osd_fg_color,30%); 1896 } 1897} 1898 1899// LOGIN DIALOG 1900 1901.login-dialog-banner-view { 1902 padding-top: 24px; 1903 max-width: 23em; 1904} 1905 1906.login-dialog { 1907 //reset 1908 border: none; 1909 background-color: transparent; 1910 1911 .modal-dialog-button-box { spacing: 3px; } 1912 .modal-dialog-button { 1913 padding: 3px 18px; 1914 &:default { 1915 @include button(normal,$c:$selected_bg_color); 1916 &:hover,&:focus { @include button(hover,$c:$selected_bg_color); } 1917 &:active { @include button(active,$c:$selected_bg_color); } 1918 &:insensitive { @include button(insensitive); } 1919 1920 } 1921 } 1922 1923} 1924 1925 .login-dialog-logo-bin { padding: 24px 0px; } 1926 .login-dialog-banner { color: darken($osd_fg_color,10%); } 1927 .login-dialog-button-box { spacing: 5px; } 1928 .login-dialog-message-warning { color: $warning_color; } 1929 .login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; } 1930 .login-dialog-user-selection-box { padding: 100px 0px; } 1931 .login-dialog-not-listed-label { 1932 padding-left: 2px; 1933 .login-dialog-not-listed-button:focus &, 1934 .login-dialog-not-listed-button:hover & { 1935 color: $osd_fg_color; 1936 } 1937 } 1938 .login-dialog-not-listed-label { 1939 font-size: 90%; 1940 font-weight: bold; 1941 color: darken($osd_fg_color,30%); 1942 padding-top: 1em; 1943 } 1944 1945 .login-dialog-user-list-view { -st-vfade-offset: 1em; } 1946 .login-dialog-user-list { 1947 spacing: 12px; 1948 padding: .2em; 1949 width: 23em; 1950 &:expanded .login-dialog-user-list-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; } 1951 &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; } 1952 } 1953 .login-dialog-user-list-item { 1954 border-radius: 5px; 1955 padding: .2em; 1956 color: darken($osd_fg_color,30%); 1957 &:ltr { padding-right: 1em; } 1958 &:rtl { padding-left: 1em; } 1959 .login-dialog-timed-login-indicator { 1960 height: 2px; 1961 margin: 2px 0 0 0; 1962 background-color: $osd_fg_color; 1963 } 1964 &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; } 1965 } 1966 1967 .login-dialog-username, 1968 .user-widget-label { 1969 color: $osd_fg_color; 1970 font-size: 120%; 1971 font-weight: bold; 1972 text-align: left; 1973 padding-left: 15px; 1974 } 1975 .user-widget-label { 1976 &:ltr { padding-left: 18px; } 1977 &:rtl { padding-right: 18px; } 1978 } 1979 1980 .login-dialog-prompt-layout { 1981 padding-top: 24px; 1982 padding-bottom: 12px; 1983 spacing: 8px; 1984 width: 23em; 1985 } 1986 1987 .login-dialog-prompt-label { 1988 color: darken($osd_fg_color, 20%); 1989 font-size: 110%; 1990 padding-top: 1em; 1991 } 1992 1993 .login-dialog-session-list-button StIcon { 1994 icon-size: 1.25em; 1995 } 1996 1997 .login-dialog-session-list-button { 1998 color: darken($osd_fg_color,30%); 1999 &:hover,&:focus { color: $osd_fg_color; } 2000 &:active { color: darken($osd_fg_color, 50%); } 2001 } 2002 2003//SCREEN SHIELD 2004 2005.screen-shield-arrows { 2006 padding-bottom: 3em; 2007} 2008 2009.screen-shield-arrows Gjs_Arrow { 2010 color: white; 2011 width: 80px; 2012 height: 48px; 2013 -arrow-thickness: 12px; 2014 -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4); 2015} 2016 2017.screen-shield-clock { 2018 color: white; 2019 text-shadow: 0px 1px 2px rgba(0,0,0,0.6); 2020 font-weight: bold; 2021 text-align: center; 2022 padding-bottom: 1.5em; 2023} 2024 2025.screen-shield-clock-time { 2026 font-size: 72pt; 2027 text-shadow: 0px 2px 2px rgba(0,0,0,0.4); 2028} 2029 2030.screen-shield-clock-date { font-size: 28pt; } 2031 2032.screen-shield-notifications-container { 2033 spacing: 6px; 2034 width: 30em; 2035 background-color: transparent; 2036 max-height: 500px; 2037 .summary-notification-stack-scrollview { 2038 padding-top: 0; 2039 padding-bottom: 0; 2040 } 2041 2042 .notification, 2043 .screen-shield-notification-source { 2044 padding: 12px 6px; 2045 border: 1px solid $_bubble_borders_color; 2046 background-color: transparentize($osd_bg_color,0.5); 2047 color: $_bubble_fg_color; 2048 border-radius: 4px; 2049 } 2050 .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar 2051} 2052 2053 2054.screen-shield-notification-label { 2055 font-weight: bold; 2056 padding: 0px 0px 0px 12px; 2057} 2058 2059.screen-shield-notification-count-text { padding: 0px 0px 0px 12px; } 2060 2061#panel.lock-screen { background-color: transparentize($_bubble_bg_color, 0.5); } 2062 2063.screen-shield-background { //just the shadow, really 2064 background: black; 2065 box-shadow: 0px 2px 4px transparentize(black,0.6); 2066} 2067 2068#lockDialogGroup { 2069 background: #2e3436 url(resource:///org/gnome/shell/theme/noise-texture.png); 2070 background-repeat: repeat; 2071} 2072 2073#screenShieldNotifications { 2074 StButton#vhandle, StButton#hhandle { 2075 background-color: transparentize($bg_color,0.7); 2076 &:hover, &:focus { background-color: transparentize($bg_color,0.5); } 2077 &:active { background-color: transparentize($selected_bg_color,0.5); } 2078 } 2079} 2080 2081 2082// Looking Glass 2083#LookingGlassDialog { 2084 background-color: rgba(0,0,0,0.80); 2085 spacing: 4px; 2086 padding: 4px; 2087 border: 2px solid grey; 2088 border-radius: 4px; 2089 & > #Toolbar { 2090 border: 1px solid grey; 2091 border-radius: 4px; 2092 } 2093 .labels { spacing: 4px; } 2094 .notebook-tab { 2095 -natural-hpadding: 12px; 2096 -minimum-hpadding: 6px; 2097 font-weight: bold; 2098 color: #ccc; 2099 transition-duration: 100ms; 2100 padding-left: .3em; 2101 padding-right: .3em; 2102 &:hover { 2103 color: white; 2104 text-shadow: black 0px 2px 2px; 2105 } 2106 &:selected { 2107 border-bottom-width: 2px; 2108 border-color: lighten($selected_bg_color,5%); 2109 color: white; 2110 text-shadow: black 0px 2px 2px; 2111 } 2112 } 2113 StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } 2114 StBoxLayout#ResultsArea { spacing: 4px; } 2115} 2116 2117 .lg-dialog { 2118 StEntry { 2119 selection-background-color: #bbbbbb; 2120 selected-color: #333333; 2121 } 2122 .shell-link { 2123 color: #999999; 2124 &:hover { color: #dddddd; } 2125 } 2126 } 2127 2128 .lg-completions-text { 2129 font-size: .9em; 2130 font-style: italic; 2131 } 2132 2133 .lg-obj-inspector-title { 2134 spacing: 4px; 2135 } 2136 2137 .lg-obj-inspector-button { 2138 border: 1px solid gray; 2139 padding: 4px; 2140 border-radius: 4px; 2141 &:hover { border: 1px solid #ffffff; } 2142 } 2143 2144 #lookingGlassExtensions { padding: 4px; } 2145 2146 .lg-extensions-list { 2147 padding: 4px; 2148 spacing: 6px; 2149 } 2150 2151 .lg-extension { 2152 border: 1px solid #6f6f6f; 2153 border-radius: 4px; 2154 padding: 4px; 2155 } 2156 2157 .lg-extension-name { 2158 font-weight: bold; 2159 } 2160 2161 .lg-extension-meta { 2162 spacing: 6px; 2163 } 2164 2165 #LookingGlassPropertyInspector { 2166 background: rgba(0, 0, 0, 0.8); 2167 border: 2px solid grey; 2168 border-radius: 4px; 2169 padding: 6px; 2170 } 2171
