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: Difference between revisions

From DM Live - the Depeche Mode live encyclopedia for the masses
Jump to navigationJump to search
No edit summary
No edit summary
Line 416: Line 416:
}
}


.album-list {
/* TestTest */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
box-sizing: border-box;
}
 
body {
--color-text: #f1f1f1;
    --color-bg: #0c0c0c;
    --color-link: #1ab3de;
    --color-link-hover: #f1f1f1;
--color-deco: #141414;
--color-side: #353535;
font-family: Futura, "futura-pt", sans-serif;
min-height: 100vh;
color: #57585c;
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-top: 10rem;
}
 
/* Page Loader */
.js .loading::before {
content: '';
position: fixed;
z-index: 100000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg);
}
 
.js .loading::after {
content: '';
position: fixed;
z-index: 100000;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
pointer-events: none;
border-radius: 50%;
opacity: 0.4;
background: var(--color-link);
animation: loaderAnim 0.7s linear infinite alternate forwards;
}
 
@keyframes loaderAnim {
to {
opacity: 1;
transform: scale3d(0.5,0.5,1);
}
}
 
a {
text-decoration: none;
color: var(--color-link);
outline: none;
}
 
a:hover,
a:focus {
color: var(--color-link-hover);
outline: none;
}
 
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
 
.message {
position: relative;
z-index: 100;
display: none;
padding: 1em;
text-align: center;
color: var(--color-bg);
background: var(--color-text);
}
 
/* Icons */
.icon {
display: block;
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: currentColor;
}
 
.frame {
position: fixed;
z-index: 10000;
top: 5rem;
left: 0;
width: 100%;
max-width: none;
min-height: 0;
height: 100vh;
padding: 1rem;
pointer-events: none;
}
 
.frame a {
pointer-events: auto;
}
 
/* Header */
.codrops-header {
position: relative;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
}
 
.codrops-header__title {
font-size: 1rem;
font-weight: normal;
line-height: 1;
margin: 0;
}
 
/* Top Navigation Style */
.codrops-links {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
white-space: nowrap;
}
 
.github {
display: block;
padding: 0.25em;
margin: 0 0.25rem;
}
 
.codrops-icon {
display: inline-block;
padding: 0.25em;
margin: 0.25em 0 0 0;
}
 
.slideshow {
position: relative;
overflow: hidden;
margin: 0;
height: 100vh;
width: 100%;
height: calc(100vh - 10rem);
display: grid;
grid-template-columns: 33% 33% 33%;
grid-column-gap: 0.5%;
grid-template-rows: 100%;
grid-template-areas: '... slide ...';
}
 
.slide {
width: 100%;
display: flex;
pointer-events: none;
cursor: pointer;
position: relative;
height: 100%;
grid-area: slide;
}
 
.slideshow--previewopen .slide {
cursor: default;
}
 
.slide--current {
pointer-events: auto;
}
 
.slide__img-wrap {
width: 100%;
overflow: hidden;
z-index: 100;
height: 80%;
top: 10%;
position: absolute;
}
 
.slideshow__deco {
grid-area: slide;
background: var(--color-deco);
width: 100%;
height: 80%;
align-self: center;
position: relative;
margin: -40px 0 0 0;
right: -20px;
}
 
.nav {
position: absolute;
background: none;
width: 3rem;
height: 3rem;
z-index: 1000;
border: 0;
padding: 0;
margin: 0;
pointer-events: none;
transition: transform 0.8s, opacity 0.8s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}


.nav--next {
bottom: 1rem;
right: 1rem;
}
}


