You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
2.0 KiB
49 lines
2.0 KiB
// SCSS reused directly from other projects. |
|
|
|
// https://gitlab.gnome.org/GNOME/libadwaita/-/blob/1.6.1/src/stylesheet/_colors.scss |
|
$focus_border_color: color-mix(in srgb, var(--accent-color) var(--focus-border-opacity), transparent); |
|
$hover_color: color-mix(in srgb, currentColor 7%, transparent); |
|
$active_color: color-mix(in srgb, currentColor 16%, transparent); |
|
$selected_color: color-mix(in srgb, currentColor 10%, transparent); |
|
$selected_hover_color: color-mix(in srgb, currentColor 13%, transparent); |
|
$selected_active_color: color-mix(in srgb, currentColor 19%, transparent); |
|
$osd_fg_color: RGB(255 255 255 / 90%); |
|
|
|
// Adapted from the same file but converted to CSS variable to use media query. |
|
:root { |
|
@media not (prefers-contrast: more) { |
|
--focus-border-opacity: 50%; |
|
} |
|
|
|
@media (prefers-contrast: more) { |
|
--focus-border-opacity: 80%; |
|
} |
|
} |
|
|
|
// https://gitlab.gnome.org/GNOME/libadwaita/-/blob/1.6.1/src/stylesheet/widgets/_buttons.scss |
|
$button_color: color-mix(in srgb, currentColor 10%, transparent); |
|
$button_hover_color: color-mix(in srgb, currentColor 15%, transparent); |
|
$button_active_color: color-mix(in srgb, currentColor 30%, transparent); |
|
|
|
// https://gitlab.gnome.org/GNOME/libadwaita/-/blob/1.6.1/src/stylesheet/_common.scss |
|
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); |
|
$focus_transition: outline-color 200ms $ease-out-quad, |
|
outline-width 200ms $ease-out-quad, |
|
outline-offset 200ms $ease-out-quad; |
|
$card_radius: 12px; |
|
$menu_radius: 9px; |
|
|
|
// https://gitlab.gnome.org/GNOME/libadwaita/-/blob/1.6.1/src/stylesheet/_drawing.scss |
|
@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: ':focus:focus-visible', $transition: null) { |
|
& #{$target} { |
|
outline: 0 solid transparent; |
|
outline-offset: if($outer, $offset + 4px, $offset + $width + 4px); |
|
transition: $focus_transition, $transition; |
|
} |
|
|
|
&#{$focus-state} #{$target} { |
|
outline-color: $focus_border_color; |
|
outline-width: $width; |
|
outline-offset: $offset; |
|
} |
|
}
|
|
|