Difference between revisions of "MediaWiki:Common.css"

Revision as of 11:14, 24 January 2022

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

/* Scale logo to fit. */
#p-logo a { background-repeat: round; background-position: inherit; }

/* Remove top padding from the main menu, logo has already enough empty space.*/
div#mw-panel { padding-top: 0; }

/* Enable Template:Mbox and its associated parameters */
td.mbox-image { border: none; padding: 2px 0 2px 0.9em; text-align: center; }
th.mbox-text, td.mbox-text { border: none; padding: 0.25em 0.9em; width: 100%; }

/* Enable Template:Ambox and its associated parameters */
table.ambox { margin: 0 10%; border: 1px solid #a2a9b1; border-left: 10px solid #36c; box-sizing: border-box; }
table.ambox-speedy { border-left: 10px solid #b32424; background-color: #ff8282; }
table.ambox-delete { border-left: 10px solid #b32424; }
table.ambox-content { border-left: 10px solid #f28500; }
table.ambox-style { border-left: 10px solid #fc3; }
table.ambox-notice { border-left: 10px solid #36c; }
table.ambox-move { border-left: 10px solid #9932cc; }
table.ambox-protection { border-left: 10px solid #a2a9b1; }
table.ambox + table.ambox { margin-top: -1px; }

/* Enable Template:Cmbox and its associated parameters */
table.cmbox { margin: 3px 10%; border-collapse: collapse; border: 1px solid #a2a9b1; background-color: #dfe8ff; box-sizing: border-box; color: #222222; }
table.cmbox-speedy { margin-top: 4px; margin-bottom: 4px; border: 4px solid #b32424; background-color: #ffdbdb; }
table.cmbox-delete { background-color: #ffdbdb; }
table.cmbox-content { background-color: #ffe7ce; }
table.cmbox-style { background-color: #fff9db; }
table.cmbox-notice { background-color: #d8e8ff; }
table.cmbox-move { background-color: #e4d8ff; }
table.cmbox-protection { background-color: #efefe1; }

/* Enable styling of references */
.references-small { font-size: 90%; }

/* Prevent line breaks in silly places where desired (nowrap)
   and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
	white-space: nowrap;
}

/* Enable Template:Div col */
  .div-col { margin-top: 0.3em; margin-bottom: 0.3em; column-width: 30em; }
  .div-col-small { font-size: 90%; }
  .div-col-rules { column-rule: 1px solid #aaa; }

  /* Reset top margin for lists in div col */
  .div-col dl, .div-col ol, .div-col ul { margin-top: 0; }

  /* Avoid elements breaking between columns. See also Template:No col break */
  .div-col li, .div-col dd { page-break-inside: avoid; break-inside: avoid-column; }



/* -------------------------------------------------------------------------------------------------------------- */
/* Dynamically modify the main page elements based on screen width. Used in conjunction with MediaWiki:Common.js. */
/* -------------------------------------------------------------------------------------------------------------- */

#main-section .sep {display: none; width: 100%;	height: 0;}
#main-section li {margin-bottom: 1px;}
.box-row-l #main-section #sep-D {
	display: block;
}
.box-row-m #main-section #sep-B,
.box-row-m #main-section #sep-E {
	display: block;
}
.box-row-s #main-section #sep-B,
.box-row-s #main-section #sep-D,
.box-row-s #main-section #sep-F {
	display: block;
}

#box-1 .i {line-height: 60px;}
#box-1 .intro {margin-right: 1em;}
#box-1 {flex: 3 0 960px;}
#box-1 .mclist {columns: 5;}
#box-1 .mclist li {height: 60px;}
.width-a#box-1 {flex: 2 0 640px;}
.width-a#box-1 .mclist {columns: 4;}
.width-b#box-1 {flex: 3 0 840px;}
.width-c#box-1 {flex: 19 0 640px;}
.width-c#box-1 .mclist {columns: 4;margin: auto;}
.width-d#box-1 {flex: 1 1 1000px;}
.width-d#box-1 .mclist {columns: 5;}
.width-e#box-1 .mclist {columns: 4;}
.width-f#box-1 .mclist {columns: 3;}
.width-g#box-1 .mclist {columns: 2;}


#box-2 {flex: 1 0 480px;	display: flex; flex-direction: column;}
#box-2 .main-heading {flex: none;}
#box-2 .news ul {margin-top: 0;}
#box-2 .outro {flex: 1 0 auto; display: flex; flex-direction: column;}
#box-2 .more {
	display: block;
	font-style: italic;
	font-size: 85%;
	margin-left: 2em;
	margin-top: 0.5em;
	flex: 1 0 auto;
}
#box-2 .links {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around; /*fallback*/
	justify-content: space-evenly;
}
#box-2 .links span {margin: 0.75em 0.25em 0;	display: inline-block;}
.width-a#box-2{flex: 1 0 320px;}
.width-b#box-2{flex: 1 0 280px;}

#box-3a .i {line-height: 28px;}
#box-3a .i > a:first-child {display: inline-block; width: 20px; text-align: center;}
#box-3a .mclist {columns: 3;}
#box-3a .mclist li {height: 28px;}
#box-3a{flex: 2 0 auto;}
.width-a#box-3a .mclist {columns: 2;}
.width-b#box-3a .mclist {columns: 2;}
.width-c#box-3a .mclist {columns: 3;}
.width-d#box-3a .mclist {columns: 2;}
.width-e#box-3a {flex: 1 1 320px;}
.width-e#box-3a .mclist {columns: 2;}
.width-f#box-3a {flex: 1 1 720px;}
.width-f#box-3a .mclist {columns: 4;}
.width-g#box-3a .mclist {columns: 6;}
.width-h#box-3a .mclist {columns: 4;}
.width-i#box-3a .mclist {columns: 3;}
.width-j#box-3a .mclist {columns: 2;}

#box-3b .i {line-height: 28px;}
#box-3b .i > a:first-child{display: inline-block; width: 22px; text-align: center;}
#box-3b .mclist {columns: 3;}
#box-3b .mclist li {height: 28px;}
#box-3b {flex: 2 0 auto;}
.width-a#box-3b .mclist {columns: 3;}
.width-b#box-3b .mclist {columns: 2;}
.width-c#box-3b .mclist {columns: 3;}
.width-d#box-3b .mclist {columns: 2;}
.width-e#box-3b {flex: 1 1 430px;}
.width-e#box-3b .mclist {columns: 2;}
.width-f#box-3b {flex: 1 1 720px;}
.width-f#box-3b .mclist {columns: 3;}
.width-g#box-3b .mclist {columns: 4;}
.width-h#box-3b .mclist {columns: 3;}
.width-i#box-3b .mclist {columns: 2;}
.width-j#box-3b .mclist {columns: 1;}

#box-4a .i {line-height: 28px;}
#box-4a .i > a:first-child {display: inline-block; width: 20px; text-align: center;}
#box-4a .mclist {columns: 3;}
#box-4a .mclist li {height: 28px;}
#box-4a {flex:2 0 auto;}
.width-a#box-4a .mclist {columns: 2;}
.width-b#box-4a .mclist {columns: 2;}
.width-c#box-4a {flex:1 1 720px;}
.width-c#box-4a .mclist {columns: 4;}
.width-d#box-4a .mclist {columns: 3;}
.width-e#box-4a .mclist {columns: 2;}
.width-f#box-4a .mclist {columns: 1;}

#box-4b .i {line-height: 32px;}
#box-4b .i > a:first-child {display: inline-block; width: 32px; text-align: center;}
#box-4b .mclist li {height: 32px;}
#box-4b .prehardmode .mclist {columns: 3;}
#box-4b {flex: 3 0 720px;}
#box-4b .prehardmode {padding-right: 40px;	flex: 1 0 auto;}
#box-4b .hardmode {flex: 1 0 150px;}
.width-a#box-4b .prehardmode .mclist {columns: 2;}
.width-a#box-4b {flex: 2 0 460px;}
.width-a#box-4b .prehardmode {padding-right: 0;}
.width-a#box-4b .hardmode {flex: 1 0 auto;}
.width-b#box-4b {flex: 2 0 auto;}
.width-b#box-4b .prehardmode {padding-right: 20px;}
.width-b#box-4b .hardmode {flex: 1 0 auto;}
.width-c#box-4b .prehardmode .mclist {columns: 2;}
.width-c#box-4b {flex: 2 0 auto;}
.width-c#box-4b .prehardmode {padding-right: 1em; flex: 2 0 auto;}
.width-c#box-4b .hardmode {flex: 1 0 auto;}
.width-d#box-4b {flex:1 1 720px;}
.width-d#box-4b .prehardmode .mclist {columns: 3;}
.width-e#box-4b {flex:1 1 720px;}
.width-e#box-4b .prehardmode {width: 100%;	padding-right: 0;}
.width-e#box-4b .prehardmode .mclist {columns: 3;}
.width-e#box-4b .hardmode {width: 100%;}
.width-e#box-4b .hardmode .mclist {columns: 3;}
.width-f#box-4b .prehardmode .mclist {columns: 2;}
.width-f#box-4b .hardmode .mclist {columns: 2;}
.width-g#box-4b .prehardmode .mclist {columns: 1;}
.width-g#box-4b .hardmode .mclist {columns: 1;}

#box-5a .i {line-height: 32px;}
#box-5a .mclist li {height: 32px;}
#box-5a .i > a:first-child {display: inline-block; width: 24px;	text-align: center;}
#box-5a {flex: 2 0 360px;}
#box-5a .content > div {flex: 1 0 auto;}
.width-a#box-5a {flex: 2 0 310px;}
.width-b#box-5a {flex: 3 0 600px;}
.width-b#box-5a .mclist {columns: 2;}
.width-c#box-5a .mclist {columns: 2;	column-gap: 0.25em;}
.width-d#box-5a .mclist {columns: 1;}
.width-e#box-5a {flex: 1 1 720px;}
.width-e#box-5a .mclist {columns: 2;}
.width-f#box-5a .prehardmode,
.width-f#box-5a .hardmode {width: 100%;}
.width-f#box-5a .mclist {columns: 3;}
.width-g#box-5a .mclist {columns: 2;}

#box-5b .i {line-height: 32px;}
#box-5b .mclist li {height: 32px;}
#box-5b .i > a:first-child {display: inline-block; width: 24px;	text-align: center;}
#box-5b {flex: 2 0 360px;}
#box-5b .content > div {flex: 1 0 auto;}
.width-a#box-5b {flex: 2 0 310px;}
.width-b#box-5b .mclist {columns: 2;	column-gap: 0.25em;}
.width-c#box-5b .mclist {columns: 1;}
.width-d#box-5b {flex: 1 1 720px;}
.width-d#box-5b .mclist {columns: 2;}
.width-e#box-5b .prehardmode,
.width-e#box-5b .hardmode {width: 100%;}
.width-e#box-5b .mclist {columns: 4;}
.width-f#box-5b .mclist {columns: 3;}
.width-g#box-5b .mclist {columns: 2;}

#sect-6 dd {margin-left: 1em;}
#box-7 {flex: 1 0 auto;}
#box-8 {flex: 3 0 auto;}
.width-a#sect-6 .outro {display: flex;}
.width-a#sect-6 .outro dl {flex: 1 0 auto;}

.width-a#box-7 {flex-basis: 220px;}
.width-a#box-7 .outro dl {display: inline-block; width: 100%;}
.width-a#box-8 {flex-basis: 900px;}
.width-a#box-8 .outro dl {display: inline-block; width: 33.33333333%;}
.width-b#box-8 {flex-basis: 620px;}
.width-b#box-8 .outro dl {width: 50%;}
.width-b#box-7 {flex-basis: 620px;}
.width-b#box-7 .outro dl {width: 50%;}
.width-c#box-7 {flex-shrink: 1;}
.width-c#box-7 .outro dl {width: 100%;}
.width-c#box-8 {flex-shrink: 1;}
.width-c#box-8 .outro dl {width: 100%;}