MediaWiki:Common.css
Jump to navigation
Jump to search
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 */
:root {
--type-body: Open Sans, Helvetica, Arial, sans-serif;
--type-quote: Vollkorn;
--quote-image-width: 140px;
--border-rad: 7px;
--accent-color: black;
--quote-bg: hsl(0 0% 97%);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.excerpt{
margin: 20px 0;
padding: 0;
border-radius: 3px;
color: #0A2C5D;
background: #E8FF4F no-repeat top left;
}
.podcast-episode-abstract{
margin: 20px;
padding: 10px;
border-radius: 13px;
color: black;
font-size:18px;
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}
.wikiexcerpt{
padding: 10px 10px 10px 48px;
margin: 10px;
border-radius: 13px;
color: black;
background: white url(https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/75px-Wikipedia-logo-v2.svg.png) no-repeat top left;
font-size:18px;
border: solid gray 1px;
}
.discordvcevent{
padding: 10px 10px 10px 8px;
margin: 10px;
border-radius: 4px;
color: white;
font-size:18px;
background: #7289DA url(https:www.//pleasurable-learning.com/images/thumb/5/53/Logo.discord.word.png/320px-Logo.discord.word.png) no-repeat top right;
border: solid gray 1px;
}
.quote-author{
position: relative;
right: 30px;
top:5px;
}
.quote{
padding: 10px 10px 10px 8px;
margin: 10px;
border-radius: 4px;
color: white;
font-size:18px;
background: #7289DA url(https:www.//pleasurable-learning.com/images/thumb/5/53/Logo.discord.word.png/320px-Logo.discord.word.png) no-repeat top right;
border: solid gray 1px;
}
blockquote:not([class]) {
position: relative;
margin: 50px 0;
padding: 1.6em 2.4em .7em calc(1.4em + var(--quote-image-width));
font: italic 1.2rem var(--type-quote);
background: var(--quote-bg) no-repeat left / var(--quote-image-width);
border-radius: var(--border-rad);
border: 2px solid white;
box-shadow: 2px 2px 4px hsl(0 0% 0% / 20%);
text-indent: 1.6em;
}
@media (min-width: 768px) {
blockquote {
margin: 50px 60px;
}
}
blockquote:not([class])::before {
content: "";
pointer-events: none;
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: var(--border-rad);
box-shadow:
inset -2px -2px 1px hsl(0 0% 100%),
inset 2px 2px 4px hsl(0 0% 0% / 20%);
}
blockquote:not([class])::after {
content: "❝";
position: absolute;
z-index: 1;
left: 50%;
top: -2px;
transform: translate(-50%, -50%);
width: 1.3em;
height: 1.3em;
background: white;
box-shadow: 0 4px 5px -1px hsla(0 0% 0% / 20%);
border-radius: 999px;
display: grid;
place-content: center;
padding-top: .5em;
color: var(--accent-color);
font-size: 36px;
font-style: normal;
text-indent: 0;
}
.blockquote-author-image {
position: absolute;
left: 0;
top: 0;
width: var(--quote-image-width);
height: 100px;
opacity: 0.75;
background: var(--accent-color) var(--image) no-repeat center / cover;
background-blend-mode: hard-light;
border-top-left-radius: var(--border-rad);
border-bottom-left-radius: var(--border-rad);
}
blockquote-author-image img {
height:100px; width:auto;
}
cite {
display: block;
margin-top: 30px;
text-indent: 0;
text-align: center;
font: bold .9rem var(--type-body);
text-transform: uppercase;
color: hsl(0 0% 20%);
}
@media (min-width: 768px) {
cite {
margin-left: calc(1rem - var(--quote-image-width));
}
}
.cite-last-name {
background: var(--accent-color);
color: var(--quote-bg);
padding-left:3px;
padding-right:3px;
}
.controls {
position: fixed;
bottom: 10px;
right: 10px;
font-size: 0.8em;
opacity: 0.7;
transition: .2s;
}
.controls:hover,
.controls:focus {
opacity: 1;
}
.controls label {
font-weight: bold;
text-transform: lowercase;
}
.controls input {
display: block;
width: 100%;
border: 0;
outline: none;
padding: 0;
}
blockquote.discord {
position: relative;
margin: 40px 0;
padding: 1.6em 2.4em .7em calc(1.4em + var(--quote-image-width));
font: italic 1.2rem var(--type-quote);
background: #7289DA no-repeat left;
border-radius: var(--border-rad);
border: 2px solid white;
box-shadow: 2px 2px 4px hsl(0 0% 0% / 20%);
text-indent: 1.6em;
color:white;
}
blockquote.discord::before {
content: "";
pointer-events: none;
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: var(--border-rad);
box-shadow:
inset -2px -2px 1px hsl(0 0% 100%),
inset 2px 2px 4px hsl(0 0% 0% / 20%);
}
blockquote.discord::after {
content: "❝";
position: absolute;
z-index: 1;
left: 50%;
top: -2px;
transform: translate(-50%, -50%);
width: 1.3em;
height: 1.3em;
background: white;
box-shadow: 0 4px 5px -1px hsla(0 0% 0% / 20%);
border-radius: 999px;
display: grid;
place-content: center;
padding-top: .5em;
color: var(--accent-color);
font-size: 36px;
font-style: normal;
text-indent: 0;
}
.message {
background-color: white;
width: calc(100% - 3em);
max-width: 24em;
padding: 1em 1em 1em 1.5em;
border-left-width: 6px;
border-left-style: solid;
border-radius: 3px;
position: relative;
line-height: 1.5;
}
message + message {
margin-top: 2em;
}
message:before {
color: white;
width: 1.5em;
height: 1.5em;
position: absolute;
top: 1em;
left: -3px;
border-radius: 50%;
transform: translateX(-50%);
font-weight: bold;
line-height: 1.5;
text-align: center;
}
.message--error {
border-left-color: firebrick;
}
message--error::before {
background-color: firebrick;
content: "‼";
}
.message--warning {
border-left-color: darkorange;
}
.message--warning::before {
background-color: darkorange;
content: "!";
}
.message--success {
border-left-color: darkolivegreen;
}
message--success::before {
background-color: darkolivegreen;
content: "✔";
}