Initial Release
This commit is contained in:
@@ -0,0 +1,250 @@
|
||||
/* General Styling and Colors for all pages */
|
||||
:root {
|
||||
--transition-time: 200ms;
|
||||
--background-layer-5: #1d1e2e;
|
||||
--background-layer-4: #212335;
|
||||
--background-layer-3: #282a3f;
|
||||
--background-layer-2: #2d2f47;
|
||||
--background-layer-1: #333550;
|
||||
--background-layer-0: #a1a8ff;
|
||||
--text-layer-1: #f0f0f0;
|
||||
--text-layer-2: #181818;
|
||||
--text-layer-3: #b4b4b4;
|
||||
--text-error-1: #f63232;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-layer-5);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
a,
|
||||
pre,
|
||||
tr,
|
||||
td,
|
||||
ul,
|
||||
li,
|
||||
noscript,
|
||||
label,
|
||||
input,
|
||||
textarea,
|
||||
button,
|
||||
span {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--text-layer-1);
|
||||
font-family: 'Poppins', Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
|
||||
/* Utility: Text */
|
||||
.text-hero {
|
||||
font-weight: 600;
|
||||
font-size: xxx-large;
|
||||
color: var(--background-layer-0);
|
||||
}
|
||||
|
||||
.text-headline {
|
||||
font-weight: 600;
|
||||
font-size: xx-large;
|
||||
color: var(--background-layer-0);
|
||||
line-height: 1;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.text-header {
|
||||
color: var(--background-layer-0);
|
||||
font-size: large;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-error {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: var(--text-error-1);
|
||||
}
|
||||
|
||||
.text-tip {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.text-muted,
|
||||
s {
|
||||
color: var(--text-layer-3);
|
||||
}
|
||||
|
||||
/* Utility: Buttons */
|
||||
button.small {
|
||||
font-size: small;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
width: fit-content;
|
||||
color: var(--text-layer-1);
|
||||
transition: var(--transition-time) ease-in-out all;
|
||||
}
|
||||
|
||||
button.small:focus-visible,
|
||||
button.small:hover {
|
||||
color: var(--background-layer-0);
|
||||
}
|
||||
|
||||
button.small:disabled {
|
||||
color: var(--text-layer-1) !important;
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
button.default,
|
||||
a.default {
|
||||
min-width: fit-content;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
height: fit-content;
|
||||
text-wrap: nowrap;
|
||||
border-radius: 8px;
|
||||
padding: 4px 8px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-layer-1);
|
||||
background-color: var(--background-layer-3);
|
||||
border: 2px solid var(--background-layer-2);
|
||||
transition: var(--transition-time) ease-in-out all;
|
||||
}
|
||||
|
||||
a.default:hover,
|
||||
a.default:focus-visible,
|
||||
button.default:hover,
|
||||
button.default:focus-visible {
|
||||
color: var(--text-layer-1);
|
||||
border-color: var(--background-layer-0);
|
||||
background-color: var(--background-layer-1);
|
||||
}
|
||||
|
||||
a.destructive:hover,
|
||||
a.destructive:focus-visible,
|
||||
button.destructive:hover,
|
||||
button.destructive:focus-visible {
|
||||
border-color: var(--text-error-1);
|
||||
}
|
||||
|
||||
*[disabled],
|
||||
*:disabled {
|
||||
opacity: 0.75 !important;
|
||||
background-color: var(--background-layer-3) !important;
|
||||
border-color: var(--background-layer-2) !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
a.wide,
|
||||
button.wide {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a.tall,
|
||||
button.tall {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Utility: Inputs */
|
||||
input.text,
|
||||
textarea.text {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
text-wrap: nowrap;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 16px;
|
||||
color: var(--text-layer-1);
|
||||
background-color: var(--background-layer-3);
|
||||
border: 2px solid var(--background-layer-2);
|
||||
transition: var(--transition-time) ease-in-out border;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input.text:focus-visible,
|
||||
textarea.text:focus-visible {
|
||||
color: var(--text-layer-1);
|
||||
border-color: var(--background-layer-0);
|
||||
background-color: var(--background-layer-1);
|
||||
}
|
||||
|
||||
input.text:required:focus-visible:invalid,
|
||||
textarea.text:required:focus-visible:invalid {
|
||||
border: 2px solid var(--text-error-1);
|
||||
}
|
||||
|
||||
textarea.text {
|
||||
resize: vertical;
|
||||
min-height: 45px;
|
||||
text-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
/* Utility: Spacers */
|
||||
div.divider-line {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
background-color: var(--background-layer-1);
|
||||
}
|
||||
|
||||
div.divider-dashed {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
border: 1px dashed var(--background-layer-0);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.divider-header {
|
||||
width: 100%;
|
||||
border-bottom: 2px solid var(--background-layer-1);
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.divider-spacer {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
/* Utility: Shadows & Animations */
|
||||
.special-shadow {
|
||||
filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
|
||||
}
|
||||
|
||||
.special-dropshadow {
|
||||
filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
|
||||
}
|
||||
|
||||
.special-pulse {
|
||||
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Styling */
|
||||
@media (max-width: 640px) {
|
||||
div.divider-dashed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user