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 171: Line 171:
}
}


/* Custom header */
//Start of custom navbar
*{
// Navigation Variables
  margin:0;
$content-width: 1000px;
  padding:0;
$breakpoint: 799px;
  text-decoration:none
$nav-height: 70px;
}
$nav-background: #07080d;
html{
$nav-font-color: #fbfbfb;
    height: 100%;
$link-hover-color: #9d68d9;
    width: 100%;
}
nav {
    background: #07080d;
    position: relative;
    margin: 0 auto;
}


#flexmenu{
// Outer navigation wrapper
   display: flex;
.navigation {
   flex-flow: row wrap;
   height: $nav-height;
   background: $nav-background;
}
}


.logo {
// Logo and branding
    z-index: 123;
.brand {
    padding: 10px;
  position: absolute;
    font: 18px 'helvetica';
  padding-left: 20px;
    color: #FFF;
  padding-right: 20px;
    flex-grow: 1;
  float: left;
    flex-shrink: 1;
  line-height: $nav-height;
    margin-top: 6px;
  text-transform: lowercase;
}
  font-size: 1.4em;
.logo a {
  a,
     color: #9d68d9;
  a:visited {
     text-decoration:none
     color: $nav-font-color;
     text-decoration: none;
  }
}
}


#main-menu{
// Container with no padding for navbar
   align-self: flex-end;  
.nav-container {
}
   max-width: $content-width;
/* keep the drop-downs from being hidden by content wrappers etc */
   margin: 0 auto;
.sub-menu {
   z-index: 1234;
}
}


/* General Menu Styling */
// Navigation
#flexmenu li,
nav {
#flexmenu li a{
  float: right;
    border: 0;
  ul {
     list-style: none;
     list-style: none;
     line-height: 1;
     margin: 0;
    display: inline-block;
    padding: 0;
    position: relative;
    li {
    text-transform: uppercase;
      float: left;
    transition: all ease-in-out .3s;
      position: relative;
      a,
      a:visited {
        display: block;
        padding: 0 20px;
        line-height: $nav-height;
        background: $nav-background;
        color: $nav-font-color;
        text-decoration: none;
        &:hover {
          background: $link-hover-color;
          color: $nav-font-color;
        }
        &:not(:only-child):after {
          padding-left: 4px;
          content: ' ▾';
        }
      } // Dropdown list
      ul li {
        min-width: 190px;
        a {
          padding: 15px;
          line-height: 20px;
        }
      }
    }
  }
}
}


#flexmenu ul li a {
// Dropdown list binds to JS toggle event
    padding: 17px;
.nav-dropdown {
    font-size: 12px;
  position: absolute;
    letter-spacing: 1px;
  display: none;
    text-decoration: none;
  z-index: 1;
    color: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    font-weight: 700;
}
}


#flexmenu ul li.has-sub > a {
/* Mobile navigation */
    padding-right: 30px;
 
// Binds to JS Toggle
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: $nav-background;
  height: $nav-height;
  width: $nav-height;
}
}
/* Drop icon */
@media only screen and (max-width: 798px) {
#flexmenu ul li.has-sub > a:after {
  // Hamburger nav visible on mobile only
    position: absolute;
  .nav-mobile {
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
     display: block;
     display: block;
     background: #fff;
  }
     content: '';
  nav {
  width: 100%;
     padding: $nav-height 0 15px;
     ul {
      display: none;
      li {
        float: none;
        a {
          padding: 15px;
          line-height: 20px;
        }
        ul li a {
          padding-left: 30px;
        }
      }
    }
  }
  .nav-dropdown {
    position: static;
  }
}
}
#flexmenu ul ul li.has-sub > a:after {
@media screen and (min-width: $breakpoint) {
    position: absolute;
  .nav-list {
    top: 16px;
     display: block !important;
    right: 11px;
  }
    width: 8px;
    height: 2px;
    display: block;
    background: #FFF;
    content: '';
}
#flexmenu > ul > li.has-sub > a:before {
    position: absolute;
    top: 19px;
    right: 14px;
     display: block;
    width: 2px;
    height: 8px;
    background: #fff;
    transition: all .25s ease;
}
}
#flexmenu > ul > li.has-sub:hover > a:before {
#nav-toggle {
     top: 23px;
  position: absolute;
     height: 0;
  left: 18px;
}
  top: 22px;
