API tools faq
paste
Advertisement
Guest User

Gnome Shell

a guest
Feb 22nd, 2015
267
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 52.81 KB | None | 0 0
raw download clone embed print report
  1. /* Copyright 2009, Red Hat, Inc.
  2.  *
  3.  * Portions adapted from Mx's data/style/default.css
  4.  *   Copyright 2009 Intel Corporation
  5.  *
  6.  * This program is free software; you can redistribute it and/or modify it
  7.  * under the terms and conditions of the GNU Lesser General Public License,
  8.  * version 2.1, as published by the Free Software Foundation.
  9.  *
  10.  * This program is distributed in the hope it will be useful, but WITHOUT ANY
  11.  * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  12.  * FOR A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for
  13.  * more details.
  14.  *
  15.  * You should have received a copy of the GNU Lesser General Public License
  16.  * along with this program; if not, write to the Free Software Foundation,
  17.  * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
  18.  */
  19.  
  20. /* Text Styles */
  21.  
  22. /* default text style */
  23. stage {
  24.     font-family: cantarell, sans-serif;
  25.     font-size: 11pt;
  26.     color: white;
  27. }
  28.  
  29. /* links */
  30. .shell-link {
  31.     color: #0000ff;
  32.     text-decoration: underline;
  33. }
  34.  
  35. .shell-link:hover {
  36.     color: #0000e0;
  37. }
  38.  
  39. /* small */
  40. .app-well-menu,
  41. .run-dialog-error-label {
  42.     font-size: 9pt;
  43. }
  44.  
  45. /* small bold */
  46. .dash-label,
  47. .window-caption,
  48. .switcher-list,
  49. .app-well-app > .overview-icon,
  50. .show-apps > .overview-icon,
  51. .grid-search-result .overview-icon {
  52.     font-size: 9pt;
  53.     font-weight: bold;
  54. }
  55.  
  56. /* Scroll Bars */
  57.  
  58. StScrollBar {
  59.     padding: 0px;
  60. }
  61.  
  62. StScrollView.vfade {
  63.     -st-vfade-offset: 68px;
  64. }
  65.  
  66. StScrollView.hfade {
  67.     -st-hfade-offset: 68px;
  68. }
  69.  
  70. StScrollView StScrollBar {
  71.     min-width: 14px;
  72.     min-height: 14px;
  73. }
  74.  
  75. StScrollBar StBin#trough {
  76.     background-color: rgba(0,0,0,0.3);
  77.     border-radius: 8px;
  78. }
  79.  
  80. StScrollBar StButton#vhandle {
  81.     background-color: #5d6464;
  82.     border: 2px solid #242424;
  83.     border-radius: 8px;
  84. }
  85.  
  86. StScrollBar StButton#hhandle {
  87.     background-color: #5d6464;
  88.     border: 2px solid #242424;
  89.     border-radius: 8px;
  90. }
  91.  
  92. StScrollBar StButton#hhandle:hover,
  93. StScrollBar StButton#vhandle:hover {
  94.     background-color: #777d7c;
  95. }
  96.  
  97. StScrollBar StButton#hhandle:active,
  98. StScrollBar StButton#vhandle:active {
  99.     background-color: #3465a4;
  100. }
  101.  
  102. /* Check Boxes */
  103.  
  104. .check-box StBoxLayout {
  105.     spacing: .8em;
  106. }
  107.  
  108. .check-box StBin {
  109.     width: 24px;
  110.     height: 22px;
  111.     background-image: url("checkbox-off.svg");
  112. }
  113.  
  114. .check-box:focus StBin {
  115.     background-image: url("checkbox-off-focused.svg");
  116. }
  117.  
  118. .check-box:checked StBin {
  119.     background-image: url("checkbox.svg");
  120. }
  121.  
  122. .check-box:focus:checked StBin {
  123.     background-image: url("checkbox-focused.svg");
  124. }
  125.  
  126. /* Slider */
  127.  
  128. .slider {
  129.     height: 1em;
  130.     -slider-height: 0.3em;
  131.     -slider-background-color: #333333;
  132.     -slider-border-color: #5f5f5f;
  133.     -slider-active-background-color: #76b0ec;
  134.     -slider-active-border-color: #1f6dbc;
  135.     -slider-border-width: 1px;
  136.     -slider-handle-radius: 6px;
  137. }
  138.  
  139. /* PopupMenu */
  140.  
  141. .popup-menu-ornament {
  142.     text-align: right;
  143.     width: 1em;
  144. }
  145.  
  146. .popup-menu-boxpointer,
  147. .candidate-popup-boxpointer {
  148.     -arrow-border-radius: 8px;
  149.     -arrow-background-color: rgba(0,0,0,0.9);
  150.     -arrow-border-width: 2px;
  151.     -arrow-border-color: #a5a5a5;
  152.     -arrow-base: 24px;
  153.     -arrow-rise: 11px;
  154. }
  155.  
  156. .popup-menu-boxpointer.fallback-app-menu {
  157.     -arrow-border-radius: 4px;
  158.     -arrow-background-color: #ededed;
  159.     -arrow-border-width: 1px;
  160.     -arrow-border-color: #a6a6a6;
  161.     -arrow-base: 24px;
  162.     -arrow-rise: 11px;
  163. }
  164.  
  165. .popup-menu-boxpointer.fallback-app-menu.dark {
  166.     -arrow-background-color: #3f4747;
  167.     -arrow-border-color: #282b2b;
  168. }
  169.  
  170.  
  171. .popup-menu {
  172.     min-width: 200px;
  173. }
  174.  
  175. .popup-menu-arrow {
  176.     width: 16px;
  177.     height: 16px;
  178. }
  179.  
  180. .popup-submenu-menu-item:open {
  181.     background-color: #333333;
  182. }
  183.  
  184. .fallback-app-menu .popup-submenu-menu-item:open {
  185.     background-color: #888888;
  186.     color: white;
  187. }
  188.  
  189. .fallback-app-menu.dark .popup-submenu-menu-item:open {
  190.     background-color: #333333;
  191. }
  192.  
  193. .popup-sub-menu {
  194.     background-gradient-start: rgba(80,80,80,0.3);
  195.     background-gradient-end: rgba(80,80,80,0.4);
  196.     background-gradient-direction: vertical;
  197.     box-shadow: inset 0px 2px 4px rgba(0,0,0,0.9);
  198. }
  199.  
  200. .fallback-app-menu .popup-sub-menu {
  201.     background-gradient-start: #dddddd;
  202.     background-gradient-end: #dfdfdf;
  203.     background-gradient-direction: vertical;
  204.     box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
  205. }
  206.  
  207. .fallback-app-menu.dark .popup-sub-menu {
  208.     background-gradient-start: #474747;
  209.     background-gradient-end: #4b4b4b;
  210.     background-gradient-direction: vertical;
  211.     box-shadow: inset 0px 2px 4px rgba(0,0,0,0.9);
  212. }
  213.  
  214. .popup-sub-menu:scrolled .popup-menu-item:ltr {
  215.     padding-right: 0em;
  216. }
  217.  
  218. .popup-sub-menu:scrolled .popup-menu-item:rtl {
  219.     padding-left: 0em;
  220. }
  221.  
  222. .popup-sub-menu StScrollBar {
  223.     padding: 4px;
  224. }
  225.  
  226. .popup-sub-menu StScrollBar StBin#trough {
  227.     border-width: 0px;
  228. }
  229.  
  230. .popup-sub-menu StScrollBar StBin#vhandle {
  231.     background-color: #4c4c4c;
  232.     border-width: 0px;
  233. }
  234.  
  235. .app-well-menu {
  236.     max-width: 400px;
  237. }
  238.  
  239. /* The remaining popup-menu sizing is all done in ems, so that if you
  240.  * override .popup-menu.font-size, everything else will scale with it.
  241.  */
  242. .popup-menu-content {
  243.     padding: 1em 0em;
  244. }
  245.  
  246. .popup-menu-item {
  247.     spacing: 12px;
  248. }
  249.  
  250. .popup-menu-item:ltr {
  251.     padding: .4em 1.75em .4em 0em;
  252. }
  253.  
  254. .popup-menu-item:rtl {
  255.     padding: .4em 0em .4em 1.75em;
  256. }
  257.  
  258. .popup-menu-item:active {
  259.     background-color: #4c4c4c;
  260. }
  261.  
  262. .popup-menu-item:insensitive {
  263.     color: #9f9f9f;
  264. }
  265.  
  266. .fallback-app-menu .popup-menu-item {
  267.     color: #43484a;
  268. }
  269.  
  270. .fallback-app-menu .popup-menu-item:active {
  271.     color: white;
  272.     background-color: #4689cd;
  273. }
  274.  
  275. .fallback-app-menu .popup-menu-item:insensitive {
  276.     color: gray;
  277. }
  278.  
  279. .fallback-app-menu.dark .popup-menu-item {
  280.     color: white;
  281. }
  282.  
  283. .fallback-app-menu.dark .popup-menu-item:active {
  284.     background-color: #445f7d;
  285. }
  286.  
  287. .fallback-app-menu.dark .popup-menu-item:insensitive {
  288.     color: #9f9f9f;
  289. }
  290.  
  291. .popup-separator-menu-item {
  292.     -gradient-height: 1px;
  293.     -gradient-start: rgba(255,255,255,0.0);
  294.     -gradient-end: rgba(255,255,255,0.3);
  295.     -margin-horizontal: 24px;
  296.     height: 1px;
  297.     padding: 8px 0px;
  298. }
  299.  
  300. .fallback-app-menu .popup-separator-menu-item {
  301.     -gradient-start: #a0a2a3;
  302.     -gradient-end: #a0a2a3;
  303.     -margin-horizontal: 0;
  304. }
  305.  
  306. .fallback-app-menu.dark .popup-separator-menu-item {
  307.     -gradient-start: #818584;
  308.     -gradient-end: #818584;
  309. }
  310.  
  311. .popup-status-menu-item {
  312.     font-weight: normal;
  313.     color: #999;
  314. }
  315.  
  316. .popup-inactive-menu-item, .popup-inactive-menu-item:insensitive {
  317.     color: white;
  318. }
  319.  
  320. .popup-menu-icon {
  321.     icon-size: 1.09em;
  322. }
  323.  
  324. /* Switches */
  325. .toggle-switch {
  326.     width: 65px;
  327.     height: 22px;
  328. }
  329.  
  330. .toggle-switch-us {
  331.     background-image: url("toggle-off-us.svg");
  332.     background-size: contain;
  333. }
  334. .toggle-switch-us:checked {
  335.     background-image: url("toggle-on-us.svg");
  336.     background-size: contain;
  337. }
  338.  
  339. .toggle-switch-intl {
  340.     background-image: url("toggle-off-intl.svg");
  341.     background-size: contain;
  342. }
  343. .toggle-switch-intl:checked {
  344.     background-image: url("toggle-on-intl.svg");
  345.     background-size: contain;
  346. }
  347.  
  348. /* Network */
  349.  
  350. .nm-dialog {
  351.     max-height: 500px;
  352.     min-height: 450px;
  353.     min-width: 470px;
  354. }
  355.  
  356. .nm-dialog-content {
  357.     spacing: 20px;
  358. }
  359.  
  360. .nm-dialog-header-hbox {
  361.     spacing: 10px;
  362. }
  363.  
  364. .nm-dialog-airplane-box {
  365.     spacing: 12px;
  366. }
  367.  
  368. .nm-dialog-airplane-headline {
  369.     font-size: 1.1em;
  370.     font-weight: bold;
  371.     text-align: center;
  372. }
  373.  
  374. .nm-dialog-airplane-text {
  375.     color: #999999;
  376. }
  377.  
  378. .nm-dialog-header-icon {
  379.     icon-size: 32px;
  380. }
  381.  
  382. .nm-dialog-scroll-view {
  383.     border: 2px solid #666;
  384.     border-radius: 6px;
  385. }
  386.  
  387. .nm-dialog-header {
  388.     font-weight: bold;
  389. }
  390.  
  391. .nm-dialog-item {
  392.     font-size: 12pt;
  393.     border-bottom: 1px solid #666;
  394.     padding: 12px;
  395.     spacing: 20px;
  396. }
  397.  
  398. .nm-dialog-item:selected {
  399.     background-color: #333;
  400. }
  401.  
  402. .nm-dialog-icons {
  403.     spacing: .5em;
  404. }
  405.  
  406. .nm-dialog-icon {
  407.     icon-size: 16px;
  408. }
  409.  
  410. .no-networks-label {
  411.     color: #999999;
  412. }
  413.  
  414. .no-networks-box {
  415.     spacing: 12px;
  416. }
  417.  
  418. /* Buttons */
  419.  
  420. .candidate-page-button,
  421. .notification-button,
  422. .notification-icon-button,
  423. .hotplug-notification-item,
  424. .hotplug-resident-eject-button,
  425. .modal-dialog-button,
  426. .app-view-control {
  427.     border: 1px solid #8b8b8b;
  428.     background-gradient-direction: vertical;
  429.     background-gradient-start: rgba(255, 255, 255, 0.2);
  430.     background-gradient-end: rgba(255, 255, 255, 0);
  431. }
  432.  
  433. .modal-dialog-button {
  434.     font-weight: bold;
  435. }
  436.  
  437. .candidate-page-button:hover,
  438. .notification-button:hover,
  439. .notification-icon-button:hover,
  440. .hotplug-notification-item:hover,
  441. .hotplug-resident-eject-button:hover,
  442. .modal-dialog-button:hover {
  443.     background-gradient-start: rgba(255, 255, 255, 0.3);
  444.     background-gradient-end: rgba(255, 255, 255, 0.1);
  445. }
  446.  
  447. .notification-button:focus,
  448. .notification-icon-button:focus,
  449. .hotplug-notification-item:focus,
  450. .modal-dialog-button:focus,
  451. .app-view-control:focus {
  452.     border-width: 2px;
  453. }
  454.  
  455. .app-view-control:first-child:ltr:focus,
  456. .app-view-control:last-child:rtl:focus {
  457.     border-right-width: 1px;
  458. }
  459.  
  460. .candidate-page-button:active,
  461. .candidate-page-button:pressed,
  462. .notification-button:active,
  463. .notification-icon-button:active,
  464. .hotplug-notification-item:active,
  465. .hotplug-resident-eject-button:active,
  466. .modal-dialog-button:active,
  467. .modal-dialog-button:pressed,
  468. .app-view-control:checked {
  469.     background-gradient-start: rgba(255, 255, 255, 0);
  470.     background-gradient-end: rgba(255, 255, 255, 0.2);
  471. }
  472.  
  473. .candidate-page-button:insensitive,
  474. .notification-button:insensitive,
  475. .notification-icon-button:insensitive,
  476. .modal-dialog-button:insensitive {
  477.     border-color: #666666;
  478.     color: #9f9f9f;
  479.     background-gradient-direction: none;
  480.     background-color: rgba(102, 102, 102, 0.15);
  481. }
  482.  
  483. /* Common radii */
  484.  
  485. .search-entry,
  486. .modal-dialog-button,
  487. .notification-button,
  488. .hotplug-notification-item,
  489. .app-view-controls,
  490. #screenShieldNotifications {
  491.     border-radius: 18px;
  492. }
  493.  
  494. .app-view-control:first-child:ltr,
  495. .app-view-control:last-child:rtl {
  496.     border-radius: 18px 0px 0px 18px;
  497.     border-right-width: 0px;
  498. }
  499.  
  500. .app-view-control:last-child:ltr,
  501. .app-view-control:first-child:rtl {
  502.     border-radius: 0px 18px 18px 0px;
  503. }
  504.  
  505. /* Entries */
  506.  
  507. .search-entry,
  508. .login-dialog StEntry,
  509. .notification StEntry,
  510. .modal-dialog StEntry {
  511.     color: rgb(64, 64, 64);
  512.     caret-color: rgb(64, 64, 64);
  513.     font-size: 12pt;
  514.     caret-size: 1px;
  515.     selected-color: white;
  516.     padding: 4px 12px;
  517. }
  518.  
  519. .search-entry,
  520. .login-dialog StEntry,
  521. .run-dialog-entry,
  522. .notification StEntry {
  523.     border: 2px solid rgba(245,245,245,0.2);
  524.     background-gradient-start: rgba(5,5,6,0.1);
  525.     background-gradient-end: rgba(254,254,254,0.1);
  526.     background-gradient-direction: vertical;
  527.     transition-duration: 300ms;
  528.     box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6);
  529. }
  530.  
  531. .search-entry:focus,
  532. .search-entry:hover,
  533. .login-dialog StEntry:focus,
  534. .notification StEntry:focus,
  535. .modal-dialog StEntry {
  536.     border: 2px solid rgb(136,138,133);
  537.     background-gradient-start: rgb(200,200,200);
  538.     background-gradient-end: white;
  539.     background-gradient-direction: vertical;
  540.     box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6);
  541. }
  542.  
  543. .login-dialog StEntry:focus,
  544. .notification StEntry:focus,
  545. .modal-dialog StEntry:focus {
  546.     border: 2px solid #3465a4;
  547. }
  548.  
  549. .search-entry {
  550.     border-color: rgba(245,245,245,0.3);
  551.     color: rgb(192, 192, 192);
  552.     caret-color: rgb(192, 192, 192);
  553. }
  554.  
  555. .search-entry:hover {
  556.     color: rgb(128, 128, 128);
  557.     caret-color: rgb(128, 128, 128);
  558. }
  559.  
  560. .search-entry:focus {
  561.     color: rgb(64, 64, 64);
  562.     caret-color: rgb(64, 64, 64);
  563.     font-weight: bold;
  564.     transition-duration: 0ms;
  565. }
  566.  
  567. .login-dialog StEntry,
  568. .notification StEntry,
  569. .modal-dialog StEntry {
  570.     border-radius: 5px;
  571.     padding: 4px 4px;
  572. }
  573.  
  574. .prompt-dialog-password-entry .capslock-warning,
  575. .login-dialog-prompt-entry .capslock-warning {
  576.     icon-size: 16px;
  577.     warning-color: #999;
  578.     padding: 0 4px;
  579. }
  580.  
  581. .login-dialog StEntry:insensitive,
  582. .modal-dialog StEntry:insensitive {
  583.     border-color: #666666;
  584.     color: #9f9f9f;
  585.     border: 2px solid #9f9f9f;
  586.     background-gradient-direction: none;
  587.     background-color: rgba(102, 102, 102, 0.15);
  588.     box-shadow: inset 0 0 rgba(0,0,0,1.0);
  589. }
  590.  
  591. /* Panel */
  592.  
  593. #panel {
  594.     background-color: black;
  595.     font-weight: bold;
  596.     height: 1.86em;
  597. }
  598.  
  599. #panel.unlock-screen,
  600. #panel.login-screen {
  601.     background-color: transparent;
  602. }
  603.  
  604. #panelLeft, #panelCenter {
  605.     spacing: 4px;
  606. }
  607.  
  608. #panelLeft:ltr {
  609.     padding-right: 4px;
  610. }
  611.  
  612. #panelLeft:rtl {
  613.     padding-left: 4px;
  614. }
  615.  
  616. #panelRight:ltr {
  617.     padding-left: 4px;
  618. }
  619.  
  620. #panelRight:rtl {
  621.     padding-right: 4px;
  622. }
  623.  
  624. .panel-corner {
  625.     -panel-corner-radius: 6px;
  626.     -panel-corner-background-color: black;
  627.     -panel-corner-border-width: 2px;
  628.     -panel-corner-border-color: transparent;
  629. }
  630.  
  631. .panel-corner:active,
  632. .panel-corner:overview,
  633. .panel-corner:focus {
  634.     -panel-corner-border-color: rgba(255,255,255,0.8);
  635. }
  636.  
  637. .panel-corner.lock-screen,
  638. .panel-corner.unlock-screen,
  639. .panel-corner.login-screen {
  640.     -panel-corner-background-color: transparent;
  641.     -panel-corner-border-color: transparent;
  642. }
  643.  
  644. #appMenu {
  645.     spinner-image: url("process-working.svg");
  646.     spacing: 4px;
  647. }
  648.  
  649. /* used for the app menu header only */
  650. .label-shadow {
  651.     color: rgba(0,0,0,0.5);
  652. }
  653.  
  654. .panel-button #appMenuIcon {
  655.     app-icon-bottom-clip: 1px;
  656. }
  657.  
  658. .panel-button:active #appMenuIcon,
  659. .panel-button:checked #appMenuIcon,
  660. .panel-button:focus #appMenuIcon {
  661.     app-icon-bottom-clip: 2px;
  662. }
  663.  
  664. .panel-button {
  665.     -natural-hpadding: 12px;
  666.     -minimum-hpadding: 6px;
  667.     font-weight: bold;
  668.     color: #ccc;
  669.     transition-duration: 100ms;
  670. }
  671.  
  672. #panel.unlock-screen .panel-button,
  673. #panel.lock-screen .panel-button,
  674. #panel.login-screen .panel-button {
  675.     color: #e6e6e6;
  676. }
  677.  
  678. #panel.unlock-screen .panel-button:hover,
  679. #panel.lock-screen .panel-button:hover,
  680. #panel.login-screen .panel-button:hover,
  681. #panel.unlock-screen .panel-button:active,
  682. #panel.lock-screen .panel-button:active,
  683. #panel.login-screen .panel-button:active,
  684. #panel.unlock-screen .panel-button:focus,
  685. #panel.lock-screen .panel-button:focus,
  686. #panel.login-screen .panel-button:focus {
  687.     color: white;
  688. }
  689.  
  690. .panel-button:hover {
  691.     color: white;
  692.     text-shadow: black 0px 2px 2px;
  693. }
  694.  
  695. .panel-button:active,
  696. .panel-button:overview,
  697. .panel-button:focus {
  698.     border-image: url("panel-button-border.svg") 6 10 0 2;
  699.     background-image: url("panel-button-highlight-wide.svg");
  700.     color: white;
  701.     text-shadow: black 0px 2px 2px;
  702. }
  703.  
  704. .panel-status-button:active,
  705. .panel-status-button:checked,
  706. .panel-status-button:focus {
  707.     background-image: url("panel-button-highlight-narrow.svg");
  708. }
  709.  
  710. .panel-button:active > .system-status-icon,
  711. .panel-button:checked > .system-status-icon,
  712. .panel-button:focus > .system-status-icon {
  713.     icon-shadow: black 0px 2px 2px;
  714. }
  715.  
  716. .panel-menu {
  717.     -boxpointer-gap: 4px;
  718. }
  719.  
  720. .panel-status-indicators-box,
  721. .panel-status-menu-box {
  722.     spacing: 2px;
  723. }
  724.  
  725. .system-status-icon {
  726.     icon-size: 1.09em;
  727.     padding: 0 5px;
  728. }
  729.  
  730. .aggregate-menu {
  731.     width: 360px;
  732. }
  733.  
  734. .aggregate-menu .popup-menu-icon {
  735.     padding: 0 4px;
  736. }
  737.  
  738. .system-switch-user-submenu-icon {
  739.     icon-size: 24px;
  740.     border: 1px solid #8b8b8b;
  741. }
  742.  
  743. .system-menu-action {
  744.     color: #e6e6e6;
  745.     border-radius: 32px; /* wish we could do 50% */
  746.     padding: 13px;
  747.     border: 2px solid #5f5f5f; /* using rgba() is flaky unfortunately */
  748. }
  749.  
  750. .system-menu-action:hover,
  751. .system-menu-action:focus {
  752.     color: white;
  753.     background-color: #4c4c4c;
  754.     border: none;
  755.     padding: 15px;
  756. }
  757.  
  758. .system-menu-action:active {
  759.     color: black;
  760.     background-color: #6f6f6f;
  761.  
  762. }
  763.  
  764. .system-menu-action > StIcon {
  765.     icon-size: 16px;
  766. }
  767.  
  768. .screencast-indicator {
  769.     color: #ff0000;
  770. }
  771.  
  772. /* Overview */
  773.  
  774. #overview {
  775.     spacing: 24px;
  776. }
  777.  
  778. .overview-controls {
  779.     padding-bottom: 32px;
  780. }
  781.  
  782. .workspace-thumbnails {
  783.     spacing: 11px;
  784.     visible-width: 32px; /* Amount visible before hovering */
  785.     border: 1px solid rgba(128, 128, 128, 0.4);
  786.     border-right: 0px;
  787.     border-radius: 9px 0px 0px 9px;
  788.     background-color: rgba(0, 0, 0, 0.5);
  789.     padding: 11px 7px 11px 11px;
  790. }
  791.  
  792. .workspace-thumbnails:rtl {
  793.     border-right: 1px;
  794.     border-left: 0px;
  795.     border-radius: 0px 9px 9px 0px;
  796.     padding: 11px 11px 11px 7px;
  797. }
  798.  
  799. .workspace-thumbnail-indicator {
  800.     border: 4px solid rgba(255,255,255,0.7);
  801.     border-radius: 4px;
  802.     padding: 1px;
  803. }
  804.  
  805. .window-caption {
  806.     spacing: 25px;
  807.     background: rgba(0,0,0,0.5);
  808.     border-radius: 8px;
  809.     padding: 4px 12px;
  810.     -shell-caption-spacing: 12px;
  811.     border: 2px solid rgba(0, 0, 0, 0);
  812. }
  813.  
  814. .window-caption:hover {
  815.     border: 2px solid rgba(255, 255, 255, 0);
  816. }
  817.  
  818. .window-close, .notification-close {
  819.     background-image: url("close-window.svg");
  820.     background-size: 32px;
  821.     height: 32px;
  822.     width: 32px;
  823. }
  824.  
  825. .window-close {
  826.     -shell-close-overlap: 16px;
  827. }
  828.  
  829. .window-clone-border {
  830.     border: 4px solid rgba(255, 255, 255, 0.5);
  831.     border-radius: 4px;
  832. }
  833.  
  834. .notification-close {
  835.     /* we start out in the top right of the
  836.      * notification, inset.
  837.      *
  838.      * center is 32px/2 = 16px
  839.      *
  840.      * adjust left 2px
  841.      * adjust down 8px */
  842.  
  843.     -shell-close-overlap-x: 14px;
  844.     -shell-close-overlap-y: -12px;
  845. }
  846.  
  847. .notification-close:rtl {
  848.     /* as above, but starting out in the top left of the
  849.      * notification. */
  850.  
  851.     -shell-close-overlap-x: -14px;
  852. }
  853.  
  854. .window-close:rtl {
  855.     -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  856. }
  857.  
  858. .window-picker {
  859.     -horizontal-spacing: 32px;
  860.     -vertical-spacing: 32px;
  861.     padding-left: 32px;
  862.     padding-right: 32px;
  863.     padding-bottom: 48px;
  864. }
  865.  
  866. .window-picker.external-monitor {
  867.     padding: 32px;
  868. }
  869.  
  870. .messages-indicator {
  871.     color: #999999;
  872.     height: 32px;
  873. }
  874.  
  875. .messages-indicator-contents {
  876.     spacing: 12px;
  877.     padding-bottom: 12px;
  878. }
  879.  
  880. .messages-indicator-contents:hover {
  881.     color: white;
  882.     text-shadow: black 0px 2px 2px;
  883. }
  884.  
  885. .messages-indicator-highlight {
  886.     background-gradient-start: transparent;
  887.     background-gradient-end: #999999;
  888.     background-gradient-direction: vertical;
  889.  
  890.     height: 6px;
  891. }
  892.  
  893. /* Dash */
  894.  
  895. #dash {
  896.     color: #5f5f5f;
  897.     font-size: 9pt;
  898.     padding: 4px 0px;
  899.     background-color: rgba(0, 0, 0, 0.5);
  900.     border: 1px solid rgba(128, 128, 128, 0.4);
  901.     border-left: 0px;
  902.     border-radius: 0px 9px 9px 0px;
  903. }
  904.  
  905. #dash:rtl {
  906.     border-left: 1px;
  907.     border-right: 0px;
  908.     border-radius: 9px 0px 0px 9px;
  909. }
  910.  
  911. .placeholder {
  912.     background-image: url("dash-placeholder.svg");
  913.     background-size: contain;
  914.     height: 24px;
  915. }
  916.  
  917. .empty-dash-drop-target {
  918.     width: 24px;
  919.     height: 24px;
  920. }
  921.  
  922. /* Search Box */
  923.  
  924. .search-entry {
  925.     width: 320px;
  926. }
  927.  
  928. .search-entry-icon {
  929.     icon-size: 1em;
  930.     color: #c0c0c0;
  931. }
  932.  
  933. .search-entry:hover .search-entry-icon,
  934. .search-entry:focus .search-entry-icon {
  935.     color: #8d8f8a;
  936. }
  937.  
  938. /* Search Results */
  939.  
  940. #searchResults {
  941.     padding: 20px 10px 0px 10px;
  942.     spacing: 18px;
  943. }
  944.  
  945. #searchResultsBin {
  946.     max-width: 1000px;
  947. }
  948.  
  949. #searchResultsContent {
  950.     padding-left: 20px;
  951.     padding-right: 20px;
  952.     spacing: 16px;
  953. }
  954.  
  955. .search-section {
  956.     /* This should be equal to #searchResultsContent spacing */
  957.     spacing: 16px;
  958. }
  959.  
  960. .search-section-separator {
  961.     -gradient-height: 1px;
  962.     -gradient-start: rgba(255,255,255,0);
  963.     -gradient-end: rgba(255,255,255,0.5);
  964.     -margin-horizontal: 1.5em;
  965.     height: 1px;
  966. }
  967.  
  968. .search-section-content {
  969.     /* This is the space between the provider icon and the results container */
  970.     spacing: 32px;
  971. }
  972.  
  973. .search-statustext {
  974.     color: #efefef;
  975.     font-size: 2em;
  976.     font-weight: bold;
  977. }
  978.  
  979. .list-search-results {
  980.     spacing: 3px;
  981. }
  982.  
  983. .dash-label {
  984.     border-radius: 7px;
  985.     padding: 4px 12px;
  986.     background-color: rgba(0,0,0,0.5);
  987.     text-align: center;
  988.     -x-offset: 8px;
  989. }
  990.  
  991. /* Application Launchers, Grid and List results */
  992.  
  993. .icon-grid {
  994.     spacing: 30px;
  995.     -shell-grid-horizontal-item-size: 136px;
  996.     -shell-grid-vertical-item-size: 136px;
  997. }
  998.  
  999. .icon-grid .overview-icon {
  1000.     icon-size: 48px;
  1001. }
  1002.  
  1003. .app-display {
  1004.     spacing: 20px;
  1005. }
  1006.  
  1007. .app-view-controls {
  1008.     padding-bottom: 32px;
  1009. }
  1010.  
  1011. .app-view-control {
  1012.     padding: 4px 32px;
  1013. }
  1014.  
  1015. .app-view-control:focus {
  1016.     padding: 3px 31px;
  1017. }
  1018.  
  1019. .search-display > StBoxLayout,
  1020. .all-apps,
  1021. .frequent-apps > StBoxLayout {
  1022.     /* horizontal padding to make sure scrollbars or dash don't overlap content */
  1023.     padding: 0px 88px 10px 88px;
  1024. }
  1025.  
  1026. .page-indicator {
  1027.     padding: 15px 20px;
  1028. }
  1029.  
  1030. .page-indicator .page-indicator-icon {
  1031.     width: 18px;
  1032.     height: 18px;
  1033.     background-image: url(page-indicator-inactive.svg);
  1034. }
  1035.  
  1036. .page-indicator:hover .page-indicator-icon {
  1037.     background-image: url(page-indicator-hover.svg);
  1038. }
  1039.  
  1040. .page-indicator:active .page-indicator-icon {
  1041.     background-image: url(page-indicator-active.svg);
  1042. }
  1043.  
  1044. .page-indicator:checked .page-indicator-icon,
  1045. .page-indicator:checked:active .page-indicator-icon {
  1046.     background-image: url(page-indicator-checked.svg);
  1047. }
  1048.  
  1049. .no-frequent-applications-label {
  1050.     font-size: 18pt;
  1051.     color: #999999;
  1052. }
  1053.  
  1054. .app-folder-icon {
  1055.     padding: 5px;
  1056.     spacing-rows: 5px;
  1057.     spacing-columns: 5px;
  1058. }
  1059.  
  1060. .dash-item-container > StButton {
  1061.     padding: 4px 8px;
  1062. }
  1063.  
  1064. .list-search-result-content {
  1065.     spacing: 12px;
  1066.     padding: 12px;
  1067. }
  1068.  
  1069. .list-search-result-title {
  1070.     font-weight: bold;
  1071.     font-size: 14pt;
  1072.     color: white;
  1073. }
  1074.  
  1075. .list-search-result-description {
  1076.     color: #eeeeec;
  1077. }
  1078.  
  1079. .search-provider-icon-more {
  1080.     width: 16px;
  1081.     height: 16px;
  1082.     background-image: url("more-results.svg");
  1083. }
  1084.  
  1085. .app-well-app > .overview-icon.overview-icon-with-label,
  1086. .grid-search-result .overview-icon.overview-icon-with-label {
  1087.     /* since the label controls its own spacing, it is visually more
  1088.     consistent to use different padding values for top and bottom */
  1089.     padding: 10px 8px 5px 8px;
  1090.     spacing: 4px;
  1091. }
  1092.  
  1093. .app-well-app > .overview-icon,
  1094. .show-apps > .overview-icon,
  1095. .search-provider-icon,
  1096. .list-search-result,
  1097. .grid-search-result .overview-icon {
  1098.     border-radius: 4px;
  1099.     padding: 6px;
  1100.     border: 1px rgba(0,0,0,0);
  1101.     transition-duration: 100ms;
  1102.     text-align: center;
  1103. }
  1104.  
  1105. .search-provider-icon {
  1106.     padding: 15px;
  1107. }
  1108.  
  1109. .app-folder-popup {
  1110.     -arrow-border-radius: 8px;
  1111.     -arrow-background-color: rgba(0,0,0,0.3);
  1112.     -arrow-base: 24px;
  1113.     -arrow-rise: 11px;
  1114. }
  1115.  
  1116. .app-folder-popup-bin {
  1117.     padding: 5px;
  1118. }
  1119.  
  1120. .app-well-app.running > .overview-icon {
  1121.     text-shadow: black 0px 2px 2px;
  1122.     background-image: url("running-indicator.svg");
  1123.     background-size: contain;
  1124. }
  1125.  
  1126. .app-well-app.app-folder > .overview-icon {
  1127.     background-color: rgba(0,0,0,0.3);
  1128. }
  1129.  
  1130. .app-well-app:hover > .overview-icon,
  1131. .show-apps:hover > .overview-icon,
  1132. .search-provider-icon:hover,
  1133. .list-search-result:hover,
  1134. .grid-search-result:hover .overview-icon {
  1135.     background-color: rgba(255,255,255,0.1);
  1136.     text-shadow: black 0px 2px 2px;
  1137.     transition-duration: 100ms;
  1138.     color:white;
  1139. }
  1140.  
  1141. .app-display .app-well-app > .overview-icon {
  1142.     border-radius: 4px;
  1143. }
  1144.  
  1145. .list-search-result:hover .list-search-result-description {
  1146.     text-shadow: rgba(0,0,0,0.8) 0px 1px 2px;
  1147. }
  1148.  
  1149. .show-apps {
  1150.     padding: 4px 0;
  1151. }
  1152.  
  1153. .show-apps-icon {
  1154.     color: #a0a0a0;
  1155. }
  1156.  
  1157. .show-apps:hover .show-apps-icon {
  1158.     color: white;
  1159. }
  1160.  
  1161. .app-well-app:checked > .overview-icon,
  1162. .app-well-app:active > .overview-icon,
  1163. .show-apps:checked > .overview-icon,
  1164. .show-apps:active > .overview-icon,
  1165. .search-provider-icon:active,
  1166. .grid-search-result:active .overview-icon,
  1167. .list-search-result:active {
  1168.     background-gradient-start: rgba(255, 255, 255, .05);
  1169.     background-gradient-end: rgba(255, 255, 255, .15);
  1170.     background-gradient-direction: vertical;
  1171.     border-radius: 4px;
  1172.     box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.7);
  1173.     transition-duration: 100ms;
  1174. }
  1175.  
  1176. .show-apps:checked .show-apps-icon,
  1177. .show-apps:focus .show-apps-icon {
  1178.     color: white;
  1179.     transition-duration: 100ms;
  1180. }
  1181.  
  1182. .app-well-app:focus > .overview-icon,
  1183. .grid-search-result:focus .overview-icon,
  1184. .show-apps:focus > .overview-icon,
  1185. .search-provider-icon:focus,
  1186. .list-search-result:focus,
  1187. .app-well-app:selected > .overview-icon,
  1188. .grid-search-result:selected .overview-icon,
  1189. .search-provider-icon:selected,
  1190. .list-search-result:selected {
  1191.     background-color: rgba(255,255,255,0.33);
  1192. }
  1193.  
  1194. /* LookingGlass */
  1195.  
  1196. #LookingGlassDialog {
  1197.     background-color: rgba(0,0,0,0.80);
  1198.     spacing: 4px;
  1199.     padding: 4px;
  1200.     border: 2px solid grey;
  1201.     border-radius: 4px;
  1202. }
  1203.  
  1204. #LookingGlassDialog > #Toolbar {
  1205.     border: 1px solid grey;
  1206.     border-radius: 4px;
  1207. }
  1208.  
  1209. #LookingGlassDialog .labels {
  1210.     spacing: 4px;
  1211. }
  1212.  
  1213. #LookingGlassDialog .notebook-tab {
  1214.     -natural-hpadding: 12px;
  1215.     -minimum-hpadding: 6px;
  1216.     font-weight: bold;
  1217.     color: #ccc;
  1218.     transition-duration: 100ms;
  1219.     padding-left: .3em;
  1220.     padding-right: .3em;
  1221. }
  1222.  
  1223. #LookingGlassDialog .notebook-tab:hover {
  1224.     color: white;
  1225.     text-shadow: black 0px 2px 2px;
  1226. }
  1227.  
  1228. #LookingGlassDialog .notebook-tab:selected {
  1229.     border-image: url("panel-button-border.svg") 10 10 0 2;
  1230.     background-image: url("panel-button-highlight-wide.svg");
  1231.     color: white;
  1232.     text-shadow: black 0px 2px 2px;
  1233. }
  1234.  
  1235. .lg-dialog StEntry {
  1236.     selection-background-color: #bbbbbb;
  1237.     selected-color: #333333;
  1238. }
  1239.  
  1240. .lg-completions-text {
  1241.     font-size: .9em;
  1242.     font-style: italic;
  1243. }
  1244.  
  1245. .lg-obj-inspector-title {
  1246.     spacing: 4px;
  1247. }
  1248.  
  1249. .lg-obj-inspector-button {
  1250.     border: 1px solid gray;
  1251.     padding: 4px;
  1252.     border-radius: 4px;
  1253. }
  1254.  
  1255. .lg-obj-inspector-button:hover {
  1256.     border: 1px solid #ffffff;
  1257. }
  1258.  
  1259. .lg-dialog .shell-link {
  1260.     color: #999999;
  1261. }
  1262.  
  1263. .lg-dialog .shell-link:hover {
  1264.     color: #dddddd;
  1265. }
  1266.  
  1267. #LookingGlassDialog StBoxLayout#EvalBox {
  1268.     padding: 4px;
  1269.     spacing: 4px;
  1270. }
  1271.  
  1272. #LookingGlassDialog StBoxLayout#ResultsArea {
  1273.     spacing: 4px;
  1274. }
  1275.  
  1276. #lookingGlassExtensions {
  1277.     padding: 4px;
  1278. }
  1279.  
  1280. .lg-extensions-list {
  1281.     padding: 4px;
  1282.     spacing: 6px;
  1283. }
  1284.  
  1285. .lg-extension {
  1286.     border: 1px solid #6f6f6f;
  1287.     border-radius: 4px;
  1288.     padding: 4px;
  1289. }
  1290.  
  1291. .lg-extension-name {
  1292.     font-weight: bold;
  1293. }
  1294.  
  1295. .lg-extension-meta {
  1296.     spacing: 6px;
  1297. }
  1298.  
  1299. #LookingGlassPropertyInspector {
  1300.     background: rgba(0, 0, 0, 0.8);
  1301.     border: 2px solid grey;
  1302.     border-radius: 4px;
  1303.     padding: 6px;
  1304. }
  1305.  
  1306. /* Calendar popup */
  1307.  
  1308. .calendar-vertical-separator {
  1309.     -stipple-width: 1px;
  1310.     -stipple-color: #505050;
  1311.     width: 0.3em;
  1312. }
  1313.  
  1314. .calendar {
  1315.     padding: .4em 1.75em .8em 1.75em;
  1316. }
  1317.  
  1318. .calendar-month-label {
  1319.     color: #888a85;
  1320.     font-size: 9.5pt;
  1321.     font-weight: bold;
  1322.     padding-bottom: 8px;
  1323.     padding-top: 8px;
  1324. }
  1325.  
  1326. .calendar-month-label:focus {
  1327.     background-color: #999999;
  1328. }
  1329.  
  1330. .calendar-change-month-back {
  1331.     width: 18px;
  1332.     height: 12px;
  1333.     background-image: url("calendar-arrow-left.svg");
  1334.     border-radius: 4px;
  1335. }
  1336.  
  1337. .calendar-change-month-back:rtl {
  1338.     background-image: url("calendar-arrow-right.svg");
  1339. }
  1340.  
  1341. .calendar-change-month-back:hover,
  1342. .calendar-change-month-back:focus {
  1343.     background-color: #999999;
  1344. }
  1345. .calendar-change-month-back:active {
  1346.     background-color: #aaaaaa;
  1347. }
  1348.  
  1349. .calendar-change-month-forward {
  1350.     width: 18px;
  1351.     height: 12px;
  1352.     background-image: url("calendar-arrow-right.svg");
  1353.     border-radius: 4px;
  1354. }
  1355.  
  1356. .calendar-change-month-forward:rtl {
  1357.     background-image: url("calendar-arrow-left.svg");
  1358. }
  1359.  
  1360. .calendar-change-month-forward:hover,
  1361. .calendar-change-month-forward:focus {
  1362.     background-color: #999999;
  1363. }
  1364. .calendar-change-month-forward:active {
  1365.     background-color: #aaaaaa;
  1366. }
  1367.  
  1368. .datemenu-date-label {
  1369.     padding: .4em 1.7em;
  1370.     font-weight: bold;
  1371.     text-align: center;
  1372.     color: #eeeeec;
  1373.     border-radius: 4px;
  1374. }
  1375.  
  1376. .datemenu-date-label:hover,
  1377. .datemenu-date-label:focus {
  1378.     background-color: #999999;
  1379. }
  1380.  
  1381. .datemenu-date-label:active {
  1382.     background-color: #aaaaaa;
  1383. }
  1384.  
  1385. .calendar-day-base {
  1386.     font-size: 9pt;
  1387.     text-align: center;
  1388.     width: 2.4em;
  1389.     height: 2.4em;
  1390. }
  1391.  
  1392. .calendar-day-base:hover,
  1393. .calendar-day-base:focus {
  1394.     background-color: #777777;
  1395. }
  1396.  
  1397. .calendar-day-base:active {
  1398.     font-size: 9pt;
  1399.     background-color: #555555;
  1400.     color: white;
  1401. }
  1402.  
  1403. .calendar-day-heading {
  1404.     color: #888a85;
  1405.     padding-top: .2em;
  1406.     height: 1.7em;
  1407. }
  1408.  
  1409. .calendar-week-number {
  1410.     color: #babdb6;
  1411.     font-weight: bold;
  1412. }
  1413.  
  1414. /* Hack used in lieu of border-collapse - see calendar.js */
  1415. .calendar-day {
  1416.     border: 1px solid #505050;
  1417.     color: #babdb6;
  1418.     border-top-width: 0;
  1419.     border-left-width: 0;
  1420. }
  1421.  
  1422. .calendar-day-top {
  1423.     border-top-width: 1px;
  1424. }
  1425.  
  1426. .calendar-day-left {
  1427.     border-left-width: 1px;
  1428. }
  1429.  
  1430. .calendar-work-day {
  1431. }
  1432.  
  1433. .calendar-nonwork-day {
  1434.     background-color: rgba(128, 128, 128, .1);
  1435. }
  1436.  
  1437. .calendar-today {
  1438.     background-image: url("calendar-today.svg");
  1439.     text-shadow: black 0px 2px 2px;
  1440.     font-weight: bold;
  1441. }
  1442.  
  1443. .calendar-day-with-events {
  1444.     font-weight: bold;
  1445.     color: white;
  1446. }
  1447.  
  1448. .calendar-other-month-day {
  1449.     color: #333333;
  1450. }
  1451.  
  1452. .events-table {
  1453.     width: 320px;
  1454.     spacing-columns: 6pt;
  1455.     padding: 0 1.4em;
  1456. }
  1457.  
  1458. .events-table:ltr {
  1459.     padding-right: 1.9em;
  1460. }
  1461.  
  1462. .events-table:rtl {
  1463.     padding-left: 1.9em;
  1464. }
  1465.  
  1466. .events-day-header {
  1467.     font-weight: bold;
  1468.     color: #999999;
  1469.     padding-left: 0.4em;
  1470.     padding-top: 1.2em;
  1471. }
  1472.  
  1473. .events-day-header:first-child {
  1474.     padding-top: 0;
  1475. }
  1476.  
  1477. .events-day-header:rtl {
  1478.     padding-left: 0;
  1479.     padding-right: 0.4em;
  1480. }
  1481.  
  1482. .events-day-dayname {
  1483.     color: rgba(153, 153, 153, 1.0);
  1484.     text-align: left;
  1485.     min-width: 20px;
  1486. }
  1487.  
  1488. .events-day-dayname:rtl {
  1489.     text-align: right;
  1490. }
  1491.  
  1492. .events-day-time {
  1493.     color: #fff;
  1494.     text-align: right;
  1495. }
  1496.  
  1497. .events-day-time-ellipses {
  1498.     color: rgba(153, 153, 153, 1.0);
  1499. }
  1500.  
  1501. .events-day-time:rtl {
  1502.     text-align: left;
  1503. }
  1504.  
  1505. .events-day-task {
  1506.     color: rgba(153, 153, 153, 1.0);
  1507.     padding-left: 8pt;
  1508. }
  1509.  
  1510. .events-day-task:rtl {
  1511.     padding-left: 0px;
  1512.     padding-right: 8pt;
  1513. }
  1514.  
  1515. /* Message Tray */
  1516.  
  1517. #message-tray {
  1518.     background: #2e3436 url(message-tray-background.png);
  1519.     background-repeat: repeat;
  1520.     height: 72px;
  1521. }
  1522.  
  1523. .message-tray-summary {
  1524.     height: 72px;
  1525. }
  1526.  
  1527. .message-tray-menu-button StIcon {
  1528.     padding: 0 20px;
  1529.     color: #aaaaaa;
  1530.     icon-size: 24px;
  1531. }
  1532.  
  1533. .message-tray-menu-button:hover StIcon,
  1534. .message-tray-menu-button:active StIcon,
  1535. .message-tray-menu-button:focus StIcon {
  1536.     color: #eeeeee;
  1537. }
  1538.  
  1539. .url-highlighter {
  1540.     link-color: #ccccff;
  1541. }
  1542.  
  1543. .no-messages-label {
  1544.     color: #999999;
  1545. }
  1546.  
  1547. .notification {
  1548.     border-radius: 10px 10px 0px 0px;
  1549.     background: rgba(0,0,0,0.9);
  1550.     padding: 8px 8px 4px 8px;
  1551.     spacing-rows: 4px;
  1552.     spacing-columns: 10px;
  1553. }
  1554.  
  1555. .notification, #notification-container {
  1556.     font-size: 11pt;
  1557.     width: 34em;
  1558. }
  1559.  
  1560. .notification.multi-line-notification {
  1561.     padding-bottom: 8px;
  1562. }
  1563.  
  1564. .notification-unexpanded {
  1565.     /* We want to force the actor at a specific size, irrespective
  1566.        of its minimum and preferred size, so we override both */
  1567.     min-height: 36px;
  1568.     height: 36px;
  1569. }
  1570.  
  1571. /* We use row-span = 2 for the image cell, which prevents its height preferences to be
  1572.    taken into account during allocation, so its height ends up being limited by the height
  1573.    of the content in the other rows. To avoid showing a stretched image, we set the minimum
  1574.    height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 */
  1575. .notification-with-image {
  1576.     min-height: 159px;
  1577. }
  1578.  
  1579. .summary-boxpointer {
  1580.     -arrow-border-radius: 15px;
  1581.     -arrow-background-color: rgba(0,0,0,0.9);
  1582.     -arrow-base: 36px;
  1583.     -arrow-rise: 18px;
  1584.     color: white;
  1585.     -boxpointer-gap: 4px;
  1586. }
  1587.  
  1588. .summary-boxpointer .notification {
  1589.     border-radius: 9px;
  1590.     background: rgba(0,0,0,0) !important;
  1591.     padding-bottom: 12px;
  1592. }
  1593.  
  1594. .summary-boxpointer #summary-right-click-menu {
  1595.     padding-top: 12px;
  1596.     padding-bottom: 12px;
  1597. }
  1598.  
  1599. .summary-notification-stack-scrollview {
  1600.     max-height: 18em;
  1601.     padding-top: 8px;
  1602.     padding-bottom: 8px;
  1603. }
  1604.  
  1605. .summary-notification-stack-scrollview:ltr {
  1606.     padding-right: 8px;
  1607. }
  1608.  
  1609. .summary-notification-stack-scrollview:rtl {
  1610.     padding-left: 8px;
  1611. }
  1612.  
  1613. .notification-scrollview {
  1614.     max-height: 10em;
  1615.     -st-vfade-offset: 24px;
  1616. }
  1617.  
  1618. .notification-scrollview:ltr > StScrollBar {
  1619.     padding-left: 6px;
  1620. }
  1621.  
  1622. .notification-scrollview:rtl > StScrollBar {
  1623.     padding-right: 6px;
  1624. }
  1625.  
  1626. .notification-body {
  1627.     spacing: 5px;
  1628. }
  1629.  
  1630. .notification-actions {
  1631.     padding-top: 18px;
  1632.     spacing: 10px;
  1633. }
  1634.  
  1635. .notification-button {
  1636.     -st-natural-width: 140px;
  1637.     padding: 4px 4px 5px;
  1638. }
  1639.  
  1640. .notification-button:focus {
  1641.     -st-natural-width: 138px;
  1642.     padding: 3px 4px 4px;
  1643. }
  1644.  
  1645. .notification-icon-button {
  1646.     border-radius: 5px;
  1647.     padding: 5px;
  1648. }
  1649.  
  1650. .notification-icon-button:focus {
  1651.     padding: 4px;
  1652. }
  1653.  
  1654. .notification-icon-button > StIcon {
  1655.     icon-size: 16px;
  1656.     padding: 8px;
  1657. }
  1658.  
  1659. .secondary-icon {
  1660.     icon-size: 1.09em;
  1661. }
  1662.  
  1663. .hotplug-transient-box {
  1664.     spacing: 6px;
  1665.     padding: 2px 72px 2px 12px;
  1666. }
  1667.  
  1668. .hotplug-notification-item {
  1669.     padding: 2px 10px;
  1670. }
  1671.  
  1672. .hotplug-notification-item:focus {
  1673.     padding: 1px 71px 1px 11px;
  1674. }
  1675.  
  1676. .hotplug-notification-item-icon {
  1677.     icon-size: 24px;
  1678.     padding: 2px 5px;
  1679. }
  1680.  
  1681. .hotplug-resident-box {
  1682.     spacing: 8px;
  1683. }
  1684.  
  1685. .hotplug-resident-mount {
  1686.     spacing: 8px;
  1687.     border-radius: 4px;
  1688.  
  1689.     color: #ccc;
  1690. }
  1691.  
  1692. .hotplug-resident-mount:hover {
  1693.     background-gradient-direction: horizontal;
  1694.     background-gradient-start: rgba(255, 255, 255, 0.1);
  1695.     background-gradient-end: rgba(255, 255, 255, 0);
  1696.  
  1697.     color: #fff;
  1698. }
  1699.  
  1700. .hotplug-resident-mount-label {
  1701.     color: inherit;
  1702.     padding-left: 6px;
  1703. }
  1704.  
  1705. .hotplug-resident-mount-icon {
  1706.     icon-size: 24px;
  1707.     padding-left: 6px;
  1708. }
  1709.  
  1710. .hotplug-resident-eject-icon {
  1711.     icon-size: 16px;
  1712. }
  1713.  
  1714. .hotplug-resident-eject-button {
  1715.     padding: 7px;
  1716.     border-radius: 5px;
  1717.     color: #ccc;
  1718. }
  1719.  
  1720. .chat-log-message {
  1721.     color: #888888;
  1722. }
  1723.  
  1724. .chat-empty-line {
  1725.     font-size: 4px;
  1726. }
  1727.  
  1728. .chat-received {
  1729.     padding-left: 4px;
  1730. }
  1731.  
  1732. .chat-received:rtl {
  1733.     padding-left: 0px;
  1734.     padding-right: 4px;
  1735. }
  1736.  
  1737. .chat-sent {
  1738.     padding-left: 18pt;
  1739.     color: #959595;
  1740. }
  1741.  
  1742. .chat-sent:rtl {
  1743.     padding-left: 0px;
  1744.     padding-right: 18pt;
  1745. }
  1746.  
  1747. .chat-meta-message {
  1748.     padding-left: 4px;
  1749.     font-size: 9pt;
  1750.     font-weight: bold;
  1751.     color: #bbbbbb;
  1752. }
  1753.  
  1754. .chat-meta-message:rtl {
  1755.     padding-left: 0px;
  1756.     padding-right: 4px;
  1757. }
  1758.  
  1759. .chat-notification-scrollview{
  1760.     max-height: 22em;
  1761. }
  1762.  
  1763. .subscription-message {
  1764.     font-style: italic;
  1765. }
  1766.  
  1767. .notification StEntry {
  1768.     border-radius: 4px;
  1769. }
  1770.  
  1771. .summary-source-button {
  1772.     padding: 6px 3px 6px 3px;
  1773. }
  1774.  
  1775. .summary-source-button:last-child:ltr {
  1776.     padding-right: 6px;
  1777. }
  1778.  
  1779. .summary-source-button:last-child:rtl {
  1780.     padding-left: 6px;
  1781. }
  1782.  
  1783. .summary-source-button:hover .summary-source {
  1784.     background-color: rgba(255,255,255,0.1);
  1785. }
  1786.  
  1787. .summary-source-button:focus .summary-source,
  1788. .summary-source-button:selected .summary-source {
  1789.     background-color: rgba(255,255,255,0.33);
  1790. }
  1791.  
  1792. .summary-source {
  1793.     border-radius: 4px;
  1794.     padding: 0 6px 0 6px;
  1795.     transition-duration: 100ms;
  1796. }
  1797.  
  1798. .summary-source-counter {
  1799.     background-image: url("summary-counter.svg");
  1800.     background-size: 2.4em;
  1801.     font-size: 10pt;
  1802.     font-weight: bold;
  1803.     height: 2.4em;
  1804.     width: 2.4em;
  1805.     -shell-counter-overlap-x: 13px;
  1806.     -shell-counter-overlap-y: 13px;
  1807. }
  1808.  
  1809. /* OSD */
  1810. .osd-window {
  1811.     text-align: center;
  1812.     font-weight: bold;
  1813.     spacing: 1em;
  1814. }
  1815.  
  1816. .osd-window .level {
  1817.     height: 0.6em;
  1818.     border-radius: 0.3em;
  1819.     background-color: rgba(190,190,190,0.2);
  1820. }
  1821.  
  1822. /* App Switcher */
  1823. .switcher-popup {
  1824.     padding: 8px;
  1825.     spacing: 16px;
  1826. }
  1827.  
  1828. .osd-window,
  1829. .switcher-list {
  1830.     background: rgba(0,0,0,0.8);
  1831.     border: 1px solid rgba(128,128,128,0.40);
  1832.     border-radius: 24px;
  1833.     padding: 20px;
  1834. }
  1835.  
  1836. .switcher-list-item-container {
  1837.     spacing: 8px;
  1838. }
  1839.  
  1840. .switcher-list .item-box {
  1841.     padding: 8px;
  1842.     border-radius: 8px;
  1843. }
  1844.  
  1845. .switcher-list .item-box:outlined {
  1846.     padding: 6px;
  1847.     border: 2px solid rgba(85,85,85,1.0);
  1848. }
  1849.  
  1850. .switcher-list .item-box:selected {
  1851.     background: rgba(255,255,255,0.33);
  1852. }
  1853.  
  1854. .switcher-list .thumbnail-box {
  1855.     padding: 2px;
  1856.     spacing: 4px;
  1857. }
  1858.  
  1859. .switcher-list .thumbnail {
  1860.     width:  256px;
  1861. }
  1862.  
  1863. .switcher-list .separator {
  1864.     width: 1px;
  1865.     background: rgba(255,255,255,0.33);
  1866. }
  1867.  
  1868. .ripple-box {
  1869.     width: 52px;
  1870.     height: 52px;
  1871.     background-image: url("corner-ripple-ltr.png");
  1872.     background-size: contain;
  1873. }
  1874.  
  1875. .ripple-box:rtl {
  1876.     background-image: url("corner-ripple-rtl.png");
  1877. }
  1878.  
  1879. .switcher-arrow {
  1880.     border-color: rgba(0,0,0,0);
  1881.     color: #808080;
  1882. }
  1883.  
  1884. .switcher-arrow:highlighted {
  1885.     border-color: rgba(0,0,0,0);
  1886.     color: white;
  1887. }
  1888.  
  1889. /* Workspace Switcher */
  1890. .workspace-switcher-group {
  1891.     padding: 12px;
  1892. }
  1893.  
  1894. .workspace-switcher-container {
  1895.     background: rgba(0,0,0,0.8);
  1896.     border: 1px solid rgba(128,128,128,0.40);
  1897.     border-radius: 24px;
  1898.     padding: 20px;
  1899. }
  1900.  
  1901. .workspace-switcher {
  1902.     background: transparent;
  1903.     border: 0px;
  1904.     border-radius: 0px;
  1905.     padding: 0px;
  1906.     spacing: 8px;
  1907. }
  1908.  
  1909. .ws-switcher-active-up {
  1910.     height: 100px;
  1911.     border: 0px;
  1912.     background: rgba(255,255,255,0.5);
  1913.     background-image: url("ws-switch-arrow-up.png");
  1914.     border-radius: 8px;
  1915. }
  1916.  
  1917. .ws-switcher-active-down {
  1918.     height: 100px;
  1919.     border: 0px;
  1920.     background: rgba(255,255,255,0.5);
  1921.     background-image: url("ws-switch-arrow-down.png");
  1922.     border-radius: 8px;
  1923. }
  1924.  
  1925. .ws-switcher-box {
  1926.     height: 96px;
  1927.     border: 2px solid rgba(85,85,85,0.5);
  1928.     background: transparent;
  1929.     border-radius: 8px;
  1930. }
  1931.  
  1932. /* Tile previews */
  1933. .tile-preview {
  1934.     background-color: rgba(74, 144, 217, 0.35);
  1935.     border: 1px solid #4a90d9; /* Adwaita selected bg color */
  1936. }
  1937.  
  1938. .tile-preview-left.on-primary {
  1939.     /* keep in sync with -panel-corner-radius */
  1940.     border-radius: 6px 0 0 0;
  1941. }
  1942.  
  1943. .tile-preview-right.on-primary {
  1944.     /* keep in sync with -panel-corner-radius */
  1945.     border-radius: 0 6px 0 0;
  1946. }
  1947.  
  1948. .tile-preview-left.tile-preview-right.on-primary {
  1949.     /* keep in sync with -panel-corner-radius */
  1950.     border-radius: 6px 6px 0 0;
  1951. }
  1952.  
  1953. /* Modal Dialogs */
  1954.  
  1955. /* Dialog Subject Text Style */
  1956. .show-processes-dialog-subject,
  1957. .mount-question-dialog-subject,
  1958. .end-session-dialog-subject {
  1959.     font-size: 14pt;
  1960.     font-weight: bold;
  1961.     color: #999999;
  1962. }
  1963.  
  1964. .modal-dialog {
  1965.     border-radius: 24px;
  1966.     background-color: rgba(0.0, 0.0, 0.0, 0.9);
  1967.     border: 2px solid #868686;
  1968.  
  1969.     padding-right: 42px;
  1970.     padding-left: 42px;
  1971.     padding-bottom: 30px;
  1972.     padding-top: 30px;
  1973. }
  1974.  
  1975. .modal-dialog-button-box {
  1976.     spacing: 21px;
  1977.     padding-top: 50px;
  1978. }
  1979.  
  1980. .modal-dialog-button {
  1981.     padding: 4px 32px 5px;
  1982. }
  1983.  
  1984. .modal-dialog-button:focus {
  1985.     padding: 3px 31px 4px;
  1986. }
  1987.  
  1988. /* Run Dialog */
  1989.  
  1990. .run-dialog-label {
  1991.     font-size: 12pt;
  1992.     font-weight: bold;
  1993.     color: #999999;
  1994.     padding-bottom: .4em;
  1995. }
  1996.  
  1997. .run-dialog-error-box {
  1998.     padding-top: 15px;
  1999.     spacing: 5px;
  2000. }
  2001.  
  2002. .modal-dialog .run-dialog-entry {
  2003.     width: 20em;
  2004. }
  2005.  
  2006. .lightbox {
  2007.     background-color: black;
  2008. }
  2009.  
  2010. .flashspot {
  2011.     background-color: white;
  2012. }
  2013.  
  2014. /* End Session Dialog */
  2015. .end-session-dialog {
  2016.     spacing: 42px;
  2017. }
  2018.  
  2019. .end-session-dialog-list {
  2020.     padding-top: 20px;
  2021. }
  2022.  
  2023. .end-session-dialog-layout {
  2024.     padding-left: 17px;
  2025. }
  2026.  
  2027. .end-session-dialog-layout:rtl {
  2028.     padding-right: 17px;
  2029. }
  2030.  
  2031. .end-session-dialog-description {
  2032.     width: 28em;
  2033.     padding-bottom: 10px;
  2034. }
  2035.  
  2036. .end-session-dialog-description:rtl {
  2037.     width: 28em;
  2038.     padding-bottom: 10px;
  2039.     text-align: right;
  2040. }
  2041.  
  2042. .end-session-dialog-warning {
  2043.     width: 28em;
  2044.     color: #f57900;
  2045.     padding-top: 6px;
  2046. }
  2047.  
  2048. .end-session-dialog-warning:rtl {
  2049.     width: 28em;
  2050.     color: #f57900;
  2051.     padding-top: 6px;
  2052.     text-align: right;
  2053. }
  2054.  
  2055. .end-session-dialog-logout-icon {
  2056.     border: 2px solid #8b8b8b;
  2057.     border-radius: 5px;
  2058.     width: 48px;
  2059.     height: 48px;
  2060.     background-size: contain;
  2061. }
  2062.  
  2063. .end-session-dialog-shutdown-icon {
  2064.     color: #bebebe;
  2065.     width: 48px;
  2066.     height: 48px;
  2067. }
  2068.  
  2069. .end-session-dialog-inhibitor-layout {
  2070.     spacing: 16px;
  2071.     max-height: 200px;
  2072.     padding-right: 65px;
  2073.     padding-left: 65px;
  2074. }
  2075.  
  2076. .end-session-dialog-session-list,
  2077. .end-session-dialog-app-list {
  2078.     spacing: 1em;
  2079. }
  2080.  
  2081. .end-session-dialog-list-header {
  2082.     font-weight: bold;
  2083. }
  2084.  
  2085. .end-session-dialog-list-header:rtl {
  2086.     text-align: right;
  2087. }
  2088.  
  2089. .end-session-dialog-app-list-item,
  2090. .end-session-dialog-session-list-item {
  2091.     spacing: 1em;
  2092. }
  2093.  
  2094. .end-session-dialog-app-list-item-name,
  2095. .end-session-dialog-session-list-item-name {
  2096.     font-weight: bold;
  2097. }
  2098.  
  2099. .end-session-dialog-app-list-item-description {
  2100.     color: #cccccc;
  2101.     font-size: 10pt;
  2102. }
  2103.  
  2104. /* Restart message */
  2105. .restart-message {
  2106.     font-size: 14pt;
  2107. }
  2108.  
  2109. /* ShellMountOperation Dialogs */
  2110. .shell-mount-operation-icon {
  2111.     icon-size: 48px;
  2112. }
  2113.  
  2114. .show-processes-dialog,
  2115. .mount-question-dialog {
  2116.     spacing: 24px;
  2117. }
  2118.  
  2119. .show-processes-dialog-subject,
  2120. .mount-question-dialog-subject {
  2121.     padding-top: 10px;
  2122.     padding-left: 17px;
  2123.     padding-bottom: 6px;
  2124. }
  2125.  
  2126. .mount-question-dialog-subject {
  2127.     max-width: 500px;
  2128. }
  2129.  
  2130. .show-processes-dialog-subject:rtl,
  2131. .mount-question-dialog-subject:rtl {
  2132.     padding-left: 0px;
  2133.     padding-right: 17px;
  2134. }
  2135.  
  2136. .show-processes-dialog-description,
  2137. .mount-question-dialog-description {
  2138.     padding-left: 17px;
  2139.     width: 28em;
  2140. }
  2141.  
  2142. .show-processes-dialog-description:rtl,
  2143. .mount-question-dialog-description:rtl {
  2144.     padding-right: 17px;
  2145. }
  2146.  
  2147. .show-processes-dialog-app-list {
  2148.     font-size: 10pt;
  2149.     max-height: 200px;
  2150.     padding-top: 24px;
  2151.     padding-left: 49px;
  2152.     padding-right: 32px;
  2153. }
  2154.  
  2155. .show-processes-dialog-app-list:rtl {
  2156.     padding-right: 49px;
  2157.     padding-left: 32px;
  2158. }
  2159.  
  2160. .show-processes-dialog-app-list-item {
  2161.     color: #ccc;
  2162. }
  2163.  
  2164. .show-processes-dialog-app-list-item:hover {
  2165.     color: white;
  2166. }
  2167.  
  2168. .show-processes-dialog-app-list-item:ltr {
  2169.     padding-right: 1em;
  2170. }
  2171.  
  2172. .show-processes-dialog-app-list-item:rtl {
  2173.     padding-left: 1em;
  2174. }
  2175.  
  2176. .show-processes-dialog-app-list-item-icon:ltr {
  2177.     padding-right: 17px;
  2178. }
  2179.  
  2180. .show-processes-dialog-app-list-item-icon:rtl {
  2181.     padding-left: 17px;
  2182. }
  2183.  
  2184. .show-processes-dialog-app-list-item-name {
  2185.     font-size: 10pt;
  2186. }
  2187.  
  2188. /* Password or Authentication Dialog */
  2189. .prompt-dialog {
  2190.     /* this is the width of the entire modal popup */
  2191.     width: 500px;
  2192. }
  2193.  
  2194. .prompt-dialog-main-layout {
  2195.     spacing: 24px;
  2196.     padding: 10px;
  2197. }
  2198.  
  2199. .prompt-dialog-message-layout {
  2200.     spacing: 16px;
  2201. }
  2202.  
  2203. .prompt-dialog-headline {
  2204.     font-size: 12pt;
  2205.     font-weight: bold;
  2206.     color: #666666;
  2207. }
  2208.  
  2209. .prompt-dialog-description:rtl {
  2210.     text-align: right;
  2211. }
  2212.  
  2213. .prompt-dialog-password-box {
  2214.     spacing: 1em;
  2215.     padding-bottom: 1em;
  2216. }
  2217.  
  2218. .prompt-dialog-error-label {
  2219.     font-size: 10pt;
  2220.     color: #ffff00;
  2221.     padding-bottom: 8px;
  2222. }
  2223.  
  2224. .prompt-dialog-info-label {
  2225.     font-size: 10pt;
  2226.     padding-bottom: 8px;
  2227. }
  2228.  
  2229. .hidden {
  2230.     color: rgba(0,0,0,0);
  2231. }
  2232.  
  2233. .prompt-dialog-null-label {
  2234.     font-size: 10pt;
  2235.     padding-bottom: 8px;
  2236. }
  2237.  
  2238. /* Polkit Dialog */
  2239.  
  2240. .polkit-dialog-user-layout {
  2241.     padding-left: 10px;
  2242.     spacing: 10px;
  2243. }
  2244.  
  2245. .polkit-dialog-user-layout:rtl {
  2246.     padding-left: 0px;
  2247.     padding-right: 10px;
  2248. }
  2249.  
  2250. .polkit-dialog-user-root-label {
  2251.     color: #ff0000;
  2252. }
  2253.  
  2254. .polkit-dialog-user-icon {
  2255.     border: 2px solid #8b8b8b;
  2256.     border-radius: 5px;
  2257.     background-size: contain;
  2258.     width: 48px;
  2259.     height: 48px;
  2260. }
  2261.  
  2262. /* Network Agent Dialog */
  2263.  
  2264. .network-dialog-secret-table {
  2265.     spacing-rows: 15px;
  2266.     spacing-columns: 1em;
  2267. }
  2268.  
  2269. .keyring-dialog-control-table {
  2270.     spacing-rows: 15px;
  2271.     spacing-columns: 1em;
  2272. }
  2273.  
  2274. /* Magnifier */
  2275.  
  2276. .magnifier-zoom-region {
  2277.     border: 2px solid rgba(128, 0, 0, 255);
  2278. }
  2279.  
  2280. .magnifier-zoom-region.full-screen {
  2281.     border-width: 0px;
  2282. }
  2283.  
  2284. /* On-screen Keyboard */
  2285.  
  2286. #keyboard {
  2287.     background: rgba(0,0,0,0.8);
  2288. }
  2289.  
  2290. .keyboard-layout {
  2291.     spacing: 10px;
  2292.     padding: 10px;
  2293. }
  2294.  
  2295. .keyboard-row {
  2296.     spacing: 15px;
  2297. }
  2298.  
  2299. .keyboard-key {
  2300.     min-height: 30px;
  2301.     min-width: 30px;
  2302.     background-gradient-start: rgba(255,245,245,0.4);
  2303.     background-gradient-end: rgba(105,105,105,0.1);
  2304.     background-gradient-direction: vertical;
  2305.     font-size: 14pt;
  2306.     font-weight: bold;
  2307.     border-radius: 10px;
  2308.     border: 2px solid #a0a0a0;
  2309.     color: white;
  2310. }
  2311.  
  2312. .keyboard-key:grayed {
  2313.    color: #808080;
  2314.    border-color: #808080;
  2315. }
  2316.  
  2317. .keyboard-key:checked,
  2318. .keyboard-key:hover {
  2319.     background: #303030;
  2320.     border: 3px solid white;
  2321. }
  2322.  
  2323. .keyboard-key:active {
  2324.     background: #808080;
  2325. }
  2326.  
  2327. .keyboard-subkeys {
  2328.     color: white;
  2329.     padding: 5px;
  2330.     -arrow-border-radius: 10px;
  2331.     -arrow-background-color: #090909;
  2332.     -arrow-border-width: 2px;
  2333.     -arrow-border-color: white;
  2334.     -arrow-base: 20px;
  2335.     -arrow-rise: 10px;
  2336.     -boxpointer-gap: 5px;
  2337. }
  2338.  
  2339. /* IBus Candidate Popup */
  2340.  
  2341. .candidate-popup-content {
  2342.     padding: 0.5em;
  2343.     spacing: 0.3em;
  2344. }
  2345.  
  2346. .candidate-index {
  2347.     padding: 0 0.5em 0 0;
  2348.     color: #cccccc;
  2349. }
  2350.  
  2351. .candidate-box {
  2352.     padding: 0.3em 0.5em 0.3em 0.5em;
  2353. }
  2354.  
  2355. .candidate-box:selected {
  2356.     border-radius: 4px;
  2357.     background-color: rgba(255,255,255,0.2);
  2358. }
  2359.  
  2360. .candidate-box:hover {
  2361.     border-radius: 4px;
  2362.     background-color: rgba(255,255,255,0.1);
  2363. }
  2364. .candidate-page-button-box {
  2365.     height: 2em;
  2366.     width: 80px;
  2367. }
  2368.  
  2369. .vertical .candidate-page-button-box {
  2370.     padding-top: 0.5em;
  2371. }
  2372.  
  2373. .horizontal .candidate-page-button-box {
  2374.     padding-left: 0.5em;
  2375. }
  2376.  
  2377. .candidate-page-button-previous {
  2378.     border-radius: 4px 0px 0px 4px;
  2379. }
  2380.  
  2381. .candidate-page-button-next {
  2382.     border-radius: 0px 4px 4px 0px;
  2383. }
  2384.  
  2385. .candidate-page-button-icon {
  2386.     icon-size: 1em;
  2387. }
  2388.  
  2389. /* Login Dialog */
  2390.  
  2391. .framed-user-icon {
  2392.     border: 2px solid #8b8b8b;
  2393.     border-radius: 3px;
  2394.     background-size: contain;
  2395. }
  2396.  
  2397. .framed-user-icon:hover {
  2398.     border: 2px solid #bbbbbb;
  2399. }
  2400.  
  2401. .login-dialog-banner {
  2402.     font-size: 10pt;
  2403.     font-weight: bold;
  2404.     text-align: center;
  2405.     color: #666666;
  2406.     padding-bottom: 1em;
  2407. }
  2408.  
  2409. .login-dialog {
  2410.     /* Reset border and background */
  2411.     border: none;
  2412.     background-color: transparent;
  2413. }
  2414.  
  2415. .login-dialog-button-box {
  2416.     spacing: 5px;
  2417. }
  2418.  
  2419. .login-dialog-user-list-view {
  2420.     -st-vfade-offset: 1em;
  2421. }
  2422.  
  2423. .login-dialog-user-list {
  2424.     spacing: 12px;
  2425.     padding: .2em;
  2426.     width: 23em;
  2427. }
  2428.  
  2429. .login-dialog-user-list-item {
  2430.     border-radius: 5px;
  2431.     padding: .2em;
  2432.     color: #bfbfbf;
  2433.     text-shadow: black 0px 2px 2px;
  2434. }
  2435.  
  2436. .login-dialog-user-list-item:ltr {
  2437.     padding-right: 1em;
  2438. }
  2439.  
  2440. .login-dialog-user-list-item:rtl {
  2441.     padding-left: 1em;
  2442. }
  2443.  
  2444. .login-dialog-user-list-item:hover {
  2445.     background-color: rgba(255,255,255,0.1);
  2446. }
  2447.  
  2448. .login-dialog-user-list:expanded .login-dialog-user-list-item:focus {
  2449.     background-color: rgba(255,255,255,0.33);
  2450. }
  2451.  
  2452. .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
  2453.     background-image: url("logged-in-indicator.svg");
  2454.     background-size: contain;
  2455. }
  2456.  
  2457. .login-dialog-user-list-item .login-dialog-timed-login-indicator {
  2458.     background-color: rgba(0,0,0,0.0);
  2459.     height: 2px;
  2460. }
  2461.  
  2462. .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
  2463.     background-color: #8b8b8b;
  2464. }
  2465.  
  2466. .login-dialog-not-listed-label {
  2467.     font-size: 10.5pt;
  2468.     font-weight: bold;
  2469.     color: #666666;
  2470.     padding-top: 1em;
  2471. }
  2472.  
  2473. .login-dialog-user-selection-box {
  2474.     padding: 100px 0;
  2475. }
  2476.  
  2477. .login-dialog-user-selection-box .login-dialog-not-listed-label {
  2478.     padding-left: 2px;
  2479. }
  2480.  
  2481. .login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
  2482. .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
  2483.     color: #E8E8E8;
  2484. }
  2485.  
  2486. .login-dialog-username,
  2487. .user-widget-label {
  2488.     font-size: 16pt;
  2489.     font-weight: bold;
  2490.     text-align: left;
  2491.     padding-left: 15px;
  2492.     text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 1px 0px;
  2493. }
  2494.  
  2495. .login-dialog-prompt-layout {
  2496.     padding-top: 24px;
  2497.     padding-bottom: 12px;
  2498.     spacing: 8px;
  2499.     width: 23em;
  2500. }
  2501.  
  2502. .login-dialog-prompt-label {
  2503.     color: #eeeeee;
  2504.     font-size: 14px;
  2505.     padding-top: 11px;
  2506. }
  2507.  
  2508. .login-dialog-session-list-button StIcon {
  2509.     icon-size: 1.25em;
  2510. }
  2511.  
  2512. .login-dialog-session-list-button {
  2513.     color: #8b8b8b;
  2514. }
  2515.  
  2516. .login-dialog-session-list-button:hover,
  2517. .login-dialog-session-list-button:focus,
  2518. .login-dialog-session-list-button:active {
  2519.     color: white;
  2520. }
  2521.  
  2522. .login-dialog-logo-bin {
  2523.     padding: 24px 0px;
  2524. }
  2525.  
  2526. .login-dialog .modal-dialog-button-box {
  2527.     spacing: 3px;
  2528. }
  2529.  
  2530. .login-dialog .modal-dialog-button {
  2531.     border-radius: 5px;
  2532.     padding: 3px 18px;
  2533. }
  2534.  
  2535. .login-dialog .modal-dialog-button:focus {
  2536.     padding: 2px 17px;
  2537. }
  2538.  
  2539. .login-dialog .modal-dialog-button:default {
  2540.     background-gradient-start: #6793c4;
  2541.     background-gradient-end: #335d8f;
  2542.     background-gradient-direction: vertical;
  2543.     border-color: #16335d;
  2544. }
  2545.  
  2546. .login-dialog .modal-dialog-button:default:focus {
  2547.     border: 2px solid #377fe7;
  2548. }
  2549.  
  2550. .login-dialog .modal-dialog-button:default:hover {
  2551.     background-gradient-start: #74a0d0;
  2552.     background-gradient-end: #436d9f;
  2553. }
  2554.  
  2555. .login-dialog .modal-dialog-button:default:active,
  2556. .login-dialog .modal-dialog-button:default:pressed {
  2557.     background-gradient-start: #436d9f;
  2558.     background-gradient-end: #74a0d0;
  2559. }
  2560.  
  2561. .login-dialog .modal-dialog-button:default:insensitive {
  2562.     border-color: #666666;
  2563.     color: #9f9f9f;
  2564.     background-gradient-direction: none;
  2565.     background-color: rgba(102, 102, 102, 0.15);
  2566. }
  2567.  
  2568. .login-dialog-message {
  2569.     padding-top: 4px;
  2570.     padding-bottom: 16px;
  2571.     min-height: 2em;
  2572. }
  2573.  
  2574. .login-dialog-message-warning {
  2575.     color: orange;
  2576. }
  2577.  
  2578. .login-dialog-message-hint {
  2579.     padding-top: 0px;
  2580.     padding-bottom: 20px;
  2581. }
  2582.  
  2583. .user-widget-label {
  2584. }
  2585.  
  2586. .user-widget-label:ltr {
  2587.     padding-left: 18px;
  2588. }
  2589.  
  2590. .user-widget-label:rtl {
  2591.     padding-right: 18px;
  2592. }
  2593.  
  2594. /* Screen shield */
  2595.  
  2596. #panel.lock-screen,
  2597. #screenShieldNotifications {
  2598.     background-color: rgba(0,0,0,0.3);
  2599. }
  2600.  
  2601. .screen-shield-background {
  2602.     background: black;
  2603.     box-shadow: 0px 4px 8px rgba(0,0,0,0.9);
  2604. }
  2605.  
  2606. #lockDialogGroup {
  2607.     background: #2e3436 url(noise-texture.png);
  2608.     background-repeat: repeat;
  2609. }
  2610.  
  2611. .screen-shield-arrows {
  2612.     padding-bottom: 3em;
  2613. }
  2614.  
  2615. .screen-shield-arrows Gjs_Arrow {
  2616.     color: white;
  2617.     width: 80px;
  2618.     height: 48px;
  2619.     -arrow-thickness: 12px;
  2620.     -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4);
  2621. }
  2622.  
  2623. .screen-shield-contents-box {
  2624.     spacing: 48px;
  2625. }
  2626.  
  2627. .screen-shield-clock {
  2628.     color: white;
  2629.     text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
  2630.     font-weight: bold;
  2631.     text-align: center;
  2632.     padding-bottom: 1.5em;
  2633. }
  2634.  
  2635. .screen-shield-clock-time {
  2636.     font-size: 72pt;
  2637.     text-shadow: 0px 2px 2px rgba(0,0,0,0.4);
  2638. }
  2639.  
  2640. .screen-shield-clock-date {
  2641.     font-size: 28pt;
  2642. }
  2643.  
  2644. #screenShieldNotifications {
  2645.     max-height: 500px;
  2646.     padding: 12px;
  2647. }
  2648.  
  2649. .screen-shield-notifications-box {
  2650.     spacing: 12px;
  2651.     width: 30em;
  2652. }
  2653.  
  2654. .screen-shield-notification-source {
  2655.     padding: 3px 6px;
  2656.     spacing: 5px;
  2657. }
  2658.  
  2659. .screen-shield-notification-label {
  2660.     font-weight: bold;
  2661.     padding: 0px 0px 0px 12px;
  2662. }
  2663.  
  2664. .screen-shield-notification-count-text {
  2665.     padding: 0px 0px 0px 12px;
  2666. }
  2667.  
  2668. /* Remove background from notifications, otherwise
  2669.    opacity is doubled and they look darker
  2670. */
  2671. .screen-shield-notifications-box .notification {
  2672.     background-color: transparent;
  2673. }
  2674.  
  2675. /* Override padding on resident notifications, since
  2676.    the notifications box has its own spacing
  2677. */
  2678. .screen-shield-notifications-box .summary-notification-stack-scrollview {
  2679.     padding-top: 0px;
  2680.     padding-bottom: 0px;
  2681. }
  2682.  
  2683. #screenShieldNotifications .notification-button,
  2684. #screenShieldNotifications .notification-icon-button {
  2685.     border: 1px rgba(255,255,255,0.5);
  2686. }
  2687.  
  2688. #screenShieldNotifications StScrollBar StBin#trough {
  2689.     background-color: rgba(0,0,0,0.2);
  2690. }
  2691.  
  2692. #screenShieldNotifications StScrollBar StButton#vhandle,
  2693. #screenShieldNotifications StScrollBar StButton#hhandle {
  2694.     background-color: rgba(0,0,0,0.3);
  2695.     border: none;
  2696. }
  2697.  
  2698. #screenShieldNotifications StScrollBar StButton#vhandle:hover,
  2699. #screenShieldNotifications StScrollBar StButton#hhandle {
  2700.     background-color: rgba(0,0,0,0.6);
  2701. }
  2702.  
  2703. #screenShieldNotifications StScrollBar StButton#vhandle:active,
  2704. #screenShieldNotifications StScrollBar StButton#hhandle {
  2705.     background-color: rgba(0,0,0,0.8);
  2706. }
  2707.  
  2708. .input-source-switcher-symbol {
  2709.    font-size: 34pt;
  2710.    width: 96px;
  2711.    height: 96px;
  2712. }
  2713.  
  2714. /* Background menu */
  2715.  
  2716. .background-menu {
  2717.     -boxpointer-gap: 4px;
  2718.     -arrow-rise: 0px;
  2719. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!