MediaWiki:Common.css
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: 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.
/* CSS placed here will be applied to all skins */
/* Edit section on the right */
.ltr .mw-editsection {
float: right;
}
.rtl .mw-editsection {
float: left;
}
/* Gehsi div classes */
div.mw-geshi {
margin: 1em 0;
border: 1px solid #7777FF;
text-align: left;
padding:10px 10px;
clear: both;
background-color: #DDDDFF;
font-size: 1.1em;
}
div.mw-geshi-error {
margin: 1em 0;
border: 1px solid #FF7777;
text-align: left;
padding:10px 10px;
clear: both;
background-color: #FFDDDD;
font-size: 1.1em;
}
div.mw-geshi-valid {
margin: 1em 0;
border: 1px solid #77FF77;
text-align: left;
padding:10px 10px;
clear: both;
background-color: #DDFFDD;
font-size: 1.1em;
}
/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
th.mbox-text, td.mbox-text { /* The message body cell(s) */
border: none;
padding: 0.25em 0.9em; /* 0.9em left/right */
width: 100%; /* Make all mboxes the same width regardless of text length */
vertical-align: top;
/*font-size: 16px;*/
font-size: 100%;
line-height: 1.5em;
}
td.mbox-image { /* The left image cell */
border: none;
padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */
text-align: center;
}
td.mbox-imageright { /* The right image cell */
border: none;
padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */
text-align: center;
}
td.mbox-empty-cell { /* An empty narrow cell */
border: none;
padding: 0px;
width: 1px;
}
/* FM Box */
table.fmbox {
clear: both;
margin: 0.2em 0;
width: 100%;
border: 1px solid #ccc;
background: #f9f9f9; /* Default "system" gray */
text-align:left;
}
table.fmbox-system {
background: #f9f9f9;
}
/* ART DECOR tables */
table.artdecorwiki {
border: 1px solid #aaa;
background-color: #f9f9f9;
text-align:left;
margin: 0.2em;
}
.artdecorwiki td, .artdecorwiki th {
vertical-align: top;
text-align: left;
line-height: 1.5em;
border: none;
background-color: #fff;
padding: 0.2em;
}
.artdecorwiki th {
font-weight: bold;
background-color: #ECFFE0;
}
.imgleftmargin {
margin-left: 10px;
}
.imgrightmargin {
margin-right: 10px;
}
/**
Special CSS definitions to correctly style ART-DECOR artefacts
******************************
Copyright (C) 2013-2015 ART-DECOR expert group art-decor.org
Author: Kai U. Heitmann
*/
table.artdecor,
table.artdecor tr,
table.artdecor td,
table.artdecor th,
table.artdecor p{
font-size:12px;
font-weight:normal;
color:#333333;
}
table.artdecor th{
background-color:#ece9e4;
color:#7a6e62;
font-weight:bold;
}
table.artdecor tr{
border: none;
}
tr.explabel{
background-color:#E6E6FA;
}
td.explabelred{
background-color:#FFEEEE;
}
td.explabelgreen{
background-color:#E0FFE0;
}
td.explabelblue{
background-color:#E6E6FA;
}
td.conf{
width:107pt;
font-size:11px;
border:1px solid #C3C0B2;
font-weight:normal;
color:#e16e22;
background-color:#ece9e4;
}
td.stron{
width:107pt;
font-size:11px;
font-weight:normal;
border:1px solid #c0c0c0;
color:#ffffff;
background-color:#ff99cc;
}
td.defvar{
width:107pt;
font-size:11px;
font-weight:normal;
border:1px solid #c0c0c0;
color:#ffffff;
background-color:#6699cc;
}
td.tabtab{
border:1px solid #C0C0C0;
background-color:#FFFFFF;
}
td.nodetype{
width:107pt;
border:1px solid #C3C0B2;
font-size:11px;
font-weight:normal;
color:#e16e22;
background-color:#dddddd;
}
td.nodename{
font-size:16px;
font-weight:bold;
color:#e16e22;
background-color:#dddddd;
}
tr.headinglabel{
background-color:#99CCFF;
}
tr.desclabel{
background-color:#FAFAD2;
}
tr.descitem{
background-color:#FAFAD2;
}
tr.vslabel{ /*background-color : #FFFF99; */
background-color:#CCFFFF;
}
.code{
font-family:"Courier New", Courier, mono;
font-size:12px;
padding:5px;
border:1px dashed #C0C0C0;
}
.ppsign{
color:#000080;
}
.ppelement{
color:#000080;
}
.ppattribute{ /*color : #ffa500;*/
color:#D2691E;
}
.ppcontent{
color:#a52a2a;
}
.pptext{
color:#808080;
}
.ppnamespace{
color:#0000ff;
}
h{
background-color:#ece9e4;
color:#7a6e62;
font-weight:bold;
}
/**
Special CSS definitions for ART-DECOR timelines
******************************
Copyright (C) 2020ART-DECOR expert group art-decor.org
Author: Kai U. Heitmann
*/
timeline h1{
text-align: center;
font-weight: bold;
margin-top: 0;
}
timeline p{
text-align: center;
margin-bottom: 0;
}
.hexa{
border: 0px;
float: left;
text-align: center;
height: 35px;
width: 60px;
font-size: 22px;
background: #f0f0f0;
color: #3c3c3c;
position: relative;
margin-top: 15px;
}
.hexa:before{
content: "";
position: absolute;
left: 0;
width: 0;
height: 0;
border-bottom: 15px solid #f0f0f0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
top: -15px;
}
.hexa:after{
content: "";
position: absolute;
left: 0;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 15px solid #f0f0f0;
bottom: -15px;
}
.timeline {
position: relative;
padding: 0;
width: 80%;
margin: 0;
margin-top: 60px;
list-style: none;
font: 12px/1.231 "trebuchet ms", helvetica, sans-serif;
color: #75757;
}
.timeline:before {
position: absolute;
left: 50%;
top: 0;
content: ' ';
display: block;
width: 2px;
height: 100%;
margin-left: -1px;
background: rgb(213,213,213);
background: -moz-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
background: -o-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
background: -ms-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
background: linear-gradient(to bottom, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
z-index: 5;
}
.timeline li {
/*padding: 2em 0;*/
}
.timeline .hexa{
width: 16px;
height: 10px;
position: absolute;
background: #f3a800;
z-index: 5;
left: 0;
right: 0;
margin-left:auto;
margin-right:auto;
top: -30px;
margin-top: 0;
}
.timeline .hexa:before {
border-bottom: 4px solid #f3a800;
border-left-width: 8px;
border-right-width: 8px;
top: -4px;
}
.timeline .hexa:after {
border-left-width: 8px;
border-right-width: 8px;
border-top: 4px solid #f3a800;
bottom: -4px;
}
.timeline pre{
color: #222;
background: #fff;
font-family: serif;
white-space: normal;
}
.direction-l,
.direction-r {
float: none;
width: 100%;
text-align: center;
}
.flag-wrapper {
text-align: center;
position: relative;
}
.flag {
position: relative;
display: inline;
background: rgb(219, 243, 178);
/*font-weight: 600;*/
z-index: 15;
padding: 6px 10px;
text-align: left;
border-radius: 5px;
}
.direction-l .flag:after,
.direction-r .flag:after {
content: "";
position: absolute;
left: 50%;
top: -15px;
height: 0;
width: 0;
margin-left: -8px;
border: solid transparent;
border-bottom-color: rgb(255,255,255);
border-width: 8px;
pointer-events: none;
}
.direction-l .flag {
-webkit-box-shadow: -2px 2px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
-moz-box-shadow: -2px 2px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
box-shadow: -2px 2px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}
.direction-r .flag {
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
box-shadow: 2px 2px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}
.time-wrapper {
display: block;
position: relative;
margin: 4px 0 0 0;
z-index: 14;
line-height: 1em;
vertical-align: middle;
color: #fff;
}
.direction-l .time-wrapper {
float: none;
}
.direction-r .time-wrapper {
float: none;
}
.timelinetime {
background: #f3a800;
display: inline-block;
padding: 8px;
}
.timelinedesc {
position: relative;
margin: 1em 0 0 0;
padding: 1em;
background: rgb(255, 221, 142);
-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
box-shadow: 0 0 1px rgba(0,0,0,0.20);
z-index: 15;
}
.direction-l .desc,
.direction-r .desc {
position: relative;
margin: 1em 1em 0 1em;
padding: 1em;
z-index: 15;
}
@media(min-width: 768px){
.timeline {
width: 550px;
margin: 0 auto;
margin-top: 20px;
}
.timeline li:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.timeline .hexa {
left: -28px;
right: auto;
top: 8px;
}
.timeline .direction-l .hexa {
left: auto;
right: -28px;
}
.direction-l {
position: relative;
width: 290px;
float: left;
text-align: right;
}
.direction-r {
position: relative;
width: 290px;
float: right;
text-align: left;
}
.flag-wrapper {
display: inline-block;
}
.flag {
/*font-size: 18px;*/
}
.direction-l .flag:after {
left: auto;
right: -16px;
top: 50%;
margin-top: -8px;
border: solid transparent;
border-left-color: rgb(219, 243, 178);
border-width: 8px;
}
.direction-r .flag:after {
top: 50%;
margin-top: -8px;
border: solid transparent;
border-right-color: rgb(219, 243, 178);
border-width: 8px;
left: -8px;
}
.time-wrapper {
display: inline;
vertical-align: middle;
margin: 0;
}
.direction-l .time-wrapper {
float: left;
}
.direction-r .time-wrapper {
float: right;
}
.time {
padding: 5px 10px;
}
.direction-r .desc {
margin: 1em 0 0 0.75em;
}
}
@media(min-width: 992px){
.timeline {
width: 800px;
margin: 0 auto;
margin-top: 20px;
}
.direction-l {
position: relative;
width: 380px;
float: left;
text-align: right;
}
.direction-r {
position: relative;
width: 380px;
float: right;
text-align: left;
}
}