mirror of https://github.com/FreeTubeApp/FreeTube
108 lines
5.2 KiB
CSS
108 lines
5.2 KiB
CSS
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-color: 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;
|
|
vertical-align: middle;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
display: block;
|
|
margin-block-end: -20px;
|
|
}
|
|
|
|
.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-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-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-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: #cccccc; }
|
|
|
|
.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: #cccccc; }
|
|
|
|
.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-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-color);
|
|
}
|
|
|
|
.pure-checkbox input[type="checkbox"]:checked + label:after, .pure-radiobutton input[type="checkbox"]:checked + label:after { transform: rotate(-45deg) scale(1); }
|
|
|
|
@keyframes
|
|
borderscale { 50% {
|
|
box-shadow: 0 0 0 2px var(--primary-color);
|
|
}
|
|
}
|
|
|
|
.radioTitle {
|
|
margin-block-end: -20px;
|
|
}
|