added details section & options/parameters section

This commit is contained in:
2025-01-19 00:28:13 +01:00
parent 701e9f42d5
commit 86f7f1c66d
4 changed files with 173 additions and 8 deletions
+111 -1
View File
@@ -5,7 +5,7 @@
left: round(50%, var(--pxDensityPx));
transform: translate(-50%);
width: max-content;
padding: calc(1px * var(--pxDensity));
padding: calc(2px * var(--pxDensity));
}
#licenseContainer {
width: 600px;
@@ -18,6 +18,9 @@
transform: translate(-50%, calc(-22px * var(--pxDensity)));
font-size: 0.75rem;
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
.blackBorderRect {
background-color: #FFFFFF;
@@ -51,4 +54,111 @@
border-top: #000000 solid 6px;
margin: 0%;
padding: 0% 25px;
}
#detailsContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
h2 {
margin: 5px;
}
a {
cursor: pointer;
color: #1010da;
text-decoration: underline;
}
a:visited {
color: #551A8B;
}
#optionsCredits {
margin: 0%;
}
label {
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));
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: round(auto, var(--pxDensity));
}
input {
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;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: round(auto, var(--pxDensity));
color: inherit;
}
.slider {
-webkit-appearance: none;
appearance: none;
background-color: var(--navBarBtn_Border);
box-shadow: none;
filter: none;
border: none;
font-size: inherit;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: calc(1px * var(--pxDensity));
margin: 0%;
outline: none;
padding: 0%;
}
.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
background-color: var(--navBar_Border);
border: none;
cursor: pointer;
border-radius: 0%;
width: calc(3px * var(--pxDensity));
height: calc(3px * var(--pxDensity));
}
.sliderDiv {
display: inline-block;
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;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: round(auto, var(--pxDensity));
color: inherit;
}
#sillyNumberValue {
display: inline;
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;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: auto;
aspect-ratio: 1 / 1;
}