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
 
(391 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;
 
.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;
}
}


.columnizeme-3 ul {
/* Infobox */
     column-count: 3;
.infobox {
     -moz-column-count: 3;
    background: #eee;
     -webkit-column-count: 3;
    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;
}
}


/* Header Buttons */
.round {
.vectorTabs {
border-radius: 10px;
    background-image: none;
-moz-border-radius: 10px;
    height: 1em;
-webkit-border-radius: 10px;
    z-index: 3;
-khtml-border-radius: 10px;
    text-transform: lowercase;
-icab-border-radius: 10px;
    padding: 1.9em .8em .3em;
-o-border-radius: 10px;
    position: relative;
    margin: 0;
    text-decoration: none;
    font-size: 95%;
    color: #002bb8;
}
}


.vectorTabs li.selected {
/* Tooltip container */
    background-image: none;
 
    background: #ffffff;
.tooltip {
    border-radius: 1em 1em 0 0;
  position: relative;
    border-color: #c0c0c0;
  display: inline-block;
    color: #002bb8;
  border-bottom: 1px dotted black;
    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,
.tooltip .tooltiptext {
.vectorTabs li.selected a:visited {
  visibility: hidden;
    color: #002bb8;
  width: 120px;
    padding: .4em .8em .3em;
  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;
}
}


.vectorTabs li a {
.tooltip:hover .tooltiptext {
    padding: .4em .8em .3em;
  visibility: visible;
}
}


.vectorTabs ul li {
/* Song page infobox styles */
    background-image: none;
body.page-Walking_In_My_Shoes table#InfoboxShell.round {
    background: #f0f0f2;
background: rgb(106,41,145) !important;
    border-radius: 1em 1em 0 0;
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;
    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 {
body.page-My_Joy table#InfoboxShell.round {
    padding-top: 1.6em;
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;
}
}


div.vectorTabs span {
body.page-In_Your_Room table#InfoboxShell.round {
    background-image: none;
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;
}
}


/* Adjust position of header tabs */
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;
}


/* #ca-talk { */
body.page-Never_Let_Me_Down_Again table#InfoboxShell.round {
/*    margin: 0 0 0 .4em; */
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;
}


/* #ca-edit { */
body.page-Shake_The_Disease table#InfoboxShell.round {
/*    margin: 0 0 0 -45.85em; */
background: rgb(139,188,218) !important;
/*      font-weight: bold; */
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;
/*} */
}


/* #ca-history { */
body.page-Home table#InfoboxShell.round {
/*    margin: 0 0 0 -42.7em; */
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;
}


/* #ca-watch, #ca-unwatch { */
body.page-I_Feel_Loved table#InfoboxShell.round {
/*    margin: 0 0 0 -36.58em; */
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;
}


#ca-view {
body.page-Dirt table#InfoboxShell.round {
    display: none;
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;
}
}


#mw-head-base {
body.page-Only_When_I_Lose_Myself table#InfoboxShell.round {
    margin-top: -4.3em;
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;
}
}


/* Sidebar Navigation Menu */
body.page-Surrender table#InfoboxShell.round {
/* Force Navigation header to display */
background: rgb(172,110,33) !important;
    #mw-panel #p-logo + .portal h3 {
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;
    display: block;
    margin: 0 0 0 1.3em;
}
}


#mw-panel .portal h3 {
body.page-Headstar table#InfoboxShell.round {
    margin: 0 0 0 1.3em;
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;
}
}


#mw-panel .portal .body {
body.page-Cover_Me table#InfoboxShell.round {
    border-radius: 0 1em 1em 0;
background: rgb(30,49,107) !important;
    border-bottom: 1px solid #c0c0c0;
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;
    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 {
body.page-Welcome_To_My_World table#InfoboxShell.round {
    margin: 0 1em 0 -1em;
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 {
#mw-panel .portal .body ul {
background: rgb(241,164,151) !important;
    list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
    margin: 0;
}
    padding: 0.3em 0 0 1em;
body.page-Secret_To_The_End table#InfoboxShell.round {
    line-height: 1.3em;
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 {
.toc {
background: rgb(241,164,151) !important;
    border-radius: 1em;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
    border: 1px solid #d7d7d9;
    background: #f0f0f2;
    display: table;
    zoom: 1;
    padding: 7px;
    font-size: 95%;
}
}
 
body.page-Alone table#InfoboxShell.round {
.Round {
background: rgb(241,164,151) !important;
    -webkit-border-radius: 10px;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
    background: #ffe;
    border: 2px solid #4E8234;
    margin: 0.10px;
    padding: 4px;
    vertical-align: top;
}
}
 
