MediaWiki:FandomMobile.css/Archive: Difference between revisions

From Tardis Wiki, the free Doctor Who reference
No edit summary
Tags: Mobile edit Mobile web edit
 
(21 intermediate revisions by one other user not shown)
Line 2: Line 2:


Notes:
Notes:
-common.css does not load on mobile
-common.css does not load on mobile
-inline CSS does not load on mobile
-inline CSS does not load on mobile
*/
*/
/*  ===================
    CSS IMPORTS
    ===================
    These imports must be above
    everything else in order to work
    =================== */
@import url("/load.php?debug=false&&allinone=0&lang=en&mode=articles&articles=MediaWiki:TardisAdmin.css|MediaWiki:Familytree.css&only=styles");
/* variable definitions */
:root .theme-fandommobile-dark {
--bright-accent-color: #e5c076;
--bright-accent-color--rgb: 229,192,118;
}
:root .theme-fandommobile-light {
--bright-accent-color: #012c57;
--bright-accent-color--rgb: 1,44,87;
}
/*  =======================
    Classes specific to
    mobile CSS
    ======================= */
.context-link {
clear:left;
border: 2px solid var(--theme-accent-color);
font-size: 90%;
}
.mobile-no-display {
display: none;
}




Line 54: Line 87:
     background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/7/7f/Spoiler200px.jpg) no-repeat;
     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;
     z-index:5;
}
/* boxes */
.error, #error,
#tech, .tech  {
    border: 1px solid var(--theme-accent-color);
    padding:10px;
    margin-top:25px;
    margin-bottom:25px;
    font-size:95%;
}
}


Line 68: Line 112:
div#stub-type {
div#stub-type {
     float:left;
     float:left;
     margin-right:17px;
     margin-right:15px; /*different to desktop*/
     margin-top:5px;
     margin-top:5px;
    clear:right;
}
}
.stub-type + .stub-type + .stub-type,
 
#stub-type + .stub-type + .stub-type,
 
#stub-type + #stub-type + .stub-type,
/*  ================
#stub-type + #stub-type + #stub-type,
    Template documentation
#stub-type + .stub-type + #stub-type,
    ================ */
.stub-type + #stub-type + .stub-type,
.documentation .description .wds-is-hidden {
.stub-type + #stub-type + #stub-type,
    display: initial !important;
.stub-type + .stub-type + #stub-type {
}
clear:left;
 
/*  =======================
    RED AND YELLOW CELLS
    =======================
   
While MAINLY just used over at [[List of Doctor Who television stories]],
these cells have also found use for pointing out different mediums,
like novels and anthologies, as seen on [[Bernice Summerfield (series)]]. */
 
table.wikitable .row-red td,
div#block.row-red {
  background: #b53f3a; /* #b1312c */
  color:#fff;
}
.theme-fandomdesktop-light table.wikitable .row-red td,
.theme-fandomdesktop-light div#block.row-red {
  background: #f4bbb9;
  color: inherit;
}
table.wikitable .row-red td a,
table.wikitable .row-red td a.link,
table.wikitable .row-red td a.visited,
div#block.row-red a,
div#block.row-red a.link
div#block.row-red a.visited {
    color:#FFF;
    text-decoration:underline;
    text-decoration-color:#e3bdbd; /*This will work in MOST modern browsers.*/
}   
table.wikitable .row-yellow td,
div#block.row-yellow {
    background: #e1ae4a;
    color:#000;
}
.theme-fandomdesktop-light table.wikitable .row-yellow td,
.theme-fandomdesktop-light div#block.row-yellow {
  background: #fdd6a2;
  color: inherit;
}
table.wikitable .row-yellow td a,
table.wikitable .row-yellow td a.link,
table.wikitable .row-yellow td a.visited,
div#block.row-yellow a,  
div#block.row-yellow a.link
div#block.row-yellow a.visited,
.theme-fandomdesktop-light table.wikitable .row-red td a,
.theme-fandomdesktop-light table.wikitable .row-red td a.link,
.theme-fandomdesktop-light table.wikitable .row-red td a.visited {
    color:#000;
    text-decoration:underline;
    text-decoration-color: #543f15; /*This will work in MOST modern browsers.*/
}
/* BLUE cells */
table.wikitable .row-blue td,
div#block.row-blue {
  background: #7998D3;
  color:#000;
}
table.wikitable .row-blue td a,
table.wikitable .row-blue td a.link,
table.wikitable .row-blue td a.visited,
div#block.row-blue a,  
div#block.row-blue a.link
div#block.row-blue a.visited {
    color:#000;
    text-decoration:underline;
    text-decoration-color:#543f15; /*This will work in MOST modern browsers.*/
}
/* GREEN cells */
table.wikitable .row-green td,
div#block.row-green {
  background: #CCECC1;
  color:#000;
}
table.wikitable .row-green td a,
table.wikitable .row-green td a.link,
table.wikitable .row-green td a.visited,
div#block.row-green a,  
div#block.row-green a.link
div#block.row-green a.visited {
    color:#000;
    text-decoration:underline;
    text-decoration-color:#543f15; /*This will work in MOST modern browsers.*/
}
 
