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>
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user