Skip to content

Commit

Permalink
Create newui.css
Browse files Browse the repository at this point in the history
  • Loading branch information
@OtterCodes101
OtterCodes101 authored Apr 1, 2024
1 parent 53062d3 commit ba7ec92
Showing 1 changed file with 326 additions and 0 deletions.
326 changes: 326 additions & 0 deletions docs/newui.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,326 @@
@font-face {
font-family: "Minecraft";
src: url("https://mcphackers.org/fonts/minecraft.ttf") format("truetype");
}

:root {
--global-scale: 3;
--default-shadow: #3F3F3F;
--default-color: #FFFFFF;
}

.menucontainer {
margin: calc(var(--local-scale) * 12px) auto calc(var(--local-scale) * 5px);
width: fit-content;
height: auto;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(var(--local-scale) * 1px);
}

::-webkit-scrollbar {
width: calc(var(--global-scale) * 6px);
height: calc(var(--global-scale) * 6px);
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
background: #000000;
}

::-webkit-scrollbar-thumb {
height: calc(var(--global-scale) * 32px);
box-shadow: inset calc(var(--global-scale) * -1px) calc(var(--global-scale) * -1px) 0 0 #808080;
background: #C0C0C0;
}

a {
text-decoration: none;
font-family: "Minecraft"; /* Ensure Minecraft font is applied to anchor tags */
}

[contenteditable] {
outline: none;
}

body {
--local-scale: calc(var(--scale, 1) * var(--global-scale));
margin: calc(var(--local-scale) * 4px) calc(var(--local-scale) * 4px);
}

.grid {
display: grid;
}

div.scrollitem {
text-align: center;
margin-right: auto;
margin-left: auto;
}

div.scrollcontent {
display: grid;
align-items: center;
background-attachment: local;
overflow-y: auto;
height: auto;
}

div.scrollitem {
display: grid;
align-content: center;
width: calc(var(--local-scale) * 200px);
height: calc(var(--local-scale) * 20px);
padding: calc(var(--local-scale) * 5px) calc(var(--local-scale) * 4px);
border-style: solid;
text-align: left;
background-color: transparent;
border-color: transparent;
border-width: calc(var(--local-scale) * 1px);
}

div.scrollitem:focus,
div.scrollitem:focus-within {
background-color: #000000;
border-color: #808080;
}

div.fgtop,
div.fgbottom,
.dirt {
margin: 0;
color: #fff;
--local-scale: calc(var(--scale, 1) * var(--global-scale));
background-image: url("https://mcphackers.org/images/dirt.svg");
background-size: calc(var(--local-scale) * 32px);
background-color: #404040;
background-blend-mode: multiply;
}

div.fgtop,
div.fgbottom {
width: 100%;
z-index:10;
height: calc(var(--local-scale) * 32px);
box-shadow: 0px 0px calc(var(--local-scale) * 4px) calc(var(--local-scale) * 2px) #000000;
}

.darkbg {
background-color: #202020;
background-blend-mode: multiply;
}

.gradient {
background-size: cover;
background-image: linear-gradient(to bottom, #303060, #050500);
background-repeat: no-repeat;
background-attachment: fixed;
}

ul {
list-style-type: square;
}

.mod-container {
display: flex;
align-items: center;
justify-content: center;
max-width: 700px;
margin: 10px auto 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.3);
}

.mod-container img {
width: 80px;
height: auto;
margin-right: 20px;
}

