Quantum redactiones paginae "MediaWiki:Common.css" differant

Redactio 21:22, 12 Iulii 2024 facta

/* CSS placed here will be applied to all skins */

/***************/
/*** General ***/
/***************/
body {
    line-height: 1.7;
}
p {
    white-space: break-spaces
}
h3 {
    border-bottom: solid 1px #c8ccd1;
    display: flow-root;
}
#mw-header-container {
    background-image: url(res/banner-top-flowers.jpg);
    background-repeat: no-repeat;
}
#user-tools select, #searchInput-container input {
    background-color: #f4f1e9 !important;
}
#mw-content {
    background-image: url(res/background-grey-curves.jpg);
}
#mw-content .mw-parser-output > p {
    background-color: white;
}
#mw-content .mw-parser-output > ul > li {
    background-color: white;
}
#mw-content .mw-parser-output > p {
    background-color: white;
}
#mw-content .mw-headline {
    background-color: white;
}
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {
    padding-bottom: 1px;
}
#mw-content .firstHeading {
    background-color: white;
}
/*
.mw-page-title-namespace {
    display: none;
}
.mw-page-title-separator {
    display: none;
}
*/
#p-logo-text a {
    padding: 0.2em 1em 0.2em 1.4em !important;
    background-image: url(res/flower-small.png);
    background-repeat: no-repeat;
    background-position: 0px 3px;
    overflow: hidden;
    font-size: 1.85em !important;
    white-space: nowrap;
    width: 4.8em;
}
@media screen and (min-width:1540px){
  .dynamic-column {
    column-count:4;
  }
}
@media screen and (min-width:720px) and (max-width:1540px){
  .dynamic-column {
    column-count:3;
  }
}
@media screen and (max-width:720px){
  .dynamic-column {
    column-count:2;
  }
}
.wikitable > caption {
    background-color: #c8ccd1;
    min-width: 250px;
}
/*****************/
/*** Main page ***/
/*****************/
.box-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}
.box-item {
    border: 1px solid #7f848c;
    padding: 5px;
    margin: 10px;
    background-color: #d6e4ff;
    border-radius: 5px;
    outline: 2px solid #b1c2e2;
    background: linear-gradient(to bottom, #b1c2e2, #ebf2ff 58px, #ebf2ff 58px, #fafcff 63px, #ebf2ff);
}
.box-item-top {
    background: #d6e4ff;
    background-size: 90px;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
}
.box-item-top-jfla {
    background-image: url(res/bg-jfla.png);
}
.box-item-top-note {
    background-image: url(res/bg-note.png);
}
.box-item-top-cd {
    background-image: url(res/bg-cd.png);
}
.box-item-top-micro {
    background-image: url(res/bg-micro.png);
}
.box-title {
    text-align: center;
    font-weight: bold;
    font-size: large;
}
.box-title-top {
    margin: 20px 0px;
}
@media screen and (min-width:1340px){
  .box-item {
    width: 29%;
  }
}
@media screen and (min-width:1100px) and (max-width:1339px){
  .box-item {
    width: 45%;
  }
}
@media screen and (min-width:851px) and (max-width:1099px){
  .box-item {
    width: 45%;
  }
}
@media screen and (max-width:850px){
  .box-item {
    width: 95%;
  }
}
#user-tools {
  min-width: 0em;
}
/***************/
/*** Visitor ***/
/***************/
#mw-page-header-links {
  display: none;
}
#site-tools {
  display: none;
}
#page-tools {
  display: none;
}
#personal {
  display: none;
}
.mw-userlink {
  display: none;
}
.mw-usertoollinks {
  display: none;
}

/*********************/
/*** Country flags ***/
/*********************/
@font-face {
  font-family: 'Twemoji Country Flags';
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
}
.country-flags {
  font-family: "Twemoji Country Flags";
}

@media screen and (min-width:851px){
  #selectLanguages {
    margin-left: 10px;
  }
}
@media screen and (max-width:850px){
  #selectLanguages {
    position: absolute;
    right: 1em;
  }
  .mw-portlet {
    padding-right: 8em;
  }
}

/***************/
/*** Infobox ***/
/***************/
.portable-infobox {
    border: 1px solid #aaa;
    min-width: 325px;
    width: auto;
}
.pi-title {
    text-align: center;
    font-weight: bold !important;
    background-color: #dfedff;
    margin: 5px !important;
}
.pi-title p, .pi-header p {
    padding: 5px;
    margin: 5px;
}
.pi-secondary-background {
    background-color: inherit  !important;
}
.pi-secondary-background > p {
    background-color: #dfedff;
}
.pi-data-label {
    flex-basis: 110px;
}
.pi-data p {
    margin: 0px;
}
.pi-data-label p, .pi-data-value p, .pi-data-value center {
    font-size: 1.2em;
}
/*.pi-data-value:first-child {
    text-align: center;
}*/
.pi-horizontal-group {
    table-layout: initial;
}
.pi-header {
    text-align: center !important;
    padding: 0px !important;
}
.pi-data-value > p {
    min-width: 80px;
    word-break: auto-phrase;
}

