mirror of
https://github.com/Kareadita/Kavita.git
synced 2025-08-30 23:00:06 -04:00
Adding dynamic box shadows to inputs and buttons
This commit is contained in:
Robbie Davis
parent
ce0b9fedc6
commit
7dcaf4dca8
@ -81,6 +81,66 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
// Input fields with dynamic shadows
|
||||||
|
::ng-deep input,
|
||||||
|
::ng-deep .form-control {
|
||||||
|
box-shadow:
|
||||||
|
0 2px 4px rgba(0, 0, 0, 0.1),
|
||||||
|
var(--dynamic-shadow-x) var(--dynamic-shadow-y) var(--dynamic-shadow-blur) var(--dynamic-shadow-spread) var(--dynamic-shadow-color);
|
||||||
|
transition: box-shadow 0.1s ease-out, border-color 0.15s ease-in-out;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow:
|
||||||
|
var(--login-input-box-shadow-focus),
|
||||||
|
var(--dynamic-shadow-x) var(--dynamic-shadow-y) var(--dynamic-shadow-blur) var(--dynamic-shadow-spread) var(--dynamic-shadow-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Button styles with dynamic shadows
|
||||||
|
::ng-deep .btn {
|
||||||
|
box-shadow:
|
||||||
|
0 2px 4px var(--dynamic-shadow-color-button),
|
||||||
|
var(--dynamic-shadow-x) var(--dynamic-shadow-y) var(--dynamic-shadow-blur) var(--dynamic-shadow-spread) var(--dynamic-shadow-color);
|
||||||
|
transition: transform 0.15s ease, box-shadow 0.1s ease-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow:
|
||||||
|
0 4px 8px rgba(0, 0, 0, calc(0.2 * var(--shadow-intensity))),
|
||||||
|
var(--dynamic-shadow-x) var(--dynamic-shadow-y) calc(var(--dynamic-shadow-blur) + 2px) var(--dynamic-shadow-spread) var(--dynamic-shadow-color-intense);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0px);
|
||||||
|
box-shadow:
|
||||||
|
0 2px 4px var(--dynamic-shadow-color-button),
|
||||||
|
var(--dynamic-shadow-x) var(--dynamic-shadow-y) var(--dynamic-shadow-blur) var(--dynamic-shadow-spread) var(--dynamic-shadow-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Primary button enhanced styling
|
||||||
|
::ng-deep .btn-primary {
|
||||||
|
box-shadow:
|
||||||
|
0 3px 6px var(--dynamic-shadow-color-primary),
|
||||||
|
var(--dynamic-shadow-x) var(--dynamic-shadow-y) var(--dynamic-shadow-blur) var(--dynamic-shadow-spread) var(--dynamic-shadow-color);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow:
|
||||||
|
0 5px 10px rgba(74, 198, 148, calc(0.3 * var(--shadow-intensity))),
|
||||||
|
var(--dynamic-shadow-x) var(--dynamic-shadow-y) calc(var(--dynamic-shadow-blur) + 2px) var(--dynamic-shadow-spread) var(--dynamic-shadow-color-intense);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Secondary and outline button styles
|
||||||
|
::ng-deep .btn-secondary,
|
||||||
|
::ng-deep .btn-outline-primary {
|
||||||
|
&:hover {
|
||||||
|
box-shadow:
|
||||||
|
0 4px 8px rgba(0, 0, 0, calc(0.25 * var(--shadow-intensity))),
|
||||||
|
var(--dynamic-shadow-x) var(--dynamic-shadow-y) calc(var(--dynamic-shadow-blur) + 2px) var(--dynamic-shadow-spread) var(--dynamic-shadow-color-intense);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.shine {
|
.shine {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|||||||
@ -61,18 +61,41 @@ export class SplashContainerComponent implements OnInit, OnDestroy {
|
|||||||
document.documentElement.style.setProperty('--shine-pos-x', `${Math.round(shineX)}%`);
|
document.documentElement.style.setProperty('--shine-pos-x', `${Math.round(shineX)}%`);
|
||||||
document.documentElement.style.setProperty('--shine-pos-y', `${Math.round(shineY)}%`);
|
document.documentElement.style.setProperty('--shine-pos-y', `${Math.round(shineY)}%`);
|
||||||
|
|
||||||
|
// Calculate tilt values for shadow effects
|
||||||
|
const centerX = elementBounds.left + elementBounds.width / 2;
|
||||||
|
const centerY = elementBounds.top + elementBounds.height / 2;
|
||||||
|
const tiltX = ((mouseY - centerY) / window.innerHeight) * this.maxTilt;
|
||||||
|
const tiltY = ((mouseX - centerX) / window.innerWidth) * this.maxTilt;
|
||||||
|
|
||||||
|
// Calculate shadow offset based on tilt (same direction as mouse for closer-darker effect)
|
||||||
|
const shadowOffsetX = tiltY * 2; // Same direction as tilt for light-source effect
|
||||||
|
const shadowOffsetY = tiltX * 2;
|
||||||
|
|
||||||
|
// Calculate distance from mouse to element center for shadow intensity
|
||||||
|
const distanceFromMouse = Math.sqrt(
|
||||||
|
Math.pow(mouseX - centerX, 2) + Math.pow(mouseY - centerY, 2)
|
||||||
|
);
|
||||||
|
const maxDistance = Math.sqrt(Math.pow(window.innerWidth, 2) + Math.pow(window.innerHeight, 2));
|
||||||
|
const normalizedDistance = Math.min(distanceFromMouse / maxDistance, 1);
|
||||||
|
|
||||||
|
// Calculate shadow intensity (stronger when closer, weaker when farther)
|
||||||
|
const shadowIntensity = Math.max(0.1, 1 - normalizedDistance); // Min 10%, Max 100%
|
||||||
|
|
||||||
|
// Set CSS variables for dynamic shadows with intensity
|
||||||
|
document.documentElement.style.setProperty('--dynamic-shadow-x', `${shadowOffsetX}px`);
|
||||||
|
document.documentElement.style.setProperty('--dynamic-shadow-y', `${shadowOffsetY}px`);
|
||||||
|
document.documentElement.style.setProperty('--shadow-intensity', shadowIntensity.toString());
|
||||||
|
|
||||||
// Apply tilt effect based on hover state
|
// Apply tilt effect based on hover state
|
||||||
if (isMouseOverElement) {
|
if (isMouseOverElement) {
|
||||||
// Reset tilt to zero when hovering over element
|
// Reset tilt to zero when hovering over element
|
||||||
tiltElement.style.transform = 'perspective(500px) rotateX(0deg) rotateY(0deg)';
|
tiltElement.style.transform = 'perspective(500px) rotateX(0deg) rotateY(0deg)';
|
||||||
|
// Reset shadows when hovering
|
||||||
|
document.documentElement.style.setProperty('--dynamic-shadow-x', '0px');
|
||||||
|
document.documentElement.style.setProperty('--dynamic-shadow-y', '0px');
|
||||||
|
document.documentElement.style.setProperty('--shadow-intensity', '0.5');
|
||||||
} else {
|
} else {
|
||||||
// Apply tilt effect based on distance from element center when not hovering
|
// Apply tilt effect based on distance from element center when not hovering
|
||||||
const centerX = elementBounds.left + elementBounds.width / 2;
|
|
||||||
const centerY = elementBounds.top + elementBounds.height / 2;
|
|
||||||
|
|
||||||
const tiltX = ((mouseY - centerY) / window.innerHeight) * this.maxTilt;
|
|
||||||
const tiltY = ((mouseX - centerX) / window.innerWidth) * this.maxTilt;
|
|
||||||
|
|
||||||
tiltElement.style.transform = `perspective(500px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
|
tiltElement.style.transform = `perspective(500px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -9,6 +9,17 @@
|
|||||||
--gradient-color-4: #ff1493; /* Fourth gradient orb (left-center) */
|
--gradient-color-4: #ff1493; /* Fourth gradient orb (left-center) */
|
||||||
--gradient-darkness: 0; /* Adjust from 0 (no overlay) to 1 (completely dark) */
|
--gradient-darkness: 0; /* Adjust from 0 (no overlay) to 1 (completely dark) */
|
||||||
|
|
||||||
|
// Dynamic shadow variables for tilt effects
|
||||||
|
--dynamic-shadow-x: 0px;
|
||||||
|
--dynamic-shadow-y: 0px;
|
||||||
|
--dynamic-shadow-blur: 8px;
|
||||||
|
--dynamic-shadow-spread: 0px;
|
||||||
|
--shadow-intensity: 0.5; // Controls shadow opacity based on distance from light
|
||||||
|
--dynamic-shadow-color: rgba(0, 0, 0, calc(0.3 * var(--shadow-intensity)));
|
||||||
|
--dynamic-shadow-color-intense: rgba(0, 0, 0, calc(0.5 * var(--shadow-intensity)));
|
||||||
|
--dynamic-shadow-color-button: rgba(0, 0, 0, calc(0.15 * var(--shadow-intensity)));
|
||||||
|
--dynamic-shadow-color-primary: rgba(74, 198, 148, calc(0.2 * var(--shadow-intensity)));
|
||||||
|
|
||||||
/* System styles (https://m2.material.io/design/color/dark-theme.html#properties)*/
|
/* System styles (https://m2.material.io/design/color/dark-theme.html#properties)*/
|
||||||
--elevation-layer0: rgba(255,255,255,0);
|
--elevation-layer0: rgba(255,255,255,0);
|
||||||
--elevation-layer1: rgba(255,255,255,0.05);
|
--elevation-layer1: rgba(255,255,255,0.05);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user