Skip to content

Stylus: sliders by tophf

Screenshot of Stylus: sliders

Details

Authortophf

LicenseMIT

Categorystylus

Created

Updated

Size2.3 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Shows sliders instead of checkboxes to toggle styles in dashboard and popup

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         Stylus sliders
@version      20231217.04.11
@namespace    https://userstyles.world/user/tophf
@description  Shows sliders instead of checkboxes to toggle styles in dashboard and popup
@author       tophf
@license      MIT
==/UserStyle== */

@-moz-document regexp("^\\w+-extension://[^/]+/(manage|popup).*") {
:root {
  --name-padding-left: 12px;
  --slider-width: 16px;
  --slider-height: 9px;
  --slider-pad: 1px;
  --slider-color: var(--c80);
  --slider-color-on: hsl(180, 50%, 40%);
  --slider-shadow-hsl: 180, 100%, 10%;
  --slider-knob: calc(var(--slider-height) - 2 * var(--slider-pad));
  --slider-knob-color: var(--c95);
  --slider-knob-color-on: var(--bg);
  --slider-knob-shadow: 1px 1px 2px var(--c20);
}
:root[data-ui-theme="dark"] {
  --slider-pad: 0px;
  --slider-color: var(--c70);
  --slider-color-on: hsl(180, 60%, 30%);
  --slider-knob-color: var(--c50);
  --slider-knob-color-on: hsl(180, 40%, 60%);
  --slider-knob-shadow: 1px 1px 3px 1px hsl(180, 90%, 5%, .5);
}
#stylus .style-name input::after {
  content: "";
  width: var(--slider-knob);
  height: var(--slider-knob);
  background-color: var(--slider-knob-color);
  border-radius: 1em;
  box-shadow: var(--slider-knob-shadow);
}
#stylus .style-name input:checked::after {
  background-color: var(--slider-knob-color-on);
}
#stylus .style-name input {
  border: none;
  justify-content: flex-start;
  width: var(--slider-width);
  flex-basis: var(--slider-width);
  height: calc(var(--slider-knob) + 2 * var(--slider-pad));
  padding: var(--slider-pad);
  cursor: pointer;
  border-radius: 1em;
  background-color: var(--slider-color);
  --box-shadow: inset 1px 1px 2px hsl(var(--slider-shadow-hsl), .75);
  box-shadow: var(--box-shadow);
  transition: box-shadow .25s;
  margin-top: 1px;
}
#stylus .style-name input:focus:not([data-focused-via-click]) {
  box-shadow: var(--box-shadow), var(--focus-shadow);
}
#stylus .style-name input:checked {
  justify-content: flex-end;
  background-color: var(--slider-color-on);
  color: var(--slider-knob-color);
}
#stylus .style-name input:hover,
#stylus-popup .style-name:hover input {
  box-shadow: inset 1px 1px 3px hsl(var(--slider-shadow-hsl));
}
#stylus-popup .style-name {
  padding-left: 6px;
}
#stylus-popup #main-actions input[type="checkbox"] {
  margin-right: 8px;
}

}

Reviews

No reviews yet.