From 8530a9106650c3d6c6aeef4c14453c07866d892f Mon Sep 17 00:00:00 2001
From: Wiktor <wiktator.olszewski@gmail.com>
Date: Mon, 21 Jul 2025 23:51:41 +0000
Subject: [PATCH] style(ui): revamp UI with modern premium design system and
 styles

- Replace Material Design 3 tokens with a modern premium design system
- Introduce vibrant color palette with gradients and glass morphism
- Add modern typography, spacing, border radius, shadows, and animations
- Update global styles for smooth scrolling, scrollbar, and text effects
- Redesign header, navigation tabs, and layout with glass backgrounds and gradients
- Enhance logo with animation and interactive hover effects
- Improve responsiveness and spacing for header and navigation
- Overall UI refresh for a premium modern web interface look and feel

Co-authored-by: terragon-labs[bot] <terragon-labs[bot]@users.noreply.github.com>
---
 .../webroot/css/style.css                     | 420 +++++++++++++-----
 1 file changed, 301 insertions(+), 119 deletions(-)

diff --git a/kernelsu_antibootloop_backup/webroot/css/style.css b/kernelsu_antibootloop_backup/webroot/css/style.css
index 3c9b9e8..f18afe0 100644
--- a/kernelsu_antibootloop_backup/webroot/css/style.css
+++ b/kernelsu_antibootloop_backup/webroot/css/style.css
@@ -1,103 +1,122 @@
-/* KernelSU Anti-Bootloop & Backup - Advanced Material Design 3 WebUI */
+/* KernelSU Anti-Bootloop & Backup - Premium Modern WebUI */
 
