MediaWiki:Common.css
Appearance
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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ==========================================================================
OREYNIA WIKI MASTER STYLESHEET
TABLE OF CONTENTS:
1. Custom Fonts (Font-Faces)
2. CSS Variables (The Control Panel)
3. Global Typography (Fonts, Links, Paragraphs)
4. Main Layout (Backgrounds, Headers, Sidebars)
5. Wiki Components (Infoboxes, Tables, Quote Blocks)
6. Utility Classes (Hidden elements, alignments)
7. Special (External link icons, etc.)
8. Media Queries (Responsive adjustments)
========================================================================== */
/* #region 1. CUSTOM FONTS */
@font-face {
font-family: OreyniaTitleScript;
src: url('/assets/fonts/oreynia-titlefont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* #endregion */
/* #region 2. CSS VARIABLES */
:root {
--oreynia-color-primary: white;
--oreynia-color-secondary: black;
--oreynia-color-missing: red;
--oreynia-color-highlight: cyan;
--oreynia-background-color-primary: #59505f;
--oreynia-background-color-secondary: #537895;
--oreynia-background-color-tertiary: #BCC5CE;
--oreynia-background-color-quaternary: #929EAD;
--oreynia-color-link: #74c7ff;
--oreynia-color-link-visited: #74c7ff;
--oreynia-color-option: lightcyan;
--oreynia-color-option-selected: var(--oreynia-color-highlight);
}
/* #endregion */
/* #region 3. GLOBAL TYPOGRAPHY */
p {
color: var(--oreynia-color-primary);
font-family: OreyniaTitleScript, sans-serif !important;
}
a {
color: var(--oreynia-color-link) !important;
text-decoration: none;
}
a:focus{
text-decoration: none;
font-weight: none;
}
a:hover {
text-decoration: underline;
color: var(--oreynia-color-link) !important;
}
a:visited {
color: var(--oreynia-color-link-visited) !important;
}
a.new {
color: var(--oreynia-color-missing) !important;
}
h1, h2, h3, h4, h5, h6 {
color: var(--oreynia-color-secondary);
font-family: OreyniaTitleScript, sans-serif !important;
}
dl {
color: var(--oreynia-color-primary) !important;
}
li {
color: var(--oreynia-color-primary) !important;
}
/* #endregion */
/* #region 4. MAIN LAYOUT */
html, body {
min-height: 100vh !important;
height: auto;
margin: 0;
background: linear-gradient(-180deg, var(--oreynia-background-color-tertiary) 0%, var(--oreynia-background-color-quaternary) 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%) !important;
background-blend-mode: screen !important;
background-attachment: fixed !important;
background-size: cover !important;
}
.mw-page-container
{
min-height: 100vh;
height: auto !important;
background-image: linear-gradient(0deg, var(--oreynia-background-color-primary) 0%, var(--oreynia-background-color-secondary) 100%);
padding-top: 4rem;
}
.mw-header {
background-image: linear-gradient(30deg, var(--oreynia-background-color-primary) 0%, var(--oreynia-background-color-secondary) 100%);
position: absolute;
}
/* #endregion */
/* #region 5. WIKI COMPONENTS */
/* ======================================= HEADER ============================================ */
.mw-logo-wordmark{
color: white !important;
font-size:x-large !important;
}
.mw-logo-wordmark::after {
content: "™";
font-size: 0.6em;
vertical-align: top;
position: relative;
top: -0.2em;
font-weight: normal;
margin-left: 1px;
}
#p-vector-user-menu-userpage a.new
{
color: var(--oreynia-color-option) !important;
}
.vector-dropdown .vector-dropdown-content
{
top: 150% !important;
}
.vector-main-menu-container {
margin: 0 !important;
}
.vector-dropdown-content {
border-radius: 5px;
background-color: var(--oreynia-background-color-primary) !important;
padding: 16px;
border: 2px solid var(--oreynia-color-primary);
min-width: 200px;
}
.vector-sticky-pinned-container::after {
display: none !important;
}
.cdx-search-input--has-end-button
{
border: none !important;
background: transparent !important;
}
.cdx-text-input__input {
border-radius: 10px !important;
}
.cdx-button {
border-radius: 10px !important;
}
.cdx-search-input__end-button{
margin-left: 5px !important;
}
.vector-pinnable-header-label{
color: var(--oreynia-color-primary) !important;
font-size: medium !important;
}
.vector-menu-heading {
color: var(--oreynia-color-primary) !important;
}
.vector-toc .vector-toc-list-item-active.vector-toc-level-1 > .vector-toc-link {
color: var(--oreynia-color-option-selected) !important;
}
.vector-menu-tabs .mw-list-item.selected a {
color: var(--oreynia-color-option-selected) !important;
}
.vector-page-toolbar li a {
color: var(--oreynia-color-option) !important;
}
.vector-page-toolbar li a:visited {
color: var(--oreynia-color-option) !important;
}
.vector-page-toolbar li a:hover {
color: var(--oreynia-color-option) !important;
}
.vector-page-toolbar li a:focus{
text-decoration: none;
font-weight: bold;
}
.vector-page-toolbar li a.new{
color: var(--oreynia-color-option) !important;
}
.cdx-label {
color: var(--oreynia-color-primary) !important;
}
.ve-ce-branchNode p { /* Visual Editor */
color: black;
}
.mw-page-container-inner {
display: block !important;
}
.vector-column-start,
.vector-column-end {
display: none !important;
}
.mw-content-container,
.mw-body,
.vector-body,
.mw-body-content {
display: block !important;
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.vector-pinnable-header-pin-button {
display: none !important;
}
/* #endregion */
/* #region 6. UTILITY CLASSES */
/* #endregion */
/* #REGION 7. SPECIAL */
.mw-parser-output a.external {
background-image: none !important;
padding-right: 0 !important;
}
.mw-parser-output a.external::after {
content: "";
display: inline-block;
/* Matches standard MediaWiki icon sizing */
width: 0.857em;
height: 0.857em;
margin-left: 0.25em;
vertical-align: baseline;
/* Your desired exact color */
background-color: cyan !important;
/* Loads the exact logo file your wiki naturally uses */
-webkit-mask-image: url(/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg);
mask-image: url(/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg);
/* Keeps the shape behaving properly */
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.oo-ui-labelWidget .oo-ui-inline-help
{
color: var(--oreynia-color-primary) !important;
}
.oo-ui-popupWidget-popup p{
color: var(--oreynia-color-secondary) !important;
}
.mw-htmlform-ooui-wrapper
{
border-radius: 5px !important;
border: 3px solid var(--oreynia-background-color-quaternary) !important;
background-color: var(--oreynia-background-color-tertiary) !important;
box-shadow: 2px 4px var(--oreynia-background-color-quaternary) !important;
}
.oo-ui-inputWidget-input {
border-radius: 5px !important;
}
.oo-ui-fieldsetLayout-header .oo-ui-labelElement-label {
font-size: 1.5rem !important;
margin-bottom: 30px !important;
}
/* #endregion */
/* #REGION 8. Media */
@media screen and (min-width: 1080px) {
.mw-header .search-toggle {
display: none !important;
}
.mw-header .vector-typeahead-search-container {
display: block;
}
}
/* #endregion */