aiden
/
Orchis-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
pull/276/head
vinceliuice 3 years ago
parent aa4c727648
commit 70f016363f
15 changed files with 605 additions and 609 deletions
Show Stats Download Patch File Download Diff File

77
src/_sass/gtk/_common-3.20.scss
Unescape Escape View File

@ -2536,6 +2536,43 @@ scale {
min-height: $slider_size; min-height: $slider_size;
min-width: $slider_size; min-width: $slider_size;
margin: $slider_margin; margin: $slider_margin;
transition: background-color $duration $ease-out,
background-size $ripple-fade-out-duration $ease-out,
background-image $ripple-fade-out-opacity-duration $ease-out;
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: $primary;
@each $s, $as in ('', ''),
(':disabled', '-disabled') {
&#{$s} {
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
radial-gradient(circle, transparent 10%, transparent 0%);
}
}
&:focus { background-color: $overlay-focus; }
&:hover { background-color: $overlay-hover; }
&:focus:hover { background-color: $overlay-focus-hover; }
&:active {
$_url: 'assets/scale-slider#{$asset-suffix}';
transition: background-color $duration $ease-out,
background-size 0ms,
background-image 0ms;
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
background-color: $overlay-hover;
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
radial-gradient(circle, $overlay-active 10%, transparent 0%);
background-size: auto, 0% 0%;
}
} }
// click-and-hold the slider to activate // click-and-hold the slider to activate
@ -2585,46 +2622,6 @@ scale {
&:disabled { background-color: transparent; } &:disabled { background-color: transparent; }
} }
slider {
transition: background-color $duration $ease-out,
background-size $ripple-fade-out-duration $ease-out,
background-image $ripple-fade-out-opacity-duration $ease-out;
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: $primary;
@each $s, $as in ('', ''),
(':disabled', '-disabled') {
&#{$s} {
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
radial-gradient(circle, transparent 10%, transparent 0%);
}
}
&:focus { background-color: $overlay-focus; }
&:hover { background-color: $overlay-hover; }
&:focus:hover { background-color: $overlay-focus-hover; }
&:active {
$_url: 'assets/scale-slider#{$asset-suffix}';
transition: background-color $duration $ease-out,
background-size 0ms,
background-image 0ms;
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
background-color: $overlay-hover;
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
radial-gradient(circle, $overlay-active 10%, transparent 0%);
background-size: auto, 0% 0%;
}
}
marks, marks,
value { color: $text-secondary; } value { color: $text-secondary; }

71
src/_sass/gtk/_common-4.0.scss
Unescape Escape View File

@ -2527,51 +2527,34 @@ scale {
background-color: $track; background-color: $track;
&:disabled { background-color: $track-disabled; } &:disabled { background-color: $track-disabled; }
}
// the colored part of the backing bit
> trough > highlight {
transition: background-image $duration $ease-out;
background-image: image($primary);
&:disabled {
background-color: $background;
background-image: image($text-secondary-disabled);
}
}
// this is another differently styled part of the backing bit, the most relevant use case is for example
// in media player to indicate how much video stream as been cached
> trough > fill {
transition: background-color $duration $ease-out;
background-color: $track;
&:disabled { background-color: transparent; } > slider {
}
> trough > slider {
transition: background-color $duration $ease-out, transition: background-color $duration $ease-out,
background-size 0, background-size $ripple-fade-out-duration $ease-out,
background-image 0; background-image $ripple-fade-out-opacity-duration $ease-out;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: auto, 0% 0%; background-size: auto, 1000% 1000%;
min-height: $slider_size; min-height: $slider_size;
min-width: $slider_size; min-width: $slider_size;
margin: $slider_margin; margin: $slider_margin;
border-radius: 50%; border-radius: 50%;
color: $primary; color: $primary;
background-color: transparent; background-color: transparent;
&, &:focus, &:hover, &:active {
border: none;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
border: none; }
@each $s, $as in ('', ''), @each $s, $as in ('', ''),
(':disabled', '-disabled') { (':disabled', '-disabled') {
&#{$s} { &#{$s} {
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}'; $_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')); background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
radial-gradient(circle, transparent 10%, transparent 0%);
} }
} }
@ -2588,10 +2571,31 @@ scale {
background-size 0ms, background-size 0ms,
background-image 0ms; background-image 0ms;
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards; animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
background-color: $overlay-hover;
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')), background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
radial-gradient(circle farthest-corner at center, $overlay-active 10%, transparent 0%); radial-gradient(circle, $overlay-active 10%, transparent 0%);
background-size: auto, 100% 100%; background-size: auto, 0% 0%;
color: $primary;
}
}
// the colored part of the backing bit
> highlight {
transition: background-image $duration $ease-out;
background-image: image($primary);
&:disabled {
background-color: $background;
background-image: image($text-secondary-disabled);
}
}
// this is another differently styled part of the backing bit, the most relevant use case is for example
// in media player to indicate how much video stream as been cached
> fill {
transition: background-color $duration $ease-out;
background-color: $track;
&:disabled { background-color: transparent; }
} }
} }
@ -2643,7 +2647,6 @@ scale {
transform: none; transform: none;
box-shadow: none; box-shadow: none;
border: none; border: none;
transition: $transition;
&:disabled { &:disabled {
box-shadow: none; box-shadow: none;
@ -2664,14 +2667,16 @@ scale {
&#{$state} { &#{$state} {
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}'; $_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')); background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
radial-gradient(circle, transparent 10%, transparent 0%);
} }
} }
&:active { &:active {
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}'; $_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}';
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')); background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
radial-gradient(circle, $overlay-active 10%, transparent 0%);
} }
} }
} }