/* {{subpage tabs}} */
.subpage-tabs-main {
width: 100%;
clear: both;
text-align: center;
white-space: nowrap;
font-family: var(--theme-page-headings-font), rubik, helvetica, arial, sans-serif;
color: var(--theme-link-dynamic-color-1) !important;
}
.subpage-tabs-main tr {
display: flex;
flex-wrap: wrap;
}
.subpage-tabs-tab {
background-color: var(--bright-accent-color);
border-radius: 5px;
border: 2px solid white !important;
margin-right: 1px;
margin-bottom: 1px;
padding: 9px 0px !important;
}
.subpage-tabs-main a,
.subpage-tabs-main .mw-selflink {
color: var(--theme-link-dynamic-color-1);
padding: 10px 9px;
}
 
/* {{pullout}} */
.pullout-wrapper {
display: none;
}
 
 
/* =====================
  CSS for wip templates
  ===================== */
/* {{TriggerImage}} */
.trigger {
position: relative;
}
.trigger p.trigger-warning {
position: absolute;
width: 100%;
text-align: center;
padding: 15px 0;
z-index: 0;
}
.trigger a:not(figcaption *) {
z-index: 1;
position: relative;
border: var(--theme-accent-color) 2px solid;
}
.trigger img {
visibility: hidden;
}
 
/* [[User:Bongolium500/The Faceless Ones (TV story)/Home media]] (view at [[Tardis:Sandbox]]) */
.home-media-easytimeline-wrapper {
display: none;
}
.home-media-nav-table th {
text-align: center !important;
}
.home-media-features-table .home-media-features-table-center {
float:center;
}
.home-media-features-table .home-media-features-table-right {
float:right;
}
.compact-section-toc {
text-align: center;
word-wrap: break-word;
border: 1px solid var(--theme-accent-color);
padding: 10px;
margin-bottom: 15px;
font-size: 95%;
}
.back-box {
float: right;
border: 1px solid var(--theme-accent-color);
padding: 0.65em;
margin: 10px 10px 10px 10px;
text-align: center;
font-size: smaller;
font-weight: bold;
}
}

Latest revision as of 15:23, 5 March 2024

/* Created following Fandom's introduction of custom mobile CSS

Notes:
-common.css does not load on mobile
-inline CSS does not load on mobile
*/

/*  ===================
    CSS IMPORTS 
    ===================
    These imports must be above 
    everything else in order to work
    =================== */

@import url("/load.php?debug=false&&allinone=0&lang=en&mode=articles&articles=MediaWiki:TardisAdmin.css|MediaWiki:Familytree.css&only=styles");


/* variable definitions */
:root .theme-fandommobile-dark {
	--bright-accent-color: #e5c076;
	--bright-accent-color--rgb: 229,192,118;
}
:root .theme-fandommobile-light {
	--bright-accent-color: #012c57;
	--bright-accent-color--rgb: 1,44,87;
}


/*  =======================
    Classes specific to
    mobile CSS
    ======================= */
.context-link {
	clear:left;
	border: 2px solid var(--theme-accent-color);
	font-size: 90%;
}
.mobile-no-display {
	display: none;
}


/*  ======================
    TOP-OF-PAGE BANNERS
    which identify the type
    of article or give other
    important messages about
    the article as a whole
    =======================
    Clearly owes a debt to
    memoryalpha.fandom.com,
    who were riffin' off of
    en.wikipedia
    =======================
 
    +++++++++++++++++++++++
    Base frame
    +++++++++++++++++++++++ */
div#article-type { 
    border:1px solid var(--theme-accent-color);
    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;
}


/* boxes */
.error, #error,
#tech, .tech  {
    border: 1px solid var(--theme-accent-color);
    padding:10px;
    margin-top:25px;
    margin-bottom:25px;
    font-size:95%;
}



/*  ===============
    STUBS
    ===============
    This notion is original
    to tardis.fandom.com
    =============== */
.stub-type,
#stub-type,
div#stub-type {
    float:left;
    margin-right:15px; /*different to desktop*/
    margin-top:5px;
}


/*  ================
    Template documentation
    ================ */
.documentation .description .wds-is-hidden {
    display: initial !important;
}

/*  =======================
    RED AND YELLOW CELLS
    ======================= 
    
While MAINLY just used over at [[List of Doctor Who television stories]],
these cells have also found use for pointing out different mediums,
like novels and anthologies, as seen on [[Bernice Summerfield (series)]]. */

