feat: Various style improvements

This commit is contained in:
moanos [he/him] 2024-04-19 21:28:40 +02:00
parent 62381cae39
commit 5a8802f8f2

View File

@ -1,10 +1,19 @@
:root { :root {
--background-one: #5daa68; --primary-light-one: #5daa68;
--background-two: #203f24; --primary-light-two: #4a9455;
--background-three: #faf1cf; --primary-dark-one: #203f24;
--highlight-one: #5daa68; --secondary-light-one: #faf1cf;
--text-one: #faf1cf; --background-one: var(--primary-light-one);
--text-three: var(--background-two); --background-two: var(--primary-light-two);
--background-three: var(--secondary-light-one);
--background-four: var(--primary-dark-one);
--highlight-one: var(--primary-dark-one);
--highlight-one-text: var(--secondary-light-one);
--text-one: var(--secondary-light-one);
--shadow-one: var(--primary-dark-one);
--text-two: var(--primary-dark-one);
--text-three: var(--primary-light-one);
--shadow-three: var(--primary-dark-one);
} }
html, body { html, body {
@ -14,8 +23,10 @@ html, body {
body { body {
background: var(--background-one); background: var(--background-one);
color: var(--text-two);
} }
.content-box { .content-box {
margin: 20px; margin: 20px;
} }
@ -50,6 +61,8 @@ th {
h1 { h1 {
padding-top: 10px; padding-top: 10px;
word-wrap: break-word; word-wrap: break-word;
color: var(--text-one);
text-shadow: 2px 2px var(--shadow-one);
} }
* { * {
@ -59,9 +72,11 @@ h1 {
.header { .header {
overflow: hidden; overflow: hidden;
background-color: var(--background-two); background-color: var(--background-two);
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
} }
.header a, .sidebar-nav a { .header a {
color: var(--text-one); color: var(--text-one);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -76,7 +91,7 @@ h1 {
.header a:hover { .header a:hover {
background-color: var(--highlight-one); background-color: var(--highlight-one);
color: black; color: var(--highlight-one-text);
} }
.header a.active { .header a.active {
@ -90,7 +105,7 @@ h1 {
border: none; border: none;
border-radius: 4px; border-radius: 4px;
opacity: 1; opacity: 1;
background-color: #4ba3cd; background-color: var(--secondary-light-one);
} }
.header-right select.option { .header-right select.option {
@ -340,7 +355,12 @@ h1 {
border-radius: 3%; border-radius: 3%;
padding: 5px; padding: 5px;
background: var(--background-three); background: var(--background-three);
color: var(--text-two);
}
.card-adoption-notice h1 {
color: var(--text-three); color: var(--text-three);
text-shadow: 2px 2px var(--shadow-three);
} }
.card-adoption-notice img { .card-adoption-notice img {