Revision as of 19:14, 20 May 2025

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

html {

background-color: black !important;

}

html, body {

font-family: 'Crimson Text', serif;


    height: 100%;
    margin: 0;
    padding: 0;
    color: white;
}

.toc {

display: none;

}

.mw-headline, .sidebar-heading {

font-family: 'Crimson Text', serif;

}



p {

font-family: 'EB Garamond', serif;

}

input {
font-family: 'EB Garamond', serif;
background-color: white;
}


.mediawiki.ltr.sitedir-ltr.mw-hide-empty-elt.ns-0.ns-subject.mw-editable.page-Skinemax.rootpage-Skinemax.skin-nostalgia.action-view {

}


body.skin-nostalgia {

    background-color: black !important;
    color: white !important;

}

body.skin-nostalgia a {

    color: rgba(212, 119, 157)!important;
    text-decoration: underline !important;

}

body.skin-nostalgia a:not(:has(img)):not(:has(video)):hover {



    background-color: rgba(212, 119, 157, .4) !important;

}

body {

    display: flex;
    justify-content: center;
}


#content {
  background-color: black;
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 1fr auto; /* main row takes remaining space, footer gets auto height */
  grid-template-areas: 
    "sidebar main"
    "sidebar footer";
  width: 70%;
  max-width: 1200px;
  height: 100%; /* or 100% if nested in a height-constrained parent */
}


#top, #article, #footer {

    border: 2px solid rgba(116, 158, 166);
    box-shadow: 0px 0px 50px 5px rgba(116, 158, 166, 0.25) inset;

}

#top, #footer {

margin: 10px 5px;

}

#article {

margin: 10px 5px 0px 5px;

}

#top {
display: flex;
flex-direction: column;

    grid-area: sidebar;
overflow-y: hidden;

}

#article {
    overflow-y: auto; /* Enable vertical scrolling */

    position: relative;
    grid-area: main;
    padding: 20px;
    padding: 36px;
    order: 1;

}

#footer {

    height: 20px;
    grid-area: footer;
    padding: 20px;
    padding-left: 36px;
    padding-right: 36px;
    text-align: center;
    order: -1;


}

.printfooter {

    display: none;

}

/* MEDIA */

.mw-halign-center {

  display: block; /* Ensures the image behaves as a block-level element */
  margin-left: auto; /* Pushes the image to the center horizontally */
  margin-right: auto; /* Pushes the image to the center horizontally */

}

.mw-halign-center {

    width: 100%; /* Makes the image fill the container's width */
    height: auto; /* Maintains the aspect ratio of the image */
    object-fit: cover

}

.mw-tmh-player.video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* Container takes the full width */
    max-width: 500px;
    height: auto;
    position: relative;
    overflow: hidden; /* Prevent overflow if video exceeds bounds */
    box-shadow: 5px 5px rgba(116, 158, 166);
    border: 1px solid rgba(116, 158, 166);



}

.mw-tmh-player.audio .mw-tmh-label {

top: 8% !important;
background: transparent !important;
background-color: transparent !important;
font-family: 'Crimson Text', serif;


}


img {

    display: block;
    width: 100%;
    max-width: 500px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}


img:not(.top-image) {

    box-shadow: 5px 5px rgba(116, 158, 166);
    border: 1px solid rgba(116, 158, 166, 0.25);


}

/* TEXT */

#t {

margin: 20px auto 20px auto;
width: 150px;
}

#topbar {
position: relative;
overflow-y: auto;
height: 100%;
padding: 0px 20px;
}

.sidebar-heading {
cursor: pointer;
background-color: black;
  padding: 0.5em 0;
margin: 0 0 0.5em 0;
  position: sticky;
  border-bottom: 1px solid white;
    font-weight: bold;
    font-style: italic;
}

.sidebar-heading.one {
top: 0px

}

.sidebar-heading.two {
top: 37.81px

}

.sidebar-heading.three {
top: 75.62px

}


.trademark {

    font-family: 'EB Garamond', serif;
}

* {

  scrollbar-width: thin;  /* "auto" or "thin" */
  scrollbar-color: #ffffff transparent;  /* thumb and track color */

}

.oo-ui-windowManager-modal > .oo-ui-dialog {

background-color: transparent !important;

}



.oo-ui-windowManager-modal {

background-color: transparent !important;

}

oo-ui-dialog {

background-color: transparent !important;

}

.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {


}

.mw-gallery-slideshow .mw-gallery-slideshow-buttons .oo-ui-buttonElement {

    background: white;
    box-shadow: 5px 5px rgba(116, 158, 166);

}

.wikitable {
    width: 100%;        /* Makes table fill the container */
    table-layout: fixed; /* Ensures equal column widths */
}

.wikitable td, 
.wikitable th {
    width: 33%;          /* Adjust based on the number of columns */
    word-wrap: break-word; /* Ensures text wraps inside cells */
    text-align: left;   /* Centers content */
    vertical-align: top;  /* Aligns content to the top */
}

table td {

padding: 10px

}

.all-pages-list {
overflow: hidden;
padding-bottom: 48px;
border-bottom: 1px solid white;
margin-bottom: 24px;

}

