Difference between revisions of "MediaWiki:Common.css"

Revision as of 22:46, 3 August 2019

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans|IBM+Plex+Serif&display=swap');

/*
Theme Name: Perpendicular Angel Design
Theme URI: https://www.perpendicularangel.com
Author: anne m. gibson
Author URI: https://www.perpendicularangel.com
Description: hacking my own wiki
Version: 1.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Resets
2.0 Alignments
3.0 Clearings
4.0 Typography
6.0 Forms
7.0 Formatting
8.0 Lists
9.0 Tables
10.0 Links
11.0 Layout
   13.1 Header
   13.2 Front Page
   13.3 Regular Content
   13.4 Posts
   13.5 Pages
   13.6 Footer
14.0 Comments
15.0 Widgets
16.0 Media
   16.1 Galleries
17.0 Customizer
18.0 SVGs Fallbacks
19.0 Media Queries
20.0 Print
--------------------------------------------------------------*/


/*--------------------------------------------------------------
1.0 Resets - getting rid of mediawiki crap i don't like
--------------------------------------------------------------*/

.mw-body { 
     border: 1px solid rgb(221, 221, 221);
     color: #333;
}

.mw-body-content {
     font-size: inherit;
}

/* header */

#p-personal li {
     font-size: 1em;
} 

#pt-userpage, #pt-anonuserpage {
     background: none;
}

/*--------------------------------------------------------------
2.0 Alignments
--------------------------------------------------------------*/

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
3.0 Clearings
--------------------------------------------------------------*/

.clear:before,
.clear:after
 {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after {
	clear: both;
}

/*--------------------------------------------------------------
4.0 Typography
--------------------------------------------------------------*/

body,
button,
input,
select,
textarea {
	font-family: 'IBM Plex Sans', sans-serif;
}

h1, .mw-body h1,
h2, .mw-body h2,
h3, .mw-body h3,
h4, .mw-body h4,
h5, .mw-body h5,
h6,  .mw-body h6 {	
	clear: both;
	font-family: 'IBM Plex Serif', serif;
	line-height: 1.5;
	margin: 0 0 0.75em;
	padding: 1.5em 0 0;
}

h1:first-child, .mw-body h1:first-child,
h2:first-child, .mw-body h2:first-child,
h3:first-child, .mw-body h3:first-child,
h4:first-child, .mw-body h4:first-child,
h5:first-child, .mw-body h5:first-child,
h6:first-child, .mw-body h6:first-child {
	padding-top: 0;
}

h1 {
	font-size: 24px;
	font-size: 1.5rem;
}

h2, .mw-body h2 {
	font-size: 20px;
	font-size: 1.25rem;
}

h3, .mw-body h3 {
	font-size: 18px;
	font-size: 1.125rem;
}

h4, .mw-body h4 {
	font-size: 16px;
	font-size: 1rem;
	font-weight: bold;
}

h5, .mw-body h5 {
	font-size: 13px;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

h6, .mw-body h6 {
	font-size: 15px;
	font-size: 0.9375rem;
	font-weight: 800;
}

p, .mw-body p  {
	margin: 0 0 1.5em;
	padding: 0;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	background-color: #e6e6f4;
	border-radius: 8px;
	color: #1c146d;
	font-size: 18px;
	font-size: 1.125rem;
	font-style: italic;
	line-height: 1.5;
	margin:0 0 24 0;
	padding: 20px;
}

blockquote cite {
	display: block;
	font-style: normal;
}

address {
	margin: 0 0 1.5em;
}

pre 
 {
	background: #e6e6f4;
	border-radius: 8px;
	font-family: 'IBM Plex Mono', Courier, monospace;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.5em;
}

code,
kbd,
tt,
var 
 {
	font-family: 'IBM Plex Mono', Courier, monospace;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
}


abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #eee;
	text-decoration: none;
}

big {
	font-size: 125%;
}

blockquote {
	quotes: "" "";
}

q {
	quotes: "“" "”" "‘" "’";
}

blockquote:before,
blockquote:after {
	content: "";
}

:focus {
	outline: 2px solid #633593;
	background-color: #F9F3D2;
}



/*--------------------------------------------------------------
6.0 Forms
--------------------------------------------------------------*/

button,
input[type="button"],
input[type="submit"] {
	background-color: #3e002e;
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
	padding: 1em 2em;
	text-shadow: none;
	-webkit-transition: background 0.2s;
	transition: background 0.2s;
}

input + button,
input + input[type="button"],
input + input[type="submit"] {
	padding: 0.75em 2em;
}

button.secondary,
input[type="reset"],
input[type="button"].secondary,
input[type="reset"].secondary,
input[type="submit"].secondary {
	background-color: #570046;
	color: #222;
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background: #70065c;
}

button.secondary:hover,
button.secondary:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="button"].secondary:hover,
input[type="button"].secondary:focus,
input[type="reset"].secondary:hover,
input[type="reset"].secondary:focus,
input[type="submit"].secondary:hover,
input[type="submit"].secondary:focus {
	background: #700c5c;
}

/* Placeholder text color -- selectors need to be separate to work. */

:placeholder {
	color: #757575;
}

:-ms-input-placeholder {
	color: #757575;
}

/*--------------------------------------------------------------
7.0 Formatting
--------------------------------------------------------------*/

hr {
	background-color: #bbb;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
8.0 Lists
--------------------------------------------------------------*/

ul,
ol {
	margin: 0 0 1.5em;
	padding: 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/*--------------------------------------------------------------
9.0 Tables
--------------------------------------------------------------*/

table {
	border-collapse: collapse;
	margin: 0 0 1.5em;
	width: 100%;
}

thead th {
	border-bottom: 2px solid #bbb;
	padding-bottom: 0.5em;
}

th {
	padding: 0.4em;
	text-align: left;
}

tr {
	border-bottom: 1px solid #eee;
}

td {
	padding: 0.4em;
}

th:first-child,
td:first-child {
	padding-left: 0;
}

th:last-child,
td:last-child {
	padding-right: 0;
}

/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

a {
	color: #70065c;
	font-weight: bold;
	text-decoration: underline;
}

a:hover,
a:active {
	color: #570046;
	background-color: #F9F3D2;
}