diff options
Diffstat (limited to 'assets/css/charsheet.css')
| -rw-r--r-- | assets/css/charsheet.css | 318 |
1 files changed, 318 insertions, 0 deletions
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%; +} |