summaryrefslogtreecommitdiff
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/advent.css67
-rw-r--r--assets/css/auth.css46
-rw-r--r--assets/css/button.css34
-rw-r--r--assets/css/charsheet.css318
-rw-r--r--assets/css/gizmo.css35
-rw-r--r--assets/css/greencircle.css124
-rw-r--r--assets/css/jam.css48
-rw-r--r--assets/css/pubnix-index.css94
-rw-r--r--assets/css/register.css77
-rw-r--r--assets/css/shared.css30
-rw-r--r--assets/css/soundboard.css55
-rw-r--r--assets/css/throwshade.css69
12 files changed, 997 insertions, 0 deletions
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;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-07-07 08:27:37 +0000