mirror of https://github.com/FreeTubeApp/FreeTube
117 lines
5.6 KiB
CSS
117 lines
5.6 KiB
CSS
/* stylelint-disable no-descending-specificity */
|
|
pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], .pure-checkbox input[type="radio"], .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-checkbox input[type="checkbox"]:focus + label::before, .pure-radiobutton input[type="checkbox"]:focus + label::before, .pure-checkbox input[type="radio"]:focus + label::before, .pure-radiobutton input[type="radio"]:focus + label::before, .pure-checkbox input[type="checkbox"]:hover + label::before, .pure-radiobutton input[type="checkbox"]:hover + label::before, .pure-checkbox input[type="radio"]:hover + label::before, .pure-radiobutton input[type="radio"]:hover + label::before {
|
|
border: 2px solid var(--primary-color);
|
|
}
|
|
|
|
.pure-checkbox input[type="checkbox"]:active + label::before, .pure-radiobutton input[type="checkbox"]:active + label::before, .pure-checkbox input[type="radio"]:active + label::before, .pure-radiobutton input[type="radio"]:active + label::before { transition-duration: 0s; }
|
|
|
|
.pure-checkbox input[type="checkbox"] + label, .pure-radiobutton input[type="checkbox"] + label, .pure-checkbox input[type="radio"] + label, .pure-radiobutton input[type="radio"] + label {
|
|
position: relative;
|
|
padding-inline-start: 2em;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
display: block;
|
|
margin-block-start: 10px;
|
|
}
|
|
|
|
.pure-checkbox input[type="checkbox"] + label::before, .pure-radiobutton input[type="checkbox"] + label::before, .pure-checkbox input[type="radio"] + label::before, .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-checkbox input[type="checkbox"] + label::after, .pure-radiobutton input[type="checkbox"] + label::after, .pure-checkbox input[type="radio"] + label::after, .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-checkbox input[type="checkbox"]:disabled + label::before, .pure-radiobutton input[type="checkbox"]:disabled + label::before, .pure-checkbox input[type="radio"]:disabled + label::before, .pure-radiobutton input[type="radio"]:disabled + label::before { border-color: #ccc; }
|
|
|
|
.pure-checkbox input[type="checkbox"]:disabled:focus + label::before, .pure-radiobutton input[type="checkbox"]:disabled:focus + label::before, .pure-checkbox input[type="radio"]:disabled:focus + label::before, .pure-radiobutton input[type="radio"]:disabled:focus + label::before, .pure-checkbox input[type="checkbox"]:disabled:hover + label::before, .pure-radiobutton input[type="checkbox"]:disabled:hover + label::before, .pure-checkbox input[type="radio"]:disabled:hover + label::before, .pure-radiobutton input[type="radio"]:disabled:hover + label::before { background-color: inherit; }
|
|
|
|
.pure-checkbox input[type="checkbox"]:disabled:checked + label::before, .pure-radiobutton input[type="checkbox"]:disabled:checked + label::before, .pure-checkbox input[type="radio"]:disabled:checked + label::before, .pure-radiobutton input[type="radio"]:disabled:checked + label::before { background-color: #ccc; }
|
|
|
|
.pure-checkbox input[type="checkbox"] + label::after, .pure-radiobutton input[type="checkbox"] + label::after {
|
|
background-color: transparent;
|
|
inset-block-start: 50%;
|
|
inset-inline-start: 4px;
|
|
inline-size: 8px;
|
|
block-size: 3px;
|
|
margin-block-start: -4px;
|
|
border-style: solid;
|
|
border-width: 0 0 3px 3px;
|
|
border-image: none;
|
|
transform: rotate(-45deg) scale(0);
|
|
}
|
|
|
|
.pure-checkbox input[type="checkbox"]:checked + label::after, .pure-radiobutton input[type="checkbox"]:checked + label::after {
|
|
content: '';
|
|
transform: rotate(-45deg) scale(1);
|
|
transition: transform 200ms ease-out;
|
|
}
|
|
|
|
.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-checkbox input[type="radio"]:checked + label::after, .pure-radiobutton input[type="radio"]:checked + label::after { transform: scale(1); }
|
|
|
|
.pure-checkbox input[type="radio"] + label::before, .pure-radiobutton input[type="radio"] + label::before, .pure-checkbox input[type="radio"] + label::after, .pure-radiobutton input[type="radio"] + label::after { border-radius: 50%; }
|
|
|
|
.pure-checkbox input[type="checkbox"]:checked + label::before, .pure-radiobutton input[type="checkbox"]:checked + label::before {
|
|
animation: borderscale 200ms ease-in;
|
|
background: var(--primary-text-color);
|
|
}
|
|
|
|
.pure-radiobutton input[type="checkbox"]:checked + label::after { transform: rotate(-45deg) scale(1); }
|
|
|
|
@keyframes
|
|
borderscale { 50% {
|
|
box-shadow: 0 0 0 2px var(--primary-text-color);
|
|
}
|
|
}
|
|
|
|
.radioTitle {
|
|
margin-block: 0;
|
|
}
|
|
|
|
@media only screen and (width <= 680px) {
|
|
.pure-checkbox input[type="checkbox"] + label, .pure-radiobutton input[type="checkbox"] + label, .pure-checkbox input[type="radio"] + label, .pure-radiobutton input[type="radio"] + label {
|
|
margin-block-start: 3px;
|
|
}
|
|
}
|