Skip to content

Commit f99ed7b

Browse files
author
Your Name
committed
feat: Introduce a new Apple-inspired theme and enhance the existing white theme's styling.
1 parent 5094592 commit f99ed7b

File tree

5 files changed

+220
-5
lines changed

5 files changed

+220
-5
lines changed

‎static/css/apple.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/* ============================================
2+
KUSANAGI - Apple Inspired Theme
3+
============================================ */
4+
5+
body.theme-apple {
6+
/* Core Colors - High Contrast & Clean */
7+
--apple-bg: #ffffff;
8+
--apple-secondary-bg: #f5f5f7;
9+
--apple-accent: #0071e3;
10+
--apple-text-primary: #1d1d1f;
11+
--apple-text-secondary: #86868b;
12+
--apple-border: #d2d2d7;
13+
--apple-shadow: rgba(0, 0, 0, 0.08);
14+
15+
/* Overrides for Kusanagi Variables */
16+
--dark-bg: var(--apple-bg);
17+
--darker-bg: var(--apple-secondary-bg);
18+
--text-primary: var(--apple-text-primary);
19+
--text-secondary: var(--apple-text-secondary);
20+
--neon-cyan: var(--apple-accent);
21+
--neon-green: #24b47e;
22+
--neon-pink: #d60017;
23+
--sidebar-bg: rgba(255, 255, 255, 0.8);
24+
--sidebar-border: var(--apple-border);
25+
26+
background-color: var(--apple-bg);
27+
color: var(--apple-text-primary);
28+
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
29+
-webkit-font-smoothing: antialiased;
30+
}
31+
32+
/* Specific UI Overrides */
33+
body.theme-apple .grid-bg,
34+
body.theme-apple .scanlines {
35+
display: none;
36+
}
37+
38+
body.theme-apple .sidebar {
39+
background: var(--sidebar-bg);
40+
backdrop-filter: saturate(180%) blur(20px);
41+
border-right: 1px solid var(--apple-border);
42+
box-shadow: none;
43+
width: 260px;
44+
}
45+
46+
body.theme-apple .nav-link {
47+
color: var(--apple-text-secondary);
48+
border-radius: 12px;
49+
margin: 4px 12px;
50+
padding: 10px 16px;
51+
font-weight: 500;
52+
transition: all 0.3s ease;
53+
}
54+
55+
body.theme-apple .nav-link:hover {
56+
background: rgba(0, 0, 0, 0.04);
57+
color: var(--apple-text-primary);
58+
}
59+
60+
body.theme-apple .nav-link.active {
61+
background: rgba(0, 113, 227, 0.1);
62+
color: var(--apple-accent);
63+
}
64+
65+
body.theme-apple .header-title {
66+
font-weight: 700;
67+
letter-spacing: -0.022em;
68+
color: var(--apple-text-primary);
69+
text-shadow: none;
70+
font-size: 2rem;
71+
}
72+
73+
/* Cards & Containers */
74+
body.theme-apple .stat-box,
75+
body.theme-apple .node-card,
76+
body.theme-apple .pod-card,
77+
body.theme-apple .issues-table-container {
78+
background: var(--apple-bg);
79+
border: 1px solid var(--apple-border);
80+
border-radius: 20px;
81+
padding: 24px;
82+
box-shadow: 0 4px 24px var(--apple-shadow);
83+
transition: transform 0.3s ease, box-shadow 0.3s ease;
84+
}
85+
86+
body.theme-apple .node-card:hover {
87+
transform: translateY(-4px);
88+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
89+
}
90+
91+
/* Status Bar & Links */
92+
body.theme-apple .status-bar {
93+
background: var(--apple-secondary-bg);
94+
color: var(--apple-text-primary);
95+
border-bottom: 1px solid var(--apple-border);
96+
font-weight: 600;
97+
text-transform: uppercase;
98+
letter-spacing: 0.05em;
99+
font-size: 0.75rem;
100+
}
101+
102+
body.theme-apple .links-bar {
103+
background: #fbfbfd;
104+
border-bottom: 1px solid var(--apple-border);
105+
padding: 12px 20px;
106+
}
107+
108+
body.theme-apple .service-link {
109+
background: #fff !important;
110+
color: var(--apple-text-primary) !important;
111+
border: 1px solid var(--apple-border) !important;
112+
border-radius: 8px !important;
113+
font-weight: 600 !important;
114+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
115+
}
116+
117+
/* Metric Boxes (Fixing the gray background issue) */
118+
body.theme-apple .metric-box {
119+
background: #fff !important;
120+
border: 1px solid var(--apple-border) !important;
121+
border-radius: 12px !important;
122+
}
123+
124+
body.theme-apple .metric-value {
125+
color: var(--apple-accent) !important;
126+
font-weight: 700 !important;
127+
}
128+
129+
/* Live Feed / Tables */
130+
body.theme-apple .issues-table tr {
131+
display: flex !important;
132+
flex-direction: row !important;
133+
align-items: center !important;
134+
justify-content: space-between !important;
135+
padding: 12px 20px !important;
136+
border-bottom: 1px solid var(--apple-border) !important;
137+
}
138+
139+
body.theme-apple .issues-table td {
140+
border: none !important;
141+
padding: 0 !important;
142+
}
143+
144+
body.theme-apple .cyber-btn {
145+
background: var(--apple-accent);
146+
color: white;
147+
border-radius: 980px;
148+
padding: 8px 20px;
149+
font-weight: 600;
150+
border: none;
151+
transition: all 0.2s ease;
152+
}
153+
154+
body.theme-apple .cyber-btn:hover {
155+
background: #0077ed;
156+
opacity: 0.9;
157+
}

