diff --git a/MossStoneSteel IronWarfare/_ironwarfare.css b/MossStoneSteel IronWarfare/_ironwarfare.css new file mode 100644 index 000000000000..edb0f32956d0 --- /dev/null +++ b/MossStoneSteel IronWarfare/_ironwarfare.css @@ -0,0 +1,457 @@ +/* ========================= */ +/* TEMPLATE: RTS UNIT CARD */ +/* Author: Patrick Leo */ +/* ========================= */ +.ui-dialog .largedialog.characterviewer { + padding: 0; +} +.sheet-darkmode .characterviewer label, .sheet-darkmode .options .row > span { + color: #ffd166; +} +.ui-dialog .charsheet { + padding: 0; +} +.sheet-darkmode .sheetform { + background: #222; +} +.tcg { + --max-width: 1170px; + --col-width: 70px; + --gap-width: 30px; + --cols-total: 12; + display: flex; + flex-direction: row; + gap: var(--gap-width); + align-items: stretch; + justify-content: center; + background: #181818; + border: 2px solid #2a2a2a; + border-radius: 8px; + padding: 16px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); + width: 100%; + box-sizing: border-box; + max-width: var(--max-width); + margin: 0 auto; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} +.tcg * { + box-sizing: border-box; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} +.tcg fieldset { + margin: 0; + padding: 0; + border: none; +} +.tcg textarea { + resize: none; + line-height: inherit; + position: absolute; + inset: 0; + height: 100%; + margin: 0; +} +.tcg label { + font-weight: inherit; + font-size: inherit; + margin: 0; + padding: 0px; +} +.tcg .tcg-repeating-item, .tcg .tcg-item { + position: relative; + line-height: 1.25em; + min-height: 30px; +} +.tcg .tcg-repeating-item span, .tcg .tcg-item span { + display: block; + max-height: calc(4em * 1.25 + 4px * 2); + overflow-y: auto; + min-height: 21px; + width: 100%; +} +.tcg .repcontrol { + margin-top: 12px; +} +.tcg .repcontrol button { + padding: 3px 6px; + border-radius: 3px; + margin: 0; + background: black; + color: white; + border-color: #333; + font-size: 10px; + font-weight: bold; +} +.tcg .repcontainer .repitem .itemcontrol { + z-index: 1; +} +.tcg .repcontainer .repitem { + padding-left: 30px; + position: relative; + border-left: 1px solid #ffd166; +} +.tcg .repcontainer .repitem:last-child { + border-left: 1px solid transparent; +} +.tcg .repcontainer .repitem::after { + content: ""; + position: absolute; + top: -6px; + left: -1px; + width: 28px; + height: 21px; + border-left: 1px solid #ffd166; + border-bottom: 1px solid #ffd166; +} +.tcg .repcontainer .repitem:first-child::after { + height: 51px; +} +/* ----------- */ +/* COLUMNS */ +/* ----------- */ +.tcg .tcg-column { + --qty: 1; + flex: 0 0 auto; + display: flex; + flex-direction: column; + gap: var(--gap-width); + align-items: stretch; + width: calc(((var(--qty) / 12) * 100%) - ((var(--gap-width) * (var(--cols-total) - 1)) / var(--cols-total))); + max-width: calc((var(--col-width) * var(--qty)) + (var(--gap-width) * (var(--qty) - 1))); +} +.tcg .tcg-flex { + display: flex; + flex-wrap: wrap; +} +.tcg .no-wrap { + flex-wrap: nowrap !important; +} +.tcg .column-1 { + --qty: 5; +} +.tcg .column-2 { + --qty: 3; +} +.tcg .column-3 { + --qty: 4; +} +.tcg .column-2 .tcg-content, .tcg .repcontainer { + display: flex; + flex-direction: column; + gap: calc(var(--gap-width) / 5); +} +/* ----------- */ +/* GROUP BLOCK */ +/* ----------- */ +.tcg .tcg-group, .tcg .tcg-section { + background: #1f1f1f; + border: 1px solid #333; + border-radius: 6px; + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-self: stretch; + height: 100%; + max-height: fit-content; +} +.tcg .tcg-header-title { + background: linear-gradient(90deg, #3a3a3a 0%, #1a1a1a 100%); + color: #ffd166; + font-weight: 600; + text-transform: uppercase; + font-size: 12px; + letter-spacing: 0.5px; + padding: 4px 8px; + border-radius: 4px 4px 0 0; + margin: 0; + text-align: left; + box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5); + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + user-select: none; +} +.tcg .tcg-header-title::after { + content: "▼"; + font-size: 10px; + transition: transform 0.3s; +} +.tcg .tcg-toggle { + display: none; +} +.tcg .tcg-toggle:not(:checked) ~ .tcg-content { + max-height: 0; + opacity: 0; + overflow: hidden; + padding: 0; + transition: all 0.25s ease-in-out; +} +.tcg .tcg-toggle:checked ~ .tcg-content { + opacity: 1; + transition: all 0.25s ease-in-out; +} +.tcg .tcg-toggle:not(:checked) + .tcg-header-title::after { + transform: rotate(-90deg); +} +.tcg .tcg-content { + padding: 10px 12px; + transition: all 0.25s ease-in-out; +} +/* ------------- */ +/* LIST STRUCTURE */ +/* ------------- */ +.tcg .tcg-list-items { + display: flex; + flex-direction: column; + gap: calc(var(--gap-width) / 5); +} +.tcg .tcg-list-item { + display: flex; + justify-content: space-between; + align-items: center; + background: #262626; + padding: 0px 6px; + min-height: 30px; + border-radius: 4px; + border: 1px solid #2e2e2e; + transition: background 0.2s; +} +.tcg .tcg-list-item:hover { + background: #2f2f2f; +} +.tcg .tcg-label { + min-width: 100px; + user-select: none; +} +.tcg .tcg-label span { + font-weight: 600; + font-size: 11.5px; + color: #f4f4f4; +} +.tcg .tcg-value { + max-width: 100px; +} +.tcg .tcg-value input { + width: 100%; + text-align: center; + background: #0d0d0d; + color: #cfcfcf; + border: 1px solid #444; + border-radius: 4px; + padding: 2px 4px; + font-size: 12px; + transition: border-color 0.2s; + min-height: 21px; +} +.tcg .tcg-value input:focus { + border-color: #ffd166; + outline: none; +} +/* ------------- */ +/* REPEATING AREA */ +/* ------------- */ +.tcg .tcg-repeating-items { + background: #202020; + border: 1px solid #333; + border-radius: 4px; + flex: 0 0 auto; +} +.tcg .tcg-item textarea, .tcg .tcg-item span, .tcg .tcg-repeating-item textarea, .tcg .tcg-repeating-item span { + width: 100%; + background: #121212; + border: 1px solid #444; + border-radius: 4px; + color: #e0e0e0; + padding: 4px 6px; + font-size: 12px; + white-space: pre-line; +} +.tcg .tcg-repeating-item span { + opacity: 0; + user-select: none; + z-index: 0; +} +.tcg .tcg-repeating-item textarea:focus { + border-color: #ffd166; + outline: none; +} +.tcg-labelvalue span { + display: flex; + justify-content: center; + align-items: center; + background: black; + color: white; + border-radius: 3px; + width: 100%; + min-height: 30px; + white-space: nowrap; + font-size: 0.85em; + font-weight: bold; +} +.tcg .repitem:not(:first-child) .tcg-labelvalue span { + display: none +} +.tcg-labelvalue input { + border-radius: 3px; + border: 1px solid #222; + background: rgba(255, 255, 255, 0.125); + color: white; + text-align: center; + width: 100%; + outline: none; +} +.tcg-labelvalue input:focus, .tcg-labelvalue input:active { + border-color: #ffd166; +} +.tcg-labelvalue { + border: 1px solid transparent; +} +.is-name { + border: 1px solid #333; + border-radius: 3px; + flex-grow: 1; + width: 100%; + min-width: 33%; +} +/* -------- */ +/* LEGEND */ +/* -------- */ +.tcg .tcg-legend { + display: flex; + justify-content: space-between; + font-size: 11px; + color: #aaa; + margin-top: 6px; + border-top: 1px solid #333; + padding-top: 4px; +} +.tcg .tcg-legend input[type="number"]::-webkit-outer-spin-button, .tcg .tcg-legend input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.tcg .tcg-legend input[type="number"] { + -moz-appearance: textfield; +} +.tcg .tcg-legend input { + color: white; + background: transparent; + text-align: center; + border-color: #333; +} +.tcg .tcg-legend input:hover { + border-color: #fff; +} +/* ---------- */ +/* TOKEN AREA */ +/* ---------- */ +.tcg .tcg-token-image { + background: #0f0f0f; + border: 2px solid #333; + border-radius: 8px; + width: 100%; + aspect-ratio: 1.667/1; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + color: #666; + font-weight: 600; + text-transform: uppercase; + flex: 1; + background-position: center; + background-size: contain; + background-repeat: no-repeat; + position: relative; +} +.no-empty:empty + div::after { + content: "NO IMAGE"; + position: absolute; + inset: 0; + display: flex; + align-content: center; + align-items: center; + justify-content: center; + font-size: 4em; + font-weight: 800; + opacity: 0.125; +} +/* ----------- */ +/* DESCRIPTION */ +/* ----------- */ +.tcg .tcg-item textarea { + width: 100%; + height: 100%; + background: #121212; + border: 1px solid #444; + border-radius: 4px; + color: #e0e0e0; + padding: 6px 8px; + font-size: 12px; +} +.tcg .tcg-item textarea:focus { + border-color: #ffd166; + outline: none; +} +/* ----------- */ +/* RESPONSIVE */ +/* ----------- */ +@media (min-width: 901px) { + .tcg { + flex-wrap: nowrap; + } + .tcg .tcg-column { + width: calc(((var(--qty) / 12) * 100%) - ((var(--gap-width) * (var(--cols-total) - 1)) / var(--cols-total))); + max-width: calc((var(--col-width) * var(--qty)) + (var(--gap-width) * (var(--qty) - 1))); + } +} +@media (max-width: 900px) and (min-width: 561px) { + .tcg { + flex-wrap: wrap; + min-width: 560px; + } + .tcg .tcg-column { + width: 100%; + max-width: 100%; + } + .tcg .column-2, .tcg .column-3 { + width: 100%; + max-width: calc(50% - var(--gap-width) / 2); + } + .tcg .column-1 > .tcg-flex { + gap: var(--gap-width); + } + .tcg .is-name { + min-width: 50%; + } +} +@media (max-width: 560px) { + .tcg { + flex-direction: column; + gap: calc(var(--gap-width) / 1.5); + min-width: 560px; + } + .tcg .tcg-column { + width: 100%; + max-width: 100%; + } + .tcg .tcg-header-title { + font-size: 11px; + padding: 3px 6px; + } + .tcg .tcg-label { + min-width: auto; + margin-bottom: 4px; + } + .tcg .tcg-value input { + width: 100%; + } + .tcg .is-name { + min-width: 50%; + } +} diff --git a/MossStoneSteel IronWarfare/_ironwarfare.html b/MossStoneSteel IronWarfare/_ironwarfare.html new file mode 100644 index 000000000000..ad93b5e508b4 --- /dev/null +++ b/MossStoneSteel IronWarfare/_ironwarfare.html @@ -0,0 +1,325 @@ +