refactor(style.css): use new palette

This commit is contained in:
2025-08-25 19:26:41 +02:00
parent 44df495096
commit fc5dc23c0e

View File

@@ -1,22 +1,4 @@
:root { @import "palette.css";
--nord-bg0: #2e3440;
--nord-bg1: #3b4252;
--nord-bg2: #434c5e;
--nord-bg3: #4c566a;
--nord-fg0: #eceff4;
--nord-fg1: #e5e9f0;
--nord-fg2: #d8dee9;
--nord-acc0: #8fbcbb;
--nord-acc1: #88c0d0;
--nord-acc2: #81a1c1;
--nord-acc3: #5e81ac;
--nord-aur0: #bf616a;
--nord-aur1: #d08770;
--nord-aur2: #ebcb8b;
--nord-aur3: #a3be8c;
--nord-aur4: #b48ead;
}
* { * {
margin: 0; margin: 0;
@@ -25,22 +7,22 @@
} }
body { body {
background-color: var(--nord-aur4); background-color: var(--ctp-base);
font-family: monospace, sans-serif !important; font-family: monospace, sans-serif !important;
color: var(--nord-fg0); color: var(--ctp-text);
} }
input { input {
font-family: inherit; font-family: inherit;
color: #eceff4; color: #eceff4;
background-color: var(--nord-bg2); background-color: var(--ctp-crust);
border: none; border: none;
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0.25rem; padding: 0.25rem;
} }
a { a {
color: var(--nord-acc0); color: var(--ctp-blue);
text-decoration: none; text-decoration: none;
} }
@@ -54,8 +36,8 @@ header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: var(--nord-bg0); background-color: var(--ctp-mantle);
color: var(--nord-fg0); /* color: var(--ctp-text); */
padding: 1rem; padding: 1rem;
} }
@@ -64,34 +46,34 @@ main {
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
background-color: var(--nord-bg1); /* background-color: var(--ctp-base); */
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;
} }
header a { header a {
text-decoration: none; text-decoration: none;
color: var(--nord-fg0); /* color: var(--nord-fg0); */
} }
.button { .button {
display: inline-block; display: inline-block;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: var(--nord-acc0); background-color: var(--ctp-lavender);
color: var(--nord-bg0); color: var(--ctp-base);
border: none; border: none;
border-radius: 0.25rem; border-radius: 0.25rem;
text-decoration: none; text-decoration: none;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
.button a:hover { /* .button a:hover { */
color: var(--nord-bg0); /* color: var(--nord-bg0); */
text-decoration: none; /* text-decoration: none; */
} /* } */
.button:hover { .button:hover {
background-color: var(--nord-acc2); background-color: var(--ctp-mauve);
cursor: pointer; cursor: pointer;
} }
@@ -106,9 +88,9 @@ header a {
justify-content: center; justify-content: center;
margin: 1rem; margin: 1rem;
padding: 1rem; padding: 1rem;
background-color: var(--nord-aur0); background-color: var(--ctp-surface0);
color: var(--nord-fg0); color: var(--ctp-red);
border: 6px solid var(--nord-aur1); border: 6px solid var(--ctp-red);
border-radius: 24px; border-radius: 24px;
} }
@@ -117,9 +99,9 @@ header a {
width: 100%; width: 100%;
} }
.select-table{ .select-table {
border-collapse: collapse; border-collapse: collapse;
border: 2px solid var(--nord-fg0); border: 2px solid var(--ctp-surface0);
} }
.select-table thead { .select-table thead {
@@ -131,18 +113,18 @@ header a {
.select-table th, .select-table td { .select-table th, .select-table td {
padding: 0.5rem; padding: 0.5rem;
text-align: center; text-align: center;
border: 1px solid var(--nord-fg1); border: 1px solid var(--ctp-surface0);
border-collapse: collapse; border-collapse: collapse;
} }
.select-table th { .select-table th {
background-color: var(--nord-bg2); background-color: var(--ctp-surface1);
color: var(--nord-fg0); color: var(--nord-fg0);
} }
.select-table a { .select-table a {
display: block; display: block;
color: var(--nord-acc0); /* color: var(--nord-acc0); */
text-decoration: none; text-decoration: none;
transition: 0.1s ease-in-out; transition: 0.1s ease-in-out;
} }
@@ -152,23 +134,23 @@ header a {
} }
.select-table tr:hover { .select-table tr:hover {
background-color: var(--nord-acc1); background-color: var(--ctp-surface0);
} }
.select-table tr:hover a { .select-table tr:hover a {
color: var(--nord-bg0); color: var(--ctp-base);
} }
.red-bg { .red-bg {
background-color: var(--nord-aur0); background-color: var(--ctp-red);
} }
.yellow-bg { .yellow-bg {
background-color: var(--nord-aur2); background-color: var(--ctp-yellow);
} }
.green-bg { .green-bg {
background-color: var(--nord-aur3); background-color: var(--ctp-green);
} }
.button-container { .button-container {
@@ -183,24 +165,24 @@ header a {
} }
.link:hover { .link:hover {
color: var(--nord-acc2); color: var(--ctp-blue);
} }
.details-table tr td:first-child { .details-table tr td:first-child {
font-weight: 900; font-weight: 900;
background-color: var(--nord-bg3); background-color: var(--ctp-surface0);
white-space: nowrap; white-space: nowrap;
width: 1%; width: 1%;
} }
.details-table { .details-table {
border-collapse: collapse; border-collapse: collapse;
border: 2px solid var(--nord-fg0); border: 2px solid var(--ctp-surface1);
} }
.details-table th, .details-table td { .details-table th, .details-table td {
padding: 0.5rem; padding: 0.5rem;
text-align: left; text-align: left;
border: 1px solid var(--nord-fg1); border: 1px solid var(--ctp-text);
border-collapse: collapse; border-collapse: collapse;
} }