From 188643eccb13452f0e77ccea2a6e1baf6d5320b3 Mon Sep 17 00:00:00 2001 From: LLLL Colonq Date: Tue, 26 May 2026 03:55:41 -0400 Subject: Big refactor, jam --- assets/css/advent.css | 67 ++++++++++ assets/css/auth.css | 46 +++++++ assets/css/button.css | 34 +++++ assets/css/charsheet.css | 318 ++++++++++++++++++++++++++++++++++++++++++++ assets/css/gizmo.css | 35 +++++ assets/css/greencircle.css | 124 +++++++++++++++++ assets/css/jam.css | 48 +++++++ assets/css/pubnix-index.css | 94 +++++++++++++ assets/css/register.css | 77 +++++++++++ assets/css/shared.css | 30 +++++ assets/css/soundboard.css | 55 ++++++++ assets/css/throwshade.css | 69 ++++++++++ 12 files changed, 997 insertions(+) create mode 100644 assets/css/advent.css create mode 100644 assets/css/auth.css create mode 100644 assets/css/button.css create mode 100644 assets/css/charsheet.css create mode 100644 assets/css/gizmo.css create mode 100644 assets/css/greencircle.css create mode 100644 assets/css/jam.css create mode 100644 assets/css/pubnix-index.css create mode 100644 assets/css/register.css create mode 100644 assets/css/shared.css create mode 100644 assets/css/soundboard.css create mode 100644 assets/css/throwshade.css (limited to 'assets/css') diff --git a/assets/css/advent.css b/assets/css/advent.css new file mode 100644 index 0000000..c6097b8 --- /dev/null +++ b/assets/css/advent.css @@ -0,0 +1,67 @@ +/* advent */ +#lcolonq-advent { + overflow-y: scroll; + color: white; + background-color: black; + min-height: 100vh; + height: auto; + display: flex; + flex-direction: column; + align-items: center; +} +#lcolonq-advent-container { + height: 100%; + margin-left: 3rem; + margin-right: 3rem; +} +.lcolonq-advent-header { + text-align: center; + padding-bottom: 1rem; +} +.lcolonq-advent-header h1 { + margin-top: 0rem; + margin-bottom: 0rem; + font-size: 15vw; +} +.lcolonq-advent-subtitle { + font-weight: bold; +} +.lcolonq-advent-body { + margin-left: auto; + margin-right: auto; + max-width: 40rem; + text-align: justify; +} +.lcolonq-advent-link { + text +} +.lcolonq-advent-puzzle { + display: block; + text-decoration: none; + color: white; + border: solid; + border-color: white; + margin-top: 1rem; + padding: 0.5rem; +} +.lcolonq-advent-puzzle:hover { + background-color: #111111; +} +.lcolonq-advent-puzzle h3 { + margin: 0px; +} +.lcolonq-advent-puzzle-author { + font-weight: bold; +} +.lcolonq-advent-puzzle-body { + margin-left: 1rem; + margin-right: 1rem; +} +.lcolonq-advent-link { + text-decoration: none; + color: white; + font-weight: bold; +} +.lcolonq-advent-submit { + display: none; +} diff --git a/assets/css/auth.css b/assets/css/auth.css new file mode 100644 index 0000000..20ab50d --- /dev/null +++ b/assets/css/auth.css @@ -0,0 +1,46 @@ +/* auth */ +.lcolonq-auth { + position: absolute; + top: 0px; + left: 0px; + display: grid; + width: 100%; + height: 100%; + grid-template-rows: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr 1fr; +} + +.lcolonq-auth-box-outer { + grid-row: 2; + grid-column: 2; +} + +.lcolonq-auth-box { + display: flex; + justify-content: center; + gap: 1rem; +} + +.lcolonq-auth-box h1 { + margin-top: 0rem; +} + +#lcolonq-auth-submit { + display: none; +} + +#lcolonq-auth-below { + text-align: center; +} + +#lcolonq-auth-register { + font-size: 0.7rem; + color: CanvasText; +} + +#lcolonq-auth-error { + grid-row: 3; + grid-column: 2; + text-align: center; + color: red; +} diff --git a/assets/css/button.css b/assets/css/button.css new file mode 100644 index 0000000..2a918fd --- /dev/null +++ b/assets/css/button.css @@ -0,0 +1,34 @@ +/* button */ +body.lcolonq-button-body { + background-color: #eeeeee; + user-select: none; +} + +.lcolonq-button { + position: absolute; + height: 90vh; + width: 40vw; + object-fit: fill; + image-rendering: pixelated; + border: dotted #888888; + margin-top: 5vh; + margin-bottom: 5vh; + margin-left: 5vw; + margin-right: 5vw; +} + +a.lcolonq-button-link :hover { + background-color: #cccccc; +} + +a.lcolonq-button-link :active { + background-color: #aaaaaa; +} + +#lcolonq-button-green { + left: 0px; +} + +#lcolonq-button-red { + right: 0px; +} diff --git a/assets/css/charsheet.css b/assets/css/charsheet.css new file mode 100644 index 0000000..e973732 --- /dev/null +++ b/assets/css/charsheet.css @@ -0,0 +1,318 @@ +@font-face { + font-family: "Iosevka Comfy"; + src: url("../fonts/iosevka-comfy-regular.ttf") format("truetype"); +} + +@media (max-width: 768px) { + #contents { + left: 0px !important; + top: 0px !important; + padding: 0px !important; + margin: 0.5rem !important; + width: calc(100vw - 1rem) !important; + height: calc(100vh - 1rem) !important; + grid-template-columns: 1fr !important; + grid-auto-rows: 60vh !important; + } + #name { + grid-column: 1 !important; + } + #visualization { + grid-column: 1 !important; + } + #infobox1 { + grid-column: 1 !important; + min-width: 80vw !important; + } + #infobox2 { + grid-column: 1 !important; + min-width: 80vw !important; + } +} + +html { + font-family: "Iosevka Comfy"; + font-size: 16pt; +} + +body { + overflow: hidden; + margin: 0 !important; + padding: 0 !important; + height: 100%; + width: 100%; + background-color: white; + background-image: radial-gradient(lightgrey 1px, transparent 0); + background-size: 1rem 1rem; +} + +button { + background-color: black; + color: white; + border: none; + cursor: pointer; + padding: 0.25rem; +} +button:active { + background-color: darkgrey; +} + +.invisible { + visibility: hidden !important; +} + +.opaque { + opacity: 1.0 !important; +} + +#error { + border: 1px solid lightgrey; + background-color: white; + position: fixed; + left: 20vw; + top: 20vh; + width: 60vw; + height: 60vh; + padding: 0.5rem; + align-content: center; +} +#error > div { + opacity: 0.0; + transition: opacity 2s; +} +#error-message { + color: darkgrey; + font-size: 4rem; + font-variant: small-caps; + margin-top: -3rem; + margin-left: auto; + margin-right: auto; + width: fit-content; +} +.error-anim-unfold { + animation-duration: 0.5s; + animation-name: error-unfold; +} +@keyframes error-unfold { + from { + left: 50vw; + width: 0vw; + } + to { + left: 20vw; + width: 60vw; + } +} + +#contents { + border: 1px solid lightgrey; + background-color: white; + position: fixed; + left: 10vw; + top: 10vh; + width: 80vw; + height: 80vh; + padding: 0.5rem; + display: grid; + grid-auto-columns: 0; + grid-auto-flow: row; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 0.5rem; + overflow: auto; +} +.contents-anim-unfold { + animation-duration: 0.5s; + animation-name: contents-unfold; +} +@keyframes contents-unfold { + from { + left: 50vw; + width: 0vw; + } + to { + left: 10vw; + width: 80vw; + } +} +#contents > div { + opacity: 0.0; + transition: opacity 2s; +} +#name { + position: relative; + min-height: 10rem; + grid-column-end: span 2; +} +#name > h1 { + text-transform: uppercase; + position: absolute; + transform: translateZ(0); + backface-visibility: hidden; + transform-origin: 0px 0px; + margin: 0px; + font-size: 100rem; +} +#login { + z-index: 5; + color: black; + text-decoration: none; + position: absolute; + bottom: 0.5rem; + right: 0.5rem; +} +#visualization { + position: relative; + grid-column-end: span 2; + grid-row-end: span 2; +} +#visualization-overlay { + position: absolute; + z-index: 5; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + display: grid; + grid-template-rows: 0.5fr 0.5fr 2fr 1fr; + grid-template-columns: 2.5fr 0.3fr 0.7fr 1fr; +} +#visualization-grabber { + grid-column: 2 / span 2; + grid-row: 3; + border: 1px solid black; + border-left: 0px; +} +#visualization-line { + grid-column: 2 / span 2; + grid-row: 2; + border-right: 1px solid black; +} +#visualization-label { + grid-column: 3 / span 2; + grid-row: 1; + align-content: center; + font-variant: small-caps; +} +#visualization > canvas { + width: 100%; + height: 100%; +} + +#badges { + position: absolute; + z-index: 5; + margin: 0.5rem; + user-select: none; +} +.badge { + font-size: 0.85rem; + line-height: 1; +} +.badge > img { + width: 1rem; + height: 1rem; + vertical-align: text-top; +} + +.infobox { + padding-left: 1rem; +} +.infobox-title { + font-variant: small-caps; + margin-bottom: 0.5rem; +} + +table { + width: 100%; + margin-bottom: 0.5rem; +} +table tr td:first-child { + font-weight: bold; +} + +#edit-mode { + position: absolute; + z-index: 5; +} +#talent-reset { + position: absolute; + bottom: 0px; + right: 0px; + z-index: 5; +} + +#edit-scrollable { + overflow: scroll; + width: 100vw; + height: 100vh; +} +#edit-talentarea { + position: relative; + left: 0px; + top: 0px; + width: 300vw; + height: 300vh; + background-color: white; + background-image: radial-gradient(lightgrey 1px, transparent 0); + background-size: 0.25rem 0.25rem; +} +.edit-talent { + position: absolute; + width: 64px; + height: 64px; + background-color: black; + border-radius: 2px; + margin-top: 8px; + margin-left: 8px; +} +.edit-talent:hover { + border: 4px solid lightgrey; + margin-top: 4px; + margin-left: 4px; +} +.edit-talent.edit-talent-selected { + border: 8px solid grey; + margin-top: 0px; + margin-left: 0px; +} +.edit-talent > img { + width: 64px; + height: 64px; + image-rendering: pixelated; +} +#edit-contents { + position: fixed; + left: 10vw; + top: 10vh; + width: 80vw; + height: 80vh; + display: grid; + grid-auto-columns: 0; + grid-auto-flow: row; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 2rem; + overflow: hidden; + pointer-events: none; +} +#edit-contents > div { + border: 1px solid lightgrey; + background-color: white; + opacity: 0.0; + transition: opacity 2s; + pointer-events: auto; +} +#edit-infobox { + grid-column: 1; + grid-row: 2; +} +#edit-selected-tooltip-box { + grid-column: 2; + grid-row: 2; + transition: opacity 0.5s !important; + overflow: auto; +} +#edit-selected-tooltip-buy { + width: 100%; +} diff --git a/assets/css/gizmo.css b/assets/css/gizmo.css new file mode 100644 index 0000000..91c6188 --- /dev/null +++ b/assets/css/gizmo.css @@ -0,0 +1,35 @@ +/* gizmo */ +#lcolonq-gizmo-body { + width: 100vw; + height: 100vh; +} +#lcolonq-gizmo { + width: 100%; + height: 100%; +} +#lcolonq-gizmo-top { + position: absolute; + opacity: 0; + transition: opacity 0.2s ease-in-out; + right: 0px; + top: 0px; + color: white; + background-color: black; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 1rem; +} +#lcolonq-gizmo-top:hover { + opacity: 1; +} +#lcolonq-gizmo-bottom { + background-color: white; + width: 100%; + height: 100%; +} +#lcolonq-gizmo-contents { + border: none; + width: 100%; + height: 100%; +} diff --git a/assets/css/greencircle.css b/assets/css/greencircle.css new file mode 100644 index 0000000..d884cb9 --- /dev/null +++ b/assets/css/greencircle.css @@ -0,0 +1,124 @@ +/* greencircle */ +#lcolonq-gc-body { + overflow-y: scroll; + height: auto; +} + +#lcolonq-gc-hero { + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; +} + +#lcolonq-gc-spin { + height: 60vh; + width: 60vh; + margin-top: 20vh; + margin-bottom: 20vh; + display: grid; + place-items: center; +} + +#lcolonq-gc-logo { + grid-area: 1 / 1; + margin-top: 2vh; + margin-left: 8vh; + height: 100%; + image-rendering: pixelated; +} + +#lcolonq-gc-spin-image { + grid-area: 1 / 1; + animation: spin 40s linear infinite; + margin-left: 2vh; + height: 250%; + width: 250%; + user-select: none; + pointer-events: none; +} + +@keyframes spin { + 100% { + transform: rotate(360deg); + } +} + +@media (max-width : 320px) { + #lcolonq-gc-logo { + max-width: 60vw; + max-height: 60vw; + } + #lcolonq-gc-spin-image { + height: 160%; + width: 160%; + } +} + +#lcolonq-gc-explainer { + text-align: justify; + padding-left: 1rem; + padding-right: 1rem; + height: 100vh; + mask-image: linear-gradient(180deg, white 50%, transparent 95%); + overflow: hidden; +} + +#lcolonq-gc-explainer h1 { + text-align: center; + font-size: 1.9rem; +} + +#lcolonq-gc-relentless { + text-align: justify; + padding-left: 1rem; + padding-right: 1rem; + text-align: center; +} + +#lcolonq-gc-relentless h1 { + font-size: 1.9rem; +} + +#lcolonq-gc-panels { + margin-left: 1rem; + margin-right: 1rem; + margin-bottom: 1rem; + display: grid; + justify-content: center; + grid-template-columns: repeat(auto-fit, 15rem); + grid-auto-rows: minmax(10rem, auto); + gap: 1rem; +} + +@media (max-width : 320px) { + #lcolonq-gc-panels { + grid-template-columns: 1fr; + } +} + +.lcolonq-gc-panel { + border: solid black; + color: inherit; + text-decoration: none; + padding: 1rem; + display: none; + cursor: pointer; +} + +.lcolonq-gc-panel:hover { + background-color: #eeeeee; +} + +.lcolonq-gc-visible { + display: block; +} + +.lcolonq-gc-panel h2 { + text-align: center; +} + +.lcolonq-gc-now { + font-weight: bold; + color: red; +} diff --git a/assets/css/jam.css b/assets/css/jam.css new file mode 100644 index 0000000..0cc2e0a --- /dev/null +++ b/assets/css/jam.css @@ -0,0 +1,48 @@ +#lcolonq-jam { + overflow: scroll; + text-align: justify; +} + +.lcolonq-jam-cool { + text-transform: lowercase; +} + +a { + text-decoration: none; + font-weight: bold; + color: black; +} + +#lcolonq-jam h1 { + text-align: center; +} +#lcolonq-jam h2 { + text-align: center; +} +#lcolonq-jam h4 { + margin: 0px; +} +#lcolonq-jam-content { + max-width: 34rem; + margin-left: auto; + margin-right: auto; + padding-left: 1rem; + padding-right: 1rem; +} + +.lcolonq-green { + color: green; +} + +.lcolonq-jam-subtitle { + margin-top: -1.4rem; + text-align: center; + font-size: 0.8em; + color: darkgrey; +} + +#lcolonq-jam-footer { + text-align: center !important; + font-size: 0.5em; + color: darkgrey; +} diff --git a/assets/css/pubnix-index.css b/assets/css/pubnix-index.css new file mode 100644 index 0000000..987f2cc --- /dev/null +++ b/assets/css/pubnix-index.css @@ -0,0 +1,94 @@ +/* pubnix-index */ +body.lcolonq-pubnix-index { + font-family: "Iosevka Comfy"; + font-weight: bold; + color: black; + user-select: none; + image-rendering: pixelated; + background-color: #eeeeee; + background-size: 40px 40px; + background-image: + linear-gradient(to right, grey 1px, transparent 1px), + linear-gradient(to bottom, grey 1px, transparent 1px); +} + +body.lcolonq-pubnix-index-obs { + background-color: rbga(0,0,0,0); +} + +#lcolonq-pubnix-index-title { + position: absolute; + top: 2rem; + bottom: 0px; + left: 0px; + right: 0px; + text-align: center; + font-size: 20vw; +} + +.lcolonq-pubnix-index-letter { + display: inline-block; +} + +.lcolonq-pubnix-index-letter:hover { + color: #333333; +} + +#lcolonq-pubnix-index-subtitle { + font-size: 5vw; + margin-top: -5vw; + margin-right: 12vw; + text-align: right; +} + +#lcolonq-pubnix-index-header { + background-color: #cccccf; + position: absolute; + left: 0px; + right: 0px; + top: 0px; + height: 2rem; + border-bottom: 0.2rem ridge; +} + +#lcolonq-pubnix-index-header a { + color: black; +} + +#lcolonq-pubnix-index-header marquee { + color: black; + padding-top: 0.4rem; +} + +#lcolonq-pubnix-index-footer { + background-color: #cccccf; + position: absolute; + left: 0px; + right: 0px; + bottom: 0px; + height: 2rem; + border-top: 0.2rem groove; +} + +#lcolonq-pubnix-index-footer a { + display: inline-block; + color: black; + margin-top: 0.2rem; + margin-left: 0.1rem; + margin-right: 0.1rem; + padding: 0.1rem; + text-decoration: none; + border: 0.1rem outset; +} + +#lcolonq-pubnix-index-footer a:active { + border: 0.1rem inset; +} + +#lcolonq-pubnix-index-canvas { + position: absolute; + bottom: 2rem; + left: 0px; + width: 832px; + height: 832px; +} diff --git a/assets/css/register.css b/assets/css/register.css new file mode 100644 index 0000000..c384e6a --- /dev/null +++ b/assets/css/register.css @@ -0,0 +1,77 @@ +/* register */ +#lcolonq-register-container { + position: absolute; + top: 0px; + left: 0px; + display: grid; + width: 100%; + height: 100%; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr 1fr; +} + +#lcolonq-register-box { + grid-row: 2; + grid-column: 2; + display: flex; + flex-direction: column; + align-items: center; +} + +#lcolonq-register-link { + width: max-content; + text-align: center; + display: block; + background-color: #6441a5; + border-radius: 0.5rem; + color: white; + background-color: #6441a5; + border-radius: 0.5rem; + padding: 10px; + cursor: pointer; + user-select: none; +} + +#lcolonq-register-link:hover { + background-color: #533094; +} + +#lcolonq-registered-container { + position: absolute; + top: 0px; + left: 0px; + display: grid; + width: 100%; + height: 100%; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr 1fr; +} + +#lcolonq-registered-box { + grid-row: 2; + grid-column: 2; + display: flex; + justify-content: center; +} + +.lcolonq-registered-fieldname { + font-weight: bold; +} + +#lcolonq-register-error-container { + position: absolute; + top: 0px; + left: 0px; + display: grid; + width: 100%; + height: 100%; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr 1fr; +} + +#lcolonq-register-error-box { + grid-row: 2; + grid-column: 2; + display: flex; + justify-content: center; +} diff --git a/assets/css/shared.css b/assets/css/shared.css new file mode 100644 index 0000000..aed4cc7 --- /dev/null +++ b/assets/css/shared.css @@ -0,0 +1,30 @@ +/* shared */ +@font-face { + font-family: "Iosevka Comfy"; + src: url("../fonts/iosevka-comfy-regular.ttf") format("truetype"); +} + +html { + font-family: "Iosevka Comfy"; + font-size: 16pt; +} + +body { + overflow: hidden; + margin: 0 !important; + padding: 0 !important; + height: 100%; + width: 100%; +} + +.right { + float: right; +} + +.lcolonq-invisible { + visibility: hidden; +} + +.lcolonq-reverse { + transform: scale(-1, 1); +} diff --git a/assets/css/soundboard.css b/assets/css/soundboard.css new file mode 100644 index 0000000..9e5b966 --- /dev/null +++ b/assets/css/soundboard.css @@ -0,0 +1,55 @@ +/* soundboard */ +#lcolonq-soundboard { + color: white; + background-color: black; + overflow-y: scroll; + height: auto; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; +} +#lcolonq-soundboard-container { + top: 0px; + width: min(90vw, 30rem); + height: 100%; +} +#lcolonq-soundboard-entryframe { + overflow: hidden; + margin-top: 3rem; + margin-bottom: 3rem; + margin-left: 2rem; + margin-right: 2rem; +} +#lcolonq-soundboard-entry { + font-size: 30pt; + width: calc(100% - 2.2rem); + padding: 1rem; + color: white; + background-color: #111111; + border: 0.1rem solid darkgrey; +} +#lcolonq-soundboard-entry:focus { + outline: none; +} +#lcolonq-soundboard-entrytext { + white-space: nowrap; + color: darkgrey; +} +#lcolonq-soundboard-docs { + display: grid; + gap: 1rem; + grid-auto-flow: dense; + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + grid-auto-rows: minmax(10rem, auto); + margin-bottom: 1rem; +} +.lcolonq-soundboard-doc { + border: 0.1rem solid darkgrey; + padding: 0.5rem; +} +.lcolonq-soundboard-doc h3 { + text-align: center; + margin-top: 0px; + margin-bottom: 0.5rem; +} diff --git a/assets/css/throwshade.css b/assets/css/throwshade.css new file mode 100644 index 0000000..d49b3b4 --- /dev/null +++ b/assets/css/throwshade.css @@ -0,0 +1,69 @@ +/* throwshade */ +#lcolonq-throwshade-body { + overflow-y: scroll; +} +#lcolonq-throwshade { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-evenly; + /* background-image: url("./assets/rectangular.jpg"); */ + background-color: darkgray; + background-size: 100% 100%; +} +.lcolonq-throwshade-canvas { + width: 100%; + height: 60%; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} +.lcolonq-throwshade-canvas canvas { + margin: auto; + display: block; + width: auto; + height: 100%; + image-rendering: pixelated; +} +#lcolonq-throwshade-bottom { + flex-grow: 1; + height: 40%; + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding-top: 0.6rem; +} +#lcolonq-throwshade-bottom-left { + flex-grow: 1; + padding-bottom: 1rem; + padding-left: 0.7rem; + padding-right: 1rem; +} +#lcolonq-throwshade-textarea { + width: 100%; + height: 100%; + resize: none; + border: none; + overflow: auto; + outline: none; + box-shadow: none; + color: white; + background-color: rgb(0 0 0 / 0.8); +} +#lcolonq-throwshade-bottom-right { + flex-grow: 1; + padding-bottom: 1rem; + padding-left: 0.7rem; + padding-right: 1rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + max-width: 40%; +} +#lcolonq-throwshade-bottom-right img { + cursor: pointer; + height: 40%; +} +#lcolonq-throwshade-current { + margin: 0.5rem; +} -- cgit v1.2.3