/* */
/* */
/* DERMODEX CINNAMON OVERRIDES */


stage {
  font-size         : 0.8em;
}

.cinnamon-link {
  color: #3281ea;
}

.cinnamon-link:hover {
  color: #3281ea;
}

#Tooltip {
    border-radius   : 8px;
    padding         : 5px 12px;
    margin          : 0.5em;
    font-weight     : normal;
    text-align      : center;
    font-size       : 12pt;

    border          : 1px solid #202020;
    background-color: rgba(54, 54, 54, 1);
    color           : #ffffff;
    font-size       : 1em;
    font-weight     : normal;
    text-align      : center;
    
    box-shadow      : 0 5px 12px rgba(0, 0, 0, 0.35);
    
}

/* TOGGLES AND CHECKRADIOS */
.toggle-switch,
.popup-menu-item:active .toggle-switch{
    background-image: url("assets/dermodex/switch-off-outline.svg");
    background-position: 10px 0px;
    width           : 60px;
    height          : 30px;
}

.toggle-switch:checked,
.popup-menu-item:active .toggle-switch:checked {
  background-image: url("assets/dermodex/switch-on-outline.svg");
}


/* SCROLLBARS */
StScrollBar {
    padding             : 0px 0px; 
}
StScrollBar StBin#trough {
    background-color    : rgba(64, 64, 64, 0); 
}
StScrollBar StButton#vhandle, 
StScrollBar StButton#hhandle {
    background-color    : #3281ea;
    border-radius       : 8px; 
}
StScrollBar StButton#vhandle:hover, 
StScrollBar StButton#hhandle:hover {
    background-color    : #3281ea; 
}

/* CALENDAR */
.calendar,
.calendar .calendar-main-box,
.calendar .calendar-event-time-present {
    color               : #ffffff;
}

.calendar-events-main-box {
    background          : #011a3b;
    padding             : 2em;
    border-radius       : 8px;
    min-width           : 20em;
}

.calendar-events-event-container {
    background          : transparent;
}

.calendar-event-color-strip {
    background          : transparent;
    width               : 0px;
}
.calendar-event-button {
    padding             : 8px;
    border              : 1px solid #3281ea;
    border-radius       : 6px;
}
.calendar-event-button:hover {
    background          : transparent;
    border              : 1px solid #3281ea;
    
}

.calendar-event-row-content {
    border-radius       : 0px;
    padding-left        : 8px;
}


.calendar-event-row-content:hover {
    background          : transparent;
}
.calendar-event-time-past{
    color               : #eeeeee;
}

.calendar-event-time-future{
    color               : #ffffff;
}

.calendar-event-time-present:all-day {
    color               : #a0bfe8;
}

.calendar-change-month-back:hover {
  background-image: url("assets/calendar-arrow-left-hover.svg");
}

.calendar-change-month-forward:hover {
  background-image: url("assets/calendar-arrow-right-hover.svg");
}

.calendar-today,
.calendar-today:active,
.calendar-today:focus,
.calendar-today:hover,
.calendar-today:selected  {
    dd-calendar-today-color: #ffffff;
    background-color: #3281ea !important;
}

.calendar-events-main-box {
  background-gradient-direction: vertical;
  dd-calendar-events-main-box-background-gradient-start: rgba(255, 255, 255, 0.04);
  dd-calendar-events-main-box-background-gradient-end: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 1);
}


/* PANEL */
#panel {
    padding                 : 0px;
    background-repeat       : no-repeat;
    background-size         : cover;
    dd-panel-background-position : 0px -700px;
    dd-panel-background-image : url(~/.local/share/dermodex/panel_blur.png);
    dd-panel-background-color : rgba(1,16,36,0.9);
}

#panel:highlight {
    background-color: rgba(255, 255, 255, 0.5);
}

#panelLeft {
    spacing         : 0px;
}

.panelLeft,
.panelRight {
    spacing         : 0px;
    margin-left     : 16px;
    margin-right    : 16px;
    
    border-radius   : 32px;
    dd-panel-inner-background-color : rgba(1,16,36,0.9);
}

.panelLeft {
    padding-left    : 16px;
}

