User:Kuzupyon2/kuzutester.css

.story-container { --story-spacing: 10px; --story-radius: 10px; --story-black: 0 0 0; --story-white: 255 255 255; --color-secondary-gold-rgb: 191 158 93; --ainana-magic-number-1: 7; --ainana-magic-number-2: 17; --font-size-xl: clamp(2rem, 3vw + 1rem, 2.5rem); --font-size-lg: clamp(1.5rem, 2vw + 1rem, 2rem); text-align: center; } .story-imgtitle { margin: 0 auto calc(var(--story-spacing) * 2); padding: calc(var(--story-spacing) * 1); background: var(--color-primary-blue); /*#073250*/ border-radius: var(--story-radius); } .story-title { font-size: var(--font-size-xl); font-weight: bold; margin: 0 auto calc(var(--story-spacing) * 1); color: rgb(var(--story-white) / 1); text-shadow: 0 0 1px rgb(var(--story-white) / 1), 0 0 2px var(--color-primary-dark); } .story-image img { max-width: 100%; height: auto; } [class^="polyptych"] { display:grid; gap:0; justify-items: center; } .polyptych-2 {grid-template-columns:1fr 1fr;} .polyptych-3 {grid-template-columns:1fr 1fr 1fr;} .polyptych-4 {grid-template-columns:1fr 1fr 1fr 1fr;} .story-transcript { margin-bottom: calc(var(--story-spacing) * 3); } .line-tpo, .story-subsection-title { margin: 0 auto calc(var(--story-spacing) * 2); padding: calc(var(--story-spacing) * 1); border-radius: var(--story-radius); font-weight: bold; text-align: center; } .line-tpo { width: 80%; background: rgb(var(--story-black) / 10%); border: 1px solid rgb(var(--story-black) / 25%); } .story-subsection-title { width: 90%; background: var(--color-primary-blue); color: rgb(var(--story-white) / 1); font-size: var(--font-size-lg); } .line-container { display: grid; grid-template-columns: 24% 76%; width: 100%; margin-bottom: calc(var(--story-spacing) * 1); word-break: break-word; /*keep-all*/ } /*.story-transcript .lc-blank-speaker + .line-container {}*/ .story-transcript .line-container + p, .story-transcript .line-container + p + p, .story-transcript .section-break + p, .inline-img-container + p, .story-choice + p, .choice-dialogue p, .chara-name > dl { margin: 0; display: none; } .line-container .chara-name, .line-container .chara-dialogue, .line-container .sfx-name, .line-container .sfx-sound { padding: 17px; } .line-container .chara-name, .line-container .sfx-name { text-align: right; font-weight: bold; } .chara-name b:not(:empty)::after { content: ": "; } .line-container .chara-dialogue, .line-container .sfx-sound { text-align: left; border-left-width: 5px; border-left-style: solid; } .inline-img-container { margin: calc(var(--story-spacing) * 1.5) auto; border-radius: calc(var(--story-spacing) * 1); background: var(--color-primary-blue); padding: calc(var(--story-spacing) * 1); } .story-choice .mw-collapsible-toggle { padding: calc(var(--story-spacing) * 2); font-family: monospace; font-size: 15px; /*to rems?*/ } .story-choice .mw-collapsible-toggle a { color: rgb(var(--story-black) / 1); } .story-choice { border: 1px solid var(--color-secondary-gold); width: 99.8%; margin-bottom: calc(var(--story-spacing) * 1.5); } .choice-option { padding: calc(var(--story-spacing) * 2); /*background: var(--color-secondary-gold);*/ background: rgb(var(--color-secondary-gold-rgb) / 25%); /*background: var(--color-secondary-gold);*/ } .choice-dialogue { padding: calc(var(--story-spacing) * 2); } .choice-option:has(.line-container), .choice-dialogue:has(.line-container) { padding: calc(var(--story-spacing) * 2) 0; } @supports not (selector(:has(*))) { .choice-option .line-container, .choice-dialogue .line-container { margin-left: -12px; } } .story-container .story-navbar { display: flex; flex-flow: row nowrap; justify-content: space-between; margin: 0 auto calc(var(--story-spacing) * 1.5); background-color: var(--color-primary-dark); /*#4d0000*/ border: 4px double var(--color-secondary-gold); /*#bf9e5d*/ border-radius: var(--story-radius); } .story-navbar li { display: inline-flex; font-variant: small-caps; letter-spacing: 1px; padding: calc(var(--story-spacing) * 1) calc(var(--story-spacing) * 2); text-shadow: 0 0 1px var(--color-secondary-gold); } .story-credits { display: inline-flex; gap: var(--story-spacing); padding: calc(var(--story-spacing) * 1.5) calc(var(--story-spacing) * 1); background-color: var(--color-primary-dark); border-radius: var(--story-radius); border: 4px double var(--color-secondary-gold); color: var(--color-secondary-gold); text-shadow: 0 0 1px var(--color-secondary-gold); } .story-credits::before, .story-credits::after { content: ' ✦ '; color: var(--color-secondary-gold); font-size: 20px; /*to rems?*/ text-shadow: -1px -1px 1px #6d0000, 2px 2px 1px #2e0000; writing-mode: vertical-lr; } .story-credits ul { margin: 0; align-self: center; } .story-credits li { display: inline-block; } .story-credits li:not(:last-of-type):after { content: "✩"; vertical-align: baseline; margin-inline: calc(var(--story-spacing) * 1) calc(var(--story-spacing) / 2); } @media screen and (max-width: 505px) { .polyptych-4 {grid-template: 1fr 1fr / 1fr 1fr !important;} .references { -moz-column-count: 1; -webkit-column-count: 1; -ms-column-count: 1; column-count: 1; }	.line-container { grid-template-columns: 1fr; margin-bottom: 0; padding: 7px 17px; width: auto; }	.line-container .chara-name, .line-container .chara-dialogue, .line-container .sfx-name, .line-container .sfx-sound { padding: 7px; text-align: left; }	.line-container .chara-dialogue, .line-container .sfx-sound { border-left: none; padding-left: calc(var(--story-spacing) * 3); }	div[data-chara-name], .line-container .sfx-name { border-bottom-width: 3px; border-bottom-style: solid; }	.line-container .sfx-name {border-bottom-color: rgb(var(--story-black) / 17%);} div[data-chara-name] {border-bottom-color: #000;} div[data-chara-name=""] {border-bottom-color: transparent;} div[data-chara-name="IDOLiSH7"] {border-bottom-color: var(--color-idolish7);} div[data-chara-name="Iori"] {border-bottom-color: var(--color-iori);} div[data-chara-name="Yamato"] {border-bottom-color: var(--color-yamato);} div[data-chara-name="Mitsuki"] {border-bottom-color: var(--color-mitsuki);} div[data-chara-name="Tamaki"] {border-bottom-color: var(--color-tamaki);} div[data-chara-name="Sogo"] {border-bottom-color: var(--color-sogo);} div[data-chara-name="Nagi"] {border-bottom-color: var(--color-nagi);} div[data-chara-name="Riku"] {border-bottom-color: var(--color-riku);} div[data-chara-name="TRIGGER"] {border-bottom-color: var(--color-trigger);} div[data-chara-name="Gaku"] {border-bottom-color: var(--color-gaku);} div[data-chara-name="Tenn"] {border-bottom-color: var(--color-tenn);} div[data-chara-name="Ryunosuke"] {border-bottom-color: var(--color-ryunosuke);} div[data-chara-name="Re:vale"] {border-bottom-color: var(--color-revale);} div[data-chara-name="Momo"] {border-bottom-color: var(--color-momo);} div[data-chara-name="Yuki"] {border-bottom-color: var(--color-yuki);} div[data-chara-name="ZOOL"] {border-bottom-color: var(--color-zool);} div[data-chara-name="ŹOOĻ"] {border-bottom-color: var(--color-zool);} div[data-chara-name="Haruka"] {border-bottom-color: var(--color-haruka);} div[data-chara-name="Toma"] {border-bottom-color: var(--color-toma);} div[data-chara-name="Minami"] {border-bottom-color: var(--color-minami);} div[data-chara-name="Torao"] {border-bottom-color: var(--color-torao);} div[data-chara-name="Tsumugi"] {border-bottom-color: var(--color-tsumugi);} div[data-chara-name="Banri"] {border-bottom-color: var(--color-banri);} div[data-chara-name]:empty { border-bottom: none; padding: 0; }	.chara-name:has(dd:empty) { padding: 0; border: 0; } }