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
 
(131 intermediate revisions by 2 users not shown)
Line 3: Line 3:


.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;
Line 196: Line 196:
background: rgb(42,12,20) !important;
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;
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 290: Line 295:
nav ul li ul li {
nav ul li ul li {
   min-width: 190px;
   min-width: 190px;
  margin-top: -2px;
}
}
nav ul li ul li a {
nav ul li ul li a {
Line 405: Line 411:
   z-index: 1;
   z-index: 1;
}
}
@media only screen and (max-width: 798px)
nav ul li a {margin-top: -2px;}


/* Content theft protection */
.cquote {
p, h1, h2, h3, body {  
font-size: 95% !important;
-webkit-touch-callout: none;
margin-left: auto !important;
-webkit-user-select: none;  
margin-right: auto !important;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;  
user-select: none;  
}
}
 
.cquote td {
/* TestTest */
padding-top: 0 !important;
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
box-sizing: border-box;
}
}
 
.cquote td#text {
body {
padding-bottom: 6px !important;
--color-text: #f1f1f1;
    --color-bg: #0c0c0c;
    --color-link: #1ab3de;
    --color-link-hover: #f1f1f1;
--color-deco: #141414;
--color-side: #353535;
font-family: Futura, "futura-pt", sans-serif;
min-height: 100vh;
color: #57585c;
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-top: 10rem;
}
}
 
.cquote td#q-mark {
/* Page Loader */
line-height: 1 !important;
.js .loading::before {
content: '';
position: fixed;
z-index: 100000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg);
}
}


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


@keyframes loaderAnim {
/* Sample source album overview styling */
to {
.image-container {
opacity: 1;
    display: flex;
transform: scale3d(0.5,0.5,1);
    align-items: flex-start; /* Ensure images start at the top of their container */
}
    title: none !important; /* Overwrite the title attribute */
}
}


a {
.img-responsive {
text-decoration: none;
    width: 100px;
color: var(--color-link);
    height: 100px;
outline: none;
    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);
}
}


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


.hidden {
.text-container {
position: absolute;
    margin-left: 10px;
overflow: hidden;
    width: calc(100% - 100px - 10px); /* Adjust margin and width as needed */
width: 0;
height: 0;
pointer-events: none;
}
}


.message {
#image-rotation > div {
position: relative;
    display: none;
z-index: 100;
  }
display: none;
#image-rotation > div:first-child {
padding: 1em;
    display: block;
text-align: center;
color: var(--color-bg);
background: var(--color-text);
}
}


/* Icons */
/* Content theft protection */
.icon {
/*p, h1, h2, h3, body { */
display: block;
/*-webkit-touch-callout: none; */
width: 1.5em;
/*-webkit-user-select: none; */
height: 1.5em;
/*-khtml-user-select: none;*/
margin: 0 auto;
/*-moz-user-select: none; */
fill: currentColor;
/*-ms-user-select: none; */
}
/*user-select: none; */
 
/*}*/
.frame {
position: fixed;
z-index: 10000;
top: 5rem;
left: 0;
width: 100%;
max-width: none;
min-height: 0;
height: 100vh;
padding: 1rem;
pointer-events: none;
}
 
.frame a {
pointer-events: auto;
}
 
/* Header */
.codrops-header {
position: relative;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
}
 
.codrops-header__title {
font-size: 1rem;
font-weight: normal;
line-height: 1;
margin: 0;
}
 
/* Top Navigation Style */
.codrops-links {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
white-space: nowrap;
}
 
.github {
display: block;
padding: 0.25em;
margin: 0 0.25rem;
}
 
.codrops-icon {
display: inline-block;
padding: 0.25em;
margin: 0.25em 0 0 0;
}
 
.slideshow {
position: relative;
overflow: hidden;
margin: 0;
height: 100vh;
width: 100%;
height: calc(100vh - 10rem);
display: grid;
grid-template-columns: 33% 33% 33%;
grid-column-gap: 0.5%;
grid-template-rows: 100%;
grid-template-areas: '... slide ...';
}
 
.slide {
width: 100%;
display: flex;
pointer-events: none;
cursor: pointer;
position: relative;
height: 100%;
grid-area: slide;
}
 
.slideshow--previewopen .slide {
cursor: default;
}
 
.slide--current {
pointer-events: auto;
}
 
.slide__img-wrap {
width: 100%;
overflow: hidden;
z-index: 100;
height: 80%;
top: 10%;
position: absolute;
}
 
.slideshow__deco {
grid-area: slide;
background: var(--color-deco);
width: 100%;
height: 80%;
align-self: center;
position: relative;
margin: -40px 0 0 0;
right: -20px;
}
 