.panelRight {
    padding-right   : 16px;
    padding-left    : 16px;
}


#panelLeft:dnd,
#panelCenter:dnd,
#panelRight:dnd {
    background-gradient-direction   : vertical;
    background-gradient-end         : rgba(255, 255, 255, 0.05);
    background-gradient-start       : rgba(255, 255, 255, 0.2);
    dd-panel-window-border-radius : 64px;
    border          : 1px solid #ffffff;
}

/* SYSTRAY */
.panel-top .applet-box,
.panel-bottom .applet-box {
    spacing         : 8px;
    padding-left    : 8px;
    padding-right   : 8px; 
}

.applet-separator {
    padding         : 4px 4px; 
}

.system-status-icon {
  icon-size: 22px;
}


/* START MENU BUTTON */
.applet-box {
    color: #eeeeee !important;
    margin-left : 2px;
}
.applet-box:hover,
.applet-box:hover .applet-label {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0);
}

.applet-box:checked, 
.applet-box:checked:hover,
.applet-box:checked .applet-label,
.applet-boxchecked:hover .applet-label {
  dd-menu-button-hover : #ffffff;
  background-color: rgba(255, 255, 255, 0);
}


/* START MENU */
.menu {
    margin-left         : 20px;
    margin-right        : 20px;
    margin-bottom       : 0px;
}
.menu-background {
    /*dd-menu-background-color : rgba(1,16,36,0.9);*/
    dd-menu-background-image : url(~/.local/share/dermodex/menu_blur.jpg);
    background-position : 0px 0px;
    background-repeat   : no-repeat;
    background-size     : 1000px 1000px;
    border              : 1px solid #202020;
    /*border-left-width   : 32px;*/
}

/* WINDOW LIST */
.window-list-box {
    margin-right    : 16px;
    margin-left     : 16px;
}
.window-list-item-box {
    padding         : 4px;
    border-radius   : 8px;
}

.window-list-item-box:focus {
    border-color    : #3281ea;
    color           : #a0bfe8;
}

.window-list-preview {
  color             : #a0bfe8;
  background-color  : rgba(1,16,36,0.9);
}

.window-list-item-box .progress,
.grouped-window-list-item-box .progress {
    background-gradient-start : #cccccc;
    background-gradient-end   : #cccccc;
    dd-panel-window-border-radius : 64px;
}

.window-list-item-demands-attention,
.grouped-window-list-item-demands-attention {
    background-gradient-start : #000000;
    background-gradient-end   : #000000;
    dd-panel-window-border-radius : 64px;
}

/* GROUPED WINDOW LIST */
.grouped-window-list-box {
    spacing         : 4px;
}
.grouped-window-list-box.vertical {
    spacing         : 4px;
}

.grouped-window-list-item-box {
    color           : #eeeeee;
    background-color: transparent;
    background-image: url("assets/grouped-window-dot.svg");
    min-width       : 64px;
    dd-panel-window-border-radius : 64px; 
    border          : 0px solid transparent;
    padding-left    : 8px;
    padding-right   : 8px;
    
    background-size : 12px 12px;
    background-position: 26px 42px;
}


.grouped-window-list-item-box:active {
    color           : #ffffff;
    background-color: transparent;
    background-image: url("assets/grouped-window-dot.svg");
}

.grouped-window-list-item-box:focus {
    /*background-color: rgba(255, 255, 255, 0.15);*/
    background-color: transparent;
    background-image: url("assets/grouped-window-dot-active.svg");
    color           : #3281ea;
}

.grouped-window-list-thumbnail-menu .item-box:outlined {
    background-color: transparent;
    color           : #eeeeee;
}

.grouped-window-list-item-box.top, 
.grouped-window-list-item-box.bottom {
    padding-left    : 4px;
    padding-right   : 4px;
}

.grouped-window-list-button-label {
    padding-left    : 8px;
}

.grouped-window-list-badge {
  background-color  : #3281ea;
  font-size         : 9pt;
}

.grouped-window-list-item-demands-attention {
    background-gradient-start   : #666666;
    background-gradient-end     : #666666;
    dd-panel-window-border-radius : 64px;
}

