MediaWiki:FandomMobile.css/Archive: Difference between revisions
From Tardis Wiki, the free Doctor Who reference
Bongolium500 (talk | contribs) No edit summary |
m (SOTO moved page MediaWiki:FandomMobile.css to MediaWiki:FandomMobile.css/Archive) Tags: Mobile edit Mobile web edit |
||
(20 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; | |||
} | |||
/* ======================= | /* ======================= | ||
Line 15: | Line 35: | ||
border: 2px solid var(--theme-accent-color); | border: 2px solid var(--theme-accent-color); | ||
font-size: 90%; | font-size: 90%; | ||
} | |||
.mobile-no-display { | |||
display: none; | |||
} | } | ||
Line 64: | 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 78: | Line 112: | ||
div#stub-type { | div#stub-type { | ||
float:left; | float:left; | ||
margin-right: | margin-right:15px; /*different to desktop*/ | ||
margin-top:5px; | 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; | |||
} | } |
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;
}