@media screen and (min-width:1340px){
  .portable-infobox {
    max-width: 350px;
  }
}
.pi-group, .pi-data, .pi-horizontal-group-item {
    border-width: 0px !important;
}
/********************/
/*** Music labels ***/
/********************/
.label {
    border: 0px;
    border-radius: 10px;
    padding:2px 6px;
    font-size: smaller;
    text-wrap: nowrap;
    margin-right: 5px;
}
.label-blue {
    background-color:#89dfdf;
}
.label-bluedeep {
    background-color:#cedbff;
}
.label-brown {
    background-color:#f3ddba;
}
.label-browndeep {
    background-color:#dacdab;
}
.label-coral {
    background-color:#f6d6d6;
}
.label-green {
    background-color:#bce6bc;
}
.label-grey {
    background-color:#dddddd;
}
.label-orange {
    background-color:#ffe5b2;
}
.label-pink {
    background-color:#df89d6;
}
.label-purple {
    background-color:#d2c4f1;
}
.label-red {
    background-color:#df8989;
}
.label-reddeep {
    background-color:#fe8888;
}
.label-turquoise {
    background-color:#afeedb;
}
.label-yellow {
    background-color:#fafad2;
}
.label-white {
    background-color:#ffffff;
}

/**********************************/
/*** Template: External Picture ***/
/**********************************/
.extPicContainer {
    display: inline-block;
    margin:0px 10px 10px 0px;
    border: solid 1px #eaecf0;
    border-width: 1px 1px 0.2em;
    text-align:left;
    background-color:#f8f9fa;
    font-size: 90%;
}
.extPicHeader {
    padding: 10px 10px 7px 10px;
    border-bottom: solid 1px #eaecf0;
    background-color: #edeff4;
    display:flex;
    align-items:center;
}
.extPicImage {
    padding: 10px;
    text-align: center;
}
.extPicImage img {
    max-height: 360px;
    width: auto;
}
.extPicCaption {
    padding: 0px 10px 10px 10px;
}
@media screen and (min-width:1540px){
  .extPicContainer {
    max-width: 468px;
  }
}
@media screen and (min-width:720px) and (max-width:1540px){
  .extPicContainer {
    width: 48%;
  }
}
@media screen and (max-width:720px){
  .extPicContainer {
    width: 100%;
    max-width: 480px;
  }
}
/******************/
/* Template: Note */
/******************/
.mw-parser-output .note{background-position:left 7px top 50%;padding:0.5em 0.5em 0.5em 40px;margin:0.5em 0;overflow:hidden;background-color:#f8f9fa;color:#333;background-repeat:no-repeat;border:1px solid #ddd}.mw-parser-output .note-inline{display:inline-block;vertical-align:middle}.mw-parser-output .note-info{background-color:#eaf3ff;color:#333;background-image:url("res/OOjs_UI_icon_information-progressive.svg");background-size:25px;border-color:#a3caff;padding-left:40px;min-height:25px}.mw-parser-output .note-reminder{background-color:#fff9ea;color:#333;background-image:url("res/OOjs_UI_icon_lightbulb-yellow.svg");background-size:25px;border-color:#fc3;min-height:25px}.mw-parser-output .note-warn{background-color:#fff9ea;color:#333;background-image:url("res/OOjs_UI_icon_alert-warning.svg");background-size:25px;border-color:#fc3;min-height:25px}.mw-parser-output .note-error{background-color:#fee7e6;color:#333;background-image:url("res/OOjs_UI_icon_notice-destructive.svg");background-size:25px;border-color:#c33;min-height:25px}html.skin-theme-clientpref-night .mw-parser-output .note{background-color:transparent;color:inherit}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .note{background-color:transparent;color:inherit}}

/****************/
/* Song details */
/****************/
@media screen and (min-width:1540px){
  .song-container {
    width: 800px;
  }
  .song-picture {
    float: right;
    height: 170px;
    width: 300px;
  }
  .song-picture span img {
    max-height: 170px !important;
    border-bottom: 2px solid white;
  }
}
@media screen and (min-width:720px) and (max-width:1540px){
  .song-container {
    width: 700px;
  }
  .song-picture {
    float: right;
    height: 170px;
    width: 300px;
  }
  .song-picture span img {
    max-height: 170px !important;
  }
}
@media screen and (max-width:720px){
  .song-container {
    width: 100%;
  }
  .song-picture {
    float: none;
  }
  .song-picture span img {
    max-height: 300px;
  }
}
.song-container {
    clear:both;
    margin: 50px 0px;
}
.song-header {
    border: solid 1px #c8ccd1;
    width: fit-content;
    border-radius: 6px 6px 0px 0px;
    padding: 2px 11px 1px 11px;
    font-weight: bold;
    font-size: larger;
    background-color: #6d7e91;
    color: white;
}
.song-header a:link {
    color: white;
}
.song-header a:hover {
    color: yellow;
}
.song-header a:active {
    color: white;
}
.song-header a:visited {
    color: white;
}
.song-item {
    background-color: #f8f9fa;
    border: solid 1px #c8ccd1;
    padding-bottom: 5px;
    clear: both;
}
.song-number {
    border-right: solid 1px #c8ccd1;
    margin-right: 10px;
    padding: 5px 10px 5px 0px;
}
.song-picture {
    margin: 10px;
    text-align: center;
    background-color: black;
    position: relative;
}
.song-picture span img {
    width: auto;
}
.song-details {
    padding: 5px 5px 5px 20px;
    min-height: 175px;
}
.song-subtitle {
    font-weight: bold;
    margin: 0.5em 0;
}
.song-description {
    /*padding-left: 10px;*/ /*OLD*/
    display: grid; /*NEW*/
    grid-template-columns: 85px auto; /*NEW*/
}
.song-label {
    /*display: inline-block; /*OLD*/
    width: 65px;
    background-color: #eff1f6;
    /*padding: 2px 6px; /*OLD*/
    /*margin: 2px 5px 2px 0px; /*OLD*/
    padding: 3px 5px 3px 10px; /*NEW*/
    height: calc(100% - 10px); /*NEW*/
}
.song-value, .song-value2 {
    /*display: inline-table; /*OLD*/
    padding: 3px 5px 3px 0px; /*NEW*/
}
.song-description:has(.song-value:empty) {
    display: none;
}
.song-subdescription {
    font-style: italic;
    font-size: smaller;
    padding-left: 0.5em;
}
.song-subdescription:has(.song-subvalue:empty) {
    display: none;
}
.song-duration {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
    font-size: smaller;
    opacity: 70%;
    padding: 0px 2px 0px 5px;
    border-radius: 10px 0px 0px 0px;
    font-weight: bold;
}
.song-views {
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: white;
    font-size: smaller;
    opacity: 70%;
    padding: 0px 5px 0px 2px;
    border-radius: 0px 10px 0px 0px;
    font-weight: bold;
}
/********************/
/* Clickable button */
/********************/
.button-red {
    background-image: linear-gradient(#ec4247, #c90000);
    border: 1px solid #cc0000;
}
.button-blue {
    background-image: linear-gradient(#42A1EC, #0070C9);
    border: 1px solid #0077CC;
}
.button {
    border-radius: 4px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    direction: ltr;
    display: inline;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -.022em;
    line-height: 1.47059;
    min-width: 30px;
    overflow: visible;
    padding: 8px 18px;
    text-align: center;
    vertical-align: baseline;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    width: fit-content;
    color: white;
}
.button > a:link {
    color: white !important;
}
.button > a:hover {
    color: yellow !important;
}
.button > a:active {
    color: white !important;
}
.button > a:visited {
    color: white !important;
}
.div-clickable {
    cursor: pointer;
}
/********************/
/* TOC depth limits */
/********************/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}
/***************/
/* Discography */
/***************/
@media screen and (max-width:720px) {
  .album-main {
	display: block;
  }
  .album-songs {
    grid-template-columns: 40px auto 50px min-content min-content;
  }
  .album-songs > .album-cell {
    border-width: 0px 0px 1px 1px;
  }
}
@media screen and (min-width:721px) {
  .album-main {
	display: grid;
  }
  .album-songs {
    grid-template-columns: 40px auto 50px minmax(min-content, max-content) minmax(min-content, max-content);
  }
}
.album-main {
    width: 100%;
	max-width: 935px;
	grid-template-columns: 343px auto;
	background-color: white;
}
.album-title {
    padding:10px;
	background-color:#5d738b;
	color:white;
	text-align: center;
	grid-column: 1 / 3;
}
.album-first-section {
    border-style: solid;
	border-color: #c8ccd1;
	border-width: 0px 0px 0px 1px;
}
.album-type {
	background-color: #eaecf0;
	text-align: center;
	font-weight: bold;
}
.album-name {
	text-align: center;
}
.album-songs {
    display: grid;
    grid-template-rows: repeat(auto-fill, minmax(min-content, 38px));
    border-style: solid;
    border-color: #c8ccd1;
    border-width: 0px 1px 1px 0px;
}
.album-songs-header {
    background-color: #eaecf0;
    text-align: center;
    font-weight: bold;
}
.album-cell {
    padding: 6px;
    border-style: solid;
    border-color: #c8ccd1;
    border-width: 0px 1px 1px 0px;
}