MediaWiki:Common.css
From KAYŌ 💖 DAY
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */ @import url('https://cdn.jsdelivr.net/npm/mediaelement@4.2.14/build/mediaelementplayer.min.css'); @import url('https://fonts.googleapis.com/css?family=Noto+Serif+SC:400,600,900'); @import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,400,600,900'); @import url('https://fonts.googleapis.com/css?family=Google+Sans:100,300,400,500,700,900,100i,300i,400i,500i,700i,900i'); @import url('https://fonts.googleapis.com/css?family=Fira+Mono'); @media (min-width: 600px) { html { font-size: 18px; } } @media (max-width: 600px) { html { font-size: 14px; } } body { background-color: #343a40; } html, body, .label { font-family: 'Google Sans', "Noto Serif SC"; } a { color: #1e87fc; } a:hover { color: #211a8c; } a.external::after { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .3em; font-size: 1em; color: #FFF; line-height: 1.2em; text-align: center; vertical-align: .1em; background: #c1bbfa; border-radius: .25rem; content: "⇗"; } a.new { color: #ba66e8; border-bottom: 1px dashed #CCC; } b, strong { font-weight: 600; } h1, h2, h3, h4, h5, h6 { margin: .75em 0; font-family: 'Google Sans', "Noto Serif JP", "Noto Serif SC"; } .title-name { font-size: 1.2rem; line-height: 2.8rem; } #top-bar-right .has-form { background-color: transparent; } #actions-button { position: absolute; top: 0; right: .9375rem; padding: 0; font-size: 0; background-color: transparent; } #actions-button i::before { font-size: 1rem; } #page-content { padding: 2rem 0 0; margin: 0; background-color: #FFF; } #page-content a { font-family: 'Google Sans', "Noto Serif JP", "Noto Serif SC"; } div.tleft, div.tright, div.floatleft, div.floatright { clear: none; } h1.firstHeading, h1#firstHeading { margin-bottom: 1rem; font-weight: 800; line-height: 1.2; background-image: -webkit-gradient(linear,0 0,0 bottom,from(#ffffff),to(#333)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #tagline, #siteSub { display: none; } textarea, input, .mw-editfont-monospace { font-family: "Fira Mono", "Noto Serif SC"; font-size: 1em; } #catlinks { padding: .75rem; margin: 3rem 0 0; border: 0; border-top: 1px solid #aaa; } #catlinks .label { padding: .25rem .5rem; color: #1e87fc; line-height: 1.1; background-color: #fff; border: 1px solid #1e87fc; border-width: 0 1px; border-radius: .25rem; } #catlinks .label:hover { color: #fff; background-color: #1e87fc; } .drop-icon + .drop-icon { display: none; } .mw-editsection { vertical-align: super; } .thumb .thumbinner { border: 0; } .thumb.tleft { margin: 0 1em .5em 0; font-size: small; } .thumb.tright { margin: 0 1em .5em 0; font-size: small; } .thumbcaption { margin: .5em; color: #6f6f6f; } .fullImageLink { padding: 1em; text-align: center; } .mw-filepage-resolutioninfo { margin: 1em 0 0; } .fullMedia { padding: 1em; text-align: center; } #ca-talk, .toc#toc { display: none !important; } #mw-content-text h2 { padding: 2rem 0 1rem; border-top: 5px solid #343a40; } #mw-content-text h3 { padding: 1rem 0; } #mw-content-text ol { margin: .5rem 0 1rem 2rem; } .done { margin-left: 1rem; color: #90c549; font-size: .75rem; vertical-align: .2em; } .not-yet { display: none; } .page-Home #firstHeading { display: none; } .page-Home #toc + h1 { margin-top: 0; } #index-nav td { padding: 0 1rem; box-shadow: inset 0 -1rem 1rem -1rem rgba(0, 0, 0, .2); } #index-nav h4 { margin: 1.2em 0 .8em; } #index-nav .mw-headline { padding: .2rem .5rem; color: #FFF; background-color: #343a40; border-radius: .25rem; } #index-nav .mw-headline small { margin: 0 0 0 .3em; font-size: .5em; color: #CCC; vertical-align: super; } #index-nav ul { height: 500px; margin: 0.5em 0 0 1rem; overflow-y: auto; font-size: .85rem; } #index-nav li { list-style-type: none; } #index-nav li::before { margin-right: .2em; font-size: .8em; color: #d14581; vertical-align: .1em; content: "❤"; } #index-nav li small { display: block; margin: 0 0 0 1rem; } #index-nav li ul { height: auto; margin: 0 0 0.2em 1.2em; } #index-nav li li::before { vertical-align: 0; content: "❣"; } #index-nav li li small { display: inline; margin: 0; } .randomimage p { display: none; } .randomimage .thumb.tright { margin: .5em 0; float: none; } .randomimage .thumbinner a { display: flex; height: 180px; overflow: hidden; vertical-align: middle; align-items: center; } .randomimage .thumbcaption { display: none; } @media (max-width: 600px) { #index-random td { display: block; width: 33.33%; float: left; } #index-random .thumbinner { width: auto !important; } #index-random .thumbinner a { height: auto; } #index-random .thumbinner img { max-width: 100%; background-color: blue; } #index-random [valign="top"] td:nth-child(4), #index-random [valign="bottom"] td:nth-child(4) { clear: left; } #index-random [valign="middle"] td:nth-child(odd) { display: none; } #index-random [valign="middle"] td:nth-child(2) { width: auto; margin: 2rem auto; } #index-nav td { display: block; width: auto; padding: .1px 1rem; font-size: 0; } #index-nav td h4 { margin: 1.5rem 0; } #index-nav td > ul { display: column; column-count: 2; height: auto; margin: 1.5rem 1rem; } } #footer-left { margin: 2rem 0; } #footer-left li:not(#footer-lastmod):not(#footer-viewcount) { display: none; } #footer-lastmod, #footer-viewcount { font-size: small; text-align: right; } #poweredby { display: none; } .btn-play-audio { display: none; position: relative; width: 1.3em; height: 1.3em; padding: 0; margin: 0 .5rem; overflow: hidden; line-height: 999px; vertical-align: middle; background: transparent; cursor: pointer; opacity: 0.6; } .btn-play-audio::after { content: "\1F3A7"; position: absolute; top: 0; left: 0; line-height: 1.3; } .btn-play-audio:hover, .btn-play-audio:focus, .btn-play-audio.playing { opacity: 1; background: transparent; outline: none; } .btn-play-audio.show { display: inline-block; } .btn-play-audio.playing { animation: playing 1.5s ease infinite; } @keyframes playing { 0% { opacity: 0; transform: scale(1); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } #player { position: fixed; right: 0; bottom: calc((40px + 3.5rem) * -1); left: 0; padding: 1rem; color: #FFF; background-color: rgba(0, 0, 0, .8); box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.5); opacity: 0; transition: all .5s ease-in-out; } #player.show { bottom: 0; opacity: 1; } #player .track-title { margin-bottom: .5rem; line-height: 1; } #player .track-title::before { content: "\1F3A7"; margin: 0 .25rem 0 .5rem; filter: invert(1); } #player audio { width: 100%; } .mejs__container.mejs__audio { background: transparent; } .mejs__container.mejs__audio .mejs__controls { background-image: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3); background-size: 500% 500%; -webkit-animation: rainbow 12s ease infinite; animation: rainbow 12s ease infinite; border-radius: .5rem; } @keyframes rainbow { 0% { background-position: 0% 82%; } 50% { background-position: 100% 19%; } 100% { background-position: 0% 82%; } } .lyrics blockquote { margin: 0; color: #222; border: 0; } .lyrics blockquote p { margin-bottom: 1.6em; color: inherit; white-space: pre; } .lyrics .jp { font-family: 'Google Sans', "Noto Serif JP"; } .lyrics .sc { font-family: 'Google Sans', "Noto Serif SC"; } .lyrics pre { font-family: inherit; }