home/.themes/Libra-Dark-Gruvbox/gnome-shell/gnome-shell.css

/* default text style */
stage {
    color: #ffffff;
}

/* this is the panel not the buttons on it*/

.panel-button:active > .system-status-icon,
.panel-button:checked > .system-status-icon,
.panel-button:focus > .system-status-icon {
    icon-shadow: transparent;
}

/* dash and related*/

#dash {
    background-color: rgba(0,0,0,0.0);
    border-radius : 0px;
}

.dash-label,
.window-caption {
    background : #616161;
    border-radius : 2px;
    border : 0px;
}

/* icons in the dash*/

.app-well-app > .overview-icon,
.show-apps > .overview-icon,
.search-provider-icon,
.list-search-result,
.grid-search-result .overview-icon {
    border : 0px;
    border-radius : 0px;
    color: #efefef;
}

.app-well-app.running > .overview-icon {
    text-shadow: black 0px ;
    background-size: contain;
    background-color: rgba(255, 255, 255, 0.10);
    border : 0px;
    border-radius : 2px;
    color: #efefef;
}

.app-well-app:hover > .overview-icon,
.show-apps:hover > .overview-icon,
.search-provider-icon:hover,
.list-search-result:hover,
.grid-search-result:hover .overview-icon {
    text-shadow: black 0px ;
    background-color: #3cb0fd;
    border : 0px;
    border-radius : 2px;
}

.app-well-app:checked > .overview-icon,
.app-well-app:active > .overview-icon,
.show-apps:checked > .overview-icon,
.show-apps:active > .overview-icon,
.search-provider-icon:active,
.grid-search-result:active .overview-icon,
.list-search-result:active {
    background-color : #3cb0fd;
    color: #fff;
    background-gradient-direction : none;
    border-radius: 2px;
    transition-duration: 100ms;
}



.dash-label,
.window-caption,
.switcher-list, 
.app-well-app > .overview-icon,
.show-apps > .overview-icon,
.grid-search-result .overview-icon {

}

.workspace-thumbnails {
    visible-width: 32px;
    border: 0px;
    border-radius: 0px 0px 0px 0px;
    background-color: rgba(0,0,0,0.0);
}



.login-dialog StEntry,
.notification StEntry,
.modal-dialog StEntry {
    color : rgba(0,0,0,0.87);
    caret-color : rgba(0,0,0,0.54);
    selected-color : #616161;
    background-gradient-direction: none;
    background-color : #ffffff;
    border-color : rgba(0,0,0,0.54);
    caret-size: 1px
    border : 0px;
    border-radius : 0px;
    border-bottom: 2px;
    box-shadow : inset 0px 0px 0px rgba(0,0,0,0.0);
}

/* Common radii */

.app-view-controls,
#screenShieldNotifications {
    border-radius : 4px;
    border : 0px;
}


.system-menu-action {
    background-color: #4a90d9;
    color: #ffffff;
    border: 0px;
    padding: 13px; 
    transition-duration :0.2s;
    transition-timing-function : cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s;
}

.system-menu-action:hover,
.system-status-icon:focus {
    background-color: #3cb0fd;
    color: #fff;
}

.system-menu-action:active {
    background-color: #3cb0fd;
    transition-delay: 0s;
    color: #fff;
}

