Refactor code structure for improved readability and maintainability
This commit is contained in:
CodeDevMLH
@@ -1031,7 +1031,8 @@
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
/* Floating Custom Overlay Styling */
|
||||
|
||||
/* Custom Overlay Styling */
|
||||
.custom-overlay-container {
|
||||
position: absolute;
|
||||
top: 8vh;
|
||||
@@ -1040,10 +1041,27 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
pointer-events: none; /* Let clicks pass through to the slider */
|
||||
animation: fadeInOverlay 1.5s ease-in-out forwards;
|
||||
pointer-events: none;
|
||||
animation: overlayFadeInGlobal 1.5s ease-in-out forwards;
|
||||
/* animation: fadeInOverlay 1.5s ease-in-out forwards; */
|
||||
}
|
||||
|
||||
@keyframes overlayFadeInGlobal {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* @keyframes fadeInOverlay {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
} */
|
||||
|
||||
.custom-overlay-text {
|
||||
font-family: "Archivo Narrow", sans-serif;
|
||||
color: #fff;
|
||||
@@ -1061,21 +1079,10 @@
|
||||
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
|
||||
}
|
||||
|
||||
@keyframes fadeInOverlay {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Make it smaller on mobile portrait */
|
||||
@media only screen and (max-width: 767px) and (orientation: portrait) {
|
||||
.custom-overlay-container {
|
||||
top: 5vh;
|
||||
top: 8%; /* oder 5vh? */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
@@ -1084,15 +1091,10 @@
|
||||
}
|
||||
|
||||
.custom-overlay-text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.custom-overlay-image {
|
||||
max-width: 200px;
|
||||
max-height: 80px;
|
||||
font-size: 1.5rem; /* 1.5 - 1.8 */
|
||||
}
|
||||
|
||||
@keyframes fadeInOverlay {
|
||||
/* @keyframes fadeInOverlay {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -10px);
|
||||
@@ -1101,10 +1103,20 @@
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
} */
|
||||
|
||||
.custom-overlay-image {
|
||||
max-width: 150px; /* oder 200px? */
|
||||
max-height: 60px; /* oder 80px? */
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Overlay Styles */
|
||||
/* Custom Overlay Text Styles */
|
||||
.custom-overlay-style-None {
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.custom-overlay-style-Shadowed {
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.8);
|
||||
@@ -1129,7 +1141,7 @@
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: none; /* override default */
|
||||
text-shadow: none;
|
||||
filter: drop-shadow(0px 2px 8px rgba(255, 215, 0, 0.4)) drop-shadow(2px 2px 4px rgba(0,0,0,0.8));
|
||||
animation: shineCinematic 6s linear infinite;
|
||||
background-size: 200% auto;
|
||||
@@ -1155,8 +1167,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Text Overlay Styles */
|
||||
.custom-overlay-style-Neon {
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
@@ -1250,39 +1260,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Image Overlay Styles */
|
||||
.custom-overlay-img-RoundedShadow {
|
||||
border-radius: 12px;
|
||||
filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
.custom-overlay-img-GlowingBorder {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px #00a4dc, 0 0 20px #00a4dc, 0 0 30px #00a4dc, inset 0 0 10px #00a4dc;
|
||||
animation: pulseGlowImg 2s infinite alternate;
|
||||
}
|
||||
@keyframes pulseGlowImg {
|
||||
from { box-shadow: 0 0 10px #00a4dc, 0 0 20px #00a4dc, 0 0 30px #00a4dc; }
|
||||
to { box-shadow: 0 0 15px #00a4dc, 0 0 30px #00a4dc, 0 0 45px #00a4dc; }
|
||||
}
|
||||
|
||||
.custom-overlay-img-Polaroid {
|
||||
background: white;
|
||||
padding: 10px 10px 25px 10px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 12px 24px rgba(0,0,0,0.3);
|
||||
transform: rotate(-3deg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.custom-overlay-img-Vintage {
|
||||
filter: sepia(0.6) contrast(1.2) brightness(0.9) saturate(1.2) drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
|
||||
}
|
||||
|
||||
.custom-overlay-img-Grayscale {
|
||||
filter: grayscale(100%) contrast(1.1) drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
|
||||
}
|
||||
|
||||
/* More Text Overlay Styles */
|
||||
.custom-overlay-style-SteadyNeon {
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
@@ -1338,3 +1315,94 @@
|
||||
}
|
||||
}
|
||||
|
||||
.custom-overlay-style-Wave {
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
|
||||
display: inline-block;
|
||||
animation: liquidWave 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes liquidWave {
|
||||
0%, 100% { transform: translateY(0) skewY(0); }
|
||||
25% { transform: translateY(-3px) skewY(1deg); }
|
||||
75% { transform: translateY(3px) skewY(-1deg); }
|
||||
}
|
||||
|
||||
.custom-overlay-style-VHS {
|
||||
color: #fff;
|
||||
text-shadow: 3px 0 0 #f00, -3px 0 0 #0ff;
|
||||
animation: vhsTracking 2s steps(2, start) infinite;
|
||||
}
|
||||
@keyframes vhsTracking {
|
||||
0%, 100% { text-shadow: 3px 0 0 #f00, -3px 0 0 #0ff; }
|
||||
50% { text-shadow: 2px 1px 0 #f00, -2px -1px 0 #0ff; }
|
||||
}
|
||||
|
||||
.custom-overlay-style-Matrix {
|
||||
color: #0f0;
|
||||
font-family: monospace;
|
||||
text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
|
||||
letter-spacing: 2px;
|
||||
animation: matrixGlow 2s infinite alternate;
|
||||
}
|
||||
@keyframes matrixGlow {
|
||||
to { text-shadow: 0 0 10px #0f0, 0 0 20px #0f0; }
|
||||
}
|
||||
|
||||
/* Custom Overlay Image Styles */
|
||||
.custom-overlay-img-RoundedShadow {
|
||||
border-radius: 12px;
|
||||
filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
.custom-overlay-img-GlowingBorder {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px #00a4dc, 0 0 20px #00a4dc, 0 0 30px #00a4dc, inset 0 0 10px #00a4dc;
|
||||
animation: pulseGlowImg 2s infinite alternate;
|
||||
}
|
||||
@keyframes pulseGlowImg {
|
||||
from { box-shadow: 0 0 10px #00a4dc, 0 0 20px #00a4dc, 0 0 30px #00a4dc; }
|
||||
to { box-shadow: 0 0 15px #00a4dc, 0 0 30px #00a4dc, 0 0 45px #00a4dc; }
|
||||
}
|
||||
|
||||
.custom-overlay-img-Polaroid {
|
||||
background: white;
|
||||
padding: 10px 10px 25px 10px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 12px 24px rgba(0,0,0,0.3);
|
||||
transform: rotate(-3deg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.custom-overlay-img-Vintage {
|
||||
filter: sepia(0.6) contrast(1.2) brightness(0.9) saturate(1.2) drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
|
||||
}
|
||||
|
||||
.custom-overlay-img-Grayscale {
|
||||
filter: grayscale(100%) contrast(1.1) drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
|
||||
}
|
||||
|
||||
.custom-overlay-img-Hologram {
|
||||
filter: drop-shadow(0 0 10px #0ff) sepia(0.8) hue-rotate(180deg) saturate(3);
|
||||
opacity: 0.8;
|
||||
animation: hologramFlicker 3s infinite;
|
||||
}
|
||||
@keyframes hologramFlicker {
|
||||
0% { opacity: 0.8; transform: skewX(0); }
|
||||
5% { opacity: 0.5; transform: skewX(2deg); }
|
||||
10% { opacity: 0.9; transform: skewX(-2deg); }
|
||||
15% { opacity: 0.8; transform: skewX(0); }
|
||||
100% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.custom-overlay-img-CRT {
|
||||
filter: contrast(1.5) brightness(1.2) drop-shadow(3px 0 0 rgba(255,0,0,0.5)) drop-shadow(-3px 0 0 rgba(0,0,255,0.5));
|
||||
}
|
||||
|
||||
.custom-overlay-img-Floating {
|
||||
filter: drop-shadow(0 15px 20px rgba(0,0,0,0.6));
|
||||
animation: floatImg 4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes floatImg {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-15px); }
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user