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;
}
/* Timeline CSS */
/* Media Queries */
@mixin mq-xs {
@media (min-width: 320px) {
@content;
}
}
@mixin mq-sm {
@media (min-width: 480px) {
@content;
}
}
@mixin mq-md {
@media (min-width: 720px) {
@content;
}
}
@mixin mq-lg {
@media (min-width: 1000px) {
@content;
}
}
$background: #f7f7f7;
$box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
$border: 1px solid rgba(191, 191, 191, 0.4);
$items: 5;
$rows: ceil($items/2);
/* Card sizing */
$card-height: 400px;
$card-width: 450px;
$inner-margin: 15px;
$number-size: 35px;
$stagger: 180px;
$outer-margin: 90px;
$marker-size: 9px;
/* Colors */
$steps: #46b8e9;
$colors: #46b8e9,
#3ee9d1,
#ce43eb,
#4d92eb;
$timeline: #bdbdbd;
/* Calculations */
$container-height: $rows * ($card-height + $outer-margin) + $stagger;
$container-width: $card-width*2 + $outer-margin*3;
$head-height: $number-size + 50;
$body-height: $card-height - $head-height;
$marker-dist: $card-width + $outer-margin/2 - $marker-size/2;
/* Placeholders */
@include mq-lg {
%arrow {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
%marker {
position: absolute;
content: "";
width: $marker-size;
height: $marker-size;
background-color: $timeline;
border-radius: $marker-size;
box-shadow: 0px 0px 2px 8px $background;
}
}
/* Some Cool Stuff */
$counter: $items - $rows + 2;
@for $i from 1 through $rows {
.demo-card:nth-child(#{$i*2-1}) { order: $i }
.demo-card:nth-child(#{$i*2}) { order: $counter }
$counter: $counter + 1;
}
/* Border Box */
* {
box-sizing: border-box;
}
/* Fonts */
body {
font-family: Roboto;
}
#timeline {
padding: 100px 0;
background: $background;
border-top: $border;
border-bottom: $border;
h1 {
text-align: center;
font-size: 3rem;
font-weight: 200;
margin-bottom: 20px;
}
p.leader {
text-align: center;
max-width: 90%;
margin: auto;
margin-bottom: 45px;
}
.demo-card-wrapper {
position: relative;
margin: auto;
@include mq-lg {
display: flex;
flex-flow: column wrap;
width: $container-width;
height: $container-height;
margin: 0 auto;
}
&::after {
z-index: 1;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: $border;
@include mq-lg {
border-left: 1px solid $timeline;
}
}
}
.demo-card {
position: relative;
display: block;
margin: 10px auto 80px;
max-width: 94%;
z-index: 2;
@include mq-sm {
max-width: 60%;
box-shadow: $box-shadow;
}
@include mq-md {
max-width: 40%;
}
@include mq-lg {
max-width: $card-width;
height: $card-height;
margin: $outer-margin;
margin-top: $outer-margin/2;
margin-bottom: $outer-margin/2;
&:nth-child(odd) {
margin-right: $outer-margin/2;
.head::after {
@extend %arrow;
border-left-width: 15px;
border-left-style: solid;
left: 100%;
}
.head::before {
@extend %marker;
left: $marker-dist + 1;
}
}
&:nth-child(even) {
margin-left: $outer-margin/2;
.head::after {
@extend %arrow;
border-right-width: 15px;
border-right-style: solid;
right: 100%;
}
.head::before {
@extend %marker;
right: $marker-dist - 1;
}
}
&:nth-child(2) {
margin-top: $stagger;
}
}
.head {
position: relative;
display: flex;
align-items: center;
color: #fff;
font-weight: 400;
.number-box {
display: inline;
float: left;
margin: $inner-margin;
padding: 10px;
font-size: $number-size;
line-height: $number-size;
font-weight: 600;
background: rgba(0, 0, 0, 0.17);
}
h2 {
text-transform: uppercase;
font-size: 1.3rem;
font-weight: inherit;
letter-spacing: 2px;
margin: 0;
padding-bottom: 6px;
line-height: 1rem;
@include mq-sm {
font-size: 165%;
line-height: 1.2rem;
}
span {
display: block;
font-size: 0.6rem;
margin: 0;
@include mq-sm {
font-size: 0.8rem;
}
}
}
}
.body {
background: #fff;
border: $border;
border-top: 0;
padding: $inner-margin;
@include mq-lg {
height: $body-height;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: $inner-margin;
}
img {
display: block;
width: 100%;
}
}
@for $i from 1 through $items {
&--step#{$i} {
$color: nth($colors, ((($i - 1) % 4) + 1));
background-color: $color;
.head::after {
border-color: $color;
}
}
}
}
}