/* Run or modal Dialog : alt+F2*/
.modal-dialog {
    background-color: #272727;
    border-color : #505050;
    color: #efefef;
    border : 1px;
    border-radius : 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.run-dialog-label {
    font-size: 12pt;
    font-weight: normal;
    color: rgba(0,0,0,0.54);
    padding-bottom: .4em;
}

/* These are the bottom buttons of the dash, below the icons (Frequent All)*/
.app-view-control {

    background-gradient-direction : none;
    background-color: #272727;
    border-color : #505050;
    color: #efefef;
}

.app-view-control:checked {
    background-gradient-direction : none;
    background-color: #272727;
    border-color : #505050;
    color: #efefef;
}

.app-view-control:first-child:ltr,
.app-view-control:last-child:rtl {
    border-radius: 2px 0px 0px 2px;
    border-right-width: 0px;
}

.app-view-control:last-child:ltr,
.app-view-control:first-child:rtl {
    border-radius: 0px 2px 2px 0px;
}

/* Slider */

.slider {
    height: 2px;
    -slider-height: 2px;
    -slider-border-width: 0px;
    -slider-handle-radius: 6px;
    -slider-border-color: #4a90d9;
    -slider-active-background-color:  #4a90d9;
    -slider-background-color: rgba(0,0,0,0.26);
    color : #4a90d9;
    box-shadow: 0 2px 5px 0 red;
}


/* switcher */
.switcher-list {
    color : #000000;
    background-color : #ffffff;
    border-color : #e0e0e0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    border : 1px;
    border-radius : 2px;
    font-weight : normal;
}

.switcher-list .item-box {
    border: 0;
    border-radius: 0;
    border-bottom: 2px rgba(0, 0, 0, 0);
}

.switcher-list .item-box:outlined {
    border: 0;
    border-bottom : 2px #616161;
}

.switcher-list .item-box:selected {
    border:0px;
    border-color: #616161;
    border-bottom: 2px;
}

.notification {
    border-radius: 2px;
    background-color: #272727;
    border-color : #505050;
    color: #efefef;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
/* Switches */
.toggle-switch {
    width: 65px;
    height: 22px;
}

.toggle-switch-us {
    background-image: url("switch-on.svg");
    background-size: 3em;
}
.toggle-switch-us:checked {
    background-image: url("switch-off.svg");
    background-size: 3em;    
}
/* Workspace Switcher */
.workspace-switcher-group {
    padding: 12px;
}

.workspace-switcher-container {
    background: rgba(0,0,0,0.0);
    border: 0px solid rgba(128,128,128,0.40);
    border-radius: 2px;
    padding: 20px;
}

.workspace-switcher {
    background: transparent;
    border: 0px;
    border-radius: 0px;
    padding: 0px;
    spacing: 8px;
}

.ws-switcher-active-up,
.ws-switcher-active-down{
    border: 0px;
    background: transparent;
    background-image: url("bc.svg");
    border-radius: 0px;
}

.ws-switcher-box {
    height: 24px;
    border: 0px solid rgba(85,85,85,0.5);
    background: transparent;
    background-image: url("wc.svg");
    border-radius: 0px;
}
/* Check Boxes */

.check-box StBin {
    background-image: url("checkbox-unchecked.svg");
    background-size : contain;
}

.check-box:focus StBin {
    background-image: url("checkbox-unchecked.svg");
}

.check-box:checked StBin {
    background-image: url("checkbox-checked.svg");
}

.check-box:focus:checked StBin {
    background-image: url("checkbox-checked.svg");
}

/* this is for closing the windows as well as the notifications*/
.window-close, 
.notification-close {
    background-size: 48px;
    background-image: url("close_dash.svg");
}

.window-close:active,
.window-close:hover,
.notification-close:active,
.notification-close:hover {
    background-size: 48px;
    background-image: url("close_dash_prelight.svg");
}

.window-clone-border {
    border : 0px;
    border-radius : 0px;
}

/* OSD: these are the modification of sound and so on */
.osd-window {
    background-color: #272727;
    border: 1px solid #505050;
    color: #efefef;
    border-radius: 2px;

    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.osd-window .level {
    height : 1px;
    border-radius : 0px;
    background-color: #272727;
    color: #efefef;
}

/* scroll bars*/

StScrollView StScrollBar {
    min-width: 6px;
    min-height: 14px;
}

StScrollBar StBin#trough {
    background-color: #272727;
    border-radius : 2px;
}

StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
    background-color : #03a9f4;
    border : 0;
    border-radius : 2px;
}

StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
    background-color : rgba(74, 144, 217, 0.75);
}

/* Message Tray */

#message-tray {
    background-color: #272727;
    color: #efefef;
}
/* Calendar popup */

