MediaWiki:Common.css: Difference between revisions

Revision as of 02:46, August 13, 2019

/* CSS placed here will be applied to all skins */

/* Rank Coloring
  Applies rank colors to page title on user and user talk pages. 
  In the mw-userlink entries, keep the spaces in names and do not replace them with underscores.
  In the h1 entries, any spaces in names should be replaced with underscores.
*/
/* Admins */

a.mw-userlink[title="User:Emma"],
.page-User_Emma h1,
.page-User_talk_Emma h1,
a.mw-userlink[title="User:Fused shadows"],
.page-User_Fused_shadows h1,
.page-User_talk_Fused_shadows h1,
a.mw-userlink[title="User:Josh"],
.page-User_Josh h1,
.page-User_talk_Josh h1,
a.mw-userlink[title="User:Locke"],
.page-User_Locke h1,
.page-User_talk_Locke h1,
a.mw-userlink[title="User:Heroine of Time"],
.page-User_Heroine_of_Time h1,
.page-User_talk_Heroine_of_Time h1,
a.mw-userlink[title="User:Mases"],
.page-User_Mases h1,
.page-User_talk_Mases h1 {
	color: #9B508A;
}

/* Patrollers */

a.mw-userlink[title="User:BlackRayquaza98"],
.page-User_BlackRayquaza98 h1,
.page-User_talk_BlackRayquaza98 h1,
a.mw-userlink[title="User:Odd300"],
.page-User_Odd300 h1,
.page-User_talk_Odd300 h1,
a.mw-userlink[title="User:Satam"],
.page-User_Satam h1,
.page-User_talk_Satam h1,
a.mw-userlink[title="User:Thortok2000"],
.page-User_Thortok2000 h1,
.page-User_talk_Thortok2000 h1 {
	color: #E99216;
}

/* Bots */

a.mw-userlink[title="User:Navi"],
.page-User_Navi h1,
.page-User_talk_Navi h1,
a.mw-userlink[title="User:Scrapper"],
.page-User_Scrapper h1,
.page-User_talk_Scrapper h1 {
	color: #3EB8C6;
}
/* End Rank Coloring */

