refactor: move all volume slider styles to Tailwind arbitrary variants
This commit is contained in:
@@ -33,80 +33,3 @@
|
||||
--poster-max-height: 360px;
|
||||
--font: 'Verdana', 'Tahoma', 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
@utility volume-range {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
accent-color: #ffffff;
|
||||
}
|
||||
|
||||
@utility volume-track {
|
||||
&::-webkit-slider-runnable-track {
|
||||
width: 4px;
|
||||
border-radius: 9999px;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
&::-moz-range-track {
|
||||
width: 4px;
|
||||
border-radius: 9999px;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
@utility volume-thumb {
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 9999px;
|
||||
background: #ffffff;
|
||||
border: 0;
|
||||
margin-left: -5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 9999px;
|
||||
background: #ffffff;
|
||||
border: 0;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
}
|
||||
|
||||
@utility volume-panel-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@utility volume-bridge-off {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@utility volume-underline-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-volume-wrap]:is(.is-volume-open, :has(.volume-panel.volume-panel-visible)) [data-volume-bridge] {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.volume-underline {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-volume-wrap]:is(.is-volume-open, :has(.volume-panel.volume-panel-visible)) .volume-underline {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@utility scrollbar-hidden {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user