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

most of it

Browse Source
This commit is contained in:
Robin Grenzdörfer
2023-09-18 17:31:11 +00:00
parent 5f27fe0c5b
commit 481308522f
380 changed files with 3015 additions and 2480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
frontend/src/lib/assets/css/SwiperStylesHP.less Normal file
View File

@@ -0,0 +1,142 @@
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: 10000;
right: 0;
width: 0;
bottom: -2px;
background: var(--background-color);
height: 4px;
transition: width 0.5s ease-in;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
left: 0;
right: auto;
width: 100%;
}
.fill {
display: inline;
position: relative;
overflow: hidden;
}
.fill:hover {
color: var(--background-color) !important;
div {
position: relative;
z-index: 2;
}
}
.fill:after {
content: "";
position: absolute;
z-index: 1;
right: 0;
top: 0px;
bottom: 0px;
width: 0px;
background: var(--opposite-bg-color);
transition: width 0.5s ease-in;
}
.fill:hover:after,
.fill:focus:after,
.fill:active:after {
right: auto;
width: 100%;
left: 0px;
}
@keyframes underlineEffect {
0% {
width: 0;
}
100% {
width: 100%;
}
}
swiper-slide {
&:hover {
h1.active .underline {
animation-play-state: paused;
}
}
}
.titles {
h1 {
.underline {
position: absolute;
z-index: 10000;
left: 0px;
bottom: -10px;
background: var(--opposite-bg-color);
height: 5px;
width: 0;
animation: underlineEffect 4s linear forwards;
@media @tablet {
height: 10px;
}
}
&:not(.active) .underline {
animation: none;
}
}
}
.swiper-button-prev,
.swiper-button-next {
color: var(--normal-font-color) !important;
height: 70px !important;
width: 70px !important;
bottom: 0px !important;
top: initial !important;
transform: scale(0.5) !important;
}
.swiper-button-prev {
right: 18% !important;
left: initial !important;
transform-origin: left !important;
}
.swiper-button-next {
right: 3% !important;
transform-origin: right;
}
@media @tablet {
.swiper-button-prev,
.swiper-button-next {
bottom: initial !important;
top: 120px !important;
transform: scale(0.8) !important;
transform-origin: center !important;
}
.swiper-button-prev {
left: 0% !important;
right: initial !important;
transform-origin: left !important;
}
.swiper-button-next {
right: 0% !important;
transform-origin: right !important;
}
}
@media @desktop {
.swiper-button-prev,
.swiper-button-next {
top: 125px !important;
transform: scale(1) !important;
}
}

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

@@ -1,26 +1,33 @@
@background-color: white;
@normal-font-color: #333333;
@hover-color: #dee2e6;
@heading-font-color: #4b678b;
@link-font-color: #4b678b;
@banner-color: #06d6a0;
:root {
--background-color: white;
--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;
--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);
}
@desktop: ~"only screen and (min-width: 1024px)";
@tablet: ~"only screen and (min-width: 768px)";
@mobile: ~"only screen and (min-width: 100px)";
@body-fontsize-mobile: 17px;
@body-fontsize-pc: 24px;
@body-fontsize-mobile: 16px;
@body-lineheight-mobile: 130%;
@body-lineheight-pc: 130%;
@body-maxwidth: 1800px;
@body-small-maxwidth: 1200px;
/* Allgemeine Stile */
/* roboto-condensed-regular - latin */
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-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;
--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);
--opposite-bg-color-5: rgba(250, 250, 250, 0.05);
.row ul li::before {
background-image: url("../../../../media/arrow-right-darkt.svg") !important;
}
}
* {
font-family: "Roboto Condensed", sans-serif;
@@ -30,14 +37,13 @@
}
body {
font-family: "Roboto Condensed", sans-serif;
color: #333 !important;
height: 100%;
background-color: #f9f9f9;
overflow-x: hidden !important;
}
body {
background-color: @background-color;
color: var(--normal-font-color);
font-family: "Roboto Condensed", sans-serif;
background-color: var(--background-color);
min-height: 100vh;
display: flex;
justify-content: center;
@@ -69,8 +75,8 @@ ol {
/* Links */
a {
color: @link-font-color;
text-decoration: none;
color: var(--link-font-color);
text-decoration: underline;
font-weight: 700;
}
@@ -94,20 +100,17 @@ td {
}
th {
background-color: #f4f4f4;
background-color: var(--background-color-90);
}
button {
background-color: inherit;
border: none;
cursor: pointer;
font-size: inherit;
color: #333;
color: var(--normal-font-color);
}
input,
select {
color: #333;
color: var(--normal-font-color);
width: 100%;
}
.text-container {
}

6
frontend/src/lib/assets/css/productSwiper.less Normal file
View File

@@ -0,0 +1,6 @@
swiper-container {
height: auto;
width: 100%;
max-width: 1200px;
padding: 20px !important;
}

38
frontend/src/lib/assets/css/swiperStyles.less
View File

@@ -1,19 +1,21 @@
.swiper-button-prev,
.swiper-button-next {
transform-origin: left;
color: #333;
transform: scale(0.3);
background-color: rgba(255, 255, 255, 0.6);
top: 50%;
padding: 10px;
height: 70px;
width: 70px;
border-radius: 50px;
}
.swiper-button-prev {
left: 6%;
}
.swiper-button-next {
right: 6%;
transform-origin: right;
.images {
.swiper-button-prev,
.swiper-button-next {
transform-origin: left;
color: var(--normal-font-color);
transform: scale(0.3);
background-color: rgba(255, 255, 255, 0.6);
top: 50%;
padding: 10px;
height: 70px;
width: 70px;
border-radius: 50px;
}
.swiper-button-prev {
left: 6%;
}
.swiper-button-next {
right: 6%;
transform-origin: right;
}
}

13
frontend/src/lib/assets/css/variables.less
View File

@@ -1,13 +1,4 @@
@background-color: white;
@normal-font-color: #333333;
@hover-color: #dee2e6;
@heading-font-color: #4b678b;
@link-font-color: #4b678b;
@banner-color: #06d6a0;
@desktop: ~"only screen and (min-width: 1024px)";
@tablet: ~"only screen and (min-width: 768px)";
@mobile: ~"only screen and (min-width: 100px)";
@body-fontsize-mobile: 17px;
@body-fontsize-pc: 24px;
@@ -17,3 +8,7 @@
@body-maxwidth: 1800px;
@body-small-maxwidth: 1200px;
@desktop: ~"only screen and (min-width: 1024px)";
@tablet: ~"only screen and (min-width: 768px)";
@mobile: ~"only screen and (min-width: 100px)";