/* CSS styling for the User Welcome */
.user_welcome { border: 2px solid #000; padding: 5px; border-radius: 10px; }
.user_welcome .head { border: 1px solid #000; padding: 6px; border-top-right-radius: 10px; border-top-left-radius: 10px; background: url("//zeldadungeon.net/wp-content/themes/layout20/images/Box1Color.png"); font-weight: bold; font-size: 18px; }
.user_welcome .welcome_content { padding: 5px 0; }

/* Header */
.secondary > ul { border-radius: 0px; }

/* Common boxes */
.box { float: none; margin: 0px; margin-bottom: 1em; border: 1px solid #253125; padding: 2px; width: auto; background-color: #f0ddbd; }
.box > div { border-bottom: 0px; padding: 0px; font-weight: normal; font-family: inherit; }
.darkbox { margin: 1em 0em; border: 3px solid #19345e; padding: .2em; background-color: #c3d1e8; }
.box + .box { margin-top: 1em; }
.box table { width: 100%; }
.box .title { position: relative; margin-bottom: 2px; border: 1px solid #253125; padding: .2em .4em; background-color: #8fbb94; background-image: url("//www.zeldadungeon.net/wiki/images/3/3c/BoxTitleTexture.png"); font-weight: bold; font-size: 1.1em; }
.box .title ._toggler { position: absolute; right: .5em; }
.box .title .edit { position: absolute; left: .5em; }
.header { padding: 0em .4em; background-color: #8fbb94; background-image: url("//www.zeldadungeon.net/wiki/images/c/c4/BoxHeaderTexture.png"); font-weight: bold; }
.label { padding: 0em .4em; background-color: #8fbb94; background-image: url("//www.zeldadungeon.net/wiki/images/d/d3/BoxLabelTexture.png"); font-weight: bold; }
.even { background-color: #ffffff; }

/* Infobox */
.infobox img { margin-bottom: 2px; max-width: 258px; height: auto; }
.infotable { margin: 0px; border: 1px solid #253125; border-collapse: collapse; width: 100%; height: 100%; font-size: .95em; }
.infotable th, .infotable td { border: 1px solid #253125; padding: 2px; vertical-align: middle; }

.infobox-hostile, .infobox-hostile .title, .infobox-hostile th, .infobox-hostile td { border-color: red; }
.infobox-hostile .title, .infobox-hostile .header, .infobox-hostile .label { background-color: #ff4444; }
.infobox-dungeon, .infobox-dungeon .title, .infobox-dungeon th, .infobox-dungeon td { border-color: black; }
.infobox-dungeon .title, .infobox-dungeon .header, .infobox-dungeon .label { background-color: #333333; }
.infobox-dungeon .title, .infobox-dungeon .header { color: white; }
.infobox-location, .infobox-location .title, .infobox-location th, .infobox-location td { border-color: brown; }
.infobox-location .title, .infobox-location .header, .infobox-location .label { background-color: #995533; }
.infobox-location .title, .infobox-location .header { color: #d5f1e5; }
.infobox-character, .infobox-character .title, .infobox-character th, .infobox-character td { border-color: green; }
.infobox-character .title, .infobox-character .header, .infobox-character .label { background-color: #00cc00; }
.infobox-item, .infobox-item .title, .infobox-item th, .infobox-item td { border-color: orange; }
.infobox-item .title, .infobox-item .header, .infobox-item .label { background-color: #ff9933; }
.infobox-knowledge, .infobox-knowledge .title, .infobox-knowledge th, .infobox-knowledge td { border-color: purple; }
.infobox-knowledge .title, .infobox-knowledge .header, .infobox-knowledge .label { background-color: #cc33ee; }
.infobox-nondiegetic, .infobox-nondiegetic .title, .infobox-nondiegetic th, .infobox-nondiegetic td { border-color: gray; }
.infobox-nondiegetic .title, .infobox-nondiegetic .header, .infobox-nondiegetic .label { background-color: #cccccc; }

/* Navbox */
.navbox { clear: both; margin: auto; width: 70%; font-size: .85em; }
.navbox .label { width: 20%; }
.navbox ul { margin: 0px !important; }

/* Ambox */
.ambox { margin: auto; border-left: 10px solid #5a7db5; border-right: 1px solid #5a7db5; border-collapse: collapse; width: 70%; background-color: #f6f6f6; }
.ambox-image, .ambox-text { border-top: 1px solid #5a7db5; border-bottom: 1px solid #5a7db5; }
.ambox + .ambox .ambox-image, .ambox + .ambox .ambox-text { border-top: none; }
.ambox-image { width: 50px; }
.ambox-small { width: 50%; }
.ambox-small .ambox-image { display: none; }

.ambox-content { border-left: 10px solid orange; }
.ambox-style { border-left: 10px solid yellow; }
.ambox-delete { border-left: 10px solid red; }
.ambox-move { border-left: 10px solid green; }
.ambox-protection { border-left: 10px solid gray; }

/* Userbox */
.userbox + .userbox { margin-top: 1px; }

/* Horizontal Lists */
.hlist > li, .hlist > * > li { display: inline; margin: 0; }
.hlist > li:after, .hlist > * > li:after { content: " · "; font-weight: bold; }
.hlist > li:last-child:after, .hlist > * > li:last-child:after { content: none; }
.hlist > li.hlist-last-child:after, .hlist > * > li.hlist-last-child:after { content: none; } /* IE8 */

/* Tabs2 Core Functionality */
.tabcontent2:not(.default) { display: none; }

/* Tabs2D */
.tabs2d.tabtarget { position: relative; padding: 10px; }
.tabs2d.tabtarget.hastabstop { margin-top: 31px; }
.tabs2d > .tabsettop { position: absolute; top: -32px; margin: 0px !important; }
.tabs2d > .tabsetleft { float: left; }
.tabs2d > .tabset > .tab2 { display: block; padding: 0px 10px; margin: 0px; border: 1px solid #5a7db5; }
.tabs2d > .tabsettop > .tab2 { float: left; height: 30px; line-height: 30px; }
.tabs2d > .tabsetleft > .tab2 { padding: 5px 10px; }
.tabs2d > .tabsettop > .tab2 + .tab2 { margin-left: -1px; }
.tabs2d > .tabsetleft > .tab2 + .tab2 { margin-top: -1px; }

.tabs2d > .tabset > .tab2 { background-color: #e6e6e6; }
.tabs2d > .tabset > .tab2.active { background-color: #f0ddbd; }
.tabs2d > .tabsettop > .tab2.active { border-bottom-color: #f0ddbd; }
.tabs2d > .tabsetleft > .tab2.active { border-right-color: #f0ddbd; }
.tabs2d > .tabset > .tab2:hover { background-color: #5a7db5 !important; color: #fefefe; cursor: pointer; }

.tabs2d .wikitable { margin-top: 0px; }

/* TabsGrid */
.tabsgrid.tabset { border-collapse: collapse; width: initial; }
.tabsgrid td { padding: 0px; }
.tabsgrid .tab2.active { outline: #cccc33 ridge thick !important; }
.tabsgrid .tab2:hover { outline: #5a7db5 ridge; cursor: pointer; }

.nospace, .nospace * { margin: 0px !important; border: 0px !important; padding: 0px !important; }

#mw-normal-catlinks ul { margin-left: 0; }

/* Hiding obsolete and unused elements */ 
body.page-Special_Statistics tr.statistics-group-checkuser, body.page-Special_Statistics tr.statistics-group-widgeteditor, body.page-Main_Page h1#firstHeading, table.mw-listgrouprights-table tr#checkuser, table.mw-listgrouprights-table tr#widgeteditor {
display: none;
}

/* Letterhead table classes */
table.letterhead{
border-width: 0px; 
width:100%;
border-spacing: 0;
border-collapse: separate;
}
table.letterhead td{
background-image:url('//zeldadungeon.net/wiki/images/c/cf/Letterhead-Corner.png');
background-repeat:no-repeat;
text-align:right;
width: 80px;
height:80px;
background-color: transparent;
padding: 0;
}
table.letterhead th{
text-align:center;
background-image:url('//zeldadungeon.net/wiki/images/9/93/Letterhead-Tex.png');
font-weight:bold
}
div.letterhead{
padding: 1em 3em 2em;
background-image:url('//zeldadungeon.net/wiki/images/9/93/Letterhead-Tex.png');
text-align:left;
font-size:1.2em;
border-width: 0px;
border-spacing: 0;
border-collapse: separate;
}

/* Header shadowing */
#firstHeading, #mw-previewheader, #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent h6 {
text-shadow: #AAA 1.2px 1.2px 1px;
}

/* Dashed Headers */
h3 {
border-bottom: 1px dashed #AAA;
}

/* Remove White Backround on Diff */
table.diff, td.diff-otitle, td.diff-ntitle {
background-color: transparent;
}


/* prevents Pre tags from spilling out of their content area. */
pre {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* Fix for gap created by Recent Changes legend. */
table.mw-recentchanges-table {
width: 575px;
}

/* Fix to make changes in the Diff view more visible post-MediaWiki 1.23.7. */
del.diffchange, del.diffchange-inline {
color: #8b0000;
}
ins.diffchange, ins.diffchange-inline {
color: #006400;
}

/* Fix for de-uglify the vector tabs that were broken in an update. */
div.vectorTabs {
  background: transparent !important; 
  background-image: none !important;
  margin-bottom: -1px !important;
  padding-left: 0px !important;
}
div.vectorTabs ul, div.vectorTabs ul li, div.vectorTabs ul li span {
  background: transparent !important; 
  background-image: none !important;
  border: none;
}
#mw-head .vectorMenu h3 {
  background: none;
  border: none;
}

.vectorTabs a, .vectorMenu {
  border-top: 1px solid #AAA;
  border-left: 1px solid #AAA;
  border-right: 1px solid #AAA;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  border-radius: 8px 8px 0 0;
  -moz-border-radius: 8px 8px 0 0;
  -webkit-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
  background: #FBF0D4; /* Old browsers */
  background: -moz-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* FF3.6+ */
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FBF0D4),color-stop(100%,#F9F9F9)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* IE10+ */
  background: linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* W3C */
}
.vectorTabs a:hover, .vectorTabs strong:hover, .selected a, .selected strong,.elected a:hover, .selected strong:hover{
  text-shadow: 0px -1.5px 0px #DDD;
  background: #FBF0D4;
}
.vectorTabs a:hover,.vectorTabs strong:hover {
  background: #FBF0D4; /* Old browsers */
  background: -moz-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* FF3.6+ */
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#E1E4FA),color-stop(100%,#F9F9F9)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* IE10+ */
  background: linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* W3C */
}
.selected li, .selected li,.selected a:hover, .selected strong:hover {
  background: #FBF0D4; /* Old browsers */
  background: -moz-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* FF3.6+ */
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,white),color-stop(5%,#F9F9F9),color-stop(55%,#FBF0D4)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* IE10+ */
  background: linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* W3C */
}

/* Conditional column handling for pages with multiple columns
   On wide screens, show these as two columns
   On narrow and mobile screens, let them collapse into a single column */
.column-left {
    float: left;
    width: 50%;
}
.column-right {
    float: right;
    width: 49%;
}
.column-left-wide {
    float: left;
    width: 60%;
}
.column-right-narrow {
    float: right;
    width: 39%;
}
.column-left-narrow {
    float: left;
    width: 39%;
}
.column-left-extra-wide {
    float: left;
    width: 70%;
}
.column-left-extra-narrow {
    float: left;
    width: 29%;
}
.column-right-extra-wide {
    float: right;
    width: 70%;
}
.column-right-extra-narrow {
    float: right;
    width: 29%;
}
.column-left-very-wide {
    float: left;
    width: 95%;
}
.column-right-very-wide {
    float: right;
    width: 95%;
}
@media only screen and (max-width: 800px) {
    /* Decouple the columns on narrow screens */
    .column-left,
    .column-right,
    .column-left-wide,
    .column-right-narrow,
    .column-left-narrow,
    .column-left-extra-wide,
    .column-left-extra-narrow,
    .column-right-extra-wide,
    .column-right-extra-narrow,
    .column-left-very-wide,
    .column-right-very-wide {
        float: inherit;
        width: inherit;
    }
}

/* Games Bar */
#sitenav-games {
  margin-bottom: 15px;
}
.secondary {
  width: 100%;
  /*background: #060805;*/
  box-sizing: content-box;
  position: relative;
  height: auto;
  top: 0;
}
.secondary * {
  box-sizing: content-box;
}
.secondary h2 {
  margin: 12px 0 12px
}
.secondary > ul {
  /*z-index: 10000;*/
  position: relative;
  height: 70px;
  margin: 0px auto;
  padding: 0px;
  box-shadow: 0px 1px 2px #333;
}
.secondary > ul > li {
  list-style: none;
  float: left;
}
.secondary > ul > li {
  display: block;
  width: 60px;
  height: 70px;
}
/* splitting pixels.. */
.secondary > ul > li:nth-child(even) {
  width: 61px;
}

.secondary > ul > li > a {
  display: block;
  background-repeat: no-repeat;
  background-position-y: 5px;
  width: 100%;
  height: 100%;
}
.secondary > ul, .secondary > ul > li { 
  border-right: 1px solid rgba(38, 96, 38, 0.4);
  background: #1C3E26; /* Old browsers */
  background: -moz-linear-gradient(top, #1C3E26 0%, #000201 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #000201)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #1C3E26 0%, #000201 100%); /* IE10+ */
  background: linear-gradient(to bottom, #1C3E26 0%, #000201 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#000201', GradientType=0); /* IE6-9 */
}
.secondary > ul > li:last-child {
    border: none;
}
.secondary > ul > li:hover {
  background: #C6E2C9; /* Old browsers */
  background: -moz-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #C6E2C9)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* IE10+ */
  background: linear-gradient(to bottom, #1C3E26 0%, #C6E2C9 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#C6E2C9', GradientType=0); /* IE6-9 */
}

/* wide game nav */
@media (min-width: 1280px) {
  .secondary {
    background: #1C3E26; /* Old browsers */
    background: -moz-linear-gradient(top, #1C3E26 0%, #000201 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #000201)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1C3E26 0%, #000201 100%); /* IE10+ */
    background: linear-gradient(to bottom, #1C3E26 0%, #000201 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#000201', GradientType=0); /* IE6-9 */
    box-shadow: 0px 1px 2px #333;
  }
  .secondary > ul {
    width: 1280px;
    margin: 0 auto;
    box-shadow: none;
  }
  .secondary > ul > li,
  .secondary > ul > li:nth-child(even) {
    width: 66px;
  }
  .secondary > ul > li:nth-child(4n+1) {
    width: 67px;
  }
  .secondary > ul > li a {
    background-position-x: 3px;
  }
}

@media only screen and (max-width: 1280px) and (min-width: 1200px){
  .secondary > ul > li {
    width: 59px!important;
  }
}

@media (min-width: 1440px) {
  .secondary > ul {
    width: 1440px;
    margin: 0 auto;
    box-shadow: none;
  }
  .secondary > ul > li,
  .secondary > ul > li:nth-child(even) {
    width: 75px;
  }
  .secondary > ul > li:nth-child(4n+1) {
    width: 74px;
  }
  .secondary > ul > li > a {
    background-position-x: 7px;
  }
}
/* Main Header Nav */
#top { background: #253125; }
.primary-mast { background: #0F1B11; }
#nav-primary ul li a { font-size: 14px; }
@media screen and (min-width: 1201px) {
  .site-nav ul li {
    display: inline-flex;
    float: left;
    padding: 15px 30px 0px 0px;
    margin-bottom: -10px;
  }
  .site-nav {
    margin: 0px auto;
    width: 1440px;
  }
}
@media (min-width: 768px) {
  .primary-mast {
    box-shadow: 0 0 20px 5px #100100;
  }
}
@media screen and (max-width: 729px) {
  .titlebar, #nav-primary {
    border-bottom: 1px solid #0F1B11;
    background-color: #0F1B11;
  }
  .titlebar i {
    left: 15px;
    right: auto;
    top: 9px;
  }
}

/* Sidebar */
@media screen and (min-width: 982px){
  div#mw-panel { width: 300px; padding-left: 0px; margin-right: 20px; margin-top: 4px;}
  div#footer, #mw-head-base, div#content { margin-left: 305px; }
  #left-navigation { margin-left: 305px; }
}

.mw-body { border: 1px solid #aaaaaa; }