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
 
(257 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
.columnizeme ul {
/* 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. */
    display: block;
}
 
.columnizeme-3 ul {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}
 
/* 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 {
.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: #efe url('https://dmlive.wiki/w/images/thumb/5/58/Noticebar_background_rev.png/800px-Noticebar_background_rev.png') no-repeat left center;
   background-color: #f1f1f1;
   background-color: #f1f1f1;
   border: 1px solid #9d68d9;
   border: 1px solid #9d68d9;
   margin-top: 0.2em;
   margin-top: 0.2em;
  margin-bottom: 1.2em;
   padding: 0.2em;
   padding: 0.2em;
   text-align: center;
   text-align: center;
}
div.blackplainlinks span {
    font-size: 95%;
    color: #002bb8;
}
}


Line 184: Line 46:
}
}


#p-logo {
/* Tooltip container */
    margin: 0 0 0 -.5em;
 
.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 {
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: 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;
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;
Line 241: Line 134:
background: rgb(172,110,33) !important;
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;
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;
}
body.page-SubHuman table#InfoboxShell.round {
background: rgb(21,36,59) !important;
background: linear-gradient(33deg, rgba(21,36,59,1) 0%, rgba(25,55,107,1) 38%, rgba(49,86,166,1) 100%) !important;
}
}


Line 283: Line 243:
}
}


/* Tooltip container */
/* Top navbar */
 
.navigation {
.tooltip {
   height: 35px;
   position: relative;
   background: #07080d;
  display: inline-block;
   border-bottom: 1px dotted black;
}
}
 
.brand {
.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;
   position: absolute;
   z-index: 1;
   padding-left: 20px;
   bottom: 100%;
   padding-right: 20px;
   left: 50%;
   float: left;
   margin-left: -60px;
  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 {
.tooltip:hover .tooltiptext {
   float: right;
   visibility: visible;
}
}
 
nav ul {
.wrapper {
   list-style: none;
   height: 100vh;
   margin: 0;
  overflow-x: hidden;
   padding: 0;
   overflow-y: auto;
   perspective: 1px;
}
}
 
nav ul li {
.section {
  float: left;
   position: relative;
   position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}
}
 
nav ul li a, nav ul li a:visited {
.parallax::after {
   display: block;
   content: " ";
   padding: 0 20px;
  position: absolute;
   line-height: 35px;
   top: 0;
   background: #07080d;
   right: 0;
   color: #fbfbfb;
  bottom: 0;
   text-decoration: none;
  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');
}
}
 
nav ul li a:hover, nav ul li a:visited:hover {
.content {
   background: #9d68d9;
   height: 200vh;
   color: #fbfbfb;
   justify-content: center;
  background: white;
}
}
 
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
.parallax {
   padding-left: 4px;
   perspective-origin-x: 100%;
  content: ' ▾';
}
}
.parallax__layer {
nav ul li ul li {
   transform-origin-x: 100%;
   min-width: 190px;
  margin-top: -2px;
}
}
 
nav ul li ul li a {
*{
   padding: 15px;
  margin:0;
   line-height: 20px;
   padding:0;
   text-decoration:none
}
}
html{
.nav-dropdown {
    height: 100%;
  position: absolute;
    width: 100%;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
}
nav {
/* Mobile navigation */
    background: #07080d;
.nav-mobile {
    position: relative;
  display: none;
    margin: 0 auto;
  position: absolute;
  top: 0;
  right: 0;
  background: #07080d;
  height: 35px;
  width: 70px;
  z-index: 1;
}
}
 
@media only screen and (max-width: 798px) {
#flexmenu{
  .nav-mobile {
   display: flex;
    display: block;
   flex-flow: row wrap;
  }
  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) {
.logo {
  .nav-list {
    z-index: 123;
     display: block !important;
    padding: 10px;
  }
    font: 18px 'helvetica';
    color: #FFF;
    flex-grow: 1;
     flex-shrink: 1;
    margin-top: 6px;
}
}
.logo a {
#nav-toggle {
    color: #9d68d9;
  position: absolute;
    text-decoration:none
  left: 18px;
  top: 5px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
}
 
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
#main-menu{
   cursor: pointer;
   align-self: flex-end;  
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #fbfbfb;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
}
/* keep the drop-downs from being hidden by content wrappers etc */
#nav-toggle span:before {
.sub-menu {
   top: -10px;
   z-index: 1234;
}
}
 
