MediaWiki:Common.css

/* CSS placed here will be applied to all skins */ @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url("https://fonts.googleapis.com/css?family=Rubik&display=swap");

body { font-family: 'Lato', sans-serif; /* Below is the colour below the top bar (and maybe sidebar?) */ background: #0F0F0F; }

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body udt { font-family: 'Lato', sans-serif !important; }

font-size: 1.4em !important; padding: 0 0.5em !important; font-family: "roboto condensed"; }
 * 1) p-logo-text a.long {

background-image: url(TBA) !important; background-position: center center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-size: cover !important; border-bottom: solid 4px #ffffff4a !important; }
 * 1) mw-content-container {

width: 80%; background: white; background: rgba(255, 255, 255, 0.9) !important; }
 * 1) mw-content {

background: #152942; }
 * 1) mw-footer-container {

.color-middle, .color-right, .color-left { background: #3366cc; }

.sidebar-chunk { background: white; background: rgba(248, 250, 255, 0.9) !important; }

.grid-container { display: grid; grid-auto-columns: 1fr; }

.filter-button-selected, .filter-button-selected:hover { background: #ccc; }

/** Spoiler CSS **/ .spoiler-text { filter: blur(5px); transition-property: -webkit-filter; transition-duration: .4s; }

.spoiler-text:hover, .spoiler-text:focus { filter: blur(0px); }

.spoiler-img { filter: blur(15px); transition-property: -webkit-filter; transition-duration: .4s; }

.spoiler-img:hover, .spoiler-img:focus { filter: blur(0px); }

/** Card CSS **/ .card { box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); margin: 0.5em; padding: 1em; border-radius: 8px; }

.card-header { font-size: 1.2em; font-weight: bold; margin-bottom: 0.5em; background: linear-gradient(45deg, #b9ecff, transparent); padding: 0.25em .5em; }

.card table { width: 100%; border: none; }

.card table th { text-align: left; border: none; border-bottom: 1px solid #ccc; }

.card table td { text-align: right; border: none; border-bottom: 1px solid #ccc; }

table.half th, table.half td { width: 50%; }

.card table tr:last-of-type td, .card table tr:last-of-type th { border: none; }

/** Responsive Image **/ .res-img img { width: 100%; height: auto; }

/* CSS For No History Tabber (Template:Tab) */ .no-history-tabber-panel .oo-ui-optionWidget { color: black; font-family: Verdana, sans-serif; font-size: 12px; font-weight: 700; padding: 3px .5em; }

.no-history-tabber-panel .oo-ui-optionWidget:hover { background-color: #e4e4e4 !important; }

.no-history-tabber-panel .oo-ui-optionWidget.oo-ui-widget-enabled { border: 1px solid #e0e0e0; }

.no-history-tabber-panel .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { border: 1px solid black; cursor: pointer; }

.no-history-tabber-panel .oo-ui-tabOptionWidget .oo-ui-labelElement-label { border: 0 !important; margin: 0; padding: 0; line-height: normal; }

.no-history-tabber-panel .oo-ui-tabSelectWidget-framed { background-color: inherit; }

.no-history-tabber-panel .oo-ui-optionWidget { color: black; font-family: 'Lato', sans-serif !important; font-size: 14px; font-weight: 700; padding: 3px .5em; background: linear-gradient(to right, #d7e9fb 50%, white 50%); background-size: 200% 100%; background-position: right bottom; transition: all .25s ease-out; }

.no-history-tabber-panel .oo-ui-optionWidget:hover { background-position: left bottom; }

.no-history-tabber-panel .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { border: 1px solid #000; }

/* End of No History Tabber CSS*/

/** Unit icon CSS **/ .icon-template { display: inline-block; text-align: center; padding: 3px; }

/** Cargo Tables **/ .cargoTable thead tr { background: #e2f2ff !important; border: 1px solid #d4d4d4; }

/** Notice Templates **/ .page-notice { padding: 0.25em 1em; background: #eee; margin: auto; max-width: 600px; border: 1px solid lightgray; border-left: 8px solid gray; }

/** Template:Page header **/ background-color: #b9ecff; border: 1px solid skyblue; display: grid; grid-template-columns: repeat(3, 1fr); padding: 1em; }
 * 1) page-header {

grid-row: 1; text-align: left; align-self: center; }
 * 1) page-header-left {

grid-row: 1; text-align: right; align-self: center; }
 * 1) page-header-right {

grid-row: 1; text-align: center; font-weight: bold; font-size: 1.4em; }
 * 1) page-header-center {

font-size: 0.7em; }
 * 1) page-subheader-center {

/** Template:Info grid **/ .info-grid { display: grid; grid-auto-columns: 1fr; grid-gap: 0.5em; }

.info-grid-image { grid-row: 1; grid-column-start: 1; grid-column-end: 8; text-align: center; padding: 1em; margin: auto; }

.info-grid-image img { width: 100%; height: auto; }

.info-grid-general { grid-row: 1; text-align: center; grid-column-start: 8; grid-column-end: 13; padding: 1em; }

.info-grid-general .wikitable { width: 100%; }

@media screen and (max-width: 768px) { .info-grid-image { grid-row: 1; grid-column-start: 1; grid-column-end: 13; }

.info-grid-general { grid-row: 2; grid-column-start: 1; grid-column-end: 13; } }

/* One-sided navigation menu */ /* One-sided navigation menu */ @media (min-width: 1340px) { #mw-content-block { display: grid; grid-template-rows: max-content; width: 75%; }

#mw-content { width:100%; },   #content-bottom-stuff { margin-left: 14em; }

#mw-content-wrapper { grid-row-start: 1; grid-row-end: 99; grid-column: 1; order: unset; }

#mw-site-navigation { grid-row: 1; grid-column: 1; order: unset; }

#mw-related-navigation { grid-row: 2; grid-column: 1; width: 14em; padding: 0 1em 0 0; order: unset; }

div.color-middle { margin-right: 0; } }

/* Re-aligning bottom logos */ padding-right: 1em; }
 * 1) footer {

/***************************************************************************/ /****************************- Custom Elements -****************************/ /***************************************************************************/

.mw-editsection { display: none; }

background: linear-gradient(#31121A, #921131); }
 * 1) mw-header-container {

color: white; }
 * 1) mw-header-container div {

color: white; }	font-family : "roboto condensed"; }
 * 1) mw-header-container #p-banner {
 * 1) mw-header-container #personal h2 {

filter: invert(100%); }
 * 1) pt-notifications-alert .oo-ui-icon-bell {

filter: invert(100%); }
 * 1) pt-notifications-notice .oo-ui-icon-tray {

color: black; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge::after,
 * 2) pt-notifications-notice .mw-echo-notifications-badge::after {

div.color-left { background-color: #C2185E; }

div.color-middle, div.color-right { background-color: white; }

color: black; }
 * 1) p-personal-label {

display: flex; }
 * 1) mw-content-block {

order: 1; margin-right: 0em; flex: 0 0 225px; }
 * 1) mw-site-navigation {

order: 2; margin-top: 1em; margin-right: 1em; margin-left: 2em; } }
 * 1) mw-content-wrapper {

width: 80%; }
 * 1) mw-content-wrapper #mw-content {

