diff --git a/docs/fuckery/public/newui.css b/docs/fuckery/public/newui.css new file mode 100644 index 0000000..5c28715 --- /dev/null +++ b/docs/fuckery/public/newui.css @@ -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; +}