#nav-toggle span:after {
/* General Menu Styling */
  bottom: -10px;
#flexmenu li,
#flexmenu li a{
    border: 0;
    list-style: none;
    line-height: 1;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    transition: all ease-in-out .3s;
}
}
 
#nav-toggle.active span {
#flexmenu ul li a {
  background-color: transparent;
    padding: 17px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
}
}
 
#nav-toggle.active span:before, #nav-toggle.active span:after {
#flexmenu ul li.has-sub > a {
  top: 0;
    padding-right: 30px;
}
}
/* Drop icon */
#nav-toggle.active span:before {
#flexmenu ul li.has-sub > a:after {
  transform: rotate(45deg);
    position: absolute;
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #fff;
    content: '';
}
}
#flexmenu ul ul li.has-sub > a:after {
#nav-toggle.active span:after {
    position: absolute;
  transform: rotate(-45deg);
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #FFF;
    content: '';
}
}
#flexmenu > ul > li.has-sub > a:before {
.brand a, .brand a:visited {
    position: absolute;
  font-size: 1.35em;
    top: 19px;
  z-index: 1;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #fff;
    transition: all .25s ease;
}
}
#flexmenu > ul > li.has-sub:hover > a:before {
nav {
    top: 23px;
  font-size: 1.4em;
    height: 0;
  z-index: 1;
}
}
#flexmenu ul ul li.has-sub > a:before {
nav:hover {
    position: absolute;
  text-decoration: none !important;
    top: 13px;
  z-index: 1;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #FFF;
    content: '';
    transition: all .3s ease;
}
}
#flexmenu ul ul > li.has-sub:hover > a:before {
nav ul li ul li a {
    top: 17px;
  font-size: small;
    height: 0;
  line-height: 15px;
  z-index: 1;
}
}
#flexmenu ul ul li.has-sub:hover,
nav ul li a, nav ul li a:visited {
#flexmenu ul li.has-sub ul li.has-sub ul li:hover {
  text-decoration: none !important;
    background: #fff;
  z-index: 1;
}
}
/* Submenu default states, removed by hover gives the animation */
.navigation {
#flexmenu ul ul {
  position: -webkit-sticky;
    position: absolute;
  position: sticky;
    left: -9999px;
  top: 0;
  z-index: 1;
}
}
#flexmenu li:hover > ul {
@media only screen and (max-width: 798px)
    left: auto;
nav ul li a {margin-top: -2px;}
 
.cquote {
font-size: 95% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
#flexmenu ul ul li {
.cquote td {
    height: 0;
padding-top: 0 !important;
    background: #262629;
    transition: all .25s ease
}
}
#flexmenu li:hover > ul > li {
.cquote td#text {
    height: 35px;
padding-bottom: 6px !important;
}
}
/* tertiary menu */
.cquote td#q-mark {
#flexmenu ul ul ul {
line-height: 1 !important;
    margin-left: 100%;
    top: 0;
}
}
#flexmenu ul ul li a {
 
     padding: 11px 15px;
.page-Main_Page #catlinks {
    width: 170px;
     display: none;
    font-size: 12px;
    text-decoration: none;
    color: #FFF;
    font-weight: 400;
}
}


/* Content */
/* Sample source album overview styling */
#main{
.image-container {
  color: #FFF;
    display: flex;
  height: 100vh;
    align-items: flex-start; /* Ensure images start at the top of their container */
  width: 100vw;
    title: none !important; /* Overwrite the title attribute */
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
}