8
src/_sass/gtk/_drawing-4.0.scss
Unescape Escape View File

@ -103,7 +103,7 @@
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: $button; background-color: $button;
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -125,7 +125,7 @@
border 0ms; border 0ms;
animation: ripple $ripple-fade-in-duration $ease-out forwards; animation: ripple $ripple-fade-in-duration $ease-out forwards;
box-shadow: inset 0 0 0 9999px $overlay-hover; box-shadow: inset 0 0 0 9999px $overlay-hover;
background-image: radial-gradient(circle farthest-corner at center, $overlay-active 10%, transparent 0%); background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -160,7 +160,7 @@
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: transparent; background-color: transparent;
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -183,7 +183,7 @@
background-image 0ms; background-image 0ms;
animation: ripple $ripple-fade-in-duration $ease-out forwards; animation: ripple $ripple-fade-in-duration $ease-out forwards;
box-shadow: inset 0 0 0 9999px $overlay-hover; box-shadow: inset 0 0 0 9999px $overlay-hover;
background-image: radial-gradient(circle farthest-corner at center, $overlay-active 10%, transparent 0%); background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: $text; color: $text;
} }

71
src/gtk/3.0/gtk-Compact.css
Unescape Escape View File

@ -2795,6 +2795,40 @@ scale slider {
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #1A73E8;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
} }
scale.fine-tune.horizontal { scale.fine-tune.horizontal {
@ -2842,43 +2876,6 @@ scale fill:disabled {
background-color: transparent; background-color: transparent;
} }
scale slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #1A73E8;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
}
scale marks, scale marks,
scale value { scale value {
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);

71
src/gtk/3.0/gtk-Dark-Compact.css
Unescape Escape View File

@ -2795,6 +2795,40 @@ scale slider {
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #3281EA;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled-dark.png"), url("assets/scale-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
} }
scale.fine-tune.horizontal { scale.fine-tune.horizontal {
@ -2842,43 +2876,6 @@ scale fill:disabled {
background-color: transparent; background-color: transparent;
} }
scale slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #3281EA;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled-dark.png"), url("assets/scale-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
}
scale marks, scale marks,
scale value { scale value {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);

71
src/gtk/3.0/gtk-Dark.css
Unescape Escape View File

@ -2795,6 +2795,40 @@ scale slider {
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #3281EA;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled-dark.png"), url("assets/scale-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
} }
scale.fine-tune.horizontal { scale.fine-tune.horizontal {
@ -2842,43 +2876,6 @@ scale fill:disabled {
background-color: transparent; background-color: transparent;
} }
scale slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #3281EA;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled-dark.png"), url("assets/scale-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
}
scale marks, scale marks,
scale value { scale value {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);

71
src/gtk/3.0/gtk-Light-Compact.css
Unescape Escape View File

@ -2795,6 +2795,40 @@ scale slider {
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #1A73E8;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
} }
scale.fine-tune.horizontal { scale.fine-tune.horizontal {
@ -2842,43 +2876,6 @@ scale fill:disabled {
background-color: transparent; background-color: transparent;
} }
scale slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #1A73E8;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
}
scale marks, scale marks,
scale value { scale value {
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);

71
src/gtk/3.0/gtk-Light.css
Unescape Escape View File

@ -2795,6 +2795,40 @@ scale slider {
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #1A73E8;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
} }
scale.fine-tune.horizontal { scale.fine-tune.horizontal {
@ -2842,43 +2876,6 @@ scale fill:disabled {
background-color: transparent; background-color: transparent;
} }
scale slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #1A73E8;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
}
scale marks, scale marks,
scale value { scale value {
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);

71
src/gtk/3.0/gtk.css
Unescape Escape View File

@ -2795,6 +2795,40 @@ scale slider {
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #1A73E8;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
} }
scale.fine-tune.horizontal { scale.fine-tune.horizontal {
@ -2842,43 +2876,6 @@ scale fill:disabled {
background-color: transparent; background-color: transparent;
} }
scale slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: #1A73E8;
}
scale slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
}
scale slider:focus {
background-color: alpha(currentColor, 0.08);
}
scale slider:hover {
background-color: alpha(currentColor, 0.08);
}
scale slider:focus:hover {
background-color: alpha(currentColor, 0.16);
}
scale slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 0% 0%;
}
scale marks, scale marks,
scale value { scale value {
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);

98
src/gtk/4.0/gtk-Compact.css
Unescape Escape View File

@ -593,7 +593,7 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: rgba(0, 0, 0, 0.04); background-color: rgba(0, 0, 0, 0.04);
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -612,7 +612,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: transparent; background-color: transparent;
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -698,7 +698,7 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
} }
@ -1019,7 +1019,7 @@ list > row button.image-button:not(.flat):checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -1270,7 +1270,7 @@ button.combo:only-child:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
} }
@ -2957,47 +2957,31 @@ scale > trough:disabled {
background-color: rgba(0, 0, 0, 0.12); background-color: rgba(0, 0, 0, 0.12);
} }
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#1A73E8);
}
scale > trough > highlight:disabled {
background-color: #F2F2F2;
background-image: image(rgba(0, 0, 0, 0.26));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(0, 0, 0, 0.26);
}
scale > trough > fill:disabled {
background-color: transparent;
}
scale > trough > slider { scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: auto, 0% 0%; background-size: auto, 1000% 1000%;
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
border-radius: 50%; border-radius: 50%;
color: #1A73E8; color: #1A73E8;
background-color: transparent; background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
border: none;
} }
scale > trough > slider { scale > trough > slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:disabled { scale > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:focus { scale > trough > slider:focus {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > slider:active { scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08); background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-size: auto, 0% 0%;
background-size: auto, 100% 100%; color: #1A73E8;
}
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#1A73E8);
}
scale > trough > highlight:disabled {
background-color: #F2F2F2;
background-image: image(rgba(0, 0, 0, 0.26));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(0, 0, 0, 0.26);
}
scale > trough > fill:disabled {
background-color: transparent;
} }
scale > marks, scale > marks,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none; transform: none;
box-shadow: none; box-shadow: none;
border: none; border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
} }
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled { scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
@ -3092,51 +3094,51 @@ scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-aft
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider { scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled { scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active { scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider { scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled { scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active { scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider { scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled { scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:active { scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider { scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled { scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:active { scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.color { scale.color {
@ -5512,7 +5514,7 @@ button.card.keyboard-activating, button.card:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -5520,7 +5522,7 @@ button.card:checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }

98
src/gtk/4.0/gtk-Dark-Compact.css
Unescape Escape View File

@ -593,7 +593,7 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: rgba(255, 255, 255, 0.04); background-color: rgba(255, 255, 255, 0.04);
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -612,7 +612,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: transparent; background-color: transparent;
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -698,7 +698,7 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: white; color: white;
} }
@ -1019,7 +1019,7 @@ list > row button.image-button:not(.flat):checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -1270,7 +1270,7 @@ button.combo:only-child:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: white; color: white;
} }
@ -2957,47 +2957,31 @@ scale > trough:disabled {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
} }
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#3281EA);
}
scale > trough > highlight:disabled {
background-color: #212121;
background-image: image(rgba(255, 255, 255, 0.3));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(255, 255, 255, 0.3);
}
scale > trough > fill:disabled {
background-color: transparent;
}
scale > trough > slider { scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: auto, 0% 0%; background-size: auto, 1000% 1000%;
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
border-radius: 50%; border-radius: 50%;
color: #3281EA; color: #3281EA;
background-color: transparent; background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
border: none;
} }
scale > trough > slider { scale > trough > slider {
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:disabled { scale > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled-dark.png"), url("assets/scale-slider-disabled-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-slider-disabled-dark.png"), url("assets/scale-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:focus { scale > trough > slider:focus {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > slider:active { scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08); background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-size: auto, 0% 0%;
background-size: auto, 100% 100%; color: #3281EA;
}
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#3281EA);
}
scale > trough > highlight:disabled {
background-color: #212121;
background-image: image(rgba(255, 255, 255, 0.3));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(255, 255, 255, 0.3);
}
scale > trough > fill:disabled {
background-color: transparent;
} }
scale > marks, scale > marks,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none; transform: none;
box-shadow: none; box-shadow: none;
border: none; border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
} }
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled { scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
@ -3092,51 +3094,51 @@ scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-aft
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider { scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled { scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled-dark.png"), url("assets/scale-horz-marks-before-slider-disabled-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled-dark.png"), url("assets/scale-horz-marks-before-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active { scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider { scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled { scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled-dark.png"), url("assets/scale-horz-marks-after-slider-disabled-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled-dark.png"), url("assets/scale-horz-marks-after-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active { scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider { scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled { scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled-dark.png"), url("assets/scale-vert-marks-before-slider-disabled-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled-dark.png"), url("assets/scale-vert-marks-before-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:active { scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider { scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled { scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled-dark.png"), url("assets/scale-vert-marks-after-slider-disabled-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled-dark.png"), url("assets/scale-vert-marks-after-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:active { scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.color { scale.color {
@ -5482,7 +5484,7 @@ button.card.keyboard-activating, button.card:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -5490,7 +5492,7 @@ button.card:checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }

98
src/gtk/4.0/gtk-Dark.css
Unescape Escape View File

@ -593,7 +593,7 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: rgba(255, 255, 255, 0.04); background-color: rgba(255, 255, 255, 0.04);
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -612,7 +612,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: transparent; background-color: transparent;
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -698,7 +698,7 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: white; color: white;
} }
@ -1019,7 +1019,7 @@ list > row button.image-button:not(.flat):checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -1270,7 +1270,7 @@ button.combo:only-child:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: white; color: white;
} }
@ -2957,47 +2957,31 @@ scale > trough:disabled {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
} }
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#3281EA);
}
scale > trough > highlight:disabled {
background-color: #212121;
background-image: image(rgba(255, 255, 255, 0.3));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(255, 255, 255, 0.3);
}
scale > trough > fill:disabled {
background-color: transparent;
}
scale > trough > slider { scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: auto, 0% 0%; background-size: auto, 1000% 1000%;
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
border-radius: 50%; border-radius: 50%;
color: #3281EA; color: #3281EA;
background-color: transparent; background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
border: none;
} }
scale > trough > slider { scale > trough > slider {
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:disabled { scale > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled-dark.png"), url("assets/scale-slider-disabled-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-slider-disabled-dark.png"), url("assets/scale-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:focus { scale > trough > slider:focus {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > slider:active { scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08); background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png")), radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-size: auto, 0% 0%;
background-size: auto, 100% 100%; color: #3281EA;
}
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#3281EA);
}
scale > trough > highlight:disabled {
background-color: #212121;
background-image: image(rgba(255, 255, 255, 0.3));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(255, 255, 255, 0.3);
}
scale > trough > fill:disabled {
background-color: transparent;
} }
scale > marks, scale > marks,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none; transform: none;
box-shadow: none; box-shadow: none;
border: none; border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
} }
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled { scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
@ -3092,51 +3094,51 @@ scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-aft
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider { scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled { scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled-dark.png"), url("assets/scale-horz-marks-before-slider-disabled-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled-dark.png"), url("assets/scale-horz-marks-before-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active { scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider { scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled { scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled-dark.png"), url("assets/scale-horz-marks-after-slider-disabled-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled-dark.png"), url("assets/scale-horz-marks-after-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active { scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider { scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled { scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled-dark.png"), url("assets/scale-vert-marks-before-slider-disabled-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled-dark.png"), url("assets/scale-vert-marks-before-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:active { scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider { scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled { scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled-dark.png"), url("assets/scale-vert-marks-after-slider-disabled-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled-dark.png"), url("assets/scale-vert-marks-after-slider-disabled-dark@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:active { scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.color { scale.color {
@ -5482,7 +5484,7 @@ button.card.keyboard-activating, button.card:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -5490,7 +5492,7 @@ button.card:checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }

98
src/gtk/4.0/gtk-Light-Compact.css
Unescape Escape View File

@ -593,7 +593,7 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: rgba(0, 0, 0, 0.04); background-color: rgba(0, 0, 0, 0.04);
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -612,7 +612,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: transparent; background-color: transparent;
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -698,7 +698,7 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
} }
@ -1019,7 +1019,7 @@ list > row button.image-button:not(.flat):checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -1270,7 +1270,7 @@ button.combo:only-child:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
} }
@ -2957,47 +2957,31 @@ scale > trough:disabled {
background-color: rgba(0, 0, 0, 0.12); background-color: rgba(0, 0, 0, 0.12);
} }
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#1A73E8);
}
scale > trough > highlight:disabled {
background-color: #F2F2F2;
background-image: image(rgba(0, 0, 0, 0.26));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(0, 0, 0, 0.26);
}
scale > trough > fill:disabled {
background-color: transparent;
}
scale > trough > slider { scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: auto, 0% 0%; background-size: auto, 1000% 1000%;
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
border-radius: 50%; border-radius: 50%;
color: #1A73E8; color: #1A73E8;
background-color: transparent; background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
border: none;
} }
scale > trough > slider { scale > trough > slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:disabled { scale > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:focus { scale > trough > slider:focus {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > slider:active { scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08); background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-size: auto, 0% 0%;
background-size: auto, 100% 100%; color: #1A73E8;
}
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#1A73E8);
}
scale > trough > highlight:disabled {
background-color: #F2F2F2;
background-image: image(rgba(0, 0, 0, 0.26));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(0, 0, 0, 0.26);
}
scale > trough > fill:disabled {
background-color: transparent;
} }
scale > marks, scale > marks,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none; transform: none;
box-shadow: none; box-shadow: none;
border: none; border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
} }
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled { scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
@ -3092,51 +3094,51 @@ scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-aft
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider { scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled { scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active { scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider { scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled { scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active { scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider { scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled { scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:active { scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider { scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled { scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:active { scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.color { scale.color {
@ -5471,7 +5473,7 @@ button.card.keyboard-activating, button.card:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -5479,7 +5481,7 @@ button.card:checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }

98
src/gtk/4.0/gtk-Light.css
Unescape Escape View File

@ -593,7 +593,7 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: rgba(0, 0, 0, 0.04); background-color: rgba(0, 0, 0, 0.04);
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -612,7 +612,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: transparent; background-color: transparent;
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -698,7 +698,7 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
} }
@ -1019,7 +1019,7 @@ list > row button.image-button:not(.flat):checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -1270,7 +1270,7 @@ button.combo:only-child:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
} }
@ -2957,47 +2957,31 @@ scale > trough:disabled {
background-color: rgba(0, 0, 0, 0.12); background-color: rgba(0, 0, 0, 0.12);
} }
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#1A73E8);
}
scale > trough > highlight:disabled {
background-color: #F2F2F2;
background-image: image(rgba(0, 0, 0, 0.26));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(0, 0, 0, 0.26);
}
scale > trough > fill:disabled {
background-color: transparent;
}
scale > trough > slider { scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: auto, 0% 0%; background-size: auto, 1000% 1000%;
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
border-radius: 50%; border-radius: 50%;
color: #1A73E8; color: #1A73E8;
background-color: transparent; background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
border: none;
} }
scale > trough > slider { scale > trough > slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:disabled { scale > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:focus { scale > trough > slider:focus {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > slider:active { scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08); background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-size: auto, 0% 0%;
background-size: auto, 100% 100%; color: #1A73E8;
}
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#1A73E8);
}
scale > trough > highlight:disabled {
background-color: #F2F2F2;
background-image: image(rgba(0, 0, 0, 0.26));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(0, 0, 0, 0.26);
}
scale > trough > fill:disabled {
background-color: transparent;
} }
scale > marks, scale > marks,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none; transform: none;
box-shadow: none; box-shadow: none;
border: none; border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
} }
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled { scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
@ -3092,51 +3094,51 @@ scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-aft
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider { scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled { scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active { scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider { scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled { scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active { scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider { scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled { scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:active { scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider { scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled { scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:active { scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.color { scale.color {
@ -5471,7 +5473,7 @@ button.card.keyboard-activating, button.card:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -5479,7 +5481,7 @@ button.card:checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }

98
src/gtk/4.0/gtk.css
Unescape Escape View File

@ -593,7 +593,7 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: rgba(0, 0, 0, 0.04); background-color: rgba(0, 0, 0, 0.04);
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -612,7 +612,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent; box-shadow: inset 0 0 0 9999px transparent;
background-color: transparent; background-color: transparent;
background-image: radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: radial-gradient(circle, transparent 0%, transparent 0%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 1000% 1000%; background-size: 1000% 1000%;
@ -698,7 +698,7 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
} }
@ -1019,7 +1019,7 @@ list > row button.image-button:not(.flat):checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -1270,7 +1270,7 @@ button.combo:only-child:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
} }
@ -2957,47 +2957,31 @@ scale > trough:disabled {
background-color: rgba(0, 0, 0, 0.12); background-color: rgba(0, 0, 0, 0.12);
} }
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#1A73E8);
}
scale > trough > highlight:disabled {
background-color: #F2F2F2;
background-image: image(rgba(0, 0, 0, 0.26));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(0, 0, 0, 0.26);
}
scale > trough > fill:disabled {
background-color: transparent;
}
scale > trough > slider { scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: auto, 0% 0%; background-size: auto, 1000% 1000%;
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
margin: -15px; margin: -15px;
border-radius: 50%; border-radius: 50%;
color: #1A73E8; color: #1A73E8;
background-color: transparent; background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
border: none;
} }
scale > trough > slider { scale > trough > slider {
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:disabled { scale > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-slider-disabled.png"), url("assets/scale-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale > trough > slider:focus { scale > trough > slider:focus {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > slider:active { scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple-on-slider 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-color: alpha(currentColor, 0.08); background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png")), radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-size: auto, 0% 0%;
background-size: auto, 100% 100%; color: #1A73E8;
}
scale > trough > highlight {
transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
background-image: image(#1A73E8);
}
scale > trough > highlight:disabled {
background-color: #F2F2F2;
background-image: image(rgba(0, 0, 0, 0.26));
}
scale > trough > fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: rgba(0, 0, 0, 0.26);
}
scale > trough > fill:disabled {
background-color: transparent;
} }
scale > marks, scale > marks,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none; transform: none;
box-shadow: none; box-shadow: none;
border: none; border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
} }
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled { scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
@ -3092,51 +3094,51 @@ scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-aft
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider { scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled { scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active { scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider { scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled { scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active { scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider { scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled { scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-before:not(.marks-after) > trough > slider:active { scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider { scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled { scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png")), radial-gradient(circle, transparent 10%, transparent 0%);
} }
scale.vertical.marks-after:not(.marks-before) > trough > slider:active { scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")); background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png")), radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
} }
scale.color { scale.color {
@ -5512,7 +5514,7 @@ button.card.keyboard-activating, button.card:active {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -5520,7 +5522,7 @@ button.card:checked {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08); box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%); background-image: radial-gradient(circle, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 100% 100%; background-size: 100% 100%;
} }

Write Preview
Loading…
Cancel
Save