User:Kuzupyon2/kuzutester.css

.story-wrapper { --story-spacing: 10px; --story-radius: 10px; --story-black: 0 0 0; --story-white: 255 255 255; --ainana-magic-num1: 7; --ainana-magic-num2: 17; } .story-wrapper .section-collapsible > .mw-collapsible-toggle { /*float: none !important;*/ float: none; display: block; margin-bottom: 20px; text-align: right; }

ul.story-navbar { display: flex; flex-flow: row nowrap; justify-content: space-between; margin: 0 auto 15px; background-color: var(--color-primary-dark); /*#4d0000*/ border: 4px double var(--color-secondary-gold); /*#bf9e5d*/ border-radius: 10px; } .story-navbar li { display: inline-flex; /*justify-content: flex-end;*/ font-variant: small-caps; /*font-weight: bold;*/ letter-spacing: 1px; /*color: var(--color-secondary-gold);*/ padding: 10px 20px; text-shadow: 0 0 1px var(--color-secondary-gold); } .story-container { text-align: center; } .story-imgtitle { margin: 0 auto 20px; padding: 10px; background: var(--color-primary-blue); /*#073250*/ border-radius: 10px; } .story-title { font-size: 2em; font-weight: bold; margin: 0 auto 10px; color: #fff; text-shadow: 0 0 1px #fff, 0 0 2px var(--color-primary-dark); } .story-image img { max-width: 100%; height: auto; } .story-transcript { margin-bottom: 30px; } .line-tpo { background: rgb(0 0 0 / 20%); width: 80%; margin: 0 auto 10px; padding: 15px 10px; border-radius: 10px; font-weight: bold; font-style: italic; text-align: center; text-transform: uppercase; text-shadow: 2px 2px 3px rgb(255 255 255 / 50%); color: rgb(0 0 0 / 90%); } .line-container { display: grid; grid-template-columns: 24% 76%; width: 100%; margin-bottom: 10px; word-break: break-word; /*keep-all*/ } .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; } .line-container .chara-dialogue, .line-container .sfx-sound { text-align: left; border-left-width: 5px; border-left-style: solid; } .inline-img-container { margin: 15px auto; border-radius: 10px; background: var(--color-primary-blue); /*text-align: center;*/ padding: 10px; } .story-choice .mw-collapsible-toggle { padding: 20px; font-family: monospace; font-size: 15px; } .story-choice .mw-collapsible-toggle a { color: black; } .story-choice { border: 1px solid var(--color-secondary-gold); width: 99.8%; margin-bottom: 15px; } .choice-option { padding: 20px; background: var(--color-secondary-gold); background: rgb(191 158 93 / 25%); } .choice-dialogue { padding: 20px; }

.choice-option:has(.line-container), .choice-dialogue:has(.line-container) { padding: 20px 0; } @supports not (selector(:has(*))) { .choice-option .line-container, .choice-dialogue .line-container { margin-left: -12px; } } .story-credits { display: inline-flex; /*gap: 10px;*/ /*align-items: center;*/ padding: 10px; background-color: var(--color-primary-dark); border-radius: 10px; 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: url(//static.miraheze.org/idolish7wiki/thumb/0/03/REUNION_Bullet.png/20px-REUNION_Bullet.png); writing-mode: vertical-lr; } .story-credits ul { margin: auto 10px; } .story-credits li { display: inline-block; }

.story-credits li:not(:last-of-type):after { content: "✩"; font-size: 17px; vertical-align: baseline; margin-inline: 6px 10px; } @media screen and (max-width: 505px) { .references { -moz-column-count: 1; -webkit-column-count: 1; -ms-column-count: 1; column-count: 1; }	/*.story-title {font-size: ??;}*/ .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: 30px; }	div[data-chara-name], .line-container .sfx-name { border-bottom-width: 3px; border-bottom-style: solid; }	.line-container .sfx-name {border-bottom-color: rgb(0 0 0 / 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; } }