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
mNo edit summary
Line 57: Line 57:
.page-User_Sanitybot h1,
.page-User_Sanitybot h1,
.page-User_talk_Sanitybot h1,
.page-User_talk_Sanitybot h1,
a.mw-userlink[title="User:Charibot"],
.page-User_Charibot h1,
.page-User_talk_Charibot h1,
a.mw-userlink[title="User:Scrapper"],
a.mw-userlink[title="User:Scrapper"],
.page-User_Scrapper h1,
.page-User_Scrapper h1,

Revision as of 02:22, July 8, 2024

/* 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,
a.mw-userlink[title="User:Sanityormadness"],
.page-User_Sanityormadness h1,
.page-User_talk_Sanityormadness h1,
a.mw-userlink[title="User:Charitwo"],
.page-User_Charitwo h1,
.page-User_talk_Charitwo h1,
a.mw-userlink[title="User:Satam"],
.page-User_Satam h1,
.page-User_talk_Satam 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, {
	color: #E99216;
}

/* Bots */

a.mw-userlink[title="User:Navi"],
.page-User_Navi h1,
.page-User_talk_Navi h1,
a.mw-userlink[title="User:Sanitybot"],
.page-User_Sanitybot h1,
.page-User_talk_Sanitybot h1,
a.mw-userlink[title="User:Charibot"],
.page-User_Charibot h1,
.page-User_talk_Charibot 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; }

