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;
|
||||
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 {
|
||||
position: absolute;
|
||||
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-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
|
||||
if (isMouseOverElement) {
|
||||
// Reset tilt to zero when hovering over element
|
||||
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 {
|
||||
// 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)`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,17 @@
|
||||
--gradient-color-4: #ff1493; /* Fourth gradient orb (left-center) */
|
||||
--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)*/
|
||||
--elevation-layer0: rgba(255,255,255,0);
|
||||
--elevation-layer1: rgba(255,255,255,0.05);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user