MediaWiki:Common.css: Difference between revisions

From Zelda Dungeon Wiki
Jump to navigation Jump to search
Want an adless experience? Log in or Create an account.
mNo edit summary
(rewrote rank coloring code, moved it to the top for easier future access.)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
/* Rank Coloring
  Applies rank colors to page title on user and user talk pages. */
/* 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: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:Heroine_of_Time"],
.page-User_Heroine_of_Time h1,
.page-User_talk_Heroine_of_Time 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 */
/* CSS styling for the User Welcome */
Line 151: Line 205:
background-color: transparent;
background-color: transparent;
}
}
/* Rank Page Title Coloring
  Applies rank colors to page title on user and user talk pages. */
/* Admins */
body.page-User_Emma h1#firstHeading, body.page-User_talk_Emma h1#firstHeading, body.page-User_Fused_shadows h1#firstHeading, body.page-User_talk_Fused_shadows h1#firstHeading, body.page-User_Josh h1#firstHeading, body.page-User_talk_Josh h1#firstHeading, body.page-User_Locke h1#firstHeading, body.page-User_talk_Locke h1#firstHeading, body.page-User_Mases h1#firstHeading, body.page-User_talk_Mases h1#firstHeading {
color:#9B508A;
}
/* Patrollers */
body.page-User_BlackRayquaza98 h1#firstHeading, body.page-User_talk_BlackRayquaza98 h1#firstHeading,body.page-User_Heroine_of_Time h1#firstHeading, body.page-User_talk_Heroine_of_Time h1#firstHeading, body.page-User_Odd300 h1#firstHeading, body.page-User_talk_Odd300 h1#firstHeading, body.page-User_Satam h1#firstHeading, body.page-User_talk_Satam h1#firstHeading, body.page-User_Thortok2000 h1#firstHeading, body.page-User_talk_Thortok2000 h1#firstHeading {
color: #E99216;
}
/* Bots */
body.page-User_Navi h1#firstHeading, body.page-User_talk_Navi h1#firstHeading, body.page-User_Scrapper h1#firstHeading, body.page-User_talk_Scrapper h1#firstHeading {
color:#3EB8C6;
}
/* End Rank Page Title Coloring */





Revision as of 17:53, March 20, 2017

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

/* Rank Coloring
  Applies rank colors to page title on user and user talk pages. */
/* 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: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:Heroine_of_Time"],
.page-User_Heroine_of_Time h1,
.page-User_talk_Heroine_of_Time 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; }

/* 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: #f6f6f6; }
.tabs2d > .tabsettop > .tab2.active { border-bottom-color: #f6f6f6; }
.tabs2d > .tabsetleft > .tab2.active { border-right-color: #f6f6f6; }
.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;
}

.vectorTabs a{
  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;
    }
}