10/03/2020, 23:29
Ecco qui @rage75:
Codice:
/* ###################################################################
* Section common with Gnome Shell
* ... contains a few cinnamon specific styles (rare occurrences)
* ###################################################################*/
stage {
font-family: sans, sans-serif;
}
.cinnamon-link {
color: #0000ff;
text-decoration: underline;
}
.cinnamon-link:hover {
color: #0000e0;
}
.label-shadow {
color: rgba(0,0,0,0.5);
}
StScrollBar {
padding: 0px;
}
StScrollView.vfade {
-st-vfade-offset: 68px;
}
StScrollView StScrollBar {
min-width: 16px;
min-height: 16px;
}
StScrollBar StBin#trough {
background-color: rgba(0,0,0,0);
border: 1px solid #555555;
border-radius: 4px;
}
StScrollBar StButton#vhandle {
background-image: url("scroll-vhandle.svg");
background-color: rgba(204,204,204,0.3);
border: 1px solid #555555;
border-radius: 4px;
}
StScrollBar StButton#hhandle {
background-image: url("scroll-hhandle.svg");
background-color: rgba(204,204,204,0.3);
border: 1px solid #555555;
border-radius: 4px;
}
StScrollBar StButton#hhandle:hover,
StScrollBar StButton#vhandle:hover {
background-color: rgba(204,204,204,0.5);
}
.separator {
-gradient-height: 2px;
-gradient-start: rgba(85,85,85,1);
-gradient-end: #555555;
-margin-horizontal: 1.5em;
height: 1em;
}
.slider {
height: 1em;
min-width: 15em;
-slider-height: 0.3em;
-slider-background-color: #666666;
-slider-border-color: #555555;
-slider-active-background-color: #CCCCCC;
-slider-active-border-color: #DDDDDD;
-slider-border-width: 1px;
-slider-handle-radius: 0.5em;
}
#Tooltip {
border: 1px solid rgba(212,185,67,1.0);
border-radius: 4px;
padding: 2px 12px;
background-gradient-end: rgba(251,234,159,0.9);
background-gradient-start: rgba(254,245,198,0.9);
background-gradient-direction: vertical;
color: #000000;
font-size: 8.5pt;
font-weight: normal;
text-align: center;
}
/* ===================================================================
* Shared button properties
* ===================================================================*/
.notification-button, .notification-icon-button,
.modal-dialog-button,
.sound-player-overlay StButton {
color: white;
border: 1px solid #8b8b8b;
background-gradient-direction: vertical;
background-gradient-start: rgba(255, 255, 255, 0.2);
background-gradient-end: rgba(255, 255, 255, 0);
}
.notification-button:hover,
.notification-icon-button:hover, .modal-dialog-button:hover,
.sound-player-overlay StButton:hover {
background-gradient-start: rgba(255, 255, 255, 0.3);
background-gradient-end: rgba(255, 255, 255, 0.1);
}
.notification-button:focus,
.notification-icon-button:focus,
.modal-dialog-button:focus,
.sound-player-overlay StButton:focus {
border: 2px solid #8b8b8b;
}
.notification-button:active, .notification-icon-button:active,
.modal-dialog-button:active, .modal-dialog-button:pressed,
.sound-player-overlay StButton:active {
background-gradient-start: rgba(255, 255, 255, 0);
background-gradient-end: rgba(255, 255, 255, 0.2);
}
/* ===================================================================
* PopupMenu (popupMenu.js)
* ===================================================================*/
/* .popup-menu-boxpointer and .popup-menu are kept for compatibility
with cinnamon version under 3.2. Use .menu in version 3.2 and above */
.popup-menu-boxpointer {
-arrow-border-radius: 8px;
-arrow-background-color: rgba(80,80,80,0.9);
-arrow-border-width: 2px;
-arrow-border-color: #a5a5a5;
-arrow-base: 24px;
-arrow-rise: 11px;
}
.popup-menu {
color: #ffffff;
font-size: 9.5pt;
min-width: 100px;
}
.menu {
border-radius: 8px;
background-color: rgba(80,80,80,0.9);
border-width: 2px;
border-color: #a5a5a5;
color: #ffffff;
font-size: 9.5pt;
min-width: 100px;
}
.popup-menu-arrow {
icon-size: 1.14em;
}
.popup-submenu-menu-item:open {
background-color: #4c4c4c;
}
.popup-sub-menu {
background-gradient-start: rgba(80,80,80,0.3);
background-gradient-end: rgba(80,80,80,0.7);
background-gradient-direction: vertical;
}
.popup-sub-menu .popup-menu-item:ltr {
padding-right: 1.75em;
}
.popup-sub-menu .popup-menu-item:rtl {
padding-left: 1.75em;
}
.popup-sub-menu StScrollBar {
padding: 4px;
}
.popup-sub-menu StScrollBar StBin#trough {
border-width: 0px;
}
.popup-sub-menu StScrollBar StBin#vhandle {
background-color: #4c4c4c;
border-width: 0px;
}
.popup-combo-menu {
background-color: rgba(0,0,0,0.9);
padding: 1em 0em;
color: #ffffff;
font-size: 10.5pt;
border: 1px solid #5f5f5f;
border-radius: 9px;
}
/* The remaining popup-menu sizing is all done in ems, so that if you
* override .popup-menu.font-size, everything else will scale with it.
*/
.popup-menu-content {
padding: 1em 0em;
}
.popup-menu-item {
padding: .4em 1.75em;
spacing: 1em;
}
.popup-menu-item:active {
background-color: #4c4c4c;
}
.popup-menu-item:insensitive {
color: #9f9f9f;
}
.popup-image-menu-item {
}
.popup-combobox-item {
spacing: 1em;
}
.popup-separator-menu-item {
-gradient-height: 2px;
-gradient-start: rgba(85,85,85,1);
-gradient-end: #555555;
-margin-horizontal: 1.5em;
height: 1em;
}
.popup-alternating-menu-item:alternate {
font-weight: bold;
}
.popup-slider-menu-item {
height: 1em;
min-width: 15em;
-slider-height: 0.3em;
-slider-background-color: #666666;
-slider-border-color: #555555;
-slider-active-background-color: #CCCCCC;
-slider-active-border-color: #DDDDDD;
-slider-border-width: 1px;
-slider-handle-radius: 0.5em;
}
.popup-device-menu-item {
spacing: .5em;
}
.popup-inactive-menu-item {
font-weight: normal;
color: #999;
}
.popup-subtitle-menu-item {
font-weight: bold;
}
.popup-menu-icon {
icon-size: 1.14em;
}
/* Switches (to be used in menus) */
.toggle-switch {
width: 64px;
height: 22px;
}
.toggle-switch-us {
background-image: url("toggle-off-us.svg");
}
.toggle-switch-us:checked {
background-image: url("toggle-on-us.svg");
}
.toggle-switch-intl {
background-image: url("toggle-off-intl.svg");
}
.toggle-switch-intl:checked {
background-image: url("toggle-on-intl.svg");
}
.nm-menu-item-icons {
spacing: .5em;
}
/* ===================================================================
* Panel (panel.js)
* ===================================================================*/
#panel {
color: #ffffff;
background-color: #555555;
font-size: 8.5pt;
font-weight: normal;
height: 26px;
width: 32px;
}
#panel:highlight {
background-color: #aa5555;
}
.panel-dummy {
background-color: rgba(50, 50, 50, 0.4);
}
.panel-dummy:entered {
background-color: rgba(255, 35, 35, 0.4);
}
.panelLeft {
spacing: 4px;
}
.panelCenter {
spacing: 4px;
}
.panelRight {
spacing: 4px;
}
.panelLeft:dnd {
background-gradient-direction: vertical;
background-gradient-start: rgba(255,0,0,0.05);
background-gradient-end: rgba(255,0,0,0.2);
}
.panelCenter:dnd {
background-gradient-direction: vertical;
background-gradient-start: rgba(0,255,0,0.05);
background-gradient-end: rgba(0,255,0,0.2);
}
.panelRight:dnd {
background-gradient-direction: vertical;
background-gradient-start: rgba(0,0,255,0.05);
background-gradient-end: rgba(0,0,255,0.2);
}
.panelLeft:ltr {
padding-right: 4px;
}
.panelLeft:rtl {
padding-left: 4px;
}
.panelRight:ltr {
padding-left: 0px;
spacing: 0px;
}
.panelRight:rtl {
padding-right: 0px;
spacing: 0px;
}
.panelLeft.vertical {
padding: 0px;
}
.panelRight.vertical {
padding: 0px;
}
.panelCenter.vertical {
padding-left: 0px;
padding-right: 0px;
}
.panelLeft.vertical:dnd {
}
.panelCenter.vertical:dnd {
}
.panelRight.vertical:dnd {
}
.panel-top {
}
.panel-bottom {
}
.panel-left {
}
.panel-right {
}
.panel-status-button {
border: 0px solid #8b8b8b;
-natural-hpadding: 3px;
-minimum-hpadding: 3px;
font-weight: bold;
color: #ccc;
height: 22px;
}
.panel-status-button:hover {
color: white;
}
.system-status-icon {
padding-left: 0px;
padding-right: 0px;
spacing: 0px;
margin: 0px;
}
.system-status-icon.warning {
color: #e5e887;
}
.system-status-icon.error {
color: #fb5858;
}
.panel-corner {
-panel-corner-radius: 0px;
-panel-corner-background-color: black;
-panel-corner-inner-border-width: 2px;
-panel-corner-inner-border-color: transparent;
-panel-corner-outer-border-width: 1px;
-panel-corner-outer-border-color: #536272;
}
.panel-corner:active,
.panel-corner:overview,
.panel-corner:focus {
-panel-corner-inner-border-color: rgba(255,255,255,0.8);
}
.panel-button #appMenuIcon {
app-icon-bottom-clip: 1px;
}
.panel-button:active #appMenuIcon,
.panel-button:checked #appMenuIcon,
.panel-button:focus #appMenuIcon {
app-icon-bottom-clip: 2px;
}
.panel-button {
-natural-hpadding: 6px;
-minimum-hpadding: 2px;
font-weight: bold;
color: #ccc;
transition-duration: 100;
}
.panel-button:hover {
color: white;
text-shadow: black 0px 2px 2px;
}
.panel-button:active,
.panel-button:overview,
.panel-button:focus {
}
.panel-button:active > .system-status-icon,
.panel-button:checked > .system-status-icon,
.panel-button:focus > .system-status-icon {
icon-shadow: black 0px 2px 2px;
}
.panel-menu {
-boxpointer-gap: 4px;
}
.popup-menu-item-dot {
}
.system-status-icon {
icon-size: 1.14em;
}
/* ===================================================================
* Overview
* ===================================================================*/
#overview {
spacing: 12px;
}
.workspace-controls {
visible-height: 32px; /* Amount visible before hovering */
}
.workspace-thumbnails-background {
border: 1px solid rgba(128, 128, 128, 0.4);
border-right: 0px;
border-radius: 9px 9px 0px 0px;
background-color: rgba(0, 0, 0, 0.5);
padding: 8px;
}
.workspace-thumbnails-background:rtl {
border-right: 1px;
border-left: 0px;
border-radius: 9px 9px 0px 0px;
}
.workspace-thumbnails {
spacing: 14px;
}
.workspace-add-button {
background-image: url("add-workspace.png");
height: 200px;
width: 35px;
transition-duration: 300;
}
.workspace-add-button:hover {
background-image: url("add-workspace-hover.png");
transition-duration: 300;
}
.workspace-close-button {
background-image: url("close-window.svg");
height: 34px;
width: 34px;
-cinnamon-close-overlap: 20px;
}
.workspace-thumbnail-indicator {
outline: 2px solid white;
border: 1px solid #888;
}
.window-caption {
background: rgba(85,85,85,0.8);
border: 2px solid #a5a5a5;
border-radius: 4px;
padding: .5em;
spacing: .5em;
-cinnamon-caption-spacing: 8px;
font-size: 10pt;
color: #ccc;
max-width: 20em;
}
.window-caption:focus {
color: #fff;
}
.window-border {
border: 3px #a5a5a5;
border-radius: 4px;
background-color: rgba(255,255,255,.05);
/* Cover rounded corners and some bad adjustment gaps */
box-shadow: 0 0 0 1px #a5a5a5 inset;
}
.window-close {
background-image: url("close-window.svg");
height: 28px;
width: 28px;
-cinnamon-close-overlap: 13px;
}
.window-close:hover {
background-image: url("close-window-hover.svg");
}
.window-close-area {
background-image: url("trash-icon.png");
background-size: 100px;
background-color: rgba(60, 60, 60, 0.8);
border: 4px solid rgba(128,128,128,0.8);
border-bottom-width: 0px;
border-radius: 20px 20px 0px 0px;
height: 120px;
width: 400px;
}
.overview-icon {
border-radius: 4px;
padding: 3px;
border: 1px rgba(0,0,0,0);
font-size: 7.5pt;
color: white;
transition-duration: 100;
text-align: center;
}
.overview-empty-placeholder {
color: #ffffff;
font-size: 2em;
}
.expo-background {
background-gradient-start: #000;
background-gradient-end: #AAA;
background-gradient-direction: vertical;
}
.workspace-overview-background-shade {
background-color: rgba(0,0,0,0.4);
}
.expo-workspace-thumbnail-frame {
border: 1px, rgba(64,64,64,0.9);
background-color: rgba(64,64,64,0.9);
}
.expo-workspace-thumbnail-frame#active {
border: 2px, rgba(32,32,32,0.9);
background-color: rgba(32,32,32,0.9);
}
/* ===================================================================
* Looking Glass
* ===================================================================*/
#LookingGlassDialog {
background-color: rgba(85,85,85,0.85);
spacing: 4px;
padding: 4px;
border: 2px solid grey;
border-radius: 4px;
color: #CCCCCC;
}
/* ===================================================================
* Date applet
* ===================================================================*/
/*calendar-background allows the date applet calendar to be themed separately from other applet menus*/
.calendar-background {
}
.calendar {
padding: .4em 1.75em;
spacing-rows: 0px;
spacing-columns: 0px;
}
.calendar-month-label {
color: #cccccc;
font-size: 7.5pt;
padding-bottom: 8px;
padding-top: 8px;
font-weight: bold;
}
.calendar-change-month-back {
width: 18px;
height: 12px;
background-image: url("calendar-arrow-left.svg");
border-radius: 4px;
}
.calendar-change-month-back:rtl {
background-image: url("calendar-arrow-right.svg");
}
.calendar-change-month-back:hover {
background-color: #999999;
}
.calendar-change-month-back:active {
background-color: #aaaaaa;
}
.calendar-change-month-forward {
width: 18px;
height: 12px;
background-image: url("calendar-arrow-right.svg");
border-radius: 4px;
}
.calendar-change-month-forward:rtl {
background-image: url("calendar-arrow-left.svg");
}
.calendar-change-month-forward:hover {
background-color: #999999;
}
.calendar-change-month-forward:active {
background-color: #aaaaaa;
}
.datemenu-date-label {
padding: .4em 1.75em;
font-size: 10.5pt;
color: #cccccc;
font-weight: bold;
}
.calendar-day-base {
font-size: 7.5pt;
text-align: center;
width: 2.4em;
height: 2.4em;
}
.calendar-day-base:hover {
background-color: #777777;
color: #fff;
}
.calendar-day-base:active {
background-color: #555555;
}
.calendar-day-heading {
color: #cccccc;
padding-top: 1em;
}
.calendar-week-number {
color: #cccccc;
font-weight: bold;
}
/* Hack used in lieu of border-collapse - see calendar.js */
.calendar-day:ltr {
border: 1px solid #333333;
color: #cccccc;
border-top-width: 0;
border-left-width: 0;
}
.calendar-day-top:ltr {
border-top-width: 1px;
}
.calendar-day-left:ltr {
border-left-width: 1px;
}
.calendar-day:rtl {
border: 1px solid #333333;
color: #cccccc;
border-top-width: 0;
border-right-width: 0;
}
.calendar-day-top:rtl {
border-top-width: 1px;
}
.calendar-day-left:rtl {
border-right-width: 1px;
}
.calendar-work-day {
}
.calendar-nonwork-day {
background-color: rgba(128, 128, 128, 0.1);
}
.calendar-today {
background-image: url("calendar-today.svg");
text-shadow: black 0px 2px 2px;
color: #ffffff;
font-weight: bold;
}
.calendar-other-month-day {
color: #888888;
background-color: rgba(64, 64, 64, 0.5);
}
.calendar-day-with-events {
font-weight: bold;
color: #cccccc;
}
/* ===================================================================
* Notifications
* ===================================================================*/
#notification {
font-size: 8.5pt;
border-radius: 8px 8px 8px 8px;
border: 2px solid #a5a5a5;
background-gradient-direction: vertical;
background-gradient-start: rgba(85,85,85,0.8);
background-gradient-end: rgba(85,85,85,0.8);
padding: 8px 8px 8px 8px;
spacing-rows: 10px;
spacing-columns: 10px;
margin-from-right-edge-of-screen: 20px;
width: 34em;
color: white;
}
#notification.multi-line-notification {
padding-bottom: 8px;
color: white;
}
/* We use row-span = 2 for the image cell, which prevents its height preferences to be
taken into account during allocation, so its height ends up being limited by the height
of the content in the other rows. To avoid showing a stretched image, we set the minimum
height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 */
.notification-with-image {
min-height: 159px;
color: white;
}
#notification-scrollview {
max-height: 10em;
}
#notification-scrollview > .top-shadow, #notification-scrollview > .bottom-shadow {
height: 1em;
}
#notification-scrollview:ltr > StScrollBar {
padding-left: 6px;
}
#notification-scrollview:rtl > StScrollBar {
padding-right: 6px;
}
#notification-body {
spacing: 5px;
}
#notification-actions {
spacing: 10px;
}
.notification-button {
border-radius: 5px;
padding: 4px 8px 5px;
}
.notification-button:focus {
padding: 3px 8px 4px;
}
.notification-icon-button {
border-radius: 5px;
padding: 5px;
}
.notification-icon-button:focus {
padding: 4px;
}
.notification-icon-button > StIcon {
icon-size: 36px;
}
#notification StEntry {
padding: 4px;
border-radius: 4px;
color: #a8a8a8;
selected-color: black;
border: 1px solid rgba(245,245,245,0.2);
background-gradient-direction: vertical;
background-gradient-start: rgb(200,200,200);
background-gradient-end: white;
transition-duration: 300;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6);
caret-color: #a8a8a8;
caret-size: 1px;
}
#notification StEntry:focus {
border: 1px solid #8b8b8b;
color: #333333;
background-gradient-direction: vertical;
background-gradient-start: rgb(200,200,200);
background-gradient-end: white;
caret-color: #545454;
selection-background-color: #808080;
}
/* ===================================================================
* Alt Tab
* ===================================================================*/
#altTabPopup {
padding: 8px;
spacing: 16px;
}
.switcher-list {
background: rgba(80,80,80,0.8);
border: 2px solid #a5a5a5;
border-radius: 8px;
padding: 20px;
font-size: 9pt;
color: white;
text-shadow: black 0px 0px 2px;
}
.switcher-list-item-container {
spacing: 8px;
}
.thumbnail-scroll-gradient-left {
background-gradient-direction: horizontal;
background-gradient-start: rgba(51, 51, 51, 1.0);
background-gradient-end: rgba(51, 51, 51, 0);
border-radius: 24px;
border-radius-topright: 0px;
border-radius-bottomright: 0px;
width: 60px;
}
.thumbnail-scroll-gradient-right {
background-gradient-direction: horizontal;
background-gradient-start: rgba(51, 51, 51, 0);
background-gradient-end: rgba(51, 51, 51, 1.0);
border-radius: 24px;
border-radius-topleft: 0px;
border-radius-bottomleft: 0px;
width: 60px;
}
.switcher-list .item-box {
padding: 8px;
border-radius: 8px;
}
.switcher-list .item-box:outlined {
padding: 6px;
border: 2px solid rgba(85,85,85,1.0);
}
.switcher-list .item-box:selected {
background: rgba(255,255,255,0.33);
}
.switcher-list .thumbnail-box {
padding: 2px;
spacing: 4px;
}
.switcher-list .thumbnail {
width: 256px;
}
.switcher-list .separator {
width: 1px;
background: rgba(255,255,255,0.33);
}
.ripple-box {
width: 104px;
height: 104px;
background-image: url("corner-ripple.png");
}
.ripple-box:rtl {
background-image: url("corner-ripple.png");
}
.switcher-arrow {
border-color: rgba(0,0,0,0);
color: #808080;
}
.switcher-arrow:highlighted {
border-color: rgba(0,0,0,0);
color: white;
}
.switcher-preview-backdrop {
background-color: rgba(25,25,25,0.65);
}
/* ===================================================================
* Modal dialogs
* ===================================================================*/
.modal-dialog {
font-size: 12pt;
border-radius: 24px;
background-color: rgba(85, 85, 85, 0.9);
border: 2px solid #868686;
color: #babdb6;
padding-right: 42px;
padding-left: 42px;
padding-bottom: 30px;
padding-top: 30px;
}
.modal-dialog-button-box {
spacing: 21px;
padding-top: 21px;
}
.modal-dialog-button {
border-radius: 18px;
font-size: 11pt;
color: white;
margin-left: 10px;
margin-right: 10px;
padding: 4px 32px 5px;
}
.modal-dialog-button:disabled {
color: rgb(60, 60, 60);
}
.modal-dialog-button:focus {
padding: 3px 31px 4px;
}
/* Info OSD popup */
.info-osd {
font-size: 18pt;
border-radius: 24px;
background-color: rgba(85, 85, 85, 0.9);
border: 2px solid #868686;
color: #babdb6;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
}
/* ===================================================================
* Run dialog
* ===================================================================*/
.run-dialog-label {
font-size: 9pt;
color: white;
padding-bottom: 15px;
}
.run-dialog-error-label {
font-size: 9pt;
color: white;
}
.run-dialog-error-box {
padding-top: 15px;
spacing: 5px;
}
.run-dialog-completion-box {
padding-left: 15px;
font-size: 10px;
}
.run-dialog-entry {
font-size: 10.5pt;
font-weight: bold;
width: 23em;
color: white;
selection-background-color: white;
selected-color: black;
}
.run-dialog {
border-radius: 16px;
padding-right: 21px;
padding-left: 21px;
padding-bottom: 0;
padding-top: 15px;
}
.lightbox {
background-color: rgba(0, 0, 0, 0.4);
}
/* CinnamonMountOperation Dialogs */
.cinnamon-mount-operation-icon {
icon-size: 48px;
}
.mount-password-reask {
color: red;
}
.show-processes-dialog,
.mount-question-dialog {
spacing: 24px;
}
.show-processes-dialog-subject,
.mount-question-dialog-subject {
font-size: 12pt;
font-weight: bold;
color: #666666;
padding-top: 10px;
padding-left: 17px;
padding-bottom: 6px;
}
.show-processes-dialog-subject:rtl,
.mount-question-dialog-subject:rtl {
padding-left: 0px;
padding-right: 17px;
}
.show-processes-dialog-description,
.mount-question-dialog-description {
font-size: 10pt;
color: white;
padding-left: 17px;
width: 28em;
}
.show-processes-dialog-description:rtl,
.mount-question-dialog-description:rtl {
padding-right: 17px;
}
.show-processes-dialog-app-list {
font-size: 10pt;
max-height: 200px;
padding-top: 24px;
padding-left: 49px;
padding-right: 32px;
}
.show-processes-dialog-app-list:rtl {
padding-right: 49px;
padding-left: 32px;
}
.show-processes-dialog-app-list-item {
color: #ccc;
}
.show-processes-dialog-app-list-item:hover {
color: white;
}
.show-processes-dialog-app-list-item:ltr {
padding-right: 1em;
}
.show-processes-dialog-app-list-item:rtl {
padding-left: 1em;
}
.show-processes-dialog-app-list-item-icon:ltr {
padding-right: 17px;
}
.show-processes-dialog-app-list-item-icon:rtl {
padding-left: 17px;
}
.show-processes-dialog-app-list-item-name {
font-size: 10pt;
}
/* ===================================================================
* Magnifier
* ===================================================================*/
.magnifier-zoom-region {
border: 2px solid rgba(128, 0, 0, 1);
}
.magnifier-zoom-region.full-screen {
border-width: 0px;
}
/* ===================================================================
* On screen keyboard
* ===================================================================*/
#keyboard {
background-color: #555555;
}
.keyboard-layout {
spacing: 10px;
padding: 10px;
}
.keyboard-row {
spacing: 15px;
}
.keyboard-key {
min-height: 30px;
min-width: 30px;
background-gradient-start: rgba(255,245,245,0.4);
background-gradient-end: rgba(105,105,105,0.1);
background-gradient-direction: vertical;
font-size: 14pt;
font-weight: bold;
border-radius: 10px;
border: 2px solid #a0a0a0;
color: white;
}
.keyboard-key:grayed {
color: #808080;
border-color: #808080;
}
.keyboard-key:checked,
.keyboard-key:hover {
background: #303030;
border: 3px solid white;
}
.keyboard-key:active {
background: #808080;
}
.keyboard-subkeys {
color: white;
padding: 5px;
-arrow-border-radius: 10px;
-arrow-background-color: #090909;
-arrow-border-width: 2px;
-arrow-border-color: white;
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: 5px;
}
/* ###################################################################
* Cinnamon Specific Section
* ###################################################################*/
/* ===================================================================
* Menu (menu.js)
* ===================================================================*/
/* Main menu title */
/* menu-background allows the menu applet to be themed separately from other applet menus */
.menu-background {
}
.menu-favorites-box {
padding: 0.8em;
border: 1px solid #666;
border-radius: 8px;
background-gradient-direction: vertical;
background-gradient-start: rgba(85,85,85,0.8);
background-gradient-end: rgba(85,85,85,0.2);
transition-duration: 300;
}
.menu-favorites-button {
padding: 0.8em;
}
.menu-favorites-button:hover {
color: white;
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0.2);
background-gradient-end: rgba(255,255,255,0.08);
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.06);
border-radius: 4px;
}
.menu-categories-box {
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
}
.menu-applications-inner-box {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}
.menu-applications-outer-box {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}
.menu-application-button {
padding-top: 7px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
}
.menu-application-button:highlighted {
/* This style is used in menu application buttons for applications which were newly installed */
font-weight: bold;
}
.menu-application-button-selected {
padding-top: 7px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
color: white;
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0.2);
background-gradient-end: rgba(255,255,255,0.08);
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.06);
border-radius: 4px;
}
.menu-application-button-selected:highlighted {
/* This style is used in menu application buttons for applications which were newly installed */
font-weight: bold;
}
.menu-application-button-label:ltr {
padding-left: 5px;
}
.menu-application-button-label:rtl {
padding-right: 5px;
}
.menu-category-button {
padding-top: 7px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
}
.menu-category-button-greyed {
padding-top: 7px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
color: #9C9C9C;
font-style: italic;
}
.menu-category-button-greyed StIcon {
opacity: 0.5;
}
.menu-category-button-selected {
padding-top: 7px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
color: white;
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0.2);
background-gradient-end: rgba(255,255,255,0.08);
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.06);
border-radius: 4px;
}
.menu-category-button-label:ltr {
padding-left: 5px;
}
.menu-category-button-label:rtl {
padding-right: 5px;
}
.menu-category-button-selected:hover {
}
/* Name and description of the currently hovered item in the menu
* This appears on the bottom right hand corner of the menu*/
.menu-selected-app-box {
padding-right: 30px;
padding-left: 28px;
text-align: right;
height: 30px;
}
.menu-selected-app-box:rtl {
padding-top: 10px;
height: 30px;
}
.menu-selected-app-title {
font-weight: bold;
}
.menu-selected-app-description {
max-width: 150px;
}
.menu-top-box {
spacing: 10px;
}
.menu-systembuttons-box {
}
.menu-search-box:ltr {
padding-left: 30px;
}
.menu-search-box:rtl {
padding-right: 30px;
}
#menu-search-entry {
padding: 5px;
border-radius: 4px;
color: rgb(128, 128, 128);
border: 2px solid rgba(245,245,245,0.2);
background-gradient-start: rgba(5,5,6,0.1);
background-gradient-end: rgba(254,254,254,0.1);
background-gradient-direction: vertical;
selected-color: black;
caret-color: rgb(128, 128, 128);
caret-size: 1px;
width: 250px;
height: 15px;
transition-duration: 300;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6);
}
#menu-search-entry:focus,
#menu-search-entry:hover {
border: 2px solid rgb(136,138,133);
background-gradient-start: rgb(200,200,200);
background-gradient-end: white;
background-gradient-direction: vertical;
}
#menu-search-entry:hover {
transition-duration: 300;
}
#menu-search-entry:focus {
color: rgb(64, 64, 64);
font-weight: bold;
transition-duration: 0;
}
.menu-search-entry-icon {
icon-size: 1em;
color: #8d8f8a;
}
/* Context menu (at the moment only for favorites) */
.menu-context-menu {
}
/* ===================================================================
* Window list (windowList.js)
* ===================================================================*/
.window-list-box {
spacing: 2px;
padding-left: 10px;
padding-top: 0px;
}
.window-list-box.vertical {
spacing: 3px;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
.window-list-box.vertical #appMenuIcon {
padding-top: 3px;
}
.window-list-item-box {
color: rgba(255,255,255,1.0);
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0.05);
background-gradient-end: rgba(255,255,255,0.2);
box-shadow: inset 0px 0px 1px 1px rgba(170,170,170,0.5);
border-radius: 2px 2px 0px 0px;
transition-duration: 100;
spacing: 0.5em;
}
.window-list-item-box.top {
border-radius: 0px 0px 2px 2px;
}
.window-list-item-box.left {
border-radius: 0px 2px 2px 0px;
}
.window-list-item-box.right {
border-radius: 2px 0px 0px 2px;
}
.window-list-item-box.top,
.window-list-item-box.bottom {
padding: 0 0.5em;
}
.window-list-item-box:active,
.window-list-item-box:checked,
.window-list-item-box:focus,
.window-list-item-box:running {
background-gradient-direction: vertical;
background-gradient-start: rgba(226,226,226,0.5);
background-gradient-end: rgba(122,122,122,0.5);
box-shadow: inset 0px 0px 1px 1px rgba(170,170,170,0.5);
}
.window-list-item-box:hover {
box-shadow: inset 0px 0px 1px 1px rgba(170,170,170,1.0);
}
.window-list-item-demands-attention {
background-gradient-start: rgba(255,52,52,0.5);
background-gradient-end: rgba(255,144,144,0.5);
}
.window-list-item-box .progress {
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0.6);
background-gradient-end: rgba(255,255,255,0.3);
border-radius: 2px 2px 0px 0px;
box-shadow: inset 0px 0px 1px 1px rgba(170,170,170,0.5);
}
.panel-top .window-list-item-box .progress {
border-radius: 0px 0px 2px 2px;
}
.panel-left .window-list-item-box .progress {
border-radius: 0px 2px 2px 0px;
}
.panel-right .window-list-item-box .progress {
border-radius: 2px 0px 0px 2px;
}
.window-list-preview {
background: rgba(80,80,80,0.8);
border: 2px solid #a5a5a5;
border-radius: 8px;
font-size: 9pt;
color: white;
text-shadow: black 0px 0px 2px;
padding: 8px;
spacing: 4px;
}
/* ===================================================================
* Grouped window list (grouped-window-list@cinnamon.org)
* ===================================================================*/
.grouped-window-list-thumbnail-label {
padding-left: 4px;
}
.grouped-window-list-number-label {
z-index: 99;
text-shadow: black 1px 0px 2px;
font-size: 10px;
color:#fff;
padding: 0;
}
.grouped-window-list-badge {
border-radius: 256px;
background-color: #000000;
}
.grouped-window-list-button-label {
padding-left: 4px;
}
.grouped-window-list-thumbnail-alert {
background: rgba(255,52,52,0.3);
}
.grouped-window-list-item-box {
color: rgba(255,255,255,1.0);
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0);
background-gradient-end: rgba(255,255,255,0);
box-shadow: inset 0px 0px 1px 1px rgba(170,170,170,0);
border-radius: 2px 2px 0px 0px;
transition-duration: 100;
spacing: 0.5em;
}
.grouped-window-list-item-box.top {
border-radius: 0px 0px 2px 2px;
}
.grouped-window-list-item-box.left {
border-radius: 0px 2px 2px 0px;
}
.grouped-window-list-item-box.right {
border-radius: 2px 0px 0px 2px;
}
.grouped-window-list-item-box.top,
.grouped-window-list-item-box.bottom {
padding: 0 0.5em;
}
.grouped-window-list-item-box:checked,
.grouped-window-list-item-box:active:hover {
background-gradient-direction: vertical;
background-gradient-start: rgba(226,226,226,0.5);
background-gradient-end: rgba(122,122,122,0.5);
box-shadow: inset 0px 0px 1px 1px rgba(170,170,170,0.8);
}
.grouped-window-list-item-box:focus {
background-gradient-direction: vertical;
background-gradient-start: rgba(226,226,226,0.5);
background-gradient-end: rgba(122,122,122,0.3);
box-shadow: inset 0px 0px 1px 1px rgba(170,170,170,0.9);
}
.grouped-window-list-item-box:active:focus:hover,
.grouped-window-list-item-box:focus:hover {
background-gradient-direction: vertical;
background-gradient-start: rgba(226,226,226,0.3);
background-gradient-end: rgba(122,122,122,0.3);
box-shadow: inset 0px 0px 1px 1px rgba(170,170,170,1.0);
}
.grouped-window-list-item-box:hover {
box-shadow: inset 0px 0px 1px 1px rgba(170,170,170,0.5);
}
.grouped-window-list-item-box:active {
box-shadow: inset 0px 0px 1px 1px rgba(170,170,170,0.3);
}
.grouped-window-list-item-demands-attention {
background-gradient-start: rgba(255,52,52,0.5);
background-gradient-end: rgba(255,144,144,0.5);
}
.grouped-window-list-item-box .progress {
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0.6);
background-gradient-end: rgba(255,255,255,0.3);
border-radius: 2px 2px 0px 0px;
box-shadow: inset 0px 0px 1px 1px rgba(170,170,170,0.5);
}
.panel-top .grouped-window-list-item-box .progress {
border-radius: 0px 0px 2px 2px;
}
.panel-left .grouped-window-list-item-box .progress {
border-radius: 0px 2px 2px 0px;
}
.panel-right .grouped-window-list-item-box .progress {
border-radius: 2px 0px 0px 2px;
}
.grouped-window-list-thumbnail-menu {
}
.grouped-window-list-thumbnail-menu .item-box {
padding: 10px;
border-radius: 8px;
spacing: 4px;
}
.grouped-window-list-thumbnail-menu .item-box:outlined {
padding: 6px;
border: 2px solid rgba(165, 165, 165, 0.7)
}
.grouped-window-list-thumbnail-menu .item-box:selected {
background: rgba(255,255,255,0.33);
}
.grouped-window-list-thumbnail-menu .thumbnail {
width: 256px;
}
.grouped-window-list-thumbnail-menu .separator {
width: 1px;
background: rgba(255,255,255,0.33);
}
/* ===================================================================
* Sound Applet (sound@cinnamon.org)
* ===================================================================*/
.sound-player StButton {
width: 18px;
height: 18px;
padding: 5px;
color: #aaa;
}
.sound-player StButton:small {
width: 16px;
height: 16px;
}
.sound-player StButton:small StIcon {
icon-size: 1.2em;
}
.sound-player StButton StIcon {
icon-size: 1.5em;
}
.sound-player StButton:hover, .sound-player StButton:active {
color: #fff;
}
.sound-player .slider {
height: 0.5em;
-slider-height: 0.5em;
-slider-background-color: #3c3c3c;
-slider-border-color: rgba(0,0,0,0);
-slider-active-background-color: #a5a5a5;
-slider-active-border-color: rgba(0,0,0,0);
-slider-border-width: 0px;
-slider-handle-radius: 0px;
}
.sound-player StBoxLayout {
spacing: 0.5em;
}
.sound-player>StBoxLayout {
padding: 0 16px 8px;
}
.sound-player-overlay {
width: 300px;
padding: 12px 16px;
spacing: 0.5em;
background-color: rgba(80,80,80,0.9);
color: #ffffff;
border-top: 2px solid #a5a5a5;
}
.sound-player-overlay StButton {
border-radius: 5px;
padding: 8px;
}
.sound-player-overlay StButton > StIcon {
icon-size: 16px;
}
.sound-player-overlay StBoxLayout {
padding-top: 2px;
}
.sound-player-generic-coverart {
background: rgba(0,0,0,0.2);
}
/* ===================================================================
* Spacer applet
* ===================================================================*/
.spacer-box {
border-radius: 1px;
border: 1px solid transparent;
}
.spacer-box:highlight {
background-color: #aa5555;
}
.spacer-box.vertical {
}
.spacer-box.edit-mode {
border-radius: 1px;
border: 1px symbolic;
}
/* ===================================================================
* Workspace Switcher applet (workspaceSwitcher.js)
* ===================================================================*/
/* Controls the styling when using the "Simple buttons" option */
.panel-top .workspace-switcher,
.panel-bottom .workspace-switcher {
padding: 0 3px;
}
.panel-left .workspace-switcher,
.panel-right .workspace-switcher {
padding: 3px;
}
.workspace-button {
color: #cccccc;
border: 1px;
border-color: #a6a6a6;
padding: 0 8px;
transition-duration: 300;
}
.vertical .workspace-button {
padding: 4px 0;
}
.workspace-button:outlined {
background: #cccccc;
color: #555555;
box-shadow: inset 0px 0px 8px 1px rgba(255,255,255, 0.7);
}
.workspace-button:shaded {
color: #13191c;
}
/* Controls the style when using the "Visual representation" option */
.workspace-graph {
padding: 3px;
spacing: 3px;
}
.workspace-graph .workspace {
border: 1px solid #666;
background-gradient-direction: vertical;
background-gradient-start: #222;
background-gradient-end: #4d4d4d;
}
.workspace-graph .workspace:active {
border: 1px solid #ccc;
background-gradient-direction: vertical;
background-gradient-start: #111;
background-gradient-end: #3d3d3d;
}
.workspace-graph .workspace .windows {
-active-window-background: rgba(140, 140, 140, 1.0);
-active-window-border: rgba(0, 0, 0, 0.7);
-inactive-window-background: rgba(140, 140, 140, 1.0);
-inactive-window-border: rgba(0, 0, 0, 0.7);
}
.workspace-graph .workspace:active .windows {
-active-window-background: rgba(255, 255, 255, 1.0);
-active-window-border: rgba(0, 0, 0, 0.9);
-inactive-window-background: rgba(140, 140, 140, 1.0);
-inactive-window-border: rgba(0, 0, 0, 0.7);
}
/* ===================================================================
* Panel Launchers Applet (panelLaunchers.js)
* ===================================================================*/
.panel-launchers {
padding-left: 7px;
spacing: 2px;
}
.panel-launchers.vertical {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0px;
padding-right: 0px;
spacing: 3px;
}
.launcher {
padding-left: 1px;
padding-right: 1px;
border-bottom-width: 1px;
transition-duration: 300;
}
.launcher .icon-box {
padding-top: 2px;
}
.panel-launchers.vertical .launcher .icon-box {
padding-top: 0;
}
.panel-launchers .launcher:hover {
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0.0);
background-gradient-end: rgba(255,255,255,0.2);
border: 0px solid rgba(255,255,255,0.5);
border-bottom-width: 1px;
}
/* ===================================================================
* Overview corner
* ===================================================================*/
#overview-corner {
background-image: url("overview.png");
}
#overview-corner:hover {
background-image: url("overview-hover.png");
}
/* ===================================================================
* Applets (applet.js)
* ===================================================================*/
.applet-separator {
padding: 5px 4px;
}
.applet-separator-line {
width: 2px;
background: rgba(255,255,255,0.5);
}
.applet-separator-line-vertical {
border: 0px solid rgba(255,255,255,0.5);
border-bottom-width: 2px;
}
.applet-box {
padding-left: 3px;
padding-right: 3px;
color: #ccc;
text-shadow: black 0px 0px 2px;
transition-duration: 300;
}
.panel-top .applet-box,
.panel-bottom .applet-box {
spacing: 3px;
}
.applet-box:checked,
.applet-box:hover {
color: #fff;
}
.applet-box.vertical {
padding-left: 0px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
}
.applet-box.vertical:hover {
}
.applet-box:highlight {
background-color: #aa5555;
}
.applet-label {
font-weight: bold;
color: #ccc;
}
.applet-box:checked > .applet-label,
.applet-box:hover > .applet-label {
color: #fff;
text-shadow: white 0px 0px 5px;
}
.applet-box.vertical:hover > .applet-label {
}
.applet-icon { /* symbolic icons will use system-status-icon instead */
color: #ccc;
icon-size: 22px;
}
.applet-box:checked .applet-icon,
.applet-box:hover .applet-icon {
color: #fff;
icon-shadow: white 0px 0px 3px;
}
.applet-box.vertical:hover .applet-icon {
}
/* ===================================================================
* Desklets (desklet.js)
* ===================================================================*/
.desklet {
color: #fff;
}
.desklet:highlight, .desklet:highlight-with-borders, .desklet:highlight-with-borders-and-header {
background-color: #aa5555;
}
.desklet-with-borders {
border: 2px solid #a5a5a5;
background-color: rgba(80, 80, 80, 0.8);
color: #fff;
border-radius-bottomleft: 12px;
border-radius-bottomright: 12px;
border-radius-topleft: 12px;
border-radius-topright: 12px;
}
.desklet-with-borders-and-header {
border: 2px solid #a5a5a5;
background-color: rgba(80, 80, 80, 0.8);
color: #fff;
border-top: 1px;
border-radius-bottomleft: 12px;
border-radius-bottomright: 12px;
}
.desklet-header {
border-radius-topleft: 12px;
border-radius-topright: 12px;
font-size: 10.5pt;
border: 2px solid #a5a5a5;
border-bottom: 0px;
background-color: rgba(80, 80, 80, 0.8);
color: #fff;
padding: 6px;
}
.desklet-drag-placeholder {
border: 2px solid #6daa00;
background-color: rgba(109,170, 0, 0.3);
}
/* ===================================================================
* Clock Desklet (desklet.js)
* ===================================================================*/
.clock-desklet-label {
}
/* ===================================================================
* Workspace OSD
* ===================================================================*/
.workspace-osd {
color: #ffffff;
text-shadow: black 5px 5px 5px;
font-weight: bold;
font-size: 48pt;
}
.expo-workspaces-name-entry {
padding: 5px;
border-radius: 4px;
color: rgb(200, 200, 200);
border: 2px solid rgb(136,138,133);
background-gradient-start: rgb(128,128,128);
background-gradient-end: rgb(85,85,85);
background-gradient-direction: vertical;
selected-color: black;
caret-color: rgb(128, 128, 128);
caret-size: 1px;
width: 250px;
height: 1em;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6);
text-align: center;
}
.expo-workspaces-name-entry#selected {
background-gradient-start: rgb(200,200,200);
background-gradient-end: white;
font-weight: bold;
color: rgb(0, 0, 0);
}
.expo-workspaces-name-entry:focus {
color: rgb(0, 0, 0);
font-weight: bold;
font-style: italic;
transition-duration: 300;
}
/* ===================================================================
* Notification Applet
* ===================================================================*/
.notification-applet-padding {
padding: .5em 1em;
}
.notification-applet-container {
max-height: 100px;
}
/* Check Boxes */
.check-box CinnamonGenericContainer {
spacing: .2em;
}
.check-box StBin,
.check-box:focus StBin {
width: 16px;
height: 16px;
background-image: url("checkbox-off.svg");
}
.check-box:checked StBin,
.check-box:focus:checked StBin {
background-image: url("checkbox.svg");
}
.check-box StLabel {
font-weight: normal;
}
.radiobutton CinnamonGenericContainer {
spacing: .2em;
height: 18px;
padding-top: 2px;
}
.radiobutton StBin,
.radiobutton:focus StBin {
width: 16px;
height: 16px;
background-image: url("radiobutton-off.svg");
border-radius: 15px;
}
.radiobutton:checked StBin,
.radiobutton:focus:checked StBin {
background-image: url("radiobutton.svg");
}
.radiobutton StLabel {
padding-top: 4px;
font-size: 0.9em;
box-shadow: none;
}
.flashspot {
background-color: white;
}
/* Media keys OSD popup */
.osd-window {
background: rgba(80,80,80,0.8);
border: 2px solid #a5a5a5;
border-radius: 8px;
padding: 20px;
color: white;
spacing: 1em;
}
.osd-window .level {
height: 0.7em;
border-radius: 0.3em;
background-color: rgba(190,190,190,0.2);
}
.osd-window .level-bar {
border-radius: 0.3em;
background-color: rgba(190,190,190,0.8);
}
.tile-preview,
.tile-hud {
background-color: rgba(85, 85, 85, 0.5);
border: 2px solid rgba(134, 134, 134, 0.8);
}
.tile-preview.snap,
.tile-hud.snap {
background-color: rgba(134, 134, 170, 0.5);
border: 2px solid rgba(85, 85, 85, 0.8);
}
.tile-hud:top {
border-top-width: 0px;
border-radius: 0px 0px 8px 8px;
}
.tile-hud:bottom {
border-bottom-width: 0px;
border-radius: 8px 8px 0px 0px;
}
.tile-hud:left {
border-left-width: 0px;
border-radius: 0px 8px 8px 0px;
}
.tile-hud:right {
border-right-width: 0px;
border-radius: 8px 0px 0px 8px;
}
.tile-hud:top-left {
border-top-width: 0px;
border-left-width: 0px;
border-radius: 0px 0px 8px 0px;
}
.tile-hud:top-right {
border-top-width: 0px;
border-right-width: 0px;
border-radius: 0px 0px 0px 8px;
}
.tile-hud:bottom-left {
border-bottom-width: 0px;
border-left-width: 0px;
border-radius: 0px 8px 0px 0px;
}
.tile-hud:bottom-right {
border-bottom-width: 0px;
border-right-width: 0px;
border-radius: 8px 0px 0px 0px;
}
/* ===================================================================
* Systray Applet
*
* .systray is for theming to be applied to the systray as a whole
* .applet-box is used for indicators (not tray icons) within the systray
* tray icons are not themed
* ===================================================================*/
.systray {
spacing: 5px;
}