MediaWiki:Mobile.css: Difference between revisions

From Tardis Wiki, the free Doctor Who reference
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 32: Line 32:
--accent-3: #46619b;
--accent-3: #46619b;
--accent-4: #334671;
--accent-4: #334671;
    --accent-5: #E7D9BD;
--alt-text-color: #ffffff;
--alt-text-color: #ffffff;
--contrast-color-1: #e6e6e6;
--contrast-color-1: #e6e6e6;
Line 103: Line 104:
     color: white!important;
     color: white!important;
}
}


.citizen-body-container .pullout-wrapper {
.citizen-body-container .pullout-wrapper {
Line 132: Line 132:


.skin-citizen-light .citizen-footer {
.skin-citizen-light .citizen-footer {
     background: var(--primary-4);
     background: var(--accent-5);
}
}



Revision as of 07:58, 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;
    --primary-5: #2f4065;
    --primary-6: #2c406b;
	--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: #c5d2e6;
	--accent-1: #556375;
	--accent-2: #47639E;
	--accent-3: #46619b;
	--accent-4: #334671;
    --accent-5: #E7D9BD;
	--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);
}

/* .skin-citizen-light #ca-edit {
    border-color: var(--accent-3);
}   DEAL WITH LATER */

.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-page-container #localNotice {
    margin-top: 38px;
    transition: var(--transition-menu);
    transition-property: transform;
    transform: translateY(-100%);
}     FIX LATER */

.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%);
}
.skin-citizen-dark .citizen-body-header--sticky .mw-body-header::before {
    /* background: var(--background-color-primary--hover); */
    background: var(--primary-6);
}
.skin-citizen-light .citizen-body-header--sticky .mw-body-header::before {
    background: var(--accent-3);
}
.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;
}

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

.skin-citizen-light .citizen-footer {
    background: var(--accent-5);
}

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


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