body.page-Goodbye table#InfoboxShell.round {
/* Set body text size to 13px */
background: rgb(241,164,151) !important;
#bodyContent {
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
  font-size: 0.813em;
  color: #000000;
}
}
 
body.page-Long_Time_Lie table#InfoboxShell.round {
.mw-body-content {
background: rgb(241,164,151) !important;
    line-height: 1.45;
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 {
.mw-body {
background: rgb(241,164,151) !important;
    border-radius: 1em 0 0 1em;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
    border-top: 1px solid #d7d7d9;
    border-left: 1px solid #d7d7d9;
    border-bottom: 1px solid #d7d7d9;
}
}
 
body.page-Always table#InfoboxShell.round {
table.wikitable {
background: rgb(241,164,151) !important;
    border-radius: 1em;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
    border: 1px solid #d7d7d9;
    padding: 7px;
    font-size: 95%;
    background: #ffffff;
}
}
 
body.page-Should_Be_Higher table#InfoboxShell.round {
#firstHeading {
background: rgb(42,12,20) !important;
    display: block;
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;
    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 {
body.page-SubHuman table#InfoboxShell.round {
    display: block;
background: rgb(21,36,59) !important;
    margin-block-start: 0.67em;
background: linear-gradient(33deg, rgba(21,36,59,1) 0%, rgba(25,55,107,1) 38%, rgba(49,86,166,1) 100%) !important;
    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 {
.featured {
    font-weight: normal;
background: rgb(255,249,212) !important;
    margin: 0;
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;
    overflow: hidden;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    font-family: sans-serif;
    font-size: 1.5em;
}
}


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


.mw-body-content h3 {
code {
    line-height: 1.188em;
background: rgb(252,228,237) !important;
background: linear-gradient(148deg, rgba(252,228,237,1) 0%, rgba(255,232,204,1) 100%) !important;
}
}


/* Miscellaneous formatting features */
body.page-Shake_The_Disease table#InfoboxShell.round:hover {
 
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
.sc { font-variant: small-caps }
   transform: translate3d(0, 0, 0);
 
   backface-visibility: hidden;
.l { text-align: left; }
   perspective: 1000px;
.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
@keyframes shake {
{
  10%, 90% {
   clear: both;
    transform: translate3d(-1px, 0, 0);
}
  }
 
   20%, 80% {
    transform: translate3d(2px, 0, 0);
  }


/*Gallery*/
  30%, 50%, 70% {
li.gallerybox {
     transform: translate3d(-4px, 0, 0);
     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 {
  40%, 60% {
     background-color: #e3e3e5;
     transform: translate3d(4px, 0, 0);
    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 {
/* Top navbar */
    font-size: 85%;
.navigation {
    line-height: 12px;
  height: 35px;
    overflow: hidden;
  background: #07080d;
    padding: 0px 4px;
    word-wrap: break-word;
    height: 50px;
}
}
 
.brand {
div.thumbinner {
  position: absolute;
    text-align: left;
  padding-left: 20px;
    border: 1px solid #d7d7d9;
  padding-right: 20px;
    line-height: 1.4em;
  float: left;
    padding: 3px;
  line-height: 35px;
    font-size: 94%;
  text-transform: lowercase;
    padding: 3px;
  font-size: 1.4em !important;
    background-color: #f0f0f2;
    overflow: hidden;
}
}
 
.brand a, .brand a:visited {
/* Make the list of references smaller */
  color: #fbfbfb;
ol.references,
  text-decoration: none;
div.reflist,
div.refbegin {
    font-size: 90%;
}
}
 
.nav-container {
/* Restore category box to pre-MediaWiki 1.18.0 margins */
  max-width: 1000px;
#catlinks li {
  margin: 0 auto;
    margin: 0 0;
    padding: 0 0.4em;
}
}
 
nav {
.mw-plusminus-pos {
  float: right;
    border-bottom: 1px dotted;
    cursor: help;
}
}
 
nav ul {
.mw-plusminus-neg {
  list-style: none;
    border-bottom: 1px dotted;
  margin: 0;
    cursor: help;
  padding: 0;
}
}
 
nav ul li {
.mw-plusminus-null {
  float: left;
    border-bottom: 1px dotted;
  position: relative;
    cursor: help;
}
}
 
nav ul li a, nav ul li a:visited {
#searchInput {
  display: block;
    width: 10.9em;
  padding: 0 20px;
    margin: 0;
  line-height: 35px;
    font-size: 95%;
  background: #07080d;
  color: #fbfbfb;
  text-decoration: none;
}
}
 
nav ul li a:hover, nav ul li a:visited:hover {
.sitedir-ltr textarea, .sitedir-ltr input {
  background: #9d68d9;
    direction: ltr;
  color: #fbfbfb;
}
}
 
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
ul {
  padding-left: 4px;
    list-style-type: square;
  content: ' ▾';
    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;
}
}
 
nav ul li ul li {
#simpleSearch {
  min-width: 190px;
    border-radius: .3em .3em .3em .3em;
  margin-top: -2px;
    border-color: #d7d7d9;
    height: 31px !important;
    border-radius: 8px !important;
    right: 5px !important;
    width: 181px !important;
    top: -10px !important;
    padding: 0 .8em .3em .5em;
}
}
 
nav ul li ul li a {
#simpleSearch #searchInput {
  padding: 15px;
    padding: 1em 0 0.2em 0.2em;
  line-height: 20px;
    font-size: 0.713em;
    title: "Search"
}
}
 
.nav-dropdown {
#content {
  position: absolute;
    margin-left: 160px;
  display: none;
    -moz-border-radius: 1em 0 0 1em;
  z-index: 1;
    -webkit-border-top-left-radius: 1em;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    -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;
}
}
 
