Do you have audio cassette or reel tapes, MiniDisc, DAT, 8mm/Hi8 video tapes, or VHS tapes
containing live recordings, interviews, or demos? Please see Contributing, or e-mail us.

To discuss Depeche Mode with other fans, please consider joining the official Depeche Mode Discord server or independent fan server Discord for the Masses.
To coordinate site work, we recommend the Depeche Mode Live Editor Discord group.

MediaWiki:Common.css

From DM Live - the Depeche Mode live encyclopedia for the masses
Revision as of 23:53, 11 August 2019 by Majora101 (talk | contribs)
Jump to navigationJump to search

Note: After publishing, 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: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
.columnizeme ul {
    display: block;
}

.columnizeme-3 ul {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

/* Header Buttons */
.vectorTabs {
    background-image: none;
    height: 1em;
    z-index: 3;
    text-transform: lowercase;
    padding: 1.9em .8em .3em;
    position: relative;
    margin: 0;
    text-decoration: none;
    font-size: 95%;
    color: #002bb8;
}

.vectorTabs li.selected {
    background-image: none;
    background: #ffffff;
    border-radius: 1em 1em 0 0;
    border-color: #c0c0c0;
    color: #002bb8;
    border-right: 1px solid #c0c0c0;
    border-top: 1px solid #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-radius: 1em 1em 0 0;
}

.vectorTabs li.selected a,
.vectorTabs li.selected a:visited {
    color: #002bb8;
    padding: .4em .8em .3em;
}

.vectorTabs li a {
    padding: .4em .8em .3em;
}

.vectorTabs ul li {
    background-image: none;
    background: #f0f0f2;
    border-radius: 1em 1em 0 0;
    border-color: #393939;
    height: 140%;
    line-height: .8em;
    border-right: 1px solid #c0c0c0;
    border-top: 1px solid #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-radius: 1em 1em 0 0;
}

.vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a {
    padding-top: 1.6em;
}

div.vectorTabs span {
    background-image: none;
}

/* Adjust position of header tabs */

/* #ca-talk { */
/*    margin: 0 0 0 .4em; */
/*} */

/* #ca-edit { */
/*    margin: 0 0 0 -45.85em; */
/*      font-weight: bold; */
/*} */

/* #ca-history { */
/*    margin: 0 0 0 -42.7em; */
/*} */

/* #ca-watch, #ca-unwatch { */
/*    margin: 0 0 0 -36.58em; */
/*} */

#ca-view {
    display: none;
}

#mw-head-base {
    margin-top: -4.3em;
}

/* Sidebar Navigation Menu */
/* Force Navigation header to display */
    #mw-panel #p-logo + .portal h3 {
    display: block;
    margin: 0 0 0 1.3em;
}

#mw-panel .portal h3 {
    margin: 0 0 0 1.3em;
}

#mw-panel .portal .body {
    border-radius: 0 1em 1em 0;
    border-bottom: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-top: 1px solid #c0c0c0;
    font-size: 95%;
    background-color: white;
    color: black;
    border-collapse: collapse;
    padding: 0 .8em .3em .5em;
    background-image: none;
}

#mw-panel .portal {
    margin: 0 1em 0 -1em;
}

#mw-panel .portal .body ul {
    list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
    margin: 0;
    padding: 0.3em 0 0 1em;
    line-height: 1.3em;
}

.toc {
    border-radius: 1em;
    border: 1px solid #d7d7d9;
    background: #f0f0f2;
    display: table;
    zoom: 1;
    padding: 7px;
    font-size: 95%;
}

.Round {
    -webkit-border-radius: 10px;
    background: #ffe;
    border: 2px solid #4E8234;
    margin: 0.10px;
    padding: 4px;
    vertical-align: top;
}

/* Set body text size to 13px */
#bodyContent {
  font-size: 0.813em;
  color: #000000;
}

.mw-body-content {
    line-height: 1.45;
}

.mw-body {
    border-radius: 1em 0 0 1em;
    border-top: 1px solid #d7d7d9;
    border-left: 1px solid #d7d7d9;
    border-bottom: 1px solid #d7d7d9;
}

table.wikitable {
    border-radius: 1em;
    border: 1px solid #d7d7d9;
    padding: 7px;
    font-size: 95%;
    background: #ffffff;
}

#firstHeading {
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-bottom: 0.1em;
    line-height: 1.2em;
    padding-bottom: 0;
    font-size: 1.500em;
    font-weight: normal;
    border-bottom: 1px solid #a2a9b1;
    font-family: sans-serif;
}

.mw-body-content h1 {
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-bottom: 0.1em;
    line-height: 1.2em;
    padding-bottom: 0;
    font-size: 1.500em;
    font-weight: normal;
    border-bottom: 1px solid #a2a9b1;
    font-family: sans-serif;
}

h2 {
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    font-family: sans-serif;
    font-size: 1.5em;
}

.mw-body-content h2 {
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    font-family: sans-serif;
    font-size: 1.5em;
}

.mw-body-content h3 {
    line-height: 1.188em;
}

