Toggle search
Toggle menu
12.2K
15.1K
1.2K
216.9K
GameBrew
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.
The main server is currently down. We are running on a backup server, so editing and search functionality are temporarily disabled. Please check back in a few hours.

MediaWiki:Citizen.css

MediaWiki interface page
More actions
Revision as of 01:52, 5 July 2024 by HydeWing (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* All CSS here will be loaded for users of the Citizen skin */

/*Main Section*/
h1.home-header__title, p.home-header__subtitle {
    text-align: center;
    font-size: 2.00rem;
}

td#home-card-discord > a{
    color: #fff;
}

.citizen-body img {
    max-width: 100%;
    height: auto;
}

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

#siteSub {
display: none;
}


/* Menu */
.mw-portlet-External {
	margin-top: var( --space-md );
    padding-top: var( --space-sm );
	border-top: 1px solid var( --border-color-base );
	font-size: 0.8125rem;
	grid-column: 1 / -1;
	white-space: nowrap;
}

.mw-portlet-External .citizen-menu__heading {
	display: none;
}

.mw-portlet-External ul {
	display: flex;
	overflow: auto;
}

.mw-portlet-External .mw-list-item a {
	gap: 0;
}

:root {
    font-size: 14px;
    --width-layout: 1320px;
    --line-height: 1.5;
    --border-radius--small: 2px;
    --border-radius--medium: 4px;
    --border-radius--large: 8px;
    --color-primary__h: 214;
    --color-primary__s: 55%;
    --color-primary__l: 60%;
    --color-base: #474b4fde;
    --color-base--emphasized: #202122f2;
    --width-toc: 230px;
}

/* gallerybox stuff */
li.gallerybox{
    position: relative;
    padding: 0px 0px 25px 0px;
    border-radius: 4px;
    box-shadow: none;
    margin-bottom: 5px;
    font-weight: 500;
}

li.gallerybox div.thumb img {
    border-radius: var(--border-radius--medium);
    opacity: 0.95;
    background: var(--color-surface-3);
}

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: -18px !important;
    margin-bottom: -10px !important;
    font-family: inherit;
    color: #808080cf;
    border: none;
    background: none;
    overflow: hidden;
}

div.gallerytext > p {
    margin: var(--space-xxs) 0;
}


/* fix the boxes arr */
.pc li.gallerybox div.thumb img {
    min-width: 295px;
    object-fit: fill;
    min-height: 225px;
}

/* box center */
.pc ul.mw-gallery-nolines li.gallerybox div.thumb {
    max-height: 225px;
    display: flex;
    align-items: center;
    background: var(--color-surface-3);
}

/* Infobox section */
@media screen and (max-width: 720px) {
table.infobox {
    display: inline-table !important;
    }
}

.citizen-body ul {
    margin: 0.5rem 0 0.5rem 1.5rem;
}

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;
    border-spacing: 0;
    box-shadow: var(--box-shadow-dialog);
    font-size: 0.825rem;
    border-radius: var(--border-radius--large);
}


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%;
    border-top: 1px solid;
    border-color: var(--border-color-base);
    margin-top: 15px;
    color: var(--color-base--emphasized);
    font-size: 1rem;
}

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

th.infobox-label {
    width: 40%;
    text-align: left;
    padding: 0px 12px 0px 12px;
}

td.infobox-data {
    text-align: left;    
}

/* LinkBar CSS */
.hbmenu {
    list-style: none;
    text-align: center;
    margin: auto !important;
}

.hbmenu > li {
    display: inline-flex;
    text-align: center;
    background: var(--color-primary);
    padding: 5px 10px 5px 10px;
    margin-right: 0px;
    margin-bottom: 5px;
    border-radius: 0 4px 4px 0;
    box-shadow: none;
    font-weight: 300;
    border-radius: var(--border-radius--medium);
}
.hbmenu > li:hover {
    background: var(--color-primary--hover);
    text-decoration: none;
}
         
.hbmenu > li > a {
    color: aliceblue !important;
}