.grouped-window-list-thumbnail-menu .item-box:outlined {
    background-color    : rgba(255, 255, 255, 0.9);
    color               : rgba(0, 0, 0, 0.7);
}

.grouped-window-list-thumbnail-menu .item-box:hover {
    background-color    : rgba(255, 255, 255, 0.9);
    color               : rgba(0, 0, 0, 0.7);
}

.grouped-window-list-thumbnail-menu .item-box {

    background-color: rgba(255, 255, 255, 0.9);
    
    padding         : 16px;
    border-radius   : 8px;
    border          : 4px solid #ffffff;
    spacing         : 8px;
    margin          : 4px 4px 0px 4px;
    color           : rgba(0, 0, 0, 0.7);
    
    box-shadow      : 0 5px 12px rgba(0, 0, 0, 0.9);
}

.grouped-window-list-thumbnail-menu .thumbnail {
    border          : 2px solid #ffffff;
    border-radius   : 4px;
    width           : auto;
    height          : 100px;
}






#menu-search-entry {
    width               : 250px;
    height              : 15px;
    font-weight         : normal;
    caret-color         : #000000;
}

#menu-search-entry:focus {
    box-shadow      : inset 0 0 0 2px transparent;
}

.menu-search-entry-icon {
    icon-size       : 1em;
    color           : #ffffff;
}

.menu-favorites-box {
  padding           : 8px;
  background-color  : rgba(64, 64, 64, 0.85);
  background-gradient-direction: vertical;
  dd-fav-background-gradient-end: rgba(50,129,234,0.45);
  dd-fav-background-gradient-start: rgba(91,147,222,0.15);
  border            : 1px solid #202020;
  border-radius     : 64px; 
}

.menu-favorites-button {
  padding           : 0.5em; 
}
.menu-favorites-button:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius   : 64px;
}

.menu-categories-box {
    padding         : 20px 30px;
    font-size       : 15pt;
}

.menu-category-button,
.menu-category-button-greyed,
.menu-category-button-selected,
.menu-category-button-hover {
    padding         : 10px;
    background-color: transparent;
    border-radius   : 0px;
    border-left     : 2px;
    border-style    : solid;
    border-color    : transparent;
}

.menu-category-button {
    background      : transparent;
}

.menu-category-button-greyed {
    color           : #666666;
    border-color    : #666666;
}

.menu-category-button-hover,
.menu-category-button-selected {
    color           : #ffffff;
    border-color    : #011a3b;
}


.menu-applications-box {
    padding         : 10px 15px;
    font-size       : 12pt;
}

.menu-applications-inner-box .menu-applications-outer-box {
  padding           : 4px 4px 0px 8px; 
}

.menu-applications-inner-box {
    background-repeat   : no-repeat;
    background-size     : 75px 75px;
    background-position : 210px 350px;
    background-image    : url(~/.face);
}

.menu-application-button-selected,
.menu-application-button {
    padding             : 8px;
    border-radius       : 8px;
}

.menu-application-button {
    border              : 1px solid transparent;
}

.menu-application-button-selected {
  selected-color        : #ffffff;
  dd-menu-selected-color: #ffffff;
  background-color      : #011a3b;
  border                : 1px solid #011a3b;
}
  
.menu-application-button:highlighted,
.menu-application-button-selected:highlighted {
    font-weight         : bold; 
}

/* This appears on the bottom right hand corner of the menu */
.menu-selected-app-box {
    font-size           : 0.85em;
    padding-right       : 30px;
    padding-left        : 30px;
    padding-bottom      : 30px;
    text-align          : right;
    color               : #ffffff; 
}

  
.menu StScrollView.vfade {
    -st-vfade-offset: 68px; 
}

.menu StScrollView.hfade {
    -st-vfade-offset: 68px;
}

.menu StScrollView StScrollBar {
    min-width       : 0px;
    min-height      : 0px; 
}

/* TILES */
.tile-preview, .tile-preview.snap,
.tile-hud, .tile-hud.snap {
    background-color: rgba(44, 44, 44, 0.3);
    border          : 1px solid #3281ea;
}