/* Mobile navigation */
/* MAIN PAGE DESIGN CSS */
.nav-mobile {
body.page-Main_Page #t-cite,
  display: none;
body.page-Main_Page #footer-info-lastmod,
  position: absolute;
body.page-Main_Page #siteSub,
  top: 0;
body.page-Main_Page #contentSub,
  right: 0;
body.page-Main_Page h1.firstHeading {
  background: #07080d;
display: none !important;
  height: 35px;
  width: 70px;
  z-index: 1;
}
}
 
@media only screen and (max-width: 798px) {
body.page-Main_Page #black-plainlinks { color: black !important;
  .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) {
/* Link color override */
  .nav-list {
.blacklinks a, .blacklinks a:link, .blacklinks a:visited, .blacklinks a:hover, .blacklinks a:active, .blacklinks a span {
    display: block !important;
  color: black !important;
  }
}
}
 
#nav-toggle {
.whitelinks a, .whitelinks a:link, .whitelinks a:visited, .whitelinks a:hover, .whitelinks a:active, .whitelinks a span {
  position: absolute;
   color: white !important;
  left: 18px;
  top: 5px;
  cursor: pointer;
   padding: 10px 35px 16px 0px;
}
}
 
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
#siteSub { display:block; }
  cursor: pointer;
 
  border-radius: 1px;
html, body, #mw-head {
  height: 5px;
background-color: #f1f1f1;
  width: 35px;
  background: #fbfbfb;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
}
 
#nav-toggle span:before {
* style the edit buttons */
  top: -10px;
#wpSave {
    -moz-border-radius: 15px;
    background-color: #000000 !important;
    border: 1px outset !important;
}
}
#wpPreview {
#nav-toggle span:after {
    -moz-border-radius: 15px;
  bottom: -10px;
    background-color: #9d68d9 !important;
    border: 1px outset !important;
}
}
#wpDiff {
#nav-toggle.active span {
    -moz-border-radius: 15px;
  background-color: transparent;
    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 {
#nav-toggle.active span:before, #nav-toggle.active span:after {
    -moz-border-radius: 15px;
  top: 0;
    background-color: #000000 !important;
    border: 1px outset !important;
}
}
 
#nav-toggle.active span:before {
.noticebar {
   transform: rotate(45deg);
   background: #efe url('https://dmlive.wiki/images/thumb/5/58/Noticebar_background_rev.png/800px-Noticebar_background_rev.png') no-repeat left center;
  background-color: #f1f1f1;
  border: 1px solid #9d68d9;
  margin-top: 0.2em;
  padding: 0.2em;
  text-align: center;
}
}
 