/*toc bar*/
table#toc2 {
    width: auto;
    margin-left: auto;
    color: transparent;
    background: hsl(214deg 45.83% 28.18% / 47%);
    border-radius: var(--border-radius--medium);
    text-align: center;
    margin-bottom: 5px;
    margin-top: 10px;
    padding: 0 5px 0 5px;
}

table#toc2 a {
    color: aliceblue;
    font-size: smaller;
    font-weight: 300;
}

/* Main Page Browser Homebrews Section*/
ul.small-block-grid-2.large-block-grid-4 {
    display: inline-flex;
    list-style: none;
}


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

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

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

.home-card {
	position: relative;
	padding: 3px;
    box-shadow: none;
	font-size: 0.875rem;
	border-radius: 4px;
}



/*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 {
	color: var(--color-base--subtle);
	font-size: 0.8125rem;
	letter-spacing: 0.75px;
    text-align: center;
    font-weight: 600;
}

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: rgb(159 157 213);
opacity: 0.91;
}

.home-card__background2 {
background: rgb(155 202 225);
opacity: 0.91;
}

.home-card__background3 {
background: rgb(235 189 195);
opacity: 0.91;
}

.home-card__background4 {
background: rgb(148 207 161);
opacity: 0.91;
}

.home-card__background5 {
background: rgb(119 177 221);
opacity: 0.91;
}

.home-card__background6 {
background: rgb(98 157 161);
opacity: 0.91;
}

.home-card__background7 {
background: rgb(182 174 192);
opacity: 0.91;
}

.home-card__background img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 0.2s ease;
    margin: 0px !important;
}

/*.home-card:hover .home-card__background img {
	transform: scale( 1.1 );
}*/

.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: 100px;
}

.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;
}

.home-link {
	display: grid;
	margin-top: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	grid-gap: 6px;
	text-align: center;
}

.home-link__button {
	display: flex;
}

.home-link__button a {
	flex-grow: 1;
	padding: 0.3rem 0.6rem;
	border: 1px solid;
	border-color: var( --border-color-base );
	background: var( --background-color-framed );
	border-radius: 4px;
	color: var( --color-base--emphasized );
}

.home-link__button a:hover {
	background: var( --background-color-framed--hover );
}

.home-link__button a:active {
	background: var( --background-color-framed--active );
}

#home-content {
	margin-top: 1.6rem;
}

.home-stats {
	flex-grow: 1;
	line-height: 1;
}

.home-stats__value {
	font-size: 1.0rem;
	font-weight: 600;
}

.home-stats__unit {
	margin-top: 0.2rem;
	color: var( --color-base--subtle );
	font-size: 0.8125rem;
}

#home-card-discord {
	background: #5865f2;
        border-radius: var(--border-radius--medium);
}

#home-card-patreon {
	background: #ff424d;
}

#home-card-reddit {
	background: #ff4500;
}

#home-card-discord a,
#home-card-patreon a,
#home-card-reddit a {
	justify-content: center;
}

#home-card-discord img,
#home-card-patreon img,
#home-card-reddit img {
	transition: transform 0.2s ease;
}

#home-card-discord:hover img,
#home-card-patreon:hover img,
#home-card-reddit:hover img {
	transform: scale( 1.1 );
}

.home-footer {
	font-size: 0.8125rem;
	font-family: inherit;
	text-align: center;
}

#home-card-editor {
    margin-top: 5px;
}

.home-header__title {
	margin-top: 0;
	font-size: 1.5rem;
}

.home-header .home-header__subtitle {
	margin-top: 0.4rem;
	color: var( --color-base--subtle );
	font-size: 0.875rem;
}

.home-header__search {
	max-width: 600px;
	padding: 0.6rem 0.8rem;
	margin: 0.8rem auto 0 auto;
	background: none;
	border-radius: none;
	box-shadow: none;
	color: none;
	font-size: 0.875rem;
        text-align: center;
}

