MediaWiki:Vector.css

/* All CSS here will be loaded for users of the Vector skin */

/*Ads*/
#sidebar-sticky {
    position: fixed;
    left: -10px;
}

/* Remove the max-width settings in the vector-2022 skin */
.mw-page-container,
.mw-workspace-container,
.mw-content-container,
.vector-sticky-header,
.mw-article-toolbar-container {
	max-width: 1560px !important;
}

/* Shrink the whitespace gap under the top header as well */
.mw-header {
	margin-bottom: 0.5em;
}

/* background color */
.mw-page-container {
    background-color: #f8f9fa;
}


/* sidebar, space between sidebar and content */
@media screen and (min-width: 1000px) {
.mw-page-container { 
    padding-left: 2em;
    padding-right: 2em; 
}

.mw-sidebar {
    width: 220px;
    border-radius: 4px;
    background: #7c7d99;
    margin-top: 8px;
}

nav#mw-panel a {
    color: white;
}
.vector-menu-portal .vector-menu-heading {
    color: white;
    font-weight: 900;
}

.sidebar-toc, .sidebar-toc:after {
    margin-left: 0em;
}

/* reduce left and right white space */
/* 200px (was 284) moves the left edge of the content nearer to the right edge of left panel */
@media screen and (min-width: 1200px) {
.mw-page-container { 
    padding-left: 1em;
    padding-right: 1em; 
}
}

/* buttons */
button, optgroup, select {
    border-radius: 20px;
    font-size: small;
    padding: 5px;
    border: 1px solid #b8bdc3;
}

/*Main Section*/
@media screen and (min-width: 1000px) {
.vector-sticky-header {
    background: #f7f8f9e8;
}
}

.vector-sticky-header-context-bar-primary {
    font-family: sans-serif;
    font-weight: bold;
}

.mw-article-toolbar-container {
    border: none;
}

.home-header {
    text-align: center;
}

.heading-main1 {
    text-align: center;
    font-weight: 600;
}

.not-available {
    filter: opacity(0.5);
}

/* Infobox section */

table.infobox {
    margin-left: 1.4rem;
    clear: right;
    float: right;
    z-index: 3!important;
    overflow: hidden;
    width: 320px;
    padding: 5px;
    max-width: 100%;
    margin-bottom: 1.6rem;
    padding-bottom: 20px!important;
    background: var(--color-surface-2);
    border-radius: 10px;
    border-spacing: 0;
    border: 1px solid #62626226;
    box-shadow: var(--box-shadow-card);
    font-size: 0.875rem;
}


th.infobox-title{
    padding-top: 10px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 5px;
    color: var(--color-base--emphasized);
    font-size: 1.4rem;
    line-height: 1.4;
}

th.infobox-header{
width: 100%;
    padding-top: 15px;
    border-color: var(--border-color-base);
    margin-top: 15px;
    color: var(--color-base--emphasized);
    font-size: 1rem;
}

table.infobox>tbody {
    text-align: center;
}

/* all text stuff*/
.client-js .vector-search-box-vue .vector-search-box-input {
    border-radius: 20px;
}

html, body {
    font-family: sans-serif;
}

body {
    color: #464646; 
}

.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
    font-family: sans-serif;
    color: #464646;
}

a {
    color: #4679df;
}


a:visited {
    color: #4679df;
}


.vector-menu-portal .vector-menu-content li a:visited {
    color: #4679df;
}

.vector-menu-portal .vector-menu-content li a {
    color: #4679df;
}

/* cargo table */
.dataTables_wrapper {
    padding: 10px;
    border-radius: 10px;
    color: #6e6e6e;
}

.dataTables_wrapper .dataTables_filter input {
    margin-bottom: 10px;
    border-radius: 20px;
    padding: 5px;
    border: 1px solid #b8bdc3;
}

table.dataTable tfoot th, table.dataTable tfoot td {
    display: none;
}

table.dataTable thead th, table.dataTable thead td {
    padding: 1px 10px;
    border-bottom: 1px solid #9d9d9d;
    color: #818181;
}

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
    background-color: #f8f9fa;
}