table.wikitable .row-red td,
div#block.row-red { 
  background: #b53f3a; /* #b1312c */
  color:#fff;
}
.theme-fandomdesktop-light table.wikitable .row-red td,
.theme-fandomdesktop-light div#block.row-red {
  background: #f4bbb9; 
  color: inherit;
}
table.wikitable .row-red td a,
table.wikitable .row-red td a.link,
table.wikitable .row-red td a.visited,
div#block.row-red a, 
div#block.row-red a.link
div#block.row-red a.visited { 
    color:#FFF;
    text-decoration:underline;
    text-decoration-color:#e3bdbd; /*This will work in MOST modern browsers.*/
}    
table.wikitable .row-yellow td,
div#block.row-yellow {
    background: #e1ae4a;
    color:#000;
}
.theme-fandomdesktop-light table.wikitable .row-yellow td,
.theme-fandomdesktop-light div#block.row-yellow {
  background: #fdd6a2; 
  color: inherit;
}
table.wikitable .row-yellow td a,
table.wikitable .row-yellow td a.link,
table.wikitable .row-yellow td a.visited,
div#block.row-yellow a, 
div#block.row-yellow a.link
div#block.row-yellow a.visited,
.theme-fandomdesktop-light table.wikitable .row-red td a,
.theme-fandomdesktop-light table.wikitable .row-red td a.link,
.theme-fandomdesktop-light table.wikitable .row-red td a.visited { 
    color:#000;
    text-decoration:underline;
    text-decoration-color: #543f15; /*This will work in MOST modern browsers.*/
}
/* BLUE cells */
table.wikitable .row-blue td,
div#block.row-blue { 
  background: #7998D3;
  color:#000;
}
table.wikitable .row-blue td a,
table.wikitable .row-blue td a.link,
table.wikitable .row-blue td a.visited,
div#block.row-blue a, 
div#block.row-blue a.link
div#block.row-blue a.visited { 
    color:#000;
    text-decoration:underline;
    text-decoration-color:#543f15; /*This will work in MOST modern browsers.*/
}
/* GREEN cells */
table.wikitable .row-green td,
div#block.row-green { 
  background: #CCECC1;
  color:#000;
}
table.wikitable .row-green td a,
table.wikitable .row-green td a.link,
table.wikitable .row-green td a.visited,
div#block.row-green a, 
div#block.row-green a.link
div#block.row-green a.visited { 
    color:#000;
    text-decoration:underline;
    text-decoration-color:#543f15; /*This will work in MOST modern browsers.*/
}

/* {{subpage tabs}} */
.subpage-tabs-main {
	width: 100%;
	clear: both;
	text-align: center;
	white-space: nowrap;
	font-family: var(--theme-page-headings-font), rubik, helvetica, arial, sans-serif;
	color: var(--theme-link-dynamic-color-1) !important;
}
.subpage-tabs-main tr {
	display: flex;
	flex-wrap: wrap;
}
.subpage-tabs-tab {
	background-color: var(--bright-accent-color);
	border-radius: 5px;
	border: 2px solid white !important;
	margin-right: 1px;
	margin-bottom: 1px;
	padding: 9px 0px !important;
}
.subpage-tabs-main a,
.subpage-tabs-main .mw-selflink {
	color: var(--theme-link-dynamic-color-1);
	padding: 10px 9px;
}

/* {{pullout}} */
.pullout-wrapper {
	display: none;
}


/* =====================
   CSS for wip templates 
   ===================== */
/* {{TriggerImage}} */
.trigger {
	position: relative;
}
.trigger p.trigger-warning {
	position: absolute;
	width: 100%;
	text-align: center;
	padding: 15px 0;
	z-index: 0;
}
.trigger a:not(figcaption *) {
	z-index: 1;
	position: relative;
	border: var(--theme-accent-color) 2px solid;
}
.trigger img {
	visibility: hidden;
}

/* [[User:Bongolium500/The Faceless Ones (TV story)/Home media]] (view at [[Tardis:Sandbox]]) */
.home-media-easytimeline-wrapper {
	display: none;
}
.home-media-nav-table th {
	text-align: center !important;
}
.home-media-features-table .home-media-features-table-center {
	float:center;
}
.home-media-features-table .home-media-features-table-right {
	float:right;
}
.compact-section-toc {
	text-align: center;
	word-wrap: break-word;
	border: 1px solid var(--theme-accent-color);
	padding: 10px;
	margin-bottom: 15px;
	font-size: 95%;
}
.back-box {
	float: right;
	border: 1px solid var(--theme-accent-color);
	padding: 0.65em;
	margin: 10px 10px 10px 10px;
	text-align: center;
	font-size: smaller;
	font-weight: bold;
}