/* Main Page Columns */
.row {
  position: relative;
  margin: 0 -8px;
  border-radius: 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.row > * {
  display: block;
  float: left;
  box-sizing: border-box;
  padding: 1%;
  width: 100%;
}
.row > h2 { border-bottom: 1px solid #B2B2B2; }
.row .row { margin: 0; }
.row > .xs-1 { width: 8.33333333333%; }
.row > .xs-2 { width: 16.66666666667%; }
.row > .xs-3 { width: 25%; }
.row > .xs-4 { width: 33.33333333333%; }
.row > .xs-5 { width: 41.66666666667%; }
.row > .xs-6 { width: 50%; }
.row > .xs-7 { width: 58.33333333333%; }
.row > .xs-8 { width: 66.66666666667%; }
.row > .xs-9 { width: 75%; }
.row > .xs-10 { width: 83.33333333333%; }
.row > .xs-11 { width: 91.66666666667%; }
@media (min-width: 475px ) {
  .row > .sm-1 { width: 8.33333333333%; }
  .row > .sm-2 { width: 16.66666666667%; }
  .row > .sm-3 { width: 25%; }
  .row > .sm-4 { width: 33.33333333333%; }
  .row > .sm-5 { width: 41.66666666667%; }
  .row > .sm-6 { width: 50%; }
  .row > .sm-7 { width: 58.33333333333%; }
  .row > .sm-8 { width: 66.66666666667%; }
  .row > .sm-9 { width: 75%; }
  .row > .sm-10 { width: 83.33333333333%; }
  .row > .sm-11 { width: 91.66666666667%; }
}
@media (min-width: 730px ) {
  .row { margin: 0 -12px; }
  .row > .md-1 { width: 8.33333333333%; }
  .row > .md-2 { width: 16.66666666667%; }
  .row > .md-3 { width: 25%; }
  .row > .md-4 { width: 33.33333333333%; }
  .row > .md-5 { width: 41.66666666667%; }
  .row > .md-6 { width: 50%; }
  .row > .md-7 { width: 58.33333333333%; }
  .row > .md-8 { width: 66.66666666667%; }
  .row > .md-9 { width: 75%; }
  .row > .md-10 { width: 83.33333333333%; }
  .row > .md-11 { width: 91.66666666667%; }
}
@media (min-width: 1201px ) {
  .row {
    margin: 0 auto;
  }
}

/* Common boxes */
.box, .zdw-box { float: none; margin: 0px; margin-bottom: 1em; border: 1px solid #253125; padding: 2px; width: auto; background-color: #f0ddbd; }
.box > div, .zdw-box > div { border-bottom: 0px; padding: 0px; font-weight: normal; font-family: inherit; }
.box > div + div, .zdw-box:not(.zdw-tabcontainer) > div + div { margin-top: 2px; }
.darkbox, .zdw-box--dark { margin: 1em 0em; border: 5px solid #253125; border-radius: 0.5em; padding: .2em; background: #bbccb0; }
.box + .box, .box + .zdw-box, .zdw-box + .box, .zdw-box + .zdw-box { margin-top: 1em; }
.box table, .zdw-box table { width: 100%; }
.box .title, .zdw-box .zdw-box__title { position: relative; 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, .zdw-box .zdw-box__title ._toggler { position: absolute; right: .5em; }
.box .title .edit, .zdw-box .zdw-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; }
.zdw-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: 400px; 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 .zdw-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 .zdw-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 .zdw-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 .zdw-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 .zdw-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 .zdw-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 .zdw-label { background-color: #cccccc; }

/* Navbox */
.navbox { display:grid; clear: none; margin: auto; max-width: 70%; font-size: .85em; }
.navbox .zdw-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, .zdw-hlist > li, .zdw-hlist > * > li { display: inline; margin: 0; }
.hlist > li:after, .hlist > * > li:after, .zdw-hlist > li:after, .zdw-hlist > * > li:after { content: " · "; font-weight: bold; }
.hlist > li:last-child:after, .hlist > * > li:last-child:after, .zdw-hlist > li:last-child:after, .zdw-hlist > * > li:last-child:after { content: none; }
.hlist > li.hlist-last-child:after, .hlist > * > li.hlist-last-child:after { content: none; } /* IE8 */

/* Tabs */

/* Hide things until the js is ready to show them */
.zdw-tabcontent:not(.default) { display: none; }

.zdw-box.zdw-tabcontainer { position: relative; padding: 10px; }
.zdw-box.zdw-tabcontainer--hastabstop { margin-top: 33px !important; }
.zdw-box.zdw-tabcontainer--hastabstop > .zdw-tabcontainer__tabset--top { position: absolute; top: -32px; max-width: 98.5%;scrollbar-width: thin;}
.zdw-box.zdw-tabcontainer--hastabsleft > .zdw-tabcontainer__tabset--left { float: left; }
ul.zdw-tabset { margin: 0 !important; }
ul.zdw-tabset { display: flex; overflow-x: auto; scrollbar-width: thin;}
.zdw-tabcontainer__tabset--left .zdw-tabset { flex-direction: column; }
li.zdw-tab { display: block; padding: 0px 10px; margin: 0px; border: 1px solid #5a7db5; }
.zdw-tabcontainer__tabset--top .zdw-tab { height: 30px; line-height: 30px; white-space: nowrap; }
.zdw-tabcontainer__tabset--left .zdw-tab { padding: 5px 10px; }
.zdw-tabcontainer__tabset--top .zdw-tab + .zdw-tab { margin-left: -1px; }
.zdw-tabcontainer__tabset--left .zdw-tab + .zdw-tab { margin-top: -1px; }

.zdw-tab { background-color: #e6e6e6; }
.zdw-tab.active { background-color: #f0ddbd; }
.zdw-tabcontainer__tabset--top .zdw-tab { border-bottom-color: #253125; }
.zdw-tabcontainer__tabset--left .zdw-tab { border-right-color: #253125; }
.zdw-tabcontainer__tabset--top .zdw-tab.active { border-bottom-color: #f0ddbd; }
.zdw-tabcontainer__tabset--left .zdw-tab.active { border-right-color: #f0ddbd; }
.zdw-tab:hover { background-color: #5a7db5 !important; color: #fefefe; cursor: pointer; }

.zdw-tabcontent .wikitable { margin-top: 0px; }

/* Remove extra space below tab container in a navbox */
.zdw-box.navbox .zdw-box.zdw-tabcontainer { margin-bottom: 0; }

/* End Tabs */

/* Gallery Boxes */
li.gallerybox div.zdw-thumb--dark { background-color: #7c6e60; background-image: url('//www.zeldadungeon.net/wiki/images/d/d7/PicboxTexture.jpg'); }

/* Paged Gallery */
.zdw-paged-gallery { text-align: center; }
.zdw-paged-gallery__navigation > .zdw-button { display: inline-block; }
.zdw-paged-gallery__page:not(.active) { display: none; }

/* Buttons */
.zdw-button { background-color: #fbf0d4; padding: 4px; border: 1px solid #AAA; border-radius: 8px; box-shadow: 2px 2px 4px rgba(0,0,0,.2); margin: 4px; cursor: pointer; user-select: none; }
.zdw-button:hover { box-shadow: 3px 3px 6px rgba(0,0,0,.2); }
.zdw-button:active { box-shadow: 2px 2px 4px rgba(0,0,0,.2); transform: translateY(1px); }

.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 */
#bodyContent h3 {
border-bottom: 1px dashed #AAA;
}

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

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

/* TOClimit */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}


textarea{font-family:monospace}
td.mw-label{padding:0.25em}
input,input[type=checkbox],input[type=radio]{margin-right:3px;margin-left:3px}