/* WORKSPACES */
.window-caption#selected {
  background-color  : #3281ea;
  border            : 1px solid #3281ea;
}

.workspace-switcher {
    padding-left    : 8px;
    padding-right   : 8px;
    margin-left     : 8px;
}

.workspace-button {
    border-color        : transparent;
    background-image    : url("assets/grouped-window-dot.svg");
    background-size     : 12px 12px;
    background-position : 8px 42px;
}

.panel-bottom .workspace-button,
.panel-top .workspace-button {
    padding             : 0 0.25em;
    margin              : 0 0.25em 0 0; 
}

.workspace-button:outlined {
    background-image    : url("assets/grouped-window-dot-active.svg");
    color               : #ffffff;
}

.workspace-button:hover,
.workspace-button:outlined:hover {
    background-image    : url("assets/grouped-window-dot-active.svg");
    workspace-dot-color : #3281ea;
}

.panel-top .workspace-button {
    border-top          : 2px;
    color               : #ffffff;
}
.panel-bottom .workspace-button {
    border-bottom       : 2px;
    color               : #ffffff;
}

.workspace-graph {
    padding           : 4px 12px 12px 12px;
    spacing           : 6px;
    margin-left       : 8px;
}

.workspace-graph .workspace,
.workspace-graph .workspace:active,
.workspace-graph .workspace .windows,
.workspace-graph .workspace:active .windows {
  border-radius: 2px;
}

.workspace-graph .workspace:active {
    border        : 1px solid #3281ea;
}

.expo-workspaces-name-entry:focus,
.expo-workspaces-name-entry#selected:focus {
  border: 1px solid #3281ea;
  background-color: #3281ea;
    selected-color: #3281ea; 
}

.expo-workspace-thumbnail-frame#active {
    border          : 4px solid #3281ea;
    background-color: black;
    border-radius   : 8px;
}

.expo-background {
    background-color    : rgba(64, 64, 64, 0.9);
    background-repeat   : no-repeat;
    background-size     : cover;
    background-image    : url(~/.local/share/dermodex/login_blur.jpg);
}

.workspace-osd {
    text-shadow : none;
    font-size   : 16pt;
}


/* SOUND */
.sound-player {
    width : 520px;
    font-size : 12pt;
    dd-soundwaves-background-image: url(~/.local/share/dermodex/soundwaves.png);
    background-repeat: no-repeat;
    background-size:contain;
}

.sound-player StButton {
  width: 32px;
  height: 32px;
  color: #969696;
  border: 1px solid #969696;
  border-radius: 32px; }

.sound-player StButton:hover,
.sound-player StButton:active {
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 32px; }

.sound-player StIcon {
  icon-size: 22px; 
}

.sound-player StButton:small {
  width: 32px;
  height: 32px; }

.sound-player StButton:small StIcon {
  icon-size: 1.2em; }

.sound-player StButton StIcon {
  icon-size: 1.5em; }



.sound-player .slider {
  height: 0.25em;
  -slider-height: 0.25em;
  -slider-background-color: #011024;
  -slider-border-color: #011024;
  -slider-active-background-color: #3281ea;
  -slider-active-border-color: #011024;
  -slider-border-width: 0px;
  -slider-handle-radius: 8px;}

.sound-player StBoxLayout {
  spacing: 0.5em; }

.sound-player > StBoxLayout {
  padding: 0.5em; }

.sound-player-overlay {
    width       : 486px;
    padding     : 0.7em 1em;
    height      :150px;
    background-color: rgba(17,56,107,0.9);
    color       : #ffffff; 
}

.sound-player-overlay StButton {
  padding: 0.5em;
  margin: 0px 0.5em; }

.sound-player-overlay StButton > StIcon {
  icon-size: 22px; }

.sound-player-overlay StBoxLayout {
  padding-top: 2px; }

.sound-player-generic-coverart {
  background: rgba(0, 0, 0, 0.1); }



