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-width: $slider_size;
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
@ -2585,46 +2622,6 @@ scale {
&: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,
value { color: $text-secondary; }

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

@ -2527,51 +2527,34 @@ scale {
background-color: $track;
&: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; }
}
> trough > slider {
> slider {
transition: background-color $duration $ease-out,
background-size 0,
background-image 0;
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, 0% 0%;
background-size: auto, 1000% 1000%;
min-height: $slider_size;
min-width: $slider_size;
margin: $slider_margin;
border-radius: 50%;
color: $primary;
background-color: transparent;
&, &:focus, &:hover, &:active {
border: none;
box-shadow: none;
outline: none;
border: none;
}
@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'));
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-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 farthest-corner at center, $overlay-active 10%, transparent 0%);
background-size: auto, 100% 100%;
radial-gradient(circle, $overlay-active 10%, transparent 0%);
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;
box-shadow: none;
border: none;
transition: $transition;
&:disabled {
box-shadow: none;
@ -2664,14 +2667,16 @@ scale {
&#{$state} {
$_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 {
$_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;
box-shadow: inset 0 0 0 9999px transparent;
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-position: center;
background-size: 1000% 1000%;
@ -125,7 +125,7 @@
border 0ms;
animation: ripple $ripple-fade-in-duration $ease-out forwards;
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%;
}
@ -160,7 +160,7 @@
outline: none;
box-shadow: inset 0 0 0 9999px 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-position: center;
background-size: 1000% 1000%;
@ -183,7 +183,7 @@
background-image 0ms;
animation: ripple $ripple-fade-in-duration $ease-out forwards;
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%;
color: $text;
}

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

@ -2795,6 +2795,40 @@ scale slider {
min-height: 32px;
min-width: 32px;
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 {
@ -2842,43 +2876,6 @@ scale fill:disabled {
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 value {
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-width: 32px;
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 {
@ -2842,43 +2876,6 @@ scale fill:disabled {
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 value {
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-width: 32px;
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 {
@ -2842,43 +2876,6 @@ scale fill:disabled {
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 value {
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-width: 32px;
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 {
@ -2842,43 +2876,6 @@ scale fill:disabled {
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 value {
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-width: 32px;
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 {
@ -2842,43 +2876,6 @@ scale fill:disabled {
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 value {
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-width: 32px;
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 {
@ -2842,43 +2876,6 @@ scale fill:disabled {
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 value {
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;
box-shadow: inset 0 0 0 9999px transparent;
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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none;
box-shadow: inset 0 0 0 9999px 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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
color: rgba(0, 0, 0, 0.87);
}
@ -2957,47 +2957,31 @@ scale > trough:disabled {
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 {
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-position: center;
background-size: auto, 0% 0%;
background-size: auto, 1000% 1000%;
min-height: 32px;
min-width: 32px;
margin: -15px;
border-radius: 50%;
color: #1A73E8;
background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none;
outline: none;
border: none;
}
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 {
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 {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > 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 farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 100% 100%;
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%;
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,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none;
box-shadow: 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 {
@ -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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}

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;
box-shadow: inset 0 0 0 9999px transparent;
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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none;
box-shadow: inset 0 0 0 9999px 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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
color: white;
}
@ -2957,47 +2957,31 @@ scale > trough:disabled {
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 {
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-position: center;
background-size: auto, 0% 0%;
background-size: auto, 1000% 1000%;
min-height: 32px;
min-width: 32px;
margin: -15px;
border-radius: 50%;
color: #3281EA;
background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none;
outline: none;
border: none;
}
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 {
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 {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > 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 farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 100% 100%;
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%;
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,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none;
box-shadow: 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 {
@ -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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}

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;
box-shadow: inset 0 0 0 9999px transparent;
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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none;
box-shadow: inset 0 0 0 9999px 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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
color: white;
}
@ -2957,47 +2957,31 @@ scale > trough:disabled {
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 {
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-position: center;
background-size: auto, 0% 0%;
background-size: auto, 1000% 1000%;
min-height: 32px;
min-width: 32px;
margin: -15px;
border-radius: 50%;
color: #3281EA;
background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none;
outline: none;
border: none;
}
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 {
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 {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > 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 farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 100% 100%;
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%;
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,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none;
box-shadow: 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 {
@ -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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}

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;
box-shadow: inset 0 0 0 9999px transparent;
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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none;
box-shadow: inset 0 0 0 9999px 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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
color: rgba(0, 0, 0, 0.87);
}
@ -2957,47 +2957,31 @@ scale > trough:disabled {
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 {
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-position: center;
background-size: auto, 0% 0%;
background-size: auto, 1000% 1000%;
min-height: 32px;
min-width: 32px;
margin: -15px;
border-radius: 50%;
color: #1A73E8;
background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none;
outline: none;
border: none;
}
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 {
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 {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > 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 farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 100% 100%;
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%;
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,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none;
box-shadow: 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 {
@ -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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}

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;
box-shadow: inset 0 0 0 9999px transparent;
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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none;
box-shadow: inset 0 0 0 9999px 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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
color: rgba(0, 0, 0, 0.87);
}
@ -2957,47 +2957,31 @@ scale > trough:disabled {
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 {
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-position: center;
background-size: auto, 0% 0%;
background-size: auto, 1000% 1000%;
min-height: 32px;
min-width: 32px;
margin: -15px;
border-radius: 50%;
color: #1A73E8;
background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none;
outline: none;
border: none;
}
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 {
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 {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > 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 farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 100% 100%;
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%;
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,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none;
box-shadow: 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 {
@ -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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}

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;
box-shadow: inset 0 0 0 9999px transparent;
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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -662,7 +662,7 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
outline: none;
box-shadow: inset 0 0 0 9999px 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-position: center;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
color: rgba(0, 0, 0, 0.87);
}
@ -2957,47 +2957,31 @@ scale > trough:disabled {
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 {
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-position: center;
background-size: auto, 0% 0%;
background-size: auto, 1000% 1000%;
min-height: 32px;
min-width: 32px;
margin: -15px;
border-radius: 50%;
color: #1A73E8;
background-color: transparent;
}
scale > trough > slider, scale > trough > slider:focus, scale > trough > slider:hover, scale > trough > slider:active {
border: none;
box-shadow: none;
outline: none;
border: none;
}
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 {
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 {
@ -3015,9 +2999,28 @@ scale > trough > slider:focus:hover {
scale > trough > 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 farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: auto, 100% 100%;
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%;
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,
@ -3084,7 +3087,6 @@ scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.m
transform: none;
box-shadow: 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 {
@ -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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}
@ -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;
animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
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%;
}

Write Preview
Loading…
Cancel
Save