MediaWiki:Common.css: Difference between revisions

Revision as of 17:05, 17 June 2024

/*
 *  MediaWiki_Common.css
 *  House of Transfer Wiki CSS
 *
 *  Copyright (c) House of Transfer
 *  Operated by Fraunhofer IWES, Germany.
 *
*/

/* Font */

/* regular */
/* ibm-plex-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    src: url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* ibm-plex-sans-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: italic;
    font-weight: 400;
    src: url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* medium */
/* ibm-plex-sans-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    src: url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
/* ibm-plex-sans-500italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: italic;
    font-weight: 500;
    src: url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* semi-bold */
/* ibm-plex-sans-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    src: url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* ibm-plex-sans-600italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: italic;
    font-weight: 600;
    src: url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bold */
/* ibm-plex-sans-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    src: url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* ibm-plex-sans-700italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: italic;
    font-weight: 700;
    src: url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('resources/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/* All */

html,
body {
    font-family: 'IBM Plex Sans' !important;
    font-weight: 400; /* regular */
    font-size: 110% !important;
    color: #1a2b32; /* rgb(26,43,50) */
}


/* Headlines */

h1 {
    font-family: 'IBM Plex Sans' !important;
    font-weight: 500 !important; /* medium */
    color: #344c40; /* rgb(52,76,64) */
}
h2 {
    font-family: 'IBM Plex Sans' !important;
    font-weight: 500 !important; /* medium */
    color: #1a2b32; /* rgb(26,43,50) */
}
h3 {
    font-family: 'IBM Plex Sans' !important;
    font-weight: 500 !important; /* medium */
    color: #1a2b32 !important; /* rgb(26,43,50) */
}
h4, h5, h6 {
    font-family: 'IBM Plex Sans' !important;
    font-weight: 600 !important; /* semi-bold */
    color: #1a2b32 !important; /* rgb(26,43,50) */
}


/* Links */

a:not(.new),
a:not(.new):visited,
a.external,
a.external:visited,
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.vector-pinnable-header-toggle-button,
#pt-userpage-2 a:not(.mw-selflink) {
    font-style: italic;
    color: #8ec89a !important; /* rgb(142,200,154) */
}

a:not(.new):hover,
a:not(.new):focus,
a.external:hover,
a.external:focus,
.mw-parser-output a.external:hover,
.mw-parser-output a.external:focus,
.vector-pinnable-header-toggle-button:hover,
.vector-pinnable-header-toggle-button:focus,
#pt-userpage-2 a:not(.mw-selflink):hover,
#pt-userpage-2 a:not(.mw-selflink):focus {
    text-decoration: none;
    color: #7fb48a !important; /* darker version of #8ec89a */
}

a.new, 
a.new:visited,
.vector-menu-tabs .mw-list-item.new a,
.vector-menu-tabs .mw-list-item.new a:visited {
    color: #dd3333 !important; /* reset */
    font-style: italic;
}

.mw-parser-output a.external {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj4KCTx0aXRsZT4KCQlleHRlcm5hbCBsaW5rCgk8L3RpdGxlPgoJPHBhdGggZmlsbD0iIzhlYzg5YSIgZD0iTTYgMWg1djVMOC44NiAzLjg1IDQuNyA4IDQgNy4zbDQuMTUtNC4xNkw2IDFaIE0yIDNoMnYxSDJ2Nmg2VjhoMXYyYTEgMSAwIDAgMS0xIDFIMmExIDEgMCAwIDEtMS0xVjRhMSAxIDAgMCAxIDEtMVoiLz4KPC9zdmc+");
}


/* JsCalendar */

.fc-event {
    color: white !important;
    background-color: #8ec89a;
    border: #8ec89a;
    padding: 0.25rem;
}

.fc-today {
    background: #DFF2FD !important;
}


/* Template-specific */

.hot-box {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 1rem;
    margin: 1rem 0;
    padding: 0.7rem 1rem 1rem;
}

.hot-card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    max-width: 350px;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 1.0rem;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.5rem !important;
}

.hot-card .card-body {
    flex: 1 1 auto !important;
    padding: 1.25rem;
}

.hot-card .card-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 600;
}

.hot-card .card-text {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}
.hot-card .card-text:last-child {
    margin-bottom: 0 !important;
}

.hot-card .card-img-top img {
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-top-left-radius: 1.0rem;
    border-top-right-radius: 1.0rem;
}