Plex Kuma CSS düzenlemesi

1

+

/* Import Inter for a clean look, though we will prioritize System Fonts */

2

+

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

3

+

4

+

:root {

5

+

--text-primary: #ffffff;

6

+

--text-secondary: rgba(255, 255, 255, 0.7);

7

+

--apple-green: #32d74b; /* macOS Green */

8

+

--glass-border: rgba(255, 255, 255, 0.15);

9

+

--glass-highlight: rgba(255, 255, 255, 0.1);

10

+

--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

11

+

}

12

+

13

+

/* --- Global Background (The "Liquid") --- */

14

+

body {

15

+

/* Rich Mesh Gradient - Mimics macOS Wallpaper */

16

+

background:

17

+

radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),

18

+

radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),

19

+

radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);

20

+

background-color: #000; /* Fallback */

21

+

background-attachment: fixed;

22

+

background-size: cover;

23

+

24

+

/* Apple Typography Stack */

25

+

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif !important;

26

+

color: var(--text-primary) !important;

27

+

-webkit-font-smoothing: antialiased;

28

+

}

29

+

30

+

.container {

31

+

max-width: 1000px !important;

32

+

padding-top: 50px;

33

+

}

34

+

35

+

/* --- Reset the Default Containers --- */

36

+

.shadow-box, .card {

37

+

background-color: transparent !important;

38

+

box-shadow: none !important;

39

+

border: none !important;

40

+

}

41

+

42

+

.monitor-list {

43

+

padding: 0 !important;

44

+

background: transparent !important;

45

+

}

46

+

47

+

/* --- The Glass Card Effect (Shared Class) --- */

48

+

/* This logic applies to the banner and the items */

49

+

.overall-status, .item, .btn {

50

+

background: rgba(255, 255, 255, 0.03) !important; /* Very subtle fill */

51

+

backdrop-filter: blur(25px) saturate(180%) !important; /* The "Apple" Frost */

52

+

-webkit-backdrop-filter: blur(25px) saturate(180%);

53

+

border: 1px solid var(--glass-border) !important;

54

+

/* Subtle inner white glow at top to simulate light */

55

+

box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1),

56

+

var(--glass-shadow) !important;

57

+

border-radius: 18px !important; /* Larger Apple-style radius */

58

+

}

59

+

60

+

/* --- Top Buttons --- */

61

+

.btn {

62

+

color: var(--text-primary) !important;

63

+

font-weight: 500;

64

+

font-size: 0.75rem;

65

+

text-transform: uppercase;

66

+

letter-spacing: 0.5px;

67

+

transition: all 0.3s ease;

68

+

}

69

+

70

+

.btn:hover {

71

+

background: rgba(255, 255, 255, 0.15) !important;

72

+

transform: scale(1.02);

73

+

}

74

+

75

+

/* --- "All Systems Operational" Banner --- */

76

+

.overall-status {

77

+

/* Slight green tint for the status box */

78

+

background: rgba(50, 215, 75, 0.1) !important;

79

+

color: var(--apple-green) !important;

80

+

border: 1px solid rgba(50, 215, 75, 0.3) !important;

81

+

padding: 25px !important;

82

+

margin-bottom: 50px !important;

83

+

font-weight: 600;

84

+

font-size: 1.2rem;

85

+

text-shadow: 0 0 20px rgba(50, 215, 75, 0.4);

86

+

}

87

+

88

+

/* --- Group Headers --- */

89

+

.group-title {

90

+

color: var(--text-secondary) !important;

91

+

font-size: 1rem !important;

92

+

font-weight: 600;

93

+

margin-bottom: 15px !important;

94

+

margin-top: 40px !important;

95

+

padding-left: 10px;

96

+

border: none !important;

97

+

opacity: 0.9;

98

+

text-shadow: 0 2px 4px rgba(0,0,0,0.5);

99

+

}

100

+

101

+

/* --- Service Items (The Cards) --- */

102

+

.item {

103

+

margin-bottom: 15px;

104

+

padding: 18px 25px !important;

105

+

transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

106

+

}

107

+

108

+

.item-inner {

109

+

margin: 0 !important;

110

+

padding: 0 !important;

111

+

}

112

+

113

+

/* Hover effect: Lifts and brightens the glass */

114

+