/* NOTIFICATIONS */
#notification {
    padding         : 16px;
    margin          : 0px;
    width           : 35em;
    color           : #ffffff;
    font-size       : 12pt;
    border-radius   : 8px;
    margin-from-right-edge-of-screen: 20px;
    spacing-rows    : 10px;
    spacing-columns : 10px;
    background-color: rgba(1,16,36,0.9);
     border          : 1px solid rgba(1,16,36,0.9);
}

/*#notification StEntry {
    border          : 1px solid rgba(17,56,107,0.9);
    border-radius   : 8px;
}*/

#notification-body {
    /*background-color: rgba(255,255,255,0.1);*/
    border-radius   : 8px;
    color           : #ffffff;
}

#notification .url-highlighter {
    link-color      : #ffffff; 
}

#notification.multi-line-notification {
    background-color: rgba(17,56,107,0.9);
    border          : 2px solid rgba(50,129,234,0.9);
    border-radius   : 8px;
    
}


/* POPUP MENUS */
.popup-menu,
.popup-combo-menu {
    dd-menu-background-color : rgba(1,16,36,0.9);
    border-radius     : 8px;
    min-width : 350px;
}

.menu {
    border-radius       : 8px;
    min-width           : 350px;
    /*dd-menu-background-color : rgba(1,16,36,0.9);*/
}


.menu,
.popup-menu .popup-menu-content,
.popup-combo-menu .popup-menu-content {
    padding: 8px;
    min-width : 350px;
    dd-menu-background-color : rgba(1,16,36,0.9);
}

.menu .popup-menu-item,
.popup-menu .popup-menu-item,
.popup-combo-menu .popup-menu-item {
    padding         : 12px 16px;
    spacing         : 12px;
    border-radius   : 6px;
}

.menu-icon,
.popup-menu-icon,
.system-status-icon {
    icon-size: 22px;
}


.popup-slider-menu-item,
.slider {
    -slider-active-background-color: #3281ea;
}



/* SEARCHBOXES */
#menu-search-entry, .notification StEntry, .menu #notification StEntry, .popup-menu #notification StEntry, #notification StEntry {
  padding: 8px 16px;
  min-height: 32px;
  caret-size: 2px;
  caret-color: #3281ea;
  
    
  selection-background-color: #3281ea;
  selected-color: #000000;
  transition-duration: 300ms;
  border-radius: 4px;
  color: #000000;
  border: 2px solid transparent;
  border-radius : 32px;
  background-color: rgba(255, 255, 255, 0.15);
    
}

#menu-search-entry:focus, .notification StEntry:focus, .menu #notification StEntry:focus, .popup-menu #notification StEntry:focus, #notification StEntry:focus, #menu-search-entry:hover, .notification StEntry:hover, .menu #notification StEntry:hover, .popup-menu #notification StEntry:hover, #notification StEntry:hover {
  color: white;
    cursor: text;
  background-color: rgba(255, 255, 255, 0.15);
border : 2px solid transparent;
  border-bottom: 2px solid #ffffff;
}

#menu-search-entry:insensitive, .notification StEntry:insensitive, .menu #notification StEntry:insensitive, .popup-menu #notification StEntry:insensitive, #notification StEntry:insensitive {
  border: 2px solid transparent;
  background-color: rgba(255, 255, 255, 0.15);
  color: rgba(0, 0, 0, 0.5);
}

#menu-search-entry StIcon.capslock-warning, .notification StEntry StIcon.capslock-warning, .menu #notification StEntry StIcon.capslock-warning, .popup-menu #notification StEntry StIcon.capslock-warning, #notification StEntry StIcon.capslock-warning {
  icon-size: 16px;
  warning-color: #3281ea;
  padding: 0 6px;
}

/* KEYBOARD */
#keyboard {
    background-color    : rgba(64, 64, 64, 0.9);
    background-repeat   : no-repeat;
    background-size     : cover;
    background-image    : url(/home/lee/.local/share/dermodex/menu_blur.jpg);
}
.keyboard-key {
  border-radius: 64px; 
}

.keyboard-key:checked, 
.keyboard-key:hover,
.keyboard-key:active {
    background-color: #3281ea;
}

