Welcome to Assassin's Creed Wiki! Log in and join the community.
MediaWiki:Mainpage.css: Difference between revisions
Jump to navigation
Jump to search
imported>DarkFeather Colorshift from Odyssey to Valhalla |
imported>Cristophorus35 No edit summary |
||
| Line 1: | Line 1: | ||
/* ================================= | /* ================================= | ||
January 2023 mainpage redesign | |||
While most of the elements here affect | While most of the elements here affect | ||
ONLY the mainpage, a few color choices | ONLY the mainpage, a few color choices | ||
following Ubisoft's current | following Ubisoft's current Mirage | ||
marketing campaign do appear on | marketing campaign do appear on | ||
every page. | every page. | ||
Most obviously, the link color matches the | Most obviously, the link color matches the | ||
Age | color palatte chosen for Mirage, based on the | ||
Islamic Golden Age as central theme, | |||
consisting in blue, tan, and dark gold. | |||
Link color: # | Link color: #ffc383 | ||
Header color: # | Header (Sticky nav) color: #6786a3 | ||
Border color: #8c5229 | |||
Font color: #FFF | |||
Main background: #6786a3 | |||
Page background: #172a38 | |||
Also, the redlink color has to be changed | Also, the redlink color has to be changed | ||
| Line 50: | Line 52: | ||
.mainpage-wrap a:visited, | .mainpage-wrap a:visited, | ||
.mainpage-wrap a:link { | .mainpage-wrap a:link { | ||
color:# | color:#e78e67!important; | ||
} | } | ||
| Line 71: | Line 73: | ||
font-family:cinzel; | font-family:cinzel; | ||
padding:.3em .2em .3em .1em; | padding:.3em .2em .3em .1em; | ||
color:# | color:#e78e67!important; | ||
font-size:14px; | font-size:14px; | ||
/* background-color:#000; */ | /* background-color:#000; */ | ||
| Line 88: | Line 90: | ||
.mainpage-box-featured-videos, | .mainpage-box-featured-videos, | ||
.mainpage-box-featured-article { | .mainpage-box-featured-article { | ||
width: | width:700px; | ||
margin:40px auto; | margin:40px auto; | ||
} | } | ||
| Line 102: | Line 104: | ||
width:80%; | width:80%; | ||
margin:0 auto 20px; | margin:0 auto 20px; | ||
/*height:300px;*/ | |||
} | } | ||
.mainpage-box-help .help-body { | .mainpage-box-help .help-body { | ||
| Line 114: | Line 117: | ||
.mainpage-box-poll, | .mainpage-box-poll, | ||
.mainpage-box-help, | .mainpage-box-help, | ||
.mainpage-box-featured-article | .mainpage-box-featured-article { | ||
border:2px solid #bb7252; | |||
padding:20px; | |||
} | |||
.mainpage-box-other-wikis { | .mainpage-box-other-wikis { | ||
border:2px solid #bb7252; | |||
padding: | padding:1px; | ||
} | } | ||
.mainpage-box-characters img { | .mainpage-box-characters img { | ||
margin-top:0!important; | margin-top:0!important; | ||
} | } | ||
.mainpage-box-buy, | .mainpage-box-buy, | ||
.mainpage-box-discord { | .mainpage-box-discord { | ||
| Line 141: | Line 146: | ||
} | } | ||
.mainpage-box-other-wikis { | .mainpage-box-other-wikis { | ||
margin: | margin:2px auto; | ||
/*text-align:center;*/ | /*text-align:center;*/ | ||
} | } | ||
| Line 195: | Line 200: | ||
letter-spacing:3px; | letter-spacing:3px; | ||
margin:0 auto; | margin:0 auto; | ||
color:# | color:#e78e67; | ||
padding-bottom:20px; | padding-bottom:20px; | ||
padding-top:10px; | padding-top:10px; | ||
| Line 225: | Line 230: | ||
font-size:26px; | font-size:26px; | ||
text-align:center; | text-align:center; | ||
color:# | color:#e78e67; | ||
text-transform:uppercase; | text-transform:uppercase; | ||
letter-spacing:2px; | letter-spacing:2px; | ||
| Line 253: | Line 258: | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-post-actions a, | .mainpage .embeddable-discussions-module .embeddable-discussions-post-actions a, | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-post-actions { | .mainpage .embeddable-discussions-module .embeddable-discussions-post-actions { | ||
border-color:# | border-color:#bb7252; | ||
color:# | color:#e78e67; | ||
} | } | ||
.mainpage .embeddable-discussions-heading { | .mainpage .embeddable-discussions-heading { | ||
| Line 260: | Line 265: | ||
} | } | ||
.mainpage .embeddable-discussions-show-all { | .mainpage .embeddable-discussions-show-all { | ||
color:# | color:#e78e67; | ||
display:none; | display:none; | ||
} | } | ||
| Line 267: | Line 272: | ||
.mainpage .embeddable-discussions-show-all a:link, | .mainpage .embeddable-discussions-show-all a:link, | ||
.mainpage .embeddable-discussions-show-all a:visited { | .mainpage .embeddable-discussions-show-all a:visited { | ||
color:# | color:#e78e67!important; | ||
} | } | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-post-detail { | .mainpage .embeddable-discussions-module .embeddable-discussions-post-detail { | ||
background-color:transparent; | background-color:transparent; | ||
border-color:# | border-color:#bb7252; | ||
} | } | ||
| Line 278: | Line 283: | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-reply-icon path, | .mainpage .embeddable-discussions-module .embeddable-discussions-reply-icon path, | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-upvote-icon path { | .mainpage .embeddable-discussions-module .embeddable-discussions-upvote-icon path { | ||
fill: # | fill: #e78e67; | ||
} | } | ||
.mainpage .embeddable-box-discussions-module .embeddable-mainpage-box-discussions-post-actions a, | .mainpage .embeddable-box-discussions-module .embeddable-mainpage-box-discussions-post-actions a, | ||
| Line 286: | Line 291: | ||
.mainpage .embeddable-mainpage-box-discussions-module .embeddable-mainpage-box-discussions-timestamp, | .mainpage .embeddable-mainpage-box-discussions-module .embeddable-mainpage-box-discussions-timestamp, | ||
.mainpage .embeddable-mainpage-box-discussions-module .embeddable-mainpage-box-discussions-forum { | .mainpage .embeddable-mainpage-box-discussions-module .embeddable-mainpage-box-discussions-forum { | ||
color:# | color:#e78e67; | ||
} | } | ||
| Line 310: | Line 315: | ||
} | } | ||
.mainpage .tabs .selected a { | .mainpage .tabs .selected a { | ||
border-color:# | border-color:#bb7252; | ||
border-radius:0; | border-radius:0; | ||
color:# | color:#e78e67; | ||
} | } | ||
.mainpage ul.tabs { | .mainpage ul.tabs { | ||
| Line 320: | Line 325: | ||
input.createboxInput { | input.createboxInput { | ||
background:transparent; | background:transparent; | ||
border-color:# | border-color:#bb7252; | ||
color:# | color:#e78e67; | ||
margin-left:0; | margin-left:0; | ||
} | } | ||
| Line 336: | Line 341: | ||
text-transform:uppercase; | text-transform:uppercase; | ||
background-color:transparent; | background-color:transparent; | ||
border-color:# | border-color:#bb7252; | ||
color:# | color:#e78e67; | ||
} | } | ||
Revision as of 05:06, 15 January 2023
/* =================================
January 2023 mainpage redesign
While most of the elements here affect
ONLY the mainpage, a few color choices
following Ubisoft's current Mirage
marketing campaign do appear on
every page.
Most obviously, the link color matches the
color palatte chosen for Mirage, based on the
Islamic Golden Age as central theme,
consisting in blue, tan, and dark gold.
Link color: #ffc383
Header (Sticky nav) color: #6786a3
Border color: #8c5229
Font color: #FFF
Main background: #6786a3
Page background: #172a38
Also, the redlink color has to be changed
because this is a dark-themed wiki. Standard
red color would have very low contrast with
the black background. A red (well, really, salmon)
of #ffb7b7 makes things more readable on this wiki.
Similarly, the general transparency of pages has
been dialed back to about 45% for reasons of general
legibility for those with different visual acuities.
Now that the background is a lighter grey, it's
transparency makes pages considerably lighter, so
it needs to be turned down a bit to preserve the
previous levels of legibility, given that the text
is generally white.
================================= */
/* General redlink color */
.WikiaMainContent a.new,
.WikiaMainContent a.new:visited {
color:#ffb7b7!important;
}
/** General mainpage qualities **/
.mainpage-wrap {
font-family:rubik,sans-serif;
}
.mainpage-wrap a,
.mainpage-wrap a.new,
.mainpage-wrap a.new:visited,
.mainpage-wrap a:visited,
.mainpage-wrap a:link {
color:#e78e67!important;
}
.mainpage ficaption p.title,
.mainpage .article-thumb figcaption {
display:none;
margin-left:10px;
}
.mainpage-wrap .wikia-gallery-caption-within .lightbox-caption a.new:visited,
.mainpage-wrap .wikia-gallery-caption-within .lightbox-caption a.new,
.mainpage-wrap .wikia-gallery-caption-within .lightbox-caption a:visited,
.mainpage-wrap .wikia-gallery-caption-within .lightbox-caption a:link,
.mainpage-wrap .wikia-gallery-caption-within .lightbox-caption,
.mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a:visited,
.mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a:link,
.mainpage-wrap .wikia-gallery-caption-below .lightbox-caption {
letter-spacing:1px;
font-weight:600;
line-height:150%;
font-family:cinzel;
padding:.3em .2em .3em .1em;
color:#e78e67!important;
font-size:14px;
/* background-color:#000; */
}
.mainpage .lightbox-caption {
}
.mainpage .WikiaArticle a.external:after {
display:none;
}
/** Modules **/
.mainpage-box-about,
.mainpage-box-visit,
.mainpage-box-welcome,
.mainpage-box-characters,
.mainpage-box-help,
.mainpage-box-featured-videos,
.mainpage-box-featured-article {
width:700px;
margin:40px auto;
}
.mainpage-box-featured-videos {
width:670px;
}
.mainpage-box-about {
margin-top:0px;
}
.mainpage-box-visit .visit-body {
line-height:200%;
font-size:14px;
width:80%;
margin:0 auto 20px;
/*height:300px;*/
}
.mainpage-box-help .help-body {
font-size:14px;
line-height:140%;
}
.mainpage-box-characters,
.mainpage-box-visit,
.mainpage-box-forum,
.mainpage-box-discussions,
.mainpage-box-news,
.mainpage-box-poll,
.mainpage-box-help,
.mainpage-box-featured-article {
border:2px solid #bb7252;
padding:20px;
}
.mainpage-box-other-wikis {
border:2px solid #bb7252;
padding:1px;
}
.mainpage-box-characters img {
margin-top:0!important;
}
.mainpage-box-buy,
.mainpage-box-discord {
margin-bottom:20px;
margin-top:20px;
}
.mainpage-box-discussions {
margin:20px 0;
padding-left: 5px;
padding-right: 5px;
}
.mainpage-box-forum,
.mainpage-box-discussions,
.mainpage-box-news,
.mainpage-box-poll {
margin-bottom:20px;
max-width:285px;
}
.mainpage-box-other-wikis {
margin:2px auto;
/*text-align:center;*/
}
/* External template wrangling
Because the Action-Adventure Games
template resides on Community Central
and not this wiki, a whole lot of
!importanting is required. */
.mainpage-box-other-wikis > div {
border-radius:0!important;
border:0!important;
width:inherit!important;
box-shadow:none!important;
background-color:transparent!important;
margin:0!important;
padding:0!important;
}
.mainpage-box-other-wikis > div a,
.mainpage-box-other-wikis > div a:visited {
color:#fff;
}
.mainpage-box-other-wikis div {
width:265px!important;
text-align:left!important;
}
.mainpage-box-other-wikis > img {
display:block!important;
}
.mainpage-box-other-wikis p + div,
.mainpage-box-other-wikis p > div,
.mainpage-box-other-wikis .image .image-thumbnail .link-external {
display:none;
}
/*.mainpage-box-other-wikis .WikiaArticle p + p */
.mainpage-box-other-wikis p + p {
font-size:13px!important;
line-height:160%!important;
}
/** Headers, in general **/
.mainpage-box-about .header,
.mainpage-box-visit .header,
.mainpage-box-characters .header,
.mainpage-box-help .header,
.mainpage-box-featured-article .header,
.mainpage-box-featured-videos .header {
text-align:center;
font-size:38px;
text-transform:uppercase;
font-family: "Cinzel";
letter-spacing:3px;
margin:0 auto;
color:#e78e67;
padding-bottom:20px;
padding-top:10px;
line-height:130%;
}
.mainpage-box-about .header {
padding:0;
}
.mainpage-box-about .subheader {
font-size:16px;
line-height:150%;
width:600px;
margin:0 auto;
text-align:center;
font-family:cinzel;
}
.mainpage-box-about .description {
width:600px;
padding:20px 0 20px 0;
line-height:150%;
margin:0 auto;
text-align:center;
font-family:cinzel;
}
.mainpage-box-discussions .header,
.mainpage-box-news .header,
.mainpage-box-poll .main-header,
.mainpage-box-forum .header {
font-size:26px;
text-align:center;
color:#e78e67;
text-transform:uppercase;
letter-spacing:2px;
font-family: "Cinzel";
line-height:130%;
}
.mainpage-box-forum .header,
.mainpage-box-news .header {
margin-bottom:20px;
}
/* Forum module */
.mainpage .mw-content-ltr .forum-activity-module h2 {
display:none;
}
/* Discussions module */
.mainpage .discussion-module {
display:none /* Turns off standard module to give deference to the bespoke one here */
}
.mainpage .embeddable-discussions-module {
border:none;
padding:5px;
}
.mainpage .embeddable-discussions-module .embeddable-discussions-post-detail {
/*background-color:#bac3cd;*/
}
.mainpage .embeddable-discussions-module .embeddable-discussions-post-actions a,
.mainpage .embeddable-discussions-module .embeddable-discussions-post-actions {
border-color:#bb7252;
color:#e78e67;
}
.mainpage .embeddable-discussions-heading {
display:none;
}
.mainpage .embeddable-discussions-show-all {
color:#e78e67;
display:none;
}
.mainpage .embeddable-discussions-show-all a,
.mainpage .embeddable-discussions-show-all a:link,
.mainpage .embeddable-discussions-show-all a:visited {
color:#e78e67!important;
}
.mainpage .embeddable-discussions-module .embeddable-discussions-post-detail {
background-color:transparent;
border-color:#bb7252;
}
.mainpage .embeddable-discussions-module .embeddable-discussions-reply-icon-tiny path,
.mainpage .embeddable-discussions-module .embeddable-discussions-upvote-icon-tiny path,
.mainpage .embeddable-discussions-module .embeddable-discussions-reply-icon path,
.mainpage .embeddable-discussions-module .embeddable-discussions-upvote-icon path {
fill: #e78e67;
}
.mainpage .embeddable-box-discussions-module .embeddable-mainpage-box-discussions-post-actions a,
.mainpage .embeddable-mainpage-box-discussions-module .embeddable-mainpage-box-discussions-post-counters,
.mainpage .embeddable-mainpage-box-discussions-module .avatar-details,
.mainpage a.avatar-username,
.mainpage .embeddable-mainpage-box-discussions-module .embeddable-mainpage-box-discussions-timestamp,
.mainpage .embeddable-mainpage-box-discussions-module .embeddable-mainpage-box-discussions-forum {
color:#e78e67;
}
/* Poll stuff */
div#ajax-poll-area {
text-align:center;
}
div.ajax-poll div.header {
text-align:center;
}
.mainpage .ajax-poll input[type="submit"] {
margin-left:85px;
}
/* Blog stuff */
.mainpage .WikiaBlogListingBox .wikia-button,
.mainpage a.more,
.mainpage .WikiaBlogListingBox h2 {
display:none;
}
.mainpage .tabs li a {
padding:5px;
margin-right:10px;
}
.mainpage .tabs .selected a {
border-color:#bb7252;
border-radius:0;
color:#e78e67;
}
.mainpage ul.tabs {
border:none;
}
/* Help stuff */
input.createboxInput {
background:transparent;
border-color:#bb7252;
color:#e78e67;
margin-left:0;
}
/* Category Tree stuff */
.mainpage .CategoryTreeBullet {
display:none;
}
/* Button stuff */
.mainpage input[type="submit"],
.mainpage input[type="button"],
.mainpage button {
background-image:none;
border-radius:0;
text-transform:uppercase;
background-color:transparent;
border-color:#bb7252;
color:#e78e67;
}
/* Footer */
.mainpage .recirculation-horizontal.recirculation-footer h3,
.mainpage .recirculation-horizontal .item a,
.mainpage .WikiaFooter .recirculation-impact-footer h2,
.mainpage .WikiaFooter .recirculation-impact-footer .items h4 {
color:#fff
}
/* Portability */
@media (max-width: 1023px) {
.mainpage-box-discussions,
.mainpage-box-forum,
.mainpage-box-news,
.mainpage-box-poll {
border:none!important;
width:285px!important;
}
.mainpage-box-news,
.mainpage-box-forum,
.mainpage-box-discussions {
display:inline-block;
margin:0 auto 20px auto;
background-color:transparent;
border:none;
}
.main-page-tag-rcs .module,
.main-page-tag-rcs .forum-activity-module {
width:285px;
}
}