.calendar-vertical-separator {
    -stipple-width: 1px;
    -stipple-color: #505050;
    width: 0.3em;
}

.calendar {
    padding: .4em 1.75em 3em 1.75em;
}

.calendar-month-label {
    color: #efefef;
    font-size: 9.5pt;
    font-weight: bold;
    padding-bottom: 8px;
    padding-top: 8px;
}

.calendar-month-label:focus {

}

.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,
.calendar-change-month-back:focus {
     background-image: url("calendar-arrow-left-hover.svg");
     background-color: #272727;
}
.calendar-change-month-back:active {
     background-image: url("calendar-arrow-left-hover.svg");
    background-color: #272727;
}
.calendar-change-month-back:hover:rtl,
.calendar-change-month-back:focus:rtl {
     background-image: url("calendar-arrow-left-hover.svg");
    background-color: #272727;
}
.calendar-change-month-back:active:rtl {
     background-image: url("calendar-arrow-left-hover.svg");
    background-color: #272727;
}

.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,
.calendar-change-month-forward:focus {
    background-image: url("calendar-arrow-right-hover.svg");
    background-color: #272727;
}
.calendar-change-month-forward:active {
    background-image: url("calendar-arrow-right-hover.svg");
    background-color: #272727;
}
.calendar-change-month-forward:hover:rtl,
.calendar-change-month-forward:focus:rtl {
    background-image: url("calendar-arrow-left-hover.svg");
    background-color: #272727;
}
.calendar-change-month-forward:active:rtl {
    background-image: url("calendar-arrow-left-hover.svg");
    background-color: #272727;
}

.datemenu-date-label {
    padding: .4em 1.7em;
    font-weight: bold;
    text-align: center;
    color: #efefef;
    border-radius: 4px;
}

.datemenu-date-label:hover,
.datemenu-date-label:focus {
    background-color: #3cb0fd;
    color: #fff;
}

.datemenu-date-label:active {
    background-color: #3cb0fd;
    color: #fff;
}

.calendar-day-base {
    color: #efefef;
    font-size: 9pt;
    text-align: center;
    width: 2.4em;
    height: 2.4em;
}

.calendar-day-base:hover,
.calendar-day-base:focus {
    background-color: #272727;
    color: #fff;
}

.calendar-day-base:active {
    background-color: #3cb0fd;
    color: #fff;
}

.calendar-day-heading {
    color: #efefef;
    padding-top: .2em;
    height: 1.7em;
}

.calendar-week-number {
    color: #efefef;
    font-weight: bold;
}

/* Hack used in lieu of border-collapse - see calendar.js */
.calendar-day {
    color: #efefef;
    border-top-width: 0;
    border-left-width: 0;
}

.calendar-day-top {
    border-top-width: 1px;
}

.calendar-day-left {
    border-left-width: 1px;
}

.calendar-work-day {
}

.calendar-nonwork-day {
    background-color: rgba(128, 128, 128, 0.1);
}

.calendar-today {
    background-image: none;
    color: #efefef;
    font-weight: bold;
}

.calendar-day-with-events {
    font-weight: bold;
    color: #3cb0fd;
}
.calendar-day-with-events:focus,
.calendar-day-with-events:active {
    font-weight: bold;
    background-color: #3cb0fd;
    color: #fff;
}
.calendar-other-month-day {
    color: #efefef;
}

.events-table {
    width: 320px;
    spacing-columns: 6pt;
    padding: 0 1.4em;
}

.events-table:ltr {
    padding-right: 1.9em;
}

.events-table:rtl {
    padding-left: 1.9em;
}

.events-day-header {
    font-weight: bold;
    color: #efefef;
    padding-left: 0.4em;
    padding-top: 1.2em;
}

.events-day-header:first-child {
    padding-top: 0;
}

.events-day-header:rtl {
    padding-left: 0;
    padding-right: 0.4em;
}

.events-day-dayname {
    color: #efefef;
    text-align: left;
    min-width: 20px;
}

.events-day-dayname:rtl {
    text-align: right;
}