.home-header__searchIcon img {
	margin-right: 0.5rem;
    opacity: var( --opacity-icon-base );
}

.keyboard-text {
	padding: 0 5px;
	border: 1px solid;
	margin: 0 2px;
	border-radius: 4px;
}

/*
html.skin-citizen-dark .home-header__searchIcon img {
	filter: invert( 1 );
}

*/

@media ( min-width: 682px ) {
	.home-header {
		text-align: center;
	}
}

@media ( hover: none ) {
	.desktoponly {
		display: none;
	}
}


/* Cargo temp fix and the fog*/
.datatable table.dataTable {
    display: inline-block;
    overflow: auto;
}

table.dataTable.row-border tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th, table.dataTable.display tbody tr:first-child td {
    width: var(--width-layout);
}

.citizen-overflow--left.citizen-overflow--right {
    -webkit-mask-image: none;
}
.citizen-overflow--left {
    -webkit-mask-image: none;
}
.citizen-overflow--right {
    -webkit-mask-image: none;
}

.tabber__header--prev-visible .tabber__tabs {
    -webkit-mask-image: none;
}
.tabber__header--next-visible .tabber__tabs {
    -webkit-mask-image: none;
}
.tabber__header--prev-visible.tabber__header--next-visible .tabber__tabs {
    -webkit-mask-image: none;
}   

.tabber__tab {
    padding: 0.5em 0.55em;
    font-weight: 400;
}

.tabber__panel {
    padding-top: 5px;
}

.tabber__header {
    box-shadow: inset 0 -1px 0 0 #a2a9b163;
}

/* Cargo Table Css*/

table.dataTable {
    border-radius: var(--border-radius--medium);
    border: none;
}


table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
    border-top-color: var(--border-color-base);
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    padding: 6px 10px;
    background: transparent;
}

/* table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
   background-color: var(--color-surface-3);
} */

table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: transparent;
}

table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
background-color: transparent;
}

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

tr.even:hover, tr.odd:hover {
    background-color:var(--background-color-quiet--hover) !important;
}

table.dataTable, table.dataTable th, table.dataTable td {
    text-align: left;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: var(--color-base--subtle);
    font-weight: 500;
}

table.dataTable tbody th, table.dataTable tbody td {
    padding: 6px 10px;
}

/*table border top and bottom*/
table.dataTable tfoot th, table.dataTable tfoot td {
    display: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--color-base--subtle);
}

table.dataTable thead th, table.dataTable thead td {
    padding: 5px 10px;
}

/*input box margin fix*/
.dataTables_wrapper .dataTables_filter input {
    margin-bottom: 8px;
}

/*button page*/
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #ededed9e;
    border-radius: 4px;
    border: none;
}

input, select, textarea {
    padding: 5px;
    border-radius: var(--border-radius--medium);
}

/*Footer*/

#footer-sitetitle {
   margin: none !important;
}

#footer-bottom {
   margin-top: none !important;
}

/*Main*/
.heading-main1{
 border: none;
 background-image: repeating-linear-gradient(260deg,#7a00d385 0%,#8700ed8c 20%,#6516e199 30%,#199cdda3 80%,#006ed782 100%);
 border-radius: var(--border-radius--medium);
 padding: 5px;
 font-weight:600;
 text-align: center;
 color: aliceblue;
}

/*Table CSS*/
td, th {
    padding: 4px 1px 4px 1px;
}

tr:hover {
background-color:var(--background-color-quiet--hover)
}


/*link text*/
a {
    color: var(--color-link);
}


/*hide heading ^*/
.citizen-sections-enabled .citizen-section-indicator {
    display: none;
}


/*wikitable fix*/
table.wikitable tr th {
    background-color: var(--color-surface-2--active);
    text-align: center;
    vertical-align: middle;
}

table.wikitable tr th, table.wikitable tr td {
    padding: 5px 8px 5px 8px;
    border: 1px solid var(--border-color-base);
}

table.wikitable {
    max-width: -webkit-fill-available;

}

/*apptable*/
table.apptable tr th, table.apptable tr td {
border: 1px solid var(--border-color-base);
padding: 2px 4px;
}

table.apptable tr th {
background-color: rgb(207 221 236 / 10%);
}


/*Ads*/
div#mw-content-text-auto-1, #mw-content-text-auto-2, #mw-content-text-auto-3, #mw-content-text-auto-4, #mw-content-text-auto-5, #mw-content-text-auto-6, #mw-content-text-auto-7, #mw-content-text-auto-8, #mw-content-text-auto-9, #mw-content-text-auto-10, #mw-content-text-auto-11, #mw-content-text-auto-12, #mw-content-text-auto-13, #mw-content-text-auto-14, #mw-content-text-auto-15, #mw-content-text-auto-16, #mw-content-text-auto-17, #mw-content-text-auto-18, #mw-content-text-auto-19, #mw-content-text-auto-20 {
    width: 337px;
}

