MediaWiki:Fandomdesktop.css

/******************************* /* Responsive flex page layout * /*******************************/ .rfpelements { display: flex; flex-flow: row wrap; margin: -5px; }

.rfpshelf, .rfpstack { display: flex; flex-flow: column nowrap; margin: 0; padding: 0; flex: 0 0 100%; max-width: 100%; box-sizing: border-box; }

.rfpblock { margin: 5px; padding: 3px 6px; flex: 0 0 calc( 100% - 10px ); max-width: calc( 100% - 10px ); text-align: center; box-sizing: border-box; }

.rfpblock img { max-width: 100%; height: auto; }

.rfpstack .rfpstack, .rfpstack .rfpshelf, .rfpshelf .rfpshelf, .rfpshelf .rfpstack { flex: 1 0 auto; max-width: 100%; }

.rfpstack .rfpblock, .rfpshelf .rfpblock { flex: 1 0 auto; max-width: calc( 100% - 10px ); }

.rfpstack .rfpnoresize { flex: 0 0 auto; }

@media (min-width: 820px) { .rfp100-50-67size, .rfp100-50-50size, .rfp100-50-33size { flex: 0 0 50%; max-width: 50%; }

.rfpblock.rfp100-50-67size, .rfpblock.rfp100-50-50size, .rfpblock.rfp100-50-33size { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); } }

@media (min-width: 1440px) { .rfp100-100-67size, .rfp100-50-67size { flex: 0 0 66.666667%; max-width: 66.666667%; }

.rfpblock.rfp100-100-67size, .rfpblock.rfp100-50-67size { flex: 0 0 calc( 66.666667% - 10px ); max-width: calc( 66.666667% - 10px ); }

.rfp100-100-50size, .rfp100-50-50size { flex: 0 0 50%; max-width: 50%; }

.rfpblock.rfp100-100-50size, .rfpblock.rfp100-50-50size { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); }

.rfp100-100-33size, .rfp100-50-33size { flex: 0 0 33.333333%; max-width: 33.333333%; }

.rfpblock.rfp100-100-33size, .rfpblock.rfp100-50-33size { flex: 0 0 calc( 33.333333% - 10px ); max-width: calc( 33.333333% - 10px ); }

.rfpshelf { flex-flow: row wrap; }

.rfpshelf > .rfpstack { flex: 0 0 50%; max-width: 50%; }

.rfpshelf > .rfpblock { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); }

.rfpshelf > .rfpstack.rfpkeepwide { flex: 0 0 100%; max-width: 100%; }

.rfpshelf > .rfpblock.rfpkeepwide { flex: 0 0 calc( 100% - 10px ); max-width: calc( 100% - 10px ); } }

.desktopleft { text-align: left; }

.desktopcenter { text-align: center; }

.desktopright { text-align: right; }