.audio-ref, .audio-text {

border: 1px solid grey;
padding: 5px 15px;
color: white;
opacity: 1;
cursor: pointer;
margin-bottom: 15px;

}

.audio-text:hover {

opacity: 0.5;

}

.audio-ref:hover {

opacity: 0.5;

}

@media (max-width: 540px) {

#content {
display: flex;
flex-direction: column-reverse;
width: 100%;
}

body {
height: auto
}

#article {
margin-bottom: 0;
height: auto
}

}


/* Style all ▶ symbols to white when they appear in links */
a {
  color: inherit; /* Maintain original link color */
}

/* Target just the symbol itself */
a .symbol-container {
  display: inline;
  color: white;
}


dd {

margin-inline-start: 0px;

}

.mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon {

background-color: black !important;

}

.main-page i {

font-size: 1.75em;

}

.main-page h2 {

text-align: center;

}

.album h2 {
text-align: center;
}

.center {
text-align: center;
}

.main-page .mw-headline {

display: flex;
flex-direction: column;

}


.main-page .mw-editsection {

display: none;

}

.main-page img {

border: none;
box-shadow: none;


}


.vjs-subs-caps-button {

display: none;

}


.video-js {


width: 100% !important;
height: 100% !important;


}

.video-js, .vjs-time-tooltip {

font-family: 'Crimson Text', serif !important;

}

.video-js .vjs-time-control {

font-size: 1.25em;
line-height: 2rem;


}

.vjs-volume-panel {

display: none !important;

}


.track {
  position: relative; /* ensure it can hold z-index */
  z-index: 10;
  pointer-events: auto;
}


.video-js {
  z-index: 20; /* higher than anything else overlapping */
}

.oo-ui-window-frame {

height: 90% !important;
width: 90% !important;

}






/* Add clear side labels */
p:contains("SIDE A"), p:contains("SIDE B") {
  font-family: 'Crimson Text', serif;
  font-weight: bold;
  font-size: 1.2em;
  margin: 30px 0 10px 0;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(116, 158, 166, 0.4);
  padding-bottom: 5px;
}

/* Improve track container */
.track {
  position: relative;
  margin-bottom: 25px;
  border-left: 3px solid rgba(116, 158, 166, 0.3);
  padding-left: 15px;
  transition: border-left-color 0.3s ease;
}

/*
.track:hover {
  border-left-color: rgba(212, 119, 157, 0.6);
}
*/

/* Fix the track-info grid layout */
/* Fix the track-info grid layout */
.track-info {
  display: grid;
  grid-template-areas:
    "title duration"
    "player player"
    "lyrics lyrics";
  grid-template-columns: 1fr auto;
  align-items: center;
}

.track-info p {

margin: 0;

}

/* Position track elements in the grid */
.track-info h3 {
  grid-area: title;
  margin: 0;
  padding: 5px 0;
  justify-self: start;
}

.track-info .mw-tmh-player.audio {
  grid-area: duration;
  justify-self: end;
  width: auto !important;
min-width: 36px !important;

}

.track-info .video-js {

width: 300px !important;

}

/* Style the audio player controls */
.mw-tmh-player.audio .mw-tmh-play {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.mw-tmh-player.audio .mw-tmh-play:hover {
  opacity: 0.5;

}

.mw-tmh-player.audio .mw-tmh-label {
display: none;
  position: relative !important;
  top: unset !important;
  background: transparent !important;
  font-family: 'Crimson Text', serif;
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 5px;
}

/* IMPROVED COLLAPSIBLE CONTENT STYLING */

/* Style the collapsible container */
.mw-collapsible {
  grid-area: lyrics;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: all 0.3s ease;
}


/* Style the expand toggle button */
.mw-collapsible-toggle {
  display: block;
  padding: 12px 0px 0px 12px;
  font-family: 'Crimson Text', serif;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mw-collapsible-toggle .mw-collapsible-text {
  color: rgba(212, 119, 157, 0.8);
  font-style: italic;
}

/* Style the title div inside collapsible 
.mw-collapsible div:not(.mw-collapsible-content) {
  font-weight: bold;
  padding: 5px 0;
}
*/



/* Style the horizontal rule */
.mw-collapsible hr {
  border-top: 1px dotted rgba(116, 158, 166, 0.4);
  margin: 0;
margin-top: 5px;
}

/* Style the lyrics content */
.mw-collapsible-content {
  padding: 15px;
  line-height: 1.6;
  background-color: rgba(0, 0, 0, 0.2);
}

/* Add some animation to the collapsible content */
.mw-made-collapsible .mw-collapsible-toggle-collapsed + * + .mw-collapsible-content {
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.mw-made-collapsible .mw-collapsible-toggle-expanded + * + .mw-collapsible-content {
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
  max-height: 1000px; /* Adjust based on expected content height */
  opacity: 1;
}

/* Media query adjustments */
@media (max-width: 540px) {
  .track-info {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "duration"
      "player" 
      "lyrics";
  }
  
  .track {
    padding-left: 10px;
  }
}


.mw-tmh-player-interstitial {

background-color: black !important;

}