174 lines
3.5 KiB
SCSS
174 lines
3.5 KiB
SCSS
// Dash to Dock
|
|
|
|
$dash_panel_bg: if($variant == 'light', rgba(#f1f1f1, 0.15), rgba(#101010, 0.25));
|
|
$dash_panel_fg: if($variant == 'light', black, white);
|
|
$dash_radius: 18px;
|
|
|
|
// Scrollview style
|
|
.bottom #dashtodockDashScrollview,
|
|
.top #dashtodockDashScrollview {
|
|
-st-hfade-offset: 24px;
|
|
}
|
|
|
|
.left #dashtodockDashScrollview,
|
|
.right #dashtodockDashScrollview {
|
|
-st-vfade-offset: 24px;
|
|
}
|
|
|
|
#dashtodockContainer {
|
|
background-color: transparent;
|
|
|
|
.number-overlay {
|
|
color: $light_fg_color;
|
|
background-color: rgba(black, 0.75);
|
|
text-align: center;
|
|
}
|
|
|
|
.notification-badge {
|
|
color: $light_fg_color;
|
|
background-color: $primary_color;
|
|
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
|
|
border-radius: 1000px;
|
|
margin: 2px;
|
|
padding: 0.2em 0.6em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
&.dashtodock #dash,
|
|
&.dashtodock:overview #dash,
|
|
&.extended #dash,
|
|
&.extended:overview #dash {
|
|
border: 1px solid if($variant == 'light', rgba(black, 0.03), rgba(black, 0.35));
|
|
}
|
|
|
|
&.straight-corner #dash,
|
|
&.shrink.straight-corner #dash {
|
|
border-radius: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
@each $_dock, $_radius, $_shadow in (top, $dash_radius, 0 -1px),
|
|
(bottom, $dash_radius, 0 1px),
|
|
(left, $dash_radius, -1px 0),
|
|
(right, $dash_radius, 1px 0) {
|
|
&.#{$_dock}.dashtodock #dash,
|
|
&.#{$_dock}.dashtodock:overview #dash {
|
|
border-radius: #{$_radius};
|
|
margin-#{$_dock}: 6px;
|
|
padding: 3px;
|
|
box-shadow: inset 0 0 0 1px rgba(white, 0.05);
|
|
}
|
|
|
|
&.#{$_dock}.shrink #dash {
|
|
border-#{$_dock}-width: 0;
|
|
}
|
|
|
|
&.#{$_dock}.extended #dash,
|
|
&.#{$_dock}.extended:overview #dash {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
box-shadow: inset #{$_shadow} rgba(white, 0.05);
|
|
}
|
|
}
|
|
|
|
&.extended.top,
|
|
&.extended.bottom {
|
|
#dash {
|
|
border-left: 0;
|
|
border-right: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&.extended.right,
|
|
&.extended.left {
|
|
#dash {
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&.dashtodock #dash { background: $dash_panel_bg; }
|
|
|
|
&.opaque #dash { // solid-mode
|
|
background: $dash_panel_bg;
|
|
}
|
|
|
|
&.transparent #dash { // translucent-mode
|
|
background: $dash_panel_bg; // does not work
|
|
}
|
|
|
|
&:overview #dash { // overview-mode #1
|
|
background: $light_divider_color;
|
|
}
|
|
|
|
&.opaque:overview,
|
|
&.transparent:overview { // overview-mode #2
|
|
#dash {
|
|
background-color: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
&.extended:overview, // overview-mode #3
|
|
&.opaque.extended:overview,
|
|
&.transparent.extended:overview {
|
|
#dash {
|
|
background-color: $dash_panel_bg;
|
|
}
|
|
}
|
|
|
|
&.running-dots,
|
|
&.dashtodock {
|
|
.dash-item-container > StButton {
|
|
transition-duration: 250ms;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
&.shrink,
|
|
&.dashtodock {
|
|
.dash-item-container > StButton {
|
|
padding: 1px 2px;
|
|
}
|
|
}
|
|
|
|
.app-well-app,
|
|
.show-apps {
|
|
.overview-icon {
|
|
padding: 8px;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
&.extended,
|
|
&.extended:overview {
|
|
.app-well-app,
|
|
.show-apps {
|
|
.overview-icon {
|
|
border-radius: $bt_radius;
|
|
}
|
|
}
|
|
}
|
|
|
|
.metro .overview-icon {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.dashtodock-app-well-preview-menu-item {
|
|
padding: 1em 1em 0.5em 1em;
|
|
}
|
|
|
|
#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal {
|
|
width: 1px;
|
|
height: auto;
|
|
border-right-width: 1px;
|
|
margin: 32px 0;
|
|
}
|