.note {
.img-responsive {
  width: 80vw;
    width: 100px;
  max-width: 320px;
    height: 100px;
  max-height: 200px;
    object-fit: cover; /* Ensure the entire container is filled, preserving aspect ratio */
  text-align: center;
    aspect-ratio: 1 / 1; /* Enforce a fixed aspect ratio of 1:1 */
  background: #F14F80;
    transition: box-shadow 0.6s ease, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  font-size: 1vw;
  padding: 10px;
  background-clip: padding-box;
}
}
.note h2 {
 
  font-weight: 300;
.img-responsive:hover {
  font-size: 1.5em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Apply subtle shadow on hover */
  margin: 10px 0 0;
    transform: scale(1.05); /* Slightly enlarge the image on hover */
}
}
.note p{
 
  margin: 5px;
.text-container {
    margin-left: 10px;
    width: calc(100% - 100px - 10px); /* Adjust margin and width as needed */
}
}


@media screen and (max-width: 768px) {
#image-rotation > div {
  /* Center the logo and remove the bar */
     display: none;
    .logo {
  }
        position: absolute;
#image-rotation > div:first-child {
        top: 0;
     display: block;
        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,
/* Content theft protection */
    #flexmenu li:hover > ul > li {
/*p, h1, h2, h3, body { */
        height: auto;
/*-webkit-touch-callout: none; */
    }
/*-webkit-user-select: none; */
    #flexmenu ul ul li a {
/*-khtml-user-select: none;*/
        padding-left: 25px;
/*-moz-user-select: none; */
    }
/*-ms-user-select: none; */
    #flexmenu ul ul ul li a {
/*user-select: none; */
        padding-left: 35px;
/*}*/
    }


    #flexmenu ul ul,
.mw-hidden-cats-ns-shown {display: none}
    #flexmenu ul ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left;
    }
    #flexmenu ul ul ul li.active a {
        border-left: none;
    }
    #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 {
        top: 12px;
        right: 16px;
    }
    #flexmenu .submenu-button.submenu-opened:before {
        display: none;
    } 
 
  .note{
    font-size: 3vw;
  }
}

Latest revision as of 00:53, 18 April 2024

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

body.page-SubHuman table#InfoboxShell.round {
background: rgb(21,36,59) !important;
background: linear-gradient(33deg, rgba(21,36,59,1) 0%, rgba(25,55,107,1) 38%, rgba(49,86,166,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;
  margin-top: -2px;
}
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;
}
@media only screen and (max-width: 798px)
nav ul li a {margin-top: -2px;}

.cquote {
	font-size: 95% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.cquote td {
	padding-top: 0 !important;
}
.cquote td#text {
	padding-bottom: 6px !important;
}
.cquote td#q-mark {
	line-height: 1 !important;
}

.page-Main_Page #catlinks {
    display: none;
}

/* Sample source album overview styling */
.image-container {
    display: flex;
    align-items: flex-start; /* Ensure images start at the top of their container */
    title: none !important; /* Overwrite the title attribute */
}

.img-responsive {
    width: 100px;
    height: 100px;
    object-fit: cover; /* Ensure the entire container is filled, preserving aspect ratio */
    aspect-ratio: 1 / 1; /* Enforce a fixed aspect ratio of 1:1 */
    transition: box-shadow 0.6s ease, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.img-responsive:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Apply subtle shadow on hover */
    transform: scale(1.05); /* Slightly enlarge the image on hover */
}

.text-container {
    margin-left: 10px;
    width: calc(100% - 100px - 10px); /* Adjust margin and width as needed */
}

#image-rotation > div {
    display: none;
  }
#image-rotation > div:first-child {
    display: block;
}

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

.mw-hidden-cats-ns-shown {display: none}
Retrieved from "https://dmlive.wiki/w/index.php?title=MediaWiki:Common.css&oldid=53244"