Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-14 23:26:15 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Rename toggle height var

Browse Source
This commit is contained in:
hfcRed
2026-01-14 17:54:22 +01:00
parent be32b2c8ad
commit ab7c1d66a2
3 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/elements/Switch.module.css
View File

@@ -1,5 +1,5 @@
.root {
--height: var(--toggle-height-small);
--height: var(--selector-height);
cursor: pointer;
display: grid;

28
app/styles/common.css
View File

@@ -124,8 +124,8 @@ input[type="checkbox"] {
appearance: none;
cursor: pointer;
padding: 0;
width: var(--toggle-height-small);
height: var(--toggle-height-small);
width: var(--selector-height);
height: var(--selector-height);
border-radius: 5px;
background-color: var(--color-bg);
border: 2px solid var(--color-border);
@@ -166,8 +166,8 @@ input[type="radio"] {
appearance: none;
cursor: pointer;
vertical-align: middle;
width: var(--toggle-height-small);
height: var(--toggle-height-small);
width: var(--selector-height);
height: var(--selector-height);
background-color: var(--color-bg);
border: 2px solid var(--color-border);
border-radius: 999999px;
@@ -408,7 +408,7 @@ input[type="range"] {
appearance: none;
background: 0 0;
width: 100%;
height: var(--toggle-height-small);
height: var(--selector-height);
&:focus {
outline: none;
@@ -422,7 +422,7 @@ input[type="range"] {
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: calc(var(--toggle-height-small) / 4);
height: calc(var(--selector-height) / 4);
background-color: var(--track-color);
border-radius: var(--rounded-full);
transition: 100ms background-color;
@@ -430,7 +430,7 @@ input[type="range"]::-webkit-slider-runnable-track {
input[type="range"]::-moz-range-track {
width: 100%;
height: calc(var(--toggle-height-small) / 4);
height: calc(var(--selector-height) / 4);
background-color: var(--track-color);
border-radius: var(--rounded-full);
transition: 100ms background-color;
@@ -439,10 +439,10 @@ input[type="range"]::-moz-range-track {
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--toggle-height-small);
height: var(--toggle-height-small);
width: var(--selector-height);
height: var(--selector-height);
margin-top: calc(
(calc(var(--toggle-height-small) / 4) - var(--toggle-height-small)) /
(calc(var(--selector-height) / 4) - var(--selector-height)) /
2
);
background-color: var(--thumb-color);
@@ -455,10 +455,10 @@ input[type="range"]::-webkit-slider-thumb {
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--toggle-height-small);
height: var(--toggle-height-small);
width: var(--selector-height);
height: var(--selector-height);
margin-top: calc(
(calc(var(--toggle-height-small) / 4) - var(--toggle-height-small)) /
(calc(var(--selector-height) / 4) - var(--selector-height)) /
2
);
background-color: var(--thumb-color);
@@ -474,7 +474,7 @@ progress {
appearance: none;
display: inline-block;
width: 100%;
height: var(--toggle-height-small);
height: var(--selector-height);
overflow: hidden;
border: none;
border-radius: var(--rounded-full);

2
app/styles/vars.css
View File

@@ -140,7 +140,7 @@ html {
--input-focus-ring: 2px solid var(--color-text-accent);
--input-focus-ring-error: 2px solid var(--color-error);
--toggle-height-small: 1.25rem;
--selector-height: 1.25rem;
--input-icon-width: 18px;