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>CzechOut
and a bit more
imported>ReverieCode
m Testing...
 
(23 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* =================================
/* =================================
   September 2018 mainpage redesign
   Shadows 2024 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 Shadows
   marketing campaign do appear on  
   marketing campaign do appear on  
   every page.
   every page, predominantly red and black.
  Some other colors also feature following
  our users' feedback.
    
    
   Most obviously, the link color matches the Bronze
   DARK THEME:
   Age look of the Odyssey-inspired wordmark
  Link color: #cc9800
   redesign.
  Header (Sticky nav) color: #3d1d14
  Border color: #cc9800
  Font color: #FFF
  Mainpage Font and Border color: #cc0000
  Page (Article background): #0d0101
  Main (Community background): #270505
  Buttons (Accent color): #dcdcdc
 
  LIGHT THEME:
   Link color: #856300
   Header (Sticky nav) color: #dd2929
  Border color: #856300
  Font color: #000000
  Mainpage Font and Border color: #cc0000
  Page (Article background): #f7f0f0
  Main (Community background): #b9010d
  Buttons (Accent color): #313131
    
    
   Link color: #ecc59e
   The redlink color could be change eventually, but
  Header color: #463a39
   it remains to be discussed yet.
  Main background: #b0afab
  Page background: #000000
  Buttons: #dcdcdc
 
  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.  
   =================================  */
   =================================  */


Line 49: Line 49:
.mainpage-wrap a.new:visited,
.mainpage-wrap a.new:visited,
.mainpage-wrap a:visited,
.mainpage-wrap a:visited,
.mainpage-wrap a:link {
.mainpage-wrap a:link,
     color:#ecc59e!important;
.mainpage-box-visit .visit-body a {
     color:#cc0000!important;
}
}


Line 71: Line 72:
     font-family:cinzel;
     font-family:cinzel;
     padding:.3em .2em .3em .1em;
     padding:.3em .2em .3em .1em;
     color:#ecc59e!important;
     color:#cc0000!important;
     font-size:14px;
     font-size:14px;
     background-color:#000;
     /* background-color:#000; */
}
}
.mainpage .lightbox-caption {
.mainpage .lightbox-caption {
Line 88: Line 89:
.mainpage-box-featured-videos,
.mainpage-box-featured-videos,
.mainpage-box-featured-article {
.mainpage-box-featured-article {
     width:630px;
     width:700px;
     margin:40px auto;
     margin:5px auto;
}
}
.mainpage-box-featured-videos {
.mainpage-box-featured-videos {
Line 102: Line 103:
     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 116:
.mainpage-box-poll,
.mainpage-box-poll,
.mainpage-box-help,
.mainpage-box-help,
.mainpage-box-featured-article,
.mainpage-box-featured-article {
    border:2px solid #cc0000;
    padding:20px;
}
.mainpage-box-other-wikis {
.mainpage-box-other-wikis {
    border:2px solid #ecc59e;
border:2px solid #cc0000;
     padding:20px;
     padding:1px;
}
}
.mainpage-box-characters img {
.mainpage-box-characters img {
     margin-top:0!important;
     margin-top:0!important;
}
}
 
.mainpage-box-countdown{
width:285px;
}
.mainpage-box-buy,
.mainpage-box-buy,
.mainpage-box-discord {
.mainpage-box-discord {
Line 141: Line 148:
}
}
.mainpage-box-other-wikis {
.mainpage-box-other-wikis {
     margin:20px auto;
     margin:2px auto;
     /*text-align:center;*/
     /*text-align:center;*/
}
}
Line 195: Line 202:
     letter-spacing:3px;
     letter-spacing:3px;
     margin:0 auto;
     margin:0 auto;
     color:#ecc59e;
     color:#cc0000;
     padding-bottom:20px;
     padding-bottom:20px;
     padding-top:10px;
     padding-top:10px;
Line 225: Line 232:
     font-size:26px;
     font-size:26px;
     text-align:center;
     text-align:center;
     color:#ecc59e;
     color:#cc0000;
     text-transform:uppercase;
     text-transform:uppercase;
     letter-spacing:2px;
     letter-spacing:2px;
Line 253: Line 260:
.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:#ecc59e;
     border-color:#cc0000;
     color:#ecc59e;
     color:#cc0000;
}
}
.mainpage .embeddable-discussions-heading {
.mainpage .embeddable-discussions-heading {
Line 260: Line 267:
}
}
.mainpage .embeddable-discussions-show-all {
.mainpage .embeddable-discussions-show-all {
     color:#ecc59e;
     color:#cc0000;
     display:none;
     display:none;
}
}
Line 267: Line 274:
.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:#ecc59e!important;
     color:#cc0000!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:#ecc59e;
     border-color:#cc0000;
}
}


