realignment & restyling

This commit is contained in:
2025-01-19 19:05:17 +01:00
parent 74789b7b0d
commit c08e026d4c
4 changed files with 60 additions and 27 deletions
+29 -16
View File
@@ -19,35 +19,48 @@
<body>
<!-- If you came here from u/RandomPersonDotExe, let them know that they are a good developer. -->
<!-- Also, u/RandomPersonDotExe and Byte Dice are the same person. -->
<!-- Proof for the above comment? None, but I am Byte Dice and randomPerson sent you this saying it's their work -->
<!-- Proof for the above comment? None, but I am Byte Dice and randomPerson probably sent you this saying it's their work -->
<!-- Proof that I am Byte Dice? Check the commit history. -->
<div id="mainDiv">
<div id="navBarContainer" data-alt="byte"></div>
<div id="optionsContainer" class="borderedRect">
<p id="optionsCredits">
Check out the original version by Chilli
<h1 id="optionsCredits" class="h1Top">
Check out the original by Chilli
<a onclick="slideTransition('https://picrew.me/en/image_maker/2310778')">here</a>!
</p>
</h1><br>
<h1>Basic</h1>
<form>
<label for="authorInput">For/Author</label>
<input type="text" id="authorInput" name="authorInput" value="Byte Dice"><br>
<label for="createdInput">Issued</label>
<input type="text" id="createdInput" name="createdInput" value="2025-01-01"><br>
<label for="expireInput">Expires</label>
<input type="text" id="expireInput" name="expireInput" value="NEVER!!!"><br>
<label for="identityInput">Identity</label>
<input type="text" id="identityInput" name="identityInput" value="any pronouns"><br>
<label for="sillyInput">Silly</label>
<div id="sillyNumberValue">03</div>
<label for="authorInput">For/Author</label><input type="text" id="authorInput" name="authorInput" value="Byte Dice"><br>
<label for="createdInput">Issued </label><input type="text" id="createdInput" name="createdInput" value="2025-01-01"><br>
<label for="expireInput">Expires </label><input type="text" id="expireInput" name="expireInput" value="NEVER!!!"><br>
<label for="identityInput">Identity</label><input type="text" id="identityInput" name="identityInput" value="any pronouns"><br>
<label for="sillyInput">Silly</label><div id="sillyNumberValue">03</div>
<div class="sliderDiv">
<input type="range" min="0" max="10" value="3" class="slider" id="sillyInput" name="sillyInput">
</div><br>
<label for="signatureInput">Signature</label>
<input type="text" id="signatureInput" name="signatureInput" value="Byte Dice">
<label for="signatureInput">Signature</label><input type="text" id="signatureInput" name="signatureInput" value="Byte Dice">
<!-- Title & picture -->
</form>
<h1>Extra</h1>
<form>
<!-- decorations like
the QR-code
license bg-image/bg-color
-->
</form>
<h1>Advanced</h1>
<form>
<!--
license border radius
pic border radius
-->
</form>
</div>
+1 -4
View File
@@ -2,10 +2,7 @@
width: 600px;
height: 400px;
padding: 40px 10px 40px 40px;
position: absolute;
left: 50%;
bottom: 0%;
transform: translate(-50%, calc(-22px * var(--pxDensity)));
margin: calc(5px * var(--pxDensity)) auto calc(30px * var(--pxDensity)) auto;
font-size: 0.75rem;
box-sizing: border-box;
display: grid;
+27 -7
View File
@@ -1,11 +1,11 @@
#optionsContainer {
display: inline;
position: absolute;
top: 0%;
left: round(50%, var(--pxDensityPx));
transform: translate(-50%);
display: block;
margin: 0% auto;
width: max-content;
padding: calc(2px * var(--pxDensity));
overflow-y: scroll;
max-height: 45vh;
max-width: 100vw;
}
#optionsCredits {
margin: 0%;
@@ -18,7 +18,7 @@ label {
0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
padding: calc(1px * var(--pxDensity));
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: round(auto, var(--pxDensity));
@@ -38,6 +38,7 @@ input {
width: round(auto, var(--pxDensity));
height: round(auto, var(--pxDensity));
color: inherit;
display: inline-block;
}
.slider {
-webkit-appearance: none;
@@ -54,7 +55,6 @@ input {
outline: none;
padding: 0%;
}
.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
@@ -98,4 +98,24 @@ input {
width: round(auto, var(--pxDensity));
height: auto;
aspect-ratio: 1 / 1;
}
h1 {
background-color: var(--navBarBtn_Inner);
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
padding: calc(1px * var(--pxDensity));
border: none;
margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: round(auto, var(--pxDensity));
color: inherit;
font-size: inherit;
display: inline-block;
}
.h1Top {
margin-top: calc(2px * var(--pxDensity));
}
+3
View File
@@ -11,4 +11,7 @@ a {
}
a:visited {
color: #551A8B;
}
.mainDiv {
text-align: center;
}