mirror of
https://github.com/vinceliuice/Colloid-gtk-theme.git
synced 2025-09-15 21:08:39 -07:00
106 lines
3.0 KiB
SCSS
106 lines
3.0 KiB
SCSS
/* Dash */
|
|
|
|
// uses system colors
|
|
$dash_background_color: on($osd, divider);
|
|
|
|
$dash_placeholder_size: 32px;
|
|
$dash_padding: $base_padding * 2;
|
|
$dash_edge_offset: $base_margin * 3;
|
|
$dash_border_radius: $modal_radius + $dash_padding;
|
|
$dash_spacing: $base_margin * 0.5;
|
|
|
|
// container for the dash
|
|
#dash {
|
|
// a bit of spacing so that dash doesn't touch the screen edges
|
|
padding-left: $base_padding;
|
|
padding-right: $base_padding;
|
|
|
|
// background behind item container
|
|
.dash-background {
|
|
background-color: $dash_background_color;
|
|
border-radius: $dash_border_radius;
|
|
padding-top: $dash_padding;
|
|
padding-bottom: $dash_padding;
|
|
padding-left: $dash_padding - $dash_spacing; // subtract the margins added to .overview-tile below
|
|
padding-right: $dash_padding - $dash_spacing;
|
|
box-shadow: inset 0 1px rgba(white, 0.08);
|
|
}
|
|
|
|
// items on the dash
|
|
.dash-item-container {
|
|
.placeholder {
|
|
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
|
|
background-image: none;
|
|
background-size: contain;
|
|
height: $dash_placeholder_size;
|
|
}
|
|
|
|
.empty-dash-drop-target {
|
|
width: $dash_placeholder_size;
|
|
height: $dash_placeholder_size;
|
|
}
|
|
|
|
// IMPORTANT: items on the dash need to extend to the edge to be adequate click targets
|
|
// as such the %tile style is overriden and button styles are applied to the child class .overview-icon
|
|
.show-apps,
|
|
.overview-tile {
|
|
background: none;
|
|
box-shadow: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
margin: 0 $dash_spacing;
|
|
padding-bottom: $dash_edge_offset; // align with other items
|
|
|
|
.overview-icon {
|
|
border-radius: $modal_radius;
|
|
padding: $base_padding;
|
|
spacing: $base_padding;
|
|
text-align: center;
|
|
transition-duration: 100ms;
|
|
background-color: transparent;
|
|
color: on($osd);
|
|
}
|
|
|
|
&:focus .overview-icon { background-color: on($osd, divider); }
|
|
&:hover .overview-icon { background-color: on($osd, divider); }
|
|
&:active .overview-icon { background-color: on($osd, track); }
|
|
&:checked .overview-icon { background-color: on($osd, divider); }
|
|
}
|
|
|
|
// running app dot
|
|
.app-grid-running-dot {
|
|
// manually position the dot within the dash item
|
|
offset-y: -$dash_padding;
|
|
}
|
|
}
|
|
|
|
// separator between pinned and running apps
|
|
.dash-separator {
|
|
width: 1px;
|
|
margin-left: $base_margin;
|
|
margin-right: $base_margin;
|
|
background-color: on($osd, divider);
|
|
}
|
|
|
|
// make sure all dash components have same margin from screen edge
|
|
.dash-separator,
|
|
.dash-background {
|
|
margin-bottom: $dash_edge_offset;
|
|
}
|
|
}
|
|
|
|
// OSD Tooltip
|
|
.dash-label {
|
|
color: rgba(white, 0.9);
|
|
background-color: rgba(black, 0.75);
|
|
border-radius: $circular_radius;
|
|
padding: $base_padding $base_padding * 2;
|
|
margin: $base_margin * 2;
|
|
box-shadow: none;
|
|
border: none;
|
|
text-align: center;
|
|
-y-offset: $base_margin; // distance from the dash edge
|
|
-x-offset: 8px;
|
|
}
|