|
@import url("gnome-shell.css"); |
|
|
|
/* FIXME: |
|
- white edge highlight with text-shadow and icon-shadow for panel-button |
|
- better shading of the panel (dark 5%) - impossible without multipoint gradients, image-bg is a hack |
|
*/ |
|
|
|
#panel { |
|
background-color: #222222 !important; |
|
background-gradient-direction: vertical; |
|
background-gradient-end: #191919; |
|
border-top-color: #000; /* we don't support non-uniform border-colors and |
|
use the top border color for any border, so we |
|
need to set it even if all we want is a bottom |
|
border */ |
|
border-bottom: 0px solid #666; |
|
app-icon-bottom-clip: 0px; |
|
|
|
/* hrm, still no multipoint gradients |
|
background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0)) !important;*/ |
|
} |
|
|
|
#panel:overview { |
|
background-color: #000 !important; |
|
background-gradient-end: #000 !important; |
|
border-top-color: #000; |
|
border-bottom: 1px solid #000 !important; |
|
} |
|
|
|
#panel.lock-screen { |
|
background-color: rgba(0,0,0,0.3) !important; |
|
background-gradient-end: rgba(0,0,0,0.3) !important; |
|
border-top-color: transparent; |
|
} |
|
|
|
#panel.unlock-screen { |
|
background-color: transparent !important; |
|
background-gradient-end: transparent !important; |
|
border-top-color: transparent; |
|
} |
|
|
|
|
|
/* TOP BAR */ |
|
|
|
.panel-corner, |
|
.panel-corner:active, |
|
.panel-corner:overview, |
|
.panel-corner:focus { |
|
-panel-corner-radius: 0 !important; |
|
} |
|
|
|
/* These are all of the buttons you see */ |
|
.panel-button { |
|
color: #dddddd !important; |
|
-natural-hpadding: 6px !important; |
|
-minimum-hpadding: 3px !important; |
|
} |
|
|
|
#panel:overview .panel-button, |
|
#panel.lock-screen .panel-button, |
|
#panel.unlock-screen .panel-button { |
|
color: #ccc !important; |
|
} |
|
|
|
.panel-button:hover { |
|
color: #eeeeee !important; |
|
} |
|
|
|
#panel:overview .panel-button:hover, |
|
#panel:overview .panel-button:active { |
|
color: white !important; |
|
} |
|
|
|
.panel-button > .system-status-icon { |
|
icon-shadow: #fff 0 1px 0 !important; /* FIXME */ |
|
} |
|
|
|
.panel-button:hover, |
|
.panel-button:active, |
|
.panel-button:overview, |
|
.panel-button:focus { |
|
text-shadow: 0 0 0 transparent !important; /* FIXME: why can't I do none ? */ |
|
} |
|
|
|
.panel-button:active, |
|
.panel-button:overview, |
|
.panel-button:focus { |
|
background-color: #4a90d9 !important; /* FIXME */ |
|
color: #fff !important; |
|
border: none !important; |
|
border-image: none !important; |
|
background-image: none !important; |
|
} |
|
|
|
#panelUserMenu { |
|
padding: 0 10px 0 10px !important; |
|
} |
|
|
|
#appMenu { |
|
text-shadow: 0 0 0 transparent !important; |
|
spinner-image: url("classic-process-working.svg"); |
|
} |
|
|
|
/* used for the app menu header only */ |
|
.label-shadow { |
|
color: rgba(0,0,0,0.5); |
|
} |
|
|
|
.label-shadow { |
|
color: rgba(0,0,0,.5) !important; |
|
} |
|
.panel-button:active .label-shadow, |
|
.panel-button:focus .label-shadow { |
|
color: rgba(0,0,0,.5) !important; |
|
} |
|
|
|
.popup-menu-boxpointer { |
|
-arrow-background-color: #2a2a2a !important; |
|
-arrow-border-width: 1px !important; |
|
-arrow-border-color: #222222 !important; |
|
-arrow-border-radius: 3px !important; |
|
color: #dddddd !important; |
|
-arrow-base: 11px !important; |
|
-arrow-rise: 5px !important; |
|
} |
|
|
|
.popup-combo-menu { |
|
background-color: #e9e9e9 !important; |
|
border: 1px solid #aaa !important; |
|
color: #000 !important; |
|
} |
|
|
|
.popup-menu-item:active { |
|
background-color: #4a90d9 !important; |
|
color: #fff !important; |
|
} |
|
|
|
.popup-menu-item:insensitive { |
|
color: #888; |
|
} |
|
|
|
.popup-separator-menu-item { |
|
-gradient-height: 1px; |
|
-gradient-start: rgba(0,0,0,0.0); |
|
-gradient-end: rgba(0,0,0,0.15); |
|
-margin-horizontal: 24px; |
|
height: 1px; |
|
padding: 8px 0px; |
|
} |
|
|
|
.popup-menu-item:hover .popup-status-menu-item { |
|
color: #fff; |
|
} |
|
|
|
.popup-subtitle-menu-item, .popup-subtitle-menu-item:insensitive { |
|
color: #000; |
|
} |
|
|
|
.popup-submenu-menu-item:open { |
|
background-color: #888; |
|
color: #fff; |
|
} |
|
|
|
.popup-sub-menu { |
|
background-gradient-start: #444444; |
|
background-gradient-end: #3b3b3b; |
|
background-gradient-direction: vertical; |
|
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.4); |
|
} |
|
|
|
/* SCROLLBARS for POPUP MENU */ |
|
|
|
.popup-menu StScrollBar StBin#trough { |
|
background-color: transparent; |
|
} |
|
|
|
.popup-menu StScrollBar StButton#vhandle, .popup-menu StScrollBar StButton#hhandle { |
|
border-color: #666666; |
|
background-color: #555555; |
|
} |
|
.popup-menu StScrollBar StButton#vhandle:hover, |
|
.popup-menu StScrollBar StButton#hhandle:hover { |
|
background-color: #666; |
|
} |
|
.popup-menu StScrollBar StButton#vhandle:active, |
|
.popup-menu StScrollBar StButton#hhandle:active { |
|
background-color: #666666; |
|
} |
|
|
|
/* CALENDAR */ |
|
|
|
.calendar {} |
|
.calendar-month-label { |
|
color: #333 !important; |
|
} |
|
.datemenu-date-label, |
|
.events-day-header { |
|
color: #666 !important; |
|
} |
|
.calendar-day-base:active { |
|
color: #fff !important; |
|
background-color: #4a90d9 !important; |
|
background-image: none !important; |
|
border-image: none !important; |
|
} |
|
.calendar-today { |
|
background-color: #4a90d9 !important; |
|
background-image: none !important; |
|
border-image: none !important; |
|
} |
|
.calendar-day-base { |
|
color: #666 !important; |
|
} |
|
.calendar-day-base:hover { |
|
background-color: #666 !important; |
|
color: #fff !important; |
|
} |
|
.calendar-nonwork-day { |
|
color: #999 !important; |
|
} |
|
.events-day-dayname, |
|
.events-day-time { |
|
color: #666 !important; |
|
} |
|
|
|
/* SYSTEM MENU */ |
|
|
|
.system-menu-action { |
|
color: #dddddd; |
|
border: 1px solid #ddd; /* using rgba() is flaky unfortunately */ |
|
} |
|
|
|
.system-menu-action:hover, |
|
.system-menu-action:focus, |
|
.system-menu-action:active { |
|
color: white; |
|
background-color: #4a90d9; |
|
border: none; |
|
} |
|
|
|
/* VOLUME SLIDER */ |
|
|
|
.slider { |
|
-slider-background-color: #e9e9e9; |
|
-slider-border-color: #999; |
|
-slider-active-background-color: #76b0ec; |
|
-slider-active-border-color: #1f6dbc; |
|
-slider-handle-border-color: #888; |
|
-slider-handle-border-width: 1px; |
|
} |
|
|
|
.popup-menu-icon { |
|
color: #dddddd !important; |
|
} |
|
|
|
/* ON OFF switch */ |
|
|
|
.toggle-switch-us { |
|
background-image: url("classic-toggle-off-us.svg"); |
|
background-size: contain; |
|
} |
|
.toggle-switch-us:checked { |
|
background-image: url("classic-toggle-on-us.svg"); |
|
background-size: contain; |
|
} |
|
|
|
.toggle-switch-intl { |
|
background-image: url("classic-toggle-off-intl.svg"); |
|
background-size: contain; |
|
} |
|
.toggle-switch-intl:checked { |
|
background-image: url("classic-toggle-on-intl.svg"); |
|
background-size: contain; |
|
} |
|
|
|
.system-menu-action { |
|
color: #555 !important; |
|
} |
|
|
|
.system-menu-action:hover, |
|
.system-menu-action:focus { |
|
color: black !important; |
|
} |