.image-box {
.icon--navarrow-next {
    position: relative;
transform: rotate(45deg);
    margin: auto;
    overflow: hidden;
    width: 300px;
}
}
.image-box img {
 
    max-width: 100%;
.nav--prev {
    transition: all 0.3s;
top: 1rem;
    display: block;
left: 1rem;
    width: 100%;
}
    height: auto;
 
    transform: scale(1);
.icon--navarrow-prev {
    overflow: hidden;
transform: rotate(-135deg);
}
 
.slideshow--previewopen .nav {
opacity: 0;
transition-duration: 0.4s;
}
 
.slideshow--previewopen .nav--next {
transform: translate3d(100%, 100%, 0);
}
 
.slideshow--previewopen .nav--prev {
transform: translate3d(-100%, -100%, 0);
}
 
.slide__img {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: cover;
background-position: 50% 50%;
position: absolute;
pointer-events: none;
transform: scale3d(1.01,1.01,1);
}
 
.js .slide__img-wrap,
.js .slide__title-wrap,
.js .slide__side {
opacity: 0;
pointer-events: none;
}
 
.js .slide--current .slide__img-wrap {
opacity: 1;
pointer-events: auto;
}
 
.slide--visible .slide__img-wrap {
pointer-events: auto;
}
 
.slide__title-wrap {
justify-self: flex-end;
width: 100%;
position: relative;
z-index: 1000;
}
 
.slide__number {
display: block;
font-size: 2rem;
font-weight: bold;
}
 
.slide__number::before {
content: "\2014";
display: inline-block;
margin: 0 1rem 0 0;
}
 
.slide__title,
.slide__subtitle,
.slide__side {
display: none;
}
 
.content {
position: fixed;
top: 10rem;
left: 0;
width: 100%;
height: calc(100% - 10rem);
pointer-events: none;
z-index: 100;
}
 
.content__item {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
padding: 10vh 5vw;
overflow: auto;
}
 
.content__item--current,
.content__item--current ~ .content__close {
pointer-events: auto;
}
 
.content__close {
position: absolute;
top: 1rem;
left: 1rem;
background: none;
color: currentColor;
border: 0;
margin: 0;
padding: 0;
}
 
.icon--longarrow {
width: 2rem;
}
 
.content__close:focus {
outline: none;
}
 
.content__number {
font-weight: bold;
}
 
.content__number::before {
content: "\2014";
display: inline-block;
margin: 0 1rem 0 0;
}
 
.content__title {
margin: 0.5rem 0;
font-size: 2rem;
}
 
.content__subtitle {
margin: 0 0 0.5rem;
font-size: 1rem;
font-weight: normal;
}
 
.content__text {
font-size: 0.85rem;
}
 
.js .content__title,
.js .content__subtitle,
.js .content__number,
.js .content__text,
.js .content__close {
opacity: 0;
}
}


.image-box:hover img {
@media screen and (min-width: 53em) {
    transform: scale(1.1);
body {
    overflow: hidden;
padding: 0;
}
.frame {
top: 0;
display: grid;
align-items: start;
justify-items: end;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-template-areas: '... header';
}
.codrops-header {
grid-area: header;
padding: 1rem 0.5rem;
display: block;
}
.codrops-header__title {
padding: 0 0.5rem;
}
.codrops-links {
margin: 0.25rem auto 0 0.25rem;
}
.slideshow {
height: 100vh;
grid-template-columns: 27% 27% 27%;
grid-column-gap: 9.5%;
}
.slide {
padding: 10vh 0 7vh;
flex-direction: column;
justify-content: space-between;
}
.slide__side {
margin: 0 0 0 -1.85rem;
}
.slide__title-wrap {
margin: 0 0 0 -1.85rem;
}
.slide__title,
.slide__subtitle,
.slide__side {
display: block;
}
.slide__title {
font-size: 3.25rem;
margin: 0 0 0.25rem;
}
.slide__subtitle {
font-weight: normal;
margin: 0;
min-height: 50px;
}
.slide__side {
color: var(--color-side);
position: relative;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
transform: rotate(180deg);
z-index: 1000;
}
.content {
top: 0;
height: 100%;
}
.content__item {
padding: calc(10vh + 5rem) 0 7vh;
width: 50.5%;
right: 7.5%;
overflow: visible;
}
.content__close {
left: 42%;
top: calc(10vh + 1rem);
}
.content__number {
position: absolute;
bottom: 7vh;
right: 0;
font-size: 2rem;
}
.content__title {
font-size: 7vw;
}
.content__subtitle {
font-size: 1.15rem;
margin-bottom: 7.5vh;
}
.content__text {
font-size: 0.95rem;
column-count: 2;
column-gap: 2rem;
max-width: 600px;
text-align: justify;
}
}
}

