339 lines
7.4 KiB
SCSS
339 lines
7.4 KiB
SCSS
$overview_transparent_bg: transparentize(white, .8);
|
|
$dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6);
|
|
|
|
|
|
/* OSD */
|
|
$_osd_color: if($variant=='light', black, white);
|
|
%osd_panel {
|
|
font-weight: bold;
|
|
background-color: $bg_color;
|
|
color: $fg_color;
|
|
border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color);
|
|
|
|
StIcon {
|
|
color: $_osd_color;
|
|
icon-shadow: transparentize(black, .3) 0 1px 6px;
|
|
}
|
|
}
|
|
|
|
.osd-window {
|
|
.level {
|
|
-barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9));
|
|
-barlevel-active-background-color: $_osd_color;
|
|
}
|
|
}
|
|
|
|
/* Slider */
|
|
|
|
.slider {
|
|
height: 1.1em;
|
|
-barlevel-height: .35em;
|
|
-barlevel-background-color: $borders_color;
|
|
-barlevel-border-color: $selected_bg_color;
|
|
-barlevel-active-background-color: $selected_bg_color;
|
|
-barlevel-overdrive-color: $destructive_color;
|
|
-barlevel-overdrive-separator-width: 0.1em;
|
|
-barlevel-border-width: 0;
|
|
|
|
-slider-handle-radius: 0;
|
|
}
|
|
|
|
/* Check Boxes */
|
|
|
|
.check-box {
|
|
StBin {
|
|
background-image: if($variant == 'light', url("assets/checkbox-off.svg"),
|
|
url("assets/checkbox-off-dark.svg"));
|
|
}
|
|
|
|
&:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused.svg"),
|
|
url("assets/checkbox-off-focused-dark.svg")); }
|
|
&:checked StBin { background-image: if($variant == 'light', url("assets/checkbox.svg"),
|
|
url("assets/checkbox-dark.svg")); }
|
|
&:focus:checked StBin { background-image: if($variant == 'light', url("assets/checkbox-focused.svg"),
|
|
url("assets/checkbox-focused-dark.svg")); }
|
|
}
|
|
|
|
/* App Switcher */
|
|
// switcher onscreen panel
|
|
.switcher-list {
|
|
.item-box {
|
|
&:outlined {
|
|
padding: 6px;
|
|
border: 3px solid $selected_bg_color;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
&:selected {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
text-shadow: transparentize(black, 0.1) 0 1px 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Workspace Switcher */
|
|
.ws-switcher-box { border: none }
|
|
|
|
.workspace-switcher-container { padding: 7px; }
|
|
|
|
// active workspace in the switcher
|
|
.ws-switcher-active-up,
|
|
.ws-switcher-active-down,
|
|
.ws-switcher-active-left,
|
|
.ws-switcher-active-right {
|
|
box-shadow: 0 0px 6px transparentize(black, .5);
|
|
}
|
|
|
|
/* Window Picker */
|
|
|
|
// Borders on window thumbnails
|
|
.window-clone-border { border-color: transparentize(white, .75); }
|
|
|
|
// Window titles
|
|
.window-caption {
|
|
font-size: .9em;
|
|
color: black;
|
|
background-color: white;
|
|
border: none;
|
|
box-shadow: $dialog_box_shadow;
|
|
}
|
|
|
|
// Close button
|
|
.window-close {
|
|
background-image: url("assets/close-window.svg");
|
|
background-size: 32px;
|
|
background-color: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
color: transparent;
|
|
height: 32px;
|
|
width: 32px;
|
|
|
|
&:hover {
|
|
background-image: url("assets/close-window-hover.svg");
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:active {
|
|
background-image: url("assets/close-window-active.svg");
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Tiled window previews */
|
|
|
|
.tile-preview-left.on-primary,
|
|
.tile-preview-right.on-primary,
|
|
.tile-preview-left.tile-preview-right.on-primary{ border-radius: 0; }
|
|
|
|
/* TOP BAR */
|
|
#panel {
|
|
$_panel_bg: transparentize($bg_color, .2);
|
|
$_panel_fg: if($variant=='light', black, white);
|
|
$_panel_text_shadow: transparentize(black, .5) 0 1px 2px;
|
|
background: $_panel_bg;
|
|
text-shadow: $_panel_text_shadow;
|
|
|
|
.popup-menu-arrow { width: 0; }
|
|
|
|
StIcon { icon-shadow: $_panel_text_shadow; }
|
|
|
|
&.unlock-screen,
|
|
&.login-screen,
|
|
&.lock-screen,
|
|
&:overview {
|
|
background-color: transparent;
|
|
.panel-button {
|
|
&, &:hover, &:active, &:focus, &:overview, &:checked { color: white; }
|
|
}
|
|
}
|
|
|
|
.panel-corner { -panel-corner-radius: 0; }
|
|
|
|
.panel-button {
|
|
&, &:hover, &:active, &:focus, &:overview, &:checked {
|
|
color: $_panel_fg;
|
|
}
|
|
}
|
|
|
|
#panelActivities.panel-button {
|
|
margin-left: .4em;
|
|
StLabel {
|
|
background-image: if($variant == 'light', url("assets/view-grid-symbolic.svg"),
|
|
url("assets/view-grid-symbolic-dark.svg"));
|
|
background-size: contain;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
color: transparent;
|
|
}
|
|
|
|
&:overview StLabel {
|
|
background-image: url("assets/view-grid-symbolic-checked.svg");
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Date/Time Menu */
|
|
|
|
// overall menu
|
|
#calendarArea {
|
|
background-image: if($variant == 'light', url("assets/kali-dragon.svg"),
|
|
url("assets/kali-dragon-dark.svg"));
|
|
background-size: contain;
|
|
}
|
|
|
|
.events-section-title { padding: 1em; }
|
|
|
|
.datemenu-today-button {
|
|
.date-label {
|
|
font-size: 1.5em;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
|
|
.calendar { @include notification_bubble($flat: true); }
|
|
|
|
/* Message list */
|
|
.message-list {
|
|
width: 31.5em;
|
|
background: transparentize($bg_color, .3);
|
|
}
|
|
|
|
/* Events */
|
|
.events-button { @include notification_bubble($flat: true); }
|
|
|
|
/* World clocks */
|
|
|
|
.world-clocks-button {
|
|
@include notification_bubble($flat: true);
|
|
}
|
|
|
|
.weather-button {
|
|
@include notification_bubble($flat: true);
|
|
}
|
|
|
|
|
|
/* Search */
|
|
|
|
// search entry
|
|
.search-entry {
|
|
color: black;
|
|
font-weight: bold;
|
|
background-color: $overview_transparent_bg;
|
|
text-shadow: 0px 1px 2px rgba(black, 0.9);
|
|
border-radius: 100px;
|
|
transition-duration: 200ms;
|
|
|
|
StLabel.hint-text { color: $osd_fg_color; }
|
|
|
|
&, &:focus, &:hover {
|
|
width: 21em;
|
|
padding: .6em .8em;
|
|
border: none;
|
|
}
|
|
|
|
&:focus, &:hover {
|
|
background-color: white;
|
|
color: black;
|
|
font-weight: normal;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
|
|
StLabel.hint-text { color: black; }
|
|
|
|
.search-entry-icon {
|
|
color: black;
|
|
icon-shadow: none;
|
|
}
|
|
}
|
|
|
|
.search-entry-icon {
|
|
color: white;
|
|
icon-shadow: 0px 1px 2px rgba(black, 0.9);
|
|
}
|
|
}
|
|
|
|
// search results
|
|
.search-section {
|
|
// separator
|
|
.search-section-separator {
|
|
height: 1px;
|
|
background-color: $osd_outer_borders_color;
|
|
}
|
|
|
|
&:last-child .search-section-separator { background-color: transparent; }
|
|
}
|
|
|
|
// content
|
|
.search-section-content {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
border: 0;
|
|
box-shadow: 0;
|
|
}
|
|
|
|
// search result provider
|
|
.search-provider-icon {
|
|
.list-search-provider-content {
|
|
.list-search-provider-details { font-weight: bold; }
|
|
}
|
|
}
|
|
|
|
/* DASHBOARD */
|
|
|
|
#dash {
|
|
color: $osd_fg_color;
|
|
background-color: transparent;
|
|
border: none;
|
|
border-color: transparent;
|
|
|
|
.overview-icon StIcon {
|
|
color: white;
|
|
icon-shadow: transparentize(black, .3) 0 2px 6px;
|
|
}
|
|
}
|
|
|
|
.show-apps {
|
|
&:focus,
|
|
&:checked {
|
|
.overview-icon {
|
|
background-color: $overview_transparent_bg;
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Workspace pager */
|
|
// thumbnails in overview
|
|
.workspace-thumbnails {
|
|
background-color: transparentize(black, .8);
|
|
border: none;
|
|
|
|
.placeholder { background-image: none; }
|
|
}
|
|
|
|
/* App Folders */
|
|
.app-well-app.app-folder {
|
|
background-color: $overview_transparent_bg;
|
|
box-shadow: 0 2px 5px black;
|
|
|
|
&:checked { background: black; }
|
|
}
|
|
|
|
.app-folder-dialog {
|
|
background: black;
|
|
box-shadow: 0 0 20px black;
|
|
border: none;
|
|
|
|
& .folder-name-container {
|
|
& .edit-folder-button {
|
|
&, &:hover, &:active {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|