git.stevedylan.dev

gtk-4.0/widgets/_scales.scss 10.0 K raw

/************
 * GtkScale *
 ************/
%scale_trough {
  background-color: $scale_bg;
  border: none;
  border-radius: 3px;
  margin: 0;

  &:disabled { background-color: $scale_disabled_bg; }

  &:backdrop {
    background-color: $scale_disabled_bg; 
    transition: $backdrop_transition;

    &:disabled { background-color: $scale_disabled_bg;  }
  }
}

%scale_highlight {
  border: none;
  background-color: $selected_bg_color;
  border-radius: 3px;
  margin: 0;

  &:disabled {
    border: none;
    background-color: $scale_bg;
  }

  &:backdrop,
  &:active:backdrop {
    border-color: lighten($selected_bg_color, 5%);
    background-color: lighten($selected_bg_color, 5%);
    &:disabled {
      background-color: $scale_disabled_bg;
    }
  }
}

scale {
  // sizing
  $_marks_length: 6px;
  $_marks_distance: 6px;

  min-height: 16px;
  min-width: 16px;
  padding: 8px;

  &.horizontal {
    trough,
    progress { min-height: 6px; }
  }

  &.vertical {
    trough,
    progress { min-width: 6px; }
  }

  // the slider is inside the trough, so to have make it bigger there's a negative margin

  slider {
    min-height: 16px;
    min-width: 16px;
    margin: -7px;

    background-color: $base_color;
    box-shadow: inset 0 1px $top_highlight,
                0px 0px 1px 1px rgba(0,0,0,0.1);
    border-radius: 12px;

    transition: $button_transition;
    transition-property: background, border, box-shadow;

    &:active {
      background-color: $selected_bg_color;

      &:disabled {
        background-color: $insensitive_bg_color;
        box-shadow: inset 0 1px $top_highlight,
                    0px 0px 1px 1px rgba(0,0,0,0.05);
      }
    }
  }

  // click-and-hold the slider to activate
  &.fine-tune {
    &.horizontal {
      padding-top: 9px;
      padding-bottom: 9px;
      min-height: 16px;
    }

    &.vertical {
      padding-left: 9px;
      padding-right: 9px;
      min-width: 16px;
    }

    // to make the trough grow in fine-tune mode
    slider { margin: -6px; }

    fill,
    highlight,
    trough {
      border-radius: 5px;
    }
  }

  // the backing bit
  trough {
    @extend %scale_trough;

    outline-offset: 2px;
    outline-color: transparent;
  }

  // the colored part of the backing bit
  highlight { @extend %scale_highlight; }

  // 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 {
    @extend %scale_trough;

    &:backdrop, & { background-color: $borders_color; }

    &:disabled {
      &:backdrop, & {
        border-color: transparent;
        background-color: transparent;
      }
    }

    // OSD
    .osd & {
      background-color: mix($osd_fg_color, $osd_borders_color, 25%);

      &:disabled {
        &:backdrop, & {
          border-color: transparent;
          background-color: transparent;
        }
      }
    }
  }

  $_scale_bg: if($variant == 'light', $base_color, darken(#fefefe, 5%));
  $_scale_disabled_bg: darken($_scale_bg, 25%);
  slider {
    border-color: $_scale_bg;
    border: none;
    border-radius: 12px;

    background-color: $_scale_bg;

    &:hover { @include button(hover-alt, $edge: $shadow_color); }

    &:active { border-color: $selected_borders_color; }

    &:disabled {
      background-color: $_scale_disabled_bg;
      box-shadow: inset 0 1px $top_highlight,
                  0px 0px 1px 1px rgba(0,0,0,0.1);
      }

    &:backdrop,
    &:backdrop:disabled {
      transition: $backdrop_transition;

      background-color: $_scale_disabled_bg;
      box-shadow: inset 0 1px $top_highlight,
                  0px 0px 1px 1px rgba(0,0,0,0.1);
    }

    // ...on selected list rows
    row:selected & { &:disabled, & { border-color: $selected_borders_color; } }

    // OSD
    .osd & {
      @include button(osd);
      border-color: darken($osd_borders_color, 3%);
      background-color: opacify($_scale_bg, 1); // solid background needed here

      &:hover {
        @include button(osd-hover);
        background-color: opacify($_scale_bg, 1); // solid background needed here
      }

      &:active {
        @include button(osd-active);
        background-color: opacify($_scale_bg, 1); // solid background needed here
      }

      &:disabled {
        @include button(osd-insensitive);
        background-color: opacify($_scale_bg, 1); // solid background needed here
      }

      &:backdrop {
        @include button(osd-backdrop, $_scale_disabled_bg);
        background-color: opacify($_scale_disabled_bg, 1); // solid background needed here

        &:disabled {
          @include button(osd-backdrop-insensitive);
          background-color: opacify($_scale_bg, 1); // solid background needed here
        }
      }
    }
  }

  value { color: gtkalpha(currentColor, 0.4); }

  &.horizontal {
    > marks {
      color: gtkalpha(currentColor, 0.55);
      &.top    { margin-bottom: $_marks_distance; }
      &.bottom { margin-top: $_marks_distance; }

      indicator {
        background-color: currentColor;
        min-height: $_marks_length;
        min-width: 1px;
      }
    }

    > value.left  { margin-right: 9px; }
    > value.right { margin-left: 9px; }

    &.fine-tune >marks {
      &.top { margin-top: 3px; }
      &.bottom { margin-bottom: 3px; }

      indicator { min-height: ($_marks_length - 3px); }
    }
  }

  &.vertical {
    > marks {
      color: gtkalpha(currentColor, 0.55);
      &.top    { margin-right: $_marks_distance; }
      &.bottom { margin-left: $_marks_distance; }

      indicator {
        background-color: currentColor;
        min-height: 1px;
        min-width: $_marks_length;
      }
    }

    > value.top    { margin-bottom: 9px; }
    > value.bottom { margin-top: 9px; }

    &.fine-tune >marks {
      &.top { margin-left: 3px; }
      &.bottom { margin-right: 3px; }

      indicator { min-height: ($_marks_length - 3px); }
    }
  }

  &.horizontal {
    indicator {
      min-height: $_marks_length;
      min-width: 1px;
    }

    &.fine-tune indicator { min-height: ($_marks_length - 3px); }
  }

  &.vertical {
    indicator {
      min-height: 1px;
      min-width: $_marks_length;
    }

    &.fine-tune indicator { min-width: ($_marks_length - 3px); }
  }

  // *WARNING* scale with marks madness following

  // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
  $suffix: if($variant == 'light', '', '-dark');

  @each $dir_class, $dir_infix in ('horizontal', 'horz'),
                                  ('vertical', 'vert') {
    @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
                                        ('scale-has-marks-below', 'marks-after:not(.marks-before)') {
      @each $state, $state_infix in ('', ''),
                                    (':hover', '-hover'),
                                    (':active', '-active'),
                                    (':disabled', '-insensitive'),
                                    (':backdrop', '-backdrop'),
                                    (':backdrop:disabled', '-backdrop-insensitive') {
        &.#{$dir_class}.#{$marks_class} {

          slider {
            &#{$state} {
              // an asymmetric slider asset is used here, so the margins are uneven, the smaller
              // margin is set on the point side.
              min-height: 16px;
              min-width: 16px;
              margin: -7px;
              border: none;
              border-radius: 50%;

              background-color: $_scale_bg;
              box-shadow: none;
              }
          }

          &.fine-tune slider {
            // bigger negative margins to make the trough grow here as well
            margin: -7px;
          }
        }
      }
    }
  }

  &.color {
    min-height: 0;
    min-width: 0;

    trough {
      background-image: image($borders_color);
      background-repeat: no-repeat;
    }

    &.horizontal {
      padding: 0 0 15px 0;

      trough {
        padding-bottom: 4px;
        background-position: 0 -3px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      slider {
        &:dir(ltr), &:dir(rtl) { // specificity bumb
          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
            margin-bottom: -15px;
            margin-top: 6px;
          }
        }
      }
    }

    &.vertical {
      &:dir(ltr) {
        padding: 0 0 0 15px;

        trough {
          padding-left: 4px;
          background-position: 3px 0;
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }

        slider {
          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
            margin-left: -15px;
            margin-right: 6px;
          }
        }
      }

      &:dir(rtl) {
        padding: 0 15px 0 0;

        trough {
          padding-right: 4px;
          background-position: -3px 0;
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }

        slider {
          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
            margin-right: -15px;
            margin-left: 6px;
          }
        }
      }
    }

    &.fine-tune {
      &.horizontal {
        &:dir(ltr), &:dir(rtl) { // specificity bump
          padding: 0 0 12px 0;

          trough {
            padding-bottom: 7px;
            background-position: 0 -6px;
          }

          slider {
            margin-bottom: -15px;
            margin-top: 6px;
          }
        }
      }

      &.vertical {
        &:dir(ltr) {
          padding: 0 0 0 12px;

          trough {
            padding-left: 7px;
            background-position: 6px 0;
          }

          slider {
            margin-left: -15px;
            margin-right: 6px;
          }
        }

        &:dir(rtl) {
          padding: 0 12px 0 0;

          trough {
            padding-right: 7px;
            background-position: -6px 0;
          }

          slider {
            margin-right: -15px;
            margin-left: 6px;
          }
        }
      }
    }
  }
}