Revision as of 06:57, 6 November 2019

/* CSS placed here will be applied to all skins */
/* Be sure to update Mobile.css as well! Song page infobox styles must also appear in Mobile.css in order to render on the mobile site. */

.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;
  margin-bottom: 1.2em;
  padding: 0.2em;
  text-align: center;
}

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

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

/* Song page infobox styles */
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-My_Joy 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;
}

body.page-Home table#InfoboxShell.round {
background: rgb(44,204,239) !important;
background: linear-gradient(181deg, rgba(44,204,239,1) 0%, rgba(39,106,139,1) 44%, rgba(130,85,65,1) 48%, rgba(105,214,226,1) 51%, rgba(254,251,246,1) 54%, rgba(254,251,246,1) 66%, rgba(233,77,33,1) 72%, rgba(227,99,45,1) 77%, rgba(204,89,58,1) 83%, rgba(221,114,78,1) 100%) !important;
}

body.page-I_Feel_Loved table#InfoboxShell.round {
background: rgb(177,174,167) !important;
background: linear-gradient(181deg, rgba(177,174,167,1) 0%, rgba(186,171,133,1) 21%, rgba(174,135,56,1) 30%, rgba(182,173,154,1) 68%, rgba(164,170,204,1) 89%, rgba(140,152,190,1) 99%) !important;
}

body.page-Dirt table#InfoboxShell.round {
background: rgb(177,174,167) !important;
background: linear-gradient(181deg, rgba(177,174,167,1) 0%, rgba(186,171,133,1) 21%, rgba(174,135,56,1) 30%, rgba(182,173,154,1) 68%, rgba(164,170,204,1) 89%, rgba(140,152,190,1) 99%) !important;
}

body.page-Only_When_I_Lose_Myself table#InfoboxShell.round {
background: rgb(172,110,33) !important;
background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
}

body.page-Surrender table#InfoboxShell.round {
background: rgb(172,110,33) !important;
background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
}

body.page-Headstar table#InfoboxShell.round {
background: rgb(172,110,33) !important;
background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
}

body.page-Cover_Me table#InfoboxShell.round {
background: rgb(30,49,107) !important;
background: linear-gradient(107deg, rgba(30,49,107,1) 0%, rgba(18,24,56,1) 18%, rgba(7,7,7,1) 37%, rgba(87,113,189,1) 57%, rgba(169,180,226,1) 67%, rgba(225,232,247,1) 76%, rgba(169,180,226,1) 82%, rgba(18,18,26,1) 99%) !important;
}

body.page-Welcome_To_My_World table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Angel table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Secret_To_The_End table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-My_Little_Universe table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Slow table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Broken table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-The_Child_Inside table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Soft_Touch_/_Raw_Nerve table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Alone table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Goodbye table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Long_Time_Lie table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Happens_All_The_Time table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Always table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Should_Be_Higher table#InfoboxShell.round {
background: rgb(42,12,20) !important;
background: linear-gradient(190deg, rgba(42,12,20,1) 0%, rgba(100,45,39,1) 19%, rgba(130,34,37,1) 38%, rgba(46,23,34,1) 75%, rgba(140,54,43,1) 92%, rgba(179,115,89,1) 100%) !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);
  }
}