-/* ===== DESIGN TOKENS ===== */
+/* ===== PREMIUM DESIGN SYSTEM ===== */
 :root {
-  /* Material Design 3 Color System - Light Theme */
-  --md-sys-color-primary: #1976d2;
-  --md-sys-color-on-primary: #ffffff;
-  --md-sys-color-primary-container: #d3e4fd;
-  --md-sys-color-on-primary-container: #001c3b;
+  /* Modern Dark Theme with Vibrant Accents */
+  --primary: #00d4ff;
+  --primary-dark: #0099cc;
+  --primary-light: #33ddff;
+  --primary-gradient: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
   
-  --md-sys-color-secondary: #565e71;
-  --md-sys-color-on-secondary: #ffffff;
-  --md-sys-color-secondary-container: #dae2f9;
-  --md-sys-color-on-secondary-container: #131b2c;
+  --secondary: #ff6b6b;
+  --secondary-dark: #ff5252;
+  --secondary-light: #ff8a80;
+  --secondary-gradient: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
   
-  --md-sys-color-tertiary: #705575;
-  --md-sys-color-on-tertiary: #ffffff;
-  --md-sys-color-tertiary-container: #fad8fd;
-  --md-sys-color-on-tertiary-container: #28132e;
+  --accent: #4ecdc4;
+  --accent-dark: #26a69a;
+  --accent-light: #80cbc4;
   
-  --md-sys-color-surface: #fefbff;
-  --md-sys-color-surface-dim: #ddd8dd;
-  --md-sys-color-surface-bright: #fefbff;
-  --md-sys-color-surface-container-lowest: #ffffff;
-  --md-sys-color-surface-container-low: #f8f3f8;
-  --md-sys-color-surface-container: #f3eef3;
-  --md-sys-color-surface-container-high: #ede8ed;
-  --md-sys-color-surface-container-highest: #e7e2e7;
-  --md-sys-color-on-surface: #1c1b1f;
-  --md-sys-color-on-surface-variant: #46464f;
+  --success: #00e676;
+  --success-dark: #00c853;
+  --success-light: #69f0ae;
   
-  --md-sys-color-background: #fefbff;
-  --md-sys-color-on-background: #1c1b1f;
+  --warning: #ff9800;
+  --warning-dark: #f57c00;
+  --warning-light: #ffb74d;
   
-  --md-sys-color-error: #ba1a1a;
-  --md-sys-color-on-error: #ffffff;
-  --md-sys-color-error-container: #ffdad6;
-  --md-sys-color-on-error-container: #410002;
+  --error: #f44336;
+  --error-dark: #d32f2f;
+  --error-light: #ef5350;
   
-  --md-sys-color-success: #146c2e;
-  --md-sys-color-on-success: #ffffff;
-  --md-sys-color-success-container: #a7f2bb;
-  --md-sys-color-on-success-container: #002106;
+  /* Dark Theme Surfaces */
+  --surface-1: #0f1419;
+  --surface-2: #1a202c;
+  --surface-3: #2d3748;
+  --surface-4: #4a5568;
+  --surface-5: #718096;
   
-  --md-sys-color-warning: #984e00;
-  --md-sys-color-on-warning: #ffffff;
-  --md-sys-color-warning-container: #ffdbcb;
-  --md-sys-color-on-warning-container: #331300;
+  /* Glass Morphism */
+  --glass-bg: rgba(26, 32, 44, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
   
-  --md-sys-color-outline: #77767a;
-  --md-sys-color-outline-variant: #c8c5ca;
-  --md-sys-color-scrim: #000000;
-  --md-sys-color-shadow: #000000;
-  --md-sys-color-inverse-surface: #313034;
-  --md-sys-color-inverse-on-surface: #f4f0f4;
-  --md-sys-color-inverse-primary: #a4c8ff;
+  /* Text Colors */
+  --text-primary: #ffffff;
+  --text-secondary: #a0aec0;
+  --text-tertiary: #718096;
+  --text-accent: var(--primary);
   
-  /* Typography Scale */
-  --md-sys-typescale-display-large-font-size: 57px;
-  --md-sys-typescale-display-large-line-height: 64px;
-  --md-sys-typescale-display-large-font-weight: 400;
+  /* Background */
+  --bg-primary: #0f1419;
+  --bg-secondary: #1a202c;
+  --bg-gradient: linear-gradient(135deg, #0f1419 0%, #1a202c 50%, #2d3748 100%);
   
-  --md-sys-typescale-display-medium-font-size: 45px;
-  --md-sys-typescale-display-medium-line-height: 52px;
-  --md-sys-typescale-display-medium-font-weight: 400;
+  /* Premium Typography System */
+  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
   
-  --md-sys-typescale-display-small-font-size: 36px;
-  --md-sys-typescale-display-small-line-height: 44px;
-  --md-sys-typescale-display-small-font-weight: 400;
+  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
+  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
+  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+  --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
+  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
+  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
+  --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
+  --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
+  --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);
   
-  --md-sys-typescale-headline-large-font-size: 32px;
-  --md-sys-typescale-headline-large-line-height: 40px;
-  --md-sys-typescale-headline-large-font-weight: 400;
+  --font-light: 300;
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --font-black: 900;
   
-  --md-sys-typescale-headline-medium-font-size: 28px;
-  --md-sys-typescale-headline-medium-line-height: 36px;
-  --md-sys-typescale-headline-medium-font-weight: 400;
+  /* Modern Spacing System */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: 4rem;
+  --space-4xl: 6rem;
   
-  --md-sys-typescale-headline-small-font-size: 24px;
-  --md-sys-typescale-headline-small-line-height: 32px;
-  --md-sys-typescale-headline-small-font-weight: 400;
+  /* Border Radius System */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
   
-  --md-sys-typescale-title-large-font-size: 22px;
-  --md-sys-typescale-title-large-line-height: 28px;
-  --md-sys-typescale-title-large-font-weight: 400;
+  /* Modern Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.3);
+  --shadow-glow-strong: 0 0 40px rgba(0, 212, 255, 0.5);
   
-  --md-sys-typescale-title-medium-font-size: 16px;
-  --md-sys-typescale-title-medium-line-height: 24px;
-  --md-sys-typescale-title-medium-font-weight: 500;
+  /* Premium Animations */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
   
-  --md-sys-typescale-title-small-font-size: 14px;
-  --md-sys-typescale-title-small-line-height: 20px;
-  --md-sys-typescale-title-small-font-weight: 500;
-  
-  --md-sys-typescale-body-large-font-size: 16px;
-  --md-sys-typescale-body-large-line-height: 24px;
-  --md-sys-typescale-body-large-font-weight: 400;
-  
-  --md-sys-typescale-body-medium-font-size: 14px;
-  --md-sys-typescale-body-medium-line-height: 20px;
+  /* Z-Index Scale */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  --z-toast: 1080;
   --md-sys-typescale-body-medium-font-weight: 400;
   
   --md-sys-typescale-body-small-font-size: 12px;
@@ -176,6 +195,86 @@
   --layout-grid-column-width: 1fr;
 }
 
+/* ===== MODERN GLOBAL STYLES ===== */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  font-size: 16px;
+}
+
+body {
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  font-weight: var(--font-normal);
+  line-height: 1.6;
+  color: var(--text-primary);
+  background: var(--bg-gradient);
+  background-attachment: fixed;
+  min-height: 100vh;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Modern Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--surface-2);
+  border-radius: var(--radius-md);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--surface-4);
+  border-radius: var(--radius-md);
+  transition: background var(--transition-normal);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--primary);
+}
+
+/* Typography Classes */
+.text-gradient {
+  background: var(--primary-gradient);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-size: 200% 200%;
+  animation: gradientShift 3s ease-in-out infinite;
+}
+
+.text-glow {
+  text-shadow: 0 0 20px var(--primary);
+}
+
+@keyframes gradientShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+/* Glass Morphism Utility */
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+
 /* Dark Theme Variables */
 @media (prefers-color-scheme: dark) {
   :root {
@@ -369,74 +468,148 @@ body {
   top: 8px;
 }
 
-/* ===== LAYOUT ===== */
+/* ===== MODERN LAYOUT SYSTEM ===== */
 .app {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   position: relative;
+  background: var(--bg-gradient);
 }
 
-/* Header */
+/* Premium Header */
 .app-header {
-  background-color: var(--md-sys-color-surface-container);
-  color: var(--md-sys-color-on-surface);
-  box-shadow: var(--md-sys-elevation-level2);
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--glass-border);
   position: sticky;
   top: 0;
-  z-index: var(--z-fab);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  z-index: var(--z-sticky);
+  transition: all var(--transition-normal);
+}
+
+.app-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--secondary) 100%);
+  opacity: 0;
+  transition: opacity var(--transition-normal);
+  pointer-events: none;
+}
+
+.app-header:hover::before {
+  opacity: 0.05;
 }
 
 .header-container {
-  max-width: 1200px;
+  max-width: 1400px;
   margin: 0 auto;
-  padding: 16px 24px;
+  padding: var(--space-lg) var(--space-xl);
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: var(--space-lg);
+  position: relative;
 }
 
 .logo-section {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: var(--space-md);
+  z-index: 1;
 }
 
 .app-logo {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--md-sys-shape-corner-full);
