231 lines
4.8 KiB
SCSS
231 lines
4.8 KiB
SCSS
$dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);
|
|
|
|
%overview-transparent-bg {
|
|
$_overview_transparent_bg: transparentize(white, .9);
|
|
|
|
background-color: $_overview_transparent_bg;
|
|
box-shadow: inset 0 0 0 1px $_overview_transparent_bg;
|
|
}
|
|
|
|
// Dropshadow for large icons
|
|
.icon-dropshadow {
|
|
icon-shadow: 0 1px 5px $shadow_color;
|
|
}
|
|
|
|
/* Message List */
|
|
.message-list-controls {
|
|
spacing: $base_padding * 2;
|
|
@include fontsize(10);
|
|
}
|
|
|
|
.message {
|
|
.message-content {
|
|
padding: $base_padding;
|
|
spacing: 0;
|
|
}
|
|
.message-title { padding-top: .5em; }
|
|
.message-secondary-bin > .event-time { padding-bottom: .5em; }
|
|
}
|
|
|
|
/* Notifications & Message Tray */
|
|
.notification-banner { box-shadow: $dialog_box_shadow; }
|
|
|
|
/* Window Picker */
|
|
// Window titles
|
|
.window-caption {
|
|
color: black;
|
|
background-color: white;
|
|
box-shadow: $dialog_box_shadow;
|
|
}
|
|
|
|
// Close button
|
|
.window-close {
|
|
background-image: url("assets/close-window.svg");
|
|
background-size: 32px;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
color: transparent;
|
|
height: 32px;
|
|
width: 32px;
|
|
transition-duration: .2s;
|
|
|
|
&:hover {
|
|
background-image: url("assets/close-window-hover.svg");
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:active {
|
|
background-image: url("assets/close-window-active.svg");
|
|
background-color: transparent;
|
|
color: transparent;
|
|
transition-duration: 0s;
|
|
}
|
|
}
|
|
|
|
/* Workspace Switcher */
|
|
.ws-switcher-indicator {
|
|
padding: 2px;
|
|
margin: 10px;
|
|
|
|
&:active {
|
|
padding: 4px;
|
|
margin: 8px;
|
|
}
|
|
}
|
|
|
|
/* Top Bar */
|
|
#panel {
|
|
$_panel_bg: transparentize($bg_color, .2);
|
|
$_panel_fg: if($variant=='light', black, white);
|
|
$_panel_text_shadow: 0 1px 2px transparentize(black, 0.7);
|
|
background: $_panel_bg;
|
|
text-shadow: $_panel_text_shadow;
|
|
|
|
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-button {
|
|
color: $_panel_fg;
|
|
&:hover, &:active, &:focus, &:overview, &:checked {
|
|
color: $_panel_fg;
|
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2));
|
|
}
|
|
&.screen-recording-indicator { color: white; }
|
|
}
|
|
|
|
.panel-button.clock-display {
|
|
// Move highlight from .panel-button to .clock
|
|
&:hover, &:active, &:overview, &:focus, &:checked {
|
|
box-shadow: none;
|
|
|
|
.clock {
|
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2));
|
|
}
|
|
}
|
|
}
|
|
|
|
#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-dark.svg");
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Date/Time Menu */
|
|
.datemenu-today-button {
|
|
&:insensitive { color: inherit; }
|
|
}
|
|
|
|
/* Search */
|
|
// search entry
|
|
.search-entry {
|
|
@extend %overview-transparent-bg;
|
|
$_text-shadow: 0px 1px 2px transparentize(black, 0.5);
|
|
color: black;
|
|
text-shadow: $_text-shadow;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
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;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
|
|
StLabel.hint-text { color: black; }
|
|
|
|
.search-entry-icon {
|
|
color: black;
|
|
icon-shadow: none;
|
|
}
|
|
}
|
|
|
|
.search-entry-icon {
|
|
color: white;
|
|
icon-shadow: $_text-shadow;
|
|
}
|
|
}
|
|
|
|
// search results
|
|
.search-section-content {
|
|
@extend %overview-transparent-bg;
|
|
}
|
|
|
|
// search result provider
|
|
.search-provider-icon .list-search-provider-details { font-weight: bold; }
|
|
|
|
.list-search-result .list-search-result-description {
|
|
color: transparentize($osd_fg_color, .2);
|
|
}
|
|
|
|
/* Dash */
|
|
#dash {
|
|
color: $osd_fg_color;
|
|
|
|
StIcon {
|
|
icon-shadow: 0 2px 6px transparentize(black, .6);
|
|
}
|
|
}
|
|
|
|
.dash-background, .dash-separator {
|
|
@extend %overview-transparent-bg;
|
|
}
|
|
|
|
/* App Grid */
|
|
#overview { color: $osd_fg_color; }
|
|
|
|
// Icon tiles in the app grid
|
|
.app-well-app.app-folder {
|
|
@include overview_icon(white, $flat: false);
|
|
.overview-icon {
|
|
@extend %overview-transparent-bg;
|
|
}
|
|
}
|
|
|
|
.app-folder-dialog {
|
|
background: black;
|
|
box-shadow: 0 0 100px lighten(black, 4%);
|
|
|
|
& .folder-name-container .folder-name-entry { color: white; }
|
|
}
|
|
|
|
/* Workspace pager */
|
|
// thumbnails in overview
|
|
.workspace-thumbnails {
|
|
.workspace-thumbnail {
|
|
@extend %overview-transparent-bg;
|
|
}
|
|
}
|
|
|
|
// selected indicator
|
|
.workspace-thumbnail-indicator { border: 2px solid white; }
|