/* Top navbar */
.navigation {
  height: 35px;
  background: #07080d;
}
.brand {
  position: absolute;
  padding-left: 20px;
  padding-right: 20px;
  float: left;
  line-height: 35px;
  text-transform: lowercase;
  font-size: 1.4em !important;
}
.brand a, .brand a:visited {
  color: #fbfbfb;
  text-decoration: none;
}
.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}
nav {
  float: right;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
}
nav ul li a, nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 35px;
  background: #07080d;
  color: #fbfbfb;
  text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
  background: #9d68d9;
  color: #fbfbfb;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #07080d;
  height: 35px;
  width: 70px;
  z-index: 1;
}
@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
  }
  nav {
    width: 100%;
    padding: 35px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }
  .nav-dropdown {
    position: static;
  }
}
@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 5px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #fbfbfb;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}
.brand a, .brand a:visited {
  font-size: 1.35em;
  z-index: 1;
}
nav {
  font-size: 1.4em;
  z-index: 1;
}
nav:hover {
  text-decoration: none !important;
  z-index: 1;
}
nav ul li ul li a {
  font-size: small;
  line-height: 15px;
  z-index: 1;
}
nav ul li a, nav ul li a:visited {
  text-decoration: none !important;
  z-index: 1;
}
.navigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Content theft protection */
p, h1, h2, h3, body { 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none;
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
}

/* TestTest */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
	box-sizing: border-box;
}

body {
	--color-text: #f1f1f1;
    --color-bg: #0c0c0c;
    --color-link: #1ab3de;
    --color-link-hover: #f1f1f1;
	--color-deco: #141414;
	--color-side: #353535;
	font-family: Futura, "futura-pt", sans-serif;
	min-height: 100vh;
	color: #57585c;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-top: 10rem;
}

/* Page Loader */
.js .loading::before {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	outline: none;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

.message {
	position: relative;
	z-index: 100;
	display: none;
	padding: 1em;
	text-align: center;
	color: var(--color-bg);
	background: var(--color-text);
}

/* Icons */
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}

.frame {
	position: fixed;
	z-index: 10000;
	top: 5rem;
	left: 0;
	width: 100%;
	max-width: none;
	min-height: 0;
	height: 100vh;
	padding: 1rem;
	pointer-events: none;
}

.frame a {
	pointer-events: auto;
}	