table.dataTable tbody tr {
    background-color: #fdfdfd;
}

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
    border-top: none;
}

/*title table.dataTable thead th, table.dataTable thead td
odd table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd
even table.dataTable tbody tr*/

/* Home Grid Section*/
.home-grid {
	display: grid;
	grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );
	/*grid-auto-rows: minmax( 3rem, auto );*/
	grid-gap: 0.625rem;
}

.home-grid--col2 {
	grid-template-columns: 1fr 1fr;
}

.home-grid a.external {
	background-image: none;
}

.home-card {
	position: relative;
	padding: 10px;
	background: var(--color-surface-2);
	border-radius: 4px;
        box-shadow: none;
	font-size: 0.875rem;
}

/*box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );*/


.home-card table.timeline {
	margin-top: 0.2rem;
}

.home-card--col2 {
	grid-column: span 2;
}

.home-card--row3 {
	grid-row: span 3;
}

.home-card--row4 {
	grid-row: span 4;
}

.home-card--row8 {
	grid-row: span 8 / auto;
}

.home-card__label {
	font-size: 0.8125rem;
	letter-spacing: 0.75px;
    text-align: center;
}

h3.home-card__header {
	margin-top: 0;
	font-size: 1rem;
}

.home-card__header a {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.home-card__header a:after {
	content: '▶';
	font-size: 0.8125rem;
}

.home-card__background {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 4px;
}

.home-card__background1 {
background: transparent;
}

.home-card__background2 {
background: transparent;
}

.home-card__background3 {
background: transparent;
}

.home-card__background4 {
background: transparent;
}

.home-card__background5 {
background: transparent;
}

.home-card__background6 {
background: transparent;
}


.home-card__background img {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	object-position: center;
	transition: transform 0.2s ease;
    filter: drop-shadow(0px 8px 0px #a5a6b5);
    filter: opacity(0.8);
}

/*
.home-card--button:hover {
    transform: scale( 1.05 );
} */

.home-card__foreground {
	position: absolute;
}

.home-card__foreground .home-card__label {
	color: #bababa;
}

.home-card__foreground .home-card__header {
	color: #fff;
}

.home-card p {
	margin-top: 0.2rem;
	font-size: 0.875rem;
}

.home-card.home-card--button {
	overflow: hidden;
        padding: 5px 5px 10px 5px;
        height: 135px;
}

.home-card--button a {
	display: flex;
	height: 100%;
	align-items: center;
	padding: 0 15px;
	background: transparent;
	color: #fff;
	font-weight: 500;
}

.home-card--button .home-card__background a {
	padding: 0;
}


/* LinkBar CSS */
ul.hbmenu {
    display: flex;
    border-bottom: 1px solid #f8f9fa;
    list-style: none;
    justify-content: space-around;
    margin: 10px 0px 10px 0px;
    background: #9b9b9b;
    padding: 5px;
    border-radius: 4px;
    color: white;
}

ul.hbmenu a {
    color: white;
}


/* content bar */
table#toc2 {
    border-radius: 4px;
    margin-left: auto;
    padding: 3px;
}
table#toc2 a {
    color: #818181;
    font-size: small;
}
table#toc2 td {
    color: #9b9b9b;
}

/* galley */
ul.gallery.mw-gallery-nolines {
    margin: 0px;
}

ul.mw-gallery-nolines li.gallerybox div.thumb {
    margin-bottom: 5px;
}

div.gallerytext {
    color: none !important;
    font-size: inherit !important;
    font-style: normal !important;
}

div.gallerytext > pre {
    margin-top: -20px !important;
    font-family: inherit;
    color: gray;
    border: none;
    background: none;
    overflow: hidden;
}

li.gallerybox div.thumb img {
    border-radius: 4px;
}

ul.mw-gallery-nolines li.gallerybox div.thumb {
    border-radius: 4px;
    box-shadow: 0 3px 6px rgb(205 205 205 / 41%);
}

/* tabber */

.tabber__tab {
    font-weight: normal;
}