order: 3; width: 100%; flex: 0 0 225px; }
 * 1) mw-related-navigation {

@media only screen and (min-width: 1340px) {

#mw-content, #content-bottom-stuff { margin-left: 0; } }

.mw-wiki-logo { background-position: center center; background-size: auto 165px; }

/*- BG IMG OR Color --*/

background: url("https://cdn.discordapp.com/attachments/296188895933235200/891800537958330378/unknown.png"), transparent !important; background-position: center center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-size: cover !important; background-color: transparent !important; }
 * 1) mw-content-container {

color: #fcfcfc; background-color: transparent !important; }
 * 1) mw-content-container .sidebar-chunk {

/*this part has the main content container bg colour--*/ /*--add 0.7 after rgb colours to add transparency--*/ color: #fcfcfc; background: linear-gradient(#921131 0,#111112 7rem) !important; }
 * 1) mw-content-container #mw-content {

border: 2px solid black; font-family: "roboto condensed"; }
 * 1) mw-content {

background-color: transparent !important; }
 * 1) mw-content div {

color: #fcfcfc; }
 * 1) mw-content-container div {

display: none; }
 * 1) mw-related-navigation {

display: none; }
 * 1) p-navigation {

display: none; }
 * 1) site-tools {

border: none; }
 * 1) mw-site-navigation .sidebar-chunk {

/*************************************************************************/ /* 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); }

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

.mw-underline-always a { color: red; }

.mw-underline-always a:visited { color: #ad410e; }

width: 40%; margin: auto; }
 * 1) searchform {

body { margin-bottom: -1%; background: tranparent !important; }

display: none; }
 * 1) mw-header-hack {

/*Search Bar Styling*/ border: none; box-shadow: none; }	background: #0F0F0F; color: white; border-radius: 0; }
 * 1) mw-header-container #simpleSearch {
 * 1) mw-header-container #searchInput {

display: none; }
 * 1) ca-ve-edit {

display: none; }	background-image: url("https://static.miraheze.org/pgrwiki/0/02/White-SearchIcon.svg"); margin : auto; }
 * 1) ca-cargo-purge {
 * 1) searchform #searchButton {

/*End of Search Bar Styling*/

color: #f72058; text-shadow: 1px 1px 1px #0f0104; display: inline-block; }
 * 1) mw-content a,
 * 2) mw-content a:visited {

/* -- Striped Table STRIPES - */ .striped_row tr:nth-child(even) { background-color: rgba(9, 9, 10, 0.3); }

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

mw-footer-container { background: transparent !important; }

/* - */ /* --: 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: 0px 0px; 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 :-- */

/**Custom wikitable used on the Enemies page**/

table.wikitable-custom1 { text-align: center; border-collapse: collapse; table-layout:fixed; } table.wikitable-custom1 th { height: 40px; background-color: #6A686E; font-weight: normal; font-size: 17px; border: #666666 5px solid; } table.wikitable-custom1 td { height: 200px; border: #666666 3px solid; border-top: 1px solid #fff; } table.wikitable-custom1 tfoot td { font-size: 11px; border: #666666 3px solid; } table.wikitable-custom1 tbody td { background: url('https://static.miraheze.org/pgrwiki/0/00/Wiki-Background-EnemyCellNew.png'); background-position: center; height: 200px; width: 200px; z-index: 1; border: #666666 3px solid; } table.wikitable-custom1 tbody:hover td:hover { filter: invert(15%); } .enemyIcon { size: 120px; position: center; z-index: 2; } .enemyIconBackground { background: url('https://static.miraheze.org/pgrwiki/0/00/Wiki-Background-EnemyCellNew.png'); background-position: center; height: 200px; width: 200px; z-index: 1; } .enemyIconBackground:hover { filter: invert(80%); } span.fontWhite a { color: white; }

/* -: End of custom table :- */

display : flex; flex :auto; height : 2.5rem; width : 20rem; } height : 0; width : 0; border-bottom : 2.5rem solid transparent; } padding-left: 10px; width: 250px; padding : 0 0.5rem; background : rgb(245, 0, 0); margin : 0; font-size: 1.5rem; color : white; line-height: 2.5rem; font-weight: 900; }
 * 1) custom-header-notch {
 * 1) custom-header-notch .notch {
 * 1) custom-header-notch .header {

/***************************************************************************/ /*- custom Left Menu -*/

margin-top: -0.6em; margin-left: -0.5em; } width: 250px; background-position:center; background-size:contain; }
 * 1) p-logo {
 * 1) p-logo a {

margin-top: -40px !important; }
 * 1) site-navigation {

width: 250px; margin-left: -2em; }
 * 1) site-navigation .sidebar-inner {

font-family: "roboto condensed"; display: inline-block; height: 40px; font-size: 26px; font-weight: 900 !important; }
 * 1) p-N_A_V_I_G_A_T_I_O_N {m

margin-top: 0.3em !important; border-bottom: none !important; }
 * 1) p-N_A_V_I_G_A_T_I_O_N h3 {

width:100% !important; text-align:center; font-weight:900; background-image:url(https://cdn.discordapp.com/attachments/887726034412249160/887752045371748352/asset1.png); background-position:center center !important; background-repeat:no-repeat !important; background-size:cover !important; }
 * 1) p-N_A_V_I_G_A_T_I_O_N {

color:white; font-size:20px; font-family:"roboto condensed"; }
 * 1) p-N_A_V_I_G_A_T_I_O_N span {

text-decoration:none; }
 * 1) p-N_A_V_I_G_A_T_I_O_N a:hover {