ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

organized styles

Browse Source
This commit is contained in:
ByteDice
2025-01-19 18:03:11 +01:00
parent 9f5f88e1af
commit 74789b7b0d
4 changed files with 173 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
toys/license/index.html
+3
View File
@@ -9,6 +9,8 @@
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="license.css">
<link rel="stylesheet" href="options.css">
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Boykisser license</title>
@@ -29,6 +31,7 @@
<a onclick="slideTransition('https://picrew.me/en/image_maker/2310778')">here</a>!
</p>
<h1>Basic</h1>
<form>
<label for="authorInput">For/Author</label>
<input type="text" id="authorInput" name="authorInput" value="Byte Dice"><br>
toys/license/license.css
+69
View File
@@ -0,0 +1,69 @@
#licenseContainer {
width: 600px;
height: 400px;
padding: 40px 10px 40px 40px;
position: absolute;
left: 50%;
bottom: 0%;
transform: translate(-50%, calc(-22px * var(--pxDensity)));
font-size: 0.75rem;
box-sizing: border-box;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
#picContainer {
margin-top: 40px;
width: 150px;
height: 150px;
}
#credits {
position: absolute;
bottom: 0%;
left: 0%;
margin: 0% 0% 0% 20px;
color: var(--navBarBtn_Inner);
font-size: 0.6rem;
}
#signatureContainer {
display: inline-flex;
flex-direction: column;
margin: 5% 0% 0% 0%;
}
#signature {
margin: 0% 0% 0.2rem 0%;
text-align: center;
font-size: 1rem;
}
#signHere {
border-top: #000000 solid 6px;
margin: 0%;
padding: 0% 25px;
text-align: center;
}
#detailsContainer {
display: grid;
grid-template-columns: repeat(2, auto);
}
h2 {
margin: 5px;
}
#sillyValue {
height: 100%;
background-color: #FF0000;
}
.sillyGrid {
width: 99%;
aspect-ratio: 10 / 1;
height: auto;
background-image: repeating-linear-gradient(
to right,
#000000 0px,
#000000 3px,
transparent 3px,
transparent 10%
);
border: 3px solid black;
border-radius: 8px;
align-self: center;
}
toys/license/options.css
+101
View File
@@ -0,0 +1,101 @@
#optionsContainer {
display: inline;
position: absolute;
top: 0%;
left: round(50%, var(--pxDensityPx));
transform: translate(-50%);
width: max-content;
padding: calc(2px * var(--pxDensity));
}
#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_Inner);
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;
}
toys/license/style.css
-171
View File
@@ -1,68 +1,9 @@
#optionsContainer {
display: inline;
position: absolute;
top: 0%;
left: round(50%, var(--pxDensityPx));
transform: translate(-50%);
width: max-content;
padding: calc(2px * var(--pxDensity));
}
#licenseContainer {
width: 600px;
height: 400px;
padding: 40px 10px 40px 40px;
position: absolute;
left: 50%;
bottom: 0%;
transform: translate(-50%, calc(-22px * var(--pxDensity)));
font-size: 0.75rem;
box-sizing: border-box;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.blackBorderRect {
background-color: #FFFFFF;
border: 10px #000000 solid;
border-radius: 32px;
color: #000000;
}
#picContainer {
margin-top: 40px;
width: 150px;
height: 150px;
}
#credits {
position: absolute;
bottom: 0%;
left: 0%;
margin: 0% 0% 0% 20px;
color: var(--navBarBtn_Inner);
font-size: 0.6rem;
}
#signatureContainer {
display: inline-flex;
flex-direction: column;
margin: 5% 0% 0% 0%;
}
#signature {
margin: 0% 0% 0.2rem 0%;
text-align: center;
font-size: 1rem;
}
#signHere {
border-top: #000000 solid 6px;
margin: 0%;
padding: 0% 25px;
text-align: center;
}
#detailsContainer {
display: grid;
grid-template-columns: repeat(2, auto);
}
h2 {
margin: 5px;
}
a {
cursor: pointer;
color: #1010da;
@@ -70,116 +11,4 @@ a {
}
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_Inner);
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;
}
#sillyValue {
height: 100%;
background-color: #FF0000;
}
.sillyGrid {
width: 99%;
aspect-ratio: 10 / 1;
height: auto;
background-image: repeating-linear-gradient(
to right,
#000000 0px,
#000000 3px,
transparent 3px,
transparent 10%
);
border: 3px solid black;
border-radius: 8px;
align-self: center;
}