MediaWiki:Mainpage.css

/* =================================
   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.
   
   DARK THEME:
   Link color: #ffc383
   Header (Sticky nav) color: #142b3d
   Border color: #8c5229
   Font color: #FFF
   Main background: #6786a3
   Page background: #211714
   Buttons: #dcdcdc (Might change later)

   LIGHT THEME:
   Link color: #ffc383
   Header (Sticky nav) color: #463a39
   Border color: #8c5229
   Font color: #FFF
   Main background: #e2c59a
   Page background: #352f28
   Buttons: #dcdcdc (Might change later)
   
   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;
     }

}