/* RESULTS AND ITEMS */
.run-dialog-entry,
.expo-workspaces-name-entry, 
#menu-search-entry, 
#notification StEntry,
#menu-search-entry:focus, #menu-search-entry:hover, .run-dialog-entry:focus, .run-dialog-entry:hover, #notification StEntry:focus, #notification StEntry:hover {
    font-size       : 12pt;
}




/* RUN ALT+F2 */
.run-dialog {
    border-radius       : 8px;
    background-image    : url(/home/lee/.local/share/dermodex/menu_blur.jpg);
    background-position : 0px 0px;
    background-repeat   : no-repeat;
    background-size     : 1000px 1000px;
}

.run-dialog,
.run-dialog-label,
.run-dialog-description {
    font-size       : 16pt;
}
.run-dialog-completion-box,
.run-dialog .run-dialog-entry {
    font-size       : 12pt;
}

.run-dialog .run-dialog-entry {
    background-color: rgba(255, 255, 255, 0.15);
    margin-top      : 8px;
    margin-bottom   : 8px;
    padding         : 8px;
    border-radius   : 32px; 
}

.run-dialog .run-dialog-entry:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border          : 2px solid transparent;
}

/* MODALS */
.modal-dialog {
  font-size         : 12pt;
  border-radius     : 8px;
}

.modal-dialog-button-box .modal-dialog-button {
    font-size       : 12pt;
    color           : #ffffff;
    margin          : 16px;
    padding         : 6px 30px 6px;
    border-radius   : 32px;
    background-color: transparent;
    border          : 1px solid #000000;
}

.modal-dialog-button-box .modal-dialog-button:hover,
.modal-dialog-button-box .modal-dialog-button:active,
.modal-dialog-button-box .modal-dialog-button:checked {
    background-color: #3281ea;
    border          : 1px solid #3281ea;
    color           : #ffffff;
}

/* OSD */
.osd-window {
    border-radius   : 8px;
    color           : #ffffff;
    box-shadow      : 0 5px 12px rgba(0, 0, 0, 0.35);
}

.osd-window .level {
    color           : #3281ea;
}
.osd-window .level-bar {
    background-color: #3281ea;
}

.osd-window,
.info-osd {
  background-color  : rgba(1,16,36,0.9);
}

/* DESKLETS */
.desklet-drag-placeholder {
    background-color: rgba(1,16,36,0.3);
    border          : 2px solid #3281ea;
}

.desklet-with-borders {
  background-color  : rgba(1,16,36,0.3);
  padding           : 24px;
}

.desklet-with-borders-and-header:highlight {
  background-color: rgba(17,56,107,0.5);
}

.photoframe-box {
  background-color: rgba(1,16,36,0.9);
}


/* ALT TAB */
#altTabPopup {
    padding         : 16px;
    spacing         : 32px;
}


.thumbnail-scroll-gradient-left {
    border-radius   : 24px;
    width           : 60px;
}
.thumbnail-scroll-gradient-right {
    border-radius   : 24px;
    width           : 60px;
}

.switcher-list {
    border              : 1px solid #202020;
    border-radius       : 16px;
    background-color    : rgba(32, 32, 32, 0.8);
    color               : #ffffff; 
}
.switcher-list .item-box {
    padding             : 16px;
}
.switcher-list .item-box:outlined {
    padding             : 6px;
    border              : 1px solid #202020; 
}
.switcher-list .item-box:selected {
    background-color    : rgba(0, 0, 0, 0.33);
    border-radius       : 16px;
}
.switcher-list .thumbnail {
    width               : 256px; 
    border-radius       : 4px;
}
.switcher-list .thumbnail-box {
    padding             : 2px;
}
.switcher-list .separator {
    width               : 1px;
    background          : rgba(255, 255, 255, 0.33); 
}

.switcher-list-item-container {
    spacing             : 16px; 
}

.switcher-arrow {
    border-color        : rgba(32, 32, 32, 0);
    color               : #ffffff; 
}
.switcher-arrow:highlighted {
    border-color        : rgba(32, 32, 32, 0);
    color               : #ffffff; 
}

.switcher-preview-backdrop {
  background-color      : rgba(255, 255, 255, 0.33); 
}



/* END DERMODEX CINNAMON OVERRIDES */