.mod-container .url-container {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.mod-container img {
width: 80px;
height: auto;
margin-right: 20px;
}

.mod-container .url-container {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.mod-container.selected {
border: 1px solid #ffffff;
}

h1,
h2,
a,
.mcgray_ui, .black, .darkblue, .darkgreen, .darkaqua, .darkred, .darkpurple, .gold, .gray, .darkgray, .blue, .green, .aqua, .red, .lightpurple, .yellow, .white,
.mc,
.mcsplash,
.mcbutton,
.mcbutton_disabled,
.mcslider,
.mctextfield,
.mcbuttontext {
outline: none;
--local-scale: calc(var(--scale, 0.8) * var(--global-scale));
--local-color: var(--text-color, var(--default-color));
--local-shadow: var(--shadow-color, var(--default-shadow));
font-weight: 100;
font-family: "Minecraft";
word-spacing: calc(2px * var(--local-scale));
line-height: calc(9px * var(--local-scale));
font-size: calc(8px * var(--local-scale));
text-shadow: calc(var(--local-scale)* 1px) calc(var(--local-scale) * 1px) 0 var(--local-shadow);
color: var(--local-color);
}

.mcslider::before {
position: absolute;
text-align: center;
width: inherit;
content: var(--slider-text, "");
}

ul {
padding-inline-start: calc(16px * var(--local-scale));
}

::marker {
letter-spacing: calc(4px * var(--local-scale));
content: "\2022";
}

.mcbutton,
.mcbutton_disabled,
.mctextfield,
.mcslider,
.mcbuttontext {
display: block;
margin-top: calc(var(--local-scale) * 3px);
margin-bottom: calc(var(--local-scale) * 3px);
margin-right: calc(var(--local-scale) * 3px);
margin-left: calc(var(--local-scale) * 3px);
box-sizing: border-box;
padding: calc(var(--local-scale) * 4px) 0px;
text-align: center;
text-decoration: none;
background-size: cover;
background-image: url("https://mcphackers.org/images/button.svg");
line-height: 1;
--shadow-color: #383838;
--text-color: #E0E0E0;
width: calc(var(--local-scale) * 160px);
height: calc(var(--local-scale) * 16px);
font-size: calc(var(--local-scale) * 8px);
}

.mcbutton:focus,
.mcbutton:hover {
background-image: url("https://mcphackers.org/images/button_active.svg");
}

.mcbuttontext {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
pointer-events: none;
}

.mcbutton:hover,
.mcbutton:focus,
.mcslider:hover,
.mcslider:hover + .mcbuttontext,
.mcslider:focus + .mcbuttontext,
.mcbutton:hover + .mcbuttontext,
.mcbutton:focus + .mcbuttontext {
--shadow-color: #3F3F28;
--text-color: #FFFFA0;
}

/* Text colors */

a.res { --shadow-color: #153F15; --text-color: #55FF55; }
a.res:hover, a.res:focus { --shadow-color: #002A00; --text-color: #00AA00; }
a { --shadow-color: #15153F; --text-color: #5555FF; }
a:hover, a:focus { --shadow-color: #00002A; --text-color: #0000AA; }
h1, h2 { --shadow-color: #3F3F3F; --text-color: #FFFFFF; }

.mcbutton_disabled,
.mcgray_ui { --shadow-color: #282828 !important; --text-color: #A0A0A0 !important; }
.black { --shadow-color: #000000 !important; --text-color: #000000 !important; }
.darkblue { --shadow-color: #00002A !important; --text-color: #0000AA !important; }
.darkgreen { --shadow-color: #002A00 !important; --text-color: #00AA00 !important; }
.darkaqua { --shadow-color: #002A2A !important; --text-color: #00AAAA !important; }
.darkred { --shadow-color: #2A0000 !important; --text-color: #AA0000 !important; }
.darkpurple { --shadow-color: #2A002A !important; --text-color: #AA00AA !important; }
.gold { --shadow-color: #2A2A00 !important; --text-color: #FFAA00 !important; }
.gray { --shadow-color: #2A2A2A !important; --text-color: #AAAAAA !important; }
.darkgray { --shadow-color: #151515 !important; --text-color: #555555 !important; }
.blue { --shadow-color: #15153F !important; --text-color: #5555FF !important; }
.green { --shadow-color: #153F15 !important; --text-color: #55FF55 !important; }
.aqua { --shadow-color: #153F3F !important; --text-color: #55FFFF !important; }
.red { --shadow-color: #3F1515 !important; --text-color: #FF5555 !important; }
.lightpurple { --shadow-color: #3F153F !important; --text-color: #FF55FF !important; }
.yellow { --shadow-color: #3F3F15 !important; --text-color: #FFFF55 !important; }
.white { --shadow-color: #3F3F3F !important; --text-color: #FFFFFF !important; }

/* --- */

.mcslider {
-webkit-appearance: none;
background-size: cover;
background-image: url("https://mcphackers.org/images/button_inactive.svg");
}

.mcslider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: calc(var(--local-scale) * 8px);
height: calc(var(--local-scale) * 20px);
background-size: cover;
background-image: url("https://mcphackers.org/images/slider.svg");
cursor: pointer;
}

.center {
margin-right: auto;
margin-left: auto;
}
.center:not(.mctextfield) {
text-align: center;
}

.center_vertical {
margin-top: auto;
margin-bottom: auto;
}

.flex,
.flex_space {
display: flex;
column-gap: calc(var(--local-scale) * 6px);
align-content: center;
align-items: center;
}
.flex_space {
justify-content: space-between;
}
.minwidth {
width: fit-content;
}

0 comments on commit ba7ec92

Please sign in to comment.