MediaWiki:Common.css
Revision as of 11:32, 19 April 2024 by Cattwister (talk | contribs)
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/*
* For wikitable class for skinning normal tables
*/
table.wikitable {
margin: 0em 1em 1em 0;
background: #f9f9f9;
border: 1px #aaa solid;
border-collapse: collapse;
}
.wikitable th, .wikitable td {
border: 1px #aaa solid;
padding: 0.2em;
}
.wikitable th {
background: #f2f2f2;
text-align: center;
}
.wikitable caption {
font-weight: bold;
}
/*
* For table of contents like tables
*/
table.contentstable {
background-color : #f9f9f9;
border : 1px solid #969696;
border-collapse : collapse;
text-align : center;
}
.contentstable th {
background-color : #eaeaea;
border : 1px #aaa solid;
padding : .25em;
}
.contentstable td {
padding : 0em 0.75em;
border : 1px #aaa solid;
white-space : nowrap;
vertical-align : top;
text-align : left;
}
/*
* For tables used on the links page
*/
table.linktable {
background-color : #f9f9f9;
border : 1px solid #969696;
border-collapse : collapse;
text-align : left;
width : 90%;
line-height : normal;
}
.linktable th {
background-color : #eaeaea;
border : 1px #aaa solid;
padding : .25em;
font-size : 125%;
}
.linktable td {
padding : 0.5em;
border : 1px #aaa solid;
vertical-align : top;
}
.linktable p {
margin : 0;
margin-left : 0.75em;
}
.linktable a {
font-size : 110%;
font-weight : bold;
}
span.subtle a {
color: black;
text-decoration: none;
}
span.subtle a:hover {
color: #002bb8;
text-decoration: underline;
}
.grayed {
color: #969696;
}
.grayed a {
color: #969696;
text-decoration: none;
}
.grayed a:hover {
color: #002bb8;
text-decoration: underline;
}
/*
* Make a div the same width as the navigation bars from the NavLRC template
*/
div.navwidth {
max-width: 640px;
}
/*
* style for the SGIP template
*/
.SGIP-table {
border: 0;
}
.SGIP-table td {
padding: 0.25em;
}
.SGIP-table th {
background-color:#DDDDDD;
text-align:right;
vertical-align: top;
}
ul.SGIP-m {
margin: 0;
}
ul.SGIP-m li {
list-style-image: none;
list-style-type: none;
}
ul.SGIP-m li:empty {
display:none;
}
.SGIP-tf::before {
content: "Tab front: ";
font-weight: bold;
}
.SGIP-tb::before {
content: "Tab back: ";
font-weight: bold;
}
.SGIP-b::before {
content: "Base: ";
font-weight: bold;
}
.SGIP-be::before {
content: "Base Edge: ";
font-weight: bold;
}
/*
* style for the .lang lists (experimental)
*/
ul.lang {
list-style-image: none;
list-style-type: none;
}
.lang li:empty {
display:none;
}
.lang li::before {
background:url('http://www.miniatures-workshop.com/lostminiswiki/images/0/00/Flags.png') no-repeat;
width: 16px;
height: 11px;
content: "";
position: absolute;
margin-left: -20px;
margin-top: 4px;
}
.lang li.flag-de::before {
background-position: -16px 0;
}
.lang li.flag-en::before {
background-position: 0 -11px;
}
.lang li.flag-fr::before {
background-position: -16px -11px;
}
/*
* Allow limiting of which header levels are shown in a TOC;
* toclimit-3, for instance, will limit to
* showing ==headings== and ===headings=== but no further.
* Used in [[Template:TOC]]
*
* Taken from: http://www.mediawiki.org/wiki/MediaWiki:Gadget-site.css
*/
.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;
}
.toc-style-1,
.toc-style-4 {
margin-bottom:5px;
border:1px solid grey;
padding:5px;
}
.toc-style-1 {
float:right;
margin-left:1em;
}
.toc-style-4 {
float:left;
margin-right:1em;
}
.toc-style-1 .toc,
.toc-style-4 .toc {
width:100%;
}
.toc-style-1 p,
.toc-style-4 p {
text-align:center;
}
/*
* toc-style-3: this style makes wiki-generated Tables of Contents span multiple columns
*/
div.toc-style-3 .toc {
width: 100%;
padding: 0;
border-collapse: collapse;
}
div.toc-style-3 .toc td {
background-color: #f9f9f9;
border: 1px solid #aaa;
position: relative;
moz-columns: 24em;
-webkit-columns: 24em;
columns: 24em;
padding-bottom: 0.5em;
}
div.toc-style-3 #toctitle {
text-align: center;
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
background-color: #eaeaea;
border-bottom: 1px solid #aaa;
padding: 0.25em;
margin-bottom: 0.25em;
}
div.toc-style-3 .toc ul {
list-style: none;
margin: 0;
padding: 0 0.5em 0.5em 0.5em;
}
/*
* To stop displaying a numbered list in the TOC, specifically for use when most sections start with a product code.
*/
.toc-style-2 .tocnumber {
display: none;
}
/*
* To stop the margin left setting when displaying anumbered list in the TOC.
*/
.toc-style-5 {
margin-left:none;
}
/*
*
*/
#toc, .toc {
width: 246px;
}
/*
* Jumpbuttons (experimental)
*/
.jb-box {
z-index: 100;
position: fixed;
left: 0.5em;
top: 49em;
background-color: white;
width: 10.5em;
border: 1px solid #aaa;
}
.jb-1 {
position: relative;
background-color:#f9f9f9;
margin: 5px;
width: 32px;
height: 33px;
float: left;
border: 1px solid #aaa;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
font-size:300%;
overflow:hidden;
}
.jb-1 p {
margin-top:-0.25em;
}
/*
* Multi-column manual TOC and Main Page (experimental)
*/
.toc-multi-columm-3 {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 15px;
-moz-column-gap: 15px;
-webkit-column-gap: 15px;
background-color: #f9f9f9;
border: 1px solid #aaa;
padding: 5px;
}
.toc-multi-columm-3 #toc, .toc-multi-columm-3 #toc {
border-style: none;
}
.toc-multi-columm-5 {
column-count: 5;
-moz-column-count: 5;
-webkit-column-count: 5;
column-gap: 20px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
}
/*
* Standardised Manufacturer Category Page (experimental)
*/
.m-logo p {
text-align: center;
padding: 0 0.5em 0;
}
.m-logo img {
max-height: 100px;
width: auto;
}
#page-header #toc {
margin-bottom:0.5em;
}
/* */
.m-data, .m-data-3 {
display: inline-block;
vertical-align:top;
width: 272px;
overflow: hidden;
}
/* */
.m-data table, .m-data-2 table, .m-data-3 table {
padding: 0.5em;
width: 100%;
}
/* single line all around m-data & -2 table */
.m-data table, .m-data-2 table {
border: 1px solid #CCC;
}
/* single line above m-data-3 table */
.m-data-3 table {
border-top: 1px solid #CCC;
}
.m-data table tr, .m-data-2-table th, .m-data-3 table tr {
background: #FFFFFF;
text-align: right;
}
.m-data table tr:nth-child(odd) td, .m-data-2-table tr:nth-child(odd) td, .m-data-3 table tr:nth-child(odd) td {
background: #EBEBEB;
}
.m-data table td, .m-data-2-table td, .m-data-3 table td {
text-align: left;
}
.m-data-3 {
border: 1px solid #CCC;
}
.m-data-3 .m-logo img {
max-width:100%;
height: auto;
}
.m-info {
display: inline-block;
vertical-align: top;
width: 55%;
margin-left: 0.5em;
}
.m-info p:first-child {
margin-top: 0;
}
.m-banner p {
text-align: center;
}
.m-banner img {
height: auto;
max-width: 100%;
}
/*
* Quoted-1: a style for quoted text with citation.
*/
.quoted-1 p:nth-last-child(2) {
margin-bottom:0;
}
.quoted-1 p:last-child {
margin-top: 0;
font-size: x-small;
text-align: right;
}
.quoted-1 p:last-child::before {
content: "\2014\00a0"
}
/*
* Style for the Commercial Contributions Table
*/
table.cc-table-1 {
background-color: ivory;
width: 100%;
}
table.cc-table-1 th {
background-color:gold;
}
table.cc-table-1 tr:nth-child(7n) td {
background-color: white;
border-left: 0;
border-right: 0;
}
/*
* Style for Taxonomy table (very experimental)
*/
table.TAXO-table {
/* display:none; /* Making this visible to see how Google indexes things */
}
table.TAXO-table th {
background-color: #DDDDDD;
text-align: right;
vertical-align: top;
}
table.TAXO-table th:first-child {
text-align: center;
vertical-align: middle;
}
/*
* Making gallery image overlays possible. Used by the Gallery-Req Template.
*
*/
.gallerybox {
position: relative;
}
.gallerytext .gallery-req {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6em;
margin: 0;
padding-top: 5px;
color: white;
text-shadow: 0 1px 0 black;
background: linear-gradient( to bottom, rgba(0, 100, 0, 0.7), rgba(0, 0, 0, 0));
pointer-events:none;
}
.gallerytext .gallery-req-red {
background: linear-gradient( to bottom, rgba(100, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
.gallerytext .gallery-req-amber {
background: linear-gradient( to bottom, rgba(100, 100, 0, 0.7), rgba(0, 0, 0, 0));
}
.gallerytext .notice {
text-shadow: 0 0 0 black;
background: rgb(255,255,0);
color: black;
height: 11em;
border: 1px solid;
width: 11em;
}
/* margin: 1em 1.2em; */
/*
* For hand-cranked contents tables with dynamic columns:
* contents-1: gneneral TOC
* contents-2: on use only on the main page
*/
div.contents-1, div.contents-2 {
background-color: #f9f9f9;
border: 1px solid #aaa;
position: relative;
}
div.contents-2 {
border: none;
}
.columns-rule {
-webkit-column-rule: 1px solid #aaa;
-moz-column-rule: 1px solid #aaa;
column-rule: 1px solid #aaa;
}
.columns-12 {
-moz-columns: 12em;
-webkit-columns: 12em;
columns: 12em;
}
.columns-16 {
-moz-columns: 16em;
-webkit-columns: 16em;
columns: 16em;
}
.columns-20 {
-moz-columns: 20em;
-webkit-columns: 20em;
columns: 20em;
}
.columns-22 {
-moz-columns: 22em;
-webkit-columns: 22em;
columns: 22em;
}
.columns-24 {
-moz-columns: 24em;
-webkit-columns: 24em;
columns: 24em;
}
.contents-1 h4 {
text-align: center;
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
background-color: #eaeaea;
border-bottom: 1px solid #aaa;
}
p.contents-heading {
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
margin: 0;
margin-bottom: .3em;
border-bottom: 1px solid #aaa;
padding-top: .5em;
padding-bottom: .17em;
background-color: #eaeaea;
font-size: 100%;
font-weight: bold;
color: black;
text-align: center;
}
p.contents-heading.single-span {
-webkit-column-span: 1;
-moz-column-span: 1;
column-span: 1;
border-top: 1px solid #aaa;
}
.contents-1 ul, .contents-2 ul {
list-style: none;
margin: 0;
padding: 0 0.5em 0.5em 0.5em;
}
.contents-1 .editsection {
float: none;
position: absolute;
right: 0.5em;
top: 0.5em;
}
.contents-1 li span.code-list, .contents-2 li span.code-list {
float:left;
width:4em;
font-weight:bold;
}
.contents-1 li span.code-list-wide, .contents-2 li span.code-list-wide {
float:left;
width:8em;
}
.contents-1 li span.r-list, .contents-2 li span.r-list {
float:right;
width:4em;
}
.sub-contents ul {
padding-top: 0.5em;
}
.sub-contents li {
display: inline;
}
.sub-contents li::before {
content: "\2022"
}
.sub-contents li:first-child {
font-weight: bold;
}
.sub-contents li:first-child::before,
.sub-contents li:nth-child(2)::before {
content: ""
}
/*
* Super-text effect for contents-1 toc tables.
*/
span.tocsup {
vertical-align: baseline;
position: relative;
top: -0.6em;
font-size: 75%;
font-weight: bold;
}
/*
* Super-text effect for internal reference links.
*/
a[href="#References"] {
vertical-align: baseline;
position: relative;
top: -0.75em;
font-size: 75%;
font-weight: bold;
}
div#ref-section li a[href="#References"],
div.contents-1 ul li a[href="#References"] {
vertical-align: inherit ;
position: inherit;
font-size: inherit;
font-weight: inherit;
}
h3 + ul li a:first-child[href="#References"],
#toc li a:first-child[href="#References"] {
vertical-align: inherit ;
position: inherit;
font-size: inherit;
font-weight: inherit;
}
/*
*
* Chris Coyier - https://css-tricks.com/snippets/css/corner-ribbon/
*/
.ribbon-wrapper-green, .ribbon-wrapper-red, .ribbon-wrapper-purple {
width: 88px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
pointer-events: none;
}
.ribbon-green, .ribbon-red, .ribbon-purple {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 2px 0;
left: -9px;
top: 24px;
width: 120px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green {
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-red {
background-color: #F15F7F;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f3738e), to(#C0424A));
background-image: -webkit-linear-gradient(top, #f3738e, #C0424A);
background-image: -moz-linear-gradient(top, #f3738e, #C0424A);
background-image: -ms-linear-gradient(top, #f3738e, #C0424A);
background-image: -o-linear-gradient(top, #f3738e, #C0424A);
color: #533f69
}
.ribbon-red:before, .ribbon-red:after {
content: "";
border-top: 3px solid #A00C05;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-purple {
background-color: #a080ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a080ff), to(#6F63C8));
background-image: -webkit-linear-gradient(top, #a080ff, #6F63C8);
background-image: -moz-linear-gradient(top, #a080ff, #6F63C8);
background-image: -ms-linear-gradient(top, #a080ff, #6F63C8);
background-image: -o-linear-gradient(top, #a080ff, #6F63C8);
color: #000;
}
.ribbon-purple:before, .ribbon-purple:after {
content: "";
border-top: 3px solid #4F2D85;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before, .ribbon-red:before, .ribbon-purple:before {
left: 0;
}
.ribbon-green:after, .ribbon-red:after, .ribbon-purple:after {
right: 0;
}
/*
* Making list alternate entries slightly different background colours:
*/
.has-list > ul > li:nth-child(odd) {
background-color: transparent;
}
.has-list > ul > li:nth-child(even) {
background-color: #eee;
}
.has-list > ul > li > a:first-child {
font-weight:bold;
text-decoration:underline;
}
/*
* Hovering menu. No so usable on mobile but ok.
*/
.c-toc .sub-hidden {
background-color:#fafafa;
position: absolute;
top: -1px;
left: -1px;
z-index: 4;
width: 100%;
margin: 0;
padding: 0;
border:1px solid black;
visibility:hidden;
overflow:visible;
}
.c-toc:hover .sub-hidden{
visibility:visible;
}
.d-toc div:nth-child(2) {
background-color:#fafafa;
position: absolute;
top: -1px;
left: -1px;
z-index: 4;
width: 100%;
margin: 0;
padding: 0;
border:1px solid black;
visibility:hidden;
overflow:visible;
}
.d-toc:hover div:nth-child(2) {
visibility:visible;
}
.e-toc {
position:absolute;
top:0;
}
.e-toc p:first-child {
width: 4em;
height: 4em;
background: transparent;
margin: 0;
border-top-left-radius: 100%;
border: 1px solid #aaa;
border-right: none;
border-bottom: none;
}
.e-toc div:nth-child(2) {
background-color:#fafafa;
position: absolute;
top: -1px;
left: -1px;
z-index: 4;
width: 100%;
margin: 0;
padding: 0;
border:1px solid black;
visibility:hidden;
overflow:visible;
}
.e-toc:hover div:nth-child(2) {
visibility:visible;
width:255px;
top:-5px;
left:0;
}
.f-toc {
position:absolute;
top:0;
}
.fx-toc p:first-child {
width: 4em;
height: 4em;
background: transparent;
margin: 0;
border-top-left-radius: 100%;
border: 1px solid #aaa;
border-right: none;
border-bottom: none;
}
.f-toc .contents-1 {
background-color:#fafafa;
position: absolute;
top: -1px;
left: -1px;
z-index: 4;
width: 100%;
margin: 0;
padding: 0;
border:1px solid black;
visibility:hidden;
overflow:visible;
}
.f-toc:hover .contents-1 {
visibility:visible;
width:255px;
top:-5px;
left:0;
}
/*
* Hamburger icon (without animations since we can't toggle).
* http://callmenick.com/post/animating-css-only-hamburger-menu-icons
*/
.c-hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 250px;
height: 72px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border: none;
cursor: pointer;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger span {
display: block;
position: relative;
top: 8px;
left: 2px;
right: 2px;
height: 2px;
width:14px;
background: #ccc;
}
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 2px;
background-color: #ccc;
content: "";
}
.c-hamburger span::before {
top: -5px;
}
.c-hamburger span::after {
bottom: -5px;
}
.c-hamburger-pill{
position: absolute;
display: block;
left: 15px;
top: 15px;
width: 18px;
height: 18px;
}
/*
* Make heading capitalize each word (even conjunctions and articles etc)
* Removed this: it is causing me to make too many mistakes when cross-linking.
*/
/*h3, h4, h5 {
text-transform: capitalize;
}*/
div.MABL-block > p {
display: inline-block;
float: left;
}
/*
* was display:none; and comment was "Done to remove <p> tags inside gallery cells - see CSID template."
* Done to remove the need for the deprecated html tag <center>
*/
.gallerytext p {
display: block;
text-align: center;
}
/*
* For those rare cases where you want to put a bullet list in the space to the right of the table of contents blocks
* that we use on almost every page...
*/
div.ul-push-bullet ul {
list-style-position: inside;
}
/*
* This forces ul's immediately after the closing </gallery> tag to limit their width.
*/
ul.mw-gallery-traditional + ul {
max-width: 640px;
}
/*
*
*/
@media screen and (min-width: 56.5em) {
div.frontpage-banner {
background:url('http://www.miniatures-workshop.com/lostminiswiki/images/0/01/Title2.jpg') no-repeat;
min-height: 129px;
width: 718px;
}
}
@media screen and (max-width:56.5em) {
div.frontpage-banner {
background:url('http://www.miniatures-workshop.com/lostminiswiki/images/2/26/Title3.png') no-repeat;
min-height: 244px;
width: 100%;
margin-top: 2em;
background-position: center;
}
}
/*
* LMW skin interface changes
*/
div.lmw-column-one {
position: fixed;
top: 1.3em;
max-width: 11.6em;
margin-left: 0.2em;
}
div#content {
min-height: 50em;
}
.jumpbox-1 {
background-color: #f9f9f9;
margin-top: 0.1em;
width: 1em;
height: 1em;
border: 1px solid #aaa;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
font-size: 300%;
overflow: hidden;
text-align: center;
vertical-align: middle;
line-height: 1em;
display: inline-block;
}
#p-logo a {
width: 9em;
height: 146px;
background-repeat: no-repeat;
background-position: center center;
text-decoration: none;
border-radius: 100%;
border: 4px solid #fff;
display: inline-block;
background-color: #37B545;
}
body.page-Main_Page h1.firstHeading {
display: none;
}
