Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
(55 intermediate revisions by the same user not shown) | |||
Line 13: | Line 13: | ||
>>> TABLE OF CONTENTS: | >>> TABLE OF CONTENTS: | ||
---------------------------------------------------------------- | ---------------------------------------------------------------- | ||
1.0 Alignments | 1.0 Resets | ||
2.0 Alignments | |||
3.0 Clearings | |||
4.0 Typography | |||
6.0 Forms | 6.0 Forms | ||
7.0 Formatting | 7.0 Formatting | ||
Line 21: | Line 22: | ||
9.0 Tables | 9.0 Tables | ||
10.0 Links | 10.0 Links | ||
--------------------------------------------------------------*/ | --------------------------------------------------------------*/ | ||
/*-------------------------------------------------------------- | /*-------------------------------------------------------------- | ||
1.0 Alignments | 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 .firstHeading { | |||
padding-top: 0; | |||
} | |||
.mw-body-content { | |||
font-size: inherit; | |||
} | |||
/* header */ | |||
#mw-head-base { | |||
margin-top: -4.14em; | |||
} | |||
#p-personal li, div.vectorTabs li a { | |||
font-size: 14px; | |||
font-size: 0.875rem; | |||
} | |||
#pt-userpage, #pt-anonuserpage { | |||
background: none; | |||
} | |||
#left-navigation, | |||
#right-navigation { | |||
margin-top: 3.25em; | |||
} | |||
div.vectorTabs{ | |||
background-image:none; | |||
border: 1px solid rgb(221, 221, 221); | |||
} | |||
div.vectorTabs span { | |||
background-image:none; | |||
} | |||
div.vectorTabs span a { | |||
padding-top: 0.875em; | |||
} | |||
div.vectorTabs ul { | |||
background-image: none; | |||
} | |||
div.vectorTabs ul li { | |||
background-image: none; | |||
} | |||
div.vectorTabs li.selected { | |||
background-image: none; | |||
border-bottom-color: #fff; | |||
background-color: #fff; | |||
} | |||
div#mw-head div.vectorMenu h3 { | |||
background-image:none; | |||
font-family: "IBM Plex Sans", sans-serif; | |||
font-size: 0.875rem; | |||
height: 2.5em; | |||
} | |||
div.vectorMenu h3 span { | |||
font-size: 1em; | |||
font-weight: bold; | |||
padding: 0.875em 1.5em 0 0.5em; | |||
margin: 0; | |||
color: #70065c; | |||
text-decoration: underline; | |||
} | |||
/* left nav */ | |||
div#mw-panel div.portal div.body ul li { | |||
font-size: 1rem; | |||
} | |||
/* content */ | |||
.catlinks { | |||
padding: 8px; | |||
} | |||
#mw-subcategories { | |||
padding-top: 1rem; | |||
} | |||
/* | |||
#mw-category-media { | |||
display: none; | |||
} | |||
*/ | |||
/*-------------------------------------------------------------- | |||
2.0 Alignments | |||
--------------------------------------------------------------*/ | --------------------------------------------------------------*/ | ||
Line 65: | Line 151: | ||
/*-------------------------------------------------------------- | /*-------------------------------------------------------------- | ||
3.0 Clearings | |||
--------------------------------------------------------------*/ | --------------------------------------------------------------*/ | ||
Line 81: | Line 167: | ||
/*-------------------------------------------------------------- | /*-------------------------------------------------------------- | ||
4.0 Typography | |||
--------------------------------------------------------------*/ | --------------------------------------------------------------*/ | ||
Line 90: | Line 176: | ||
textarea { | textarea { | ||
font-family: 'IBM Plex Sans', sans-serif; | font-family: 'IBM Plex Sans', sans-serif; | ||
color: #333; | |||
} | } | ||
h1, | h1, .mw-body h1, | ||
h2, | h2, .mw-body h2, | ||
h3, | h3, .mw-body h3, | ||
h4, | h4, .mw-body h4, | ||
h5, | h5, .mw-body h5, | ||
h6 { | h6, .mw-body h6 { | ||
clear: both; | clear: both; | ||
color: #333; | |||
font-family: 'IBM Plex Serif', serif; | font-family: 'IBM Plex Serif', serif; | ||
line-height: 1.5; | line-height: 1.5; | ||
margin: 0 0 0.75em; | margin: 0 0 0.75em; | ||
padding: | padding: 1em 0 0; | ||
} | } | ||
h1:first-child, | h1:first-child, .mw-body h1:first-child, | ||
h2:first-child, | h2:first-child, .mw-body h2:first-child, | ||
h3:first-child, | h3:first-child, .mw-body h3:first-child, | ||
h4:first-child, | h4:first-child, .mw-body h4:first-child, | ||
h5:first-child, | h5:first-child, .mw-body h5:first-child, | ||
h6:first-child { | h6:first-child, .mw-body h6:first-child { | ||
padding-top: 0; | padding-top: 0; | ||
} | } | ||
h1 { | h1, .mw-body h1 { | ||
font-size: | font-size: 29px; | ||
font-size: 1. | font-size: 1.8rem; | ||
} | |||
h2, .mw-body h2 { | |||
font-size: 26px; | |||
font-size: 1.6rem; | |||
} | |||
h3, .mw-body h3 { | |||
font-size: 23px; | |||
font-size: 1.4rem; | |||
} | } | ||
h4, .mw-body h4 { | |||
. | |||
font-size: 20px; | font-size: 20px; | ||
font-size: 1.2rem; | |||
} | } | ||
h5, .mw-body h5 { | |||
font-size: 18px; | font-size: 18px; | ||
font-size: 1.1rem; | |||
} | } | ||
h6, .mw-body h6 { | |||
font-size: 16px; | font-size: 16px; | ||
font-size: 1rem; | font-size: 1rem; | ||
font-weight: 800; | font-weight: 800; | ||
} | } | ||
p, .mw-body p { | |||
font-size: 16px; | |||
font-size: 1rem; | |||
margin: 0 0 1.5em; | margin: 0 0 1.5em; | ||
padding: 0; | padding: 0; | ||
Line 163: | Line 248: | ||
blockquote { | blockquote { | ||
/* | |||
background-color: #e6e6f4; | background-color: #e6e6f4; | ||
*/ | |||
background-color: #F1F1F9; | |||
border-radius: 8px; | border-radius: 8px; | ||
color: #1c146d; | color: #1c146d; | ||
/* | |||
font-size: 18px; | font-size: 18px; | ||
font-size: 1.125rem; | font-size: 1.125rem; | ||
font-style: italic; | font-style: italic; | ||
*/ | |||
line-height: 1.5; | line-height: 1.5; | ||
margin:0 0 24 0; | margin:0 0 24 0; | ||
Line 240: | Line 330: | ||
} | } | ||
ul li { | |||
margin-bottom: 0.5em; | |||
} | } | ||
/*-------------------------------------------------------------- | /*-------------------------------------------------------------- | ||
6.0 Forms | 6.0 Forms | ||
--------------------------------------------------------------*/ | --------------------------------------------------------------*/ | ||
button, | button, | ||
Line 696: | Line 403: | ||
:-ms-input-placeholder { | :-ms-input-placeholder { | ||
color: #757575; | color: #757575; | ||
} | |||
input, textarea, keygen, select { | |||
font-size: 16px; | |||
font-size: 1em; | |||
} | } | ||
Line 713: | Line 425: | ||
--------------------------------------------------------------*/ | --------------------------------------------------------------*/ | ||
.mw-content-ltr ul, | |||
.mw-content-rtl .mw-content-ltr ul, | |||
ul, | ul, | ||
ol { | ol { | ||
margin: 0 0 1. | margin: 0.3em 0 1em 1.6em; | ||
padding: 0; | padding: 0; | ||
} | } | ||
Line 783: | Line 497: | ||
--------------------------------------------------------------*/ | --------------------------------------------------------------*/ | ||
a { | a, | ||
div.vectorTabs li a, | |||
div#mw-panel div.portal div.body ul li a { | |||
color: #70065c; | color: #70065c; | ||
font-weight: bold; | font-weight: bold; | ||
Line 790: | Line 506: | ||
a:hover, | a:hover, | ||
a:active { | a:active, | ||
div.vectorTabs li a:active { | |||
color: #570046; | color: #570046; | ||
background-color: #F9F3D2; | background-color: #F9F3D2; | ||
} | } | ||
a.new, #p-personal a.new { | |||
color: #9c0808; | |||
. | |||
} | } | ||
a.new::after, | |||
#p-personal a.new::after, | |||
div.vectorTabs li.new a::after, | |||
div.vectorTabs li.new a:visited::after { | |||
content:"➕"; | |||
} | } | ||
#ca-unwatch.icon a, | |||
#ca-watch.icon a, | |||
#ca-unwatch.icon a:hover, | |||
#ca-unwatch.icon a:focus, | |||
#ca-watch.icon a:hover, | |||
#ca-watch.icon a:focus { | |||
margin: inherit; | |||
padding:0.5em 0.875em 0 0.5em; | |||
padding-top:0.875em; | |||
display: inherit; | |||
width: inherit; | |||
height: 1.9em; | |||
overflow: inherit; | |||
background-image:none; | |||
.icon | |||
} | } |
Latest revision as of 22:51, 18 June 2020
@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 --------------------------------------------------------------*/ /*-------------------------------------------------------------- 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 .firstHeading { padding-top: 0; } .mw-body-content { font-size: inherit; } /* header */ #mw-head-base { margin-top: -4.14em; } #p-personal li, div.vectorTabs li a { font-size: 14px; font-size: 0.875rem; } #pt-userpage, #pt-anonuserpage { background: none; } #left-navigation, #right-navigation { margin-top: 3.25em; } div.vectorTabs{ background-image:none; border: 1px solid rgb(221, 221, 221); } div.vectorTabs span { background-image:none; } div.vectorTabs span a { padding-top: 0.875em; } div.vectorTabs ul { background-image: none; } div.vectorTabs ul li { background-image: none; } div.vectorTabs li.selected { background-image: none; border-bottom-color: #fff; background-color: #fff; } div#mw-head div.vectorMenu h3 { background-image:none; font-family: "IBM Plex Sans", sans-serif; font-size: 0.875rem; height: 2.5em; } div.vectorMenu h3 span { font-size: 1em; font-weight: bold; padding: 0.875em 1.5em 0 0.5em; margin: 0; color: #70065c; text-decoration: underline; } /* left nav */ div#mw-panel div.portal div.body ul li { font-size: 1rem; } /* content */ .catlinks { padding: 8px; } #mw-subcategories { padding-top: 1rem; } /* #mw-category-media { display: 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; color: #333; } 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; color: #333; font-family: 'IBM Plex Serif', serif; line-height: 1.5; margin: 0 0 0.75em; padding: 1em 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, .mw-body h1 { font-size: 29px; font-size: 1.8rem; } h2, .mw-body h2 { font-size: 26px; font-size: 1.6rem; } h3, .mw-body h3 { font-size: 23px; font-size: 1.4rem; } h4, .mw-body h4 { font-size: 20px; font-size: 1.2rem; } h5, .mw-body h5 { font-size: 18px; font-size: 1.1rem; } h6, .mw-body h6 { font-size: 16px; font-size: 1rem; font-weight: 800; } p, .mw-body p { font-size: 16px; font-size: 1rem; margin: 0 0 1.5em; padding: 0; } dfn, cite, em, i { font-style: italic; } blockquote { /* background-color: #e6e6f4; */ background-color: #F1F1F9; 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; } ul li { margin-bottom: 0.5em; } /*-------------------------------------------------------------- 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; } input, textarea, keygen, select { font-size: 16px; font-size: 1em; } /*-------------------------------------------------------------- 7.0 Formatting --------------------------------------------------------------*/ hr { background-color: #bbb; border: 0; height: 1px; margin-bottom: 1.5em; } /*-------------------------------------------------------------- 8.0 Lists --------------------------------------------------------------*/ .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul, ul, ol { margin: 0.3em 0 1em 1.6em; 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, div.vectorTabs li a, div#mw-panel div.portal div.body ul li a { color: #70065c; font-weight: bold; text-decoration: underline; } a:hover, a:active, div.vectorTabs li a:active { color: #570046; background-color: #F9F3D2; } a.new, #p-personal a.new { color: #9c0808; } a.new::after, #p-personal a.new::after, div.vectorTabs li.new a::after, div.vectorTabs li.new a:visited::after { content:"➕"; } #ca-unwatch.icon a, #ca-watch.icon a, #ca-unwatch.icon a:hover, #ca-unwatch.icon a:focus, #ca-watch.icon a:hover, #ca-watch.icon a:focus { margin: inherit; padding:0.5em 0.875em 0 0.5em; padding-top:0.875em; display: inherit; width: inherit; height: 1.9em; overflow: inherit; background-image:none; }