Skip to content

Commit d0601b3

Browse files
buildplanbuildplan
authored
Create boxes_terminal.css
1 parent e6ae5af commit d0601b3

File tree

1 file changed

+231
-0
lines changed

1 file changed

+231
-0
lines changed

‎Uptime-Kuma/boxes_terminal.css

+231
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
:root {
2+
--min-item-width: 28ch;
3+
--max-item-width: .5fr;
4+
--grid-spacing: .25rem;
5+
--item-padding: .5rem; /* Increased padding for terminal feel */
6+
}
7+
8+
/* Base styles for terminal look */
9+
body {
10+
font-family: monospace, monospace; /* Monospace font for terminal look */
11+
background-color: #000; /* Black background */
12+
color: #00ff00; /* Green text */
13+
}
14+
15+
/* Links in terminal style */
16+
a {
17+
color: #00ff00; /* Green links */
18+
text-decoration: none; /* No underlines for a cleaner terminal look */
19+
}
20+
21+
a:hover {
22+
text-decoration: underline; /* Underline on hover for link interaction */
23+
color: #00bb00; /* Slightly darker green on hover */
24+
}
25+
26+
27+
/* Scrollbar styling for Webkit browsers (Chrome, Safari) */
28+
::-webkit-scrollbar {
29+
width: 12px; /* Adjust scrollbar width */
30+
background-color: #1e1e1e; /* Dark scrollbar background */
31+
}
32+
33+
::-webkit-scrollbar-thumb {
34+
background-color: #00aa00; /* Green scrollbar thumb color */
35+
border-radius: 0px; /* Square corners for terminal style */
36+
border: 2px solid #1e1e1e; /* Add border to thumb to visually separate */
37+
}
38+
39+
::-webkit-scrollbar-thumb:hover {
40+
background-color: #00cc00; /* Slightly lighter green on hover */
41+
}
42+
43+
/* Scrollbar styling for Firefox */
44+
/* Note: Firefox scrollbar styling is more limited */
45+
/* You might need to experiment with browser specific addons for more control in Firefox */
46+
/* For basic color change in Firefox, you can use the 'scrollbar-color' property */
47+
html {
48+
scrollbar-color: #00aa00 #1e1e1e; /* thumb-color track-color */
49+
}
50+
51+
52+
/* Let items expand on small screens - unchanged */
53+
@media (max-width: 600px) {
54+
:root {
55+
--max-item-width: 1fr;
56+
}
57+
}
58+
59+
/* Cap item width for better appearance on large screens - unchanged */
60+
@media (min-width: 2560px) {
61+
:root {
62+
--max-item-width: 300px;
63+
}
64+
}
65+
66+
/* Readability on 4K screens at distance - adjusted for green text and terminal look */
67+
@media (min-width: 3840px) {
68+
.item-name {
69+
font-size: 1.3em;
70+
font-weight: normal; /* Removed bold for a more classic terminal look */
71+
letter-spacing: 0px; /* Reset letter spacing, terminals are usually tightly spaced */
72+
color: #00ff00; /* Ensure green color */
73+
}
74+
.badge {
75+
font-size: .9em;
76+
color: #00ee00; /* Slightly different green for badges */
77+
background-color: #222; /* Darker badge background */
78+
border: 1px solid #00aa00; /* Green border for badges */
79+
}
80+
.wrap > .d-flex {
81+
font-size: .9em;
82+
font-weight: normal; /* Removed bold */
83+
letter-spacing: 0px; /* Reset letter spacing */
84+
color: #00dd00; /* Slightly different green for wrap text */
85+
}
86+
}
87+
88+
/* Expand container - unchanged */
89+
.container {
90+
max-width: 98%
91+
}
92+
93+
/* Grid layout - unchanged */
94+
.monitor-list > .monitor-list {
95+
display: grid;
96+
grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width), var(--max-item-width)));
97+
grid-gap: var(--grid-spacing);
98+
}
99+
100+
/* Item styling - Terminal like borders and background */
101+
.item {
102+
width: 100%;
103+
padding: var(--item-padding) !important;
104+
border: #00aa00 solid 2px; /* Green border for items */
105+
background-color: #111; /* Darker background for items */
106+
border-radius: 0px; /* No rounded corners for terminal look */
107+
}
108+
109+
.item > .row {
110+
flex-direction: column;
111+
}
112+
113+
.row > div {
114+
width: 100%;
115+
}
116+
117+
/* Text readability - already green from body and 4K section, keep specific if needed */
118+
.item-name {
119+
color: #00ff00; /* Green text for item names - ensure it */
120+
}
121+
122+
/* Badge movement - adjusted badge look to fit terminal style */
123+
.badge {
124+
background-color: #222; /* Darker background for badge */
125+
color: #00ee00; /* Green color for badge text */
126+
border: 1px solid #00aa00; /* Green border for badge */
127+
border-radius: 0px; /* Square badges */
128+
padding: .2em .5em; /* Adjust padding */
129+
font-weight: normal; /* Remove bold from badges */
130+
}
131+
132+
133+
.row {
134+
position: relative;
135+
}
136+
body:not(.mobile) .badge {
137+
position: absolute;
138+
bottom: 0;
139+
left: 50%;
140+
transform: translateX(-50%);
141+
}
142+
143+
/* Header compacting - adjusted overall status badge */
144+
.main {
145+
position: relative;
146+
}
147+
.overall-status {
148+
padding: .5rem !important;
149+
background-color: #111; /* Match item background */
150+
color: #00ff00; /* Green text */
151+
border: 1px solid #00aa00; /* Green border */
152+
border-radius: 0px; /* Square corners */
153+
}
154+
body:not(.mobile) .overall-status {
155+
position: absolute;
156+
top: 0;
157+
right: 0;
158+
width: 50%;
159+
}
160+
161+
/* Tweaks for mobile size - unchanged */
162+
body.mobile {}
163+
164+
/* Footer compacting - adjusted footer text color */
165+
footer {
166+
color: #00bb00; /* Green footer text */
167+
}
168+
169+
footer .alert-heading {
170+
padding: 0 !important;
171+
color: inherit; /* Inherit green color */
172+
}
173+
174+
/* Margin resets - unchanged */
175+
.mb-4, .mb-5 {
176+
margin-bottom: .5rem !important;
177+
}
178+
179+
.mt-4 {
180+
margin-top: .5rem !important;
181+
}
182+
183+
.mt-5 {
184+
margin-top: 0 !important;
185+
}
186+
187+
188+
/* Reduce glaring blue maintenance color - adjusted to a green tone maintenance color */
189+
.bg-maintenance {
190+
background-color: #003366 !important; /* Darker blue-green for maintenance */
191+
color: #00ff00 !important; /* Green text on maintenance */
192+
}
193+
.bg-maintenance * { /* Ensure text within maintenance blocks is also green */
194+
color: #00ff00 !important;
195+
}
196+
197+
/* Alert colors - adjusted to terminal like colors */
198+
.alert-primary {
199+
background-color: #1a1a1a !important;
200+
border-color: #007700 !important;
201+
color: #00ff00 !important;
202+
}
203+
.alert-secondary {
204+
background-color: #202020 !important;
205+
border-color: #008800 !important;
206+
color: #00ee00 !important;
207+
}
208+
.alert-success {
209+
background-color: #2a2a2a !important;
210+
border-color: #009900 !important;
211+
color: #00ff00 !important;
212+
}
213+
.alert-info {
214+
background-color: #303030 !important;
215+
border-color: #00aa00 !important;
216+
color: #00dd00 !important;
217+
}
218+
.alert-warning {
219+
background-color: #3a3a3a !important;
220+
border-color: #ccaa00 !important; /* Yellowish border for warning */
221+
color: #ffff00 !important; /* Yellow text for warning */
222+
}
223+
.alert-danger {
224+
background-color: #404040 !important;
225+
border-color: #aa0000 !important; /* Reddish border for danger */
226+
color: #ff0000 !important; /* Red text for danger */
227+
}
228+
229+
.alert-link {
230+
color: #00ff00 !important; /* Green link color in alerts */
231+
}

0 commit comments

Comments
 (0)