Daniel Legt
73bd14572d
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 1m41s
- Implement storage backend deletion, which automatically resets default storage settings and user-specific overrides when a backend is removed. - Add unit tests covering the delete action and its cleanup side effects. - Improve admin UI responsiveness, fixing table scrolling, flex wrapping, and text truncation for long storage backend names. - Update security documentation to clarify trusted proxy configurations and explain how trusted proxies are protected from automatic bans.
197 lines
5.8 KiB
CSS
197 lines
5.8 KiB
CSS
/*
|
|
* CyberPunk theme polish.
|
|
*
|
|
* Inspired by neon Cyberpunk 2077 UI treatments: warning yellow surfaces,
|
|
* cyan/magenta light, hard edges, scanlines, and high-contrast panels.
|
|
*/
|
|
|
|
:root[data-theme="cyberpunk"] body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
background:
|
|
linear-gradient(rgba(255, 242, 0, 0.035) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
|
|
background-size: 100% 3px, 3rem 100%;
|
|
mix-blend-mode: screen;
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
background:
|
|
linear-gradient(115deg, transparent 0 18%, rgba(255, 242, 0, 0.06) 18% 19%, transparent 19% 100%),
|
|
linear-gradient(245deg, transparent 0 76%, rgba(255, 42, 109, 0.08) 76% 77%, transparent 77% 100%);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .site-header {
|
|
border-bottom-color: rgba(255, 242, 0, 0.32);
|
|
box-shadow: 0 0 22px rgba(0, 240, 255, 0.12);
|
|
backdrop-filter: blur(12px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(150%);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .brand {
|
|
text-transform: lowercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .brand-mark {
|
|
background: #fff200;
|
|
color: #08070d;
|
|
box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.45), 0 0 18px rgba(255, 242, 0, 0.42);
|
|
clip-path: polygon(0 0, 100% 0, 100% 72%, 78% 100%, 0 100%);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] h1 {
|
|
color: #fff200;
|
|
text-shadow: 2px 0 0 rgba(255, 42, 109, 0.58), -2px 0 0 rgba(0, 240, 255, 0.46);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .card,
|
|
:root[data-theme="cyberpunk"] .app-sidebar,
|
|
:root[data-theme="cyberpunk"] .storage-card,
|
|
:root[data-theme="cyberpunk"] .storage-op-card,
|
|
:root[data-theme="cyberpunk"] .metric-card,
|
|
:root[data-theme="cyberpunk"] .logs-filter-card,
|
|
:root[data-theme="cyberpunk"] .advanced-options {
|
|
position: relative;
|
|
background:
|
|
linear-gradient(145deg, rgba(22, 19, 31, 0.96), rgba(13, 10, 20, 0.96)),
|
|
linear-gradient(90deg, rgba(255, 242, 0, 0.16), rgba(0, 240, 255, 0.08));
|
|
border-color: rgba(255, 242, 0, 0.28);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .card::before,
|
|
:root[data-theme="cyberpunk"] .storage-card::before,
|
|
:root[data-theme="cyberpunk"] .metric-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
border-top: 1px solid rgba(0, 240, 255, 0.4);
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .admin-shell .app-sidebar {
|
|
border-color: rgba(255, 42, 109, 0.38);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 42, 109, 0.16), rgba(8, 7, 13, 0.94)),
|
|
#16131f;
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .sidebar-link:hover,
|
|
:root[data-theme="cyberpunk"] .sidebar-link.is-active,
|
|
:root[data-theme="cyberpunk"] .admin-shell .sidebar-link.is-active {
|
|
border-color: rgba(255, 242, 0, 0.42);
|
|
background: linear-gradient(90deg, rgba(255, 242, 0, 0.2), rgba(0, 240, 255, 0.08));
|
|
color: #fff200;
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .kicker,
|
|
:root[data-theme="cyberpunk"] .admin-shell .kicker {
|
|
color: #00f0ff;
|
|
text-shadow: 0 0 12px rgba(0, 240, 255, 0.36);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .button-primary,
|
|
:root[data-theme="cyberpunk"] .button.is-active {
|
|
border-color: #fff200;
|
|
background: #fff200;
|
|
color: #08070d;
|
|
box-shadow: 4px 4px 0 rgba(255, 42, 109, 0.7), 0 0 18px rgba(255, 242, 0, 0.3);
|
|
clip-path: polygon(0 0, calc(100% - 0.7rem) 0, 100% 0.7rem, 100% 100%, 0.7rem 100%, 0 calc(100% - 0.7rem));
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .button-primary:hover,
|
|
:root[data-theme="cyberpunk"] .button.is-active:hover {
|
|
background: #00f0ff;
|
|
border-color: #00f0ff;
|
|
color: #08070d;
|
|
box-shadow: 4px 4px 0 rgba(255, 42, 109, 0.78), 0 0 22px rgba(0, 240, 255, 0.42);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .button-outline,
|
|
:root[data-theme="cyberpunk"] .button-ghost {
|
|
border-color: rgba(0, 240, 255, 0.28);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .button-outline:hover,
|
|
:root[data-theme="cyberpunk"] .button-ghost:hover {
|
|
border-color: rgba(255, 242, 0, 0.46);
|
|
background: rgba(255, 242, 0, 0.1);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] input,
|
|
:root[data-theme="cyberpunk"] select,
|
|
:root[data-theme="cyberpunk"] textarea {
|
|
background: rgba(8, 7, 13, 0.92);
|
|
border-color: rgba(0, 240, 255, 0.34);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] input:focus,
|
|
:root[data-theme="cyberpunk"] select:focus,
|
|
:root[data-theme="cyberpunk"] textarea:focus {
|
|
border-color: #fff200;
|
|
box-shadow: 0 0 0 3px rgba(255, 242, 0, 0.16), 0 0 22px rgba(0, 240, 255, 0.18);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .badge {
|
|
border: 1px solid rgba(0, 240, 255, 0.22);
|
|
background: rgba(0, 240, 255, 0.08);
|
|
color: #9bfaff;
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .badge-active,
|
|
:root[data-theme="cyberpunk"] .storage-detail-test.is-ok > span:last-child {
|
|
color: #00ff9f;
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .badge-disabled,
|
|
:root[data-theme="cyberpunk"] .storage-detail-test.is-err > span:last-child,
|
|
:root[data-theme="cyberpunk"] .form-error {
|
|
color: #ff2a6d;
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .drop-zone {
|
|
border-color: rgba(255, 242, 0, 0.34);
|
|
background:
|
|
linear-gradient(145deg, rgba(255, 242, 0, 0.08), transparent 38%),
|
|
rgba(8, 7, 13, 0.76);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] .drop-zone:hover,
|
|
:root[data-theme="cyberpunk"] .drop-zone.is-dragging {
|
|
border-color: #00f0ff;
|
|
background:
|
|
linear-gradient(145deg, rgba(0, 240, 255, 0.14), transparent 42%),
|
|
rgba(8, 7, 13, 0.82);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] ::selection {
|
|
background: #ff2a6d;
|
|
color: #ffffff;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
:root[data-theme="cyberpunk"] .brand-mark,
|
|
:root[data-theme="cyberpunk"] h1 {
|
|
animation: cyberpunk-pulse 4s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes cyberpunk-pulse {
|
|
0%, 100% {
|
|
filter: none;
|
|
}
|
|
50% {
|
|
filter: drop-shadow(0 0 0.45rem rgba(0, 240, 255, 0.28));
|
|
}
|
|
}
|