/*div#anchorTop-DesktopIpad {
    width: 900px !important;
    right: 500px;
    background-color: transparent !important;
}

header.mw-body-header {
    height: auto;
}*/

div#anchorBottom {
    background-color: transparent !important;
}

div#stickyTopBanner {
    left: 50%;
    position: fixed !important;
    top: 5%;
    z-index: 9999;
    transform: translate(-50%, -50%);
}

/*Heading Fix*/
h2.citizen-section-heading {
/*    display: block !important; */
    border-bottom: 1px solid #9f9f9f3d;
}

/*image*/
.citizen-body img {
    margin: 3px;
}

@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 


/*anchorbottom*/
#anchorBottom {
    z-index: 0 !important;
}

/*REad More

.ra-read-more {
    max-width: var(--width-layout);
    margin-left: auto;
    margin-right: auto;
    padding-right: var(--width-toc);
}

.ra-read-more h2 {
    max-width: var(--width-layout);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--width-toc);
}
*/

/*footer...*/
.citizen-footer__container {
    max-width: var(--width-layout);
    margin-right: auto !important;
    margin-left: auto !important;
}

/*footer & ads*/
.citizen-footer, #siteNotice, #anchorTop-DesktopIpad {
    padding-right: var(--width-toc);
}


/*.citizen-body-header--sticky .mw-body-header {
    height: 60px;
}*/

/*Remove sticking heading
.citizen-body-header--sticky .firstHeading {
display: none;
}

.firstHeading-container {
    display: unset;
}*/
 
}/* End here*/

/*Mobile*/
@media screen and (max-device-width: 480px) and (orientation: portrait){
  div#mw-category-media > ul {
    margin: 0 !important;
    padding: none;
    text-align: center;
}

.citizen-body-header--sticky .mw-body-header {
    position: relative !important;
}

#sidebar-sticky {
display:none;
}

table.infobox {
width: 100%;
max-width: 400px;
}

.citizen-search-box.citizen-search__card.citizen-menu-checkbox-target {
top:60px;
}

}

@media screen and (min-width: 1300px) {
.toc {
   margin: 15px 0px;
}

}

/*bigger logo*/
@media screen and (min-width: 720px) {
 .citizen-drawer__logo img {
    height: 7rem;
}
}

.citizen-drawer__logo img {
    height: 5rem;
    padding-right: 5px;
}


/* left side bar */
@media screen and (min-width: 1000px) {
.citizen-header {
    background-color: #ffffff00;
    border-right: none;
    padding: var(--space-md);
}

#siteNotice, .mw-body, .parsoid-body, .citizen-footer, #mw-data-after-content {
    margin-left: calc(1.0 * var(--space-unit));
    margin-right: calc(3.0 * var(--space-unit));
    background: none;
}

div#siteNotice {
    margin-left: 200px;
}

/*.citizen-header__button {
    height: auto;
}

html {
--header-size: 160px;
}

#citizen-pref-toggle:after, #citizen-personalMenu__buttonCheckbox:after, .citizen-header__buttonIcon, .citizen-header__button--icon:after {
width: 20px;
height: 50px;
}*/

