127 lines
2.2 KiB
CSS
127 lines
2.2 KiB
CSS
[data-theme="dark"] {
|
|
--background: rgb(31 30 30);
|
|
--background-secondary: rgb(45 45 45);
|
|
--border: rgb(70 70 70);
|
|
--text: rgb(255 255 255);
|
|
--svg-fill: rgb(255 255 255);
|
|
--text-secondary: rgb(200 200 200);
|
|
--accent: rgb(88 101 242);
|
|
--accent-hover: rgb(71 82 196);
|
|
--error: rgb(237 66 69);
|
|
--success: rgb(87 242 135);
|
|
--shadow: rgb(0 0 0 / 20%);
|
|
--card-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
|
|
--input-background: rgb(55 55 55);
|
|
}
|
|
|
|
/* Fonts */
|
|
@font-face {
|
|
font-family: Ubuntu;
|
|
src: url("/public/assets/fonts/Ubuntu/Ubuntu-Regular.ttf") format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Ubuntu Bold;
|
|
src: url("/public/assets/fonts/Ubuntu/Ubuntu-Bold.ttf") format("truetype");
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Fira Code;
|
|
src: url("/public/assets/fonts/Fira_code/FiraCode-Regular.ttf")
|
|
format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
body {
|
|
font-family: Ubuntu, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
background-color: var(--background);
|
|
color: var(--text);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
input,
|
|
button,
|
|
textarea,
|
|
select {
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
button,
|
|
.button {
|
|
cursor: pointer;
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
background-color: var(--accent);
|
|
color: white;
|
|
font-weight: bold;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
button:hover,
|
|
.button:hover {
|
|
background-color: var(--accent-hover);
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--border);
|
|
background-color: var(--input-background);
|
|
color: var(--text);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px rgb(88 101 242 / 30%);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: bold;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
svg {
|
|
fill: var(--svg-fill);
|
|
transition: fill 0.2s ease;
|
|
}
|
|
|
|
svg.stroke-only {
|
|
fill: none;
|
|
stroke: var(--svg-fill);
|
|
stroke-width: 2;
|
|
}
|
|
|
|
svg:hover {
|
|
fill: var(--accent);
|
|
}
|