‎static/css/white.css‎

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,7 @@ body.theme-white {
3030
}
3131

3232
/* Specific UI Overrides */
33-
body.theme-white .grid-bg {
34-
display: none;
35-
}
36-
33+
body.theme-white .grid-bg,
3734
body.theme-white .scanlines {
3835
display: none;
3936
}
@@ -44,6 +41,61 @@ body.theme-white .sidebar {
4441
box-shadow: 2px 0 10px var(--white-shadow);
4542
}
4643

44+
/* Status Bar & Links Fixes */
45+
body.theme-white .status-bar {
46+
background: #f1f3f5 !important;
47+
color: #1a1a1a !important;
48+
/* Stronger contrast */
49+
font-weight: 700 !important;
50+
}
51+
52+
body.theme-white .links-bar {
53+
background: #e9ecef !important;
54+
border-bottom: 1px solid var(--white-border);
55+
}
56+
57+
body.theme-white .service-link {
58+
background: #ffffff !important;
59+
color: #333 !important;
60+
border: 1px solid #ced4da !important;
61+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
62+
font-weight: 600 !important;
63+
}
64+
65+
/* Metric Cards & Numbers Fixes */
66+
body.theme-white .metric-box {
67+
background: #ffffff !important;
68+
border: 1px solid var(--white-border) !important;
69+
}
70+
71+
body.theme-white .metric-value {
72+
color: #0066ff !important;
73+
/* Blue for visibility */
74+
font-weight: 800 !important;
75+
text-shadow: none !important;
76+
}
77+
78+
body.theme-white .metric-label {
79+
color: #495057 !important;
80+
font-weight: 600 !important;
81+
}
82+
83+
/* Live Feed / Tables - One Line Adaptive Fix */
84+
body.theme-white .issues-table tr {
85+
display: flex !important;
86+
flex-wrap: wrap !important;
87+
align-items: center !important;
88+
justify-content: space-between !important;
89+
padding: 10px 15px !important;
90+
background: #fff !important;
91+
border-bottom: 1px solid #eee !important;
92+
}
93+
94+
body.theme-white .issues-table td {
95+
border: none !important;
96+
padding: 5px 10px !important;
97+
}
98+
4799
body.theme-white .sidebar-logo-text {
48100
color: var(--white-text-primary);
49101
}

‎static/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
<link rel="stylesheet" href="/static/css/sidebar-responsive.css">
5656
<link rel="stylesheet" href="/static/css/fundy.css">
5757
<link rel="stylesheet" href="/static/css/white.css">
58+
<link rel="stylesheet" href="/static/css/apple.css">
5859
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
5960
<link
6061
href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Inter:wght@400;700&family=Rajdhani:wght@500;700&display=swap"

‎static/js/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const KusanagiConfig = {
6464

6565
// UI Configuration
6666
ui: {
67-
themes: ['cyberpunk', 'modern', 'loot-drop', 'fundy', 'white'],
67+
themes: ['cyberpunk', 'modern', 'loot-drop', 'fundy', 'white', 'apple'],
6868
defaultTheme: 'cyberpunk',
6969
defaultLocale: 'fr',
7070
supportedLocales: ['en', 'fr'],

‎static/js/theme.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@ const ThemeManager = {
2929
name: 'Pristine White',
3030
class: 'theme-white',
3131
icon: '⚪'
32+
},
33+
apple: {
34+
name: 'Apple Style',
35+
class: 'theme-apple',
36+
icon: '🍎'
3237
}
3338
},
3439

0 commit comments

Comments
 (0)