.events-day-time {
    color: #efefef;
    text-align: right;
}

.events-day-time-ellipses {
    color: #efefef;
}

.events-day-time:rtl {
    text-align: left;
}

.events-day-task {
    color: #efefef;
    padding-left: 8pt;
}

.events-day-task:rtl {
    padding-left: 0px;
    padding-right: 8pt;
}
/* buttons */

.candidate-page-button,
.notification-button,
.notification-icon-button,
.hotplug-notification-item,
.hotplug-resident-eject-button,
.modal-dialog-button{
    height : 3ex;
    border-radius: 1px;
    border: 0px;
    color: #ffffff;
    text-transform : uppercase;
    font-weight : normal;
    font-size : 12pt;
    background-gradient-direction: none;
    background-color : #4a90d9;
    transition-duration : 0.2s;
    transition-timing-function : cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s;
}

.candidate-page-button:hover,
.notification-button:hover,
.notification-icon-button:hover,
.hotplug-notification-item:hover,
.hotplug-resident-eject-button:hover,
.modal-dialog-button:hover {
    background-color : #3cb0fd;
    color: #fff;
}

.candidate-page-button:active,
.candidate-page-button:pressed,
.notification-button:active,
.notification-icon-button:active,
.hotplug-notification-item:active,
.hotplug-resident-eject-button:active,
.modal-dialog-button:active,
.modal-dialog-button:pressed {
    background-color : #3cb0fd;
    color: #fff;
}

.candidate-page-button:insensitive,
.notification-button:insensitive,
.notification-icon-button:insensitive,
.hotplug-notification-item:insensitive,
.hotplug-resident-eject-button:insensitive,
.modal-dialog-button:insensitive {
    background-color : rgba(0,0,0,0.12);
    color : rgba(0,0,0,0.26);
    border-color : #505050;
}

.notification-button:focus,
.notification-icon-button:focus,
.hotplug-notification-item:focus,
.modal-dialog-button:focus,
.app-view-control:focus {
    border-width : 0px;
}

/* panel */

#panel {
    background-color: #272727;
    box-shadow : 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.panel-corner {
    -panel-corner-radius: 0px;
}

#panel:overview {
    background-color: rgba(0,0,0,0.0);
}

/* these are dealing with features of the buttons in panel*/
.panel-button{
    color : #fff;
    background-color : transparent;
    font-weight : normal;
    text-shadow : transparent;
    -natural-hpadding: 18px;
    -minimum-hpadding: 6px;
}

.panel-button:hover,
.panel-button:active,
.panel-button:overview,
.panel-button:focus {
    text-shadow: #000 1px 1px 1px;
}

/* PopupMenu */

.popup-menu-ornament {
    text-align: right;
    width: 1em;
}

.popup-menu-boxpointer,
.candidate-popup-boxpointer {
    -arrow-border-radius: 3px;
    -arrow-background-color: #272727;
    -arrow-border-width: 1px;
    -arrow-border-color: #505050;
    -arrow-base: 24px;
    -arrow-rise: 11px;
    color: #fff;
}
.popup-menu-boxpointer.fallback-app-menu {
    -arrow-border-radius: 3px;
    -arrow-background-color: #272727;
    -arrow-border-width: 1px;
    -arrow-border-color: #505050;
    -arrow-base: 24px;
    -arrow-rise: 11px;
    color: #fff;
}

.popup-menu-boxpointer.fallback-app-menu.dark {
    -arrow-background-color: #272727;
    -arrow-border-color: #505050;
    color: #fff;
}


.popup-menu {
    min-width: 200px;
}

.popup-menu-arrow {
    width: 16px;
    height: 16px;
    background-color: #272727;
    color: #efefef;
}

.popup-submenu-menu-item:open {
    background-color: #272727;
    color: #efefef;
}

.fallback-app-menu .popup-submenu-menu-item:open {
    background-color: #272727;
    color: #efefef;
}

.fallback-app-menu.dark .popup-submenu-menu-item:open {
    background-color: #272727;
    color: #efefef;
}

