Update OfflineDownloadTemplate.txt
This commit is contained in:
radmanplays
GitHub
parent
eb2c20d1b3
commit
aa2528c205
|
|
@ -317,8 +317,327 @@ function displayGui() {
|
||||||
var modNumber = 1;
|
var modNumber = 1;
|
||||||
var container = document.createElement("div");
|
var container = document.createElement("div");
|
||||||
container.id = "eaglerpl_gui";
|
container.id = "eaglerpl_gui";
|
||||||
var newUIStyle = document.createElement("style");
|
container.innerHTML = `<style>:root {
|
||||||
newUIStyle.innerHTML = '@import "https://eaglerforge.github.io/files/newui.css"';
|
--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;
|
||||||
|
}</style>`
|
||||||
container.appendChild(newUIStyle);
|
container.appendChild(newUIStyle);
|
||||||
var modList = document.createElement("div");
|
var modList = document.createElement("div");
|
||||||
modList.style = "height: calc(var(--local-scale) * 80px);";
|
modList.style = "height: calc(var(--local-scale) * 80px);";
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue