MediaWiki:Common.css: Difference between revisions
Hotwikiadmin (talk | contribs) No edit summary |
Hotwikiadmin (talk | contribs) No edit summary |
||
(20 intermediate revisions by the same user not shown) | |||
Line 93: | Line 93: | ||
/* All */ | /* All */ | ||
html { | html, | ||
body { | |||
font-family: 'IBM Plex Sans' !important; | font-family: 'IBM Plex Sans' !important; | ||
font-weight: 400; /* regular */ | font-weight: 400; /* regular */ | ||
font-size: | font-size: 110% !important; | ||
color: #1a2b32; /* rgb(26,43,50) */ | color: #1a2b32; /* rgb(26,43,50) */ | ||
} | } | ||
Line 105: | Line 106: | ||
h1 { | h1 { | ||
font-family: 'IBM Plex Sans' !important; | font-family: 'IBM Plex Sans' !important; | ||
font-weight: 500; /* medium */ | font-weight: 500 !important; /* medium */ | ||
color: #344c40; /* rgb(52,76,64) */ | color: #344c40; /* rgb(52,76,64) */ | ||
} | } | ||
h2 { | h2 { | ||
font-family: 'IBM Plex Sans' !important; | font-family: 'IBM Plex Sans' !important; | ||
font-weight: | font-weight: 500 !important; /* medium */ | ||
color: #1a2b32; /* rgb(26,43,50) */ | color: #1a2b32; /* rgb(26,43,50) */ | ||
} | } | ||
h3 | h3 { | ||
font-family: 'IBM Plex Sans' !important; | font-family: 'IBM Plex Sans' !important; | ||
font-weight: 600; /* semi-bold */ | 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) */ | color: #1a2b32 !important; /* rgb(26,43,50) */ | ||
} | } | ||
Line 148: | Line 154: | ||
} | } | ||
a.new, | |||
a.new:visited, | |||
.vector-menu-tabs .mw-list-item.new a, | .vector-menu-tabs .mw-list-item.new a, | ||
.vector-menu-tabs .mw-list-item.new a:visited { | .vector-menu-tabs .mw-list-item.new a:visited { | ||
color: #dd3333 !important; /* reset */ | color: #dd3333 !important; /* reset */ | ||
font-style: italic; | |||
} | } | ||
Line 169: | Line 178: | ||
.fc-today { | .fc-today { | ||
background: #DFF2FD !important; | background: #DFF2FD !important; | ||
} | |||
/* Template-specific */ | |||
.nowrap { | |||
white-space: nowrap; | |||
} | |||
.hot-box { | |||
border: 1px solid rgba(0, 0, 0, 0.125); | |||
border-radius: 1.0rem; | |||
margin: 1.0rem 0; | |||
padding: 0.7rem 1.0rem 1.0rem; | |||
} | |||
.hot-team-container, | |||
.hot-org-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
} | |||
.hot-card { | |||
position: relative; | |||
display: -ms-flexbox; | |||
display: flex; | |||
-ms-flex-direction: column; | |||
flex-direction: column; | |||
flex-basis: 100%; /* same width */ | |||
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-top: 1.0rem !important; | |||
margin-bottom: 1.0rem !important; | |||
margin-right: auto !important; | |||
} | |||
.hot-card .card-body { | |||
/* flex: 1 1 auto !important; */ | |||
padding: 1.2rem; | |||
} | |||
.hot-card .card-title { | |||
font-weight: 600; | |||
margin-top: 0 !important; | |||
margin-bottom: 0 !important; | |||
padding-top: 0 !important; | |||
} | |||
.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; | |||
} | |||
.hot-card .card-logo-top { | |||
padding: 1.2rem 1.2rem 0rem; | |||
text-align: center !important; | |||
} | |||
.hot-card .card-logo-top img { | |||
width: auto; | |||
max-width: 100%; | |||
height: 66px; | |||
vertical-align: middle; | |||
} | } |
Latest revision as of 22:14, 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 */ .nowrap { white-space: nowrap; } .hot-box { border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 1.0rem; margin: 1.0rem 0; padding: 0.7rem 1.0rem 1.0rem; } .hot-team-container, .hot-org-container { display: flex; flex-wrap: wrap; } .hot-card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; flex-basis: 100%; /* same width */ 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-top: 1.0rem !important; margin-bottom: 1.0rem !important; margin-right: auto !important; } .hot-card .card-body { /* flex: 1 1 auto !important; */ padding: 1.2rem; } .hot-card .card-title { font-weight: 600; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; } .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; } .hot-card .card-logo-top { padding: 1.2rem 1.2rem 0rem; text-align: center !important; } .hot-card .card-logo-top img { width: auto; max-width: 100%; height: 66px; vertical-align: middle; }