Skip to content

Commit 646c056

Browse files
NSPC911NSPC911
committed
fix style
1 parent 27672e0 commit 646c056

File tree

2 files changed

+294
-2
lines changed

2 files changed

+294
-2
lines changed

‎src/index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1111
<title>Bedrock Edition Community Tweaks</title>
1212
<link rel="stylesheet" href="theme.css" />
13-
<link rel="stylesheet" href="oreui-html/src/oreui.css" />
1413
<link href="icon.png" rel="icon" type="image/x-icon" />
1514
</head>
1615
<body>

‎src/theme.css

Lines changed: 294 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:[email protected]&display=swap");
2+
@import url('https://nspc911.github.io/OreUI-HTML/oreui.css');
3+
24
a:link {
35
color: cyan;
46
background-color: transparent;
@@ -124,4 +126,295 @@ button[class$="button"] {
124126
}
125127
.discobutton {
126128
background: url("others/discord.png");
127-
}
129+
}
130+
:root {
131+
--light-bg: rgb(208, 209, 212);
132+
--light-border: rgb(222, 223, 225) rgb(227, 227, 229) rgb(227, 227, 229)
133+
rgb(222, 223, 225);
134+
--light-bezel: rgb(98, 98, 100);
135+
136+
--dark-bg: rgb(72, 73, 74);
137+
--dark-border: rgb(106, 108, 112) rgb(84, 86, 88) rgb(84, 86, 88)
138+
rgb(106, 108, 112);
139+
--dark-bezel: rgb(49, 50, 51);
140+
--outer-bezel-black: black;
141+
142+
--green-bg: rgb(60, 133, 39);
143+
--green-border: rgb(99, 157, 82) rgb(79, 145, 60) rgb(79, 145, 60)
144+
rgb(99, 157, 82);
145+
--green-bezel: rgb(52, 84, 43);
146+
147+
--light-disabled-bg: rgb(208, 209, 212);
148+
--light-disabled-border: rgb(208, 209, 212); /* weird */
149+
--light-disabled-bezel: rgb(177, 178, 181);
150+
--outer-bezel-light-disabled: rgb(140, 141, 144);
151+
152+
--dark-disabled-bg: rgb(53, 54, 55);
153+
--dark-disabled-border: rgb(78, 80, 83) rgb(62, 64, 65) rgb(62, 64, 65)
154+
rgb(78, 80, 83);
155+
--dark-disabled-bezel: rgb(36, 37, 38);
156+
157+
--pink-bg: rgb(255, 186, 231);
158+
--pink-border: rgb(255, 235, 248) rgb(245, 215, 235) rgb(245, 215, 235)
159+
rgb(255, 235, 248);
160+
--pink-bezel: rgb(117, 38, 89);
161+
--outer-bezel-pink: rgb(55, 18, 42);
162+
163+
--red-bg: rgb(214, 71, 71);
164+
--red-border: rgb(224,114, 114) rgb(173, 29, 29) rgb(173, 29, 29)
165+
rgb(224,114, 114);
166+
--red-bezel: rgb(96, 24, 25);
167+
168+
--purple-bg: rgb(115, 69, 229);
169+
--purple-border: rgb(162, 100, 242) rgb(142, 73, 235) rgb(142, 73, 235)
170+
rgb(162, 100, 242);
171+
--purple-bezel: rgb(74, 28, 172);
172+
173+
--padding: 5px 15px;
174+
--bezel-size: 5px;
175+
--hover-overlay: rgba(0, 0, 0, 0.05);
176+
}
177+
[oreui-type="button"] {
178+
border-width: 5px;
179+
border-style: solid;
180+
border-radius: 0;
181+
cursor: pointer;
182+
padding: var(--padding);
183+
transform: translateY(-1px);
184+
text-align: center;
185+
/* Take care of the transitions */
186+
transition:
187+
border-color 0s,
188+
background-color 0s;
189+
/* Bezel */
190+
&::before {
191+
position: absolute;
192+
content: "";
193+
bottom: calc(-3px - var(--bezel-size));
194+
left: -5px;
195+
right: -5px;
196+
height: var(--bezel-size);
197+
transform: translateY(0);
198+
pointer-events: none;
199+
}
200+
/* Hover and active states */
201+
&:hover::before {
202+
height: 0;
203+
}
204+
&:active::before,
205+
&[oreui-state="active"]::before {
206+
height: 0;
207+
}
208+
/* Reset the transform when not active */
209+
&:not(:active):not(:hover):not([oreui-state="active"]) {
210+
transform: translateY(calc(-1px - var(--bezel-size)));
211+
}
212+
/* Override the default styles when disabled */
213+
&[disabled],
214+
&[disabled="true"],
215+
&:disabled {
216+
/* default dark */
217+
color: white;
218+
background-color: var(--dark-disabled-bg) !important;
219+
border-color: var(--dark-disabled-border) !important;
220+
cursor: not-allowed;
221+
&::before {
222+
background-color: var(--dark-disabled-bezel) !important;
223+
}
224+
&::after {
225+
border-color: var(--outer-bezel-black) !important;
226+
}
227+
&[oreui-disabled-color="light"] {
228+
color: black;
229+
background-color: var(--light-disabled-bg) !important;
230+
border-color: var(--light-disabled-border) !important;
231+
&::before {
232+
background-color: var(--light-disabled-bezel) !important;
233+
}
234+
&::after {
235+
border-color: var(--outer-bezel-light-disabled) !important;
236+
}
237+
}
238+
}
239+
/* The surrounding bezel
240+
Outline could've been used but offset
241+
isn't flexible (the bottom offset needs
242+
to change, but it can't) */
243+
&::after {
244+
position: absolute;
245+
content: "";
246+
border-style: solid;
247+
border-width: 2.5px;
248+
bottom: calc(-5px - var(--bezel-size));
249+
left: -5px;
250+
right: -5px;
251+
top: -5px;
252+
pointer-events: none;
253+
}
254+
&:hover::after,
255+
&:active::after,
256+
&[oreui-state="active"]::after {
257+
bottom: -5px;
258+
}
259+
/* dim when hover */
260+
&:hover::after {
261+
background: var(--hover-overlay);
262+
}
263+
/* Colors */
264+
&[oreui-color="red"],
265+
&[oreui-active-color="red"]:active,
266+
&[oreui-active-color="red"][oreui-state="active"] {
267+
&::before {
268+
background-color: var(--red-bezel);
269+
}
270+
&::after {
271+
border-color: var(--outer-bezel-black);
272+
}
273+
}
274+
&[oreui-color="pink"],
275+
&[oreui-active-color="pink"]:active,
276+
&[oreui-active-color="pink"][oreui-state="active"] {
277+
&::before {
278+
background-color: var(--pink-bezel);
279+
}
280+
&::after {
281+
border-color: var(--outer-bezel-pink);
282+
}
283+
}
284+
&[oreui-color="purple"],
285+
&[oreui-active-color="purple"]:active,
286+
&[oreui-active-color="purple"][oreui-state="active"] {
287+
&::before {
288+
background-color: var(--purple-bezel);
289+
}
290+
&::after {
291+
border-color: var(--outer-bezel-black);
292+
}
293+
}
294+
&[oreui-color="green"],
295+
&[oreui-active-color="green"]:active,
296+
&[oreui-active-color="green"][oreui-state="active"] {
297+
&::before {
298+
background-color: var(--green-bezel);
299+
}
300+
&::after {
301+
border-color: var(--outer-bezel-black);
302+
}
303+
}
304+
&[oreui-color="light"],
305+
&[oreui-active-color="light"]:active,
306+
&[oreui-active-color="light"][oreui-state="active"] {
307+
&::before {
308+
background-color: var(--light-bezel);
309+
}
310+
&::after {
311+
border-color: var(--outer-bezel-black);
312+
}
313+
}
314+
&[oreui-color="dark"],
315+
&[oreui-active-color="dark"]:active,
316+
&[oreui-active-color="dark"][oreui-state="active"] {
317+
&::before {
318+
background-color: var(--dark-bezel);
319+
}
320+
&::after {
321+
border-color: var(--outer-bezel-black);
322+
}
323+
}
324+
}
325+
326+
/* Default states */
327+
[oreui-color="red"] {
328+
background-color: var(--red-bg);
329+
border-color: var(--red-border);
330+
color: white;
331+
}
332+
[oreui-color="pink"] {
333+
background-color: var(--pink-bg);
334+
border-color: var(--pink-border);
335+
color: black;
336+
}
337+
[oreui-color="purple"] {
338+
background-color: var(--purple-bg);
339+
border-color: var(--purple-border);
340+
color: white;
341+
}
342+
[oreui-color="green"] {
343+
background-color: var(--green-bg);
344+
border-color: var(--green-border);
345+
color: white;
346+
}
347+
[oreui-color="light"] {
348+
background-color: var(--light-bg);
349+
border-color: var(--light-border);
350+
color: black;
351+
}
352+
[oreui-color="dark"] {
353+
background-color: var(--dark-bg);
354+
border-color: var(--dark-border);
355+
color: white;
356+
}
357+
358+
/* Active states */
359+
[oreui-active-color="red"]:active,
360+
[oreui-active-color="red"][oreui-state="active"] {
361+
background-color: var(--red-bg);
362+
border-color: var(--red-border);
363+
color: white;
364+
}
365+
[oreui-active-color="pink"]:active,
366+
[oreui-active-color="pink"][oreui-state="active"] {
367+
background-color: var(--pink-bg);
368+
border-color: var(--pink-border);
369+
color: black;
370+
}
371+
[oreui-active-color="purple"]:active,
372+
[oreui-active-color="purple"][oreui-state="active"] {
373+
background-color: var(--purple-bg);
374+
border-color: var(--purple-border);
375+
color: white;
376+
}
377+
[oreui-active-color="green"]:active,
378+
[oreui-active-color="green"][oreui-state="active"] {
379+
background-color: var(--green-bg);
380+
border-color: var(--green-border);
381+
color: white;
382+
}
383+
[oreui-active-color="light"]:active,
384+
[oreui-active-color="light"][oreui-state="active"] {
385+
background-color: var(--light-bg);
386+
border-color: var(--light-border);
387+
color: black;
388+
}
389+
[oreui-active-color="dark"]:active,
390+
[oreui-active-color="dark"][oreui-state="active"] {
391+
background-color: var(--dark-bg);
392+
border-color: var(--dark-border);
393+
color: white;
394+
}
395+
[oreui-type="general"] {
396+
border-width: 5px;
397+
border-style: solid;
398+
border-radius: 0;
399+
padding: var(--padding);
400+
text-align: center;
401+
outline: 2.5px solid var(--outer-bezel-black);
402+
outline-offset: -2.5px;
403+
}
404+
[oreui-type="input"] {
405+
background: rgb(51, 51, 51);
406+
outline-style: solid;
407+
outline-color: rgb(27, 27, 27);
408+
outline-width: 2.5px;
409+
box-shadow: inset 0 5px 0 0 rgb(35, 35, 35);
410+
outline-offset: -2.5px;
411+
color: white;
412+
&:focus {
413+
outline-color: white;
414+
outline-offset: -0.5px;
415+
}
416+
&::placeholder {
417+
color: white;
418+
}
419+
}
420+

0 commit comments

Comments
 (0)