.popup-sub-menu {
    background-gradient-direction : none;
    box-shadow: none;
    background-color: #272727;
    color: #efefef;
}

.fallback-app-menu .popup-sub-menu {
    box-shadow: none;
    background-color: #272727;
    color: #efefef;
}

.fallback-app-menu.dark .popup-sub-menu {
    box-shadow: none;
    background-color: #272727;
    color: #efefef;
}

.popup-sub-menu:scrolled .popup-menu-item:ltr {
    padding-right: 0em;
    background-color: #272727;
    color: #efefef;
}

.popup-sub-menu:scrolled .popup-menu-item:rtl {
    padding-left: 0em;
    background-color: #272727;
    color: #efefef;
}

.popup-sub-menu StScrollBar {
    padding: 4px;
}

.popup-sub-menu StScrollBar StBin#trough {
    border-width: 0px;
}

.popup-sub-menu StScrollBar StBin#vhandle {
    border-width: 0px;
}

.app-well-menu {
    max-width: 400px;
}

/* 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;
    background-color: #272727;
    color: #efefef;

}

.popup-menu-item {
    spacing: 12px;
    background-color: #272727;
    color: #efefef;
}

.popup-menu-item:ltr {
    padding: .4em 1.75em .4em 0em;
}

.popup-menu-item:rtl {
    padding: .4em 0em .4em 1.75em;
}

.popup-menu-item:active {
    background-color: #3cb0fd;
    color: #fff;
}

.popup-menu-item:insensitive {
    color: #9f9f9f;
}

.fallback-app-menu .popup-menu-item {
    background-color: #272727;
    color: #efefef;
}

.fallback-app-menu .popup-menu-item:active {
    background-color: #3cb0fd;
    color: #fff;
}

.fallback-app-menu .popup-menu-item:insensitive {
    color: gray;
}

.fallback-app-menu.dark .popup-menu-item {
    background-color: #272727;
    color: #efefef;
}

.fallback-app-menu.dark .popup-menu-item:active {
    background-color: #3cb0fd;
    color: #fff;
}

.fallback-app-menu.dark .popup-menu-item:insensitive {
    color: #9f9f9f;
}

.popup-separator-menu-item {
    -gradient-height: 1px;
    -gradient-start: #c3c3c3;
    -gradient-end: #c3c3c3;
    -margin-horizontal: 24px;
    height: 1px;
    padding: 8px 0px;
}

.fallback-app-menu .popup-separator-menu-item {
    -gradient-start: #a0a2a3;
    -gradient-end: #a0a2a3;
    -margin-horizontal: 0;
}

.fallback-app-menu.dark .popup-separator-menu-item {
    -gradient-start: #818584;
    -gradient-end: #818584;
}

.popup-status-menu-item {
    font-weight: normal;
    color: #efefef;
}

.popup-inactive-menu-item, .popup-inactive-menu-item:insensitive {
    color: #505050;
}

.popup-menu-icon {
    icon-size: 1.09em;
    color: #efefef;
}

/* search */

.search-entry,
.search-entry:hover,
.search-entry:focus {
    color: rgba(255,255,255,0.87);
    caret-color: rgba(255,255,255,0.54);
    selected-color: rgba(255,255,255,0.54);
    background-gradient-direction: none;
    background-color: transparent;
    border-color : rgba(255,255,255,0.54);
    font-size: 12pt;
    font-weight : normal;
    caret-size: 1px;
    border-radius: 0px;
    border: 0px;
    border-bottom: 2px;
    box-shadow : inset 0px 0px 0px rgba(0,0,0,0.0);
}

.search-entry-icon {
    color: rgba(255,255,255,0.54);
}

/* network manager */
.nm-dialog-scroll-view {
    background-color : transparent;
    border: 0px;
    border-radius: 0px;
}

.nm-dialog-item {
    color : rgba(0,0,0,0.87);
    font-size: 10pt;
    border-bottom: 1px solid white;
}

.nm-dialog-item:focus {
    color : #ffffff;
    background-color: #3cb0fd;
}