Guest User

Untitled

a guest
Nov 16th, 2016
135
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* ===================================================================
  2.    ! Font
  3.    ===================================================================*/
  4. stage {
  5.   font-family: Droid Sans, Sans-Serif;
  6.   font-size: 9pt;
  7. }
  8.  
  9. .cinnamon-link {
  10.   color: #d64937;
  11.   font-weight: normal;
  12. }
  13.  
  14. .cinnamon-link:hover {
  15.   color: #e0776a;
  16.   text-decoration: underline;
  17. }
  18.  
  19. .label-shadow {
  20.   color: rgba(0, 0, 0, 0);
  21. }
  22.  
  23. /* ===================================================================
  24.    ! Tooltips
  25.    ===================================================================*/
  26. #Tooltip {
  27.   border-image: url("background-assets/tooltip.svg") 4;
  28.   padding: 6px 8px;
  29.   color: rgba(255, 255, 255, 0.8);
  30.   font-size: 9pt;
  31.   font-weight: normal;
  32.   font-weight: normal;
  33.   text-align: left;
  34.   spacing: .3em;
  35. }
  36.  
  37. /* ===================================================================
  38.    ! Scrollbars
  39.    ===================================================================*/
  40. StScrollView.vfade {
  41.   -st-vfade-offset: 0;
  42. }
  43.  
  44. StScrollView.hfade {
  45.   -st-hfade-offset: 0;
  46. }
  47.  
  48. StScrollBar {
  49.   padding: 3px;
  50.   padding-right: 6px;
  51.   min-width: 8px;
  52.   min-height: 16px;
  53. }
  54.  
  55. StScrollBar StBin#trough {
  56.   background-color: transparent;
  57. }
  58.  
  59. StScrollBar StButton#vhandle,
  60. StScrollBar StButton#hhandle {
  61.   border-image: url("widget-assets/scroll-handle.svg") 3;
  62. }
  63.  
  64. StScrollBar StButton#vhandle:hover,
  65. StScrollBar StButton#hhandle:hover,
  66. StScrollBar StButton#vhandle:active,
  67. StScrollBar StButton#hhandle:active,
  68. StScrollBar StButton#vhandle:focus,
  69. StScrollBar StButton#hhandle:focus {
  70.   border-image: url("widget-assets/scroll-handle-hover.svg") 3;
  71. }
  72.  
  73. /* ===================================================================
  74.    ! Entries
  75.    ===================================================================*/
  76. .menu StEntry,
  77. .modal-dialog StEntry,
  78. #notification StEntry {
  79.   background-gradient-direction: vertical;
  80.   background-gradient-start: transparent;
  81.   background-gradient-end: transparent;
  82.   border: 0;
  83.   border-width: 0;
  84.   box-shadow: 0 0 transparent;
  85.   border-radius: 0;
  86.   border-image: url("widget-assets/entry.svg") 6;
  87.   padding: 4px 8px 3px 8px;
  88.   height: 22px;
  89.   width: 220px;
  90.   font-size: 10pt;
  91.   font-weight: normal;
  92.   color: rgba(255, 255, 255, 0.4);
  93. }
  94.  
  95. .popup-menu StEntry:focus, .popup-menu StEntry:active, .popup-menu StEntry:pressed,
  96. .modal-dialog StEntry:focus,
  97. .modal-dialog StEntry:active,
  98. .modal-dialog StEntry:pressed,
  99. #notification StEntry:focus,
  100. #notification StEntry:active,
  101. #notification StEntry:pressed {
  102.   border-image: url("widget-assets/entry-focused.svg") 6;
  103.   font-weight: bold;
  104.   color: rgba(255, 255, 255, 0.8);
  105.   caret-color: rgba(255, 255, 255, 0.8);
  106.   caret-size: 1px;
  107.   selected-color: white;
  108.   selection-background-color: #d64937;
  109. }
  110.  
  111. .popup-menu StEntry StIcon,
  112. .modal-dialog StEntry StIcon,
  113. #notification StEntry StIcon {
  114.   color: #888;
  115. }
  116.  
  117. .popup-menu StEntry:focus > StIcon,
  118. .popup-menu StEntry:active > StIcon,
  119. .popup-menu StEntry:pressed > StIcon,
  120. .modal-dialog StEntry:focus > StIcon,
  121. .modal-dialog StEntry:active > StIcon,
  122. .modal-dialog StEntry:pressed > StIcon,
  123. #notification StEntry:focus > StIcon,
  124. #notification StEntry:active > StIcon,
  125. #notification StEntry:pressed > StIcon {
  126.   color: #dcdcdc;
  127. }
  128.  
  129. /* ===================================================================
  130.    ! Switchers
  131.    ===================================================================*/
  132. .toggle-switch {
  133.   width: 28px;
  134.   height: 14px;
  135.   background-size: contain;
  136. }
  137.  
  138. .toggle-switch-us, .toggle-switch-intl {
  139.   background-image: url("widget-assets/off.svg");
  140. }
  141.  
  142. .toggle-switch-us:checked, .toggle-switch-intl:checked {
  143.   background-image: url("widget-assets/on.svg");
  144. }
  145.  
  146. /* ===================================================================
  147.    ! Checkboxes + Radio buttons
  148.    ===================================================================*/
  149. .check-box CinnamonGenericContainer {
  150.   spacing: .2em;
  151.   min-height: 16px;
  152. }
  153.  
  154. .check-box StLabel {
  155.   padding-top: 1px;
  156. }
  157.  
  158. .check-box StBin {
  159.   width: 16px;
  160.   height: 16px;
  161.   background-image: url("widget-assets/check-box.svg");
  162. }
  163.  
  164. .check-box:focus StBin {
  165.   background-image: url("widget-assets/check-box-focused.svg");
  166. }
  167.  
  168. .check-box:checked StBin {
  169.   background-image: url("widget-assets/check-box-checked.svg");
  170. }
  171.  
  172. .check-box:focus:checked {
  173.   background-image: url("widget-assets/check-box-focused-checked.svg");
  174. }
  175.  
  176. .radiobutton CinnamonGenericContainer {
  177.   spacing: .2em;
  178.   min-height: 16px;
  179. }
  180.  
  181. .radiobutton StLabel {
  182.   padding-top: 1px;
  183. }
  184.  
  185. .radiobutton StBin {
  186.   width: 16px;
  187.   height: 16px;
  188.   background-image: url("widget-assets/radiobutton.svg");
  189. }
  190.  
  191. .radiobutton:focus StBin {
  192.   background-image: url("widget-assets/radiobutton-focused.svg");
  193. }
  194.  
  195. .radiobutton:checked StBin {
  196.   background-image: url("widget-assets/radiobutton-checked.svg");
  197. }
  198.  
  199. .radiobutton:focus:checked {
  200.   background-image: url("widget-assets/radiobutton-focused-checked.svg");
  201. }
  202.  
  203. /* ===================================================================
  204.    ! Slider
  205.    ===================================================================*/
  206. .slider {
  207.   -slider-height: 2px;
  208.   -slider-background-color: transparent;
  209.   -slider-border-color: transparent;
  210.   -slider-active-background-color: #d64937;
  211.   -slider-active-border-color: transparent;
  212.   -slider-border-width: 2px;
  213.   -slider-handle-radius: 4px;
  214.   color: #dcdcdc;
  215.   border-image: url("widget-assets/slider.svg") 9 6 8 8;
  216.   border: 0 solid transparent;
  217.   min-width: 15em;
  218.   height: 16px;
  219. }
  220.  
  221. .popup-menu-item:active .slider {
  222.   -slider-handle-radius: 5px;
  223.   color: white;
  224. }
  225.  
  226. /* ===================================================================
  227.    ! Separator
  228.    ===================================================================*/
  229. .separator {
  230.   background-color: rgba(255, 255, 255, 0.1);
  231.   height: 1px;
  232. }
  233.  
  234. /* ===================================================================
  235.    ! Popup Menus
  236.    ===================================================================*/
  237. .popup-menu {
  238.   min-width: 100px;
  239. }
  240.  
  241. .popup-menu-boxpointer {
  242.   padding: 0;
  243.   -arrow-background-color: #2d2d2d;
  244.   -arrow-border-width: 1px;
  245.   -arrow-border-color: #484848;
  246.   -arrow-border-radius: 2px;
  247.   -arrow-base: 16px;
  248.   -arrow-rise: 8px;
  249.   -boxpointer-gap: 2px;
  250. }
  251.  
  252. .popup-menu .popup-menu-content {
  253.   border-image: url("background-assets/popup-inside.svg") 9;
  254.   padding: .7em 0;
  255.   color: rgba(255, 255, 255, 0.8);
  256. }
  257.  
  258. .popup-menu-icon, .popup-menu StIcon {
  259.   icon-size: 16px;
  260.   color: #dcdcdc;
  261. }
  262.  
  263. .popup-menu-arrow {
  264.   width: 10px;
  265.   height: 10px;
  266.   padding: 0;
  267. }
  268.  
  269. .popup-menu-item {
  270.   padding: .4em 1.3em;
  271.   spacing: .8em;
  272. }
  273.  
  274. .popup-menu-item:active {
  275.   border-image: url("background-assets/hover.svg") 9;
  276.   color: white;
  277. }
  278.  
  279. .popup-menu-item:active .popup-menu-icon, .popup-menu-item:active StIcon {
  280.   color: #fff;
  281. }
  282.  
  283. .popup-menu-item:active .popup-menu-item-dot {
  284.   background-image: url("widget-assets/check-dot-hover.svg");
  285.   background-size: 10px;
  286.   color: transparent;
  287. }
  288.  
  289. .popup-menu-item:insensitive {
  290.   font-weight: normal;
  291.   color: rgba(255, 255, 255, 0.1);
  292. }
  293.  
  294. .popup-menu-item:insensitive .popup-menu-icon, .popup-menu-item:insensitive StIcon {
  295.   color: #444;
  296. }
  297.  
  298. .popup-menu-item-dot {
  299.   background-image: url("widget-assets/check-dot.svg");
  300.   background-size: 10px;
  301.   color: transparent;
  302. }
  303.  
  304. .popup-sub-menu {
  305.   border-image: url("background-assets/submenu-bg.svg") 9;
  306.   box-shadow: none;
  307.   background-gradient-direction: none;
  308.   padding: 12px 0;
  309.   color: rgba(255, 255, 255, 0.8);
  310. }
  311.  
  312. .popup-sub-menu .popup-menu-item:active {
  313.   border-image: url("background-assets/hover.svg") 9;
  314.   color: white;
  315. }
  316.  
  317. .popup-sub-menu .popup-slider-menu-item {
  318.   border-image: url("widget-assets/slider--submenu.svg") 9 32 8 8;
  319. }
  320.  
  321. .popup-submenu-menu-item:open {
  322.   background-color: transparent;
  323. }
  324.  
  325. .popup-combo-menu {
  326.   border-image: url("background-assets/popup.svg") 9;
  327.   padding: .8em .2em;
  328.   color: rgba(255, 255, 255, 0.8);
  329. }
  330.  
  331. .popup-separator-menu-item {
  332.   background-color: rgba(255, 255, 255, 0.1);
  333.   height: 1px;
  334. }
  335.  
  336. .popup-slider-menu-item {
  337.   -slider-height: 2px;
  338.   -slider-background-color: transparent;
  339.   -slider-border-color: transparent;
  340.   -slider-active-background-color: #d64937;
  341.   -slider-active-border-color: transparent;
  342.   -slider-border-width: 2px;
  343.   -slider-handle-radius: 4px;
  344.   color: #dcdcdc;
  345.   border-image: url("widget-assets/slider.svg") 9 6 8 8;
  346.   border: 0 solid transparent;
  347.   min-width: 15em;
  348.   height: 16px;
  349. }
  350.  
  351. .popup-menu-item:active .popup-slider-menu-item {
  352.   -slider-handle-radius: 5px;
  353.   color: white;
  354. }
  355.  
  356. .popup-inactive-menu-item {
  357.   color: rgba(255, 255, 255, 0.4);
  358. }
  359.  
  360. /* used mainly for the notif-applet */
  361. .popup-menu-item .popup-subtitle-menu-item {
  362.   font-weight: bold;
  363.   color: white;
  364. }
  365.  
  366. .popup-device-menu-item {
  367.   spacing: .5em;
  368. }
  369.  
  370. .popup-device-menu-item .popup-inactive-menu-item {
  371.   color: #f0ad4e;
  372. }
  373.  
  374. /* ===================================================================
  375.    ! Panel
  376.    ===================================================================*/
  377.  
  378. #panel {
  379. }
  380.  
  381. #panelLeft, #panelCenter {
  382.     spacing: 4px;
  383. }
  384.  
  385. /*---panel-edit-mode---*/
  386. #panelLeft:dnd,
  387. #panelCenter:dnd,
  388. #panelRight:dnd {
  389. }
  390.  
  391. .panel-top #panelLeft:dnd {
  392.     border-image: url("panel-assets/DND-top-left.svg") 4;
  393. }
  394.  
  395. .panel-top #panelCenter:dnd {
  396.     border-image: url("panel-assets/DND-top-center.svg") 4;
  397. }
  398.  
  399. .panel-top #panelRight:dnd {
  400.     border-image: url("panel-assets/DND-top-right.svg") 4;
  401. }
  402.  
  403. .panel-bottom #panelLeft:dnd {
  404.     border-image: url("panel-assets/DND-bottom-left.svg") 4;
  405. }
  406.  
  407. .panel-bottom #panelCenter:dnd {
  408.     border-image: url("panel-assets/DND-bottom-center.svg") 4;
  409. }
  410.  
  411. .panel-bottom #panelRight:dnd {
  412.     border-image: url("panel-assets/DND-bottom-right.svg") 4;
  413. }
  414.  
  415. #panelLeft:ltr {
  416.     padding-right: 4px;
  417. }
  418.  
  419. #panelLeft:rtl {
  420.     padding-left: 4px;
  421. }
  422.  
  423. #panelRight:ltr {
  424.     padding-left: 0;
  425.     spacing: 0;
  426. }
  427.  
  428. #panelRight:rtl {
  429.     padding-right: 0;
  430.     spacing: 0;
  431. }
  432.  
  433. .panel-top {
  434.     border-image: url("panel-assets/panel-top.svg") 4;
  435.     color: #dcdcdc;
  436.     font-size: 9pt;
  437.     height: 25px;
  438. }
  439.  
  440. .panel-bottom {
  441.     border-image: url("panel-assets/panel-bottom.svg") 4;
  442.     color: #dcdcdc;
  443.     font-size: 9pt;
  444.     height: 25px;
  445. }
  446.  
  447. .panel-status-button {
  448.     -natural-hpadding: 4px;
  449.     -minimum-hpadding: 4px;
  450.     padding: 0 2px;
  451.     font-weight: bold;
  452.     color: #dcdcdc;
  453.     height: 25px;
  454. }
  455.  
  456. .panel-status-button:hover,
  457. .panel-status-button:active {
  458. }
  459.  
  460. .panel-top .panel-status-button:hover {
  461.     border-image: url("panel-assets/top-item-hover.svg") 4;
  462. }
  463.  
  464. .panel-bottom .panel-status-button:hover {
  465.     border-image: url("panel-assets/bottom-item-hover.svg") 4;
  466. }
  467.  
  468. .system-status-icon {
  469.     icon-size: 16px;
  470.     padding-left: 0;
  471.     padding-right: 0;
  472.     spacing: 0;
  473.     margin: 0;
  474. }
  475.  
  476. .panel-bottom .system-status-icon {
  477.     padding-top: 1px;
  478. }
  479.  
  480. .panel-bottom #appMenuIcon {
  481.     padding-top: 1px;
  482. }
  483.  
  484. #appMenu {
  485. }
  486.  
  487. #appMenuIcon {
  488. }
  489.  
  490. #iconLabelButton {
  491.     color: #dcdcdc;
  492.     padding: 0;
  493. }
  494.  
  495. .panel-button #appMenuIcon {
  496.     app-icon-bottom-clip: 0;
  497. }
  498.  
  499. .panel-button:active #appMenuIcon,
  500. .panel-button:checked #appMenuIcon,
  501. .panel-button:focus #appMenuIcon {
  502.     app-icon-bottom-clip: 0;
  503. }
  504.  
  505. .panel-button {
  506.     -natural-hpadding: 6px;
  507.     -minimum-hpadding: 2px;
  508.     font-weight: bold;
  509.     color: #dcdcdc;
  510. }
  511.  
  512. .panel-button:hover {
  513. }
  514.  
  515. .panel-button:active,
  516. .panel-button:focus {
  517. }
  518.  
  519. .panel-button:active > .system-status-icon,
  520. .panel-button:checked > .system-status-icon,
  521. .panel-button:focus > .system-status-icon {
  522.     icon-shadow: rgba(0,0,0,0) 0 2px 2px;
  523. }
  524.  
  525. .panel-menu {
  526. }
  527.  
  528. .popup-menu-item-dot {
  529. }
  530. /* ===================================================================
  531.    ! Expo view
  532.    ===================================================================*/
  533. .expo-background {
  534.   background-color: rgba(34, 34, 34, 0.85);
  535.   background-repeat: repeat;
  536. }
  537.  
  538. .expo-workspace-thumbnail-frame {
  539.   border: 5px transparent;
  540.   border-image: url("expo-scale-assets/workspace-shadow.svg") 6;
  541. }
  542.  
  543. .expo-workspace-thumbnail-frame#active {
  544.   border: 5px transparent;
  545.   border-image: url("expo-scale-assets/workspace-shadow.svg") 6;
  546. }
  547.  
  548. .workspace-thumbnails {
  549.   spacing: 26px;
  550.   padding-left: 10px;
  551.   padding-right: 9px;
  552. }
  553.  
  554. /* This shades the workspace thumbnails */
  555. .workspace-thumbnails .workspace-overview-background-shade {
  556.   background-color: transparent;
  557. }
  558.  
  559. .expo-workspaces-name-entry {
  560.   border-image: url("expo-scale-assets/workspace-name.svg") 6;
  561.   height: 15px;
  562.   padding: 10px 12px;
  563.   text-align: center;
  564.   font-weight: bold;
  565.   color: rgba(255, 255, 255, 0.8);
  566. }
  567.  
  568. .expo-workspaces-name-entry#selected {
  569.   border-image: url("expo-scale-assets/workspace-name-focused.svg") 6;
  570.   color: white;
  571. }
  572.  
  573. .expo-workspaces-name-entry:focus, .expo-workspaces-name-entry#selected:focus {
  574.   border-image: url("expo-scale-assets/workspace-name-pressed.svg") 12;
  575.   color: #d64937;
  576.   selected-color: rgba(255, 255, 255, 0.8);
  577.   caret-color: rgba(255, 255, 255, 0.8);
  578.   caret-size: 1px;
  579.   selection-background-color: #d64937;
  580. }
  581.  
  582. .workspace-close-button {
  583.   background-image: url("widget-assets/close.svg");
  584.   background-size: 41px 61px;
  585.   width: 41px;
  586.   height: 61px;
  587.   -cinnamon-close-overlap: 28px;
  588. }
  589.  
  590. .workspace-add-button {
  591.   border-image: url("expo-scale-assets/add-workspace-bg.svg") 6;
  592.   background-image: url("expo-scale-assets/plus.svg");
  593.   background-size: 25px 24px;
  594.   height: 200px;
  595.   width: 35px;
  596. }
  597.  
  598. .workspace-add-button:hover {
  599.   border-image: url("expo-scale-assets/add-workspace-bg.svg") 6;
  600.   background-image: url("expo-scale-assets/plus-hover.svg");
  601. }
  602.  
  603. .window-close-area {
  604.   border-image: url("expo-scale-assets/workspace-close-area-bg.svg") 9;
  605.   background-image: url("expo-scale-assets/trash.svg");
  606.   height: 100px;
  607.   width: 350px;
  608. }
  609.  
  610. /* ===================================================================
  611.    ! Scale
  612.    ===================================================================*/
  613. /* The background for the scale view */
  614. .workspace-overview-background-shade {
  615.   background-color: rgba(0, 0, 0, 0.65);
  616. }
  617.  
  618. .window-caption {
  619.   border-image: url("expo-scale-assets/window-name.svg") 6;
  620.   color: rgba(255, 255, 255, 0.8);
  621.   font-size: 9pt;
  622.   font-weight: bold;
  623.   padding: 6px 8px;
  624.   spacing: 25px;
  625.   -cinnamon-caption-spacing: 10px;
  626. }
  627.  
  628. .window-caption#selected {
  629.   border-image: url("expo-scale-assets/window-name-focused.svg") 6;
  630.   color: white;
  631. }
  632.  
  633. .window-close {
  634.   background-image: url("widget-assets/close.svg");
  635.   background-size: 41px 61px;
  636.   width: 41px;
  637.   height: 45px;
  638.   -cinnamon-close-overlap: 24px;
  639. }
  640.  
  641. /* ===================================================================
  642.    ! Desklets
  643.    ===================================================================*/
  644. .desklet {
  645.   color: rgba(255, 255, 255, 0.8);
  646. }
  647.  
  648. .desklet-with-borders {
  649.   border-image: url("background-assets/popup.svg") 9;
  650.   color: rgba(255, 255, 255, 0.8);
  651.   font-weight: bold;
  652.   padding: 5px;
  653. }
  654.  
  655. .desklet-with-borders-and-header {
  656.   border-image: url("background-assets/desklet-body.svg") 9;
  657.   color: rgba(255, 255, 255, 0.8);
  658.   font-weight: bold;
  659.   padding: 5px;
  660. }
  661.  
  662. .desklet-header {
  663.   border-image: url("background-assets/desklet-header.svg") 11;
  664.   font-size: 10pt;
  665.   font-weight: bold;
  666.   text-shadow: none;
  667.   color: rgba(255, 255, 255, 0.8);
  668.   padding: 8px 5px;
  669. }
  670.  
  671. .desklet-drag-placeholder {
  672.   border: 0 solid transparent;
  673.   border-radius: 0;
  674.   background: none;
  675. }
  676.  
  677. /* ===================================================================
  678.    ! Clock
  679.    ===================================================================*/
  680. .clock-desklet-label {
  681.   font-weight: normal;
  682.   padding: 10px;
  683. }
  684.  
  685. /* ===================================================================
  686.    ! Photoframe
  687.    ===================================================================*/
  688. .photoframe-box {
  689.   border-image: url("background-assets/popup.svg") 9;
  690.   padding: 3px;
  691. }
  692.  
  693. /* ===================================================================
  694.    ! Xkcd
  695.    ===================================================================*/
  696. .xkcd-box {
  697.   padding: 0;
  698.   border: 0 transparent;
  699.   box-shadow: none;
  700.   background-color: transparent;
  701.   border-radius: 0;
  702. }
  703.  
  704. /* ===================================================================
  705.    ! Notifications
  706.    ===================================================================*/
  707. /*
  708.     The highlighter gets it's opacity from the
  709.     color property
  710.     Tweak default $link color to fix
  711. */
  712. .url-highlighter {
  713.   link-color: #ff604b;
  714. }
  715.  
  716. #notification {
  717.   border-image: url("background-assets/popup.svg") 7;
  718.   padding: 1.3em;
  719.   spacing-rows: .5em;
  720.   spacing-columns: 10px;
  721.   width: 34em;
  722.   margin-from-right-edge-of-screen: 15px;
  723.   margin-from-top-edge-of-screen: 1060px;
  724.   font-weight: normal;
  725.   font-size: 10pt;
  726.   color: rgba(255, 255, 255, 0.8);
  727. }
  728.  
  729. #notification CinnamonGenericContainer * {
  730.   font-weight: normal;
  731.   font-size: 9pt;
  732.   color: #f0ad4e;
  733. }
  734.  
  735. #notification CinnamonGenericContainer *:first-child {
  736.   font-weight: bold;
  737.   font-size: 10pt;
  738.   padding: .2em 0;
  739.   color: rgba(255, 255, 255, 0.8);
  740. }
  741.  
  742. #notification CinnamonGenericContainer *:last-child {
  743.   padding: .3em 0;
  744.   color: rgba(255, 255, 255, 0.8);
  745. }
  746.  
  747. #notification-body {
  748.   font-weight: normal;
  749.   font-size: 9pt;
  750.   padding: .5em 0;
  751. }
  752.  
  753. #notification-actions {
  754.   spacing: .2em;
  755. }
  756.  
  757. #notification.notification-with-image {
  758.   min-height: 159px;
  759. }
  760.  
  761. .popup-menu-content #notification.notification-with-image {
  762.   min-height: 172px;
  763. }
  764.  
  765. #notification.notification-with-image #notification-body {
  766.   padding: 0;
  767. }
  768.  
  769. .notification-button,
  770. .notification-icon-button {
  771.   background-color: transparent;
  772.   background-gradient-direction: none;
  773.   background-gradient-start: transparent;
  774.   background-gradient-end: transparent;
  775.   box-shadow: 0 0 transparent;
  776.   border: none;
  777.   border-width: 0;
  778.   border-radius: 0;
  779.   font-weight: normal;
  780.   font-size: 9pt;
  781.   border-image: url("button-assets/button-primary.svg") 10;
  782.   color: rgba(255, 255, 255, 0.8);
  783. }
  784.  
  785. .notification-button:grayed, .notification-button:disabled, .notification-button:insensitive,
  786. .notification-icon-button:grayed,
  787. .notification-icon-button:disabled,
  788. .notification-icon-button:insensitive {
  789.   border-image: url("button-assets/button-insensitive.svg") 10;
  790.   color: rgba(255, 255, 255, 0.1);
  791. }
  792.  
  793. .notification-button:grayed StIcon, .notification-button:disabled StIcon, .notification-button:insensitive StIcon,
  794. .notification-icon-button:grayed StIcon,
  795. .notification-icon-button:disabled StIcon,
  796. .notification-icon-button:insensitive StIcon {
  797.   color: #444;
  798. }
  799.  
  800. .notification-button > StIcon,
  801. .notification-icon-button > StIcon {
  802.   width: 16px;
  803.   height: 16px;
  804.   icon-size: 16px;
  805. }
  806.  
  807. .notification-button:hover,
  808. .notification-icon-button:hover {
  809.   border-image: url("button-assets/button-primary-hover.svg") 10;
  810. }
  811.  
  812. .notification-button:active, .notification-button:pressed,
  813. .notification-icon-button:active,
  814. .notification-icon-button:pressed {
  815.   border-image: url("button-assets/button-primary-pressed.svg") 10;
  816. }
  817.  
  818. .notification-button:focus,
  819. .notification-icon-button:focus {
  820.   border-image: url("button-assets/button-orange.svg") 10;
  821.   color: rgba(255, 255, 255, 0.8);
  822. }
  823.  
  824. .notification-button:focus:hover,
  825. .notification-icon-button:focus:hover {
  826.   border-image: url("button-assets/button-orange-hover.svg") 10;
  827. }
  828.  
  829. .notification-button:focus:active, .notification-button:focus:pressed,
  830. .notification-icon-button:focus:active,
  831. .notification-icon-button:focus:pressed {
  832.   border-image: url("button-assets/button-orange-pressed.svg") 10;
  833. }
  834.  
  835. .notification-button > StIcon,
  836. .notification-icon-button > StIcon {
  837.   color: #dcdcdc;
  838. }
  839.  
  840. .notification-button:hover > StIcon,
  841. .notification-button:active > StIcon,
  842. .notification-button:pressed > StIcon,
  843. .notification-icon-button:hover > StIcon,
  844. .notification-icon-button:active > StIcon,
  845. .notification-icon-button:pressed > StIcon {
  846.   color: #dcdcdc;
  847. }
  848.  
  849. .notification-button:focus > StIcon,
  850. .notification-button:focus:hover > StIcon,
  851. .notification-button:focus:active > StIcon,
  852. .notification-button:focus:pressed > StIcon,
  853. .notification-icon-button:focus > StIcon,
  854. .notification-icon-button:focus:hover > StIcon,
  855. .notification-icon-button:focus:active > StIcon,
  856. .notification-icon-button:focus:pressed > StIcon {
  857.   color: #dcdcdc;
  858. }
  859.  
  860. .notification-button {
  861.   padding: .9em 2.2em .9em 2.2em;
  862.   -st-natural-width: 8em;
  863. }
  864.  
  865. .notification-icon-button {
  866.   padding: .9em;
  867. }
  868.  
  869. /* ===================================================================
  870.    ! Notification applet
  871.    ===================================================================*/
  872. .notification-applet-padding {
  873.   padding: .6em .8em;
  874. }
  875.  
  876. .notification-applet-padding:first-child {
  877.   padding-top: 1.3em;
  878. }
  879.  
  880. .notification-applet-padding:last-child {
  881.   padding-bottom: .8em;
  882. }
  883.  
  884. /* Notifs look inside the notification applet & other popups. */
  885. .popup-menu-content #notification {
  886.   border-image: url("background-assets/dark-bg-marked-orange.svg") 7;
  887.   padding: .8em .8em .6em 1em;
  888. }
  889.  
  890. .popup-menu-content #notification.multi-line-notification {
  891.   border-image: url("background-assets/dark-bg-marked-blue.svg") 7;
  892. }
  893.  
  894. .popup-menu-content #notification.notification-with-image {
  895.   border-image: url("background-assets/dark-bg-marked-green.svg") 7;
  896.   padding-bottom: .8em;
  897. }
  898.  
  899. /* ===================================================================
  900.    ! Alt Tab
  901.  
  902.    * The styles are namespaced under the "#altTabPopup" selector
  903.    ===================================================================*/
  904. #altTabPopup {
  905.   padding: 0;
  906.   spacing: 4px;
  907. }
  908.  
  909. #altTabPopup .switcher-list:last-child {
  910.   border-image: url("background-assets/popup.svg") 7;
  911.   color: rgba(255, 255, 255, 0.8);
  912.   padding: 0;
  913.   font-size: 10pt;
  914.   font-weight: bold;
  915. }
  916.  
  917. #altTabPopup .switcher-list:last-child .item-box {
  918.   padding: 10px;
  919. }
  920.  
  921. #altTabPopup .switcher-list:last-child .item-box:selected {
  922.   border-image: none;
  923.   color: rgba(255, 255, 255, 0.8);
  924. }
  925.  
  926. #altTabPopup .switcher-list:last-child .item-box StLabel {
  927.   padding-top: .8em;
  928. }
  929.  
  930. #altTabPopup .switcher-list:first-child:last-child,
  931. #altTabPopup .switcher-list:first-child {
  932.   border-image: url("background-assets/popup.svg") 7;
  933.   color: rgba(255, 255, 255, 0.8);
  934.   padding: 2px;
  935.   font-size: 10pt;
  936.   font-weight: bold;
  937. }
  938.  
  939. #altTabPopup .switcher-list:first-child:last-child .item-box,
  940. #altTabPopup .switcher-list:first-child .item-box {
  941.   padding: 10px;
  942. }
  943.  
  944. #altTabPopup .switcher-list:first-child:last-child .item-box:selected,
  945. #altTabPopup .switcher-list:first-child .item-box:selected {
  946.   border-image: url("background-assets/hover.svg") 7;
  947.   color: white;
  948. }
  949.  
  950. #altTabPopup .switcher-list:first-child:last-child .item-box StLabel,
  951. #altTabPopup .switcher-list:first-child .item-box StLabel {
  952.   padding-top: .4em;
  953. }
  954.  
  955. #altTabPopup .switcher-list-item-container {
  956.   spacing: 0;
  957. }
  958.  
  959. #altTabPopup .thumbnail {
  960.   width: 256px;
  961. }
  962.  
  963. /* ===================================================================
  964.   ! Lightbox + flashspot
  965.    ===================================================================*/
  966. /* The background shade when a dialog appears */
  967. .lightbox {
  968.   background-color: rgba(0, 0, 0, 0.65);
  969. }
  970.  
  971. /* Among other places, appears when adding an applet */
  972. .flashspot {
  973.   background-color: rgba(255, 255, 255, 0.6);
  974. }
  975.  
  976. /* ===================================================================
  977.    ! Modal dialogs
  978.    ===================================================================*/
  979. .modal-dialog {
  980.   border-image: url("background-assets/popup.svg") 9;
  981.   border-radius: 0;
  982.   padding: 0;
  983.   color: rgba(255, 255, 255, 0.8);
  984. }
  985.  
  986. .modal-dialog > * {
  987.   padding: 24px;
  988.   border-radius: 0;
  989. }
  990.  
  991. .modal-dialog > .modal-dialog-button-box {
  992.   border-image: url("background-assets/buttonbox-bg.svg") 8;
  993.   spacing: 0;
  994.   margin: 0;
  995.   padding: 5px 8px 6px 8px;
  996. }
  997.  
  998. .modal-dialog-button {
  999.   background-color: transparent;
  1000.   background-gradient-direction: none;
  1001.   background-gradient-start: transparent;
  1002.   background-gradient-end: transparent;
  1003.   box-shadow: 0 0 transparent;
  1004.   border: none;
  1005.   border-width: 0;
  1006.   border-radius: 0;
  1007.   font-weight: bold;
  1008.   font-size: 9pt;
  1009.   border-image: url("button-assets/button-primary.svg") 10;
  1010.   color: rgba(255, 255, 255, 0.8);
  1011.   padding: .9em;
  1012. }
  1013.  
  1014. .modal-dialog-button:grayed, .modal-dialog-button:disabled, .modal-dialog-button:insensitive {
  1015.   border-image: url("button-assets/button-insensitive.svg") 10;
  1016.   color: rgba(255, 255, 255, 0.1);
  1017. }
  1018.  
  1019. .modal-dialog-button:grayed StIcon, .modal-dialog-button:disabled StIcon, .modal-dialog-button:insensitive StIcon {
  1020.   color: #444;
  1021. }
  1022.  
  1023. .modal-dialog-button > StIcon {
  1024.   width: 16px;
  1025.   height: 16px;
  1026.   icon-size: 16px;
  1027. }
  1028.  
  1029. .modal-dialog-button:hover {
  1030.   border-image: url("button-assets/button-primary-hover.svg") 10;
  1031. }
  1032.  
  1033. .modal-dialog-button:active, .modal-dialog-button:pressed {
  1034.   border-image: url("button-assets/button-primary-pressed.svg") 10;
  1035. }
  1036.  
  1037. .modal-dialog-button:focus {
  1038.   border-image: url("button-assets/button-orange.svg") 10;
  1039.   color: rgba(255, 255, 255, 0.8);
  1040. }
  1041.  
  1042. .modal-dialog-button:focus:hover {
  1043.   border-image: url("button-assets/button-orange-hover.svg") 10;
  1044. }
  1045.  
  1046. .modal-dialog-button:focus:active, .modal-dialog-button:focus:pressed {
  1047.   border-image: url("button-assets/button-orange-pressed.svg") 10;
  1048. }
  1049.  
  1050. .modal-dialog-button > StIcon {
  1051.   color: #dcdcdc;
  1052. }
  1053.  
  1054. .modal-dialog-button:hover > StIcon,
  1055. .modal-dialog-button:active > StIcon,
  1056. .modal-dialog-button:pressed > StIcon {
  1057.   color: #dcdcdc;
  1058. }
  1059.  
  1060. .modal-dialog-button:focus > StIcon,
  1061. .modal-dialog-button:focus:hover > StIcon,
  1062. .modal-dialog-button:focus:active > StIcon,
  1063. .modal-dialog-button:focus:pressed > StIcon {
  1064.   color: #dcdcdc;
  1065. }
  1066.  
  1067. /* ===================================================================
  1068.    ! Run dialog
  1069.    ===================================================================*/
  1070. .run-dialog > * {
  1071.   padding: 8px;
  1072.   font-weight: normal;
  1073. }
  1074.  
  1075. .run-dialog > .modal-dialog-button-box {
  1076.   background-color: transparent;
  1077.   border-image: none;
  1078.   box-shadow: none;
  1079.   padding: 0;
  1080.   height: 0;
  1081. }
  1082.  
  1083. .run-dialog-error-box {
  1084.   padding: 12px 4px 6px 4px;
  1085.   spacing: 1em;
  1086.   color: #ff2e2e;
  1087.   font-weight: normal;
  1088. }
  1089.  
  1090. .run-dialog-error-box StIcon {
  1091.   width: 16px;
  1092.   height: 16px;
  1093.   color: #ff2e2e;
  1094. }
  1095.  
  1096. .run-dialog-completion-box {
  1097.   font-size: 10pt;
  1098.   padding: 1em .7em;
  1099. }
  1100.  
  1101. .run-dialog-label {
  1102.   font-size: 0;
  1103. }
  1104.  
  1105. .run-dialog-entry {
  1106.   /*!*/
  1107.   font-weight: normal;
  1108. }
  1109.  
  1110. /* ===================================================================
  1111.    ! About Dialog
  1112.    ===================================================================*/
  1113. .about-content {
  1114.   width: 550px;
  1115.   height: 250px;
  1116.   spacing: 8px;
  1117. }
  1118.  
  1119. .about-title {
  1120.   font-size: 2em;
  1121.   font-weight: bold;
  1122. }
  1123.  
  1124. .about-uuid {
  1125.   font-size: 9pt;
  1126.   color: rgba(255, 255, 255, 0.4);
  1127. }
  1128.  
  1129. .about-description {
  1130.   padding-top: 6px;
  1131.   padding-bottom: 8px;
  1132. }
  1133.  
  1134. .about-version {
  1135.   padding-left: 7px;
  1136.   font-size: 9pt;
  1137.   color: #f0ad4e;
  1138. }
  1139.  
  1140. .about-icon {
  1141.   padding-right: 20px;
  1142.   padding-bottom: 14px;
  1143.   color: #dcdcdc;
  1144. }
  1145.  
  1146. .about-scrollBox {
  1147.   border-image: url("background-assets/dark-bg.svg") 7;
  1148.   padding: 4px;
  1149.   padding-right: 0;
  1150.   border-radius: 0;
  1151. }
  1152.  
  1153. .about-scrollBox-innerBox {
  1154.   padding: 1.2em;
  1155.   spacing: 1.2em;
  1156. }
  1157.  
  1158. /* ===================================================================
  1159.    ! Looking Glass dialog
  1160.    ===================================================================*/
  1161. #LookingGlassDialog {
  1162.   border-image: url("background-assets/popup.svg") 7;
  1163.   padding: 14px;
  1164.   color: rgba(255, 255, 255, 0.8);
  1165. }
  1166.  
  1167. /* ===================================================================
  1168.    ! On screen keyboard
  1169.    ===================================================================*/
  1170. #keyboard {
  1171.   border-image: url("background-assets/keyboard-bg.svg") 9;
  1172. }
  1173.  
  1174. .keyboard-layout {
  1175.   spacing: 8px;
  1176.   padding: 8px;
  1177. }
  1178.  
  1179. .keyboard-row {
  1180.   spacing: 15px;
  1181. }
  1182.  
  1183. .keyboard-key {
  1184.   background-color: transparent;
  1185.   background-gradient-direction: none;
  1186.   background-gradient-start: transparent;
  1187.   background-gradient-end: transparent;
  1188.   box-shadow: 0 0 transparent;
  1189.   border: none;
  1190.   border-width: 0;
  1191.   border-radius: 0;
  1192.   font-weight: bold;
  1193.   font-size: 9pt;
  1194.   border-image: url("button-assets/button-primary.svg") 10;
  1195.   color: rgba(255, 255, 255, 0.8);
  1196.   padding: .9em;
  1197.   font-size: 12pt;
  1198. }
  1199.  
  1200. .keyboard-key:grayed, .keyboard-key:disabled, .keyboard-key:insensitive {
  1201.   border-image: url("button-assets/button-insensitive.svg") 10;
  1202.   color: rgba(255, 255, 255, 0.1);
  1203. }
  1204.  
  1205. .keyboard-key:grayed StIcon, .keyboard-key:disabled StIcon, .keyboard-key:insensitive StIcon {
  1206.   color: #444;
  1207. }
  1208.  
  1209. .keyboard-key > StIcon {
  1210.   width: 16px;
  1211.   height: 16px;
  1212.   icon-size: 16px;
  1213. }
  1214.  
  1215. .keyboard-key:hover {
  1216.   border-image: url("button-assets/button-primary-hover.svg") 10;
  1217. }
  1218.  
  1219. .keyboard-key:active, .keyboard-key:pressed {
  1220.   border-image: url("button-assets/button-primary-pressed.svg") 10;
  1221. }
  1222.  
  1223. .keyboard-key:focus {
  1224.   border-image: url("button-assets/button-orange.svg") 10;
  1225.   color: rgba(255, 255, 255, 0.8);
  1226. }
  1227.  
  1228. .keyboard-key:focus:hover {
  1229.   border-image: url("button-assets/button-orange-hover.svg") 10;
  1230. }
  1231.  
  1232. .keyboard-key:focus:active, .keyboard-key:focus:pressed {
  1233.   border-image: url("button-assets/button-orange-pressed.svg") 10;
  1234. }
  1235.  
  1236. .keyboard-key > StIcon {
  1237.   color: #dcdcdc;
  1238. }
  1239.  
  1240. .keyboard-key:hover > StIcon,
  1241. .keyboard-key:active > StIcon,
  1242. .keyboard-key:pressed > StIcon {
  1243.   color: #dcdcdc;
  1244. }
  1245.  
  1246. .keyboard-key:focus > StIcon,
  1247. .keyboard-key:focus:hover > StIcon,
  1248. .keyboard-key:focus:active > StIcon,
  1249. .keyboard-key:focus:pressed > StIcon {
  1250.   color: #dcdcdc;
  1251. }
  1252.  
  1253. .keyboard-subkeys {
  1254.   padding: 0;
  1255.   -arrow-background-color: #2d2d2d;
  1256.   -arrow-border-width: 1px;
  1257.   -arrow-border-color: #484848;
  1258.   -arrow-border-radius: 2px;
  1259.   -arrow-base: 16px;
  1260.   -arrow-rise: 8px;
  1261.   -boxpointer-gap: 2px;
  1262. }
  1263.  
  1264. /* ===================================================================
  1265.    ! Applets
  1266.    ===================================================================*/
  1267. .applet-separator {
  1268.   background-image: url("panel-assets/panel-separator.svg");
  1269.   background-repeat: repeat;
  1270.   width: 9px;
  1271.   padding: 0;
  1272. }
  1273.  
  1274. .applet-separator-line {
  1275.   /*!*/
  1276. }
  1277.  
  1278. .applet-label {
  1279.   font-weight: normal;
  1280.   color: rgba(255, 255, 255, 0.8);
  1281. }
  1282.  
  1283. .applet-icon {
  1284.   icon-size: 16px;
  1285. }
  1286.  
  1287. .applet-box {
  1288.   padding-left: 3px;
  1289.   padding-right: 3px;
  1290.   font-weight: bold;
  1291.   color: #dcdcdc;
  1292. }
  1293.  
  1294. /* Different images used in top & bottom panels. */
  1295. .panel-top .applet-box:hover {
  1296.   border-image: url("panel-assets/panel-top-item-hover.svg") 4;
  1297. }
  1298.  
  1299. .panel-bottom .applet-box:hover {
  1300.   border-image: url("panel-assets/panel-bottom-item-hover.svg") 4;
  1301. }
  1302.  
  1303. /* ===================================================================
  1304.    ! Calendar
  1305.    ===================================================================*/
  1306. .datemenu-date-label {
  1307.   padding: .7em 1.3em .4em 1.3em;
  1308.   font-size: 10pt;
  1309.   font-weight: normal;
  1310.   text-align: center;
  1311.   color: rgba(255, 255, 255, 0.8);
  1312. }
  1313.  
  1314. .calendar {
  1315.   padding: .8em 1.3em .6em 1.3em;
  1316.   spacing-rows: 2px;
  1317.   spacing-columns: 2px;
  1318. }
  1319.  
  1320. .calendar-month-label {
  1321.   padding-top: 2px;
  1322.   font-size: 9pt;
  1323.   font-weight: bold;
  1324.   color: rgba(255, 255, 255, 0.4);
  1325. }
  1326.  
  1327. .calendar-change-month-back,
  1328. .calendar-change-month-forward:rtl {
  1329.   background-image: url("widget-assets/calendar-arrow-left.svg");
  1330.   background-size: 16px;
  1331.   width: 16px;
  1332.   height: 16px;
  1333. }
  1334.  
  1335. .calendar-change-month-back:hover,
  1336. .calendar-change-month-forward:rtl:hover {
  1337.   background-image: url("widget-assets/calendar-arrow-left-hover.svg");
  1338. }
  1339.  
  1340. .calendar-change-month-forward,
  1341. .calendar-change-month-back:rtl {
  1342.   background-image: url("widget-assets/calendar-arrow-right.svg");
  1343.   background-size: 16px;
  1344.   width: 16px;
  1345.   height: 16px;
  1346. }
  1347.  
  1348. .calendar-change-month-forward:hover,
  1349. .calendar-change-month-back:rtl:hover {
  1350.   background-image: url("widget-assets/calendar-arrow-right-hover.svg");
  1351. }
  1352.  
  1353. .calendar-day {
  1354.   /* ! */
  1355. }
  1356.  
  1357. .calendar-day-top {
  1358.   /* ! */
  1359. }
  1360.  
  1361. .calendar-day-left {
  1362.   /* ! */
  1363. }
  1364.  
  1365. .calendar-day-base {
  1366.   font-size: 9pt;
  1367.   font-weight: bold;
  1368.   text-align: center;
  1369.   width: 2.3em;
  1370.   height: 2.5em;
  1371. }
  1372.  
  1373. .calendar-day-heading {
  1374.   color: rgba(255, 255, 255, 0.8);
  1375.   padding: 1.2em 0 .6em 0;
  1376.   height: 1.5em;
  1377. }
  1378.  
  1379. .calendar-work-day {
  1380.   border-image: url("misc-assets/calendar-work-day.svg") 6;
  1381.   border: none;
  1382.   color: rgba(255, 255, 255, 0.8);
  1383. }
  1384.  
  1385. .calendar-nonwork-day {
  1386.   border-image: url("misc-assets/calendar-nonwork-day.svg") 6;
  1387.   border: none;
  1388.   color: rgba(255, 255, 255, 0.4);
  1389. }
  1390.  
  1391. .calendar-today {
  1392.   border-image: url("misc-assets/calendar-today.svg") 6;
  1393.   color: white;
  1394.   font-weight: bold;
  1395. }
  1396.  
  1397. .calendar-other-month-day {
  1398.   border-image: url("misc-assets/calendar-other-month-day.svg") 6;
  1399.   color: rgba(255, 255, 255, 0.1);
  1400.   font-weight: normal;
  1401. }
  1402.  
  1403. .calendar-week-number {
  1404.   color: rgba(255, 255, 255, 0.4);
  1405.   font-size: 9pt;
  1406.   font-weight: normal;
  1407.   width: 1.2em;
  1408.   height: 1.6em;
  1409.   padding-top: .7em;
  1410.   padding-right: .6em;
  1411. }
  1412.  
  1413. /* ===================================================================
  1414.    ! Window list
  1415.    ===================================================================*/
  1416. .window-list-box {
  1417.   spacing: 0px;
  1418.   padding-left: 0;
  1419. }
  1420.  
  1421. .window-list-item-label {
  1422.   width: 15em;
  1423.   min-width: 5px;
  1424. }
  1425.  
  1426. .window-list-item-box {
  1427.   color: white;
  1428.   padding-top:0px;
  1429.   font-weight: normal;
  1430.   padding-left: 0px;
  1431.   padding-right: 0px;
  1432.   max-width: 150px;
  1433. }
  1434.  
  1435. /* Different images used in top & bottom panels. */
  1436. .panel-top .window-list-item-box:hover {
  1437.   color: white;
  1438. }
  1439.  
  1440. .panel-top .window-list-item-box:active,
  1441. .panel-top .window-list-item-box:checked,
  1442. .panel-top .window-list-item-box:focus {
  1443.   border-image: url("panel-assets/panel-top-item-active.svg") 4;
  1444. }
  1445.  
  1446. .panel-top .window-list-item-box:checked:hover,
  1447. .panel-top .window-list-item-box:focus:hover,
  1448. .panel-top .window-list-item-box:active:hover {
  1449.   border-image: url("panel-assets/panel-top-item-active-hover.svg") 4;
  1450. }
  1451.  
  1452. .panel-top .window-list-item-demands-attention {
  1453.   border-image: url("panel-assets/panel-top-item-attention.svg") 4;
  1454. }
  1455.  
  1456. .panel-top .window-list-item-demands-attention:hover {
  1457.   border-image: url("panel-assets/panel-top-item-attention-hover.svg") 4;
  1458. }
  1459.  
  1460. .panel-bottom .window-list-item-box:hover {
  1461.   color: white;
  1462. }
  1463.  
  1464. .panel-bottom .window-list-item-box:active,
  1465. .panel-bottom .window-list-item-box:checked,
  1466. .panel-bottom .window-list-item-box:focus {
  1467.   border-image: url("panel-assets/panel-bottom-item-active.svg") 4;
  1468. }
  1469.  
  1470. .panel-bottom .window-list-item-box:checked:hover,
  1471. .panel-bottom .window-list-item-box:focus:hover,
  1472. .panel-bottom .window-list-item-box:active:hover {
  1473.   border-image: url("panel-assets/panel-bottom-item-active-hover.svg") 4;
  1474. }
  1475.  
  1476. .panel-bottom .window-list-item-demands-attention {
  1477.   border-image: url("panel-assets/panel-bottom-item-attention.svg") 4;
  1478. }
  1479.  
  1480. .panel-bottom .window-list-item-demands-attention:hover {
  1481.   border-image: url("panel-assets/panel-bottom-item-attention-hover.svg") 4;
  1482. }
  1483.  
  1484. /* This styles the window-list preview and window name
  1485.    in "cover" and "timeline" alt-tab modes */
  1486. .switcher-list {
  1487.   border-image: url("background-assets/tooltip.svg") 7;
  1488.   color: rgba(255, 255, 255, 0.8);
  1489.   padding: 0 3px;
  1490.   font-weight: normal;
  1491. }
  1492.  
  1493. .switcher-list > StBoxLayout {
  1494.   spacing: .4em;
  1495. }
  1496.  
  1497. .switcher-list > StBoxLayout > StBoxLayout {
  1498.   spacing: .4em;
  1499. }
  1500.  
  1501. /* ===================================================================
  1502.    ! Sound Applet
  1503.    ===================================================================*/
  1504. .sound-player {
  1505.   padding: 0 0 1px 0;
  1506. }
  1507.  
  1508. .sound-player > StBoxLayout:first-child {
  1509.   padding: .4em 1.3em .6em 1.3em;
  1510.   spacing: .4em;
  1511.   font-weight: bold;
  1512.   font-size: 10pt;
  1513. }
  1514.  
  1515. .sound-player > StBoxLayout:first-child StButton:small {
  1516.   width: 16px;
  1517.   height: 16px;
  1518.   padding: 1px;
  1519. }
  1520.  
  1521. .sound-player > StBoxLayout:first-child StButton:small:hover * {
  1522.   color: #d64937;
  1523. }
  1524.  
  1525. .sound-player-generic-coverart {
  1526.   padding: 0 2px;
  1527. }
  1528.  
  1529. .sound-player-overlay {
  1530.   border-image: url("background-assets/sound-applet-album-overlay.svg") 7;
  1531.   width: 290px;
  1532.   height: 70px;
  1533.   padding: 1.3em 1.3em 2.5em 1.3em;
  1534.   spacing: .5em;
  1535.   color: rgba(255, 255, 255, 0.8);
  1536. }
  1537.  
  1538. .sound-player-overlay StButton {
  1539.   background-color: transparent;
  1540.   background-gradient-direction: none;
  1541.   background-gradient-start: transparent;
  1542.   background-gradient-end: transparent;
  1543.   box-shadow: 0 0 transparent;
  1544.   border: none;
  1545.   border-width: 0;
  1546.   border-radius: 0;
  1547.   font-weight: bold;
  1548.   font-size: 9pt;
  1549.   border-image: url("button-assets/button-primary.svg") 10;
  1550.   color: rgba(255, 255, 255, 0.8);
  1551.   padding: .9em;
  1552. }
  1553.  
  1554. .sound-player-overlay StButton:grayed, .sound-player-overlay StButton:disabled, .sound-player-overlay StButton:insensitive {
  1555.   border-image: url("button-assets/button-insensitive.svg") 10;
  1556.   color: rgba(255, 255, 255, 0.1);
  1557. }
  1558.  
  1559. .sound-player-overlay StButton:grayed StIcon, .sound-player-overlay StButton:disabled StIcon, .sound-player-overlay StButton:insensitive StIcon {
  1560.   color: #444;
  1561. }
  1562.  
  1563. .sound-player-overlay StButton > StIcon {
  1564.   width: 16px;
  1565.   height: 16px;
  1566.   icon-size: 16px;
  1567. }
  1568.  
  1569. .sound-player-overlay StButton:hover {
  1570.   border-image: url("button-assets/button-primary-hover.svg") 10;
  1571. }
  1572.  
  1573. .sound-player-overlay StButton:active, .sound-player-overlay StButton:pressed {
  1574.   border-image: url("button-assets/button-primary-pressed.svg") 10;
  1575. }
  1576.  
  1577. .sound-player-overlay StButton:focus {
  1578.   border-image: url("button-assets/button-orange.svg") 10;
  1579.   color: rgba(255, 255, 255, 0.8);
  1580. }
  1581.  
  1582. .sound-player-overlay StButton:focus:hover {
  1583.   border-image: url("button-assets/button-orange-hover.svg") 10;
  1584. }
  1585.  
  1586. .sound-player-overlay StButton:focus:active, .sound-player-overlay StButton:focus:pressed {
  1587.   border-image: url("button-assets/button-orange-pressed.svg") 10;
  1588. }
  1589.  
  1590. .sound-player-overlay StButton > StIcon {
  1591.   color: #dcdcdc;
  1592. }
  1593.  
  1594. .sound-player-overlay StButton:hover > StIcon,
  1595. .sound-player-overlay StButton:active > StIcon,
  1596. .sound-player-overlay StButton:pressed > StIcon {
  1597.   color: #dcdcdc;
  1598. }
  1599.  
  1600. .sound-player-overlay StButton:focus > StIcon,
  1601. .sound-player-overlay StButton:focus:hover > StIcon,
  1602. .sound-player-overlay StButton:focus:active > StIcon,
  1603. .sound-player-overlay StButton:focus:pressed > StIcon {
  1604.   color: #dcdcdc;
  1605. }
  1606.  
  1607. .sound-player-overlay StBoxLayout {
  1608.   padding-top: .2em;
  1609.   spacing: .4em;
  1610. }
  1611.  
  1612. .sound-player .slider {
  1613.   border-image: none;
  1614.   padding: 0;
  1615.   height: .5em;
  1616.   -slider-height: .4em;
  1617.   -slider-background-color: #333;
  1618.   -slider-active-background-color: #d64937;
  1619.   -slider-handle-radius: 0;
  1620. }
  1621.  
  1622. /* ===================================================================
  1623.    ! Number-mode Workspace Switcher applet
  1624.    ===================================================================*/
  1625. .workspace-switcher {
  1626.   spacing: 0;
  1627. }
  1628.  
  1629. .workspace-button {
  1630.   padding-left: 8px;
  1631.   padding-right: 8px;
  1632.   padding-top:2px;
  1633.   color: rgba(255, 255, 255, 0.4);
  1634.   font-weight: normal;
  1635. }
  1636.  
  1637. /* Different images used in top & bottom panels. */
  1638. .panel-top .workspace-button:outlined {
  1639.   border-image: url("panel-assets/panel-top-item-active.svg") 4;
  1640.   color: white;
  1641. }
  1642.  
  1643. .panel-top .workspace-button:hover {
  1644.   border-image: url("panel-assets/panel-top-item-hover.svg") 4;
  1645.   color: rgba(255, 255, 255, 0.8);
  1646. }
  1647.  
  1648. .panel-top .workspace-button:outlined:hover {
  1649.   border-image: url("panel-assets/panel-top-item-active-hover.svg") 4;
  1650. }
  1651.  
  1652. .panel-bottom .workspace-button:outlined {
  1653.   border-image: url("panel-assets/panel-bottom-item-active.svg") 4;
  1654.   color: white;
  1655. }
  1656.  
  1657. .panel-bottom .workspace-button:hover {
  1658.   border-image: url("panel-assets/panel-bottom-item-hover.svg") 4;
  1659.   color: rgba(255, 255, 255, 0.8);
  1660. }
  1661.  
  1662. .panel-bottom .workspace-button:outlined:hover {
  1663.   border-image: url("panel-assets/panel-bottom-item-active-hover.svg") 4;
  1664. }
  1665.  
  1666. /* ===================================================================
  1667.    ! Visual-mode Workspace Switcher applet
  1668.    ===================================================================*/
  1669. .workspace-graph {
  1670.   padding: 0 4px;
  1671.   spacing: 3px;
  1672. }
  1673.  
  1674. /* Different images/paddings used in top & bottom panels. */
  1675. .panel-top .workspace {
  1676.   border-image: url("panel-assets/panel-top-item-hover.svg") 4;
  1677.   padding: 0 0 3px 0;
  1678. }
  1679.  
  1680. .panel-top .workspace .windows {
  1681.   -inactive-window-background: rgba(120, 120, 120, 0.9);
  1682.   -inactive-window-border: rgba(0, 0, 0, 0.7);
  1683. }
  1684.  
  1685. .panel-top .workspace:active {
  1686.   border-image: url("panel-assets/panel-top-item-active-hover.svg") 4;
  1687. }
  1688.  
  1689. .panel-top .workspace:active .windows {
  1690.   -active-window-background: rgba(210, 210, 210, 0.9);
  1691.   -active-window-border: rgba(0, 0, 0, 0.85);
  1692.   -inactive-window-background: rgba(150, 150, 150, 0.9);
  1693.   -inactive-window-border: rgba(0, 0, 0, 0.85);
  1694. }
  1695.  
  1696. .panel-bottom .workspace {
  1697.   border-image: url("panel-assets/panel-bottom-item-hover.svg") 4;
  1698.   padding: 1px 0 3px 0;
  1699. }
  1700.  
  1701. .panel-bottom .workspace .windows {
  1702.   -inactive-window-background: rgba(120, 120, 120, 0.9);
  1703.   -inactive-window-border: rgba(0, 0, 0, 0.7);
  1704. }
  1705.  
  1706. .panel-bottom .workspace:active {
  1707.   border-image: url("panel-assets/panel-bottom-item-active-hover.svg") 4;
  1708. }
  1709.  
  1710. .panel-bottom .workspace:active .windows {
  1711.   -active-window-background: rgba(210, 210, 210, 0.9);
  1712.   -active-window-border: rgba(0, 0, 0, 0.85);
  1713.   -inactive-window-background: rgba(150, 150, 150, 0.9);
  1714.   -inactive-window-border: rgba(0, 0, 0, 0.85);
  1715. }
  1716.  
  1717. /* ===================================================================
  1718.    ! Panel Launchers Applet (panelLaunchers.js)
  1719.    ===================================================================*/
  1720. .panel-launcher {
  1721.   margin: 0;
  1722.   padding: 0 2px;
  1723. }
  1724.  
  1725. /* Different images used in top & bottom panels. */
  1726. .panel-top .panel-launcher:hover {
  1727.   border-image: url("panel-assets/panel-top-item-active.svg") 4;
  1728. }
  1729.  
  1730. .panel-bottom .panel-launcher:hover {
  1731.   border-image: url("panel-assets/panel-bottom-item-active.svg") 4;
  1732. }
  1733.  
  1734. /* ===================================================================
  1735.    ! User Applet
  1736.    ===================================================================*/
  1737. .user-box {
  1738.   padding: .8em 1.3em;
  1739.   spacing: 10px;
  1740. }
  1741.  
  1742. .user-icon {
  1743.   width: 32px;
  1744.   height: 32px;
  1745.   background-color: transparent;
  1746.   border: none;
  1747.   border-radius: 0;
  1748. }
  1749.  
  1750. .user-label {
  1751.   color: rgba(255, 255, 255, 0.8);
  1752.   font-size: 10pt;
  1753.   font-weight: bold;
  1754.   margin: 0;
  1755. }
  1756.  
  1757. /* ===================================================================
  1758.    ! Menu applet
  1759.    ===================================================================*/
  1760. /* Favourites */
  1761. .menu-favorites-box {
  1762.   border-image: url("background-assets/dark-bg.svg") 7;
  1763.   padding: 0.5em;
  1764. }
  1765.  
  1766. .menu-favorites-button {
  1767.   padding: 10px 12px;
  1768. }
  1769.  
  1770. .menu-favorites-button:hover {
  1771.   border-image: url("background-assets/hover.svg") 9;
  1772.   color: white;
  1773. }
  1774.  
  1775. /* Places */
  1776. .menu-places-box {
  1777.   margin: auto;
  1778.   padding: 8px;
  1779.   border: 0 solid #dcdcdc;
  1780. }
  1781.  
  1782. .menu-places-button {
  1783.   padding: 10px;
  1784. }
  1785.  
  1786. /* Categories */
  1787. .menu-categories-box {
  1788.   padding: 10px 10px;
  1789.   font-weight: normal;
  1790. }
  1791.  
  1792. .menu-category-button {
  1793.   padding: 7px;
  1794.   color: rgba(255, 255, 255, 0.7);
  1795. }
  1796.  
  1797. .menu-category-button-greyed {
  1798.   padding: 7px;
  1799.   color: rgba(255, 255, 255, 0.9);
  1800.   font-style: normal;
  1801. }
  1802.  
  1803. .menu-category-button-selected {
  1804.   padding: 7px;
  1805.   border-image: url("background-assets/hover.svg") 7;
  1806.   color: white;
  1807. }
  1808.  
  1809. .menu-category-button-label:ltr {
  1810.   padding-left: 5px;
  1811. }
  1812.  
  1813. .menu-category-button-label:rtl {
  1814.   padding-right: 5px;
  1815. }
  1816.  
  1817. /* Applications */
  1818. .menu-applications-inner-box,
  1819. .menu-applications-outer-box {
  1820.   padding: 10px;
  1821.   padding-bottom: 0;
  1822. }
  1823.  
  1824. .menu-application-button {
  1825.   padding: 7px;
  1826.   max-width: 10px;
  1827. }
  1828.  
  1829. .menu-application-button-selected {
  1830.   padding: 7px;
  1831.   border-image: url("background-assets/hover.svg") 7;
  1832.   color: white;
  1833. }
  1834.  
  1835. .menu-application-button:highlighted {
  1836.   border-image: url("misc-assets/highlighted.svg") 6;
  1837. }
  1838.  
  1839. .menu-application-button-selected:highlighted {
  1840.   border-image: url("background-assets/hover.svg") 7;
  1841.   color: rgba(255, 255, 255, 0.8);
  1842. }
  1843.  
  1844. .menu-application-button-label:ltr {
  1845.   padding-left: 5px;
  1846. }
  1847.  
  1848. .menu-application-button-label:rtl {
  1849.   padding-right: 5px;
  1850. }
  1851.  
  1852. /* Application hover description */
  1853. .menu-selected-app-box {
  1854.   padding-right: 30px;
  1855.   padding-left: 30px;
  1856.   text-align: left;
  1857. }
  1858.  
  1859. .menu-selected-app-title {
  1860.   font-weight: bold;
  1861. }
  1862.  
  1863. .menu-selected-app-description {
  1864.   max-width: 150px;
  1865. }
  1866.  
  1867. /* Menu search box */
  1868. .menu-search-box {
  1869.   padding-left: 20px;
  1870. }
  1871.  
  1872. /* Right-click menu */
  1873. .menu-applications-inner-box StScrollView {
  1874.   border-image: url("background-assets/dark-bg.svg") 7;
  1875.   padding: .5em .1em;
  1876. }
  1877.  
  1878. /* ===================================================================
  1879.    ! Window Quicky List applet
  1880.    ===================================================================*/
  1881. .window-sticky {
  1882.   color: #f0ad4e;
  1883.   font-weight: bold;
  1884. }
  1885.  
  1886. .popup-menu-item:active .window-sticky {
  1887.   color: white;
  1888. }
  1889.  
  1890. /* ===================================================================
  1891.    ! Hot corners icons
  1892.    ===================================================================*/
  1893. #overview-corner {
  1894.   background-image: url("widget-assets/hotcorner-icon.svg");
  1895. }
  1896.  
  1897. #overview-corner:hover {
  1898.   background-image: url("widget-assets/hotcorner-icon-hover.svg");
  1899. }
  1900.  
  1901. /* ===================================================================
  1902.    ! Hot corner ripple
  1903.    ===================================================================*/
  1904. .ripple-box {
  1905.   width: 24px;
  1906.   height: 24px;
  1907.   background-image: url("misc-assets/corner-ripple.svg");
  1908. }
  1909.  
  1910. /* ===================================================================
  1911.  * ! OSD
  1912.  * ===================================================================*/
  1913. .info-osd {
  1914.   text-align: center;
  1915.   font-weight: bold;
  1916.   spacing: .4em;
  1917.   padding: 1.4em;
  1918.   font-size: 14pt;
  1919.   color: rgba(255, 255, 255, 0.8);
  1920.   border-image: url("background-assets/popup.svg") 7;
  1921. }
  1922.  
  1923. .osd-window {
  1924.   spacing: .4em;
  1925.   padding: 1.0em;
  1926.   color: rgba(255, 255, 255, 0.8);
  1927.   border-image: url("background-assets/popup.svg") 10;
  1928.   font-size: 20pt;
  1929. }
  1930.  
  1931. .osd-window StIcon {
  1932.   color: #dcdcdc;
  1933. }
  1934.  
  1935. .osd-window .level {
  1936.   height: 5px;
  1937.   color: #d64937;
  1938. }
  1939.  
  1940. .workspace-osd {
  1941.   border-image: url("background-assets/popup.svg") 7;
  1942.   padding: 12px 17px;
  1943.   color: rgba(255, 255, 255, 0.8);
  1944.   font-weight: bold;
  1945.   font-size: 18pt;
  1946. }
  1947.  
  1948. /* ===================================================================
  1949.    ! Looking Glass OSD
  1950.    ===================================================================*/
  1951. #LookingGlassDialog {
  1952.   border-image: url("background-assets/popup.svg") 7;
  1953.   padding: 1.4em;
  1954.   spacing: .4em;
  1955.   color: rgba(255, 255, 255, 0.8);
  1956. }
  1957.  
  1958. #LookingGlassDialog StLabel:first-child {
  1959.   font-weight: bold;
  1960.   font-size: 14pt;
  1961. }
  1962.  
  1963. #LookingGlassDialog StLabel:last-child {
  1964.   padding-top: .4em;
  1965.   color: rgba(255, 255, 255, 0.4);
  1966.   font-size: 12pt;
  1967. }
  1968.  
  1969. /* ===================================================================
  1970.    ! Magnifier
  1971.    ===================================================================*/
  1972. .magnifier-zoom-region {
  1973.   border: 4px red;
  1974. }
  1975.  
  1976. .magnifier-zoom-region.full-screen {
  1977.   border: none;
  1978. }
  1979.  
  1980. /* ===================================================================
  1981.  * ! Tile Previews
  1982.  * ===================================================================*/
  1983. .tile-preview, .tile-hud {
  1984.   background-color: rgba(30, 30, 30, 0.65);
  1985. }
  1986.  
  1987. .tile-preview.snap, .tile-hud.snap {
  1988.   background-color: rgba(214, 73, 55, 0.8);
  1989. }
  1990.  
  1991. /* ===================================================================
  1992.    ! Weather applet
  1993.    ===================================================================*/
  1994. /* Use to override the '.popup-menu-content' selector. */
  1995. .weather-menu .popup-menu-content {
  1996.   padding-left: 20px;
  1997.   padding-right: 20px;
  1998. }
  1999.  
  2000. /* Current */
  2001. .current {
  2002.   padding: 2px 10px;
  2003. }
  2004.  
  2005. .weather-current-location-link {
  2006.   font-size: 14pt;
  2007. }
  2008.  
  2009. .weather-current-location-link:selected, .weather-current-location-link:hover {
  2010.   background-gradient-direction: vertical;
  2011.   background-gradient-start: rgba(255, 255, 255, 0);
  2012.   background-gradient-end: rgba(255, 255, 255, 0);
  2013.   color: #d64937;
  2014.   text-decoration: underline;
  2015. }
  2016.  
  2017. .weather-current-summarybox {
  2018.   padding: 0;
  2019.   spacing: .1em;
  2020. }
  2021.  
  2022. .weather-current-summary {
  2023.   font-size: 35px;
  2024.   color: rgba(255, 255, 255, 0.8);
  2025. }
  2026.  
  2027. .weather-current-iconbox {
  2028.   padding: .2em 1em 1em 1em;
  2029. }
  2030.  
  2031. .weather-current-icon {
  2032.   padding: 15px 30px 15px 10px;
  2033.   color: #dcdcdc;
  2034. }
  2035.  
  2036. .weather-current-databox {
  2037.   padding-top: 15px;
  2038.   padding-bottom: .4em;
  2039.   padding-left: 30px;
  2040.   font-size: 9pt;
  2041.   spacing: .2em;
  2042. }
  2043.  
  2044. .weather-current-databox > * {
  2045.   spacing: .2em;
  2046. }
  2047.  
  2048. .weather-current-databox-captions {
  2049.   color: rgba(255, 255, 255, 0.4);
  2050.   text-align: right;
  2051. }
  2052.  
  2053. .weather-current-databox-values {
  2054.   color: rgba(255, 255, 255, 0.8);
  2055. }
  2056.  
  2057. .weather-current-astronomy {
  2058.   color: rgba(255, 255, 255, 0.4);
  2059.   font-size: 9pt;
  2060. }
  2061.  
  2062. /* Forecast */
  2063. .forecast {
  2064.   /* ! */
  2065. }
  2066.  
  2067. .weather-forecast-icon {
  2068.   padding: 10px 10px 0 30px;
  2069.   color: #dcdcdc;
  2070. }
  2071.  
  2072. .weather-forecast-databox {
  2073.   padding: 14px 30px 0 0;
  2074.   spacing: .2em;
  2075. }
  2076.  
  2077. .weather-forecast-databox > *:last-child {
  2078.   color: rgba(255, 255, 255, 0.8);
  2079.   font-size: 9pt;
  2080.   font-weight: bold;
  2081. }
  2082.  
  2083. .weather-forecast-day {
  2084.   color: rgba(255, 255, 255, 0.8);
  2085.   font-size: 10pt;
  2086.   font-weight: bold;
  2087. }
  2088.  
  2089. /* ===================================================================
  2090.    ! System tray collapsible
  2091.    ===================================================================*/
  2092. .systray-collapsible-gradient,
  2093. .systray-collapsible-border {
  2094.   background-gradient-direction: none;
  2095.   background: transparent;
  2096.   box-shadow: none;
  2097.   border-radius: 6px;
  2098.   spacing: 2px;
  2099.   padding: 0;
  2100. }
  2101.  
  2102. .systray-collapsible-gradient:focus,
  2103. .systray-collapsible-border:focus {
  2104.   background-gradient-direction: none;
  2105.   background: transparent;
  2106.   box-shadow: none;
  2107.   padding: 0;
  2108. }
  2109.  
  2110. .systray-collapsible-gradient .popup-menu-icon,
  2111. .systray-collapsible-border .popup-menu-icon {
  2112.   icon-size: 16px;
  2113.   color: #dcdcdc;
  2114.   padding-left: 2px;
  2115.   padding-right: 2px;
  2116. }
  2117.  
  2118. .systray-collapsible-gradient:focus .popup-menu-icon,
  2119. .systray-collapsible-border:focus .popup-menu-icon {
  2120.   color: #dcdcdc;
  2121.   padding: 0;
  2122.   padding-left: 2px;
  2123.   padding-right: 2px;
  2124. }
  2125.  
  2126. /* ===================================================================
  2127.    ! Configurable menu
  2128.    ===================================================================*/
  2129. .menu-main-box {
  2130.   padding-top: 4px;
  2131.   padding-left: 12px;
  2132.   padding-right: 12px;
  2133.   padding-bottom: 0;
  2134. }
  2135.  
  2136. .menu-control-button {
  2137.   border-image: url("button-assets//button.svg") 7;
  2138.   padding: 8px;
  2139. }
  2140.  
  2141. .menu-control-button-selected {
  2142.   border-image: url("button-assets//button-hover.svg") 7;
  2143.   padding: 8px;
  2144. }
  2145.  
  2146. .menu-control-button:open {
  2147.   border-image: url("button-assets//button-pressed.svg") 7;
  2148.   padding: 8px;
  2149. }
  2150.  
  2151. .menu-control-button-selected:open {
  2152.   border-image: url("button-assets//button-pressed.svg") 7;
  2153.   padding: 8px;
  2154. }
  2155.  
  2156. /* Fixes for stylized & classic layouts */
  2157. .menu-main-box-stylized,
  2158. .menu-main-box-classic {
  2159.   padding-top: 4px;
  2160.   padding-left: 10px;
  2161.   padding-right: 2px;
  2162.   padding-bottom: 0;
  2163. }
  2164.  
  2165. .menu-categories-box-stylized,
  2166. .menu-categories-box-classic,
  2167. .menu-top-box-stylized,
  2168. .menu-top-box-classic {
  2169.   padding-left: 10px;
  2170. }
  2171.  
  2172. .menu-search-box-stylized,
  2173. .menu-search-box-classic {
  2174.   padding-left: 0;
  2175.   padding-top: 0;
  2176. }
  2177.  
  2178. /* Favorites box */
  2179. .menu-favorites-box-stylized,
  2180. .menu-favorites-box-classic {
  2181.   padding: .3em;
  2182. }
  2183.  
  2184. /* Right-click menu box */
  2185. .menu-main-box-stylized .menu-context-menu,
  2186. .menu-main-box-claassic .menu-context-menu {
  2187.   border-image: url("background-assets/dark-bg.svg") 7;
  2188.   padding: .5em .1em;
  2189. }
  2190.  
  2191. /* ===================================================================
  2192.    ! Slingshot
  2193.    ===================================================================*/
  2194. /* Use to override the '.popup-menu-content' selector */
  2195. .slingshot {
  2196.   padding: 0;
  2197. }
  2198.  
  2199. /* Separator */
  2200. .slingshot .separator {
  2201.   background-color: rgba(255, 255, 255, 0);
  2202. }
  2203.  
  2204. /* Entry */
  2205. .slingshot .entry {
  2206.   background-gradient-direction: none;
  2207.   background-gradient-start: transparent;
  2208.   background-gradient-end: transparent;
  2209.   background-color: transparent;
  2210.   border: 0;
  2211.   box-shadow: none;
  2212.   border-radius: 0;
  2213.   height: 25px;
  2214. }
  2215.  
  2216. .slingshot .entry:focus {
  2217.   background-gradient-direction: none;
  2218.   background-gradient-start: transparent;
  2219.   background-gradient-end: transparent;
  2220.   background-color: transparent;
  2221.   border: 0;
  2222.   box-shadow: none;
  2223.   border-radius: 0;
  2224.   color: rgba(255, 255, 255, 0.8);
  2225.   height: 25px;
  2226. }
  2227.  
  2228. /* Paginator */
  2229. .slingshot .button {
  2230.   border-image: url("button-assets//button.svg") 7;
  2231.   background-gradient-direction: none;
  2232.   background-color: transparent;
  2233.   border: none;
  2234.   box-shadow: none;
  2235.   border-radius: 0;
  2236.   font-size: 8pt;
  2237.   padding: 8px 0;
  2238. }
  2239.  
  2240. .slingshot .button:hover {
  2241.   border-image: url("button-assets//button-hover.svg") 7;
  2242.   background-gradient-direction: none;
  2243.   background-color: transparent;
  2244. }
  2245.  
  2246. .slingshot .button:active {
  2247.   border-image: url("button-assets//button-pressed.svg") 7;
  2248.   background-gradient-direction: none;
  2249.   background-color: transparent;
  2250. }
  2251.  
  2252. .slingshot .button:checked {
  2253.   border-image: url("button-assets//button-focused.svg") 7;
  2254.   background-gradient-direction: none;
  2255.   background-color: transparent;
  2256.   color: white;
  2257. }
  2258.  
  2259. .slingshot .button:hover:checked, .slingshot .button:hover:active {
  2260.   background-gradient-direction: none;
  2261.   background-color: transparent;
  2262. }
  2263.  
  2264. /* Applications */
  2265. .slingshot .button.app {
  2266.   border-image: none;
  2267.   border-width: 0;
  2268.   font-size: 9pt;
  2269.   padding: 0;
  2270. }
  2271.  
  2272. .slingshot .button.app:hover {
  2273.   border-image: url("background-assets/hover.svg") 7;
  2274.   background-color: transparent;
  2275.   color: white;
  2276. }
  2277.  
  2278. .slingshot .button.app:focus {
  2279.   border-image: url("background-assets/hover.svg") 7;
  2280.   background-color: transparent;
  2281.   color: white;
  2282. }
  2283.  
  2284. /* Categories */
  2285. .slingshot .sidebar {
  2286.   padding-left: 8px;
  2287.   padding-right: 0;
  2288. }
  2289.  
  2290. .slingshot .sidebar .button {
  2291.   border-image: none;
  2292.   padding: 5px;
  2293.   border-radius: 0;
  2294.   border-top: 0;
  2295.   border-right: 0;
  2296.   border-bottom: 0;
  2297.   border-color: transparent;
  2298.   font-size: 9pt;
  2299.   padding-top: 8px;
  2300.   padding-bottom: 8px;
  2301.   color: rgba(255, 255, 255, 0.4);
  2302.   font-weight: bold;
  2303. }
  2304.  
  2305. .slingshot .sidebar .button:hover {
  2306.   border-image: url("background-assets/hover.svg") 7;
  2307.   border-color: transparent;
  2308.   background-color: transparent;
  2309.   box-shadow: none;
  2310.   color: white;
  2311. }
  2312.  
  2313. .slingshot .sidebar .button:active, .slingshot .sidebar .button:hover:active {
  2314.   background-color: transparent;
  2315.   border-color: transparent;
  2316.   box-shadow: inset 0 0 0 transparent;
  2317.   color: white;
  2318. }
  2319.  
  2320. .slingshot .sidebar .button:checked {
  2321.   border-image: url("misc-assets/highlighted-mirrored.svg") 7;
  2322.   border-color: transparent;
  2323.   background-color: transparent;
  2324.   box-shadow: none;
  2325.   color: white;
  2326. }
  2327.  
  2328. .slingshot .sidebar .button:hover:checked {
  2329.   border-image: url("background-assets/hover.svg") 7;
  2330.   color: white;
  2331. }
  2332.  
  2333. /* Linked buttons */
  2334. /* Middle button */
  2335. .slingshot .linked .button {
  2336.   border-image: url("button-assets//linked-button-middle.svg") 9;
  2337.   background-gradient-direction: none;
  2338.   background-color: transparent;
  2339.   border: none;
  2340.   box-shadow: none;
  2341.   border-radius: 0;
  2342.   color: #dcdcdc;
  2343. }
  2344.  
  2345. .slingshot .linked .button:hover {
  2346.   border-image: url("button-assets//linked-button-middle-hover.svg") 9;
  2347. }
  2348.  
  2349. .slingshot .linked .button:active {
  2350.   border-image: url("button-assets//linked-button-middle-pressed.svg") 9;
  2351. }
  2352.  
  2353. .slingshot .linked .button:checked {
  2354.   border-image: url("button-assets//linked-button-middle-pressed.svg") 9;
  2355.   color: #fff;
  2356. }
  2357.  
  2358. /* Leftmost button */
  2359. .slingshot .linked .button:first-child {
  2360.   border-image: url("button-assets//linked-button-left.svg") 9;
  2361.   background-gradient-direction: none;
  2362.   background-color: transparent;
  2363.   box-shadow: none;
  2364.   border-radius: 0;
  2365.   padding: 6px;
  2366.   color: #dcdcdc;
  2367. }
  2368.  
  2369. .slingshot .linked .button:first-child:hover {
  2370.   border-image: url("button-assets//linked-button-left-hover.svg") 9;
  2371. }
  2372.  
  2373. .slingshot .linked .button:first-child:active {
  2374.   border-image: url("button-assets//linked-button-left-pressed.svg") 9;
  2375. }
  2376.  
  2377. .slingshot .linked .button:first-child:checked {
  2378.   border-image: url("button-assets//linked-button-left-checked.svg") 9;
  2379.   color: #fff;
  2380. }
  2381.  
  2382. /* Rightmost button */
  2383. .slingshot .linked .button:last-child {
  2384.   border-image: url("button-assets//linked-button-right.svg") 9;
  2385.   background-gradient-direction: none;
  2386.   background-color: transparent;
  2387.   border-right-width: 0;
  2388.   box-shadow: none;
  2389.   border-radius: 0;
  2390.   padding: 6px;
  2391.   color: #dcdcdc;
  2392. }
  2393.  
  2394. .slingshot .linked .button:last-child:hover {
  2395.   border-image: url("button-assets//linked-button-right-hover.svg") 9;
  2396. }
  2397.  
  2398. .slingshot .linked .button:last-child:active, .slingshot .linked .button:last-child:active:hover {
  2399.   border-image: url("button-assets//linked-button-right-pressed.svg") 9;
  2400.   border-right-width: 0;
  2401. }
  2402.  
  2403. .slingshot .linked .button:last-child:checked {
  2404.   border-image: url("button-assets//linked-button-right-checked.svg") 9;
  2405.   color: #fff;
  2406. }
  2407.  
  2408. /* Linked single button */
  2409. .slingshot .linked .button:only-child {
  2410.   border-image: url("button-assets//button.svg") 9;
  2411.   background-gradient-direction: none;
  2412.   background-color: transparent;
  2413.   border-width: 0;
  2414.   box-shadow: none;
  2415.   border-radius: 0;
  2416.   color: #dcdcdc;
  2417. }
  2418.  
  2419. .slingshot .linked .button:only-child:hover {
  2420.   border-image: url("button-assets//button-hover.svg") 9;
  2421. }
  2422.  
  2423. .slingshot .linked .button:only-child:active {
  2424.   border-image: url("button-assets//button-pressed.svg") 9;
  2425. }
  2426.  
  2427. .slingshot .linked .button:only-child:checked {
  2428.   border-image: url("button-assets//button-pressed.svg") 9;
  2429.   color: #fff;
  2430. }
  2431.  
  2432. /* ===================================================================
  2433.    ! Xcenter
  2434.    ===================================================================*/
  2435. /* Use to override the '.popup-menu-content' selector */
  2436. .xCenter-menu .popup-menu-content {
  2437.   padding: 0;
  2438.   max-height: 500px;
  2439. }
  2440.  
  2441. .xCenter-menu .popup-menu-item {
  2442.   padding: .4em 1.3em;
  2443. }
  2444.  
  2445. .xCenter-menu .popup-menu-item:hover {
  2446.   border-image: url("background-assets/hover.svg") 7;
  2447. }
  2448.  
  2449. .xCenter-mainBox StIcon {
  2450.   color: #dcdcdc;
  2451.   padding-bottom: 1px;
  2452. }
  2453.  
  2454. .xCenter-title {
  2455.   border: 0 transparent;
  2456.   border-bottom-width: 4px;
  2457.   font-size: 9pt;
  2458.   font-weight: bold;
  2459. }
  2460.  
  2461. .xCenter-pane {
  2462.   border-image: url("misc-assets/separator-vertical.svg") 11;
  2463.   padding: 7px 0;
  2464.   padding-right: 1px;
  2465. }
  2466.  
  2467. .xCenter-pane:last-child {
  2468.   border-image: none;
  2469.   padding-right: 0;
  2470. }
  2471.  
  2472. .xCenter-menuItemLabel {
  2473.   max-width: 12em;
  2474. }
  2475.  
  2476. /* ===================================================================
  2477.    ! Stopwatch
  2478.    ===================================================================*/
  2479. .stopwatch-ready,
  2480. .stopwatch-ready:hover,
  2481. .stopwatch-running,
  2482. .stopwatch-running:hover,
  2483. .stopwatch-paused,
  2484. .stopwatch-day-exceeded,
  2485. .stopwatch-running-day-exceeded,
  2486. .stopwatch-paused-day-exceeded {
  2487.   background-color: transparent;
  2488.   padding: 3px 5px;
  2489. }
  2490.  
  2491. /* Different images used in top & bottom panels */
  2492. .panel-top .stopwatch-ready:hover {
  2493.   border-image: url("panel-assets/panel-top-item-hover.svg") 4;
  2494. }
  2495.  
  2496. .panel-top .stopwatch-running {
  2497.   border-image: url("panel-assets/panel-top-item-active.svg") 4;
  2498.   color: white;
  2499. }
  2500.  
  2501. .panel-top .stopwatch-running:hover {
  2502.   border-image: url("panel-assets/panel-top-item-active-hover.svg") 4;
  2503. }
  2504.  
  2505. .panel-top .stopwatch-paused,
  2506. .panel-top .stopwatch-paused:hover,
  2507. .panel-top .stopwatch-day-exceeded,
  2508. .panel-top .stopwatch-running-day-exceeded,
  2509. .panel-top .stopwatch-paused-day-exceeded {
  2510.   border-image: url("panel-assets/panel-top-item-attention.svg") 4;
  2511. }
  2512.  
  2513. .panel-bottom .stopwatch-ready:hover {
  2514.   border-image: url("panel-assets/panel-bottom-item-hover.svg") 4;
  2515. }
  2516.  
  2517. .panel-bottom .stopwatch-running {
  2518.   border-image: url("panel-assets/panel-bottom-item-active.svg") 4;
  2519.   color: white;
  2520. }
  2521.  
  2522. .panel-bottom .stopwatch-running:hover {
  2523.   border-image: url("panel-assets/panel-bottom-item-active-hover.svg") 4;
  2524. }
  2525.  
  2526. .panel-bottom .stopwatch-paused,
  2527. .panel-bottom .stopwatch-paused:hover,
  2528. .panel-bottom .stopwatch-day-exceeded,
  2529. .panel-bottom .stopwatch-running-day-exceeded,
  2530. .panel-bottom .stopwatch-paused-day-exceeded {
  2531.   border-image: url("panel-assets/panel-bottom-item-attention.svg") 4;
  2532. }
  2533.  
  2534. .stopwatch-running * {
  2535.   color: white;
  2536. }
  2537.  
  2538. /* ===================================================================
  2539.    ! Desktop Capture applet
  2540.    ===================================================================*/
  2541. /* Panel icon */
  2542. StBoxLayout.applet-box.desktop-capture StBin {
  2543.   min-width: 22px;
  2544. }
  2545.  
  2546. /* Display of preview image in notifications */
  2547. .screenshot-thumbnail {
  2548.   border-image: url("background-assets/dark-bg.svg") 7;
  2549.   border: 0;
  2550.   padding: 4px;
  2551. }
  2552.  
  2553. .screenshot-thumbnail-hover {
  2554.   border-image: url("background-assets/hover.svg") 7;
  2555. }
  2556.  
  2557. /* Window capture mode */
  2558. .capture-outline-background {
  2559.   background-color: rgba(214, 73, 55, 0.8);
  2560. }
  2561.  
  2562. .capture-outline-frame {
  2563.   border: 0;
  2564.   border-radius: 0;
  2565. }
  2566.  
  2567. .capture-outline-frame.desktop {
  2568.   border: none;
  2569. }
  2570.  
  2571. /* App icon (window capture mode) */
  2572. .overlay-icon {
  2573.   padding: 5px;
  2574.   border: 0;
  2575.   width: 32px;
  2576.   height: 32px;
  2577.   box-shadow: 0 0 transparent;
  2578.   icon-shadow: white 0 0 0;
  2579. }
  2580.  
  2581. .overlay-label-title {
  2582.   padding-top: 5px;
  2583.   color: rgba(255, 255, 255, 0.8);
  2584.   text-shadow: 0 0 0 transparent;
  2585.   font-weight: bold;
  2586.   text-align: center;
  2587. }
  2588.  
  2589. .overlay-label-size {
  2590.   color: rgba(255, 255, 255, 0.8);
  2591.   text-shadow: 0 0 0 transparent;
  2592.   text-align: center;
  2593.   vertical-align: top;
  2594.   font-family: Droid Sans, Sans-Serif;
  2595.   font-size: 10pt;
  2596.   font-weight: bold;
  2597.   clear: both;
  2598. }
  2599.  
  2600. .capture-countdown-timer {
  2601.   border-image: url("background-assets/popup.svg") 7;
  2602.   width: 50px;
  2603.   padding: 14px 12px;
  2604.   font-size: 40px;
  2605.   font-weight: bold;
  2606.   text-align: center;
  2607.   vertical-align: middle;
  2608.   color: rgba(255, 255, 255, 0.8);
  2609. }
  2610.  
  2611. /* Dashed border in area selection */
  2612. .border-h, .border-v {
  2613.   border-image: none;
  2614.   background-color: #000;
  2615. }
  2616.  
  2617. .handle {
  2618.   border: 1px solid #000;
  2619.   background-color: rgba(255, 255, 255, 0.7);
  2620. }
  2621.  
  2622. .area-selection {
  2623.   background-color: rgba(74, 144, 217, 0.5);
  2624.   border: 1px solid #4a90d9;
  2625. }
  2626.  
  2627. /* Desktop overlay */
  2628. .cover {
  2629.   background-color: rgba(0, 0, 0, 0.65);
  2630. }
  2631.  
  2632. /* Instructions dialog */
  2633. .instructions-container {
  2634.   border-image: url("background-assets/popup.svg") 7;
  2635. }
  2636.  
  2637. .instructions-label-header {
  2638.   text-align: center;
  2639.   font-size: 28px;
  2640.   font-weight: bold;
  2641.   color: rgba(255, 255, 255, 0.8);
  2642.   text-shadow: 0 0 transparent;
  2643. }
  2644.  
  2645. .instructions-label-text {
  2646.   color: rgba(255, 255, 255, 0.8);
  2647.   text-align: center;
  2648.   font-size: 22px;
  2649.   text-shadow: 0 0 transparent;
  2650. }
  2651.  
  2652. .menuitem-detail {
  2653.   color: rgba(255, 255, 255, 0.4);
  2654. }
  2655.  
  2656. .popup-menu-item:active .menuitem-detail {
  2657.   color: rgba(255, 255, 255, 0.4);
  2658. }
  2659.  
  2660. /* ===================================================================
  2661.    ! Color Picker applet
  2662.    ===================================================================*/
  2663. .color-inspector {
  2664.   padding: 6px 10px 10px 10px;
  2665.   border-image: none;
  2666.   border: 0;
  2667.   spacing: 10px;
  2668. }
  2669.  
  2670. .color-entry {
  2671.   min-width: 150px;
  2672. }
  2673.  
  2674. .color-spectrum {
  2675.   min-width: 14px;
  2676.   min-height: 100px;
  2677.   padding: 0 4px 4px 4px;
  2678. }
  2679.  
  2680. .color-gradient {
  2681.   padding: 8px 12px 12px 12px;
  2682.   min-width: 100px;
  2683.   min-height: 100px;
  2684. }
  2685.  
  2686. .color-cursor {
  2687.   width: 16px;
  2688.   height: 16px;
  2689. }
  2690.  
  2691. .color-palette {
  2692.   padding: 10px 10px;
  2693.   border-image: none;
  2694. }
  2695.  
  2696. .color-button .color-button-box {
  2697.   border-radius: 2px;
  2698.   border: 0;
  2699. }
  2700.  
  2701. .color-button, .color-button:disabled, .color-button:hover {
  2702.   border-image: none;
  2703.   border: 0;
  2704. }
  2705.  
  2706. .icon-button {
  2707.   padding: 2px;
  2708.   border-radius: 0;
  2709. }
  2710.  
  2711. .popup-scale-menu-item {
  2712.   border-image: none;
  2713. }
  2714.  
  2715. /* ===================================================================
  2716.  * ! Window list with app grouping
  2717.  *
  2718.  * - This applet has no stylesheet; it uses the alt-tab styles
  2719.  * - The elements are placed inside ".popup-menu-content"
  2720.  * - A combinator is used to isolate the styles
  2721.  * ===================================================================*/
  2722. .popup-menu-content {
  2723.   spacing: 0;
  2724.   padding: 0;
  2725.   border-image: url("background-assets/tooltip--window-app-grouping.svg") 6;
  2726. }
  2727.  
  2728. .popup-menu-content .switcher-list {
  2729.   spacing: 0;
  2730.   padding: 0;
  2731.   border-image: none;
  2732. }
  2733.  
  2734. .popup-menu-content .switcher-list .item-box {
  2735.   padding: 0;
  2736.   spacing: 0;
  2737.   border-image: none;
  2738.   color: rgba(255, 255, 255, 0.8);
  2739. }
  2740.  
  2741. .popup-menu-content .switcher-list .item-box:selected {
  2742.   border-image: none;
  2743.   color: rgba(255, 255, 255, 0.8);
  2744. }
  2745.  
  2746. .popup-menu-content .switcher-list .item-box .thumbnail-iconLabel {
  2747.   spacing: 4px;
  2748.   padding: 0;
  2749.   font-size: 9pt;
  2750. }
  2751.  
  2752. .popup-menu-content .switcher-list .item-box .window-close {
  2753.   background-image: url("widget-assets/close-2.svg");
  2754.   background-size: 20px;
  2755. }
  2756.  
  2757. /* ===================================================================
  2758.    ! Sticky Notes desklet
  2759.    ===================================================================*/
  2760. #sticky-scrollview StScrollBar {
  2761.   padding: 0;
  2762.   padding-left: 6px;
  2763. }
  2764.  
  2765. .sticky-button {
  2766.   height: 24px;
  2767.   width: 24px;
  2768. }
  2769.  
  2770. .sticky-button-selected {
  2771.   border-image: none;
  2772.   height: 24px;
  2773.   width: 24px;
  2774. }
  2775.  
  2776. .sticky-button-selected * {
  2777.   color: #d64937;
  2778. }
  2779.  
  2780. .sticky-button-box {
  2781.   padding: 0;
  2782.   padding-top: 4px;
  2783.   height: 24px;
  2784. }
  2785.  
  2786. .sticky-main-box-staples {
  2787.   border-image: url("background-assets/popup.svg") 7;
  2788.   background-color: transparent;
  2789.   border-radius: 0;
  2790.   text-shadow: none;
  2791.   min-width: 210px;
  2792.   padding: 4px 10px;
  2793.   padding-top: 0;
  2794.   font-weight: bold;
  2795.   color: rgba(255, 255, 255, 0.8);
  2796. }
  2797.  
  2798. .sticky-main-box-none {
  2799.   border-image: url("background-assets/popup.svg") 7;
  2800.   background-color: transparent;
  2801.   border-radius: 0;
  2802.   text-shadow: none;
  2803.   min-width: 210px;
  2804.   padding: 4px 10px;
  2805.   padding-top: 0;
  2806.   font-weight: bold;
  2807.   color: rgba(255, 255, 255, 0.8);
  2808. }
  2809.  
  2810. .sticky-top-box {
  2811.   font-weight: bold;
  2812.   color: rgba(255, 255, 255, 0.8);
  2813. }
  2814.  
  2815. .sticky-bottom-box {
  2816.   font-weight: bold;
  2817.   color: rgba(255, 255, 255, 0.8);
  2818. }
  2819.  
  2820. .sticky-title-label {
  2821.   padding: 0 4px 0 4px;
  2822.   max-width: 100px;
  2823.   text-align: center;
  2824. }
  2825.  
  2826. .sticky-information-label {
  2827.   padding: 0 4px 0 4px;
  2828. }
  2829.  
  2830. .sticky-text-box {
  2831.   background-gradient-direction: vertical;
  2832.   background-gradient-start: transparent;
  2833.   background-gradient-end: transparent;
  2834.   border: 0;
  2835.   border-width: 0;
  2836.   box-shadow: 0 0 transparent;
  2837.   border-radius: 0;
  2838.   border-image: url("widget-assets/entry.svg") 6;
  2839.   padding: 4px 8px 3px 8px;
  2840.   font-size: 10pt;
  2841.   font-weight: normal;
  2842.   color: rgba(255, 255, 255, 0.4);
  2843.   padding: 6px;
  2844. }
  2845.  
  2846. .sticky-text-box:focus, .sticky-text-box:active, .sticky-text-box:pressed {
  2847.   border-image: url("widget-assets/entry-focused.svg") 6;
  2848.   font-weight: bold;
  2849.   color: rgba(255, 255, 255, 0.8);
  2850.   caret-color: rgba(255, 255, 255, 0.8);
  2851.   caret-size: 1px;
  2852.   selected-color: white;
  2853.   selection-background-color: #d64937;
  2854. }
  2855.  
  2856. .sticky-text-box StIcon {
  2857.   color: #888;
  2858. }
  2859.  
  2860. .sticky-text-box:focus > StIcon,
  2861. .sticky-text-box:active > StIcon,
  2862. .sticky-text-box:pressed > StIcon {
  2863.   color: #dcdcdc;
  2864. }
  2865.  
  2866. .sticky-text-box:active {
  2867.   background-gradient-direction: vertical;
  2868.   background-gradient-start: transparent;
  2869.   background-gradient-end: transparent;
  2870.   border: 0;
  2871.   border-width: 0;
  2872.   box-shadow: 0 0 transparent;
  2873.   border-radius: 0;
  2874.   padding: 6px;
  2875. }
  2876.  
  2877. .sticky-text-box StEntry {
  2878.   border-image: none;
  2879. }
  2880.  
  2881. #sticky-note-entry {
  2882.   color: rgba(255, 255, 255, 0.8);
  2883.   selected-color: rgba(255, 255, 255, 0.8);
  2884.   caret-color: rgba(255, 255, 255, 0.8);
  2885.   caret-size: 1px;
  2886.   selection-background-color: #d64937;
  2887. }
  2888.  
  2889. /* ===================================================================
  2890.    ! Reddit reader
  2891.    ===================================================================*/
  2892. .reddit-reader {
  2893.   border-image: url("background-assets/popup.svg") 7;
  2894.   padding: 4px;
  2895.   color: rgba(255, 255, 255, 0.8);
  2896. }
  2897.  
  2898. .reddit-reader StScrollBar {
  2899.   padding: 3px 5px 8px 3px;
  2900. }
  2901.  
  2902. /* Title */
  2903. .reddit-title-bar {
  2904.   border-image: url("widget-assets/entry.svg") 7;
  2905.   padding: 10px;
  2906.   font-size: 10pt;
  2907.   font-weight: bold;
  2908. }
  2909.  
  2910. .reddit-header-icon {
  2911.   padding-right: 6px;
  2912.   icon-size: 16px;
  2913.   color: #dcdcdc;
  2914. }
  2915.  
  2916. .reddit-title {
  2917.   padding-right: 6px;
  2918.   font-size: 14pt;
  2919. }
  2920.  
  2921. .reddit-subtitle {
  2922.   color: rgba(255, 255, 255, 0.4);
  2923.   font-size: 10pt;
  2924. }
  2925.  
  2926. /* Posts */
  2927. .reddit-posts-box {
  2928.   spacing: 2px;
  2929.   padding: 2px 1px 8px 1px;
  2930. }
  2931.  
  2932. .reddit-post {
  2933.   border-image: url("background-assets/dark-bg-top.svg") 7;
  2934.   padding: 10px;
  2935.   color: rgba(255, 255, 255, 0.8);
  2936.   font-size: 8pt;
  2937. }
  2938.  
  2939. .reddit-info-box {
  2940.   border-image: url("background-assets/dark-bg-bottom.svg") 7;
  2941.   padding: 0 10px 10px 10px;
  2942.   spacing: 10px;
  2943.   font-size: 7pt;
  2944.   color: rgba(255, 255, 255, 0.4);
  2945. }
  2946.  
  2947. /* ===================================================================
  2948.    ! Calculator
  2949.    ===================================================================*/
  2950. .calc-mainBox {
  2951.   padding: 0;
  2952. }
  2953.  
  2954. .calc-displayArea {
  2955.   padding: 0;
  2956. }
  2957.  
  2958. .calc-displayWindow {
  2959.   border-image: url("widget-assets/entry-focused.svg") 7;
  2960.   padding: 8px;
  2961.   padding-top: 4px;
  2962.   padding-bottom: 2.4em;
  2963. }
  2964.  
  2965. .calc-displayWindow-rpn {
  2966.   border-image: url("widget-assets/entry-focused.svg") 7;
  2967.   padding: 8px;
  2968.   padding-top: 4px;
  2969. }
  2970.  
  2971. .calc-displayText-primary {
  2972.   font-size: 32pt;
  2973.   color: rgba(255, 255, 255, 0.8);
  2974.   text-align: right;
  2975. }
  2976.  
  2977. .calc-displayText-secondary {
  2978.   font-size: 10pt;
  2979.   color: #f0ad4e;
  2980.   text-align: right;
  2981.   padding-bottom: 8px;
  2982. }
  2983.  
  2984. .calc-displayText-operation {
  2985.   color: #f0ad4e;
  2986. }
  2987.  
  2988. .calc-displayText-status {
  2989.   font-size: 10pt;
  2990.   color: rgba(255, 255, 255, 0.4);
  2991. }
  2992.  
  2993. .calc-displayText-rpn {
  2994.   color: rgba(255, 255, 255, 0.8);
  2995.   font-size: 10pt;
  2996. }
  2997.  
  2998. .calc-stackArea {
  2999.   height: 85px;
  3000.   padding-top: .8em;
  3001.   padding-bottom: 0;
  3002. }
  3003.  
  3004. .calc-navigation-box {
  3005.   padding: 0 0 0 8px;
  3006.   width: 16px;
  3007.   border: none;
  3008. }
  3009.  
  3010. .calc-navigation-icon {
  3011.   color: #dcdcdc;
  3012.   icon-size: 16px;
  3013. }
  3014.  
  3015. .calc-navigation-button {
  3016.   border: none;
  3017. }
  3018.  
  3019. .calc-navigation-button:hover .calc-navigation-icon {
  3020.   color: #d64937;
  3021. }
  3022.  
  3023. .calc-button {
  3024.   background-color: transparent;
  3025.   background-gradient-direction: none;
  3026.   background-gradient-start: transparent;
  3027.   background-gradient-end: transparent;
  3028.   box-shadow: 0 0 transparent;
  3029.   border: none;
  3030.   border-width: 0;
  3031.   border-radius: 0;
  3032.   font-weight: bold;
  3033.   font-size: 9pt;
  3034.   border-image: url("button-assets/button-primary.svg") 10;
  3035.   color: rgba(255, 255, 255, 0.8);
  3036.   width: 3.4em;
  3037.   height: 2.8em;
  3038. }
  3039.  
  3040. .calc-button:grayed, .calc-button:disabled, .calc-button:insensitive {
  3041.   border-image: url("button-assets/button-insensitive.svg") 10;
  3042.   color: rgba(255, 255, 255, 0.1);
  3043. }
  3044.  
  3045. .calc-button:grayed StIcon, .calc-button:disabled StIcon, .calc-button:insensitive StIcon {
  3046.   color: #444;
  3047. }
  3048.  
  3049. .calc-button > StIcon {
  3050.   width: 16px;
  3051.   height: 16px;
  3052.   icon-size: 16px;
  3053. }
  3054.  
  3055. .calc-button:hover {
  3056.   border-image: url("button-assets/button-primary-hover.svg") 10;
  3057. }
  3058.  
  3059. .calc-button:active, .calc-button:pressed {
  3060.   border-image: url("button-assets/button-primary-pressed.svg") 10;
  3061. }
  3062.  
  3063. .calc-button:focus {
  3064.   border-image: url("button-assets/button-orange.svg") 10;
  3065.   color: rgba(255, 255, 255, 0.8);
  3066. }
  3067.  
  3068. .calc-button:focus:hover {
  3069.   border-image: url("button-assets/button-orange-hover.svg") 10;
  3070. }
  3071.  
  3072. .calc-button:focus:active, .calc-button:focus:pressed {
  3073.   border-image: url("button-assets/button-orange-pressed.svg") 10;
  3074. }
  3075.  
  3076. .calc-button > StIcon {
  3077.   color: #dcdcdc;
  3078. }
  3079.  
  3080. .calc-button:hover > StIcon,
  3081. .calc-button:active > StIcon,
  3082. .calc-button:pressed > StIcon {
  3083.   color: #dcdcdc;
  3084. }
  3085.  
  3086. .calc-button:focus > StIcon,
  3087. .calc-button:focus:hover > StIcon,
  3088. .calc-button:focus:active > StIcon,
  3089. .calc-button:focus:pressed > StIcon {
  3090.   color: #dcdcdc;
  3091. }
  3092.  
  3093. .calc-button-padding {
  3094.   padding: .2em;
  3095. }
  3096.  
  3097. /* ===================================================================
  3098.    ! G-tile
  3099.    ===================================================================*/
  3100. .grid-panel {
  3101.   border-image: url("background-assets/popup.svg") 7;
  3102.   width: 220px;
  3103.   padding: 4px;
  3104.   spacing: 0;
  3105. }
  3106.  
  3107. .grid-title {
  3108.   padding: 4px;
  3109.   font-size: 12px;
  3110.   font-weight: bold;
  3111.   color: rgba(255, 255, 255, 0.8);
  3112.   text-align: center;
  3113. }
  3114.  
  3115. .table {
  3116.   padding: 6px;
  3117. }
  3118.  
  3119. .table-element {
  3120.   border-image: url("misc-assets/calendar-work-day.svg") 7;
  3121. }
  3122.  
  3123. .table-element:hover, .table-element:activate {
  3124.   border-image: url("misc-assets/calendar-today.svg") 7;
  3125. }
  3126.  
  3127. .top-box {
  3128.   border-image: url("background-assets/sub.svg") 7;
  3129.   padding: 8px;
  3130.   padding-bottom: 12px;
  3131. }
  3132.  
  3133. .bottom-box {
  3134.   padding: 0 8px;
  3135. }
  3136.  
  3137. .bottom-box:last-child {
  3138.   padding: 8px;
  3139.   padding-top: 2px;
  3140. }
  3141.  
  3142. .very-bottom-box {
  3143.   padding: 0;
  3144. }
  3145.  
  3146. .grid-preview {
  3147.   background-color: transparent;
  3148.   border-color: transparent;
  3149. }
  3150.  
  3151. .grid-preview:activate {
  3152.   background-color: rgba(214, 73, 55, 0.5);
  3153.   border: 1px solid rgba(0, 0, 0, 0.45);
  3154.   border-radius: 2px;
  3155. }
  3156.  
  3157. /* buttons */
  3158. .settings-button {
  3159.   border-image: url("button-assets//button.svg") 7;
  3160.   padding: 3px;
  3161.   width: 46px;
  3162.   height: 34px;
  3163.   color: rgba(255, 255, 255, 0.8);
  3164. }
  3165.  
  3166. .settings-button:activate {
  3167.   border-image: url("button-assets//button-focused-pressed.svg") 7;
  3168.   color: rgba(255, 255, 255, 0.8);
  3169. }
  3170.  
  3171. .settings-button:activate:hover {
  3172.   border-image: url("button-assets//button-focused-pressed.svg") 7;
  3173.   color: rgba(255, 255, 255, 0.8);
  3174. }
  3175.  
  3176. .settings-button:hover {
  3177.   border-image: url("button-assets//button-hover.svg") 7;
  3178.   color: rgba(255, 255, 255, 0.8);
  3179. }
  3180.  
  3181. .close-button {
  3182.   background-image: url("misc-assets/auto-close.svg");
  3183.   width: 24px;
  3184.   height: 24px;
  3185. }
  3186.  
  3187. .close-button:hover {
  3188.   background-image: url("misc-assets/auto-close.svg");
  3189. }
  3190.  
  3191. /* button-icons */
  3192. .tiling-icon {
  3193.   width: 24px;
  3194.   height: 24px;
  3195. }
  3196.  
  3197. .animation-icon {
  3198.   background-image: url("misc-assets/animation.svg");
  3199.   width: 24px;
  3200.   height: 24px;
  3201. }
  3202.  
  3203. .auto-close-icon {
  3204.   background-image: url("misc-assets/auto-close.svg");
  3205.   width: 24px;
  3206.   height: 24px;
  3207. }
  3208.  
  3209. .action-main-list {
  3210.   background-image: url("misc-assets/auto-tile-1.svg");
  3211.   width: 24px;
  3212.   height: 24px;
  3213. }
  3214.  
  3215. .action-two-list {
  3216.   background-image: url("misc-assets/auto-tile-2.svg");
  3217.   width: 24px;
  3218.   height: 24px;
  3219. }
  3220.  
  3221. .action-scale {
  3222.   width: 24px;
  3223.   height: 24px;
  3224. }
RAW Paste Data