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
 
(307 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;
}
 
/* 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 {
.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 473: 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 515: Line 119:
background: rgb(177,174,167) !important;
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;
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;
}
}


Line 557: Line 243:
}
}


/* Tooltip container */
/* Top navbar */
 
.navigation {
.tooltip {
  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;
   position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
}
 
nav ul li a, nav ul li a:visited {
.tooltip .tooltiptext {
  display: block;
   visibility: hidden;
   padding: 0 20px;
   width: 120px;
   line-height: 35px;
   background-color: black;
   background: #07080d;
   color: #fff;
  color: #fbfbfb;
   text-align: center;
  text-decoration: none;
   border-radius: 6px;
}
   padding: 5px 0;
nav ul li a:hover, nav ul li a:visited:hover {
    
  background: #9d68d9;
   /* Position the tooltip */
   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;
   position: absolute;
  top: 0;
  right: 0;
  background: #07080d;
  height: 35px;
  width: 70px;
   z-index: 1;
   z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}
}
 
@media only screen and (max-width: 798px) {
.tooltip:hover .tooltiptext {
  .nav-mobile {
  visibility: visible;
    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) {
.wrapper {
   .nav-list {
   height: 100vh;
    display: block !important;
  overflow-x: hidden;
   }
  overflow-y: auto;
   perspective: 1px;
}
}
 
#nav-toggle {
.section {
   position: absolute;
   position: relative;
   left: 18px;
   height: 100vh;
   top: 5px;
   display: flex;
   cursor: pointer;
   align-items: center;
   padding: 10px 35px 16px 0px;
  justify-content: center;
  font-size: 48px;
   color: white;
}
}
 
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
.parallax::after {
   cursor: pointer;
   content: " ";
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #fbfbfb;
   position: absolute;
   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;
   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');
}
}
 
#nav-toggle.active span:before {
.content {
   transform: rotate(45deg);
   height: 200vh;
  justify-content: center;
  background: white;
}
}
 
#nav-toggle.active span:after {
.parallax {
   transform: rotate(-45deg);
   perspective-origin-x: 100%;
}
}
.parallax__layer {
.brand a, .brand a:visited {
   transform-origin-x: 100%;
   font-size: 1.35em;
  z-index: 1;
}
}
 
nav {
* {
  font-size: 1.4em;
    -webkit-box-sizing: border-box;
  z-index: 1;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
}
 
nav:hover {
.buttons {
  text-decoration: none !important;
    margin: 10%;
  z-index: 1;
    text-align: center;
}
}
 
nav ul li ul li a {
.btn-hover {
  font-size: small;
    width: 200px;
  line-height: 15px;
    font-size: 16px;
  z-index: 1;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;
 
    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
}
 
nav ul li a, nav ul li a:visited {
.btn-hover:hover {
  text-decoration: none !important;
    background-position: 100% 0;
  z-index: 1;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
}
 
.navigation {
.btn-hover:focus {
  position: -webkit-sticky;
    outline: none;
  position: sticky;
  top: 0;
  z-index: 1;
}
}
@media only screen and (max-width: 798px)
nav ul li a {margin-top: -2px;}


.btn-hover.color-1 {
.cquote {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
font-size: 95% !important;
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
margin-left: auto !important;
margin-right: auto !important;
}
}
.btn-hover.color-2 {
.cquote td {
    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
padding-top: 0 !important;
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
}
.btn-hover.color-3 {
.cquote td#text {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
padding-bottom: 6px !important;
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
}
.btn-hover.color-4 {
.cquote td#q-mark {
    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
line-height: 1 !important;
    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
}
.btn-hover.color-5 {
 
     background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
.page-Main_Page #catlinks {
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
     display: none;
}
}
.btn-hover.color-6 {
 
     background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
/* Sample source album overview styling */
     box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
.image-container {
     display: flex;
    align-items: flex-start; /* Ensure images start at the top of their container */
     title: none !important; /* Overwrite the title attribute */
}
}
.btn-hover.color-7 {
 
     background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
.img-responsive {
     box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
     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);
}
}
.btn-hover.color-8 {
 
     background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
.img-responsive:hover {
     box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
     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 */
}
}
.btn-hover.color-9 {
 
     background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
.text-container {
     box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
     margin-left: 10px;
     width: calc(100% - 100px - 10px); /* Adjust margin and width as needed */
}
}
.btn-hover.color-10 {
 
        background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
#image-rotation > div {
     box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
     display: none;
}
  }
.btn-hover.color-11 {
#image-rotation > div:first-child {
      background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);  box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
    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}

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"