MediaWiki:Custom.css

/*This header is made for*/ .custom_header_1 { margin-top: -8px; font-family: helvetica; }

.custom_header_1 h2 { font-family: "roboto condensed"; font-weight: 900; border-radius: 3px; font-size: 28px; padding: 0.3em 0.5em; padding-top: 7px; background-color: var(--theme-accent-color); color: #ffffff; border-bottom: 0px solid var(--theme-border-color); }

.custom_header_1 .page-content h2 { border-bottom: 0px solid var(--theme-border-color); }

/* - */ /* ---: custom Tabber with Table inside :--- */ .custom-tab_1 { font-family: "Roboto Condensed"; }

.custom-tab_1 .tabs { display: flex; flex-wrap: wrap; }

.custom-tab_1 .wds-tabs { pointer-events: none; height: 50px; color: #ffffff; padding: 0; cursor: pointer; display: -webkit-box; display: flex; list-style: none; position: relative; scrollbar-width: none; align-items: flex-end; text-align: center; -webkit-box-align: end; }

.custom-tab_1 .wds-tabs li { border-right: 6px solid var(--theme-page-background-color); color: white; }

.custom-tab_1 .wds-tabs, .custom-tab_1 .wds-tabs__wrapper { --wds-tab-color: rgba(var(--theme-page-text-color--rgb), 0.75); --wds-tab-color--active: var(--theme-link-color); --wds-tab-color--hover: var(--theme-page-text-color); --wds-tab-border-color: rgba(var(--theme-page-dynamic-color-1--rgb), 0.25); }

.custom-tab_1 .wds-tabs::-webkit-scrollbar { display: none; }

.custom-tab_1 .wds-tabs__wrapper { position: relative; }

.custom-tab_1 .wds-tabs__wrapper.with-bottom-border { border-bottom: 0px solid var(--wds-tab-border-color); }

.custom-tab_1 .wds-tabs__wrapper.both-arrows-visible .wds-tabs { -webkit-mask-image: -webkit-gradient(linear,           left top,            right top,            from(transparent),            color-stop(20%, #000),            color-stop(80%, #000),            to(transparent)); -webkit-mask-image: linear-gradient(90deg,           transparent,            #000 20%,            #000 80%,            transparent); }

.custom-tab_1 .wds-tabs__wrapper.both-arrows-visible .wds-tabs__arrow-left, .custom-tab_1 .wds-tabs__wrapper.both-arrows-visible .wds-tabs__arrow-right { visibility: visible; }

.custom-tab_1 .wds-tabs__wrapper.left-arrow-visible .wds-tabs { -webkit-mask-image: -webkit-gradient(linear,           left top,            right top,            from(transparent),            color-stop(20%, #000)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%); }

.custom-tab_1 .wds-tabs__wrapper.left-arrow-visible .wds-tabs__arrow-left { visibility: visible; }

.custom-tab_1 .wds-tabs__wrapper.right-arrow-visible .wds-tabs { -webkit-mask-image: -webkit-gradient(linear,           left top,            right top,            color-stop(80%, #000),            to(transparent)); -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); }

.custom-tab_1 .wds-tabs__wrapper.right-arrow-visible .wds-tabs__arrow-right { visibility: visible; }

.custom-tab_1 .wds-tabs__wrapper .wds-tabs { overflow-x: scroll; }

.custom-tab_1 .wds-tabs__arrow-left, .custom-tab_1 .wds-tabs__arrow-right { -webkit-box-align: center; -webkit-box-pack: center; align-items: center; bottom: 0; cursor: pointer; display: -webkit-box; display: flex; justify-content: center; position: absolute; top: 0; visibility: hidden; width: 18px; z-index: 1; }

.custom-tab_1 .wds-tabs__arrow-left { left: 0; }

.custom-tab_1 .wds-tabs__arrow-left>svg { -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.custom-tab_1 .wds-tabs__arrow-right { right: 0; }

.custom-tab_1 .wds-tabs__arrow-right>svg { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

.custom-tab_1 .wds-tabs__tab { pointer-events: auto; width: 130px; color: var(--wds-tab-color); cursor: default; flex-shrink: 0; line-height: 14px; position: relative; -webkit-transition: -webkit-box-shadow 0.1s; transition: -webkit-box-shadow 0.1s; transition: box-shadow 0.1s; transition: box-shadow 0.1s, -webkit-box-shadow 0.1s; background: var(--theme-accent-color); }

.custom-tab_1 .wds-tabs__tab-label { -webkit-box-align: center; display: -webkit-inline-box; display: inline-flex; font-size: 18px; font-weight: bold; height: 50px; letter-spacing: 0.5px; margin: auto; text-align: center; -webkit-transition: color 0.1s; transition: color 0.1s; white-space: nowrap; }

.custom-tab_1 .wds-tabs__tab-label :not(:first-child):not(:only-child) { margin-left: 4px; }

.custom-tab_1 .wds-tabs__tab-label>a { font-weight: 900; -webkit-box-align: center; align-items: center; color: inherit; display: -webkit-inline-box; display: inline-flex; height: 100%; text-decoration: none; }

.custom-tab_1 .wds-tabs__tab-label>a:hover { color: #c1c0c5; text-decoration: inherit; }

.custom-tab_1 .wds-tabs__tab:hover { color: var(--wds-tab-color--hover); }

.custom-tab_1 .wds-tabs__tab.wds-is-current { text-decoration: inherit; color: var(--wds-tab-color--active); }

.custom-tab_1 .wds-tabs__tab .wds-dropdown__content { left: -7px; -webkit-transform: none; transform: none; }

.custom-tab_1 .wds-tab__content { display: none; }

.custom-tab_1 .wds-tab__content.wds-is-current { background-color: white; color: #000; display: block; padding-left: 7px; padding-top: 7px; padding-bottom: 7px; }

.custom-tab_1 .wds-tabs li.wds-is-current { color: black; background-color: white; }

.custom-tab_1 .wds-tabs__tab.wds-is-current { -webkit-box-shadow: inset 0 0px 0 0 currentColor; }

.custom_full_width img { width: 100%; height: 100%; }

.custom-table_1 { font-family: "tahoma"; }

.custom-table_1 p { line-height: 1.4; margin-bottom: 5px; }

.custom-table_1 tr, td { padding-left: 20px; padding-right: 20px; }

.custom-table_1 .custom-table_th { font-family: "Roboto Condensed"; font-size: 26px; padding-left: 20px; }

.custom-table_1 tr { font-size: 16px; line-height: 1.4; }

.custom-table_1 .fix_align_middle { height: 95px; }

.custom-table_1 .fix_align_middle img { margin-top: -1.8em; }

.custom-table_th p { height: 35px; font-weight: 900; }

/*************************************************************************/

.custom-infobox_1 .pi-image-thumbnail { margin-bottom: -15px; }

.custom-infobox_1 [data-source="image1small"] .pi-image-thumbnail { max-width: 150px; margin-left: -40px; }

.custom-infobox_1 [data-source="image2small"] .pi-image-thumbnail { max-width: 150px; margin-left: -40px; }

.custom-infobox_1 [data-source="image3small"] .pi-image-thumbnail { max-width: 150px; margin-left: -40px; }

.custom-infobox_1 [data-source="Tab1"] { margin-top: -50px; }

.custom-infobox_1 [data-source="Tab2"] { margin-top: -50px; }

.custom-infobox_1 [data-source="Tab3"] { margin-top: -50px; }

.custom-infobox_1 [data-source="Rarity"] .pi-font { font-size: 16px; }

.custom-infobox_1 .pi-data-value.pi-font { text-align: center; }

/*************************************************************************/ /* Custom article and header /*************************************************************************/

.custom-article_1 { margin-left: 5px; margin-right: 5px; display: flex; text-align: justify; }

.custom-article_1 .floatnone { padding-bottom: 10px; }

.custom-article_1 .ca_L { margin-right: 20px; width: auto; }

.custom-article_1 .ca_R { margin-right: 20px; width: auto; }

.custom-article_1 .ca_L-w50 { margin-right: 20px; width: 50%; }

.custom-article_1 .ca_R-w30 { margin-left: 20px; width: 30%; }

.custom-article_1 .ca_R-w35 { margin-left: 20px; width: 35%; }

.custom-article_1 .ca_R-w40 { margin-left: 20px; width: 40%; }

.custom-article_1 .ca_R-w45 { margin-left: 20px; width: 45%; }

.custom-article_1 .ca_R-w50 { margin-left: 20px; width: 50%; }

.custom-article_1 .ca_R-w55 { margin-left: 20px; width: 55%; }

.custom-article_1 .ca_R-w60 { margin-left: 20px; width: 60%; }

.custom-article_1 .ca_R-w65 { margin-left: 20px; width: 65%; }

.custom-article_1 .ca_R-w70 { margin-left: 20px; width: 70%; }

.custom_header_article { font-family: helvetica; }

.custom_header_article h2 { font-family: "roboto condensed"; margin-top: -5px; font-weight: 900; font-size: 24px; border-bottom: 0px solid var(--theme-border-color); }

.custom_header_article .page-content h2 { border-bottom: 0px solid var(--theme-border-color); }

/* - */ /* -: Custom grid for enemy pages :- */

.infobox_custom2 { display: grid; grid-template-columns: 0.5fr 2.2fr 2.4fr 0.5fr; grid-template-rows: 0.5fr 0.9fr 1.9fr 0.7fr 1.7fr 0.3fr; grid-auto-columns: 1fr; gap: 1em 1em; grid-auto-flow: row; grid-template-areas: "Top-space Top-space Top-space Top-space" "Left-space Enemy-image Enemy-image Right-space" "Left-space Enemy-image Enemy-image Right-space" "Left-space Enemy-specs Enemy-specs Right-space" "Left-space Enemy-description Enemy-description Right-space" "Left-space Enemy-traits Enemy-traits Right-space"; }

.Enemy-image { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 0.4fr 1.6fr 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "Image-space-tLeft Enemy-name Image-space-tRight" "Image-space-center Image-space-center Image-space-center" "Image-space-center Image-space-center Image-space-center"; grid-area: Enemy-image; }

.Enemy-name { grid-area: Enemy-name; }

.Image-space-tLeft { grid-area: Image-space-tLeft; }

.Image-space-tRight { grid-area: Image-space-tRight; }

.Image-space-center { grid-area: Image-space-center; }

.Enemy-specs { grid-area: Enemy-specs; }

.Enemy-description { grid-area: Enemy-description; }

.Enemy-traits { grid-area: Enemy-traits; }

.Top-space { grid-area: Top-space; }

.Left-space { grid-area: Left-space; }

.Right-space { grid-area: Right-space; }

/* -: End of custom grid :-- */