.welcomelogo { display: inline-block; border-radius: 10px; border: 3px solid #ef761f; overflow: hidden; }

/**************************** /* Responsive flex specials * /****************************/ .rfpaboutinfo { border-top: 1px solid #ef761f; columns: auto 18rem; padding: 10px 0; }

.rfpaboutitem { padding-left: 6rem; text-align: left; }

.rfpaboutlabel { display: inline-block; text-align: right; width: 5.5rem; margin: 0 0 0 -6rem; padding: 0 0.5rem 0 0; }

.rfpplatforms { text-align: center; padding: 10px 0 0 0; }

.rfpplatformsheading { background: #ef761f; font-weight: bold; color: #e0e0e0; margin: 0 0 10px 0; padding: 0 0 3px 0; }

.rfpplatformdates { display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: center; text-align: center; }

.rfpplatformdate { flex: 1 0 12rem; text-align: center; padding: 0 0 10px 0; }

.rfpplatformdate img { padding: 0 5px; }

.rfpplatformdarkinvert { filter: invert(100%); }

.rfptwitter { display: flex; flex-flow: column nowrap; }

.rfptwitter .body, .rfptwitter .body .twitter-timeline-wrapper { border: none; display: flex; flex-flow: column nowrap; flex: 0 0 410px; }

.rfptwitter .body .twitter-timeline-wrapper iframe { border: none; width: auto !important; height: auto !important; flex: 0 0 400px; }

@media (min-width: 820px) { .rfptwitter .body, .rfptwitter .body .twitter-timeline-wrapper, .rfptwitter .body .twitter-timeline-wrapper iframe { flex: 1 0 auto; } }

.rfpblock div.slideboxlightshow, .rfpblock div.slideboxlightshow a { max-width: 100%; height: auto; }

/****************************** /* Responsive flex appearance * /******************************/ .rfpbox, .rfpdesktopbox { border-radius: 10px; border: 3px solid #ef761f; background: transparent; color: var(--theme-page-text-color); margin: 5px; padding: 3px 6px; }

.rfpbox.orange, .rfpdesktopbox.orange { border-color: #ef761f; }

.rfpbox.purple, .rfpdesktopbox.purple { border-color: #6503b5; }

.rfpbox.green, .rfpdesktopbox.green { border-color: #08a161; }

.rfpbox.red, .rfpdesktopbox.red { border-color: #f00000; }

.rfpbox.blue, .rfpdesktopbox.blue { border-color: #1492ff; }

.rfpblock .heading { background: #ef761f; color: #e0e0e0; font-weight: bold; font-size: 132%; margin: -3px -6px 10px -6px; padding: 3px 6px 5px 6px; }

.rfpblock.orange .heading { background: #ef761f; }

.rfpblock.purple .heading { background: #6503b5; }

.rfpblock.green .heading { background: #08a161; }

.rfpblock.red .heading { background: #f00000; }

.rfpblock.blue .heading { background: #1492ff; }

/****************************************** /* Responsive flex documentation examples * /******************************************/ .rfpdoclabel { border-radius: 10px; border: 3px solid #ef761f; padding: 3px 6px; text-align: center; }

.rfpdocexample { display: flex; flex-flow: row wrap; text-align: center; margin: 0 0 10px 0; }

.rfpdocnarrow { border-radius: 10px; border: 3px solid #ef761f; padding: 3px 0 0 0; width: 16.666667%; box-sizing: border-box; }

.rfpdocmedium { border-radius: 10px; border: 3px solid #ef761f; padding: 3px 0 0 0; width: 33.333333%; box-sizing: border-box; }

.rfpdocwide { border-radius: 10px; border: 3px solid #ef761f; padding: 3px 0 0 0; width: 50%; box-sizing: border-box; }

.rfpdocelements { display: flex; flex-flow: row wrap; }

.rfpdocshelf, .rfpdocstack { display: flex; flex-flow: column nowrap; margin: 0; padding: 0; flex: 0 0 100%; max-width: 100%; box-sizing: border-box; }

.rfpdocblock { margin: 5px; padding: 3px 6px; flex: 0 0 calc( 100% - 10px ); max-width: calc( 100% - 10px ); text-align: center; box-sizing: border-box; }

.rfpdocstack .rfpdocstack, .rfpsdoctack .rfpdocshelf, .rfpdocshelf .rfpdocshelf, .rfpdocshelf .rfpdocstack { flex: 1 0 auto; max-width: 100%; }

.rfpdocstack .rfpdocblock, .rfpdocshelf .rfpdocblock { flex: 1 0 auto; max-width: calc( 100% - 10px ); }

.rfpdocstack .rfpdocnoresize { flex: 0 0 auto; }

.rfpdocmedium .rfpdoc100-50-67size, .rfpdocmedium .rfpdoc100-50-50size, .rfpdocmedium .rfpdoc100-50-33size { flex: 0 0 50%; max-width: 50%; }

.rfpdocmedium .rfpdocblock.rfpdoc100-50-67size, .rfpdocmedium .rfpdocblock.rfpdoc100-50-50size, .rfpdocmedium .rfpdocblock.rfpdoc100-50-33size { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); }

.rfpdocwide .rfpdoc100-100-67size, .rfpdocwide .rfpdoc100-50-67size { flex: 0 0 66.666667%; max-width: 66.666667%; }

.rfpdocwide .rfpdocblock.rfpdoc100-100-67size, .rfpdocwide .rfpdocblock.rfpdoc100-50-67size { flex: 0 0 calc( 66.666667% - 10px ); max-width: calc( 66.666667% - 10px ); }

.rfpdocwide .rfpdoc100-100-50size, .rfpdocwide .rfpdoc100-50-50size { flex: 0 0 50%; max-width: 50%; }

.rfpdocwide .rfpdocblock.rfpdoc100-100-50size, .rfpdocwide .rfpdocblock.rfpdoc100-50-50size { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); }

.rfpdocwide .rfpdoc100-100-33size, .rfpdocwide .rfpdoc100-50-33size { flex: 0 0 33.333333%; max-width: 33.333333%; }

.rfpdocwide .rfpdocblock.rfpdoc100-100-33size, .rfpdocwide .rfpdocblock.rfpdoc100-50-33size { flex: 0 0 calc( 33.333333% - 10px ); max-width: calc( 33.333333% - 10px ); }

.rfpdocwide .rfpdocshelf { flex-flow: row wrap; }

.rfpdocwide .rfpdocshelf > .rfpdocstack { flex: 0 0 50%; max-width: 50%; }

.rfpdocwide .rfpdocshelf > .rfpdocblock { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); }

.rfpdocwide .rfpdocshelf > .rfpdocstack.rfpdockeepwide { flex: 0 0 100%; max-width: 100%; }

.rfpdocwide .rfpdocshelf > .rfpdocblock.rfpdockeepwide { flex: 0 0 calc( 100% - 10px ); max-width: calc( 100% - 10px ); }

/* INFOBOXES: game or book depended color style */ .infoboxtable { background-color: var(--theme-page-background-color); border: 1px solid #505050; float: right; font-size: 89%; margin-bottom: 0.5em; margin-left: 1em; padding: 0.2em; width: 300px; }

.infoboxtable td { vertical-align: top; }

.infoboxtable td > div { background-color: var(--theme-page-background-color--secondary); border: 2px solid inherit; border-radius: 5px; font-weight: bold; padding: 0.5px 7px; text-align: right; }

.infoboxname { background-color: var(--theme-accent-color); color: var(--theme-page-background-color); font-size: 110%; font-weight: bold; padding: 0.5em; }

.infoboxdetails { background-color: var(--theme-accent-color); color: var(--theme-page-background-color); padding: 0em; }