Welcome to Assassin's Creed Wiki! Log in and join the community.

MediaWiki:Mainpage.css: Difference between revisions

From the Assassin's Creed Wiki
Jump to navigation Jump to search
imported>DarkFeather
Colorshift from Odyssey to Valhalla
imported>Cristophorus35
No edit summary
Line 1: Line 1:
/* =================================
/* =================================
   September 2018 mainpage redesign
   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 Odyssey
   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 Bronze
   Most obviously, the link color matches the
   Age look of the Odyssey-inspired wordmark
   color palatte chosen for Mirage, based on the
   redesign.
  Islamic Golden Age as central theme,
   consisting in blue, tan, and dark gold.
    
    
   Link color: #0fc4b1
   Link color: #ffc383
   Header color: #463a39
   Header (Sticky nav) color: #6786a3
   Main background: #b0afab
   Border color: #8c5229
   Page background: #000000
  Font color: #FFF
   Buttons: #dcdcdc
   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:#0fc4b1!important;
     color:#e78e67!important;
}
}


Line 71: Line 73:
     font-family:cinzel;
     font-family:cinzel;
     padding:.3em .2em .3em .1em;
     padding:.3em .2em .3em .1em;
     color:#0fc4b1!important;
     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:630px;
     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 #0fc4b1;
border:2px solid #bb7252;
     padding:20px;
     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:20px auto;
     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:#0fc4b1;
     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:#0fc4b1;
     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:#0fc4b1;
     border-color:#bb7252;
     color:#0fc4b1;
     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:#0fc4b1;
     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:#0fc4b1!important;
     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:#0fc4b1;
     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: #0fc4b1;
     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:#0fc4b1;
     color:#e78e67;
}
}


Line 310: Line 315:
}
}
.mainpage .tabs .selected a {
.mainpage .tabs .selected a {
     border-color:#0fc4b1;
     border-color:#bb7252;
     border-radius:0;
     border-radius:0;
     color:#0fc4b1;
     color:#e78e67;
}
}
.mainpage ul.tabs {
.mainpage ul.tabs {
Line 320: Line 325:
input.createboxInput {
input.createboxInput {
     background:transparent;
     background:transparent;
     border-color:#0fc4b1;
     border-color:#bb7252;
     color:#0fc4b1;
     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:#0fc4b1;
     border-color:#bb7252;
     color:#0fc4b1;
     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;
     }

}