/*
This causes a toggle control (see example below) to be styled in a certain way
A text toggle is just a text link that can be toggled back and forth (this example is wrong, update it)
*/
/* type three: the mode toggle */
control[type=mode_toggle] { position: relative; }
control[type=mode_toggle] { display: flex; width: 100%; flex-direction: row; justify-content: end; gap: 10px; padding: 5px; } /* todo: float: right is not generic */
control[type=mode_toggle] span { display: inline-block; color: gray; cursor: pointer; font-size: smaller; padding-right: 4px; }
control[type=mode_toggle] input[type=radio] { display: none; }
control[type=mode_toggle] input[type="radio"]:checked ~ opt { text-decoration: underline; color: rgb(48, 48, 48); }
control[type=mode_toggle] state { display: none; }
control[type=mode_toggle] input[type="radio"]:checked ~ state { display: block; }
control[type=mode_toggle] label { padding: 2px 0px 8px 0px; }
/* type one: the textual toggle */
/* todo: are we rewriting the textual_toggle */
control { display: block; }
control[type=textual_toggle] { position: relative; }
control[type=textual_toggle] { display: flex; width: 100%; flex-direction: row; justify-content: end; gap: 10px; padding: 5px; } /* todo: float: right is not generic */
control[type=textual_toggle] opt { display: inline-block; color: gray; cursor: pointer; font-size: smaller; padding-right: 4px; }
control[type=textual_toggle] input[type=radio] { display: none; }
control[type=textual_toggle] input[type="radio"]:checked ~ opt { text-decoration: underline; color: rgb(48, 48, 48); }
control[type=textual_toggle] state { display: none; }
control[type=textual_toggle] input[type="radio"]:checked ~ state { display: block; }
control[type=textual_toggle] label { padding: 2px 0px 8px 0px; }
/* type two: the lightswitch toggle */
/* todo: better genericize the toggle by changing checking the value of the toggle and instead use first or second child */
control[type=toggle] { display: inline-block; width: 60px; height: 34px; }
control[type=toggle] label { position: absolute; cursor: pointer; }
control[type=toggle] input { width: 32px; height: 32px; margin-right: 5px; display: none; }
control[type=toggle] .checkbang { }
control[type=toggle] .checkmark { position: absolute; top: 0; left: 0; width: 60px; height: 34px; background-color: #eee; border-radius: 34px; } /* Create a custom radio button */
/* ON indicator / off switch */
control[type=toggle] input[value=unchecked] ~ .checkmark {
/* if clicked, this turns off the switch */
background-color: #0971b6;
/* ergo, we want this to resemble the on state; because clicking something that is on turns it off */
/* when it is off, it will not appear */
}
control[type=toggle] input[value=unchecked] ~ .checkmark::after { content: "✔"; text-align: center; } /* put a checkmark into an unchecked field */
/* OFF indicator / on switch */
control[type=toggle] input[value=checked] ~ .checkmark {
/* ...if clicked, this turns on */
background-color: rgba(15,15,15, 0.25);
/* ...and so, it resembles the off state */
/* ...and when it is on, it will not appear */
}
control[type=toggle] input[value=checked] ~ .checkmark::after { content: "✘"; text-align: center; } /* put an X into an unchecked field */
/* don't display the on switch if it is already on, don't display the off switch if it is already off */
control[type=toggle] input[value=unchecked]:checked ~ .checkmark { display: none; }
control[type=toggle] input[value=checked]:checked ~ .checkmark { display: none; }
/* On mouse-over, add a grey background color */
control[type=toggle] label:hover input ~ .checkmark {
/* background-color: #ccc; */
}
/* When the radio button is checked, add a blue background */
control[type=toggle] label input:checked ~ .checkmark {
background-color: #2196F3;
background-color: rgba(33,150,243, 0.4); /* todo: stopgap: prevent darkmode from making this render so trashy */
}
/* Create the indicator (the dot/circle - hidden when not checked) */
control[type=toggle] label .checkmark:after {
content: "";
position: absolute;
display: none;
}
control[type=toggle] input[value=unchecked] ~ .checkmark:after { display: block; right: 4px; }
control[type=toggle] input[value=checked] ~ .checkmark:after { display: block; left: 4px; }
control[type=toggle] input[value=unchecked]:checked ~ .checkmark {
}
/* animation stub. todo: figure out animating the toggle switch */
control[type=toggle] input[value=unchecked]:checked ~ .checkmark:after {
pointer-events: none; /* propagate clicks to the underlying label; important if the checkmark is a distinct element */
display: block;
animation-name: bounceleft;
}
@keyframes bounceleft {
0% {
left: 4px;
}
50% {
right: 4px;
}
100% {
opacity: 0;
}
}
/* end todo */
/* Style the indicator (dot/circle) */
control[type=toggle] label .checkmark:after {
top: 4px;
width: 26px;
height: 26px;
line-height: 26px; /* cause the checkmark to be centered to the height */
border-radius: 50%;
background: rgba(250,250,250, 1);
/* todo: we're using the background image generated by http://www.patternify.com as a stopgap to make rendering in dark mode not so trash */
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAABNJREFUGFdj/PXr138GNMBIA0EApUcTp0DGupcAAAAASUVORK5CYII=) repeat;
}