5,849
edits
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/*************************/ | |||
/* Table of Contents */ | |||
/*************************/ | |||
/* | |||
0. Temp/Scratch | |||
1. MediaWiki Overrides | |||
2. Body Styling | |||
3. Table Styling | |||
4. Template Styling | |||
5. Custom Object Styling | |||
6. Per-Page Styling | |||
7. Mobile Styling | |||
*/ | |||
/***********************/ | |||
/* 0. Temp/Scratch */ | |||
/***********************/ | |||
/* LEFTOVER START */ | |||
/* | /* | ||
@import url('https://fonts.googleapis.com/css?family=Rubik:400,700&display=swap&subset=latin-ext'); | @import url('https://fonts.googleapis.com/css?family=Rubik:400,700&display=swap&subset=latin-ext'); | ||
*/ | */ | ||
h2 { | |||
/* clear: both; */ /* This might have broken some page layouts. */ | |||
} | |||
.mw-ui-icon-element { | |||
/* | |||
padding-bottom: 0; | |||
*/ | |||
} | |||
/* LEFTOVER END */ | |||
/******************************/ | |||
/* 1. MediaWiki Overrides */ | |||
/******************************/ | |||
/* Font */ | |||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap&subset=latin-ext'); | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap&subset=latin-ext'); | ||
html, body | html, body { | ||
{ | |||
font-family: 'Open Sans', sans-serif; | font-family: 'Open Sans', sans-serif; | ||
} | } | ||
.mw-body-content | /* Body Font Size */ | ||
{ | .mw-body-content { | ||
font-size: unset; | font-size: unset; | ||
} | } | ||
h1, h2, h3, h4, h5, h6 | /* Headings */ | ||
{ | h1, h2, h3, h4, h5, h6 { | ||
border-bottom: 1px solid #d5d5d5; | border-bottom: 1px solid #d5d5d5; | ||
margin-bottom: 0.5em; | |||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.mw-body h1, .mw-body-content h1 | .mw-body h1, .mw-body-content h1 { | ||
{ | |||
font-size: 2em; | font-size: 2em; | ||
} | } | ||
.mw-body h1, .mw-body-content h1, .mw-body-content h2 | .mw-body h1, .mw-body-content h1, .mw-body-content h2 { | ||
{ | |||
/* | /* | ||
font-family: 'Rubik'; | font-family: 'Rubik'; | ||
Line 43: | Line 83: | ||
} | } | ||
.mw-body-content h3, .mw-body-content h4, .mw-body-content h5, .mw-body-content h6 | .mw-body-content h3, .mw-body-content h4, .mw-body-content h5, .mw-body-content h6 { | ||
{ | |||
margin-top: 0.6em; | margin-top: 0.6em; | ||
} | } | ||
.content .mw-parser-output > h1, .content .mw-parser-output > h2, .content .mw-parser-output > h3, .content .mw-parser-output > h4, .content .mw-parser-output > h5, .content .section-heading, .content .in-block { | |||
{ | margin-bottom: 0.75em; | ||
} | } | ||
/* Lists */ | |||
.content li { | |||
margin-bottom: 5px; | |||
/* | |||
} | } | ||
/* Images */ | |||
img { | |||
max-width: 100%; | |||
height: auto; | |||
{ | |||
max-width: | |||
} | } | ||
div.floatright img { | |||
div.floatright img | |||
{ | |||
margin-left: 2em; | margin-left: 2em; | ||
margin-bottom: 2em; | margin-bottom: 2em; | ||
} | } | ||
.img-50 img { | |||
border-radius: 5px; | |||
max-width: 50%; | |||
} | } | ||
. | .img-cover img { | ||
{ | border-radius: 5px; | ||
width: 250px; | |||
max-width: 100%; | |||
} | } | ||
. | .max-width img { | ||
{ | max-width: 512px; | ||
} | } | ||
.img-50 p, | |||
. | .img-cover p { | ||
{ | text-align: center; | ||
} | } | ||
/* Quote */ | |||
q { | |||
q | |||
{ | |||
font-weight: bold; | font-weight: bold; | ||
font-size: 130%; | font-size: 130%; | ||
Line 212: | Line 135: | ||
q::before, | q::before, | ||
q::after | q::after { | ||
{ | |||
font-size: 200%; | font-size: 200%; | ||
font-weight: bold; | font-weight: bold; | ||
Line 220: | Line 142: | ||
} | } | ||
. | /* Blockquote */ | ||
blockquote { | |||
padding-left: 1em; | |||
padding: 1em; | |||
border: 1px solid #ddd; | |||
border-left: 4px solid #ddd; | |||
/* background: #f3f3ff; */ | |||
background: #d8ecff; | |||
border-radius: 0.33em; | |||
border-color: #a3d3ff; | |||
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2); | |||
margin: 2em; | |||
} | } | ||
# | /* Menu Panel rework */ | ||
{ | .skin-vector:not(.skin-vector-legacy) #mw-panel .vector-menu-content li { | ||
padding: 0; | |||
padding: | |||
} | } | ||
.mw- | .skin-vector:not(.skin-vector-legacy) #mw-panel .vector-menu-content li a { | ||
color: black !important; | |||
display: inline-block; | |||
width: 101%; | |||
height: 100%; | |||
padding: .5em; | |||
padding-left: 0.25em; | |||
text-decoration: none; | |||
} | } | ||
.skin-vector:not(.skin-vector-legacy) #mw-panel .vector-menu-content li a:hover { | |||
. | background: #c7c7c7; | ||
transition: linear .15s; | |||
} | } | ||
. | .skin-vector:not(.skin-vector-legacy) a.feedlink { | ||
padding-left: 16px !important; | |||
} | } | ||
. | /* Diff Page */ | ||
{ | .diff-addedline { | ||
border-color: #a3d3ff; | |||
} | } | ||
. | .diff-addedline, .diff-deletedline, .diff-context { | ||
font-size: 88%; | |||
line-height: 1.6; | |||
vertical-align: top; | |||
border: 1px | white-space: -moz-pre-wrap; | ||
white-space: pre-wrap; | |||
border-style: solid; | |||
border-width: 1px 1px 1px 4px; | |||
border-radius: 0.33em; | |||
} | } | ||
. | /* Highlights */ | ||
{ | .highlight { | ||
background: #ff0; | |||
font-weight: unset; | |||
} | } | ||
. | .highlight-warning { | ||
{ | background: #fa0; | ||
background: # | font-weight: unset; | ||
} | } | ||
. | .highlight-bad, | ||
{ | .highlight-danger, | ||
.highlight-todo { | |||
background: #f00; | |||
font-weight: unset; | |||
} | } | ||
. | .highlight-good, | ||
{ | .highlight-done { | ||
background: #0f0; | |||
background: # | font-weight: unset; | ||
} | } | ||
. | /***********************/ | ||
/* 2. Body Styling */ | |||
/***********************/ | |||
/************************/ | |||
. | /* 3. Table Styling */ | ||
/************************/ | |||
. | /***************************/ | ||
/* | /* 4. Template Styling */ | ||
/***************************/ | |||
*/ | |||
/* Generic Boxes */ | /* Generic Boxes */ | ||
.box-generic { | .box-generic { | ||
box-shadow: 0 0 4px #999; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
border: none; | |||
border-radius: 3px; | |||
height: 100%; | height: 100%; | ||
padding: 1em; | |||
} | } | ||
.box-header h4, | |||
.box-header h3 { | |||
.box-header h4, .box-header h3 { | |||
margin-top: 0; | margin-top: 0; | ||
padding-top: 0; | padding-top: 0; | ||
border-bottom: | border-bottom: 3px solid #c7c7c7; | ||
} | } | ||
.box-header p { | .box-header p { | ||
margin: 0!important; | margin: 0 !important; | ||
} | } | ||
.box-content { | .box-content { | ||
padding: | padding: 0; | ||
} | } | ||
Line 371: | Line 269: | ||
} | } | ||
.box-links { | |||
column-width: 18em; | |||
padding: 0; | |||
} | |||
. | .box-links ul { | ||
margin: 0.3em 0 0 1.16em; | |||
} | |||
. | /* Flex Container */ | ||
.flex-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
grid-gap: 1em; | |||
} | } | ||
. | .flex-container .flex-item { | ||
flex: 1 1 49%; | |||
. | |||
} | } | ||
.skin-vector-legacy .flex-container .flex-item { | |||
flex: 1 1 32%; | |||
} | |||
/* ericism */ | /* ericism */ | ||
Line 424: | Line 323: | ||
} | } | ||
@media only screen and (min-width: 1280px) | @media only screen and (min-width: 1280px) { | ||
.ericism-reference { | .ericism-reference { | ||
Line 430: | Line 329: | ||
} | } | ||
} | |||
/* Stub, Wiki Project, Notice Templates */ | |||
.custom-notice { | |||
border: 1px solid #a2a9b1; | |||
background-color: #f8f9fa; | |||
clear: both; | |||
text-align: center; | |||
max-width: 600px; | |||
padding: .5em; | |||
margin: 0.5em auto; | |||
} | } | ||
/* Navigation Button template style */ | /* Navigation Button template style */ | ||
.nav-container { | |||
.nav-container | |||
{ | |||
display: grid; | display: grid; | ||
grid-template-columns: auto auto; | grid-template-columns: auto auto; | ||
Line 458: | Line 366: | ||
.no-prev, .no-next { | .no-prev, .no-next { | ||
display: none; | display: none; | ||
} | |||
/* Button Box template */ | |||
.button-section h3 { | |||
margin: 0; | |||
border: none; | |||
padding: .5em 0; | |||
} | |||
.button-links { | |||
display: flex; | |||
flex-wrap: wrap; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 3px; | |||
background-color: #f8f9fa; | |||
} | |||
.button-object { | |||
flex: 0 1 100%; | |||
max-height: 64px; | |||
} | |||
.button-object:not(:last-of-type) { | |||
border-bottom: 1px solid #a2a9b1; | |||
} | |||
.button-object p { | |||
display: flex; | |||
margin: 0; | |||
max-height: 64px; | |||
} | |||
.button-object a { | |||
display: block; | |||
color: black; | |||
text-decoration: none; | |||
line-height: 1.15em; | |||
padding: .85em; | |||
flex: 1 1 100%; | |||
} | |||
.button-object a.external { | |||
background-image: none; | |||
} | |||
.button-object.button-collection a { | |||
font-weight: bold; | |||
padding: .5em; | |||
text-align: center; | |||
} | |||
.button-object a:hover { | |||
background: #c7c7c7; | |||
transition: linear .1s; | |||
} | |||
.button-object a:visited, | |||
.button-object a.external:visited { | |||
color: black; | |||
} | } | ||
/* Infobox template style */ | /* Infobox template style */ | ||
.infobox { | .infobox { | ||
border: 1px solid #a2a9b1; | border: 1px solid #a2a9b1; | ||
Line 542: | Line 508: | ||
} | } | ||
/* | |||
/********************************/ | |||
/* 5. Custom Object Styling */ | |||
/********************************/ | |||
/* For objects that are not in Templates. */ | |||
.social-icons a.external { | |||
background: unset; | |||
/* | |||
padding-right: 0; | |||
*/ | |||
font-size: 30px; | |||
text-align: center; | |||
} | |||
.button a { | |||
color: #fff !important; | |||
background-color: #36c; | |||
border-color: #36c; | |||
padding: 0.5em 1em 0.5em 1em !important; | |||
display: inline-block; | |||
font-weight: bold; | |||
border-radius: 2px; | |||
margin-bottom: 4px; | |||
} | |||
.button a:hover { | |||
text-decoration: none; | |||
background-color: #447ff5; | |||
border-color: #447ff5; | |||
} | |||
.shadow { | |||
margin: 1em 0; | |||
padding: 2em; | |||
border-radius: 0.33em; | |||
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2); | |||
margin: 2em; | |||
} | |||
.shadow h2 { | |||
margin-top: 0; | |||
} | |||
/* responsive video for youtube widget */ | |||
.fivefifty { | |||
max-width: 550px; | |||
} | |||
.video-responsive { | |||
position: relative; | |||
padding-bottom:56.25%; | |||
height:0; | |||
overflow: hidden; | |||
max-width: 100%; | |||
} | |||
.video-responsive iframe, | |||
.video-responsive object, | |||
.video-responsive embed { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
/***************************/ | |||
/* 6. Per-Page Styling */ | |||
/***************************/ | |||
/* Style rules specific to a page */ | |||
/* Registration */ | |||
#userlogin2 .mw-htmlform-field-HTMLInfoField:nth-child(9) { | |||
margin-top: 1em; | |||
padding: 1em 0em; | |||
border-top: 3px solid black; | |||
} | |||
.mw-input { | |||
font-weight: bold; | |||
} | |||
/* START OLD Main Page */ | |||
.intro-container, .materials-container { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |||
gap: 1em; | |||
margin-bottom: 1em; | |||
} | |||
.generic-container { | |||
padding: 1em; | |||
background: #f9f9f9; | |||
border: 1px solid #ddd; | |||
} | |||
.projects-container { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |||
gap: 1em; | |||
margin-bottom: 1em; | |||
} | |||
.welcome-section { | |||
background: #f5fffa; | |||
border: 1px solid #cef2e0; | |||
} | |||
.eric-section { | |||
border: 1px solid #cedff2; | |||
background: #f5faff; | |||
} | |||
.grid-item { | |||
/* | |||
background: #eee; | |||
*/ | |||
padding: 1em; | |||
} | |||
/* END OLD Main Page */ | |||
/* Main Page styling */ | |||
.page-User_Aardvark_Main_Page #firstHeading, #contentSub, #contentSub2 { | .page-User_Aardvark_Main_Page #firstHeading, #contentSub, #contentSub2 { | ||
display: none; | display: none; | ||
Line 613: | Line 703: | ||
.page-User_Aardvark_Main_Page .eric-section { | .page-User_Aardvark_Main_Page .eric-section { | ||
flex: 0 1 100%; | flex: 0 1 100%; | ||
} | } | ||
Line 626: | Line 714: | ||
border-bottom: 3px solid #c7c7c7; | border-bottom: 3px solid #c7c7c7; | ||
margin: 0; | margin: 0; | ||
} | } | ||
Line 661: | Line 745: | ||
.page-User_Aardvark_Main_Page .media-section { | .page-User_Aardvark_Main_Page .media-section { | ||
clear: both; | clear: both; | ||
} | } | ||
Line 685: | Line 752: | ||
.page-User_Aardvark_Main_Page .community-section h3 { | .page-User_Aardvark_Main_Page .community-section h3 { | ||
margin: 0; | margin: 0; | ||
} | } | ||
. | /*************************/ | ||
/* 7. Mobile Styling */ | |||
/*************************/ | |||
. | /* | ||
These apply to all skins. Media queries made at Vector breakpoints. | |||
. | See https://theportal.wiki/wiki/MediaWiki:Mobile.css to apply rules specific to the Minerva skin. | ||
. | */ | ||
@media only screen and (max-width : 1000px) { | |||
div.floatright { | |||
} | float: unset; | ||
} | |||
. | div.floatright img { | ||
margin-left: 0; | |||
} | |||
} | |||
. | div.mw-collapsible { | ||
width: 95%!important; /* Temp fix for Defacing the Wall’s wide collapsible boxes on mobile */ | |||
} | |||
.infobox { | |||
} | float: none!important; | ||
width: 100%!important; | |||
margin: 0 0 1em 0!important; | |||
} | |||
. | .mobile-fullwidth { | ||
width:100%!important; | |||
} | } | ||
.flex-container .flex-item { | |||
flex: 1 1 100%; | |||
} | |||
} | |||
.page-User_Aardvark_Main_Page .intro-container { | .page-User_Aardvark_Main_Page .intro-container { | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
Line 836: | Line 799: | ||
max-width: unset; | max-width: unset; | ||
} | } | ||
} | } |