#flexmenu ul ul li.has-sub > a:before {
  cursor: pointer;
  padding: 10px 35px 16px 0px;
  span,
  span:before,
  span:after {
     cursor: pointer;
    border-radius: 1px;
     height: 5px;
    width: 35px;
    background: $nav-font-color;
     position: absolute;
     position: absolute;
    top: 13px;
    right: 14px;
     display: block;
     display: block;
    width: 2px;
    height: 8px;
    background: #FFF;
     content: '';
     content: '';
     transition: all .3s ease;
     transition: all 300ms ease-in-out;
}
  }
#flexmenu ul ul > li.has-sub:hover > a:before {
  span:before {
    top: 17px;
     top: -10px;
    height: 0;
   }
}
   span:after {
#flexmenu ul ul li.has-sub:hover,
    bottom: -10px;
#flexmenu ul li.has-sub ul li.has-sub ul li:hover {
   }
    background: #fff;
   &.active span {
}
     background-color: transparent;
/* Submenu default states, removed by hover gives the animation */
     &:before,
#flexmenu ul ul {
     &:after {
    position: absolute;
      top: 0;
    left: -9999px;
}
#flexmenu li:hover > ul {
    left: auto;
}
#flexmenu ul ul li {
    height: 0;
    background: #262629;
    transition: all .25s ease
}
#flexmenu li:hover > ul > li {
    height: 35px;
}
/* tertiary menu */
#flexmenu ul ul ul {
    margin-left: 100%;
     top: 0;
}
#flexmenu ul ul li a {
    padding: 11px 15px;
    width: 170px;
    font-size: 12px;
    text-decoration: none;
    color: #FFF;
    font-weight: 400;
}
 
/* Content */
#main{
  color: #FFF;
  height: 100vh;
  width: 100vw;
   position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
 
.note {
   width: 80vw;
  max-width: 320px;
  max-height: 200px;
  text-align: center;
  background: #F14F80;
  font-size: 1vw;
  padding: 10px;
  background-clip: padding-box;
}
.note h2 {
  font-weight: 300;
  font-size: 1.5em;
  margin: 10px 0 0;
}
.note p{
   margin: 5px;
}
 
@media screen and (max-width: 768px) {
   /* Center the logo and remove the bar */
    .logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 46px;
        text-align: center;
        padding: 10px 0 0 0;
        color: #fff;
    }
 
  /* Hamburger */
     .button {
        background: #9d68d9;
        width: 60px;
        height: 48px;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        z-index: 10000;
     }
    .button:after {
        position: absolute;
        top: 22px;
        right: 20px;
        display: block;
        height: 4px;
        width: 20px;
        border-top: 2px solid #dddddd;
        border-bottom: 2px solid #dddddd;
        content: '';
    }
    .button:before {
        transition: all .3s ease;
        position: absolute;
        top: 16px;
        right: 20px;
        display: block;
        height: 2px;
        width: 20px;
        background: #ddd;
        content: '';
    }
  /* Turn it into an X when open */
     .button.menu-opened{
      background: #2e1f62;
    }
    .button.menu-opened:after {
        transition: all .3s ease;   
        top: 23px;
        border: 0;
        height: 2px;
        width: 19px;
        background: #fff;
        transform: rotate(45deg);
    }
    .button.menu-opened:before {
        top: 23px;
        background: #fff;
        width: 19px;
        transform: rotate(-45deg);
    }
  /* reset horizontal styles */
    #flexmenu ul {
        display: none;
    }
    #flexmenu ul li,
    #flexmenu ul li a,
    #flexmenu ul ul li a{
        width: 100%;
    }
 
    #flexmenu ul ul li,
    #flexmenu li:hover > ul > li {
        height: auto; 
    }
    #flexmenu ul ul li a {
        padding-left: 25px;
    }
    #flexmenu ul ul ul li a {
        padding-left: 35px;
    }
 
    #flexmenu ul ul,
    #flexmenu ul ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left;
     }
     }
     #flexmenu ul ul ul li.active a {
     &:before {
        border-left: none;
      transform: rotate(45deg);
    }
    #flexmenu > ul > li.has-sub > ul > li.focus > a,
    #flexmenu > ul ul > li.has-sub > ul > li.focus > a {
        background: #262626;
        transition: all .3s ease;
    }
  /* remove cross when menu item is toggled */
    #flexmenu > ul > li.has-sub > a:after,
    #flexmenu > ul > li.has-sub > a:before,
    #flexmenu ul ul > li.has-sub > a:after,
    #flexmenu ul ul > li.has-sub > a:before {
        display: none;
    }
 
  /* submenu toggles */
    #flexmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        display: block;
        height: 46px;
        width: 46px;
        cursor: pointer;
    }
    #flexmenu ul ul .submenu-button {
        height: 34px;
        width: 34px;
    }
    #flexmenu .submenu-button:after {
        position: absolute;
        top: 22px;
        right: 19px;
        width: 8px;
        height: 2px;
        display: block;
        background: #1b130f;
        content: '';
    }
    #flexmenu ul ul .submenu-button:after {
        top: 15px;
        right: 13px;
    }
    #flexmenu .submenu-button.submenu-opened:after {
        background: #fff;
    }
    #flexmenu .submenu-button:before {
        position: absolute;
        top: 19px;
        right: 22px;
        display: block;
        width: 2px;
        height: 8px;
        background: #ddd;
        content: ''
     }
     }
     #flexmenu ul ul .submenu-button:before {
     &:after {
        top: 12px;
      transform: rotate(-45deg);
        right: 16px;
     }
     }
    #flexmenu .submenu-button.submenu-opened:before {
        display: none;
    } 
 
  .note{
    font-size: 3vw;
   }
   }
}
}
//End of custom navbar

