164 lines
2.4 KiB
CSS
164 lines
2.4 KiB
CSS
:root {
|
|
--text-main: #FFF;
|
|
--text-secondary: #000;
|
|
--dark-grey: #3C4043;
|
|
--white: #FFF;
|
|
--active: #FF5B56;
|
|
--space: 5px;
|
|
--danger: #f04141;
|
|
--danger-light: #F9D0D5;
|
|
}
|
|
|
|
body {
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
max-width: 400px;
|
|
min-width: 240px;
|
|
background-color: var(--dark-grey)
|
|
}
|
|
|
|
header {
|
|
background-color: var(--white);
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
padding: var(--space);
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
header .logo-container {
|
|
margin: var(--space);
|
|
}
|
|
|
|
header .logo-container img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
header small {
|
|
display: block;
|
|
font-size: .70em;
|
|
font-weight: bold;
|
|
margin: 1%;
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 14px;
|
|
margin: var(--space) auto
|
|
}
|
|
|
|
h2 {
|
|
clear: both;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
color: var(--text-main);
|
|
}
|
|
|
|
footer {
|
|
width: 100%;
|
|
}
|
|
|
|
footer a.button {
|
|
margin: var(--space);
|
|
}
|
|
|
|
/* Elements */
|
|
|
|
input[type=url] {
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
input[type=checkbox] {
|
|
opacity: 0;
|
|
}
|
|
|
|
.checkbox-label {
|
|
background: grey;
|
|
border-radius: 25px;
|
|
color: var(--text-main);
|
|
cursor: pointer;
|
|
display: block;
|
|
float: right;
|
|
font-weight: bold;
|
|
height: 30px;
|
|
position: relative;
|
|
text-indent: -400px;
|
|
width: 50px;
|
|
}
|
|
|
|
.checkbox-label:after {
|
|
background: #fff;
|
|
border-radius: 90px;
|
|
content: '';
|
|
height: 20px;
|
|
left: 5px;
|
|
position: absolute;
|
|
top: 5px;
|
|
transition: 0.3s; /* Acts on transform below */
|
|
width: 20px;
|
|
}
|
|
input:checked+label {
|
|
background: var(--active);
|
|
}
|
|
/* position when active*/
|
|
input:checked+label:after {
|
|
left: calc(100% - 5px);
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.settings_block {
|
|
display: block;
|
|
padding: 5px 1em 20px 1em;
|
|
border-bottom: var(--dark-grey) solid 1px;
|
|
}
|
|
|
|
.settings_block h1 {
|
|
float: left;
|
|
}
|
|
|
|
.button {
|
|
border: var(--active) solid 1px;
|
|
color: var(--text-main);
|
|
display: block;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin: var(--space) auto;
|
|
padding: 10px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
-webkit-transition-duration: 0.4s;
|
|
transition-duration: 0.4s;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: var(--active);
|
|
color: #fff;
|
|
}
|
|
|
|
.button:active {
|
|
background-color: var(--active);
|
|
box-shadow: 0 5px var(--dark-grey);
|
|
transform: translateY(4px);
|
|
}
|
|
|
|
input[type="url"]:invalid {
|
|
color: var(--danger);
|
|
border-color: var(--danger);
|
|
background-color: var(--danger-light);
|
|
}
|
|
|