by roundabout, Saturday, 12 May 2018, 08:45:23 (1526114723), pushed by roundabout, Sunday, 11 May 2025, 13:22:23 (1746969743)
Author identity: nana-4 <hnmaigo@gmail.com>
9afd512ad0167f21ce989f8a3e00e48e99f426c5
src/_sass/gtk/_common-3.20.scss
@@ -2323,22 +2323,25 @@ treeview.view radio:checked {
scale {
// sizing
$_marks_length: 8px;
$_marks_distance: 8px;
$_marks_distance: 7px;
$trough_size: 2px;
$finetune_trough_size: 4px;
$slider_size: 24px;
$marks_slider_size: 30px;
$slider_size: 32px;
$slider_margin: -($slider_size - $trough_size) / 2;
$marks_slider_margin: -($marks_slider_size - $trough_size) - $slider_margin;
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
$color_slider_margin: -($slider_size) / 2;
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
$color_slider_margin: -($slider_size) * 3 / 4;
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
min-height: $medium_size - $slider_size;
min-width: $medium_size - $slider_size;
padding: ($slider_size / 2);
min-height: $trough_size;
min-width: $trough_size;
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
// the slider is inside the trough, so to have make it bigger there's a negative margin
slider {
@@ -2347,10 +2350,28 @@ scale {
margin: $slider_margin;
}
// the backing bit
trough {
transition: $longer_transition;
outline-offset: 2px;
transition: background-color $longer_duration $deceleration_curve;
outline: none;
background-color: $track_color;
&:disabled { background-color: $divider_color; }
@@ -2358,7 +2379,7 @@ scale {
// the colored part of the backing bit
highlight {
transition: $longer_transition;
transition: background-color $longer_duration $deceleration_curve;
background-color: $accent_color;
&:disabled { background-color: transparent; }
@@ -2367,39 +2388,47 @@ scale {
// 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: $longer_transition;
transition: background-color $longer_duration $deceleration_curve;
background-color: $track_color;
&:disabled { background-color: transparent; }
}
slider {
transition: all $shorter_duration $standard_curve;
// border-radius: 100%;
// background-color: $accent_color;
transition: background-color $longer_duration $deceleration_curve,
background-size $ripple_duration $deceleration_curve,
background-image $ripple_opacity_duration $deceleration_curve;
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
border-radius: 50%;
color: transparent;
@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 farthest-corner at center,
currentColor 10%,
transparent 0%);
}
}
background-size: calc(100% - 10px);
&:focus { background-color: rgba($accent_color, 0.16); }
&:hover { background-size: calc(100% - 8px); }
&:hover { background-color: rgba($accent_color, 0.12); }
&:active { background-size: calc(100% - 6px); }
}
// click-and-hold the slider to activate
&.fine-tune {
// to make the slider shrink in fine-tune mode
slider { background-size: calc(100% - 12px); }
&:active {
transition: background-color $longer_duration $deceleration_curve,
background-size 0,
background-image 0;
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
background-size: auto, 0% 0%;
background-color: rgba($accent_color, 0.12);
color: rgba($accent_color, 0.12);
}
}
marks label,
@@ -2410,8 +2439,8 @@ scale {
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
(bottom, bottom, top),
(top, left, right),
(bottom, right, left) {
(left, left, right),
(right, right, left) {
&.#{$marks_class} {
margin-#{$marks_margin}: $_marks_distance;
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
@@ -2419,6 +2448,18 @@ scale {
}
}
&.horizontal {
indicator {
min-height: $_marks_length;
@@ -2446,73 +2487,12 @@ 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 farthest-corner at center,
currentColor 10%,
transparent 0%);
}
}
@if $dir_class == 'horizontal' {
min-height: $marks_slider_size;
min-width: $slider_size;
@if $marks_infix == 'marks-before' {
margin-top: $marks_slider_margin;
background-position: center calc(100% - 5px);
&:hover { background-position: center calc(100% - 4px); }
&:active { background-position: center calc(100% - 3px); }
}
@if $marks_infix == 'marks-after' {
margin-bottom: $marks_slider_margin;
background-position: center calc(5px);
&:hover { background-position: center calc(4px); }
&:active { background-position: center calc(3px); }
}
}
@if $dir_class == 'vertical' {
min-height: $slider_size;
min-width: $marks_slider_size;
@if $marks_infix == 'marks-before' {
margin-left: $marks_slider_margin;
background-position: calc(5px) center;
&:hover { background-position: calc(4px) center; }
&:active { background-position: calc(3px) center; }
}
@if $marks_infix == 'marks-after' {
margin-right: $marks_slider_margin;
background-position: calc(100% - 5px) center;
&:hover { background-position: calc(100% - 4px) center; }
&:active { background-position: calc(100% - 3px) center; }
}
}
}
&.fine-tune slider {
@if $dir_class == 'horizontal' {
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
}
@if $dir_class == 'vertical' {
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
}
}
}
}
src/_sass/gtk/_drawing-3.20.scss
@@ -7,6 +7,10 @@
to { background-size: 1000% 1000%; }
}
@keyframes header_ripple_effect {
from {
background-image: radial-gradient(circle farthest-corner at center,
src/gtk/assets.svg
@@ -125,16 +125,15 @@
<rect id="button-fill" width="24" height="24" rx="2" ry="2"/>
<path id="check-path" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
<path id="slider-fill" d="M 21,10.5 A 10.5,10.5 0 0 1 10.5,21 10.5,10.5 0 0 1 0,10.5 10.5,10.5 0 0 1 10.5,0 10.5,10.5 0 0 1 21,10.5 Z"/>
<path id="slider-stroke" d="m10.5 0a10.5 10.5 0 0 0 -10.5 10.5 10.5 10.5 0 0 0 10.5 10.5 10.5 10.5 0 0 0 10.5 -10.5 10.5 10.5 0 0 0 -10.5 -10.5zm0 3a7.5 7.5 0 0 1 7.5 7.5 7.5 7.5 0 0 1 -7.5 7.5 7.5 7.5 0 0 1 -7.5 -7.5 7.5 7.5 0 0 1 7.5 -7.5z"/>
<path id="marks-slider-fill" d="m10.5 0a10.5 10.5 0 0 0 -10.5 10.5 10.5 10.5 0 0 0 10.5 10.5h10.5v-10.5a10.5 10.5 0 0 0 -10.5 -10.5z"/>
<path id="marks-slider-stroke" d="m10.5 0a10.5 10.5 0 0 0 -10.5 10.5 10.5 10.5 0 0 0 10.5 10.5h10.5v-10.5a10.5 10.5 0 0 0 -10.5 -10.5zm0 3a7.5 7.5 0 0 1 7.5 7.5v7.5h-7.5a7.5 7.5 0 0 1 -7.5 -7.5 7.5 7.5 0 0 1 7.5 -7.5z"/>
<circle id="slider-fill" cx="12" cy="12" r="6"/>
<circle id="slider-stroke" cx="12" cy="12" r="5"/>
<path id="marks-slider-fill" d="M12 6a6 6 0 0 0-6 6 6 6 0 0 0 6 6h6v-6a6 6 0 0 0-6-6z"/>
<path id="marks-slider-stroke" d="M12 7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h5v-5a5 5 0 0 0-5-5z"/>
<rect id="box-fill" width="32" height="32" rx="2" ry="2"/>
<rect id="16x16" width="16" height="16" opacity="0"/>
<rect id="21x21" width="21" height="21" opacity="0"/>
<rect id="21x26" width="21" height="26" opacity="0"/>
<rect id="24x24" width="24" height="24" opacity="0"/>
<rect id="40x40" width="40" height="40" opacity="0"/>
<rect id="48x48" width="48" height="48" opacity="0"/>
@@ -270,47 +269,47 @@
</g>
<g id="base-scale-slider">
<use xlink:href="#21x21"/>
<use xlink:href="#24x24"/>
<use xlink:href="#slider-fill" fill="url(#color-accent)"/>
</g>
<g id="base-scale-slider-disabled">
<use xlink:href="#21x21"/>
<use xlink:href="#24x24"/>
<use xlink:href="#slider-fill" fill="url(#color-bg)"/>
<use xlink:href="#slider-stroke" fill="url(#color-divider)"/>
<use xlink:href="#slider-stroke" fill="none" stroke="url(#color-divider)" stroke-width="2"/>
</g>
<g id="base-scale-slider-disabled-dark">
<use xlink:href="#21x21"/>
<use xlink:href="#24x24"/>
<use xlink:href="#slider-fill" fill="url(#color-bg-dark)"/>
<use xlink:href="#slider-stroke" fill="url(#color-divider-dark)"/>
<use xlink:href="#slider-stroke" fill="none" stroke="url(#color-divider-dark)" stroke-width="2"/>
</g>
<g id="base-scale-horz-marks-after-slider">
<use xlink:href="#21x26"/>
<use xlink:href="#marks-slider-fill" transform="rotate(45 10.5 10.5)" fill="url(#color-accent)"/>
<use xlink:href="#24x24"/>
<use xlink:href="#marks-slider-fill" transform="rotate(45 12 12)" fill="url(#color-accent)"/>
</g>
<use xlink:href="#base-scale-horz-marks-after-slider" id="base-scale-vert-marks-before-slider" transform="rotate(90 10.5 10.5)"/>
<use xlink:href="#base-scale-horz-marks-after-slider" id="base-scale-horz-marks-before-slider" transform="rotate(180 10.5 10.5)"/>
<use xlink:href="#base-scale-horz-marks-after-slider" id="base-scale-vert-marks-after-slider" transform="rotate(270 10.5 10.5)"/>
<use xlink:href="#base-scale-horz-marks-after-slider" id="base-scale-vert-marks-before-slider" transform="rotate(90 12 12)"/>
<use xlink:href="#base-scale-horz-marks-after-slider" id="base-scale-horz-marks-before-slider" transform="rotate(180 12 12)"/>
<use xlink:href="#base-scale-horz-marks-after-slider" id="base-scale-vert-marks-after-slider" transform="rotate(270 12 12)"/>
<g id="base-scale-horz-marks-after-slider-disabled">
<use xlink:href="#21x26"/>
<use xlink:href="#marks-slider-fill" transform="rotate(45 10.5 10.5)" fill="url(#color-bg)"/>
<use xlink:href="#marks-slider-stroke" transform="rotate(45 10.5 10.5)" fill="url(#color-divider)"/>
<use xlink:href="#24x24"/>
<use xlink:href="#marks-slider-fill" transform="rotate(45 12 12)" fill="url(#color-bg)"/>
<use xlink:href="#marks-slider-stroke" transform="rotate(45 12 12)" fill="none" stroke="url(#color-divider)" stroke-width="2"/>
</g>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled" id="base-scale-vert-marks-before-slider-disabled" transform="rotate(90 10.5 10.5)"/>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled" id="base-scale-horz-marks-before-slider-disabled" transform="rotate(180 10.5 10.5)"/>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled" id="base-scale-vert-marks-after-slider-disabled" transform="rotate(270 10.5 10.5)"/>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled" id="base-scale-vert-marks-before-slider-disabled" transform="rotate(90 12 12)"/>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled" id="base-scale-horz-marks-before-slider-disabled" transform="rotate(180 12 12)"/>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled" id="base-scale-vert-marks-after-slider-disabled" transform="rotate(270 12 12)"/>
<g id="base-scale-horz-marks-after-slider-disabled-dark">
<use xlink:href="#21x26"/>
<use xlink:href="#marks-slider-fill" transform="rotate(45 10.5 10.5)" fill="url(#color-bg-dark)"/>
<use xlink:href="#marks-slider-stroke" transform="rotate(45 10.5 10.5)" fill="url(#color-divider-dark)"/>
<use xlink:href="#24x24"/>
<use xlink:href="#marks-slider-fill" transform="rotate(45 12 12)" fill="url(#color-bg-dark)"/>
<use xlink:href="#marks-slider-stroke" transform="rotate(45 12 12)" fill="none" stroke="url(#color-divider-dark)" stroke-width="2"/>
</g>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled-dark" id="base-scale-vert-marks-before-slider-disabled-dark" transform="rotate(90 10.5 10.5)"/>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled-dark" id="base-scale-horz-marks-before-slider-disabled-dark" transform="rotate(180 10.5 10.5)"/>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled-dark" id="base-scale-vert-marks-after-slider-disabled-dark" transform="rotate(270 10.5 10.5)"/>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled-dark" id="base-scale-vert-marks-before-slider-disabled-dark" transform="rotate(90 12 12)"/>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled-dark" id="base-scale-horz-marks-before-slider-disabled-dark" transform="rotate(180 12 12)"/>
<use xlink:href="#base-scale-horz-marks-after-slider-disabled-dark" id="base-scale-vert-marks-after-slider-disabled-dark" transform="rotate(270 12 12)"/>
<g id="base-box">
<use xlink:href="#48x48"/>