/* Header */
.codrops-header {
	position: relative;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.codrops-header__title {
	font-size: 1rem;
	font-weight: normal;
	line-height: 1;
	margin: 0;
}

/* Top Navigation Style */
.codrops-links {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	white-space: nowrap;
}

.github {
	display: block;
	padding: 0.25em;
	margin: 0 0.25rem;
}

.codrops-icon {
	display: inline-block;
	padding: 0.25em;
	margin: 0.25em 0 0 0;
}

.slideshow {
	position: relative;
	overflow: hidden;
	margin: 0;
	height: 100vh;
	width: 100%;
	height: calc(100vh - 10rem);
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-column-gap: 0.5%;
	grid-template-rows: 100%;
	grid-template-areas: '... slide ...';
}

.slide {
	width: 100%;
	display: flex;
	pointer-events: none;
	cursor: pointer;
	position: relative;
	height: 100%;
	grid-area: slide;
}

.slideshow--previewopen .slide {
	cursor: default;
}

.slide--current {
	pointer-events: auto;
}

.slide__img-wrap {
	width: 100%;
	overflow: hidden;
	z-index: 100;
	height: 80%;
	top: 10%;
	position: absolute;
}

.slideshow__deco {
	grid-area: slide;
	background: var(--color-deco);
	width: 100%;
	height: 80%;
	align-self: center;
	position: relative;
	margin: -40px 0 0 0;
	right: -20px;
}

.nav {
	position: absolute;
	background: none;
	width: 3rem;
	height: 3rem;
	z-index: 1000;
	border: 0;
	padding: 0;
	margin: 0;
	pointer-events: none;
	transition: transform 0.8s, opacity 0.8s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.nav--next {
	bottom: 1rem;
	right: 1rem;
}

.icon--navarrow-next {
	transform: rotate(45deg);
}

.nav--prev {
	top: 1rem;
	left: 1rem;
}

.icon--navarrow-prev {
	transform: rotate(-135deg);
}

.slideshow--previewopen .nav {
	opacity: 0;
	transition-duration: 0.4s;
}

.slideshow--previewopen .nav--next {
	transform: translate3d(100%, 100%, 0);
}

.slideshow--previewopen .nav--prev {
	transform: translate3d(-100%, -100%, 0);
}

.slide__img {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-size: cover;
	background-position: 50% 50%;
	position: absolute;
	pointer-events: none;
	transform: scale3d(1.01,1.01,1);
}

.js .slide__img-wrap, 
.js .slide__title-wrap,
.js .slide__side {
	opacity: 0;
	pointer-events: none;
}

.js .slide--current .slide__img-wrap {
	opacity: 1;
	pointer-events: auto;
}

.slide--visible .slide__img-wrap {
	pointer-events: auto;
}

.slide__title-wrap {
	justify-self: flex-end;
	width: 100%;
	position: relative;
	z-index: 1000;
}

.slide__number {
	display: block;
	font-size: 2rem;
	font-weight: bold;
}

.slide__number::before {
	content: "\2014";
	display: inline-block;
	margin: 0 1rem 0 0;
}

.slide__title,
.slide__subtitle,
.slide__side {
	display: none;
}

.content {
	position: fixed;
	top: 10rem;
	left: 0;
	width: 100%;
	height: calc(100% - 10rem);
	pointer-events: none;
	z-index: 100;
}

.content__item {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	padding: 10vh 5vw;
	overflow: auto;
}

.content__item--current,
.content__item--current ~ .content__close {
	pointer-events: auto;
}

.content__close {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: none;
	color: currentColor;
	border: 0;
	margin: 0;
	padding: 0;
}

.icon--longarrow {
	width: 2rem;
}

.content__close:focus {
	outline: none;
}

.content__number {
	font-weight: bold;
}

.content__number::before {
	content: "\2014";
	display: inline-block;
	margin: 0 1rem 0 0;
}

.content__title {
	margin: 0.5rem 0;
	font-size: 2rem;
}

.content__subtitle {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: normal;
}

.content__text {
	font-size: 0.85rem;
}

.js .content__title,
.js .content__subtitle,
.js .content__number,
.js .content__text,
.js .content__close {
	opacity: 0;
}

@media screen and (min-width: 53em) {
	body {
		padding: 0;
	}
	.frame {
		top: 0;
		display: grid;
		align-items: start;
		justify-items: end;
		grid-template-columns: 50% 50%;
		grid-template-rows: 100%;
		grid-template-areas: '... header';
	}
	.codrops-header {
		grid-area: header;
		padding: 1rem 0.5rem;
		display: block;
	}
	.codrops-header__title {
		padding: 0 0.5rem;
	}
	.codrops-links {
		margin: 0.25rem auto 0 0.25rem;
	}
	.slideshow {
		height: 100vh;
		grid-template-columns: 27% 27% 27%;
		grid-column-gap: 9.5%;
	}
	.slide {
		padding: 10vh 0 7vh;
		flex-direction: column;
		justify-content: space-between;
	}
	.slide__side {
		margin: 0 0 0 -1.85rem;
	}
	.slide__title-wrap {
		margin: 0 0 0 -1.85rem;
	}
	.slide__title,
	.slide__subtitle,
	.slide__side {
		display: block;
	}
	.slide__title {
		font-size: 3.25rem;
		margin: 0 0 0.25rem;
	}
	.slide__subtitle {
		font-weight: normal;
		margin: 0;
		min-height: 50px;
	}
	.slide__side {
		color: var(--color-side);
		position: relative;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		z-index: 1000;
	}
	.content {
		top: 0;
		height: 100%;
	}
	.content__item {
		padding: calc(10vh + 5rem) 0 7vh;
		width: 50.5%;
		right: 7.5%;
		overflow: visible;
	}
	.content__close {
		left: 42%;
		top: calc(10vh + 1rem);
	}
	.content__number {
		position: absolute;
		bottom: 7vh;
		right: 0;
		font-size: 2rem;
	}
	.content__title {
		font-size: 7vw;
	}
	.content__subtitle {
		font-size: 1.15rem;
		margin-bottom: 7.5vh;
	}
	.content__text {
		font-size: 0.95rem;
		column-count: 2;
		column-gap: 2rem;
		max-width: 600px;
		text-align: justify;
	}
}
Retrieved from "https://dmlive.wiki/w/index.php?title=MediaWiki:Common.css&oldid=35123"