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>Cristophorus35
No edit summary
imported>ReverieCode
m Testing...
 
(20 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* =================================
/* =================================
   January 2023 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 Mirage
   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
   DARK THEME:
  color palatte chosen for Mirage, based on the
   Link color: #cc9800
  Islamic Golden Age as central theme,
   Header (Sticky nav) color: #3d1d14
  consisting in blue, tan, and dark gold.
   Border color: #cc9800
 
   Link color: #ffc383
   Header (Sticky nav) color: #6786a3
   Border color: #8c5229
   Font color: #FFF
   Font color: #FFF
   Main background: #6786a3
  Mainpage Font and Border color: #cc0000
   Page background: #172a38
  Page (Article background): #0d0101
    
   Main (Community background): #270505
   Also, the redlink color has to be changed
  Buttons (Accent color): #dcdcdc
   because this is a dark-themed wiki. Standard
 
   red color would have very low contrast with
   LIGHT THEME:
   the black background. A red (well, really, salmon)  
  Link color: #856300
   of #ffb7b7 makes things more readable on this wiki.
   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
    
    
   Similarly, the general transparency of pages has
   The redlink color could be change eventually, but
  been dialed back to about 45% for reasons of general
   it remains to be discussed yet.
  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 51: 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:#e78e67!important;
.mainpage-box-visit .visit-body a {
     color:#cc0000!important;
}
}


Line 73: Line 72:
     font-family:cinzel;
     font-family:cinzel;
     padding:.3em .2em .3em .1em;
     padding:.3em .2em .3em .1em;
     color:#e78e67!important;
     color:#cc0000!important;
     font-size:14px;
     font-size:14px;
     /* background-color:#000; */
     /* background-color:#000; */
Line 91: Line 90:
.mainpage-box-featured-article {
.mainpage-box-featured-article {
     width:700px;
     width:700px;
     margin:40px auto;
     margin:5px auto;
}
}
.mainpage-box-featured-videos {
.mainpage-box-featured-videos {
Line 118: Line 117:
.mainpage-box-help,
.mainpage-box-help,
.mainpage-box-featured-article {
.mainpage-box-featured-article {
     border:2px solid #bb7252;
     border:2px solid #cc0000;
     padding:20px;
     padding:20px;
}
}
.mainpage-box-other-wikis {
.mainpage-box-other-wikis {
border:2px solid #bb7252;
border:2px solid #cc0000;
     padding:1px;
     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,
Line 200: Line 202:
     letter-spacing:3px;
     letter-spacing:3px;
     margin:0 auto;
     margin:0 auto;
     color:#e78e67;
     color:#cc0000;
     padding-bottom:20px;
     padding-bottom:20px;
     padding-top:10px;
     padding-top:10px;
Line 230: Line 232:
     font-size:26px;
     font-size:26px;
     text-align:center;
     text-align:center;
     color:#e78e67;
     color:#cc0000;
     text-transform:uppercase;
     text-transform:uppercase;
     letter-spacing:2px;
     letter-spacing:2px;
Line 258: 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:#bb7252;
     border-color:#cc0000;
     color:#e78e67;
     color:#cc0000;
}
}
.mainpage .embeddable-discussions-heading {
.mainpage .embeddable-discussions-heading {
Line 265: Line 267:
}
}
.mainpage .embeddable-discussions-show-all {
.mainpage .embeddable-discussions-show-all {
     color:#e78e67;
     color:#cc0000;
     display:none;
     display:none;
}
}
Line 272: 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:#e78e67!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:#bb7252;
     border-color:#cc0000;
}
}


Line 283: 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: #e78e67;
     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 291: 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:#e78e67;
     color:#cc0000;
}
}


Line 315: Line 317:
}
}
.mainpage .tabs .selected a {
.mainpage .tabs .selected a {
     border-color:#bb7252;
     border-color:#cc0000;
     border-radius:0;
     border-radius:0;
     color:#e78e67;
     color:#cc0000;
}
}
.mainpage ul.tabs {
.mainpage ul.tabs {
Line 325: Line 327:
input.createboxInput {
input.createboxInput {
     background:transparent;
     background:transparent;
     border-color:#bb7252;
     border-color:#cc0000;
     color:#e78e67;
     color:#cc0000;
     margin-left:0;  
     margin-left:0;  
}
}
Line 341: Line 343:
     text-transform:uppercase;
     text-transform:uppercase;
     background-color:transparent;
     background-color:transparent;
     border-color:#bb7252;
     border-color:#cc0000;
     color:#e78e67;
     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;
     }

}