121 lines
2.9 KiB
CSS
121 lines
2.9 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
|
|
|
:root {
|
|
--text: #aaaaaa;
|
|
--background: #333333;
|
|
--primary: #ffffff;
|
|
--secondary: #666666;
|
|
--accent: #444444;
|
|
|
|
--text-low-opacity: #aaaaaa88;
|
|
--background-low-opacity: #33333333;
|
|
--primary-low-opacity: #88888833;
|
|
--secondary-low-opacity: #66666633;
|
|
--accent-low-opacity: #44444466;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--accent-low-opacity);
|
|
color: var(--text);
|
|
}
|
|
|
|
body::-webkit-scrollbar { display: none; }
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--text);
|
|
font-family: 'Poppins', 'Arial';
|
|
padding: 5vh 0;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
margin: 0px;
|
|
overflow-x: hidden;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
@media screen and (min-width: 1025px) {
|
|
body { font-size: 18px; }
|
|
}
|
|
|
|
@media screen and (max-width: 565px) {
|
|
body { font-size: 18px; padding: 5vh 3vw; }
|
|
}
|
|
|
|
button {
|
|
background-color: var(--secondary-low-opacity);
|
|
color: var(--primary);
|
|
border: none;
|
|
padding: 5px 7px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition-property: color;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
button:disabled { opacity: 60%; pointer-events: none; }
|
|
button:active { scale: 95%; }
|
|
|
|
input, textarea, option, select{
|
|
background-color: var(--secondary-low-opacity);
|
|
color: var(--primary);
|
|
border: none;
|
|
border-radius: 2px;
|
|
padding: 5px 7px;
|
|
margin: 3px;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
input, textarea, select {
|
|
font-family: 'Poppins';
|
|
}
|
|
|
|
option, select {
|
|
background-color: var(--secondary-low-opacity);
|
|
}
|
|
|
|
option {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
footer {
|
|
opacity: 50%;
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
textarea { background-color: var(--secondary-low-opacity); }
|
|
textarea:disabled { opacity: 70%; pointer-events: none; }
|
|
|
|
a:link { color: var(--primary); text-decoration: none; }
|
|
a:visited { color: var(--primary); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
a::-moz-selection { text-decoration-color: var(--text); }
|
|
a::selection { -webkit-text-decoration-color: var(--text); text-decoration-color: var(--text); }
|
|
|
|
i { opacity: 80%; }
|
|
|
|
p {
|
|
margin: 0px;
|
|
padding: 2px;
|
|
}
|
|
|
|
.text:not(svg) { color: var(--text); }
|
|
.background:not(svg) { color: var(--background); }
|
|
.primary:not(svg) { color: var(--primary); }
|
|
.secondary:not(svg) { color: var(--secondary); }
|
|
.accent:not(svg) { color: var(--accent); }
|
|
|
|
svg.text { fill: var(--text); }
|
|
svg.background { fill: var(--background); }
|
|
svg.primary { fill: var(--primary); }
|
|
svg.secondary { fill: var(--secondary); }
|
|
svg.accent { fill: var(--accent); }
|
|
|
|
.left { text-align: left; }
|
|
.center { text-align: center; }
|
|
.right { text-align: right; }
|
|
|
|
.invis { opacity: 0%; }
|
|
.hidden { display: none; }
|
|
.no-underline { text-decoration: none !important; }
|