Skip to content

Commit ba7ec92

Browse files
OtterCodes101OtterCodes101
authored
Create newui.css
1 parent 53062d3 commit ba7ec92

File tree

1 file changed

+326
-0
lines changed

1 file changed

+326
-0
lines changed

‎docs/newui.css

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
@font-face {
2+
font-family: "Minecraft";
3+
src: url("https://mcphackers.org/fonts/minecraft.ttf") format("truetype");
4+
}
5+
6+
:root {
7+
--global-scale: 3;
8+
--default-shadow: #3F3F3F;
9+
--default-color: #FFFFFF;
10+
}
11+
12+
.menucontainer {
13+
margin: calc(var(--local-scale) * 12px) auto calc(var(--local-scale) * 5px);
14+
width: fit-content;
15+
height: auto;
16+
position: fixed;
17+
bottom: 0;
18+
left: 0;
19+
right: 0;
20+
display: grid;
21+
grid-template-columns: repeat(2, 1fr);
22+
gap: calc(var(--local-scale) * 1px);
23+
}
24+
25+
::-webkit-scrollbar {
26+
width: calc(var(--global-scale) * 6px);
27+
height: calc(var(--global-scale) * 6px);
28+
}
29+
30+
::-webkit-scrollbar-corner,
31+
::-webkit-scrollbar-track {
32+
background: #000000;
33+
}
34+
35+
::-webkit-scrollbar-thumb {
36+
height: calc(var(--global-scale) * 32px);
37+
box-shadow: inset calc(var(--global-scale) * -1px) calc(var(--global-scale) * -1px) 0 0 #808080;
38+
background: #C0C0C0;
39+
}
40+
41+
a {
42+
text-decoration: none;
43+
font-family: "Minecraft"; /* Ensure Minecraft font is applied to anchor tags */
44+
}
45+
46+
[contenteditable] {
47+
outline: none;
48+
}
49+
50+
body {
51+
--local-scale: calc(var(--scale, 1) * var(--global-scale));
52+
margin: calc(var(--local-scale) * 4px) calc(var(--local-scale) * 4px);
53+
}
54+
55+
.grid {
56+
display: grid;
57+
}
58+
59+
div.scrollitem {
60+
text-align: center;
61+
margin-right: auto;
62+
margin-left: auto;
63+
}
64+
65+
div.scrollcontent {
66+
display: grid;
67+
align-items: center;
68+
background-attachment: local;
69+
overflow-y: auto;
70+
height: auto;
71+
}
72+
73+
div.scrollitem {
74+
display: grid;
75+
align-content: center;
76+
width: calc(var(--local-scale) * 200px);
77+
height: calc(var(--local-scale) * 20px);
78+
padding: calc(var(--local-scale) * 5px) calc(var(--local-scale) * 4px);
79+
border-style: solid;
80+
text-align: left;
81+
background-color: transparent;
82+
border-color: transparent;
83+
border-width: calc(var(--local-scale) * 1px);
84+
}
85+
86+
div.scrollitem:focus,
87+
div.scrollitem:focus-within {
88+
background-color: #000000;
89+
border-color: #808080;
90+
}
91+
92+
div.fgtop,
93+
div.fgbottom,
94+
.dirt {
95+
margin: 0;
96+
color: #fff;
97+
--local-scale: calc(var(--scale, 1) * var(--global-scale));
98+
background-image: url("https://mcphackers.org/images/dirt.svg");
99+
background-size: calc(var(--local-scale) * 32px);
100+
background-color: #404040;
101+
background-blend-mode: multiply;
102+
}
103+
104+
div.fgtop,
105+
div.fgbottom {
106+
width: 100%;
107+
z-index:10;
108+
height: calc(var(--local-scale) * 32px);
109+
box-shadow: 0px 0px calc(var(--local-scale) * 4px) calc(var(--local-scale) * 2px) #000000;
110+
}
111+
112+
.darkbg {
113+
background-color: #202020;
114+
background-blend-mode: multiply;
115+
}
116+
117+
.gradient {
118+
background-size: cover;
119+
background-image: linear-gradient(to bottom, #303060, #050500);
120+
background-repeat: no-repeat;
121+
background-attachment: fixed;
122+
}
123+
124+
ul {
125+
list-style-type: square;
126+
}
127+
128+
.mod-container {
129+
display: flex;
130+
align-items: center;
131+
justify-content: center;
132+
max-width: 700px;
133+
margin: 10px auto 0;
134+
overflow: hidden;
135+
background-color: rgba(0, 0, 0, 0.3);
136+
}
137+
138+
.mod-container img {
139+
width: 80px;
140+
height: auto;
141+
margin-right: 20px;
142+
}
143+
144+
.mod-container .url-container {
145+
flex-grow: 1;
146+
overflow: hidden;
147+
text-overflow: ellipsis;
148+
white-space: nowrap;
149+
}
150+
151+
.mod-container img {
152+
width: 80px;
153+
height: auto;
154+
margin-right: 20px;
155+
}
156+
157+
.mod-container .url-container {
158+
flex-grow: 1;
159+
overflow: hidden;
160+
text-overflow: ellipsis;
161+
white-space: nowrap;
162+
}
163+
164+
.mod-container.selected {
165+
border: 1px solid #ffffff;
166+
}
167+
168+
h1,
169+
h2,
170+
a,
171+
.mcgray_ui, .black, .darkblue, .darkgreen, .darkaqua, .darkred, .darkpurple, .gold, .gray, .darkgray, .blue, .green, .aqua, .red, .lightpurple, .yellow, .white,
172+
.mc,
173+
.mcsplash,
174+
.mcbutton,
175+
.mcbutton_disabled,
176+
.mcslider,
177+
.mctextfield,
178+
.mcbuttontext {
179+
outline: none;
180+
--local-scale: calc(var(--scale, 0.8) * var(--global-scale));
181+
--local-color: var(--text-color, var(--default-color));
182+
--local-shadow: var(--shadow-color, var(--default-shadow));
183+
font-weight: 100;
184+
font-family: "Minecraft";
185+
word-spacing: calc(2px * var(--local-scale));
186+
line-height: calc(9px * var(--local-scale));
187+
font-size: calc(8px * var(--local-scale));
188+
text-shadow: calc(var(--local-scale)* 1px) calc(var(--local-scale) * 1px) 0 var(--local-shadow);
189+
color: var(--local-color);
190+
}
191+
192+
.mcslider::before {
193+
position: absolute;
194+
text-align: center;
195+
width: inherit;
196+
content: var(--slider-text, "");
197+
}
198+
199+
ul {
200+
padding-inline-start: calc(16px * var(--local-scale));
201+
}
202+
203+
::marker {
204+
letter-spacing: calc(4px * var(--local-scale));
205+
content: "\2022";
206+
}
207+
208+
.mcbutton,
209+
.mcbutton_disabled,
210+
.mctextfield,
211+
.mcslider,
212+
.mcbuttontext {
213+
display: block;
214+
margin-top: calc(var(--local-scale) * 3px);
215+
margin-bottom: calc(var(--local-scale) * 3px);
216+
margin-right: calc(var(--local-scale) * 3px);
217+
margin-left: calc(var(--local-scale) * 3px);
218+
box-sizing: border-box;
219+
padding: calc(var(--local-scale) * 4px) 0px;
220+
text-align: center;
221+
text-decoration: none;
222+
background-size: cover;
223+
background-image: url("https://mcphackers.org/images/button.svg");
224+
line-height: 1;
225+
--shadow-color: #383838;
226+
--text-color: #E0E0E0;
227+
width: calc(var(--local-scale) * 160px);
228+
height: calc(var(--local-scale) * 16px);
229+
font-size: calc(var(--local-scale) * 8px);
230+
}
231+
232+
.mcbutton:focus,
233+
.mcbutton:hover {
234+
background-image: url("https://mcphackers.org/images/button_active.svg");
235+
}
236+
237+
.mcbuttontext {
238+
top: 50%;
239+
left: 50%;
240+
transform: translate(-50%, -50%);
241+
position: absolute;
242+
pointer-events: none;
243+
}
244+
245+
.mcbutton:hover,
246+
.mcbutton:focus,
247+
.mcslider:hover,
248+
.mcslider:hover + .mcbuttontext,
249+
.mcslider:focus + .mcbuttontext,
250+
.mcbutton:hover + .mcbuttontext,
251+
.mcbutton:focus + .mcbuttontext {
252+
--shadow-color: #3F3F28;
253+
--text-color: #FFFFA0;
254+
}
255+
256+
/* Text colors */
257+
258+
a.res { --shadow-color: #153F15; --text-color: #55FF55; }
259+
a.res:hover, a.res:focus { --shadow-color: #002A00; --text-color: #00AA00; }
260+
a { --shadow-color: #15153F; --text-color: #5555FF; }
261+
a:hover, a:focus { --shadow-color: #00002A; --text-color: #0000AA; }
262+
h1, h2 { --shadow-color: #3F3F3F; --text-color: #FFFFFF; }
263+
264+
.mcbutton_disabled,
265+
.mcgray_ui { --shadow-color: #282828 !important; --text-color: #A0A0A0 !important; }
266+
.black { --shadow-color: #000000 !important; --text-color: #000000 !important; }
267+
.darkblue { --shadow-color: #00002A !important; --text-color: #0000AA !important; }
268+
.darkgreen { --shadow-color: #002A00 !important; --text-color: #00AA00 !important; }
269+
.darkaqua { --shadow-color: #002A2A !important; --text-color: #00AAAA !important; }
270+
.darkred { --shadow-color: #2A0000 !important; --text-color: #AA0000 !important; }
271+
.darkpurple { --shadow-color: #2A002A !important; --text-color: #AA00AA !important; }
272+
.gold { --shadow-color: #2A2A00 !important; --text-color: #FFAA00 !important; }
273+
.gray { --shadow-color: #2A2A2A !important; --text-color: #AAAAAA !important; }
274+
.darkgray { --shadow-color: #151515 !important; --text-color: #555555 !important; }
275+
.blue { --shadow-color: #15153F !important; --text-color: #5555FF !important; }
276+
.green { --shadow-color: #153F15 !important; --text-color: #55FF55 !important; }
277+
.aqua { --shadow-color: #153F3F !important; --text-color: #55FFFF !important; }
278+
.red { --shadow-color: #3F1515 !important; --text-color: #FF5555 !important; }
279+
.lightpurple { --shadow-color: #3F153F !important; --text-color: #FF55FF !important; }
280+
.yellow { --shadow-color: #3F3F15 !important; --text-color: #FFFF55 !important; }
281+
.white { --shadow-color: #3F3F3F !important; --text-color: #FFFFFF !important; }
282+
283+
/* --- */
284+
285+
.mcslider {
286+
-webkit-appearance: none;
287+
background-size: cover;
288+
background-image: url("https://mcphackers.org/images/button_inactive.svg");
289+
}
290+
291+
.mcslider::-webkit-slider-thumb {
292+
-webkit-appearance: none;
293+
appearance: none;
294+
width: calc(var(--local-scale) * 8px);
295+
height: calc(var(--local-scale) * 20px);
296+
background-size: cover;
297+
background-image: url("https://mcphackers.org/images/slider.svg");
298+
cursor: pointer;
299+
}
300+
301+
.center {
302+
margin-right: auto;
303+
margin-left: auto;
304+
}
305+
.center:not(.mctextfield) {
306+
text-align: center;
307+
}
308+
309+
.center_vertical {
310+
margin-top: auto;
311+
margin-bottom: auto;
312+
}
313+
314+
.flex,
315+
.flex_space {
316+
display: flex;
317+
column-gap: calc(var(--local-scale) * 6px);
318+
align-content: center;
319+
align-items: center;
320+
}
321+
.flex_space {
322+
justify-content: space-between;
323+
}
324+
.minwidth {
325+
width: fit-content;
326+
}

0 commit comments

Comments
 (0)