.item:hover {

115

+

transform: translateY(-5px) scale(1.01);

116

+

background: rgba(255, 255, 255, 0.08) !important;

117

+

border-color: rgba(255, 255, 255, 0.3) !important;

118

+

box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;

119

+

}

120

+

121

+

/* Service Name */

122

+

.item .info {

123

+

font-weight: 500;

124

+

font-size: 1.1rem;

125

+

letter-spacing: -0.02em; /* Tight Apple kerning */

126

+

}

127

+

128

+

/* 100% Badge - Pill Shape */

129

+

.badge {

130

+

border-radius: 50px !important; /* Pill shape */

131

+

padding: 6px 12px !important;

132

+

font-weight: 600;

133

+

font-size: 0.75rem;

134

+

backdrop-filter: none !important; /* Optimization */

135

+

}

136

+

137

+

.badge-success {

138

+

background-color: var(--apple-green) !important;

139

+

color: #000 !important; /* Black text on neon green matches iOS */

140

+

box-shadow: 0 0 10px rgba(50, 215, 75, 0.4);

141

+

}

142

+

143

+

/* --- Uptime Bars --- */

144

+

.uptime-bar {

145

+

height: 30px !important;

146

+

margin-top: 5px;

147

+

}

148

+

149

+

/* Use Apple Green for bars */

150

+

.uptime-bar rect[fill="#28a745"], .uptime-bar rect[fill="#5cd65c"] {

151

+

fill: var(--apple-green) !important;

152

+

}

153

+

154

+

/* --- Footer --- */

155

+

footer {

156

+

margin-top: 60px !important;

157

+

color: var(--text-secondary);

158

+

opacity: 0.6;

159

+

font-size: 0.8rem;

160

+

}

161

+

162

+

/* --- Scrollbar (Invisible/Glassy) --- */

163

+

::-webkit-scrollbar { width: 8px; }

164

+

::-webkit-scrollbar-track { background: transparent; }

165

+

::-webkit-scrollbar-thumb {

166

+

background: rgba(255,255,255,0.2);

167

+

border-radius: 10px;

168

+

}

169

+

::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

cdnutter / Plex Kuma CSS

cdnutter bu gisti düzenledi 1 month ago. Düzenlemeye git

cdnutter bu gisti düzenledi 1 month ago. Düzenlemeye git

		@@ -0,0 +1,169 @@