/* Miscellaneous formatting features */

.sc { font-variant: small-caps }

.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }

div.listcol
{
  padding: 0.5em 1.0em 0.5em 0;
  margin: 0.25em;
  min-width: 21.5%;
  border: 1px solid #aaf;
  float: left;
  clear: right;
  line-height: 130%;
}

div.listcolend
{
  clear: both;
}

/*Gallery*/
li.gallerybox {
    border: 1px solid #d7d7d9;
    display: inline-block;
    vertical-align: top;
    background: #f0f0f2;
    height: 205px;
    border-radius: 10px;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -icab-border-radius: 10px; 
    -o-border-radius: 10px;
}

li.gallerybox div.thumb {
    background-color: #e3e3e5;
    border: 1px solid #d7d7d9;
    margin: 2px 2px 0px 2px;
    text-align: center;
    border-radius: 10px;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -icab-border-radius: 10px; 
    -o-border-radius: 10px;
}

div.gallerytext {
    font-size: 85%;
    line-height: 12px;
    overflow: hidden;
    padding: 0px 4px;
    word-wrap: break-word;
    height: 50px;
}

div.thumbinner {
    text-align: left;
    border: 1px solid #d7d7d9;
    line-height: 1.4em;
    padding: 3px;
    font-size: 94%;
    padding: 3px;
    background-color: #f0f0f2;
    overflow: hidden;
}

/* Make the list of references smaller */
ol.references,
div.reflist,
div.refbegin {
    font-size: 90%;
}

/* Restore category box to pre-MediaWiki 1.18.0 margins */
#catlinks li {
    margin: 0 0;
    padding: 0 0.4em;
}

.mw-plusminus-pos {
    border-bottom: 1px dotted;
    cursor: help;
}

.mw-plusminus-neg {
    border-bottom: 1px dotted;
    cursor: help;
}

.mw-plusminus-null {
    border-bottom: 1px dotted;
    cursor: help;
}

#searchInput {
    width: 10.9em;
    margin: 0;
    font-size: 95%;
}

.sitedir-ltr textarea, .sitedir-ltr input {
    direction: ltr;
}

ul {
    list-style-type: square;
    list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

#simpleSearch {
    border-radius: .3em .3em .3em .3em;
    border-color: #d7d7d9;
    height: 31px !important;
    border-radius: 8px !important;
    right: 5px !important;
    width: 181px !important;
    top: -10px !important;
    padding: 0 .8em .3em .5em;
}

#simpleSearch #searchInput {
    padding: 1em 0 0.2em 0.2em;
    font-size: 0.713em;
    title: "Search"
}

#content {
    margin-left: 160px;
    -moz-border-radius: 1em 0 0 1em;
    -webkit-border-top-left-radius: 1em;
    -webkit-border-bottom-left-radius: 1em;
    border-radius: 1em 0 0 1em;
    border-top: 1px solid #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
}

/* MAIN PAGE DESIGN CSS */
body.page-Main_Page #t-cite,
body.page-Main_Page #footer-info-lastmod,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub,
body.page-Main_Page h1.firstHeading {
display: none !important;
}

body.page-Main_Page #black-plainlinks { color: black !important;
}

/* Link color override */
.blacklinks a, .blacklinks a:link, .blacklinks a:visited, .blacklinks a:hover, .blacklinks a:active, .blacklinks a span {
  color: black !important;
}

.whitelinks a, .whitelinks a:link, .whitelinks a:visited, .whitelinks a:hover, .whitelinks a:active, .whitelinks a span {
  color: white !important;
}

#siteSub { display:block; }

html, body, #mw-head {
background-color: #f1f1f1;
}

* style the edit buttons */
#wpSave {
    -moz-border-radius: 15px;
    background-color: #000000 !important;
    border: 1px outset !important;
}
#wpPreview {
    -moz-border-radius: 15px;
    background-color: #9d68d9 !important;
    border: 1px outset !important;
}
#wpDiff {
    -moz-border-radius: 15px;
    background-color: #9d68d9 !important;
    border: 1px outset !important;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    -moz-border-radius: 15px;
    background-color: #000000 !important;
    border: 1px outset !important;
}

.noticebar {
  background: #efe url('https://dmlive.wiki/images/thumb/5/58/Noticebar_background_rev.png/800px-Noticebar_background_rev.png') no-repeat left center;
  background-color: #f1f1f1;
  border: 1px solid #9d68d9;
  margin-top: 0.2em;
  padding: 0.2em;
  text-align: center;
}

div.blackplainlinks span {
    font-size: 95%;
    color: #002bb8;
}

/* Infobox */
.infobox {
    background: #eee;
    border: 1px solid #aaa;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}
.infobox th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}
.infobox td {
    vertical-align: top;
}

.round {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-icab-border-radius: 10px;
-o-border-radius: 10px;
}

#p-logo {
    margin: 0 0 0 -.5em;
}

body.page-Walking_In_My_Shoes table#InfoboxShell.round {
background: rgb(106,41,145) !important;
background: linear-gradient(155deg, rgba(106,41,145,1) 3%, rgba(111,127,187,1) 24%, rgba(137,175,220,1) 32%, rgba(103,91,165,1) 55%, rgba(101,41,139,1) 65%, rgba(100,43,140,1) 76%, rgba(90,57,78,1) 95%, rgba(65,34,39,1) 100%) !important;
}

body.page-In_Your_Room table#InfoboxShell.round {
background: rgb(234,155,112) !important;
background: linear-gradient(180deg, rgba(234,155,112,1) 0%, rgba(235,124,107,1) 10%, rgba(201,79,90,1) 26%, rgba(184,77,87,1) 32%, rgba(137,74,85,1) 47%, rgba(99,76,86,1) 60%, rgba(215,98,89,1) 63%, rgba(242,191,110,1) 65%, rgba(215,98,89,1) 67%, rgba(99,76,86,1) 69%, rgba(99,76,86,1) 74%, rgba(197,209,101,1) 77%, rgba(99,76,86,1) 80%, rgba(99,76,86,1) 87%, rgba(79,141,118,1) 90%, rgba(62,62,70,1) 94%) !important;
}

body.page-Condemnation table#InfoboxShell.round {
background: rgb(243,243,235) !important;
background: linear-gradient(231deg, rgba(243,243,235,1) 4%, rgba(232,215,208,1) 8%, rgba(210,183,172,1) 11%, rgba(198,168,157,1) 13%, rgba(138,124,113,1) 34%, rgba(62,62,70,1) 66%, rgba(60,62,61,1) 100%) !important;
}

body.page-Never_Let_Me_Down_Again table#InfoboxShell.round {
background: rgb(143,186,202) !important;
background: linear-gradient(148deg, rgba(143,186,202,1) 0%, rgba(163,202,217,1) 14%, rgba(120,149,165,1) 38%, rgba(100,113,132,1) 53%, rgba(96,93,110,1) 66%, rgba(87,82,88,1) 74%, rgba(88,77,81,1) 80%, rgba(59,59,59,1) 100%) !important;
}

body.page-Shake_The_Disease table#InfoboxShell.round {
background: rgb(139,188,218) !important;
background: linear-gradient(148deg, rgba(139,188,218,1) 0%, rgba(195,213,215,1) 16%, rgba(246,240,224,1) 30%, rgba(214,205,210,1) 44%, rgba(238,195,202,1) 51%, rgba(215,169,145,1) 59%, rgba(210,122,120,1) 69%, rgba(203,112,81,1) 80%, rgba(110,75,79,1) 90%) !important;
}

.featured {
background: rgb(255,249,212) !important;
background: linear-gradient(148deg, rgba(255,249,212,1) 0%, rgba(255,252,245,1) 58%, rgba(255,244,230,1) 83%, rgba(237,239,240,1) 100%) !important;
}

.avoid-clicks {
  display: block;
  pointer-events: none;
}

code {
background: rgb(252,228,237) !important;
background: linear-gradient(148deg, rgba(252,228,237,1) 0%, rgba(255,232,204,1) 100%) !important;
}

body.page-Shake_The_Disease table#InfoboxShell.round:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}

.parallax::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  z-index: -1;
  background-image: url('https://dmlive.wiki/images/2/2e/Single-ETS.jpg');
}

.content {
  height: 200vh;
  justify-content: center;
  background: white;
}

.parallax {
  perspective-origin-x: 100%;
}
.parallax__layer {
  transform-origin-x: 100%;
}


@import url('https://fonts.googleapis.com/css?family=Lato:400,900');

$c-base: #444;
$c-dark: #111;
$c-primary: #6fd1bd;
$c-secondary: salmon;

$b-fontSize: 1.6rem;
$b-fontFamily: Lato, Helvetica, Arial, sans-serif;
$b-lineHeight: 1.5;
$b-animType: ease-in-out; 
$b-animSpeed: 0.2s;
$b-shadowSize: 4px;

$Title-color: $c-dark;


// 
// Base styles
//

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  color: $c-base;
  font-size: $b-fontSize;
  font-family: $b-fontFamily;
  line-height: $b-lineHeight;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


// 
// Title
// 

.Title {
  @include responsive-font(8vw, 42px, 75px, 50px);
  color: $Title-color;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  display: inline-block;
}

.Title-sub {
  font-family: $b-fontFamily;
  font-size: 0.34em;
  letter-spacing: 0.16em;
  font-weight: 400;
  text-transform: none;
  display: block;
  margin-top: unitSize(1.5);
  padding-top: unitSize(2);
  border-top: 0.45em solid;
}

.u-shadow {
  text-shadow: $b-shadowSize $b-shadowSize 0 $c-primary;
  transition: text-shadow $b-animSpeed $b-animType;
  @at-root a:hover #{&} {
    text-shadow: (-$b-shadowSize) (-$b-shadowSize) 0 $c-secondary;
  }
}
Retrieved from "https://dmlive.wiki/w/index.php?title=MediaWiki:Common.css&oldid=27621"