Grit-Grenzdoerfer/wm-AllKids-tibi2023
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

form
All checks were successful
deploy to production / deploy (push) Successful in 49s
Details

Browse Source
This commit is contained in:
Robin Grenzdörfer
2023-09-24 09:38:03 +00:00
parent 7813f0b486
commit eee191955e
32 changed files with 1091 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/lib/assets/css/SwiperStylesHP.less
View File

@@ -10,7 +10,7 @@
right: 0;
width: 0;
bottom: -2px;
background: var(--background-color);
background: var(--heading-font-color);
height: 4px;
transition: width 0.5s ease-in;
}
@@ -29,7 +29,7 @@
}
.fill:hover {
color: var(--background-color) !important;
color: var(--heading-font-color) !important;
div {
position: relative;
z-index: 2;
@@ -43,7 +43,7 @@
top: 0px;
bottom: 0px;
width: 0px;
background: var(--opposite-bg-color);
background: var(--heading-font-color);
transition: width 0.5s ease-in;
}
.fill:hover:after,
@@ -78,7 +78,7 @@ swiper-slide {
z-index: 10000;
left: 0px;
bottom: -10px;
background: var(--opposite-bg-color);
background: var(--heading-font-color);
height: 5px;
width: 0;
animation: underlineEffect 4s linear forwards;
@@ -95,7 +95,7 @@ swiper-slide {
.swiper-button-prev,
.swiper-button-next {
color: var(--normal-font-color) !important;
color: var(--heading-font-color) !important;
height: 70px !important;
width: 70px !important;
bottom: 0px !important;
@@ -136,7 +136,7 @@ swiper-slide {
@media @desktop {
.swiper-button-prev,
.swiper-button-next {
top: 125px !important;
top: 155px !important;
transform: scale(1) !important;
}
}

37
frontend/src/lib/assets/css/main.less
View File

@@ -1,25 +1,35 @@
:root {
--background-color: white;
--background-color: rgb(235, 221, 221);
--background-color-90: #ffffffe6;
--normal-font-color: #333333;
--normal-font-color-12: rgba(51, 51, 51, 0.12);
--hover-color: #dee2e6;
--heading-font-color: #672129;
--link-font-color: #672129;
--normal-font-color-80: rgba(51, 51, 51, 0.8);
--normal-font-color-50: rgba(51, 51, 51, 0.5);
--normal-font-color-30: rgba(51, 51, 51, 0.3);
--hover-color: rgb(197, 173, 173);
--heading-font-color: #ff0000;
--top-heading-font-color: rgb(255, 165, 0);
--link-font-color: rgb(255, 165, 0);
--banner-color: #06d6a0;
--opposite-bg-color: #000;
--opposite-bg-color-80: rgba(0, 0, 0, 0.8);
--opposite-bg-color-5: rgba(0, 0, 0, 0.05);
--opposite-bg-color-80: rgba(24, 24, 24, 0.8);
--opposite-bg-color-5: rgba(24, 24, 24, 0.05);
}
body.darkTheme {
--background-color: #1a1a1a; /* softer than #121212 */
--background-color-90: rgba(26, 26, 26, 0.9);
--normal-font-color: #d1d1d1; /* off-white, less harsh */
--normal-font-color-80: rgba(209, 209, 209, 0.8);
--normal-font-color-50: rgba(209, 209, 209, 0.5);
--normal-font-color-30: rgba(209, 209, 209, 0.3);
--normal-font-color-12: rgba(209, 209, 209, 0.12);
--hover-color: #404040; /* subtle change for hover */
--heading-font-color: #9fb3c7; /* slightly brighter for better readability */
--link-font-color: #9fb3c7;
--top-heading-font-color: rgb(200, 106, 0);
--link-font-color: rgb(200, 106, 0);
--banner-color: #04a577; /* a cooler shade for the banner */
--opposite-bg-color: #fafafa; /* off-white */
--opposite-bg-color-80: rgba(250, 250, 250, 0.8);
@@ -75,9 +85,8 @@ ol {
/* Links */
a {
color: var(--link-font-color);
text-decoration: underline;
font-weight: 700;
color: var(--normal-font-color);
}
/* Tabellen */
@@ -92,16 +101,6 @@ table {
right 0.5s ease, transform 0.5s ease;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
th {
background-color: var(--background-color-90);
}
button {
background-color: inherit;
border: none;