1	+	/* Import Inter for a clean look, though we will prioritize System Fonts */
2	+	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
3	+
4	+	:root {
5	+	--text-primary: #ffffff;
6	+	--text-secondary: rgba(255, 255, 255, 0.7);
7	+	--apple-green: #32d74b; /* macOS Green */
8	+	--glass-border: rgba(255, 255, 255, 0.15);
9	+	--glass-highlight: rgba(255, 255, 255, 0.1);
10	+	--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
11	+	}
12	+
13	+	/* --- Global Background (The "Liquid") --- */
14	+	body {
15	+	/* Rich Mesh Gradient - Mimics macOS Wallpaper */
16	+	background:
17	+	radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
18	+	radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
19	+	radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
20	+	background-color: #000; /* Fallback */
21	+	background-attachment: fixed;
22	+	background-size: cover;
23	+
24	+	/* Apple Typography Stack */
25	+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif !important;
26	+	color: var(--text-primary) !important;
27	+	-webkit-font-smoothing: antialiased;
28	+	}
29	+
30	+	.container {
31	+	max-width: 1000px !important;
32	+	padding-top: 50px;
33	+	}
34	+
35	+	/* --- Reset the Default Containers --- */
36	+	.shadow-box, .card {
37	+	background-color: transparent !important;
38	+	box-shadow: none !important;
39	+	border: none !important;
40	+	}
41	+
42	+	.monitor-list {
43	+	padding: 0 !important;
44	+	background: transparent !important;
45	+	}
46	+
47	+	/* --- The Glass Card Effect (Shared Class) --- */
48	+	/* This logic applies to the banner and the items */
49	+	.overall-status, .item, .btn {
50	+	background: rgba(255, 255, 255, 0.03) !important; /* Very subtle fill */
51	+	backdrop-filter: blur(25px) saturate(180%) !important; /* The "Apple" Frost */
52	+	-webkit-backdrop-filter: blur(25px) saturate(180%);
53	+	border: 1px solid var(--glass-border) !important;
54	+	/* Subtle inner white glow at top to simulate light */
55	+	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
56	+	var(--glass-shadow) !important;
57	+	border-radius: 18px !important; /* Larger Apple-style radius */
58	+	}
59	+
60	+	/* --- Top Buttons --- */
61	+	.btn {
62	+	color: var(--text-primary) !important;
63	+	font-weight: 500;
64	+	font-size: 0.75rem;
65	+	text-transform: uppercase;
66	+	letter-spacing: 0.5px;
67	+	transition: all 0.3s ease;
68	+	}
69	+
70	+	.btn:hover {
71	+	background: rgba(255, 255, 255, 0.15) !important;
72	+	transform: scale(1.02);
73	+	}
74	+
75	+	/* --- "All Systems Operational" Banner --- */
76	+	.overall-status {
77	+	/* Slight green tint for the status box */
78	+	background: rgba(50, 215, 75, 0.1) !important;
79	+	color: var(--apple-green) !important;
80	+	border: 1px solid rgba(50, 215, 75, 0.3) !important;
81	+	padding: 25px !important;
82	+	margin-bottom: 50px !important;
83	+	font-weight: 600;
84	+	font-size: 1.2rem;
85	+	text-shadow: 0 0 20px rgba(50, 215, 75, 0.4);
86	+	}
87	+
88	+	/* --- Group Headers --- */
89	+	.group-title {
90	+	color: var(--text-secondary) !important;
91	+	font-size: 1rem !important;
92	+	font-weight: 600;
93	+	margin-bottom: 15px !important;
94	+	margin-top: 40px !important;
95	+	padding-left: 10px;
96	+	border: none !important;
97	+	opacity: 0.9;
98	+	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
99	+	}
100	+
101	+	/* --- Service Items (The Cards) --- */
102	+	.item {
103	+	margin-bottom: 15px;
104	+	padding: 18px 25px !important;
105	+	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
106	+	}
107	+
108	+	.item-inner {
109	+	margin: 0 !important;
110	+	padding: 0 !important;
111	+	}
112	+
113	+	/* Hover effect: Lifts and brightens the glass */
114	+	.item:hover {
115	+	transform: translateY(-5px) scale(1.01);
116	+	background: rgba(255, 255, 255, 0.08) !important;
117	+	border-color: rgba(255, 255, 255, 0.3) !important;
118	+	box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
119	+	}
120	+
121	+	/* Service Name */
122	+	.item .info {
123	+	font-weight: 500;
124	+	font-size: 1.1rem;
125	+	letter-spacing: -0.02em; /* Tight Apple kerning */
126	+	}
127	+
128	+	/* 100% Badge - Pill Shape */
129	+	.badge {
130	+	border-radius: 50px !important; /* Pill shape */
131	+	padding: 6px 12px !important;
132	+	font-weight: 600;
133	+	font-size: 0.75rem;
134	+	backdrop-filter: none !important; /* Optimization */
135	+	}
136	+
137	+	.badge-success {
138	+	background-color: var(--apple-green) !important;
139	+	color: #000 !important; /* Black text on neon green matches iOS */
140	+	box-shadow: 0 0 10px rgba(50, 215, 75, 0.4);
141	+	}
142	+
143	+	/* --- Uptime Bars --- */
144	+	.uptime-bar {
145	+	height: 30px !important;
146	+	margin-top: 5px;
147	+	}
148	+
149	+	/* Use Apple Green for bars */
150	+	.uptime-bar rect[fill="#28a745"], .uptime-bar rect[fill="#5cd65c"] {
151	+	fill: var(--apple-green) !important;
152	+	}
153	+
154	+	/* --- Footer --- */
155	+	footer {
156	+	margin-top: 60px !important;
157	+	color: var(--text-secondary);
158	+	opacity: 0.6;
159	+	font-size: 0.8rem;
160	+	}
161	+
162	+	/* --- Scrollbar (Invisible/Glassy) --- */
163	+	::-webkit-scrollbar { width: 8px; }
164	+	::-webkit-scrollbar-track { background: transparent; }
165	+	::-webkit-scrollbar-thumb {
166	+	background: rgba(255,255,255,0.2);
167	+	border-radius: 10px;
168	+	}
169	+	::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }