Difference between revisions of "MediaWiki:Common.css"

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