MediaWiki:Common.css

/***********************************************************************************************************
 * import loadout
 ***********************************************************************************************************/
@import url(https://commons.wiki.gg/wiki/MediaWiki:wdl.css?action=raw&ctype=text/css);
/***********************************************************************************************************
 * local theme setting
 ***********************************************************************************************************/
@font-face {
	font-family: 'ChinaCat';
	src: local('ChinaCat'),
		url('https://commons.wiki.gg/images/3/31/ChinaCat.woff2') format('woff2'),
		url('https://commons.wiki.gg/images/e/e5/ChinaCat.ttf') format('ttf');
}
:root {
  --wiki-heading-font-family: ChinaCat, sans-serif;
  --wiki-sidebar-heading-font-family: ChinaCat, sans-serif;
  --wiki-logo-width--px: 500;
  --wiki-logo-height--px: 188;
  --wiki-logo-image: url(https://slarpg.wiki.gg/images/e/e6/Site-logo.png);
  --wiki-body-background-color: #f09fc8;
  --wiki-content-border-color: #e2e3e3;
  --wiki-content-border-color--rgb: 226, 227, 227;
  --wiki-content-border-color--secondary: #e2e3e3;
  --wiki-content-border-color--secondary--rgb: 226, 227, 227;
  --wiki-content-border-color--accent: #ff4985;
  --wiki-content-border-color--accent--rgb: 255,73,133;
  --wiki-box-border-radius: 5px;
  --wiki-box-border-width: 1px;
  --wiki-box-background-opacity--fore: 1;
  --wiki-content-text-color: #545871;
  --wiki-content-text-color--rgb: 84, 88, 113;
  --wiki-content-text-color--secondary: #999;
  --wiki-content-text-color--accent: #0b7533;
  --wiki-content-link-color: #006781;
  --wiki-content-link-color--rgb: 0,103,129;
  --wiki-content-link-color--visited: #095164;
  --wiki-content-link-color--visited--rgb: 9,81,100;
  --wiki-content-link-color--hover: #0080a2;
  --wiki-content-link-color--hover--rgb: 0,128,162;
  --wiki-content-redlink-color: #9a2835;
  --wiki-content-redlink-color--rgb: 154,40,53;
  --wiki-navigation-background-color: var(--wiki-content-background-color);
  --wiki-navigation-background-color--rgb: var(--wiki-content-background-color--rgb);
}
@media screen and (max-width: 900px) {
  :root {
    --layout-logo-scale: 0.75;
  }
}
@media screen and (max-width: 600px) {
  :root {
    --layout-logo-scale: 0.5;
  }
}

/***********************************************************************************************************
 * local layout setting
 ***********************************************************************************************************/
/*
min-width: calc($layout-sidebar-width + $layout-content-max-width + $layout-sidespace * 2 + $layout-box-gap-x * 3)

$layout-content-max-width: 1600px;
$layout-sidebar-width: 180px;
$layout-sidespace: 30px;
$layout-box-gap-x: 12px;
 */
@media screen and (min-width: 1876px) {
  :root {
    --layout-sidespace: minmax(0,1fr); /* whitespace width on most left and most right */
    --layout-content-width: 1600px;
  }
}
/***********************************************************************************************************
 * other local css
 ***********************************************************************************************************/
@media screen and (min-width: 1366px) {
  #mw-panel .vector-menu-portal + .vector-menu-portal {
    border-top-width: 1px;
  }
}

.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
  left: 0;
  right: 0;
}
.mw-body .ve-init-mw-desktopArticleTarget-toolbar, .ve-init-mw-desktopArticleTarget-toolbarPlaceholder {
  margin: 0;
}
.ve-ui-toolbar:not(.ve-ui-toolbar-floating) > .oo-ui-toolbar-bar {
  z-index: auto;
}

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

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

.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: 0.4s;
}

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

.spoiler-img {
	filter: blur(15px);
	transition-property: -webkit-filter;
	transition-duration: 0.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 0.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 0.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: sans-serif !important;
	font-size: 14px;
	font-weight: 700;
	padding: 3px 0.5em;
	background: linear-gradient(to right, #d7e9fb 50%, white 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all 0.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;
}

/** 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 **/
#page-header {
	background-color: #b9ecff;
	border: 1px solid skyblue;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 1em;
}

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

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

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

#page-subheader-center {
	font-size: 0.7em;
}

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

/*

Traynack's CSS Tomfoolery (I sincerely apoligize in advance)

*/

.fplinks {
    display: flex;
    flex-wrap:wrap;
    justify-content:space-around;
    padding: 10px;
}

.fplink {
  padding: 20px;
  text-align: center;
}