mirror of https://github.com/FreeTubeApp/FreeTube
92 lines
2.5 KiB
CSS
92 lines
2.5 KiB
CSS
/* stylelint-disable no-descending-specificity */
|
|
.pure-radiobutton input[type="radio"] {
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
block-size: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
inline-size: 1px;
|
|
}
|
|
|
|
.pure-radiobutton input[type="radio"]:focus + label::before, .pure-radiobutton input[type="radio"]:hover + label::before {
|
|
border: 2px solid var(--primary-color);
|
|
}
|
|
|
|
.pure-radiobutton input[type="radio"]:active + label::before { transition-duration: 0s; }
|
|
|
|
.pure-radiobutton input[type="radio"] + label {
|
|
position: relative;
|
|
padding-inline-start: 2em;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
display: block;
|
|
margin-block-start: 10px;
|
|
}
|
|
|
|
.pure-radiobutton input[type="radio"] + label::before {
|
|
box-sizing: content-box;
|
|
content: '';
|
|
color: var(--primary-text-color);
|
|
position: absolute;
|
|
inset-block-start: 50%;
|
|
inset-inline-start: 0;
|
|
inline-size: 14px;
|
|
block-size: 14px;
|
|
margin-block-start: -9px;
|
|
border: 2px solid var(--primary-text-color);
|
|
text-align: center;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.pure-radiobutton input[type="radio"] + label::after {
|
|
box-sizing: content-box;
|
|
content: '';
|
|
background-color: var(--primary-text-color);
|
|
position: absolute;
|
|
inset-block-start: 50%;
|
|
inset-inline-start: 4px;
|
|
inline-size: 10px;
|
|
block-size: 10px;
|
|
margin-block-start: -5px;
|
|
transform: scale(0);
|
|
transform-origin: 50%;
|
|
transition: transform 200ms ease-out;
|
|
}
|
|
|
|
.pure-radiobutton input[type="radio"]:disabled + label::before { border-color: #ccc; }
|
|
|
|
.pure-radiobutton input[type="radio"]:disabled:focus + label::before, .pure-radiobutton input[type="radio"]:disabled:hover + label::before { background-color: inherit; }
|
|
|
|
.pure-radiobutton input[type="radio"]:disabled:checked + label::before { background-color: #ccc; }
|
|
|
|
|
|
.pure-checkbox input[type="radio"]:checked + label::before, .pure-radiobutton input[type="radio"]:checked + label::before {
|
|
animation: borderscale 300ms ease-in;
|
|
}
|
|
|
|
.pure-radiobutton input[type="radio"]:focus + label::after{
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
.pure-radiobutton input[type="radio"]:checked + label::after { transform: scale(1); }
|
|
|
|
.pure-radiobutton input[type="radio"] + label::before, .pure-radiobutton input[type="radio"] + label::after { border-radius: 50%; }
|
|
|
|
@keyframes
|
|
borderscale { 50% {
|
|
box-shadow: 0 0 0 2px var(--primary-text-color);
|
|
}
|
|
}
|
|
|
|
.radioTitle {
|
|
margin-block: 0;
|
|
}
|
|
|
|
@media only screen and (width <= 680px) {
|
|
.pure-radiobutton input[type="radio"] + label {
|
|
margin-block-start: 3px;
|
|
}
|
|
}
|