diff --git a/toys/license/index.html b/toys/license/index.html index 56c5034..4d33a8b 100644 --- a/toys/license/index.html +++ b/toys/license/index.html @@ -9,6 +9,8 @@ + + Byte Dice - Boykisser license @@ -29,6 +31,7 @@ here!

+

Basic


diff --git a/toys/license/license.css b/toys/license/license.css new file mode 100644 index 0000000..f09fbde --- /dev/null +++ b/toys/license/license.css @@ -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; +} \ No newline at end of file diff --git a/toys/license/options.css b/toys/license/options.css new file mode 100644 index 0000000..faab129 --- /dev/null +++ b/toys/license/options.css @@ -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; +} \ No newline at end of file diff --git a/toys/license/style.css b/toys/license/style.css index fe3c7b9..cef29de 100644 --- a/toys/license/style.css +++ b/toys/license/style.css @@ -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; } \ No newline at end of file