Revision as of 22:41, 2 September 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-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;
}

.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);
  }
}

//Start of custom navbar
// Navigation Variables
$content-width: 1000px;
$breakpoint: 799px;
$nav-height: 70px;
$nav-background: #07080d;
$nav-font-color: #fbfbfb;
$link-hover-color: #9d68d9;

// Outer navigation wrapper
.navigation {
  height: $nav-height;
  background: $nav-background;
}

// Logo and branding
.brand {
  position: absolute;
  padding-left: 20px;
  padding-right: 20px;
  float: left;
  line-height: $nav-height;
  text-transform: lowercase;
  font-size: 1.4em;
  a,
  a:visited {
    color: $nav-font-color;
    text-decoration: none;
  }
}

// Container with no padding for navbar
.nav-container {
  max-width: $content-width;
  margin: 0 auto;
}

// Navigation 
nav {
  float: right;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      float: left;
      position: relative;
      a,
      a:visited {
        display: block;
        padding: 0 20px;
        line-height: $nav-height;
        background: $nav-background;
        color: $nav-font-color;
        text-decoration: none;
        &:hover {
          background: $link-hover-color;
          color: $nav-font-color;
        }
        &:not(:only-child):after {
          padding-left: 4px;
          content: ' ▾';
        }
      } // Dropdown list
      ul li {
        min-width: 190px;
        a {
          padding: 15px;
          line-height: 20px;
        }
      }
    }
  }
}

// Dropdown list binds to JS toggle event
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation */

// Binds to JS Toggle
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: $nav-background;
  height: $nav-height;
  width: $nav-height;
}
@media only screen and (max-width: 798px) {
  // Hamburger nav visible on mobile only
  .nav-mobile {
    display: block;
  }
  nav {
   width: 100%;
    padding: $nav-height 0 15px;
    ul {
      display: none;
      li {
        float: none;
        a {
          padding: 15px;
          line-height: 20px;
        }
        ul li a {
          padding-left: 30px;
        }
      }
    }
  }
  .nav-dropdown {
    position: static;
  }
}
@media screen and (min-width: $breakpoint) {
  .nav-list {
    display: block !important;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
  span,
  span:before,
  span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: $nav-font-color;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
  }
  span:before {
    top: -10px;
  }
  span:after {
    bottom: -10px;
  }
  &.active span {
    background-color: transparent;
    &:before,
    &:after {
      top: 0;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
}
//End of custom navbar
Retrieved from "https://dmlive.wiki/w/index.php?title=MediaWiki:Common.css&oldid=30340"