e2adc5a445
With the dot now being placed correctly at the bottom of the hover highlight it is now also overlapping the 1px inset shadow used as outline in high contrast mode. To avoid this, shift the dot up accordingly. Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3245>
107 lines
3.1 KiB
SCSS
107 lines
3.1 KiB
SCSS
/* Dash */
|
|
|
|
// uses system colors
|
|
$dash_background_color: $system_overlay_bg_color;
|
|
|
|
$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;
|
|
|
|
@if $contrast == 'high' {
|
|
@include draw_hc_inset($width: 2px);
|
|
}
|
|
}
|
|
|
|
// 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 {
|
|
// remove styles
|
|
@extend %reset;
|
|
|
|
margin: 0 $dash_spacing;
|
|
padding-bottom: $dash_edge_offset; // align with other items
|
|
|
|
$fg:$system_fg_color;
|
|
$bg:$dash_background_color;
|
|
|
|
.overview-icon {
|
|
@extend %tile;
|
|
@include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);
|
|
}
|
|
|
|
&:focus .overview-icon { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
|
|
&:hover .overview-icon { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
|
|
&:active .overview-icon { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
|
|
&:checked .overview-icon { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
|
|
}
|
|
|
|
// running app dot
|
|
.app-grid-running-dot {
|
|
// manually position the dot within the dash item
|
|
@if $contrast == 'high' {
|
|
offset-y: -$dash_padding - 1px; // don't draw dot directly on inset
|
|
} @else {
|
|
offset-y: -$dash_padding;
|
|
}
|
|
}
|
|
}
|
|
|
|
// separator between pinned and running apps
|
|
.dash-separator {
|
|
width: 1px;
|
|
margin-left:$base_margin;
|
|
margin-right:$base_margin;
|
|
background-color: $system_borders_color;
|
|
|
|
@if $contrast == 'high' {
|
|
width: 2px;
|
|
background-color: $hc_inset_color;
|
|
}
|
|
}
|
|
|
|
// make sure all dash components have same margin from screen edge
|
|
.dash-separator,
|
|
.dash-background {
|
|
margin-bottom: $dash_edge_offset;
|
|
}
|
|
}
|
|
|
|
// OSD Tooltip
|
|
.dash-label {
|
|
@extend %tooltip;
|
|
-y-offset: $base_margin * 2; // distance from the dash edge
|
|
}
|