Kenzo/Gallus_Pub
2
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Introduce CSS variables for consistent theming

Browse Source 
This commit refactors existing styles to use CSS variables, centralizing values for colors, spacing, typography, and other design elements. It also adds a `variables.css` file for managing these variables. Updated affected components and stylesheets for better maintainability and consistency.
This commit is contained in:
Kenzo
2025-07-19 16:45:51 +02:00
parent 3b011bc463
commit b830f2edaf
10 changed files with 271 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
Gallus_Pub_v1/styles/components/HoverCard.css
View File

@ -2,12 +2,12 @@
position: relative;
width: 350px;
height: 400px;
border-radius: 8px;
background-color: #213b28;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
border-radius: var(--border-radius);
background-color: var(--color-accent-green);
box-shadow: var(--box-shadow);
transition: transform var(--transition-standard);
overflow: hidden;
margin: 1rem;
margin: var(--margin-standard);
display: flex;
flex-direction: column;
}
@ -19,8 +19,8 @@
.card-title {
padding: 15px 15px 5px 15px;
margin: 0;
color: #ceb39b;
font-size: 1.5rem;
color: var(--color-accent-beige);
font-size: var(--font-size-medium);
text-align: center;
order: -2;
}
@ -28,8 +28,8 @@
.card_date {
padding: 0 15px 15px 15px;
margin: 0;
color: #ceb39b;
font-size: 1rem;
color: var(--color-accent-beige);
font-size: var(--font-size-small);
text-align: center;
font-style: italic;
order: -1;
@ -54,17 +54,17 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(33, 59, 40, 0.95);
background-color: var(--color-accent-green-transparent);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
opacity: 0;
transition: opacity 0.3s ease;
transition: opacity var(--transition-standard);
}
.hover-text div {
color: #ceb39b;
color: var(--color-accent-beige);
text-align: center;
max-height: 100%;
width: 100%;
@ -82,13 +82,13 @@
}
.hover-text div::-webkit-scrollbar-thumb {
background: #ceb39b;
background: var(--color-accent-beige);
border-radius: 10px;
}
.hover-text div {
scrollbar-width: thin;
scrollbar-color: #ceb39b rgba(0, 0, 0, 0.1);
scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
}
.hover-card:hover .hover-text {
@ -109,4 +109,4 @@
width: 100%;
max-width: 350px;
}
}
}