#nav-toggle.active span:after {
div.blackplainlinks span {
  transform: rotate(-45deg);
    font-size: 95%;
    color: #002bb8;
}
}
 
.brand a, .brand a:visited {
/* Infobox */
  font-size: 1.35em;
.infobox {
  z-index: 1;
    background: #eee;
    border: 1px solid #aaa;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
}
}
.infobox-title {
nav {
    font-size: 2em;
  font-size: 1.4em;
    text-align: center;
  z-index: 1;
}
}
.infobox-image {
nav:hover {
    text-align: center;
  text-decoration: none !important;
  z-index: 1;
}
}
.infobox th {
nav ul li ul li a {
    text-align: right;
  font-size: small;
    vertical-align: top;
  line-height: 15px;
    width: 120px;
  z-index: 1;
}
}
.infobox td {
nav ul li a, nav ul li a:visited {
    vertical-align: top;
  text-decoration: none !important;
  z-index: 1;
}
}
 
.navigation {
.round {
  position: -webkit-sticky;
border-radius: 10px;
  position: sticky;
-moz-border-radius: 10px;
  top: 0;
-webkit-border-radius: 10px;
  z-index: 1;
-khtml-border-radius: 10px;
-icab-border-radius: 10px;
-o-border-radius: 10px;
}
}
@media only screen and (max-width: 798px)
nav ul li a {margin-top: -2px;}


#p-logo {
.cquote {
    margin: 0 0 0 -.5em;
font-size: 95% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
 
.cquote td {
body.page-Walking_In_My_Shoes table#InfoboxShell.round {
padding-top: 0 !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;
}
}
 
.cquote td#text {
body.page-In_Your_Room table#InfoboxShell.round {
padding-bottom: 6px !important;
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;
}
}
 
.cquote td#q-mark {
body.page-Condemnation table#InfoboxShell.round {
line-height: 1 !important;
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 {
.page-Main_Page #catlinks {
background: rgb(143,186,202) !important;
    display: none;
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;
}
}


.featured {
/* Sample source album overview styling */
background: rgb(230,176,83) !important;
.image-container {
background: linear-gradient(148deg, rgba(230,176,83,1) 0%, rgba(242,184,12,1) 11%, rgba(240,190,6,1) 22%, rgba(248,208,48,1) 39%, rgba(249,218,83,1) 57%, rgba(245,222,95,1) 77%, rgba(251,176,64,1) 100%) !important;
    display: flex;
    align-items: flex-start; /* Ensure images start at the top of their container */
    title: none !important; /* Overwrite the title attribute */
}
}


.MainPageBG {
.img-responsive {
background: rgb(230,176,83) !important;
    width: 100px;
background: linear-gradient(148deg, rgba(230,176,83,1) 0%, rgba(242,184,12,1) 11%, rgba(240,190,6,1) 22%, rgba(248,208,48,1) 39%, rgba(249,218,83,1) 57%, rgba(245,222,95,1) 77%, rgba(251,176,64,1) 100%) !important;
    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);
}
}


.wrapper {
.img-responsive:hover {
  height: 100vh;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Apply subtle shadow on hover */
  overflow-x: hidden;
    transform: scale(1.05); /* Slightly enlarge the image on hover */
  overflow-y: auto;
  perspective: 1px;
}
}


.section {
.text-container {
  position: relative;
    margin-left: 10px;
  height: 100vh;
    width: calc(100% - 100px - 10px); /* Adjust margin and width as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}
}


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


.content {
/* Content theft protection */
  height: 200vh;
/*p, h1, h2, h3, body { */
  display: flex;
/*-webkit-touch-callout: none; */
  justify-content: center;
/*-webkit-user-select: none; */
  background: white;
/*-khtml-user-select: none;*/
}
/*-moz-user-select: none; */
/*-ms-user-select: none; */
/*user-select: none; */
/*}*/


.parallax {
.mw-hidden-cats-ns-shown {display: none}
  perspective-origin-x: 100%;
}
.parallax__layer {
  transform-origin-x: 100%;
}

Latest revision as of 19:53, 17 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"