Curtir 0
Bifurcar 0

Última atividade 1 month ago

cdnutter's Avatar cdnutter revisou este gist 1 month ago. Ir para a revisão

Sem alterações

cdnutter's Avatar cdnutter revisou este gist 1 month ago. Ir para a revisão

1 file changed, 169 insertions

pretty-kuma.css(arquivo criado)

@@ -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); }
Próximo Anterior

Desenvolvido por Opengist ⋅ Load: 40ms⋅

Português