MediaWiki:Mobile.css: Difference between revisions

From Tardis Wiki, the free Doctor Who reference
m (Temporary)
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 39: Line 39:
.skin-citizen-dark > body {
.skin-citizen-dark > body {
     background: var(--primary-2);
     background: var(--primary-2);
    color: var(--text-color);
}
}
.skin-citizen-light > body {
.skin-citizen-light > body {
Line 52: Line 53:
     /* background: var(--background-color-primary--active); */
     /* background: var(--background-color-primary--active); */
     background: var(--primary-3);
     background: var(--primary-3);
     top: 200;
     top: 0;
     bottom: auto;
     bottom: auto;
}
}

Revision as of 04:48, 21 February 2024

/* All CSS here will be loaded for users of the mobile site */

/* Imports: */
@import url("https://tardis.wiki/w/load.php?modules=ext.gadget.infoboxes&only=styles"); /* import infoboxes stylesheet */
@import url("https://tardis.wiki/w/load.php?modules=ext.gadget.modularStyles&only=styles"); /* import all other split-out stylesheet */

/* Variable definitions - used by imported stylsheets, taken from desktop */
:root.skin-citizen-dark {
	--text-color: #ffffff;
	--primary-1: #0e2348;
	--primary-2: #0f2651;
	--primary-3: #1a2e53;
	--primary-4: #0a1b3c;
	--accent-1: #c7b286;
	--accent-2: #d5ac59;
	--accent-3: #bfa773;
	--accent-4: #e5c076;
	--alt-text-color: #000000;
	--contrast-color-1: #e6e6e6;
	--contrast-color-1--rgb: 230,230,230;
}
:root.skin-citizen-light {
	--text-color: #0e191a;
	--primary-1: #fff4ef;
	--primary-2: #90a2bf;
	--primary-3: #4f6087;
	--primary-4: #bec9da;
	--accent-1: #556375;
	--accent-2: #47639E;
	--accent-3: #46619b;
	--accent-4: #334671;
	--alt-text-color: #ffffff;
	--contrast-color-1: #e6e6e6;
	--contrast-color-1--rgb: 230,230,230;
}

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

.skin-citizen-dark > body {
    background: var(--primary-2);
    color: var(--text-color);
}
.skin-citizen-light > body {
	background: var(--primary-1);
	color: var(--text-color);
}

.mw-parser-output p {
    font-size: 15.7px;
}

.citizen-header {
    /* background: var(--background-color-primary--active); */
    background: var(--primary-3);
    top: 0;
    bottom: auto;
}
.skin-citizen-light .citizen-header {
    background: var(--accent-2);
}
.citizen-scroll--down .citizen-header {
    transform: translateY(-100%);
}

.citizen-header__logo .mw-logo-icon {
    width: 60px;
    height: 50px;
    position: relative;
    top: -5px;
    left: -1px;
}
.citizen-header__button {
    width: 50px;
    contain: layout;
}

.citizen-body-header--sticky .mw-body-header {
    top: 33px;
    max-height: 20px;
    transform: translateY(66%);
}
.citizen-body-header--sticky .mw-body-header::before {
    background: var(--background-color-primary--hover);
}
.citizen-body-header--sticky .mw-body-header .mw-first-heading {
    color: var(--text-color)!important;
}

.skin-citizen-light .citizen-body-header--sticky .mw-body-header::before {
    background: var(--accent-3);
}
.skin-citizen-light .citizen-body-header--sticky .mw-body-header .mw-first-heading {
    color: white!important;
}


.citizen-body-container .pullout-wrapper {
    display: none;
}
.citizen-body-container .subpage-tabs-main {
    border-collapse: collapse;
    border: none;
    background: none;
}
.citizen-body-container .subpage-tabs-main tr {
    display: flex;
    flex-wrap: wrap;
}

.citizen-body-container .subpage-tabs-tab {
    font-size: .97em;
    width: 32.6%!important;
    border: 3px solid white !important;
    margin-right: 2.6px;
    margin-bottom: 3px;
    padding: 9px 0px !important;
}

div#article-type { 
    border:1px solid var(--accent-2);
    padding:5px;
    letter-spacing:.5px;
    text-align:left;
    min-height:55px;
    min-width: 528.5px;
    margin:0px 0px 10px 0px;
}   
div#article-type p {
    margin-left:205px;
    line-height:11px;
    font-size:11px;
    text-align:left;
    font-weight:normal;
    font-style:normal;
}

/* +++++++++++++++++++
   Various article types
   +++++++++++++++++++ */

div#type-title {
    margin-left:205px;
    font-size:18pt;
    line-height:16pt;
}
div.type-spoiler {
    background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/7/7f/Spoiler200px.jpg) no-repeat;
    z-index:5;
}

.mobile-no-display {
	display: none;
}

.mainpage .gallerybox img {
    width: auto;
    margin: 0!important;
}
.mainpage-box-characters {
    width: 458px;
    margin-left: -5px;
}
.citizen-body-container .mainpage-box-characters .gallerytext {
    left: -55px;
    top: -15px;
}