gnome-shell.css (83782B)
1 :root, stage { -st-accent-color: #bfc9f4 !important; -st-accent-fg-color: #1a1b26 !important; } 2 /* This stylesheet is generated, DO NOT EDIT */ 3 /* Copyright 2009, 2015 Red Hat, Inc. 4 * 5 * Portions adapted from Mx's data/style/default.css 6 * Copyright 2009 Intel Corporation 7 * 8 * This program is free software; you can redistribute it and/or modify it 9 * under the terms and conditions of the GNU Lesser General Public License, 10 * version 2.1, as published by the Free Software Foundation. 11 * 12 * This program is distributed in the hope it will be useful, but WITHOUT ANY 13 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 14 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for 15 * more details. 16 * 17 * You should have received a copy of the GNU Lesser General Public License 18 * along with this program; if not, write to the Free Software Foundation, 19 * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. 20 */ 21 stage { 22 font-size: 11pt; 23 color: #bfc9f4; 24 } 25 26 .ripple-pointer-location { 27 width: 48px; 28 height: 48px; 29 border-radius: 24px; 30 background-color: rgba(239, 240, 242, 0.3); 31 box-shadow: 0 0 2px 2px #eff0f2; 32 } 33 34 .pie-timer { 35 width: 60px; 36 height: 60px; 37 -pie-border-width: 3px; 38 -pie-border-color: #bfc9f4; 39 -pie-background-color: rgba(239, 240, 242, 0.3); 40 } 41 42 .magnifier-zoom-region { 43 border: 1px solid rgba(255, 255, 255, 0.12) #bfc9f4; 44 } 45 46 .magnifier-zoom-region.full-screen { 47 border-width: 0; 48 } 49 50 /* App Icons */ 51 .show-apps .show-apps-icon { 52 color: transparent; 53 background-image: url('assets/applogo.svg'); 54 background-size: contain; 55 border-radius: 6px; 56 padding: 3px; 57 } 58 59 .show-apps .overview-icon, 60 .app-well-app .overview-icon, 61 .grid-search-result .overview-icon { 62 color: rgba(192, 202, 245, 0.9); 63 border-radius: 9px; 64 padding: 6px; 65 border: none; 66 transition-duration: 100ms; 67 text-align: center; 68 } 69 70 .show-apps:hover .overview-icon, 71 .show-apps:focus .overview-icon, 72 .show-apps:selected .overview-icon, 73 .app-well-app:hover .overview-icon, 74 .app-well-app:focus .overview-icon, 75 .app-well-app:selected .overview-icon, 76 .grid-search-result:hover .overview-icon, 77 .grid-search-result:focus .overview-icon, 78 .grid-search-result:selected .overview-icon { 79 background-color: rgba(191, 201, 244, 0.45); 80 border-image: none; 81 background-image: none; 82 } 83 84 .show-apps:active .overview-icon, 85 .show-apps:checked .overview-icon, 86 .app-well-app:active .overview-icon, 87 .app-well-app:checked .overview-icon, 88 .grid-search-result:active .overview-icon, 89 .grid-search-result:checked .overview-icon { 90 background-color: rgba(191, 201, 244, 0.5); 91 box-shadow: none; 92 } 93 94 .app-well-app.app-folder { 95 background-color: rgba(30, 30, 30, 0.9); 96 border-radius: 12px; 97 } 98 99 .app-well-app.app-folder .overview-icon { 100 background-color: transparent; 101 border-radius: 12px; 102 } 103 104 .app-well-app.app-folder:hover { 105 background-color: rgba(26, 27, 38, 0.6); 106 } 107 108 .app-well-app.app-folder:active { 109 background-color: rgba(26, 27, 38, 0.3); 110 } 111 112 .app-folder-dialog { 113 border-radius: 36px; 114 padding: 12px; 115 background-color: #333333; 116 border: 1px solid rgba(255, 255, 255, 0.12) #bfc9f4; 117 } 118 119 .app-folder-dialog .folder-name-container { 120 padding: 24px 36px 0; 121 spacing: 12px; 122 /* FIXME: this is to keep the label in sync with the entry */ 123 } 124 125 .app-folder-dialog .folder-name-container .folder-name-label, 126 .app-folder-dialog .folder-name-container .folder-name-entry { 127 font-size: 18pt; 128 font-weight: bold; 129 } 130 131 .app-folder-dialog .folder-name-container .folder-name-entry { 132 width: 300px; 133 border: 1px solid rgba(255, 255, 255, 0.12) transparent; 134 } 135 136 .app-folder-dialog .folder-name-container .folder-name-label { 137 padding: 9px 8px; 138 color: rgba(192, 202, 245, 0.7); 139 } 140 141 .app-folder-dialog .folder-name-container .edit-folder-button { 142 background-color: rgba(191, 201, 244, 0.06); 143 color: rgba(192, 202, 245, 0.7); 144 border: none; 145 padding: 0; 146 width: 36px; 147 height: 36px; 148 border-radius: 9999px; 149 } 150 151 .app-folder-dialog .folder-name-container .edit-folder-button > StIcon { 152 icon-size: 16px; 153 } 154 155 .app-folder-dialog .folder-name-container .edit-folder-button:hover { 156 background-color: rgba(191, 201, 244, 0.12); 157 } 158 159 .app-folder-dialog .folder-name-container .edit-folder-button:checked, 160 .app-folder-dialog .folder-name-container .edit-folder-button:active { 161 background-color: #eff0f2; 162 color: rgba(0, 0, 0, 0.87); 163 } 164 165 .app-folder-dialog .icon-grid { 166 row-spacing: 12px; 167 column-spacing: 30px; 168 page-padding-top: 0; 169 page-padding-bottom: 0; 170 page-padding-left: 0; 171 page-padding-right: 0; 172 } 173 174 .app-folder-dialog .page-indicators { 175 margin-bottom: 18px; 176 } 177 178 .app-folder-dialog-container { 179 padding: 6px; 180 width: 620px; 181 height: 620px; 182 } 183 184 .app-well-app-running-dot { 185 width: 6px; 186 height: 3px; 187 border-radius: 2px; 188 background-color: rgba(239, 240, 242, 0.3); 189 margin-bottom: 0; 190 } 191 192 StWidget.focused .app-well-app-running-dot { 193 width: 24px; 194 background-color: #eff0f2 !important; 195 } 196 197 .app-menu, 198 .app-well-menu { 199 max-width: 27.25em; 200 } 201 202 .rename-folder-popup .rename-folder-popup-item { 203 spacing: 6px; 204 } 205 206 .rename-folder-popup .rename-folder-popup-item:ltr, 207 .rename-folder-popup .rename-folder-popup-item:rtl { 208 padding: 0 12px; 209 } 210 211 .system-action-icon { 212 box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); 213 background-color: #333333; 214 color: #bfc9f4; 215 border-radius: 9999px; 216 icon-size: 48px; 217 } 218 219 .shell-link { 220 border-radius: 6px; 221 color: #c0caf5; 222 } 223 224 .shell-link:hover { 225 color: #c0caf5; 226 background-color: rgba(33, 150, 243, 0.15); 227 } 228 229 .shell-link:active { 230 color: #c0caf5; 231 background-color: rgba(33, 150, 243, 0.25); 232 } 233 234 .lowres-icon { 235 icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); 236 } 237 238 .icon-dropshadow { 239 icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.8); 240 } 241 242 /* Buttons */ 243 .hotplug-notification-item { 244 color: #bfc9f4; 245 background-color: #242222; 246 box-shadow: none !important; 247 } 248 249 .hotplug-notification-item:focus { 250 color: #eff0f2; 251 background-color: rgba(239, 240, 242, 0.08); 252 box-shadow: none !important; 253 } 254 255 .hotplug-notification-item:hover { 256 color: #eff0f2; 257 background-color: rgba(239, 240, 242, 0.12); 258 box-shadow: none !important; 259 } 260 261 .hotplug-notification-item:active { 262 color: #eff0f2; 263 background-color: rgba(239, 240, 242, 0.2); 264 box-shadow: none !important; 265 } 266 267 .hotplug-notification-item:insensitive { 268 color: rgba(239, 240, 242, 0.35); 269 background-color: #242222; 270 box-shadow: none !important; 271 } 272 273 .lg-obj-inspector-button, 274 #LookingGlassDialog > #Toolbar .lg-toolbar-button, 275 .candidate-page-button, 276 .modal-dialog-linked-button, 277 /* /* .popup-menu */ */ .button:not(.quick-toggle-arrow) { 278 color: #eff0f2; 279 background-color: transparent; 280 box-shadow: none !important; 281 } 282 283 .lg-obj-inspector-button:focus, 284 #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, 285 .candidate-page-button:focus, 286 .modal-dialog-linked-button:focus, 287 /* /* .popup-menu */ */ .button:focus { 288 color: #bfc9f4; 289 background-color: rgba(239, 240, 242, 0.08); 290 box-shadow: none !important; 291 } 292 293 .lg-obj-inspector-button:hover, 294 #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, 295 .candidate-page-button:hover, 296 .modal-dialog-linked-button:hover, 297 /* /* .popup-menu */ */ .button:hover { 298 color: #eff0f2; 299 background-color: rgba(239, 240, 242, 0.12); 300 } 301 302 .lg-obj-inspector-button:active, 303 #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, 304 .candidate-page-button:active, 305 .modal-dialog-linked-button:active, 306 /* /* .popup-menu */ */ .button:active { 307 color: #eff0f2; 308 background-color: rgba(239, 240, 242, 0.2); 309 box-shadow: none !important; 310 } 311 312 .lg-obj-inspector-button:insensitive, 313 #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, 314 .candidate-page-button:insensitive, 315 .modal-dialog-linked-button:insensitive, 316 /* /* .popup-menu */ */ .button:insensitive { 317 background-color: transparent; 318 color: rgba(239, 240, 242, 0.35); 319 box-shadow: none !important; 320 } 321 322 .button:not(.quick-toggle-arrow) { 323 min-height: 32px; 324 padding: 0 12px; 325 border-radius: 6px; 326 border: none; 327 } 328 329 /* Date/Time Menu */ 330 /* /* .popup-menu */ */ .message, 331 .world-clocks-button, 332 .weather-button, 333 .events-button { 334 color: rgba(191, 201, 244, 0.7); 335 background-color: rgba(191, 201, 244, 0.04); 336 border-radius: 6px; 337 border: none; 338 box-shadow: none; 339 text-shadow: none; 340 padding: 6px 9px; 341 } 342 343 /* /* .popup-menu */ */ .message:hover, 344 .world-clocks-button:hover, 345 .weather-button:hover, 346 .events-button:hover, 347 /* /* .popup-menu */ */ .message:focus, 348 .world-clocks-button:focus, 349 .weather-button:focus, 350 .events-button:focus { 351 color: #bfc9f4; 352 background-color: rgba(191, 201, 244, 0.12); 353 box-shadow: none; 354 } 355 356 /* /* .popup-menu */ */ .message:active, 357 .world-clocks-button:active, 358 .weather-button:active, 359 .events-button:active { 360 color: #bfc9f4; 361 background-color: rgba(191, 201, 244, 0.2); 362 box-shadow: none; 363 } 364 365 .clock-display-box { 366 spacing: 2px; 367 } 368 369 .clock-display-box .clock { 370 padding-left: 12px; 371 padding-right: 12px; 372 } 373 374 #calendarArea { 375 padding: 6px 0; 376 } 377 378 .datemenu-calendar-column { 379 spacing: 6px; 380 border: 0 solid rgba(191, 201, 244, 0.12); 381 padding: 0 12px; 382 } 383 384 .datemenu-calendar-column:ltr { 385 margin-right: 8px; 386 border-left-width: 0; 387 } 388 389 .datemenu-calendar-column:rtl { 390 margin-left: 8px; 391 border-right-width: 0; 392 } 393 394 .datemenu-calendar-column .datemenu-displays-section { 395 padding-bottom: 0; 396 } 397 398 .datemenu-calendar-column .datemenu-displays-box { 399 spacing: 6px; 400 } 401 402 .world-clocks-header, 403 .weather-header, 404 .events-section-title { 405 color: rgba(191, 201, 244, 0.7); 406 font-weight: bold; 407 } 408 409 .datemenu-today-button, 410 .datemenu-displays-box, 411 .message-list-sections { 412 margin: 4px 6px; 413 } 414 415 /* today button (the date) */ 416 .datemenu-today-button { 417 border: none; 418 box-shadow: none; 419 background: none; 420 padding: 6px; 421 margin: 0 12px; 422 text-shadow: none; 423 color: rgba(191, 201, 244, 0.7); 424 border-radius: 12px; 425 } 426 427 .datemenu-today-button:hover, 428 .datemenu-today-button:focus { 429 background-color: rgba(191, 201, 244, 0.12); 430 } 431 432 .datemenu-today-button:active { 433 background-color: rgba(239, 240, 242, 0.2); 434 } 435 436 .datemenu-today-button .day-label { 437 font-size: 12pt; 438 font-weight: bold; 439 } 440 441 .datemenu-today-button .date-label { 442 font-size: 18pt; 443 font-weight: normal; 444 } 445 446 /* Calendar */ 447 .calendar { 448 border: none; 449 box-shadow: none; 450 background-color: transparent; 451 padding: 0 6px !important; 452 margin: 0 !important; 453 text-shadow: none; 454 border-radius: 12px; 455 } 456 457 .calendar .calendar-month-label { 458 padding: 6px 0; 459 color: rgba(239, 240, 242, 0.7); 460 font-weight: bold; 461 text-align: center; 462 text-shadow: none; 463 font-size: 12pt; 464 } 465 466 .calendar .calendar-change-month-back, 467 .calendar .calendar-change-month-forward { 468 padding: 0 0 !important; 469 margin: 3px 0 !important; 470 } 471 472 .calendar .calendar-change-month-back StIcon, 473 .calendar .calendar-change-month-forward StIcon { 474 icon-size: 16px; 475 } 476 477 .calendar .pager-button { 478 width: 32px; 479 height: 32px; 480 margin: 2px; 481 border-radius: 9999px; 482 background-color: transparent; 483 color: #eff0f2; 484 } 485 486 .calendar .pager-button:hover, 487 .calendar .pager-button:focus { 488 background-color: rgba(239, 240, 242, 0.12); 489 } 490 491 .calendar .pager-button:active { 492 background-color: rgba(239, 240, 242, 0.3); 493 } 494 495 .calendar .calendar-day-base { 496 font-size: 10pt; 497 text-align: center; 498 width: 34px; 499 height: 34px; 500 padding: 0; 501 margin: 2px; 502 border-radius: 9999px; 503 color: rgba(239, 240, 242, 0.7); 504 border: none; 505 font-feature-settings: 'tnum'; 506 } 507 508 .calendar .calendar-day-base:hover, 509 .calendar .calendar-day-base:focus { 510 background-color: rgba(239, 240, 242, 0.12); 511 } 512 513 .calendar .calendar-day-base:active, 514 .calendar .calendar-day-base:selected { 515 color: #eff0f2; 516 background-color: rgba(239, 240, 242, 0.3); 517 border-color: transparent; 518 } 519 520 .calendar .calendar-day-base.calendar-day-heading { 521 margin-top: 1em; 522 color: rgba(239, 240, 242, 0.5); 523 font-size: 10pt; 524 } 525 526 .calendar .calendar-day { 527 border-width: 0; 528 } 529 530 .calendar .calendar-day-top { 531 border-top-width: 0; 532 } 533 534 .calendar .calendar-day-left { 535 border-left-width: 0; 536 } 537 538 .calendar .calendar-nonwork-day { 539 color: rgba(239, 240, 242, 0.5); 540 font-weight: bold; 541 } 542 543 .calendar .calendar-today { 544 font-weight: bold; 545 color: rgba(239, 240, 242, 0.7) !important; 546 background-color: rgba(239, 240, 242, 0.06); 547 border: none; 548 } 549 550 .calendar .calendar-today:hover, 551 .calendar .calendar-today:focus { 552 background-color: rgba(239, 240, 242, 0.12); 553 color: #eff0f2 !important; 554 } 555 556 .calendar .calendar-today:active { 557 background-color: lightgray; 558 color: rgba(0, 0, 0, 0.87) !important; 559 } 560 561 .calendar .calendar-today:selected { 562 background-color: #565f89; 563 color: #eff0f2 !important; 564 } 565 566 .calendar .calendar-today:selected:hover, 567 .calendar .calendar-today:selected:focus { 568 background-color: #bfc9f4; 569 color: #eff0f2 !important; 570 } 571 572 .calendar .calendar-day-with-events { 573 color: rgba(239, 240, 242, 0.7); 574 background-image: url('assets/calendar-today.svg'); 575 } 576 577 .calendar .calendar-day-with-events.calendar-work-day { 578 color: rgba(239, 240, 242, 0.7); 579 font-weight: bold; 580 } 581 582 .calendar .calendar-other-month-day { 583 color: rgba(239, 240, 242, 0.3); 584 opacity: 0.5; 585 } 586 587 .calendar .calendar-week-number { 588 width: 26px; 589 height: 20px; 590 margin: 6px 2px !important; 591 padding: 0 0; 592 border-radius: 6px; 593 background-color: rgba(239, 240, 242, 0.04); 594 color: rgba(239, 240, 242, 0.5); 595 font-size: inherit; 596 font-weight: bold; 597 text-align: center; 598 } 599 600 .world-clocks-button, 601 .weather-button, 602 .events-button { 603 padding: 12px !important; 604 margin: 2px 0 !important; 605 } 606 607 .events-button .events-box { 608 spacing: 6px; 609 } 610 611 .events-button .events-list { 612 spacing: 12px; 613 text-shadow: none; 614 } 615 616 .events-button .events-title { 617 color: rgba(239, 240, 242, 0.5); 618 font-weight: bold; 619 text-shadow: none; 620 } 621 622 .events-button .event-time { 623 color: rgba(239, 240, 242, 0.5); 624 font-feature-settings: 'tnum'; 625 font-size: 10pt; 626 } 627 628 .world-clocks-button .world-clocks-city { 629 color: rgba(239, 240, 242, 0.5); 630 font-weight: bold; 631 font-size: 11pt; 632 } 633 634 .world-clocks-button .world-clocks-time { 635 color: rgba(239, 240, 242, 0.5); 636 font-feature-settings: 'tnum'; 637 font-size: 11pt; 638 } 639 640 .world-clocks-button .world-clocks-time:ltr { 641 text-align: right; 642 } 643 644 .world-clocks-button .world-clocks-time:rtl { 645 text-align: left; 646 } 647 648 .world-clocks-button .world-clocks-timezone { 649 color: rgba(239, 240, 242, 0.5); 650 font-feature-settings: 'tnum'; 651 font-size: 10pt; 652 } 653 654 .world-clocks-grid, 655 .weather-grid { 656 spacing-rows: 0.4em; 657 spacing-columns: 0.8em; 658 } 659 660 .weather-button { 661 margin-bottom: 6px !important; 662 } 663 664 .weather-button .weather-box { 665 spacing: 10px; 666 } 667 668 .weather-button .weather-header-box { 669 spacing: 6px; 670 } 671 672 .weather-button .weather-header { 673 color: rgba(239, 240, 242, 0.7); 674 font-weight: bold; 675 } 676 677 .weather-button .weather-header.location { 678 font-weight: normal; 679 color: rgba(239, 240, 242, 0.5); 680 font-size: 10pt; 681 } 682 683 .weather-button .weather-grid { 684 spacing-rows: 6px; 685 spacing-columns: 12px; 686 } 687 688 .weather-button .weather-forecast-time { 689 color: rgba(239, 240, 242, 0.7); 690 font-feature-settings: 'tnum'; 691 font-size: 9pt; 692 font-weight: normal; 693 padding-top: 0.2em; 694 padding-bottom: 0.4em; 695 } 696 697 .weather-button .weather-forecast-icon { 698 icon-size: 32px; 699 } 700 701 .weather-button .weather-forecast-temp { 702 font-weight: bold; 703 } 704 705 /* Check Boxes */ 706 .check-box StBoxLayout { 707 spacing: 0.8em; 708 } 709 710 .check-box StBin { 711 width: 24px; 712 height: 24px; 713 padding: 6px; 714 border-radius: 6px; 715 } 716 717 .check-box StBin, 718 .check-box:focus StBin { 719 background-image: url('assets/checkbox-off.svg'); 720 } 721 722 .check-box:hover StBin { 723 background-color: rgba(239, 240, 242, 0.12); 724 } 725 726 .check-box:active StBin { 727 background-color: rgba(239, 240, 242, 0.3); 728 } 729 730 .check-box:checked StBin, 731 .check-box:focus:checked StBin { 732 background-image: url('assets/checkbox-dark.svg'); 733 } 734 735 /* Activities Ripple */ 736 .ripple-box { 737 background-color: rgba(224, 224, 224, 0.35); 738 box-shadow: 0 0 2px 2px #eff0f2; 739 width: 52px; 740 height: 52px; 741 border-radius: 0 0 52px 0; 742 } 743 744 .ripple-box:rtl { 745 border-radius: 0 0 0 52px; 746 } 747 748 /* Dash */ 749 #dash { 750 font-size: 9pt; 751 } 752 753 #dash .empty-dash-drop-target { 754 width: 32px; 755 height: 32px; 756 } 757 758 .dash-label { 759 color: rgba(191, 201, 244, 0.9); 760 background-color: rgba(0, 0, 0, 0.75); 761 border-radius: 12px; 762 padding: 6px 12px; 763 box-shadow: none; 764 border: none; 765 text-align: center; 766 -y-offset: 12px; 767 -x-offset: 8px; 768 box-shadow: 0 0 0 1px rgba(15, 15, 20, 0.35); 769 border: 1px solid rgba(65, 72, 104, 0.45); 770 } 771 772 /* Modal Dialogs */ 773 .candidate-popup-content, 774 .modal-dialog { 775 background-color: #242222; 776 border-radius: 12px; 777 box-shadow: 3px 3px 8px -5px rgba(0, 0, 0, 0.35); 778 margin: 15px; 779 border: 1px solid rgba(255, 255, 255, 0.12) #bfc9f4; 780 } 781 782 .modal-dialog-linked-button:last-child { 783 color: #242222; 784 background-color: #c0caf5; 785 } 786 787 .modal-dialog-linked-button:hover:last-child { 788 color: #242222; 789 background-color: #99a7df; 790 } 791 792 .modal-dialog-linked-button:active:last-child { 793 color: #bfc9f4; 794 background-color: #8c4351; 795 } 796 797 .modal-dialog-linked-button:insensitive:last-child { 798 background-color: rgba(224, 224, 224, 0.05); 799 color: rgba(224, 224, 224, 0.35); 800 } 801 802 .headline { 803 font-size: 12pt; 804 } 805 806 .modal-dialog { 807 color: rgba(239, 240, 242, 0.7); 808 padding: 0 6px 6px 6px; 809 } 810 811 .modal-dialog-linked-button { 812 min-height: 32px; 813 padding: 6px; 814 margin: 3px !important; 815 border: none !important; 816 border-radius: 6px; 817 } 818 819 .modal-dialog-linked-button:first-child { 820 background-color: rgba(239, 240, 242, 0.04); 821 } 822 823 .modal-dialog-linked-button:first-child:focus { 824 color: #eff0f2; 825 background-color: rgba(239, 240, 242, 0.08); 826 box-shadow: none !important; 827 } 828 829 .modal-dialog-linked-button:first-child:hover { 830 color: #eff0f2; 831 background-color: rgba(239, 240, 242, 0.12); 832 } 833 834 .modal-dialog-linked-button:first-child:active { 835 color: #eff0f2; 836 background-color: rgba(239, 240, 242, 0.2); 837 box-shadow: none !important; 838 } 839 840 .modal-dialog .modal-dialog-content-box { 841 margin: 30px 42px; 842 spacing: 30px; 843 max-width: 28em; 844 } 845 846 .end-session-dialog { 847 width: 30em; 848 } 849 850 .end-session-dialog .end-session-dialog-battery-warning, 851 .end-session-dialog .dialog-list-title { 852 color: #fdd633; 853 } 854 855 .message-dialog-content { 856 spacing: 18px; 857 } 858 859 .message-dialog-content .message-dialog-title { 860 text-align: center; 861 font-size: 18pt; 862 font-weight: 800; 863 } 864 865 .message-dialog-content .message-dialog-title.lightweight { 866 font-size: 13pt; 867 font-weight: 800; 868 } 869 870 .message-dialog-content .message-dialog-description { 871 text-align: center; 872 } 873 874 .dialog-list { 875 spacing: 18px; 876 } 877 878 .dialog-list .dialog-list-title { 879 text-align: center; 880 font-weight: bold; 881 } 882 883 .dialog-list .dialog-list-scrollview { 884 max-height: 200px; 885 } 886 887 .dialog-list .dialog-list-box { 888 spacing: 1em; 889 } 890 891 .dialog-list .dialog-list-box .dialog-list-item { 892 spacing: 1em; 893 } 894 895 .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { 896 font-weight: bold; 897 } 898 899 .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { 900 color: rgba(239, 240, 242, 0.7); 901 font-size: 10pt; 902 } 903 904 .run-dialog .modal-dialog-content-box { 905 margin-top: 24px; 906 margin-bottom: 12px; 907 } 908 909 .run-dialog .run-dialog-entry { 910 width: 20em; 911 } 912 913 .run-dialog .run-dialog-description { 914 text-align: center; 915 color: rgba(239, 240, 242, 0.7); 916 font-size: 10pt; 917 } 918 919 .prompt-dialog { 920 width: 28em; 921 } 922 923 .prompt-dialog .modal-dialog-content-box { 924 margin-bottom: 24px; 925 } 926 927 .prompt-dialog-password-grid { 928 spacing-rows: 8px; 929 spacing-columns: 4px; 930 } 931 932 .prompt-dialog-password-grid .prompt-dialog-password-entry { 933 width: auto; 934 } 935 936 .prompt-dialog-password-grid .prompt-dialog-password-entry:ltr { 937 margin-left: 20px; 938 } 939 940 .prompt-dialog-password-grid .prompt-dialog-password-entry:rtl { 941 margin-right: 20px; 942 } 943 944 .prompt-dialog-password-layout { 945 spacing: 8px; 946 } 947 948 .prompt-dialog-password-entry { 949 width: 20em; 950 } 951 952 .prompt-dialog-error-label, 953 .prompt-dialog-info-label, 954 .prompt-dialog-null-label { 955 text-align: center; 956 font-size: 10pt; 957 margin: 6px; 958 } 959 960 .prompt-dialog-error-label { 961 color: #f28b82; 962 } 963 964 .prompt-dialog-info-label, 965 .prompt-dialog-null-label { 966 color: rgba(239, 240, 242, 0.5); 967 } 968 969 .polkit-dialog-user-layout { 970 text-align: center; 971 spacing: 8px; 972 margin-bottom: 6px; 973 } 974 975 .polkit-dialog-user-layout .polkit-dialog-user-root-label { 976 color: #fdd633; 977 } 978 979 .audio-device-selection-dialog .modal-dialog-content-box { 980 margin-bottom: 28px; 981 } 982 983 .audio-device-selection-dialog .audio-selection-box { 984 spacing: 20px; 985 } 986 987 .audio-selection-device { 988 border: 1px solid rgba(255, 255, 255, 0.12, 0.12); 989 border-radius: 6px; 990 } 991 992 .audio-selection-device:hover, 993 .audio-selection-device:focus { 994 background-color: rgba(239, 240, 242, 0.12); 995 } 996 997 .audio-selection-device:active { 998 background-color: #bfc9f4; 999 color: rgba(0, 0, 0, 0.87); 1000 } 1001 1002 .audio-selection-device-box { 1003 padding: 18px; 1004 spacing: 18px; 1005 } 1006 1007 .audio-selection-device-icon { 1008 icon-size: 64px; 1009 } 1010 1011 .welcome-dialog-image { 1012 background-image: url('resource:///org/gnome/shell/theme/gnome-shell-start.svg'); 1013 background-size: contain; 1014 height: 300px; 1015 width: 300px; 1016 } 1017 1018 /* Entries */ 1019 StEntry, 1020 /* /* .popup-menu */ */ .search-entry { 1021 min-height: 32px; 1022 padding: 2px 12px; 1023 margin: 2px; 1024 border-width: 0; 1025 border-radius: 6px; 1026 color: #bfc9f4; 1027 caret-color: #bfc9f4; 1028 selection-background-color: #bfc9f4; 1029 selected-color: rgba(0, 0, 0, 0.6); 1030 color: #bfc9f4; 1031 background-color: rgba(191, 201, 244, 0.04); 1032 border: 1px solid rgba(255, 255, 255, 0.12) transparent; 1033 box-shadow: none; 1034 } 1035 1036 StEntry:hover, 1037 /* /* .popup-menu */ */ .search-entry:hover { 1038 color: #bfc9f4; 1039 border-color: rgba(191, 201, 244, 0.3); 1040 background-color: rgba(191, 201, 244, 0.04); 1041 } 1042 1043 StEntry:focus, 1044 /* /* .popup-menu */ */ .search-entry:focus { 1045 color: #eff0f2; 1046 border-color: #bfc9f4; 1047 background-color: rgba(239, 240, 242, 0.04); 1048 box-shadow: none; 1049 } 1050 1051 StEntry:insensitive, 1052 /* /* .popup-menu */ */ .search-entry:insensitive { 1053 background-color: rgba(239, 240, 242, 0.04); 1054 color: rgba(239, 240, 242, 0.35); 1055 border-color: transparent; 1056 } 1057 1058 StEntry StIcon.capslock-warning, 1059 /* /* .popup-menu */ */ .search-entry StIcon.capslock-warning { 1060 icon-size: 16px; 1061 warning-color: #fdd633; 1062 padding: 0 0; 1063 } 1064 1065 StEntry StIcon.peek-password, 1066 /* /* .popup-menu */ */ .search-entry StIcon.peek-password { 1067 icon-size: 16px; 1068 padding: 0 4px; 1069 } 1070 1071 StEntry StLabel.hint-text, 1072 /* /* .popup-menu */ */ .search-entry StLabel.hint-text { 1073 margin-left: 2px; 1074 color: rgba(239, 240, 242, 0.5); 1075 } 1076 1077 .hotplug-notification-item { 1078 padding: 12px; 1079 border-style: solid; 1080 border-width: 0; 1081 border-left-width: 0; 1082 border-bottom-width: 0; 1083 } 1084 1085 .hotplug-notification-item:first-child { 1086 border-radius: 0 0 0 6px; 1087 } 1088 1089 .hotplug-notification-item:last-child { 1090 border-right-width: 0; 1091 border-radius: 0 0 6px 0; 1092 } 1093 1094 .hotplug-notification-item:first-child:last-child { 1095 border-radius: 0 0 6px 6px; 1096 } 1097 1098 .hotplug-notification-item-icon { 1099 icon-size: 24px; 1100 padding: 0 4px; 1101 } 1102 1103 .candidate-popup-boxpointer { 1104 -arrow-border-radius: 2px; 1105 -arrow-background-color: transparent; 1106 -arrow-border-width: 0; 1107 -arrow-border-color: transparent; 1108 -arrow-base: 64px; 1109 -arrow-rise: 12px; 1110 } 1111 1112 .candidate-popup-content { 1113 color: rgba(239, 240, 242, 0.7); 1114 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.35) !important; 1115 border: none; 1116 margin: 3px 8px 12px !important; 1117 padding: 6px; 1118 spacing: 6px; 1119 } 1120 1121 .candidate-index { 1122 padding: 0 0.5em 0 0; 1123 color: rgba(239, 240, 242, 0.7); 1124 } 1125 1126 .candidate-box:selected .candidate-index { 1127 color: rgba(0, 0, 0, 0.6); 1128 } 1129 1130 .candidate-box { 1131 padding: 0.3em 0.5em 0.3em 0.5em; 1132 margin-right: 2px; 1133 border-radius: 6px; 1134 color: rgba(239, 240, 242, 0.7); 1135 } 1136 1137 .candidate-box:hover { 1138 background-color: rgba(239, 240, 242, 0.12); 1139 color: #eff0f2; 1140 } 1141 1142 .candidate-box:active { 1143 background-color: rgba(239, 240, 242, 0.3); 1144 color: #eff0f2; 1145 } 1146 1147 .candidate-box:selected { 1148 background-color: #bfc9f4; 1149 color: rgba(0, 0, 0, 0.87); 1150 } 1151 1152 .candidate-box:last-child { 1153 margin-right: 0; 1154 } 1155 1156 .candidate-page-button-box { 1157 height: 2em; 1158 } 1159 1160 .vertical .candidate-page-button-box { 1161 padding-top: 0.5em; 1162 } 1163 1164 .horizontal .candidate-page-button-box { 1165 padding-left: 0.5em; 1166 } 1167 1168 .candidate-page-button { 1169 padding: 6px 9px; 1170 } 1171 1172 .candidate-page-button-previous, 1173 .candidate-page-button-next { 1174 border-radius: 6px; 1175 } 1176 1177 .candidate-page-button-icon { 1178 icon-size: 1em; 1179 } 1180 1181 /* On-screen Keyboard */ 1182 #keyboard { 1183 background-color: #242424; 1184 box-shadow: none; 1185 } 1186 1187 #keyboard .page-indicator { 1188 padding: 6px; 1189 } 1190 1191 #keyboard .page-indicator .page-indicator-icon { 1192 width: 8px; 1193 height: 8px; 1194 } 1195 1196 .key-container, 1197 .keyboard-layout { 1198 padding: 4px; 1199 spacing: 4px; 1200 } 1201 1202 .keyboard-key { 1203 font-size: 16pt; 1204 font-weight: bold; 1205 min-height: 1.2em; 1206 min-width: 1.2em; 1207 border-radius: 9px; 1208 border: none; 1209 color: rgba(239, 240, 242, 0.7); 1210 background-color: #313131; 1211 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); 1212 } 1213 1214 .keyboard-key:focus, 1215 .keyboard-key:hover { 1216 color: #eff0f2; 1217 background-color: #4b4b4b; 1218 } 1219 1220 .keyboard-key:checked, 1221 .keyboard-key:active { 1222 color: #eff0f2; 1223 background-color: #575757; 1224 } 1225 1226 .keyboard-key:grayed { 1227 background-color: #242222; 1228 color: rgba(239, 240, 242, 0.7); 1229 } 1230 1231 .keyboard-key.default-key { 1232 background-color: #272727; 1233 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); 1234 } 1235 1236 .keyboard-key.default-key:focus, 1237 .keyboard-key.default-key:hover { 1238 color: #eff0f2; 1239 background-color: #404040; 1240 } 1241 1242 .keyboard-key.default-key:checked, 1243 .keyboard-key.default-key:active { 1244 color: #eff0f2; 1245 background-color: #525252; 1246 } 1247 1248 .keyboard-key.enter-key { 1249 color: rgba(0, 0, 0, 0.87); 1250 background-color: #bfc9f4; 1251 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); 1252 } 1253 1254 .keyboard-key.enter-key:focus, 1255 .keyboard-key.enter-key:hover { 1256 color: rgba(0, 0, 0, 0.87); 1257 background-color: #ededed; 1258 } 1259 1260 .keyboard-key.enter-key:checked, 1261 .keyboard-key.enter-key:active { 1262 color: rgba(0, 0, 0, 0.87); 1263 background-color: #c7c7c7; 1264 } 1265 1266 .keyboard-key.shift-key-uppercase, 1267 .keyboard-key.shift-key-uppercase:focus, 1268 .keyboard-key.shift-key-uppercase:hover, 1269 .keyboard-key.shift-key-uppercase:checked, 1270 .keyboard-key.shift-key-uppercase:active { 1271 color: #bfc9f4; 1272 } 1273 1274 .keyboard-key StIcon { 1275 icon-size: 1.125em; 1276 } 1277 1278 .keyboard-subkeys { 1279 color: inherit; 1280 -arrow-border-radius: 12px; 1281 -arrow-background-color: #242424; 1282 -arrow-border-width: 0; 1283 -arrow-border-color: transparent; 1284 -arrow-base: 20px; 1285 -arrow-rise: 10px; 1286 -boxpointer-gap: 5px; 1287 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); 1288 } 1289 1290 .emoji-page .keyboard-key { 1291 background-color: transparent; 1292 border: none; 1293 color: initial; 1294 } 1295 1296 .emoji-panel .keyboard-key:latched { 1297 border: none; 1298 background-color: #bfc9f4; 1299 } 1300 1301 .word-suggestions { 1302 font-size: 14pt; 1303 spacing: 12px; 1304 min-height: 20pt; 1305 } 1306 1307 /* Login Dialog */ 1308 #lockDialogGroup { 1309 background-color: #333333; 1310 } 1311 1312 .login-dialog-banner-view { 1313 padding-top: 24px; 1314 max-width: 23em; 1315 } 1316 1317 .login-dialog, 1318 .unlock-dialog { 1319 border: none; 1320 background-color: transparent; 1321 } 1322 1323 .login-dialog StEntry, 1324 .unlock-dialog StEntry { 1325 selection-background-color: #bfc9f4; 1326 selected-color: rgba(0, 0, 0, 0.87); 1327 padding: 4px 8px; 1328 min-height: 26px; 1329 border-radius: 9999px; 1330 caret-color: rgba(0, 0, 0, 0.87); 1331 background-color: rgba(239, 240, 242, 0.04); 1332 border-radius: 0; 1333 border: none; 1334 box-shadow: inset 0 -1px rgba(0, 0, 0, 0.15); 1335 color: rgba(0, 0, 0, 0.87); 1336 } 1337 1338 .login-dialog StEntry:focus, 1339 .unlock-dialog StEntry:focus { 1340 border: none; 1341 background-color: rgba(239, 240, 242, 0.04); 1342 box-shadow: inset 0 -2px #bfc9f4; 1343 color: rgba(0, 0, 0, 0.87); 1344 } 1345 1346 .login-dialog StEntry:insensitive, 1347 .unlock-dialog StEntry:insensitive { 1348 border: none; 1349 background-color: rgba(239, 240, 242, 0.04); 1350 color: rgba(0, 0, 0, 0.35); 1351 } 1352 1353 .login-dialog StEntry StLabel.hint-text, 1354 .unlock-dialog StEntry StLabel.hint-text { 1355 color: rgba(0, 0, 0, 0.38); 1356 } 1357 1358 .login-dialog .modal-dialog-button-box, 1359 .unlock-dialog .modal-dialog-button-box { 1360 spacing: 3px; 1361 } 1362 1363 .login-dialog .modal-dialog-button, 1364 .unlock-dialog .modal-dialog-button { 1365 padding: 0 16px; 1366 border: none; 1367 color: rgba(0, 0, 0, 0.87); 1368 background-color: transparent; 1369 box-shadow: none !important; 1370 } 1371 1372 .login-dialog .modal-dialog-button:hover, 1373 .login-dialog .modal-dialog-button:focus, 1374 .unlock-dialog .modal-dialog-button:hover, 1375 .unlock-dialog .modal-dialog-button:focus { 1376 color: rgba(0, 0, 0, 0.87); 1377 background-color: rgba(239, 240, 242, 0.12); 1378 } 1379 1380 .login-dialog .modal-dialog-button:active, 1381 .unlock-dialog .modal-dialog-button:active { 1382 color: rgba(0, 0, 0, 0.87); 1383 background-color: rgba(239, 240, 242, 0.2); 1384 box-shadow: none !important; 1385 } 1386 1387 .login-dialog .modal-dialog-button:insensitive, 1388 .unlock-dialog .modal-dialog-button:insensitive { 1389 background-color: transparent; 1390 color: rgba(0, 0, 0, 0.35); 1391 box-shadow: none !important; 1392 } 1393 1394 .login-dialog .modal-dialog-button:default, 1395 .unlock-dialog .modal-dialog-button:default { 1396 color: rgba(0, 0, 0, 0.87); 1397 background-color: #242222; 1398 box-shadow: none !important; 1399 } 1400 1401 .login-dialog .modal-dialog-button:default:hover, 1402 .login-dialog .modal-dialog-button:default:focus, 1403 .unlock-dialog .modal-dialog-button:default:hover, 1404 .unlock-dialog .modal-dialog-button:default:focus { 1405 color: rgba(0, 0, 0, 0.87); 1406 background-color: rgba(239, 240, 242, 0.12); 1407 box-shadow: none !important; 1408 } 1409 1410 .login-dialog .modal-dialog-button:default:active, 1411 .unlock-dialog .modal-dialog-button:default:active { 1412 color: rgba(0, 0, 0, 0.87); 1413 background-color: rgba(239, 240, 242, 0.2); 1414 box-shadow: none !important; 1415 } 1416 1417 .login-dialog .modal-dialog-button:default:insensitive, 1418 .unlock-dialog .modal-dialog-button:default:insensitive { 1419 color: rgba(0, 0, 0, 0.35); 1420 background-color: #242222; 1421 box-shadow: none !important; 1422 } 1423 1424 .login-dialog .cancel-button, 1425 .login-dialog .switch-user-button, 1426 .login-dialog .login-dialog-session-list-button, 1427 .unlock-dialog .cancel-button, 1428 .unlock-dialog .switch-user-button, 1429 .unlock-dialog .login-dialog-session-list-button { 1430 padding: 0; 1431 border-radius: 100px; 1432 width: 32px; 1433 height: 32px; 1434 border: none; 1435 background-color: rgba(239, 240, 242, 0.12); 1436 color: #eff0f2; 1437 } 1438 1439 .login-dialog .cancel-button StIcon, 1440 .login-dialog .switch-user-button StIcon, 1441 .login-dialog .login-dialog-session-list-button StIcon, 1442 .unlock-dialog .cancel-button StIcon, 1443 .unlock-dialog .switch-user-button StIcon, 1444 .unlock-dialog .login-dialog-session-list-button StIcon { 1445 icon-size: 16px; 1446 } 1447 1448 .login-dialog .login-dialog-message-warning, 1449 .unlock-dialog .login-dialog-message-warning { 1450 color: rgba(239, 240, 242, 0.7); 1451 } 1452 1453 .login-dialog-logo-bin { 1454 padding: 24px 0px; 1455 } 1456 1457 .login-dialog-banner { 1458 color: rgba(239, 240, 242, 0.7); 1459 } 1460 1461 .login-dialog-button-box { 1462 spacing: 5px; 1463 } 1464 1465 .login-dialog-message { 1466 text-align: center; 1467 } 1468 1469 .login-dialog-message-warning { 1470 color: #fdd633; 1471 } 1472 1473 .login-dialog-message-hint { 1474 padding-top: 0; 1475 padding-bottom: 20px; 1476 } 1477 1478 .login-dialog-user-selection-box { 1479 padding: 100px 0px; 1480 } 1481 1482 .login-dialog-not-listed-label { 1483 padding-left: 2px; 1484 } 1485 1486 .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, 1487 .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { 1488 color: #eff0f2; 1489 } 1490 1491 .login-dialog-not-listed-label { 1492 font-size: 1em; 1493 font-weight: bold; 1494 color: rgba(239, 240, 242, 0.7); 1495 padding-top: 1em; 1496 } 1497 1498 .login-dialog-not-listed-label:hover { 1499 color: rgba(239, 240, 242, 0.7); 1500 } 1501 1502 .login-dialog-not-listed-label:focus { 1503 background-color: rgba(239, 240, 242, 0.12); 1504 } 1505 1506 .login-dialog-user-list-view { 1507 -st-vfade-offset: 1em; 1508 } 1509 1510 .login-dialog-user-list { 1511 spacing: 12px; 1512 padding: 0.2em; 1513 width: 23em; 1514 } 1515 1516 .login-dialog-user-list:expanded .login-dialog-user-list-item:selected, 1517 .login-dialog-user-list:expanded .login-dialog-user-list-item:hover, 1518 .login-dialog-user-list:expanded .login-dialog-user-list-item:active { 1519 background-color: rgba(239, 240, 242, 0.3); 1520 color: rgba(239, 240, 242, 0.7); 1521 } 1522 1523 .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { 1524 border-right: 2px solid #bfc9f4; 1525 } 1526 1527 .login-dialog-user-list-item { 1528 border-radius: 12px; 1529 padding: 6px; 1530 color: rgba(239, 240, 242, 0.7); 1531 } 1532 1533 .login-dialog-user-list-item:ltr .user-widget { 1534 padding-right: 1em; 1535 } 1536 1537 .login-dialog-user-list-item:rtl .user-widget { 1538 padding-left: 1em; 1539 } 1540 1541 .login-dialog-user-list-item:focus { 1542 background-color: rgba(239, 240, 242, 0.04) !important; 1543 } 1544 1545 .login-dialog-user-list-item:hover, 1546 .login-dialog-user-list-item:focus:hover { 1547 background-color: rgba(239, 240, 242, 0.12) !important; 1548 color: rgba(239, 240, 242, 0.7); 1549 } 1550 1551 .login-dialog-user-list-item:active, 1552 .login-dialog-user-list-item:focus:active { 1553 background-color: rgba(239, 240, 242, 0.3) !important; 1554 color: rgba(239, 240, 242, 0.7); 1555 } 1556 1557 .login-dialog-user-list-item .login-dialog-timed-login-indicator { 1558 height: 2px; 1559 margin: 6px 0 0 0; 1560 background-color: rgba(239, 240, 242, 0.12) !important; 1561 } 1562 1563 .user-widget-label { 1564 color: rgba(239, 240, 242, 0.7); 1565 } 1566 1567 .user-widget.horizontal .user-widget-label { 1568 font-size: 13pt; 1569 font-weight: bold; 1570 padding-left: 15px; 1571 } 1572 1573 .user-widget.horizontal .user-widget-label:ltr { 1574 padding-left: 14px; 1575 text-align: left; 1576 } 1577 1578 .user-widget.horizontal .user-widget-label:rtl { 1579 padding-right: 14px; 1580 text-align: right; 1581 } 1582 1583 .user-widget.vertical .user-widget-label { 1584 font-size: 16pt; 1585 text-align: center; 1586 font-weight: normal; 1587 padding-top: 16px; 1588 } 1589 1590 .login-dialog-prompt-layout { 1591 padding-top: 24px; 1592 padding-bottom: 12px; 1593 spacing: 12px; 1594 width: 23em; 1595 } 1596 1597 .login-dialog-prompt-entry { 1598 height: 1.5em; 1599 } 1600 1601 .login-dialog-prompt-label { 1602 color: rgba(239, 240, 242, 0.7); 1603 font-size: 12pt; 1604 padding-top: 1em; 1605 } 1606 1607 /* Looking Glass */ 1608 #LookingGlassDialog { 1609 background-color: #242222 !important; 1610 spacing: 4px; 1611 padding: 0; 1612 border-radius: 6px; 1613 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25); 1614 color: #eff0f2 !important; 1615 border: 1px solid rgba(255, 255, 255, 0.12) #bfc9f4; 1616 border-top: none; 1617 } 1618 1619 #LookingGlassDialog > #Toolbar { 1620 padding: 0 6px; 1621 border: none; 1622 border-radius: 0; 1623 background-color: #242222 !important; 1624 box-shadow: inset 0 -1px 0 rgba(239, 240, 242, 0.12); 1625 spacing: 6px; 1626 } 1627 1628 #LookingGlassDialog > #Toolbar .lg-toolbar-button { 1629 padding: 6px 12px; 1630 } 1631 1632 #LookingGlassDialog > #Toolbar .lg-toolbar-button > StIcon { 1633 icon-size: 16px; 1634 } 1635 1636 #LookingGlassDialog .labels { 1637 spacing: 6px; 1638 } 1639 1640 #LookingGlassDialog .notebook-tab { 1641 -natural-hpadding: 12px; 1642 -minimum-hpadding: 12px; 1643 font-weight: bold; 1644 color: rgba(239, 240, 242, 0.5); 1645 padding: 6px 12px; 1646 transition-duration: 100ms; 1647 border-bottom-width: 0; 1648 border-radius: 0; 1649 } 1650 1651 #LookingGlassDialog .notebook-tab:hover { 1652 background-color: rgba(239, 240, 242, 0.04); 1653 color: #eff0f2; 1654 text-shadow: none; 1655 } 1656 1657 #LookingGlassDialog .notebook-tab:selected { 1658 border-color: transparent; 1659 background-color: rgba(239, 240, 242, 0.12); 1660 box-shadow: inset 0 -2px 0 #bfc9f4; 1661 color: #eff0f2; 1662 text-shadow: none; 1663 } 1664 1665 #LookingGlassDialog StBoxLayout#EvalBox { 1666 padding: 4px; 1667 spacing: 6px; 1668 padding: 6px; 1669 } 1670 1671 #LookingGlassDialog StBoxLayout#ResultsArea { 1672 spacing: 6px; 1673 padding: 6px; 1674 } 1675 1676 .lg-dialog StEntry { 1677 min-height: 22px; 1678 selection-background-color: #bfc9f4; 1679 selected-color: rgba(0, 0, 0, 0.87); 1680 } 1681 1682 .lg-dialog .shell-link { 1683 color: #c0caf5; 1684 } 1685 1686 .lg-dialog .shell-link:hover { 1687 color: #c0caf5; 1688 } 1689 1690 .lg-dialog .shell-link:active { 1691 color: #c0caf5; 1692 } 1693 1694 .lg-dialog .actor-link { 1695 color: rgba(239, 240, 242, 0.7); 1696 } 1697 1698 .lg-dialog .actor-link:hover { 1699 color: #eff0f2; 1700 } 1701 1702 .lg-dialog .actor-link:active { 1703 color: rgba(239, 240, 242, 0.7); 1704 } 1705 1706 .lg-completions-text { 1707 font-size: 0.9em; 1708 font-style: italic; 1709 } 1710 1711 .lg-obj-inspector-title { 1712 spacing: 6px; 1713 } 1714 1715 .lg-obj-inspector-button { 1716 padding: 0 16px; 1717 border: none; 1718 border-radius: 6px; 1719 } 1720 1721 .lg-obj-inspector-button:hover { 1722 border: none; 1723 } 1724 1725 #lookingGlassExtensions { 1726 padding: 6px; 1727 } 1728 1729 .lg-extensions-list { 1730 padding: 6px; 1731 spacing: 6px; 1732 } 1733 1734 .lg-extension { 1735 border-radius: 6px; 1736 background-color: rgba(239, 240, 242, 0.04) !important; 1737 color: #eff0f2 !important; 1738 padding: 12px; 1739 box-shadow: none; 1740 border: 1px solid rgba(255, 255, 255, 0.12) #bfc9f4; 1741 } 1742 1743 .lg-extension-name { 1744 font-weight: bold; 1745 } 1746 1747 .lg-extension-meta { 1748 spacing: 6px; 1749 } 1750 1751 #LookingGlassPropertyInspector { 1752 color: rgba(239, 240, 242, 0.7) !important; 1753 background: #242222 !important; 1754 border: none; 1755 border-radius: 6px; 1756 padding: 6px; 1757 margin: 5px 8px 11px; 1758 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25); 1759 } 1760 1761 .lg-debug-flag-button { 1762 color: rgba(239, 240, 242, 0.7); 1763 } 1764 1765 .lg-debug-flag-button StLabel { 1766 padding: 6px 12px; 1767 } 1768 1769 .lg-debug-flag-button:hover { 1770 color: #eff0f2; 1771 } 1772 1773 .lg-debug-flag-button:active { 1774 color: rgba(239, 240, 242, 0.7); 1775 } 1776 1777 .lg-debug-flags-header { 1778 padding-top: 12px; 1779 padding: 6px; 1780 margin: 6px; 1781 color: rgba(239, 240, 242, 0.3); 1782 } 1783 1784 /* Message List */ 1785 .message-list { 1786 width: 31.5em; 1787 padding: 6px; 1788 text-shadow: none; 1789 } 1790 1791 .message-list .message-list-placeholder { 1792 spacing: 12px; 1793 } 1794 1795 .message-list-sections { 1796 margin: 0 16px; 1797 } 1798 1799 .message-list-section, 1800 .message-list-sections, 1801 .message-list-section-list { 1802 spacing: 6px; 1803 } 1804 1805 .message-list-controls { 1806 margin: 8px 16px 0; 1807 padding: 4px; 1808 spacing: 12px; 1809 } 1810 1811 .message { 1812 margin: 3px 0; 1813 } 1814 1815 .message .message-icon-bin { 1816 padding: 18px 12px; 1817 padding-right: 6px; 1818 } 1819 1820 .message .message-icon-bin:rtl { 1821 padding-left: 6px; 1822 } 1823 1824 .message .message-icon-bin > StIcon { 1825 icon-size: 32px; 1826 -st-icon-style: symbolic; 1827 } 1828 1829 .message .message-icon-bin > .fallback-app-icon { 1830 width: 16px; 1831 height: 16px; 1832 } 1833 1834 .message .message-secondary-bin { 1835 padding: 0 8px; 1836 } 1837 1838 .message .message-secondary-bin > .event-time { 1839 color: rgba(239, 240, 242, 0.5); 1840 font-size: 9pt; 1841 text-align: right; 1842 padding-bottom: 0; 1843 } 1844 1845 .message .message-secondary-bin > .event-time:ltr { 1846 text-align: right; 1847 } 1848 1849 .message .message-secondary-bin > .event-time:rtl { 1850 text-align: left; 1851 } 1852 1853 .message .message-title { 1854 color: #eff0f2; 1855 font-weight: bold; 1856 padding-top: 0.57em; 1857 } 1858 1859 .message .message-content { 1860 padding: 6px; 1861 margin-bottom: 4px; 1862 spacing: 4px; 1863 color: rgba(239, 240, 242, 0.5); 1864 } 1865 1866 .message .message-close-button { 1867 color: rgba(239, 240, 242, 0.7); 1868 padding: 4px; 1869 height: 20px; 1870 width: 20px; 1871 border-radius: 9999px; 1872 } 1873 1874 .message .message-close-button:hover, 1875 .message .message-close-button:active { 1876 color: #eff0f2; 1877 } 1878 1879 .message .message-close-button:hover, 1880 .message .message-close-button:focus { 1881 background-color: rgba(239, 240, 242, 0.12); 1882 } 1883 1884 .message .message-close-button:active { 1885 background-color: rgba(239, 240, 242, 0.3); 1886 } 1887 1888 .message .message-body { 1889 color: rgba(239, 240, 242, 0.5); 1890 } 1891 1892 .url-highlighter { 1893 link-color: #c0caf5; 1894 } 1895 1896 .message-media-control { 1897 margin: 20px 6px; 1898 padding: 9px; 1899 border-radius: 9999px; 1900 color: rgba(239, 240, 242, 0.7); 1901 } 1902 1903 .message-media-control:hover, 1904 .message-media-control:focus { 1905 color: #eff0f2; 1906 background-color: rgba(239, 240, 242, 0.12); 1907 } 1908 1909 .message-media-control:active { 1910 color: #eff0f2; 1911 background-color: rgba(239, 240, 242, 0.3); 1912 } 1913 1914 .message-media-control:insensitive { 1915 color: rgba(239, 240, 242, 0.3); 1916 } 1917 1918 .message-media-control:last-child:ltr { 1919 margin-right: 16px; 1920 } 1921 1922 .message-media-control:last-child:rtl { 1923 margin-left: 16px; 1924 } 1925 1926 .media-message-cover-icon { 1927 icon-size: 32px !important; 1928 } 1929 1930 .media-message-cover-icon.fallback { 1931 icon-size: 24px !important; 1932 padding: 6px; 1933 border: none; 1934 border-radius: 6px; 1935 background-color: rgba(239, 240, 242, 0.12); 1936 color: rgba(239, 240, 242, 0.5); 1937 } 1938 1939 .select-area-rubberband { 1940 background-color: rgba(224, 224, 224, 0.3); 1941 border: 1px solid #bfc9f4; 1942 border-radius: 6px; 1943 } 1944 1945 .user-icon { 1946 background-size: contain; 1947 color: rgba(239, 240, 242, 0.7); 1948 border-radius: 9999px; 1949 border: none; 1950 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); 1951 icon-size: 64px; 1952 } 1953 1954 .modal-dialog .user-icon { 1955 box-shadow: none; 1956 } 1957 1958 .user-icon:hover { 1959 color: #eff0f2; 1960 } 1961 1962 .user-icon StIcon { 1963 background-color: #eff0f2; 1964 border-radius: 9999px; 1965 padding: 12px; 1966 width: 40px; 1967 height: 40px; 1968 } 1969 1970 .user-icon.user-avatar { 1971 border: 1px solid rgba(255, 255, 255, 0.12) #bfc9f4; 1972 } 1973 1974 .user-widget.vertical .user-icon { 1975 icon-size: 96px; 1976 } 1977 1978 .user-widget.vertical .user-icon StIcon { 1979 padding: 20px; 1980 padding-top: 18px; 1981 padding-bottom: 22px; 1982 width: 88px; 1983 height: 88px; 1984 } 1985 1986 .lightbox { 1987 background-color: black; 1988 } 1989 1990 .flashspot { 1991 background-color: #eff0f2; 1992 } 1993 1994 .hidden { 1995 color: rgba(0, 0, 0, 0); 1996 } 1997 1998 .caps-lock-warning-label { 1999 text-align: center; 2000 padding-bottom: 8px; 2001 font-size: 10pt; 2002 color: #fdd633; 2003 } 2004 2005 /* Network Dialogs */ 2006 .nm-dialog { 2007 max-height: 34em; 2008 min-height: 31em; 2009 min-width: 32em; 2010 } 2011 2012 .nm-dialog-content { 2013 spacing: 20px; 2014 padding: 24px; 2015 } 2016 2017 .nm-dialog-header-hbox { 2018 spacing: 10px; 2019 } 2020 2021 .nm-dialog-airplane-box { 2022 spacing: 12px; 2023 } 2024 2025 .nm-dialog-airplane-headline { 2026 font-weight: bold; 2027 text-align: center; 2028 } 2029 2030 .nm-dialog-airplane-text { 2031 color: #eff0f2; 2032 } 2033 2034 .nm-dialog-header { 2035 font-weight: bold; 2036 } 2037 2038 .nm-dialog-header-icon { 2039 icon-size: 32px; 2040 } 2041 2042 .nm-dialog-header-hbox { 2043 spacing: 10px; 2044 } 2045 2046 .nm-dialog-scroll-view { 2047 border: none; 2048 padding: 0; 2049 background-color: rgba(239, 240, 242, 0.04); 2050 border-radius: 6px; 2051 } 2052 2053 .nm-dialog-item { 2054 font-size: 11pt; 2055 border-bottom: none; 2056 padding: 12px; 2057 spacing: 0px; 2058 } 2059 2060 .nm-dialog-item:selected { 2061 background-color: #bfc9f4; 2062 color: rgba(0, 0, 0, 0.87); 2063 } 2064 2065 .nm-dialog-item:hover, 2066 .nm-dialog-item:focus { 2067 background-color: rgba(239, 240, 242, 0.12); 2068 } 2069 2070 .nm-dialog-item:active { 2071 background-color: rgba(239, 240, 242, 0.3); 2072 } 2073 2074 .nm-dialog-icon { 2075 icon-size: 16px; 2076 } 2077 2078 .nm-dialog-icons { 2079 spacing: 12px; 2080 } 2081 2082 .no-networks-label { 2083 color: rgba(239, 240, 242, 0.5); 2084 } 2085 2086 .no-networks-box { 2087 spacing: 6px; 2088 } 2089 2090 /* Notifications & Message Tray */ 2091 .notification-banner { 2092 width: 34em; 2093 min-height: 64px; 2094 margin: 2px 5px 8px; 2095 border-radius: 6px; 2096 color: rgba(239, 240, 242, 0.7); 2097 background-color: #242222; 2098 border: none; 2099 text-shadow: none; 2100 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25); 2101 border-radius: 12px; 2102 } 2103 2104 .notification-banner:hover { 2105 color: #eff0f2; 2106 background-color: #242222; 2107 box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25); 2108 margin: 2px 12px 17px; 2109 } 2110 2111 .notification-banner:focus { 2112 color: #eff0f2; 2113 background-color: #242222; 2114 } 2115 2116 .notification-banner .notification-actions { 2117 background-color: transparent; 2118 padding-top: 0; 2119 border-top: 1px solid rgba(239, 240, 242, 0.12); 2120 spacing: 0; 2121 } 2122 2123 .notification-banner .notification-button { 2124 min-height: 44px; 2125 padding: 0 18px; 2126 background-color: transparent; 2127 color: rgba(239, 240, 242, 0.7); 2128 font-weight: 500; 2129 border-width: 0; 2130 } 2131 2132 .notification-banner .notification-button:first-child { 2133 border-radius: 0 0 0 12px; 2134 } 2135 2136 .notification-banner .notification-button:last-child { 2137 border-radius: 0 0 12px 0; 2138 } 2139 2140 .notification-banner .notification-button:only-child, 2141 .notification-banner .notification-button:first-child:last-child { 2142 border-radius: 0 0 12px 12px; 2143 } 2144 2145 .notification-banner .notification-button:focus { 2146 background-color: transparent; 2147 color: #eff0f2; 2148 box-shadow: inset 0 0 0 2px rgba(239, 240, 242, 0.12); 2149 } 2150 2151 .notification-banner .notification-button:hover, 2152 .notification-banner .notification-button:focus:hover { 2153 background-color: rgba(239, 240, 242, 0.12); 2154 color: #eff0f2; 2155 box-shadow: none; 2156 } 2157 2158 .notification-banner .notification-button:active { 2159 background-color: rgba(239, 240, 242, 0.3); 2160 color: #eff0f2; 2161 } 2162 2163 .summary-source-counter { 2164 font-size: fontsize(10); 2165 font-weight: bold; 2166 height: 1.6em; 2167 width: 1.6em; 2168 -shell-counter-overlap-x: 3px; 2169 -shell-counter-overlap-y: 3px; 2170 background-color: #bfc9f4; 2171 color: rgba(0, 0, 0, 0.87); 2172 border: 1px solid rgba(255, 255, 255, 0.12, 0.3); 2173 box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); 2174 border-radius: 0.9em; 2175 } 2176 2177 .chat-body { 2178 spacing: 5px; 2179 } 2180 2181 .chat-response { 2182 margin: 5px; 2183 } 2184 2185 .chat-log-message { 2186 color: rgba(239, 240, 242, 0.7); 2187 } 2188 2189 .chat-new-group { 2190 padding-top: 1em; 2191 } 2192 2193 .chat-received { 2194 padding-left: 4px; 2195 } 2196 2197 .chat-received:rtl { 2198 padding-left: 0px; 2199 padding-right: 4px; 2200 } 2201 2202 .chat-sent { 2203 padding-left: 18pt; 2204 color: rgba(239, 240, 242, 0.7); 2205 } 2206 2207 .chat-sent:rtl { 2208 padding-left: 0; 2209 padding-right: 18pt; 2210 } 2211 2212 .chat-meta-message { 2213 padding-left: 4px; 2214 font-size: 9pt; 2215 color: rgba(239, 240, 242, 0.5); 2216 } 2217 2218 .chat-meta-message:rtl { 2219 padding-left: 0; 2220 padding-right: 4px; 2221 } 2222 2223 /* OSD */ 2224 .workspace-switcher-container, 2225 .switcher-list, 2226 .resize-popup, 2227 .osd-window { 2228 color: rgba(239, 240, 242, 0.7); 2229 background-color: #333333; 2230 border: none; 2231 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25); 2232 margin: 5px 8px 11px; 2233 border-radius: 12px; 2234 padding: 12px; 2235 } 2236 2237 .osd-window { 2238 text-align: center; 2239 font-weight: bold; 2240 } 2241 2242 .osd-window .osd-monitor-label { 2243 font-size: 3em; 2244 } 2245 2246 .osd-window .level { 2247 height: 3px; 2248 border-radius: 2px; 2249 background-color: rgba(239, 240, 242, 0.15); 2250 color: #eff0f2; 2251 -barlevel-height: 3px; 2252 -barlevel-background-color: rgba(239, 240, 242, 0.15); 2253 -barlevel-active-background-color: #eff0f2; 2254 -barlevel-overdrive-color: #f28b82; 2255 -barlevel-overdrive-separator-width: 2px; 2256 -barlevel-border-width: 0; 2257 -barlevel-border-color: rgba(239, 240, 242, 0.12); 2258 } 2259 2260 .osd-window .level-bar { 2261 background-color: #eff0f2; 2262 border-radius: 2px; 2263 } 2264 2265 .pad-osd-window { 2266 padding: 32px; 2267 background-color: #333333; 2268 } 2269 2270 .pad-osd-window .pad-osd-title-box { 2271 spacing: 12px; 2272 } 2273 2274 .pad-osd-window .pad-osd-title-menu-box { 2275 spacing: 6px; 2276 } 2277 2278 .combo-box-label { 2279 width: 15em; 2280 } 2281 2282 .overview-controls { 2283 padding-bottom: 30px; 2284 } 2285 2286 /* Top Bar */ 2287 #panel { 2288 background-color: rgba(0, 0, 0, 0.50); 2289 font-weight: bold; 2290 height: 30px; 2291 color: #c0caf5; 2292 font-feature-settings: 'tnum'; 2293 transition-duration: 250ms; 2294 font-size: 10pt; 2295 margin: 4px 10px 1px; 2296 border: none; 2297 border-radius: 50px; 2298 } 2299 2300 #panel .panel-corner { 2301 -panel-corner-radius: 0; 2302 -panel-corner-background-color: #333333; 2303 -panel-corner-border-width: 2px; 2304 -panel-corner-border-color: transparent; 2305 -panel-corner-opacity: 1; 2306 transition-duration: 250ms; 2307 } 2308 2309 #panel .panel-button { 2310 -natural-hpadding: 12px; 2311 -minimum-hpadding: 6px; 2312 font-weight: bold; 2313 color: #c0caf5; 2314 transition-duration: 150ms; 2315 border-radius: 9999px; 2316 text-shadow: none; 2317 border: 1px solid rgba(255, 255, 255, 0.12) transparent; 2318 } 2319 2320 #panel .panel-button.clock-display .clock { 2321 transition-duration: 150ms; 2322 border: 1px solid rgba(255, 255, 255, 0.12) transparent; 2323 border-radius: 9999px; 2324 } 2325 2326 #panel .panel-button:hover { 2327 color: rgba(192, 202, 245, 0.7); 2328 background-color: transparent; 2329 box-shadow: inset 0 0 0 1000px rgba(65, 72, 104, 0.5); 2330 } 2331 2332 #panel .panel-button:hover.clock-display { 2333 box-shadow: none; 2334 color: rgba(192, 202, 245, 0.7); 2335 } 2336 2337 #panel .panel-button:hover.clock-display .clock { 2338 color: rgba(192, 202, 245, 0.7); 2339 box-shadow: inset 0 0 0 1000px rgba(65, 72, 104, 0.5); 2340 } 2341 2342 #panel .panel-button:active, 2343 #panel .panel-button:active:hover, 2344 #panel .panel-button:overview, 2345 #panel .panel-button:overview:hover, 2346 #panel .panel-button:focus, 2347 #panel .panel-button:focus:hover, 2348 #panel .panel-button:checked, 2349 #panel .panel-button:checked:hover { 2350 background-color: transparent; 2351 color: rgba(0, 0, 0, 0.87); 2352 box-shadow: inset 0 0 0 1000px rgba(192, 202, 245, 0.7); 2353 } 2354 2355 #panel .panel-button:active .panel-button, 2356 #panel .panel-button:overview .panel-button, 2357 #panel .panel-button:focus .panel-button, 2358 #panel .panel-button:checked .panel-button { 2359 background-color: transparent; 2360 color: rgba(0, 0, 0, 0.87); 2361 box-shadow: inset 0 0 0 1000px rgba(192, 202, 245, 0.8); 2362 } 2363 2364 #panel .panel-button:active .panel-button:hover, 2365 #panel .panel-button:overview .panel-button:hover, 2366 #panel .panel-button:focus .panel-button:hover, 2367 #panel .panel-button:checked .panel-button:hover { 2368 color: rgba(0, 0, 0, 0.87); 2369 background-color: transparent; 2370 box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.12); 2371 } 2372 2373 #panel .panel-button:active .panel-button:active, 2374 #panel .panel-button:active .panel-button:overview, 2375 #panel .panel-button:active .panel-button:focus, 2376 #panel .panel-button:active .panel-button:checked, 2377 #panel .panel-button:overview .panel-button:active, 2378 #panel .panel-button:overview .panel-button:overview, 2379 #panel .panel-button:overview .panel-button:focus, 2380 #panel .panel-button:overview .panel-button:checked, 2381 #panel .panel-button:focus .panel-button:active, 2382 #panel .panel-button:focus .panel-button:overview, 2383 #panel .panel-button:focus .panel-button:focus, 2384 #panel .panel-button:focus .panel-button:checked, 2385 #panel .panel-button:checked .panel-button:active, 2386 #panel .panel-button:checked .panel-button:overview, 2387 #panel .panel-button:checked .panel-button:focus, 2388 #panel .panel-button:checked .panel-button:checked { 2389 color: rgba(0, 0, 0, 0.87); 2390 background-color: transparent; 2391 box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); 2392 } 2393 2394 #panel .panel-button.clock-display:active, 2395 #panel .panel-button.clock-display:overview, 2396 #panel .panel-button.clock-display:focus, 2397 #panel .panel-button.clock-display:checked { 2398 box-shadow: none; 2399 color: rgba(239, 240, 242, 0.7); 2400 } 2401 2402 #panel .panel-button:active.clock-display .clock, 2403 #panel .panel-button:overview.clock-display .clock, 2404 #panel .panel-button:focus.clock-display .clock, 2405 #panel .panel-button:checked.clock-display .clock { 2406 box-shadow: inset 0 0 0 1000px rgba(192, 202, 245, 0.8); 2407 color: rgba(0, 0, 0, 0.87); 2408 } 2409 2410 .unlock-screen #panel .panel-button, 2411 .login-screen #panel .panel-button, 2412 .lock-screen #panel .panel-button { 2413 color: #eff0f2; 2414 } 2415 2416 .unlock-screen #panel .panel-button:focus, 2417 .unlock-screen #panel .panel-button:hover, 2418 .unlock-screen #panel .panel-button:active, 2419 .login-screen #panel .panel-button:focus, 2420 .login-screen #panel .panel-button:hover, 2421 .login-screen #panel .panel-button:active, 2422 .lock-screen #panel .panel-button:focus, 2423 .lock-screen #panel .panel-button:hover, 2424 .lock-screen #panel .panel-button:active { 2425 color: #eff0f2; 2426 } 2427 2428 #panel .panel-button .system-status-icon { 2429 icon-size: 16px; 2430 padding: 5px; 2431 margin: 0 4px; 2432 -st-icon-style: symbolic; 2433 } 2434 2435 #panel .panel-button .panel-status-indicators-box .system-status-icon, 2436 #panel .panel-button .panel-status-menu-box .system-status-icon { 2437 margin: 0; 2438 } 2439 2440 #panel .panel-button .app-menu-icon { 2441 -st-icon-style: symbolic; 2442 } 2443 2444 #panel #panelActivities.panel-button { 2445 -natural-hpadding: 18px; 2446 } 2447 2448 #panel:overview, 2449 #panel.unlock-screen, 2450 #panel.login-screen, 2451 #panel.lock-screen { 2452 background-color: transparent; 2453 box-shadow: none; 2454 border: transparent; 2455 } 2456 2457 #panel:overview StLabel, 2458 #panel:overview StIcon, 2459 #panel.unlock-screen StLabel, 2460 #panel.unlock-screen StIcon, 2461 #panel.login-screen StLabel, 2462 #panel.login-screen StIcon, 2463 #panel.lock-screen StLabel, 2464 #panel.lock-screen StIcon { 2465 color: rgba(192, 202, 245, 0.9); 2466 } 2467 2468 #panel:overview .panel-button:hover, 2469 #panel.unlock-screen .panel-button:hover, 2470 #panel.login-screen .panel-button:hover, 2471 #panel.lock-screen .panel-button:hover { 2472 color: rgba(192, 202, 245, 0.9); 2473 background-color: transparent; 2474 box-shadow: inset 0 0 0 1000px rgba(239, 240, 242, 0.12); 2475 } 2476 2477 #panel:overview .panel-button.clock-display:hover, 2478 #panel.unlock-screen .panel-button.clock-display:hover, 2479 #panel.login-screen .panel-button.clock-display:hover, 2480 #panel.lock-screen .panel-button.clock-display:hover { 2481 box-shadow: none; 2482 color: rgba(192, 202, 245, 0.9); 2483 } 2484 2485 #panel:overview .panel-button.clock-display:hover .clock, 2486 #panel.unlock-screen .panel-button.clock-display:hover .clock, 2487 #panel.login-screen .panel-button.clock-display:hover .clock, 2488 #panel.lock-screen .panel-button.clock-display:hover .clock { 2489 color: rgba(192, 202, 245, 0.9); 2490 box-shadow: inset 0 0 0 1000px rgba(239, 240, 242, 0.12); 2491 } 2492 2493 #panel:overview .panel-button:active, 2494 #panel:overview .panel-button:overview, 2495 #panel:overview .panel-button:focus, 2496 #panel:overview .panel-button:checked, 2497 #panel.unlock-screen .panel-button:active, 2498 #panel.unlock-screen .panel-button:overview, 2499 #panel.unlock-screen .panel-button:focus, 2500 #panel.unlock-screen .panel-button:checked, 2501 #panel.login-screen .panel-button:active, 2502 #panel.login-screen .panel-button:overview, 2503 #panel.login-screen .panel-button:focus, 2504 #panel.login-screen .panel-button:checked, 2505 #panel.lock-screen .panel-button:active, 2506 #panel.lock-screen .panel-button:overview, 2507 #panel.lock-screen .panel-button:focus, 2508 #panel.lock-screen .panel-button:checked { 2509 color: rgba(192, 202, 245, 0.9); 2510 background-color: transparent; 2511 box-shadow: inset 0 0 0 1000px rgba(26, 27, 38, 1); 2512 } 2513 2514 #panel:overview .panel-button.clock-display:active, 2515 #panel:overview .panel-button.clock-display:overview, 2516 #panel:overview .panel-button.clock-display:focus, 2517 #panel:overview .panel-button.clock-display:checked, 2518 #panel.unlock-screen .panel-button.clock-display:active, 2519 #panel.unlock-screen .panel-button.clock-display:overview, 2520 #panel.unlock-screen .panel-button.clock-display:focus, 2521 #panel.unlock-screen .panel-button.clock-display:checked, 2522 #panel.login-screen .panel-button.clock-display:active, 2523 #panel.login-screen .panel-button.clock-display:overview, 2524 #panel.login-screen .panel-button.clock-display:focus, 2525 #panel.login-screen .panel-button.clock-display:checked, 2526 #panel.lock-screen .panel-button.clock-display:active, 2527 #panel.lock-screen .panel-button.clock-display:overview, 2528 #panel.lock-screen .panel-button.clock-display:focus, 2529 #panel.lock-screen .panel-button.clock-display:checked { 2530 box-shadow: none; 2531 color: rgba(192, 202, 245, 0.9); 2532 } 2533 2534 #panel:overview .panel-button.clock-display:active .clock, 2535 #panel:overview .panel-button.clock-display:overview .clock, 2536 #panel:overview .panel-button.clock-display:focus .clock, 2537 #panel:overview .panel-button.clock-display:checked .clock, 2538 #panel.unlock-screen .panel-button.clock-display:active .clock, 2539 #panel.unlock-screen .panel-button.clock-display:overview .clock, 2540 #panel.unlock-screen .panel-button.clock-display:focus .clock, 2541 #panel.unlock-screen .panel-button.clock-display:checked .clock, 2542 #panel.login-screen .panel-button.clock-display:active .clock, 2543 #panel.login-screen .panel-button.clock-display:overview .clock, 2544 #panel.login-screen .panel-button.clock-display:focus .clock, 2545 #panel.login-screen .panel-button.clock-display:checked .clock, 2546 #panel.lock-screen .panel-button.clock-display:active .clock, 2547 #panel.lock-screen .panel-button.clock-display:overview .clock, 2548 #panel.lock-screen .panel-button.clock-display:focus .clock, 2549 #panel.lock-screen .panel-button.clock-display:checked .clock { 2550 box-shadow: inset 0 0 0 1000px rgba(239, 240, 242, 0.2); 2551 color: rgba(192, 202, 245, 0.9); 2552 } 2553 2554 #panel:overview .panel-corner, 2555 #panel.unlock-screen .panel-corner, 2556 #panel.login-screen .panel-corner, 2557 #panel.lock-screen .panel-corner { 2558 -panel-corner-radius: 0; 2559 -panel-corner-background-color: transparent; 2560 -panel-corner-border-color: transparent; 2561 } 2562 2563 #panel .panel-status-indicators-box, 2564 #panel .panel-status-menu-box { 2565 spacing: 2px; 2566 } 2567 2568 #panel .power-status.panel-status-indicators-box { 2569 spacing: 0; 2570 } 2571 2572 #panel .screencast-indicator, 2573 #panel .remote-access-indicator { 2574 color: #fdd633; 2575 } 2576 2577 /* Popovers/Menus */ 2578 /* /* /* .popup-menu */ */-boxpointer */ { 2579 -arrow-border-radius: 2px; 2580 -arrow-background-color: transparent; 2581 -arrow-border-width: 0; 2582 -arrow-border-color: transparent; 2583 -arrow-base: 64px; 2584 -arrow-rise: 0; 2585 -arrow-box-shadow: none; 2586 background: transparent; 2587 } 2588 2589 /* /* .popup-menu */ */ { 2590 min-width: 12em; 2591 color: rgba(239, 240, 242, 0.7); 2592 padding: 0 !important; 2593 font-weight: normal; 2594 font-size: 10pt; 2595 border-radius: 12px; 2596 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15); 2597 margin: 0 3px; 2598 } 2599 2600 /* /* .popup-menu */ */ /* /* .popup-menu */ */-content { 2601 padding: 6px 0 !important; 2602 background-color: #242222; 2603 border-radius: 12px; 2604 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15); 2605 margin: 4px 10px 12px; 2606 font-weight: normal; 2607 border: 1px solid rgba(255, 255, 255, 0.12) #bfc9f4; 2608 } 2609 2610 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item { 2611 spacing: 9px; 2612 padding: 6px; 2613 color: rgba(239, 240, 242, 0.7) !important; 2614 text-shadow: none; 2615 border-radius: 6px; 2616 margin: 0 6px; 2617 font-weight: normal; 2618 } 2619 2620 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item:checked { 2621 font-weight: normal; 2622 border: none; 2623 box-shadow: none; 2624 color: rgba(0, 0, 0, 0.87) !important; 2625 background-color: #bfc9f4 !important; 2626 border-radius: 6px 6px 0 0; 2627 } 2628 2629 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item:checked:focus, 2630 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item:checked:hover, 2631 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item.selected:checked { 2632 color: rgba(0, 0, 0, 0.87) !important; 2633 background-color: rgba(239, 240, 242, 0.75) !important; 2634 } 2635 2636 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item:checked:active { 2637 color: rgba(0, 0, 0, 0.87) !important; 2638 background-color: lightgray !important; 2639 } 2640 2641 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item:checked:insensitive { 2642 color: rgba(0, 0, 0, 0.38) !important; 2643 } 2644 2645 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item:focus, 2646 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item:hover, 2647 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item.selected { 2648 color: #eff0f2 !important; 2649 background-color: rgba(239, 240, 242, 0.12) !important; 2650 transition-duration: 0; 2651 } 2652 2653 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item:active, 2654 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item.selected:active { 2655 color: rgba(0, 0, 0, 0.87) !important; 2656 background-color: rgba(239, 240, 242, 0.75) !important; 2657 } 2658 2659 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item:insensitive { 2660 color: rgba(239, 240, 242, 0.3) !important; 2661 } 2662 2663 /* /* .popup-menu */ */ /* .popup-sub-menu */ { 2664 border: none; 2665 box-shadow: none; 2666 margin: 0 6px; 2667 border-radius: 0 0 6px 6px; 2668 background-color: #bfc9f4 !important; 2669 color: rgba(0, 0, 0, 0.6) !important; 2670 } 2671 2672 /* /* .popup-menu */ */ /* .popup-sub-menu */ /* /* .popup-menu */ */-item { 2673 border-radius: 0; 2674 margin: 0; 2675 color: rgba(0, 0, 0, 0.6) !important; 2676 } 2677 2678 /* /* .popup-menu */ */ /* .popup-sub-menu */ /* /* .popup-menu */ */-item:focus, 2679 /* /* .popup-menu */ */ /* .popup-sub-menu */ /* /* .popup-menu */ */-item.hover, 2680 /* /* .popup-menu */ */ /* .popup-sub-menu */ /* /* .popup-menu */ */-item.selected { 2681 color: rgba(0, 0, 0, 0.87) !important; 2682 background-color: rgba(0, 0, 0, 0.12) !important; 2683 } 2684 2685 /* /* .popup-menu */ */ /* .popup-sub-menu */ /* /* .popup-menu */ */-item:active, 2686 /* /* .popup-menu */ */ /* .popup-sub-menu */ /* /* .popup-menu */ */-item.selected:active { 2687 color: rgba(0, 0, 0, 0.87) !important; 2688 background-color: rgba(0, 0, 0, 0.26) !important; 2689 } 2690 2691 /* /* .popup-menu */ */ /* .popup-sub-menu */ /* /* .popup-menu */ */-item:insensitive { 2692 color: rgba(0, 0, 0, 0.26) !important; 2693 } 2694 2695 /* /* .popup-menu */ */ 2696 /* .popup-sub-menu */ 2697 /* /* .popup-menu */ */-section:last-child 2698 /* /* .popup-menu */ */-item:last-child { 2699 border-radius: 0 0 6px 6px; 2700 } 2701 2702 /* /* .popup-menu */ */ .popup-inactive-menu-item { 2703 color: rgba(239, 240, 242, 0.7) !important; 2704 } 2705 2706 /* /* .popup-menu */ */ .popup-inactive-menu-item:insensitive { 2707 color: rgba(239, 240, 242, 0.3) !important; 2708 } 2709 2710 /* /* .popup-menu */ */.panel-menu { 2711 -boxpointer-gap: 4px; 2712 margin-bottom: 1.75em; 2713 } 2714 2715 /* /* .popup-menu */ */-arrow, 2716 /* /* .popup-menu */ */-icon { 2717 icon-size: 16px; 2718 } 2719 2720 /* /* .popup-menu */ */-ornament { 2721 width: 1.2em; 2722 } 2723 2724 /* /* .popup-menu */ */-ornament:ltr { 2725 text-align: right; 2726 } 2727 2728 /* /* .popup-menu */ */-ornament:rtl { 2729 text-align: left; 2730 } 2731 2732 .background-menu { 2733 -boxpointer-gap: 4px; 2734 -arrow-rise: 0px; 2735 } 2736 2737 /* /* /* /* .aggregate-menu */ */ */ */ { 2738 min-width: 21em; 2739 } 2740 2741 /* /* /* /* .aggregate-menu */ */ */ */ /* /* .popup-menu */ */-icon { 2742 padding: 0; 2743 margin: 0 3px; 2744 -st-icon-style: symbolic; 2745 } 2746 2747 /* Screen Shield */ 2748 .unlock-dialog-clock { 2749 color: #eff0f2; 2750 font-weight: 300; 2751 text-align: center; 2752 spacing: 24px; 2753 padding-bottom: 2.5em; 2754 } 2755 2756 .unlock-dialog-clock-time { 2757 font-size: 64pt; 2758 padding-top: 42px; 2759 font-feature-settings: 'tnum'; 2760 } 2761 2762 .unlock-dialog-clock-date { 2763 font-size: 16pt; 2764 font-weight: normal; 2765 } 2766 2767 .unlock-dialog-clock-hint { 2768 font-weight: normal; 2769 padding-top: 48px; 2770 } 2771 2772 .unlock-dialog-notifications-container { 2773 margin: 12px 0; 2774 spacing: 6px; 2775 width: 23em; 2776 background-color: transparent; 2777 } 2778 2779 .unlock-dialog-notifications-container .summary-notification-stack-scrollview { 2780 padding-top: 0; 2781 padding-bottom: 0; 2782 } 2783 2784 .unlock-dialog-notifications-container .notification, 2785 .unlock-dialog-notifications-container .unlock-dialog-notification-source { 2786 padding: 12px 6px; 2787 border: none; 2788 background-color: #333333; 2789 color: #eff0f2; 2790 border-radius: 12px; 2791 } 2792 2793 .unlock-dialog-notifications-container .notification.critical, 2794 .unlock-dialog-notifications-container 2795 .unlock-dialog-notification-source.critical { 2796 background-color: #353535; 2797 } 2798 2799 .unlock-dialog-notification-label { 2800 padding: 0px 0px 0px 12px; 2801 } 2802 2803 .unlock-dialog-notification-count-text { 2804 weight: bold; 2805 padding: 0 6px; 2806 color: rgba(0, 0, 0, 0.87); 2807 background-color: #bfc9f4; 2808 border-radius: 9999px; 2809 margin-right: 12px; 2810 } 2811 2812 .screen-shield-background { 2813 background: black; 2814 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); 2815 } 2816 2817 #unlockDialogNotifications StButton#vhandle, 2818 #unlockDialogNotifications StButton#hhandle { 2819 background-color: rgba(44, 44, 44, 0.3); 2820 } 2821 2822 #unlockDialogNotifications StButton#vhandle:hover, 2823 #unlockDialogNotifications StButton#vhandle:focus, 2824 #unlockDialogNotifications StButton#hhandle:hover, 2825 #unlockDialogNotifications StButton#hhandle:focus { 2826 background-color: rgba(44, 44, 44, 0.5); 2827 } 2828 2829 #unlockDialogNotifications StButton#vhandle:active, 2830 #unlockDialogNotifications StButton#hhandle:active { 2831 background-color: rgba(224, 224, 224, 0.5); 2832 } 2833 2834 /* Scrollbars */ 2835 StScrollView.vfade { 2836 -st-vfade-offset: 32px; 2837 } 2838 2839 StScrollView.hfade { 2840 -st-hfade-offset: 32px; 2841 } 2842 2843 StScrollBar { 2844 padding: 0; 2845 } 2846 2847 StScrollView StScrollBar { 2848 min-width: 16px; 2849 min-height: 16px; 2850 } 2851 2852 StScrollBar StBin#trough { 2853 margin: 6px; 2854 border-radius: 9999px; 2855 background-color: rgba(239, 240, 242, 0.12); 2856 } 2857 2858 StScrollBar StButton#vhandle, 2859 StScrollBar StButton#hhandle { 2860 border-radius: 9999px; 2861 background-color: rgba(239, 240, 242, 0.5); 2862 margin: 6px; 2863 } 2864 2865 StScrollBar StButton#vhandle:hover, 2866 StScrollBar StButton#hhandle:hover { 2867 background-color: rgba(239, 240, 242, 0.7); 2868 } 2869 2870 StScrollBar StButton#vhandle:active, 2871 StScrollBar StButton#hhandle:active { 2872 background-color: #eff0f2; 2873 } 2874 2875 .app-folder-dialog .folder-name-container .folder-name-entry, 2876 .search-entry { 2877 width: 320px; 2878 min-height: 32px; 2879 padding: 0 12px; 2880 color: rgba(239, 240, 242, 0.7); 2881 transition-duration: 150ms; 2882 border-radius: 6px; 2883 caret-color: #eff0f2; 2884 selection-background-color: rgba(239, 240, 242, 0.12); 2885 selected-color: rgba(0, 0, 0, 0.87) !important; 2886 color: #eff0f2; 2887 background-color: #333333; 2888 border: 1px solid rgba(255, 255, 255, 0.12) rgba(65, 72, 104, 0.5); 2889 box-shadow: none; 2890 } 2891 2892 .app-folder-dialog .folder-name-container .folder-name-entry:hover, 2893 .search-entry:hover { 2894 color: #eff0f2; 2895 border: 1px solid rgba(255, 255, 255, 0.12) rgba(65, 72, 104, 0.8); 2896 background-color: #333333; 2897 } 2898 2899 .app-folder-dialog .folder-name-container .folder-name-entry:focus, 2900 .search-entry:focus { 2901 color: #eff0f2; 2902 border: 1px solid rgba(255, 255, 255, 0.12) rgba(65, 72, 104, 1); 2903 background-color: #333333; 2904 box-shadow: none; 2905 } 2906 2907 .app-folder-dialog .folder-name-container .folder-name-entry .search-entry-icon, 2908 .search-entry .search-entry-icon { 2909 icon-size: 16px; 2910 padding: 0 0; 2911 color: rgba(239, 240, 242, 0.3); 2912 } 2913 2914 .app-folder-dialog 2915 .folder-name-container 2916 .folder-name-entry:hover 2917 .search-entry-icon, 2918 .app-folder-dialog 2919 .folder-name-container 2920 .folder-name-entry:focus 2921 .search-entry-icon, 2922 .search-entry:hover .search-entry-icon, 2923 .search-entry:focus .search-entry-icon { 2924 color: rgba(239, 240, 242, 0.7); 2925 } 2926 2927 .app-folder-dialog .folder-name-container .folder-name-entry:insensitive, 2928 .search-entry:insensitive { 2929 background-color: rgba(44, 44, 44, 0.35); 2930 color: rgba(239, 240, 242, 0.35); 2931 border-color: transparent; 2932 } 2933 2934 .app-folder-dialog 2935 .folder-name-container 2936 .folder-name-entry:insensitive 2937 StLabel.hint-text, 2938 .app-folder-dialog 2939 .folder-name-container 2940 .folder-name-entry:insensitive 2941 .search-entry-icon, 2942 .search-entry:insensitive StLabel.hint-text, 2943 .search-entry:insensitive .search-entry-icon { 2944 color: rgba(239, 240, 242, 0.3); 2945 } 2946 2947 .app-folder-dialog .folder-name-container .folder-name-entry StLabel.hint-text, 2948 .search-entry StLabel.hint-text { 2949 color: rgba(239, 240, 242, 0.5); 2950 } 2951 2952 /* Search */ 2953 .list-search-result, 2954 .search-provider-icon { 2955 border-radius: 6px; 2956 padding: 6px; 2957 transition-duration: 100ms; 2958 text-align: center; 2959 } 2960 2961 .list-search-result:focus, 2962 .search-provider-icon:focus, 2963 .list-search-result:hover, 2964 .search-provider-icon:hover, 2965 .list-search-result:selected, 2966 .search-provider-icon:selected { 2967 background-color: rgba(239, 240, 242, 0.12); 2968 transition-duration: 200ms; 2969 } 2970 2971 .list-search-result:active, 2972 .search-provider-icon:active, 2973 .list-search-result:checked, 2974 .search-provider-icon:checked { 2975 background-color: rgba(239, 240, 242, 0.2); 2976 } 2977 2978 #searchResultsContent { 2979 max-width: 1024px; 2980 spacing: 8px; 2981 } 2982 2983 .search-section { 2984 spacing: 8px; 2985 background: none; 2986 } 2987 2988 .search-section .search-section-separator { 2989 height: 1px; 2990 background-color: rgba(239, 240, 242, 0.12); 2991 } 2992 2993 .search-section-content { 2994 spacing: 8px; 2995 border-radius: 0; 2996 padding: 18px; 2997 border: none; 2998 box-shadow: none; 2999 background: none; 3000 text-shadow: none; 3001 color: rgba(239, 240, 242, 0.7); 3002 } 3003 3004 .search-statustext { 3005 font-size: 2em; 3006 font-weight: bold; 3007 color: rgba(239, 240, 242, 0.5); 3008 } 3009 3010 .grid-search-results { 3011 spacing: 36px; 3012 } 3013 3014 .search-provider-icon .list-search-provider-content { 3015 spacing: 12px; 3016 } 3017 3018 .search-provider-icon 3019 .list-search-provider-content 3020 .list-search-provider-details { 3021 width: 120px; 3022 margin-top: 0; 3023 color: rgba(239, 240, 242, 0.5); 3024 } 3025 3026 .list-search-results { 3027 spacing: 6px; 3028 } 3029 3030 .list-search-result .list-search-result-content { 3031 spacing: 6px; 3032 } 3033 3034 .list-search-result .list-search-result-title { 3035 spacing: 12px; 3036 } 3037 3038 .list-search-result .list-search-result-description { 3039 color: rgba(239, 240, 242, 0.7); 3040 } 3041 3042 /* Slider */ 3043 .slider { 3044 height: 20px; 3045 color: #242222; 3046 -slider-height: 2px; 3047 -slider-background-color: rgba(239, 240, 242, 0.3); 3048 -slider-border-color: #bfc9f4; 3049 -slider-active-background-color: #bfc9f4; 3050 -slider-active-border-color: #bfc9f4; 3051 -slider-border-width: 2px; 3052 -slider-handle-radius: 7px; 3053 -slider-handle-border-width: 2px; 3054 -slider-handle-border-color: #bfc9f4; 3055 -barlevel-height: 2px; 3056 -barlevel-background-color: rgba(239, 240, 242, 0.3); 3057 -barlevel-border-color: transparent; 3058 -barlevel-active-background-color: #bfc9f4; 3059 -barlevel-active-border-color: transparent; 3060 -barlevel-overdrive-color: #f28b82; 3061 -barlevel-overdrive-border-color: transparent; 3062 -barlevel-overdrive-separator-width: 2px; 3063 -barlevel-border-width: 0; 3064 } 3065 3066 /* App Switcher */ 3067 .switcher-popup { 3068 padding: 8px; 3069 spacing: 24px; 3070 } 3071 3072 .switcher-list .item-box { 3073 padding: 8px; 3074 border-radius: 6px; 3075 border: 1px solid transparent; 3076 } 3077 3078 .switcher-list .item-box:outlined { 3079 background-color: rgba(239, 240, 242, 0.12); 3080 color: #eff0f2; 3081 } 3082 3083 .switcher-list .item-box:selected { 3084 background-color: #242222; 3085 color: #c0caf5; 3086 } 3087 3088 .switcher-list .thumbnail-box { 3089 padding: 2px; 3090 spacing: 6px; 3091 } 3092 3093 .switcher-list .thumbnail { 3094 width: 256px; 3095 } 3096 3097 .switcher-list .separator { 3098 width: 1px; 3099 background: rgba(239, 240, 242, 0.12); 3100 } 3101 3102 .switcher-list .switcher-list-item-container { 3103 spacing: 12px; 3104 } 3105 3106 .switcher-arrow { 3107 border-color: rgba(0, 0, 0, 0); 3108 color: rgba(239, 240, 242, 0.5); 3109 } 3110 3111 .switcher-arrow:highlighted { 3112 color: #eff0f2; 3113 } 3114 3115 .input-source-switcher-symbol { 3116 font-size: 34pt; 3117 width: 96px; 3118 height: 96px; 3119 } 3120 3121 .cycler-highlight { 3122 border: 5px solid #bfc9f4; 3123 } 3124 3125 /* Switches */ 3126 .toggle-switch { 3127 width: 40px; 3128 height: 20px; 3129 background-size: contain; 3130 background-image: url('assets/toggle-off-dark.svg'); 3131 } 3132 3133 .toggle-switch:checked { 3134 background-image: url('assets/toggle-on-dark.svg'); 3135 } 3136 3137 /* .popup-sub-menu */ .toggle-switch { 3138 background-image: url('assets/toggle-off.svg'); 3139 } 3140 3141 /* .popup-sub-menu */ .toggle-switch:checked { 3142 background-image: url('assets/toggle-on.svg'); 3143 } 3144 3145 /* Tiled window previews */ 3146 .tile-preview { 3147 background-color: rgba(65, 72, 104, 0.3); 3148 border: 1px solid #bfc9f4; 3149 border-radius: 12px; 3150 } 3151 3152 .tile-preview-left.on-primary { 3153 border-radius: 12px; 3154 } 3155 3156 .tile-preview-right.on-primary { 3157 border-radius: 12px; 3158 } 3159 3160 .tile-preview-left.tile-preview-right.on-primary { 3161 border-radius: 12px; 3162 } 3163 3164 /* Workspace Switcher */ 3165 .workspace-switcher-group { 3166 padding: 12px; 3167 } 3168 3169 .workspace-switcher { 3170 background: transparent; 3171 border: none; 3172 border-radius: 0; 3173 padding: 0; 3174 spacing: 12px; 3175 } 3176 3177 .ws-switcher-box { 3178 background: transparent; 3179 height: 50px; 3180 background-size: 32px; 3181 background: rgba(239, 240, 242, 0.12); 3182 border-radius: 6px; 3183 } 3184 3185 .ws-switcher-active-up, 3186 .ws-switcher-active-down, 3187 .ws-switcher-active-left, 3188 .ws-switcher-active-right { 3189 height: 52px; 3190 background-color: #bfc9f4; 3191 color: rgba(0, 0, 0, 0.87); 3192 border-radius: 9px; 3193 border: none; 3194 } 3195 3196 .icon-grid { 3197 row-spacing: 12px; 3198 column-spacing: 12px; 3199 max-row-spacing: 72px; 3200 max-column-spacing: 72px; 3201 page-padding-top: 24px; 3202 page-padding-bottom: 24px; 3203 page-padding-left: 12px; 3204 page-padding-right: 12px; 3205 } 3206 3207 .page-indicator { 3208 padding: 6px 12px 0; 3209 } 3210 3211 .page-indicator .page-indicator-icon { 3212 width: 10px; 3213 height: 10px; 3214 border-radius: 10px; 3215 background-color: #eff0f2; 3216 } 3217 3218 .apps-scroll-view { 3219 padding: 0; 3220 } 3221 3222 .page-navigation-hint { 3223 width: 300px; 3224 } 3225 3226 .page-navigation-hint.dnd { 3227 background: rgba(239, 240, 242, 0.1); 3228 } 3229 3230 .page-navigation-hint.next:ltr, 3231 .page-navigation-hint.previous:rtl { 3232 background-gradient-start: rgba(239, 240, 242, 0.05); 3233 background-gradient-end: transparent; 3234 background-gradient-direction: horizontal; 3235 border-radius: 18px 0px 0px 18px; 3236 } 3237 3238 .page-navigation-hint.previous:ltr, 3239 .page-navigation-hint.next:rtl { 3240 background-gradient-start: transparent; 3241 background-gradient-end: rgba(239, 240, 242, 0.05); 3242 background-gradient-direction: horizontal; 3243 border-radius: 0px 18px 18px 0px; 3244 } 3245 3246 .page-navigation-arrow { 3247 margin: 0; 3248 width: 24px; 3249 height: 24px; 3250 color: #eff0f2; 3251 } 3252 3253 #dash { 3254 margin-top: 12px; 3255 padding: 0 10px; 3256 } 3257 3258 #dash .placeholder { 3259 background-image: none; 3260 background-size: contain; 3261 height: 32px; 3262 } 3263 3264 #dash .overview-icon { 3265 padding: 5px; 3266 } 3267 3268 .dash-background { 3269 background-color: rgba(26, 27, 38, 0.95); 3270 border: 1px solid rgba(255, 255, 255, 0.12) #bfc9f4; 3271 margin-bottom: 16px; 3272 padding: 10px; 3273 border-radius: 16px; 3274 } 3275 3276 .dash-item-container .app-well-app, 3277 .show-apps { 3278 padding: 10px 2px 26px; 3279 } 3280 3281 .dash-separator { 3282 width: 1px; 3283 margin: 0 7px 16px; 3284 background-color: #bfc9f4; 3285 } 3286 3287 .workspace-animation { 3288 background-color: #333333; 3289 } 3290 3291 .calendar .calendar-change-month-back, 3292 .calendar .calendar-change-month-forward { 3293 padding: 0 2px; 3294 } 3295 3296 .controls-manager, 3297 .secondary-monitor-workspaces { 3298 spacing: 12px; 3299 } 3300 3301 #overviewGroup { 3302 background-color: #242222; 3303 } 3304 3305 .osd-window { 3306 spacing: 1em; 3307 min-width: 64px; 3308 min-height: 64px; 3309 } 3310 3311 .osd-window StIcon { 3312 icon-size: 96px; 3313 } 3314 3315 #appMenu { 3316 spacing: 6px; 3317 } 3318 3319 #appMenu .label-shadow { 3320 color: transparent; 3321 } 3322 3323 #appMenu .panel-status-menu-box { 3324 padding: 0 6px; 3325 spacing: 6px; 3326 } 3327 3328 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item:ltr { 3329 padding-right: 1.5em !important; 3330 padding-left: 0 !important; 3331 } 3332 3333 /* /* .popup-menu */ */ /* /* .popup-menu */ */-item:rtl { 3334 padding-right: 0 !important; 3335 padding-left: 1.5em !important; 3336 } 3337 3338 .popup-separator-menu-item { 3339 padding: 0; 3340 } 3341 3342 .popup-separator-menu-item .popup-separator-menu-item-separator { 3343 height: 1px; 3344 margin: 0; 3345 background-color: rgba(239, 240, 242, 0.12); 3346 padding: 0; 3347 } 3348 3349 /* .popup-sub-menu */ 3350 .popup-separator-menu-item 3351 .popup-separator-menu-item-separator { 3352 padding: 0; 3353 margin: 0 32px 0 0; 3354 height: 1px; 3355 background-color: rgba(0, 0, 0, 0.12); 3356 } 3357 3358 /* /* /* /* .aggregate-menu */ */ */ */ /* .popup-sub-menu */ /* /* .popup-menu */ */-item > :first-child:ltr { 3359 padding-left: 18px; 3360 margin-left: 1em; 3361 } 3362 3363 /* /* /* /* .aggregate-menu */ */ */ */ /* .popup-sub-menu */ /* /* .popup-menu */ */-item > :first-child:rtl { 3364 padding-right: 18px; 3365 margin-right: 1em; 3366 } 3367 3368 .search-entry { 3369 margin-top: 24px; 3370 margin-bottom: 6px; 3371 } 3372 3373 .window-picker { 3374 spacing: 6px; 3375 } 3376 3377 .window-caption { 3378 color: #eff0f2; 3379 background-color: #333333; 3380 border-radius: 9999px; 3381 padding: 6px 12px; 3382 } 3383 3384 .window-close { 3385 background-color: #242222; 3386 color: #eff0f2; 3387 border-radius: 21px; 3388 padding: 3px; 3389 height: 30px; 3390 width: 30px; 3391 box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); 3392 transition-duration: 300ms; 3393 } 3394 3395 .window-close:hover { 3396 color: #eff0f2; 3397 background-color: #33635c; 3398 } 3399 3400 .window-close:active { 3401 color: #eff0f2; 3402 background-color: #8c4351; 3403 } 3404 3405 .workspace-background { 3406 border-radius: 30px; 3407 background-color: #333333; 3408 box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.3); 3409 } 3410 3411 /* Workspace pager */ 3412 .workspace-thumbnails { 3413 visible-width: 32px; 3414 spacing: 6px; 3415 padding: 6px; 3416 } 3417 3418 .workspace-thumbnails .workspace-thumbnail { 3419 color: rgba(239, 240, 242, 0.7); 3420 background-color: rgba(239, 240, 242, 0.12); 3421 border: none; 3422 border-radius: 6px; 3423 } 3424 3425 .workspace-thumbnails .placeholder { 3426 background-image: url('assets/dash-placeholder.svg'); 3427 background-size: contain; 3428 width: 18px; 3429 height: 24px; 3430 } 3431 3432 .workspace-thumbnail-indicator { 3433 border: 3px solid #bfc9f4; 3434 border-radius: 6px; 3435 padding: 0; 3436 } 3437 3438 .bottom #dashtodockDashScrollview, 3439 .top #dashtodockDashScrollview { 3440 -st-hfade-offset: 24px; 3441 } 3442 3443 .left #dashtodockDashScrollview, 3444 .right #dashtodockDashScrollview { 3445 -st-vfade-offset: 24px; 3446 } 3447 3448 #dashtodockContainer { 3449 background-color: transparent; 3450 } 3451 3452 #dashtodockContainer .number-overlay { 3453 color: #eff0f2; 3454 background-color: rgba(0, 0, 0, 0.75); 3455 text-align: center; 3456 } 3457 3458 #dashtodockContainer .notification-badge { 3459 color: rgba(0, 0, 0, 0.87); 3460 background-color: #bfc9f4; 3461 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25); 3462 border-radius: 9999px; 3463 margin: 2px; 3464 padding: 0.2em 0.6em; 3465 font-weight: bold; 3466 text-align: center; 3467 } 3468 3469 #dashtodockContainer.straight-corner #dash, 3470 #dashtodockContainer.shrink.straight-corner #dash { 3471 border-radius: 0; 3472 margin: 0; 3473 } 3474 3475 #dashtodockContainer.straight-corner #dash .dash-background, 3476 #dashtodockContainer.shrink.straight-corner #dash .dash-background { 3477 border-radius: 0; 3478 } 3479 3480 #dashtodockContainer.extended.top #dash, 3481 #dashtodockContainer.extended.bottom #dash, 3482 #dashtodockContainer.extended.right #dash, 3483 #dashtodockContainer.extended.left #dash { 3484 margin-left: 0; 3485 margin-right: 0; 3486 margin-top: 0; 3487 margin-bottom: 0; 3488 padding: 0 0; 3489 } 3490 3491 #dashtodockContainer.extended.top #dash .dash-background, 3492 #dashtodockContainer.extended.bottom #dash .dash-background, 3493 #dashtodockContainer.extended.right #dash .dash-background, 3494 #dashtodockContainer.extended.left #dash .dash-background { 3495 border-radius: 0; 3496 margin-left: 0; 3497 margin-right: 0; 3498 margin-top: 0; 3499 margin-bottom: 0; 3500 } 3501 3502 #dashtodockContainer.left #dash, 3503 #dashtodockContainer.right #dash { 3504 margin-top: 0; 3505 padding: 10px 0; 3506 } 3507 3508 #dashtodockContainer.left #dash .dash-background, 3509 #dashtodockContainer.right #dash .dash-background { 3510 margin-bottom: 0; 3511 } 3512 3513 #dashtodockContainer.left .dash-item-container .app-well-app, 3514 #dashtodockContainer.left .show-apps, 3515 #dashtodockContainer.right .dash-item-container .app-well-app, 3516 #dashtodockContainer.right .show-apps { 3517 padding: 6px; 3518 } 3519 3520 #dashtodockContainer.left #dash { 3521 margin-left: 6px; 3522 } 3523 3524 #dashtodockContainer.right #dash { 3525 margin-right: 6px; 3526 } 3527 3528 #dashtodockContainer.dashtodock #dash .dash-background { 3529 background-color: #333333; 3530 } 3531 3532 #dashtodockContainer #dash .dash-background { 3533 background-color: rgba(26, 27, 38, 0.95); 3534 border: 1px solid rgba(255, 255, 255, 0.12) #bfc9f4; 3535 } 3536 3537 #dashtodockContainer .app-well-app-running-dot { 3538 background-color: #f7768e; 3539 } 3540 3541 #dashtodockContainer StWidget.focused .app-well-app-running-dot { 3542 background-color: #73daca !important; 3543 } 3544 3545 #dashtodockContainer:overview #dash .app-well-app-running-dot { 3546 background-color: #f7768e; 3547 } 3548 3549 #dashtodockContainer:overview #dash StWidget.focused .app-well-app-running-dot { 3550 background-color: #73daca !important; 3551 } 3552 3553 #dashtodockContainer .show-apps .overview-icon, 3554 #dashtodockContainer .app-well-app .overview-icon { 3555 color: rgba(239, 240, 242, 0.7); 3556 } 3557 3558 #dashtodockContainer .show-apps:hover .overview-icon, 3559 #dashtodockContainer .show-apps:focus .overview-icon, 3560 #dashtodockContainer .show-apps:selected .overview-icon, 3561 #dashtodockContainer .app-well-app:hover .overview-icon, 3562 #dashtodockContainer .app-well-app:focus .overview-icon, 3563 #dashtodockContainer .app-well-app:selected .overview-icon { 3564 background-color: rgba(65, 72, 104, 0.45); 3565 } 3566 3567 #dashtodockContainer .show-apps:active .overview-icon, 3568 #dashtodockContainer .show-apps:checked .overview-icon, 3569 #dashtodockContainer .app-well-app:active .overview-icon, 3570 #dashtodockContainer .app-well-app:checked .overview-icon { 3571 background-color: #bfc9f4; 3572 } 3573 3574 #dashtodockContainer:overview #dash .show-apps .overview-icon, 3575 #dashtodockContainer:overview #dash .app-well-app .overview-icon { 3576 color: rgba(239, 240, 242, 0.7); 3577 } 3578 3579 #dashtodockContainer:overview #dash .show-apps:hover .overview-icon, 3580 #dashtodockContainer:overview #dash .show-apps:focus .overview-icon, 3581 #dashtodockContainer:overview #dash .show-apps:selected .overview-icon, 3582 #dashtodockContainer:overview #dash .app-well-app:hover .overview-icon, 3583 #dashtodockContainer:overview #dash .app-well-app:focus .overview-icon, 3584 #dashtodockContainer:overview #dash .app-well-app:selected .overview-icon { 3585 background-color: rgba(65, 72, 104, 0.45); 3586 } 3587 3588 #dashtodockContainer:overview #dash .show-apps:active .overview-icon, 3589 #dashtodockContainer:overview #dash .show-apps:checked .overview-icon, 3590 #dashtodockContainer:overview #dash .app-well-app:active .overview-icon, 3591 #dashtodockContainer:overview #dash .app-well-app:checked .overview-icon { 3592 background-color: #242222; 3593 } 3594 3595 #dashtodockContainer.opaque #dash .dash-background { 3596 background-color: #333333; 3597 } 3598 3599 #dashtodockContainer.transparent #dash .dash-background { 3600 background-color: rgba(33, 33, 33, 0.35); 3601 } 3602 3603 #dashtodockContainer:overview #dash .dash-background { 3604 background-color: rgba(26, 27, 38, 0.95); 3605 border: 1px solid rgba(255, 255, 255, 0.12) #bfc9f4; 3606 } 3607 3608 #dashtodockContainer.opaque:overview #dash .dash-background, 3609 #dashtodockContainer.transparent:overview #dash .dash-background { 3610 background-color: transparent !important; 3611 box-shadow: none !important; 3612 } 3613 3614 #dashtodockContainer.extended:overview #dash .dash-background, 3615 #dashtodockContainer.opaque.extended:overview #dash .dash-background, 3616 #dashtodockContainer.transparent.extended:overview #dash .dash-background { 3617 background-color: #333333; 3618 } 3619 3620 #dashtodockContainer.running-dots .dash-item-container > StButton, 3621 #dashtodockContainer.dashtodock .dash-item-container > StButton { 3622 transition-duration: 250ms; 3623 background-size: contain; 3624 } 3625 3626 #dashtodockContainer.shrink .dash-item-container > StButton, 3627 #dashtodockContainer.dashtodock .dash-item-container > StButton { 3628 padding: 1px 2px; 3629 } 3630 3631 #dashtodockContainer.extended .app-well-app .overview-icon, 3632 #dashtodockContainer.extended .show-apps .overview-icon, 3633 #dashtodockContainer.extended:overview .app-well-app .overview-icon, 3634 #dashtodockContainer.extended:overview .show-apps .overview-icon { 3635 border-radius: 6px; 3636 } 3637 3638 #dashtodockContainer .metro .overview-icon { 3639 border-radius: 0; 3640 } 3641 3642 .dashtodock-app-well-preview-menu-item { 3643 padding: 1em 1em 0.5em 1em; 3644 } 3645 3646 #dashtodockPreviewSeparator.popup-separator-menu-item-horizontal { 3647 width: 1px; 3648 height: auto; 3649 border-right-width: 1px; 3650 margin: 32px 0; 3651 } 3652 3653 .openweather-button, 3654 .openweather-button-action, 3655 .openweather-menu-button-container, 3656 .openweather-button-box { 3657 border: 1px solid transparent; 3658 } 3659 3660 .openweather-provider { 3661 padding: 0 16px; 3662 font-weight: 500; 3663 border: 1px solid transparent; 3664 } 3665 3666 .openweather-current-icon, 3667 .openweather-current-summary, 3668 .openweather-current-summarybox { 3669 background: none; 3670 color: #eff0f2; 3671 } 3672 3673 .openweather-current-databox-values { 3674 background: none; 3675 color: rgba(239, 240, 242, 0.5); 3676 } 3677 3678 .openweather-current-databox-captions { 3679 background: none; 3680 color: rgba(239, 240, 242, 0.5); 3681 } 3682 3683 .openweather-forecast-icon, 3684 .openweather-forecast-summary { 3685 background: none; 3686 color: rgba(239, 240, 242, 0.7); 3687 } 3688 3689 .openweather-forecast-day, 3690 .openweather-forecast-temperature { 3691 background: none; 3692 color: rgba(239, 240, 242, 0.5); 3693 } 3694 3695 .openweather-sunrise-icon, 3696 .openweather-sunset-icon, 3697 .openweather-build-icon { 3698 color: rgba(239, 240, 242, 0.7); 3699 } 3700 3701 3702 3703 /* Modern Quick Settings alignment */ 3704 .quick-settings-grid { 3705 spacing-rows: 8px !important; 3706 spacing-columns: 8px !important; 3707 } 3708 3709 .quick-toggle, 3710 .quick-menu-toggle { 3711 min-height: 38px !important; 3712 max-height: 38px !important; 3713 border-radius: 9999px !important; 3714 } 3715 3716 .quick-menu-toggle > .quick-toggle { 3717 border-radius: 9999px 0 0 9999px !important; 3718 padding-right: 4px !important; 3719 } 3720 3721 .quick-toggle-arrow { 3722 min-height: 38px !important; 3723 max-height: 38px !important; 3724 min-width: 28px !important; 3725 max-width: 28px !important; 3726 padding: 0 !important; 3727 margin: 0 !important; 3728 border-radius: 0 9999px 9999px 0 !important; 3729 border-left: 1px solid rgba(255, 255, 255, 0.15) !important; 3730 } 3731 3732 3733 3734 3735 3736 3737 /* --- Authentic ColdMetal Active Highlights --- */ 3738 3739 :root, stage { 3740 -st-accent-color: #c0caf5 !important; 3741 -st-accent-fg-color: #1a1b26 !important; 3742 } 3743 3744 /* Inactive button backgrounds */ 3745 .quick-toggle, 3746 .quick-menu-toggle { 3747 background-color: rgba(192, 202, 245, 0.08) !important; 3748 color: #eff0f2 !important; 3749 border: 1px solid rgba(192, 202, 245, 0.12) !important; 3750 } 3751 3752 /* Active buttons matching the top-bar status area */ 3753 .quick-toggle:checked, 3754 .quick-toggle:active, 3755 .quick-menu-toggle:checked, 3756 .quick-toggle-menu .button:checked, 3757 .quick-toggle-menu .button:active, 3758 .button:checked { 3759 background-color: rgba(192, 202, 245, 0.7) !important; 3760 color: rgba(0, 0, 0, 0.87) !important; 3761 box-shadow: inset 0 0 0 1000px rgba(192, 202, 245, 0.7) !important; 3762 } 3763 3764 /* Slider active track and handle */ 3765 .slider { 3766 -barlevel-active-background-color: #c0caf5 !important; 3767 color: #c0caf5 !important; 3768 } 3769 3770 3771 /* --- ColdMetal Dash Context Menu & Popups --- */ 3772 3773 /* Reset outer wrapper containers so they don't draw a duplicate box */ 3774 .app-menu, 3775 .app-well-menu, 3776 .dash-item-container .popup-menu, 3777 .popup-menu { 3778 background-color: transparent !important; 3779 border: none !important; 3780 box-shadow: none !important; 3781 padding: 0 !important; 3782 margin: 0 !important; 3783 } 3784 3785 /* Single unified bubble */ 3786 .popup-menu-content { 3787 background-color: rgba(26, 27, 38, 0.92) !important; 3788 border: 1px solid rgba(192, 202, 245, 0.35) !important; 3789 border-radius: 14px !important; 3790 box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.5) !important; 3791 padding: 8px 6px !important; 3792 } 3793 3794 /* Header label ('Files') */ 3795 .app-menu-header-label, 3796 .popup-menu-content .popup-inactive-menu-item { 3797 color: #c0caf5 !important; 3798 font-weight: bold !important; 3799 padding: 6px 12px !important; 3800 } 3801 3802 /* Menu items */ 3803 .popup-menu-item { 3804 color: #eff0f2 !important; 3805 border-radius: 8px !important; 3806 margin: 2px 4px !important; 3807 padding: 6px 12px !important; 3808 transition-duration: 100ms !important; 3809 } 3810 3811 /* Hover state */ 3812 .popup-menu-item:hover, 3813 .popup-menu-item:focus, 3814 .popup-menu-item:active { 3815 background-color: rgba(192, 202, 245, 0.18) !important; 3816 color: #ffffff !important; 3817 } 3818 3819 /* Separator */ 3820 .popup-separator-menu-item .popup-separator-menu-item-separator { 3821 background-color: rgba(192, 202, 245, 0.15) !important; 3822 height: 1px !important; 3823 margin: 6px 8px !important; 3824 } 3825 3826 /* --- Slim Top Bar --- */ 3827 #panel { 3828 height: 24px !important; 3829 font-size: 11px !important; 3830 } 3831 3832 /* Reduce vertical padding so buttons fit inside the thinner bar */ 3833 #panel .panel-button { 3834 padding-top: 1px !important; 3835 padding-bottom: 1px !important; 3836 margin-top: 1px !important; 3837 margin-bottom: 1px !important; 3838 font-weight: 500 !important; 3839 } 3840 3841 /* Adjust top bar icon sizing to match */ 3842 #panel .panel-button StIcon { 3843 icon-size: 14px !important; 3844 }