MediaWiki:Wikia.css

/* Default, top-aligned image */

.notation-outer { background-color: var(--theme-page-background-color--secondary); border: 1px solid var(--theme-border-color); display: flex; flex-direction: column-reverse; margin: 1em 0; }

.notation-image { flex-grow: 1; border-bottom: 1px solid var(--theme-border-color); }

.notation-image img { width: calc(100% - 2em); height: auto; margin: 1em; }

/* Bottom */

.notation-outer.notation-image-bottom { flex-direction: column; }

.notation-outer.notation-image-bottom .notation-image { border-top: 1px solid var(--theme-border-color); border-bottom: none; }

/* Left */

.notation-outer.notation-image-left { flex-direction: row-reverse; }

.notation-outer.notation-image-left .notation-frame { width: 50%; }

.notation-outer.notation-image-left .notation-image { border-right: 1px solid var(--theme-border-color); border-bottom: none; width: 50%; }

/* Right */

.notation-outer.notation-image-right { flex-direction: row; }

.notation-outer.notation-image-right .notation-frame { width: 50%; }

.notation-outer.notation-image-right .notation-image { border-left: 1px solid var(--theme-border-color); border-bottom: none; width: 50%; }

/* Main notation frame */

.notation-frame { display: flex; flex-direction: column; }

.notation-frame > .notation-box { border-bottom: 1px dashed var(--theme-border-color); display: flex; flex-direction: row; justify-content: space-between; flex-grow: 1; }

.notation-box > pre { border: none; white-space: pre-wrap; word-break: break-all; box-sizing: border-box; flex-grow: 1; }

.notation-frame.notation-shrink > .notation-box > pre { width: fit-content; max-width: 66.7%; flex-shrink: 0; }

.notation-frame .notation-commentary { flex-grow: 1; max-width: 66.67%; box-sizing: border-box; border-left: 1px dashed var(--theme-border-color); padding: 0.75em 1em; }

.notation-frame > .notation-links { padding: 4px 8px; }

@media screen and (max-width: 800px) { .notation-frame > .notation-box { flex-direction: column-reverse; }	.notation-frame .notation-commentary { max-width: 100%; border-left: none; border-bottom: 1px dashed var(--theme-border-color); } }

.notation-outer.notation-image-left .notation-box, .notation-outer.notation-image-right .notation-box { flex-direction: column-reverse; }

.notation-outer.notation-image-left .notation-commentary, .notation-outer.notation-image-right .notation-commentary { max-width: 100%; border-left: none; border-bottom: 1px dashed var(--theme-border-color); }

.notation-outer.notation-image-left .notation-frame.notation-shrink > .notation-box > pre, .notation-outer.notation-image-right .notation-frame.notation-shrink > .notation-box > pre { max-width: 100%; width: 100%; }

.notation-inline { padding: 2px 3px; margin-left: 2px; margin-right: 2px; background-color: var(--theme-article-background-color--secondary); border: 1px solid var(--theme-border-color); border-radius: 2px; word-break: keep-all; }

/* PGN syntax highlight */

.pgn-header, .gray, .pgn-turn, .pgn-slash { color: #666666; }

.pgn-header-value, .pgn-fen-raw { color: #38383f; }

.pgn-turn, .pgn-slash, .pgn-header-name { font-weight: bold; }

.pgn-non-physical { color: #35527e; }

.pgn-piece { color: #54A063; }

.pgn-x { color: #223E42; }

.pgn-y { color: #273849; }

.pgn-jump { color: #A55A34; }

/* Joke box */

.joke { background-color: var(--theme-article-background-color--secondary); border: 1px dashed var(--theme-border-color); display: flex; margin: 1em 0; flex-direction: column; }

.joke-main { font-style: italic; margin: 1em; }

.joke-main > p:first-child { margin-top: 0; }

.joke-main > p:last-child { margin-bottom: 0; }

.joke-author { margin-top: 0em; margin-bottom: 1em; margin-left: 1em; margin-right: 1em; font-style: italic; color: #555555; }

.joke-author::before { content: "—"; display: inline-block; margin-right: 0.5em; color: #555555; }

/* TOC manipulation */ .toc-hide-1 .toclevel-1 { visibility: hidden; display: none; } .toc-hide-2 .toclevel-2 { visibility: hidden; display: none; } .toc-hide-3 .toclevel-3 { visibility: hidden; display: none; } .toc-hide-4 .toclevel-4 { visibility: hidden; display: none; } .toc-hide-5 .toclevel-5 { visibility: hidden; display: none; } .toc-hide-6 .toclevel-6 { visibility: hidden; display: none; }

.toc-float-right > #toc { float: right; margin-left: 1em; margin-top: 1em; margin-bottom: 1em; } .toc-float-left > #toc { float: left; margin-right: 1em; margin-top: 1em; margin-bottom: 1em; } .toc-right { display: flex; justify-content: flex-end; } .toc-left { display: flex; justify-content: flex-start; }

.main-with-toc-right { display: flex; flex-direction: row; justify-content: stretch; } .main-with-toc-right .toc-wrapper { order: 1; flex-grow: 0; margin-left: 1em; }

.main-with-toc-left { display: flex; flex-direction: row; justify-content: stretch; } .main-with-toc-left .toc-wrapper { order: -1; flex-grow: 0; margin-right: 1em; }

.toc-small > #toc { min-width: 8em; }

.toc-medium > #toc { min-width: 12em; }

.toc-large > #toc { min-width: 18em; }