-  background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%);
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-xl);
+  background: var(--primary-gradient);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
-  color: var(--md-sys-color-on-primary);
-  font-weight: 700;
+  font-size: var(--text-xl);
+  color: white;
+  font-weight: var(--font-bold);
+  box-shadow: var(--shadow-glow);
+  transition: all var(--transition-spring);
+  position: relative;
+  overflow: hidden;
+}
+
+.app-logo::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent);
+  animation: logoRotate 3s linear infinite;
+  opacity: 0;
+  transition: opacity var(--transition-normal);
+}
+
+.app-logo:hover {
+  transform: scale(1.05) rotate(-5deg);
+  box-shadow: var(--shadow-glow-strong);
+}
+
+.app-logo:hover::before {
+  opacity: 1;
+}
+
+@keyframes logoRotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 .app-title {
-  color: var(--md-sys-color-on-surface);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-bold);
+  color: var(--text-primary);
   margin: 0;
+  background: var(--primary-gradient);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-size: 200% 200%;
+  animation: gradientShift 4s ease-in-out infinite;
 }
 
 .header-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-sm);
+  z-index: 1;
 }
 
-/* Navigation */
+/* Modern Navigation */
 .nav-tabs {
-  background-color: var(--md-sys-color-surface);
-  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--glass-border);
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  position: relative;
+}
+
+.nav-tabs::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--primary-gradient);
+  opacity: 0.3;
 }
 
 .nav-tabs::-webkit-scrollbar {
@@ -444,23 +617,27 @@ body {
 }
 
 .nav-container {
-  max-width: 1200px;
+  max-width: 1400px;
   margin: 0 auto;
   display: flex;
+  padding: 0 var(--space-xl);
 }
 
 .nav-tab {
   background: none;
   border: none;
-  padding: 16px 24px;
+  padding: var(--space-lg) var(--space-xl);
   min-width: 120px;
   cursor: pointer;
   position: relative;
-  color: var(--md-sys-color-on-surface);
-  font-size: var(--md-sys-typescale-title-small-font-size);
-  font-weight: var(--md-sys-typescale-title-small-font-weight);
-  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+  color: var(--text-secondary);
+  font-size: var(--text-base);
+  font-weight: var(--font-medium);
+  transition: all var(--transition-normal);
   white-space: nowrap;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  margin: 0 var(--space-xs);
+  overflow: hidden;
 }
 
 .nav-tab::before {
@@ -470,21 +647,26 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--md-sys-color-on-surface);
+  background: var(--primary-gradient);
   opacity: 0;
-  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+  transition: all var(--transition-normal);
+  transform: translateY(100%);
+}
+
+.nav-tab:hover {
+  color: var(--text-primary);
+  transform: translateY(-2px);
 }
 
 .nav-tab:hover::before {
-  opacity: var(--md-sys-state-hover-opacity);
-}
-
-.nav-tab:focus::before {
-  opacity: var(--md-sys-state-focus-opacity);
+  opacity: 0.1;
+  transform: translateY(0);
 }
 
 .nav-tab.active {
-  color: var(--md-sys-color-primary);
+  color: var(--primary);
+  background: rgba(0, 212, 255, 0.1);
+  text-shadow: 0 0 10px var(--primary);
 }
 
 .nav-tab.active::after {