/*Remove all article ads on desktop*/
#mw-content-text-autowrap-1, #mw-content-text-autowrap-2, #mw-content-text-autowrap-3, #mw-content-text-autowrap-4, #mw-content-text-autowrap-5, #mw-content-text-autowrap-6, #mw-content-text-autowrap-7, #mw-content-text-autowrap-8, #mw-content-text-autowrap-9, #mw-content-text-autowrap-10, #mw-content-text-autowrap-11, #mw-content-text-autowrap-12, #mw-content-text-autowrap-13, #mw-content-text-autowrap-14, #mw-content-text-autowrap-15, #mw-content-text-autowrap-16, #mw-content-text-autowrap-17, #mw-content-text-autowrap-18, #mw-content-text-autowrap-19, #mw-content-text-autowrap-20 {
    display: none;
}

}


/* obsolete box */
table.metadata.plainlinks.ambox.ambox-content {
    background: var(--color-surface-2);
    border: 1px solid var(--color-surface-3);
    color: var(--color-base--subtle);
    margin-bottom: var(--space-xs);
}

/* Warning box */
table.plainlinks.ombox.ombox-notice {
    border: 1px solid var(--color-surface-3);
    background: var(--color-surface-2);
    color: var(--color-base--subtle);
    margin-bottom: var(--space-xs);
}

div#small-banner-top {
    padding-left: 20px;
}

/* fix for update 2022 Dec */
.wikiEditor-ui .wikiEditor-ui-top:before {
    background-color: transparent;
}

.citizen-header__logo {
    display: none;
    border-bottom: none;
}

.citizen-body-header--sticky .mw-body-header:before {
    background-color: var(--color-surface-0);
}

h1, h2 {
    margin-top: 1.50rem;
    font-weight: 600;
}

th.infobox-title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
}

pre, code, .mw-code {
    color: var(--color-base--subtle);
    overflow-wrap: break-word;
    background-color: var(--color-surface-3);
    border-radius: var(--border-radius--medium);
}

pre, .mw-code {
    line-height: 1.4;
}

code {
    padding: 1px 4px;
}

/*Video stick to the bottom screen*/
#video-nc-wrap > div[style] {
    bottom: 0px !important;
}

/*toc icon box 1360*/

.citizen-body-container {
    padding: var(--space-sm);
}

@media screen and (min-width: 1000px) {
.citizen-page-container {
    margin-left: 170px;
}

.citizen-body-header--sticky, .citizen-toc__card {
   
}


/*Video*/
#outstream-video {
left: 0px !important;
}

.na-float-closer {
    right: 5px !important;
}

}


@media screen and (max-width: 999px) {
.citizen-toc {
    bottom: 28%;
}
.citizen-toc__card {
    max-height: calc(var(--header-card-maxheight) - 8rem);
}
}


/* message image */
td.mbox-image {
    width: 50px;
}

/*Amazon*/
span.amzn-native-header-text {
display: block !important;
margin: 0;
margin-top: 0.80em !important;
margin-bottom: 0.25em;
color: var(--color-base--emphasized);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-xs);
font-size: var(--font-size-h2) !important;
border-bottom: 1px solid #9f9f9f3d !important;
font-family: var(--font-family-base) !important;
}

/*Ads-InfoboxTop*/
#Ads-InfoboxTop {
float: right;
padding-left: 5px;
padding-right: 10px;
}

div#sidebar-sticky {
    top: 30px;
    position: relative;
}


/*Ad Detect*/
#PCWdxREDZvfyLOVE {
display: none !important;
margin-bottom: -30px;
padding: 30px;
text-align: center;
border-radius: 5px;
font-size: small;
border-radius: var(--border-radius--large);
background: var(--color-surface-2);
border-spacing: 0;
}
Retrieved from "https://www.gamebrew.org/index.php?title=MediaWiki:Citizen.css&oldid=175386"

Advertising: