92 lines
1.9 KiB
SCSS
Raw Normal View History

2021-05-16 09:31:41 +08:00
$popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($base_color, 8%), 0.95));
%popover_bubble {
color: $alt_fg_color;
background-color: $popover_bubble_bg;
border-radius: $mn_radius;
border: none;
box-shadow: none;
text-shadow: none;
&:hover, &:focus {
color: $fg_color;
background-color: if($variant == 'light', rgba($popover_bubble_bg, 1), rgba(lighten($popover_bubble_bg, 5%), 1));
2021-07-19 22:24:56 +08:00
box-shadow: 0 2px 3px rgba(black, 0.1) !important;
2021-05-16 09:31:41 +08:00
}
&:active {
color: $fg_color;
background-color: if($variant == 'light', darken($popover_bubble_bg, 1%), lighten($popover_bubble_bg, 3%));
box-shadow: none;
}
}
%show_apps_bigsur {
.show-apps-icon {
2021-06-28 09:52:08 +08:00
color: transparent !important;
2021-05-16 09:31:41 +08:00
background-image: url("assets/view-app-grid.svg");
background-size: contain;
}
2021-06-28 09:52:08 +08:00
&,
2021-05-16 09:31:41 +08:00
&:hover,
&:active,
&:checked,
&:focus {
2021-06-28 09:52:08 +08:00
.overview-icon, .show-apps-icon { color: transparent !important; }
2021-05-16 09:31:41 +08:00
}
}
%osd_panel {
color: $fg_color;
background-color: $base_color;
border: 1px solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
box-shadow: 0 3px 8px 0 rgba(black, 0.25);
border-radius: $bt_radius;
padding: 12px;
}
%search-section-content-item {
border-radius: $bt_radius;
padding: $base_padding;
transition-duration: 100ms;
text-align: center;
&:focus,
&:hover,
&:selected {
background-color: $light_divider_color;
transition-duration: 200ms;
}
&:active,
&:checked {
background-color: $light_track_color;
}
}
2021-04-08 22:59:05 +08:00
// links
.shell-link {
border-radius: $bt_radius;
color: $link_color;
&:hover {
color: $link_color;
background-color: rgba($link_color, $lower_opacity / 2);
}
&:active {
color: $link_color;
background-color: rgba($link_color, $lower_opacity);
}
}
// Outline for low res icons
.lowres-icon {
icon-shadow: 0 1px 2px rgba(black, 0.3);
}
// Dropshadow for large icons
.icon-dropshadow {
icon-shadow: 0 1px 5px rgba(black, 0.8);
}