Line 278: Line 285:
.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: #ecc59e;
     fill: #cc0000;
}
}
.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 293:
.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:#ecc59e;
     color:#cc0000;
}
}


Line 310: Line 317:
}
}
.mainpage .tabs .selected a {
.mainpage .tabs .selected a {
     border-color:#ecc59e;
     border-color:#cc0000;
     border-radius:0;
     border-radius:0;
     color:#ecc59e;
     color:#cc0000;
}
}
.mainpage ul.tabs {
.mainpage ul.tabs {
Line 320: Line 327:
input.createboxInput {
input.createboxInput {
     background:transparent;
     background:transparent;
     border-color:#ecc59e;
     border-color:#cc0000;
     color:#ecc59e;
     color:#cc0000;
     margin-left:0;  
     margin-left:0;  
}
}
Line 336: Line 343:
     text-transform:uppercase;
     text-transform:uppercase;
     background-color:transparent;
     background-color:transparent;
     border-color:#ecc59e;
     border-color:#cc0000;
     color:#ecc59e;
     color:#cc0000;
}
}



Latest revision as of 10:18, 22 May 2024

/* =================================
   Shadows 2024 mainpage redesign

   While most of the elements here affect
   ONLY the mainpage, a few color choices
   following Ubisoft's current Shadows
   marketing campaign do appear on 
   every page, predominantly red and black.
   Some other colors also feature following
   our users' feedback.
   
   DARK THEME:
   Link color: #cc9800
   Header (Sticky nav) color: #3d1d14
   Border color: #cc9800
   Font color: #FFF
   Mainpage Font and Border color: #cc0000
   Page (Article background): #0d0101
   Main (Community background): #270505
   Buttons (Accent color): #dcdcdc

   LIGHT THEME:
   Link color: #856300
   Header (Sticky nav) color: #dd2929
   Border color: #856300
   Font color: #000000
   Mainpage Font and Border color: #cc0000
   Page (Article background): #f7f0f0
   Main (Community background): #b9010d
   Buttons (Accent color): #313131
   
   The redlink color could be change eventually, but
   it remains to be discussed yet.
   =================================  */

/* 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,
.mainpage-box-visit .visit-body a {
    color:#cc0000!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:#cc0000!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:5px 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 #cc0000;
    padding:20px;
}
.mainpage-box-other-wikis {
	border:2px solid #cc0000;
    padding:1px;
}
.mainpage-box-characters img {
    margin-top:0!important;
}
.mainpage-box-countdown{
	width:285px;
}
.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:#cc0000;
     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:#cc0000;
     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:#cc0000;
    color:#cc0000;
}
.mainpage .embeddable-discussions-heading {
     display:none;
}
.mainpage .embeddable-discussions-show-all {
     color:#cc0000;
     display:none;
}

.mainpage .embeddable-discussions-show-all a,
.mainpage .embeddable-discussions-show-all a:link,
.mainpage .embeddable-discussions-show-all a:visited {
     color:#cc0000!important;
}
.mainpage .embeddable-discussions-module .embeddable-discussions-post-detail { 
     background-color:transparent;
     border-color:#cc0000;
}

.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: #cc0000;
}
.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:#cc0000;
}

/* 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:#cc0000;
    border-radius:0;
    color:#cc0000;
}
.mainpage ul.tabs {
    border:none;
}
/* Help stuff */
input.createboxInput {
    background:transparent;
    border-color:#cc0000;
    color:#cc0000;
    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:#cc0000;
    color:#cc0000;
}


/* 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;
     }

}