feat: ability to view tasks in a category #19
@ -1,10 +1,10 @@
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
-moz-appearance:textfield;
|
||||
input[type="number"] {
|
||||
appearance:textfield;
|
||||
}
|
||||
|
@ -1,63 +1,63 @@
|
||||
input[type=range],
|
||||
input[type=range]::-webkit-slider-runnable-track,
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
input[type="range"],
|
||||
input[type="range"]::-webkit-slider-runnable-track,
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
input[type="range"] {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-thumb {
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: rgba(228, 228, 231);
|
||||
background: rgba(228 228 231);
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-progress {
|
||||
input[type="range"]::-moz-range-progress {
|
||||
background: #525259;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-track {
|
||||
background: rgba(39, 39, 42, 0.5);
|
||||
input[type="range"]::-moz-range-track {
|
||||
background: rgba(39 39 42 / 50%);
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input[type=range].input-range-reverse::-moz-range-progress {
|
||||
input[type="range"].input-range-reverse::-moz-range-progress {
|
||||
background: #2d2d31;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input[type=range].input-range-reverse::-moz-range-track {
|
||||
input[type="range"].input-range-reverse::-moz-range-track {
|
||||
background: rgba(113, 113, 122, 0.5);
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: rgba(228, 228, 231);
|
||||
background: rgba(228 228 231);
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
top: -0.4rem;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
background: rgba(39, 39, 42, 0.5);
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
background: rgba(39 39 42 / 50%);
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input[type=range].input-range-reverse::-webkit-slider-runnable-track {
|
||||
background: rgba(39, 39, 42, 0.5);
|
||||
input[type="range"].input-range-reverse::-webkit-slider-runnable-track {
|
||||
background: rgba(39 39 42 / 50%);
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user
Styling for Input Range is Well-Implemented
The CSS for the input range elements is well-implemented with attention to cross-browser compatibility and modern design standards. The use of vendor-specific pseudo-elements like
::-webkit-slider-thumb
and::-moz-range-thumb
ensures that the styles are applied correctly across different browsers. The use of RGBA for colors and rem units for dimensions enhances the responsiveness and aesthetic of the sliders.Consider adding comments to the CSS to explain the purpose of specific styles, especially for complex selectors or unusual styles, to improve maintainability.