MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

@font-face {
    font-family: 'rubik';
    src: url('/resources/fonts/Rubik-VariableFont_wght.ttf');
}
@font-face {
    font-family: 'Rubik Regular';
    src: url('/resources/fonts/Rubik-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto Flex';
	src: url('/resources/fonts/RobotoFlex-Variable.ttf');
}
@font-face {
	font-family: 'Noto Emoji';
	src: url('/resources/fonts/NotoEmoji-Variable.ttf');
}

@font-face {
    font-family: "Yanigalt";
    src: url("/resources/fonts/yanigalt.ttf");
}

:root {
    --fem-dark: #48283d;
    --fem-light: #794367;
    --pi-background: #14232b;
    --pi-secondary-background: #283d48;
    --theme-link-color: #e7ad32;
    --pi-border: #4c5067;
    --pi-background: #1a1d23;
    --pi-secondary-background: #deb76c;
    --pi-title-color: #1a1d23;
    --pi-tabber-color: #b2b2b4;
    --pi-tabber-bg-color: #353847;
    --pi-rows-color: #272935;
    --pi-subtitle-bg-color: var(--pi-tabber-bg-color);
}

body * {
	font-family: 'rubik', 'Rubik Regular', Arial, Helvetica, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
}

pre { font-family: monospace; display: inline-block; }

.pcm-quadrato { width: 10px; height: 10px; }
.pcm-quadrato-authleft { background-color: #ff7676; }
.pcm-quadrato-authright { background-color: #40acff; }
.pcm-quadrato-libleft { background-color: #9Bee98; }
.pcm-quadrato-libright { background-color: #c19beb; }

table.lan-party { width: 100%; }
table.lan-party th { background: #302f37 !important; }
table.lan-party th, table.lan-party td { padding: 4px 9px; }
table.lan-party td.lan-party-description { border-bottom: 3px solid currentColor; }

.arc-element img { object-fit: cover; width: 128px; height: 128px; }
.portalchar-a-wrapper > a { display: block; width: 98px; height: 98px; }
.mw-body .portal-char a > img { width: 100%; height: 100% !important; object-fit: cover; }

.roundy { border-radius: 10px; }

.portable-infobox .pi-data-label { color: white; }
.portable-infobox.pi-theme-f {
    --pi-title-color: white;
    --pi-tabber-color: white;
    --pi-secondary-background: var(--fem-light);
    --pi-tabber-bg-color: var(--fem-light);
    --pi-rows-color: var(--fem-dark);
    --pi-border: var(--fem-light);
    --pi-subtitle-bg-color: var(--fem-dark);
}
.portable-infobox.pi-theme-campagna { --pi-secondary-background: #a6de6c; }
.portable-infobox.pi-theme-piano { --pi-secondary-background: #6cdeb7; }
.portable-infobox .pi-header[data-item-name="subtitle"] { background: var(--pi-subtitle-bg-color); border-bottom: 0; }

a:active, a:focus-visible { outline: none; }

.sprite.role-sprite { display: block; vertical-align: middle; width: 15px; height: 15px; background-image: url('/images/1/10/RoleSprite.png'); background-size: 63px auto; background-repeat: no-repeat; }

#mw-content h2 {
    padding-bottom: revert;
    border-bottom: revert;
    font-weight: revert;
}

/*** MAIN PAGE ***/
.main-header {
    color: #fff;
    background: #14232b;
    font-weight: bold;
    letter-spacing: 1px;
    border: 1px solid #283d48;
    border-radius: 5px 5px 0 0;
    padding: 8px 10px;
    margin: 20px 0 0;
}

.main-box {
    background: transparent;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    margin: 0 0 20px 0;
}

.main-side-header {
    background: #efd635;
    margin: 20px 0 5px;
    padding: 5px;
    font-weight: bold;
    color: black;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 5px;
}

.main-discussions a {
    color:black;
}
 
.main-discussions-post {
    background:black;
    border-radius:4px;
    font-weight:bold;
    line-height:25px;
    margin: 0.5em 0;
    padding:10px 15px;
    display: flex;
    align-items: center;
}
.main-discussions-post a {
	color:white;
}
.main-discussions-post:hover {
    background:#3d3d3d;
    padding:10px 25px;
    transition:1s;
	text-shadow: 2px 2px 5px white;
}
.mainpage .WikiaPage .page-header__title,
.mainpage .WikiaPage .page-header__separator {
display: none;
}
/*** INFOBOX ***/

.portable-infobox .pi-image-thumbnail {
    width: 285px;
}
.portable-infobox .pi-header, .portable-infobox .pi-title {
    background-color: var(--pi-secondary-background);
}
.portable-infobox .pi-title, .pi-header, .pi-navigation {
    text-align: center !important;
    color:white;
}
.portable-infobox .pi-secondary-font {
    font-size: 12px;
}
.portable-infobox .pi-data-label {
    flex-basis: 110px;
    overflow: hidden;
    word-wrap: break-word;
    font-weight: 500;
    /*text-align: right;*/
}
.portable-infobox h2 > p, .portable-infobox h3 > p {
    margin: 0;
}
.portable-infobox .pi-header {
	font-weight: 500;
}
.portable-infobox .pi-data-value {
    font-size: 12px;
    text-align: left;
    -ms-flex-preferred-size: 200px;
    -webkit-flex-basis: 200px;
    -moz-flex-basis: 200px;
    flex-basis: 200px;
}
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item {
    text-align: center;
    border-top: none;
    border-bottom: none;
    padding: 9px;
    vertical-align: top;
}
.portable-infobox .pi-secondary-background {
    color: var(--pi-tabber-color);
    background-color: var(--pi-tabber-bg-color);
}

/*** Table ***/
table.timeline {
    background: #fafafa;
    border-collapse: collapse;
    border: 0px none #cccccc;
    margin: 0.3em;
    width: 100%;
    table-layout: fixed;
}

table.timeline th {
    font-size: 110%;
    font-weight: bold;
    background: #f2f2f2;
    text-align: center;
}

table.timeline td {
    vertical-align: top;
    font-size: 89%;
}
.table.timeline th, table.timeline td {
    border-bottom: 1px #cccccc solid;
    padding: 6px 12px;
}

.mw-collapsible-toggle a {
	color:gray!important;
}

/*.pi-image-thumbnail {
    width: 100%;
    max-width: none;
}*/

.pi-title > p {
    margin: 0;
}

.client-js .pi-collapse .pi-header::before {
    border-color: currentColor;
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: '';
    display: block;
    height: 5px;
    right: 10px;
    position: absolute;
    top: 50%;
    width: 5px;
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-top: -3px;
}

.client-js .pi-collapse-closed .pi-header::before {
    -ms-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    margin-top: -5px;
}

.portable-infobox {
    color: white;
    background-color: var(--pi-tabber-bg-color);
    width: 270px;
    margin-bottom: 10px;
}
.portable-infobox .pi-media {
    background: var(--pi-background);
}
.portable-infobox, .portable-infobox .pi-title {
    border-radius: 4px 4px 0 0;
}
.portable-infobox .pi-item-spacing {
    padding: 0;
}
.portable-infobox .pi-border-color {
    border-color: var(--pi-border);
}
.portable-infobox .pi-title {
    line-height: 40px;
    border-bottom: 0 !important;
    color: var(--pi-title-color);
    background: var(--pi-secondary-background);
    font-size: 18px;
}
.portable-infobox .pi-media-collection {
    border-bottom: 1px solid var(--pi-border);
}
.portable-infobox .pi-header {
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
}
.portable-infobox .pi-header:not([data-item-name="subtitle"]) {
    border-bottom: 1px solid var(--pi-border) !important;
}
.portable-infobox .pi-data-label, .portable-infobox .pi-data-value {
    border-color: var(--pi-border);
    background-color: var(--pi-rows-color);
    font-family: inherit;
    /*font-size: .8em;*/
    padding: 8px;
    hyphens: manual;
}
.portable-infobox .pi-media-collection-tabs {
    margin: 0;
    padding: 0;
    align-items: flex-end;
    justify-content: start;
    flex-wrap: nowrap;
}
.portable-infobox ul.pi-media-collection-tabs li {
    margin: 0;
    padding: 0 11px;
    letter-spacing: .5px;
    transition: color .1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    height: 40px;
    border: 0;
}
.portable-infobox ul.pi-media-collection-tabs li.current {
    box-shadow: inset 0 -3px 0 -1px currentColor;
    color: var(--theme-link-color);
    background: none;
    font-weight: inherit;
}
.portable-infobox .pi-caption {
    padding: 5px 8px;
    text-align: center;
}
div.thumbinner {
    background: none;
}
div.thumbinner .thumbimage {
    border: 0;
}
div.thumbinner .thumbcaption {
    border: 0;
    color: white;
    font-size: 12px;
}

@media screen and (max-width: 720px) {
    .portable-infobox {
        margin-left: auto;
        margin-right: auto;
    }
}

/* STAR SYSTEM */
.star-system {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    --star-system-orbit-animation-duration: 100s;
    --star-system-orbit-animation: var(--star-system-orbit-animation-duration) star-system-orbit-rotate linear infinite;
    --star-system-orbit-animation-reverse: var(--star-system-orbit-animation-duration) star-system-orbit-rotate-reverse linear infinite;
    --star-system-orbit-size: 200px;
    --star-system-star-size: 50px;
    --star-system-planet-size: 20px;
    --star-system-color-background: transparent;
    --star-system-color-primary: 255, 255, 255;
    background: var(--star-system-color-background);
}
.star-system a { text-decoration: none; }
.star-system-orbit, .star-system-star, .star-system-planet, .star-system-orbit > a { border-radius: 50%; }
.star-system-star, .star-system-planet, .star-system-orbit > a { background: rgb(var(--star-system-color-primary)); }
.star-system-orbit { position: absolute; width: var(--star-system-orbit-size); height: var(--star-system-orbit-size); border: 1px solid rgba(var(--star-system-color-primary), .2); animation: var(--star-system-orbit-animation); animation-duration: var(--star-system-orbit-animation-duration); pointer-events: none; }
.star-system-star { width: var(--star-system-star-size); height: var(--star-system-star-size); margin: auto; }
.star-system-planet, .star-system-orbit > a { width: var(--star-system-planet-size); height: var(--star-system-planet-size); margin-top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; animation: var(--star-system-orbit-animation-reverse); animation-duration: var(--star-system-orbit-animation-duration); pointer-events: auto; }
.star-system-planet:hover, .star-system-orbit > a:hover { --star-system-color-primary: var(--star-system-color-hover); }
.star-system-planet-label { margin-top: -100%; color: rgb(var(--star-system-color-primary)); }
@keyframes star-system-orbit-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes star-system-orbit-rotate-reverse {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to { transform: translate(-50%, -50%) rotate(0deg); }
}
/* END STAR SYSTEM */