80 lines
1.3 KiB
CSS
80 lines
1.3 KiB
CSS
*{box-sizing:border-box;}
|
|
|
|
:root{
|
|
--top: #212121;
|
|
--background: #303030;
|
|
--light: #424242;
|
|
--lighter: #606060;
|
|
--lightest: #848484;
|
|
}
|
|
html{
|
|
height:100vh;
|
|
font-family: "Segoe UI", Tahoma, sans-serif;
|
|
}
|
|
body{
|
|
min-height:100%;
|
|
margin: 0;
|
|
background-color: var(--background);
|
|
}
|
|
|
|
.check{
|
|
font-size:20px;
|
|
|
|
display: inline-flex;
|
|
width:2em;
|
|
height:1em;
|
|
margin-right: 10px;
|
|
}
|
|
.check input{
|
|
display:none;
|
|
}
|
|
.check input + span{
|
|
position:relative;
|
|
display:inline-flex;
|
|
width:100%;
|
|
height:100%;
|
|
background: #000;
|
|
border-radius:1000px;
|
|
cursor:pointer;
|
|
transition: background 100ms ease-in-out;
|
|
}
|
|
.check input:checked + span{
|
|
background:#0a3;
|
|
}
|
|
.check input + span::before{
|
|
content:"";
|
|
display:inline-block;
|
|
width:1em; height:1em;
|
|
margin-left:1px;
|
|
border:0.15em solid transparent;
|
|
background-clip: padding-box;
|
|
box-sizing:border-box;
|
|
border-radius:100%;
|
|
background-color:white;
|
|
transition: all 100ms ease-in-out;
|
|
}
|
|
.check input:checked + span::before{
|
|
transform: translateX(100%);
|
|
margin-left:-1px;
|
|
}
|
|
.check.no-transition input + span,
|
|
.check.no-transition input + span::before{
|
|
transition:none;
|
|
}
|
|
/* Small Check */
|
|
.check.small{
|
|
font-size:17px;
|
|
}
|
|
|
|
.new-input{
|
|
display: block;
|
|
width: 100%;
|
|
background: #222;
|
|
color: white;
|
|
outline: none;
|
|
border: none;
|
|
font-size: 1.1em;
|
|
padding: 2px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|