.nav {
position: absolute;
background: none;
width: 3rem;
height: 3rem;
z-index: 1000;
border: 0;
padding: 0;
margin: 0;
pointer-events: none;
transition: transform 0.8s, opacity 0.8s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
 
.nav--next {
bottom: 1rem;
right: 1rem;
}
 
.icon--navarrow-next {
transform: rotate(45deg);
}
 
.nav--prev {
top: 1rem;
left: 1rem;
}
 
.icon--navarrow-prev {
transform: rotate(-135deg);
}
 
.slideshow--previewopen .nav {
opacity: 0;
transition-duration: 0.4s;
}
 
.slideshow--previewopen .nav--next {
transform: translate3d(100%, 100%, 0);
}
 
.slideshow--previewopen .nav--prev {
transform: translate3d(-100%, -100%, 0);
}
 
.slide__img {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: cover;
background-position: 50% 50%;
position: absolute;
pointer-events: none;
transform: scale3d(1.01,1.01,1);
}
 
.js .slide__img-wrap,
.js .slide__title-wrap,
.js .slide__side {
opacity: 0;
pointer-events: none;
}
 
.js .slide--current .slide__img-wrap {
opacity: 1;
pointer-events: auto;
}
 
.slide--visible .slide__img-wrap {
pointer-events: auto;
}
 
.slide__title-wrap {
justify-self: flex-end;
width: 100%;
position: relative;
z-index: 1000;
}
 
.slide__number {
display: block;
font-size: 2rem;
font-weight: bold;
}
 
.slide__number::before {
content: "\2014";
display: inline-block;
margin: 0 1rem 0 0;
}
 
.slide__title,
.slide__subtitle,
.slide__side {
display: none;
}


.content {
.mw-hidden-cats-ns-shown {display: none}
position: fixed;
top: 10rem;
left: 0;
width: 100%;
height: calc(100% - 10rem);
pointer-events: none;
z-index: 100;
}
 
.content__item {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
padding: 10vh 5vw;
overflow: auto;
}
 
.content__item--current,
.content__item--current ~ .content__close {
pointer-events: auto;
}
 
.content__close {
position: absolute;
top: 1rem;
left: 1rem;
background: none;
color: currentColor;
border: 0;
margin: 0;
padding: 0;
}
 
.icon--longarrow {
width: 2rem;
}
 
.content__close:focus {
outline: none;
}
 
.content__number {
font-weight: bold;
}
 
.content__number::before {
content: "\2014";
display: inline-block;
margin: 0 1rem 0 0;
}
 
.content__title {
margin: 0.5rem 0;
font-size: 2rem;
}
 
.content__subtitle {
margin: 0 0 0.5rem;
font-size: 1rem;
font-weight: normal;
}
 
.content__text {
font-size: 0.85rem;
}
 
.js .content__title,
.js .content__subtitle,
.js .content__number,
.js .content__text,
.js .content__close {
opacity: 0;
}
 
@media screen and (min-width: 53em) {
body {
padding: 0;
}
.frame {
top: 0;
display: grid;
align-items: start;
justify-items: end;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-template-areas: '... header';
}
.codrops-header {
grid-area: header;
padding: 1rem 0.5rem;
display: block;
}
.codrops-header__title {
padding: 0 0.5rem;
}
.codrops-links {
margin: 0.25rem auto 0 0.25rem;
}
.slideshow {
height: 100vh;
grid-template-columns: 27% 27% 27%;
grid-column-gap: 9.5%;
}
.slide {
padding: 10vh 0 7vh;
flex-direction: column;
justify-content: space-between;
}
.slide__side {
margin: 0 0 0 -1.85rem;
}
.slide__title-wrap {
margin: 0 0 0 -1.85rem;
}
.slide__title,
.slide__subtitle,
.slide__side {
display: block;
}
.slide__title {
font-size: 3.25rem;
margin: 0 0 0.25rem;
}
.slide__subtitle {
font-weight: normal;
margin: 0;
min-height: 50px;
}
.slide__side {
color: var(--color-side);
position: relative;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
transform: rotate(180deg);
z-index: 1000;
}
.content {
top: 0;
height: 100%;
}
.content__item {
padding: calc(10vh + 5rem) 0 7vh;
width: 50.5%;
right: 7.5%;
overflow: visible;
}
.content__close {
left: 42%;
top: calc(10vh + 1rem);
}
.content__number {
position: absolute;
bottom: 7vh;
right: 0;
font-size: 2rem;
}
.content__title {
font-size: 7vw;
}
.content__subtitle {
font-size: 1.15rem;
margin-bottom: 7.5vh;
}
.content__text {
font-size: 0.95rem;
column-count: 2;
column-gap: 2rem;
max-width: 600px;
text-align: justify;
}
}

Latest revision as of 20: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"