1	/************
2	* GtkScale *
3	************/
4	%scale_trough {
5	background-color: $scale_bg;
6	border: none;
7	border-radius: 3px;
8	margin: 0;
9
10	&:disabled { background-color: $scale_disabled_bg; }
11
12	&:backdrop {
13	background-color: $scale_disabled_bg;
14	transition: $backdrop_transition;
15
16	&:disabled { background-color: $scale_disabled_bg; }
17	}
18	}
19
20	%scale_highlight {
21	border: none;
22	background-color: $selected_bg_color;
23	border-radius: 3px;
24	margin: 0;
25
26	&:disabled {
27	border: none;
28	background-color: $scale_bg;
29	}
30
31	&:backdrop,
32	&:active:backdrop {
33	border-color: lighten($selected_bg_color, 5%);
34	background-color: lighten($selected_bg_color, 5%);
35	&:disabled {
36	background-color: $scale_disabled_bg;
37	}
38	}
39	}
40
41	scale {
42	// sizing
43	$_marks_length: 6px;
44	$_marks_distance: 6px;
45
46	min-height: 16px;
47	min-width: 16px;
48	padding: 8px;
49
50	&.horizontal {
51	trough,
52	progress { min-height: 6px; }
53	}
54
55	&.vertical {
56	trough,
57	progress { min-width: 6px; }
58	}
59
60	// the slider is inside the trough, so to have make it bigger there's a negative margin
61
62	slider {
63	min-height: 16px;
64	min-width: 16px;
65	margin: -7px;
66
67	background-color: $base_color;
68	box-shadow: inset 0 1px $top_highlight,
69	0px 0px 1px 1px rgba(0,0,0,0.1);
70	border-radius: 12px;
71
72	transition: $button_transition;
73	transition-property: background, border, box-shadow;
74
75	&:active {
76	background-color: $selected_bg_color;
77
78	&:disabled {
79	background-color: $insensitive_bg_color;
80	box-shadow: inset 0 1px $top_highlight,
81	0px 0px 1px 1px rgba(0,0,0,0.05);
82	}
83	}
84	}
85
86	// click-and-hold the slider to activate
87	&.fine-tune {
88	&.horizontal {
89	padding-top: 9px;
90	padding-bottom: 9px;
91	min-height: 16px;
92	}
93
94	&.vertical {
95	padding-left: 9px;
96	padding-right: 9px;
97	min-width: 16px;
98	}
99
100	// to make the trough grow in fine-tune mode
101	slider { margin: -6px; }
102
103	fill,
104	highlight,
105	trough {
106	border-radius: 5px;
107	}
108	}
109
110	// the backing bit
111	trough {
112	@extend %scale_trough;
113
114	outline-offset: 2px;
115	outline-color: transparent;
116	}
117
118	// the colored part of the backing bit
119	highlight { @extend %scale_highlight; }
120
121	// this is another differently styled part of the backing bit, the most relevant use case is for example
122	// in media player to indicate how much video stream as been cached
123	fill {
124	@extend %scale_trough;
125
126	&:backdrop, & { background-color: $borders_color; }
127
128	&:disabled {
129	&:backdrop, & {
130	border-color: transparent;
131	background-color: transparent;
132	}
133	}
134
135	// OSD
136	.osd & {
137	background-color: mix($osd_fg_color, $osd_borders_color, 25%);
138
139	&:disabled {
140	&:backdrop, & {
141	border-color: transparent;
142	background-color: transparent;
143	}
144	}
145	}
146	}
147
148	$_scale_bg: if($variant == 'light', $base_color, darken(#fefefe, 5%));
149	$_scale_disabled_bg: darken($_scale_bg, 25%);
150	slider {
151	border-color: $_scale_bg;
152	border: none;
153	border-radius: 12px;
154
155	background-color: $_scale_bg;
156
157	&:hover { @include button(hover-alt, $edge: $shadow_color); }
158
159	&:active { border-color: $selected_borders_color; }
160
161	&:disabled {
162	background-color: $_scale_disabled_bg;
163	box-shadow: inset 0 1px $top_highlight,
164	0px 0px 1px 1px rgba(0,0,0,0.1);
165	}
166
167	&:backdrop,
168	&:backdrop:disabled {
169	transition: $backdrop_transition;
170
171	background-color: $_scale_disabled_bg;
172	box-shadow: inset 0 1px $top_highlight,
173	0px 0px 1px 1px rgba(0,0,0,0.1);
174	}
175
176	// ...on selected list rows
177	row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
178
179	// OSD
180	.osd & {
181	@include button(osd);
182	border-color: darken($osd_borders_color, 3%);
183	background-color: opacify($_scale_bg, 1); // solid background needed here
184
185	&:hover {
186	@include button(osd-hover);
187	background-color: opacify($_scale_bg, 1); // solid background needed here
188	}
189
190	&:active {
191	@include button(osd-active);
192	background-color: opacify($_scale_bg, 1); // solid background needed here
193	}
194
195	&:disabled {
196	@include button(osd-insensitive);
197	background-color: opacify($_scale_bg, 1); // solid background needed here
198	}
199
200	&:backdrop {
201	@include button(osd-backdrop, $_scale_disabled_bg);
202	background-color: opacify($_scale_disabled_bg, 1); // solid background needed here
203
204	&:disabled {
205	@include button(osd-backdrop-insensitive);
206	background-color: opacify($_scale_bg, 1); // solid background needed here
207	}
208	}
209	}
210	}
211
212	value { color: gtkalpha(currentColor, 0.4); }
213
214	&.horizontal {
215	> marks {
216	color: gtkalpha(currentColor, 0.55);
217	&.top { margin-bottom: $_marks_distance; }
218	&.bottom { margin-top: $_marks_distance; }
219
220	indicator {
221	background-color: currentColor;
222	min-height: $_marks_length;
223	min-width: 1px;
224	}
225	}
226
227	> value.left { margin-right: 9px; }
228	> value.right { margin-left: 9px; }
229
230	&.fine-tune >marks {
231	&.top { margin-top: 3px; }
232	&.bottom { margin-bottom: 3px; }
233
234	indicator { min-height: ($_marks_length - 3px); }
235	}
236	}
237
238	&.vertical {
239	> marks {
240	color: gtkalpha(currentColor, 0.55);
241	&.top { margin-right: $_marks_distance; }
242	&.bottom { margin-left: $_marks_distance; }
243
244	indicator {
245	background-color: currentColor;
246	min-height: 1px;
247	min-width: $_marks_length;
248	}
249	}
250
251	> value.top { margin-bottom: 9px; }
252	> value.bottom { margin-top: 9px; }
253
254	&.fine-tune >marks {
255	&.top { margin-left: 3px; }
256	&.bottom { margin-right: 3px; }
257
258	indicator { min-height: ($_marks_length - 3px); }
259	}
260	}
261
262	&.horizontal {
263	indicator {
264	min-height: $_marks_length;
265	min-width: 1px;
266	}
267
268	&.fine-tune indicator { min-height: ($_marks_length - 3px); }
269	}
270
271	&.vertical {
272	indicator {
273	min-height: 1px;
274	min-width: $_marks_length;
275	}
276
277	&.fine-tune indicator { min-width: ($_marks_length - 3px); }
278	}
279
280	// WARNING scale with marks madness following
281
282	// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
283	$suffix: if($variant == 'light', '', '-dark');
284
285	@each $dir_class, $dir_infix in ('horizontal', 'horz'),
286	('vertical', 'vert') {
287	@each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
288	('scale-has-marks-below', 'marks-after:not(.marks-before)') {
289	@each $state, $state_infix in ('', ''),
290	(':hover', '-hover'),
291	(':active', '-active'),
292	(':disabled', '-insensitive'),
293	(':backdrop', '-backdrop'),
294	(':backdrop:disabled', '-backdrop-insensitive') {
295	&.#{$dir_class}.#{$marks_class} {
296
297	slider {
298	&#{$state} {
299	// an asymmetric slider asset is used here, so the margins are uneven, the smaller
300	// margin is set on the point side.
301	min-height: 16px;
302	min-width: 16px;
303	margin: -7px;
304	border: none;
305	border-radius: 50%;
306
307	background-color: $_scale_bg;
308	box-shadow: none;
309	}
310	}
311
312	&.fine-tune slider {
313	// bigger negative margins to make the trough grow here as well
314	margin: -7px;
315	}
316	}
317	}
318	}
319	}
320
321	&.color {
322	min-height: 0;
323	min-width: 0;
324
325	trough {
326	background-image: image($borders_color);
327	background-repeat: no-repeat;
328	}
329
330	&.horizontal {
331	padding: 0 0 15px 0;
332
333	trough {
334	padding-bottom: 4px;
335	background-position: 0 -3px;
336	border-top-left-radius: 0;
337	border-top-right-radius: 0;
338	}
339
340	slider {
341	&:dir(ltr), &:dir(rtl) { // specificity bumb
342	&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
343	margin-bottom: -15px;
344	margin-top: 6px;
345	}
346	}
347	}
348	}
349
350	&.vertical {
351	&:dir(ltr) {
352	padding: 0 0 0 15px;
353
354	trough {
355	padding-left: 4px;
356	background-position: 3px 0;
357	border-bottom-right-radius: 0;
358	border-top-right-radius: 0;
359	}
360
361	slider {
362	&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
363	margin-left: -15px;
364	margin-right: 6px;
365	}
366	}
367	}
368
369	&:dir(rtl) {
370	padding: 0 15px 0 0;
371
372	trough {
373	padding-right: 4px;
374	background-position: -3px 0;
375	border-bottom-left-radius: 0;
376	border-top-left-radius: 0;
377	}
378
379	slider {
380	&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
381	margin-right: -15px;
382	margin-left: 6px;
383	}
384	}
385	}
386	}
387
388	&.fine-tune {
389	&.horizontal {
390	&:dir(ltr), &:dir(rtl) { // specificity bump
391	padding: 0 0 12px 0;
392
393	trough {
394	padding-bottom: 7px;
395	background-position: 0 -6px;
396	}
397
398	slider {
399	margin-bottom: -15px;
400	margin-top: 6px;
401	}
402	}
403	}
404
405	&.vertical {
406	&:dir(ltr) {
407	padding: 0 0 0 12px;
408
409	trough {
410	padding-left: 7px;
411	background-position: 6px 0;
412	}
413
414	slider {
415	margin-left: -15px;
416	margin-right: 6px;
417	}
418	}
419
420	&:dir(rtl) {
421	padding: 0 12px 0 0;
422
423	trough {
424	padding-right: 7px;
425	background-position: -6px 0;
426	}
427
428	slider {
429	margin-right: -15px;
430	margin-left: 6px;
431	}
432	}
433	}
434	}
435	}
436	}