User:Qono/vector.css
Appearance
Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump. This code will be executed when previewing this page. |
![]() | The accompanying .js page for this skin is at User:Qono/vector.js. |
/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* Styles for screens with max-width of 700px */
@media screen and (max-width: 700px) {
#mw-panel {
opacity: 0;
margin-left: -11em;
}
#content, #head-base, #footer, #mw-head-base {
margin-left: -1px;
}
#left-navigation {
margin-left: 1em;
}
}
/* Adjust infoboxes for screens with min-width of 1280px */
@media screen and (min-width: 1280px) {
.infobox, .sidebar {
width: 30em;
}
}
/* Adjust infoboxes for screens with max-width of 850px */
@media screen and (max-width: 850px) {
.infobox, .sidebar {
width: 100%;
}
.thumb.tleft {
width: 100%;
}
}
.sidebar-person-title-image {
min-width:3em;
display:flex;
}
/* Optimizing text rendering and setting font variant for html and body */
html, body {
text-rendering: optimizeLegibility;
font-variant-numeric: ordinal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Set font-size, font-family, line-height, and font variant for body content */
.mw-body-content {
font-size: 1.15rem; /* Adjust font size for better scaling */
line-height: 1.5; /* Adjust line height for readability */
font-family: 'Crimson Pro', serif;
font-variant-numeric: oldstyle-nums;
text-align: left;
}
/* Set font variant for tables */
table {
font-variant-numeric: tabular-nums;
}
/* Set font variant for headings and headlines */
.firstHeading, .mw-headline {
font-variant-numeric: lining-nums;
}
/* Set font-family for specific elements within body */
.mw-body .firstHeading, .mw-headline, .mw-body-content sub, .mw-body-content sup, .reference {
font-family: 'Crimson Pro', serif;
}
/* Set max-width for content area */
#content {
max-width: 1175px;
}
/* Set font-family and font variant for multiple elements */
h3, h4, h5, h6, b, h3 .mw-headline, h4 .mw-headline, h5 .mw-headline, h6 .mw-headline, .mw-editsection, .mw-body-content p b, b a, #mw-head, #mw-panel, #mw-head li, #mw-panel li, #mp-topbanner, .rt-tooltip {
font-family: 'Open Sans', sans-serif;
font-variant-numeric: lining-nums;
}
/* Set font weights and sizes for headings */
h1, h2, h3, h4, h5, h6, .vector-body h2 {
font-family: 'Crimson Pro', serif;
font-weight: 700;
margin-top:1em;
margin-bottom:1em;
}
h1 { font-size: 2.441em; } /* Scale based on a ratio */
h2 { font-size: 1.953em; }
h3 { font-size: 1.563em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.8em; }
/* Reduce font size for certain elements for emphasis */
p b, dd b, li b, td b, span b, code, pre {
font-size: 80%;
}
li, dl dd {
margin-top:0.5em;
margin-bottom:0.5em;
}
.thumbcaption, .infobox-caption, .locmap div div, .sidebar-caption {
font-size: 0.9em;
font-style: italic;
text-align: center;
padding-top: 0.5em;
}
.infobox {
margin: 2em 0 0.5em 1em;
padding: 1em;
}
.thumbcaption i, .thumbcaption em, .infobox-caption i, .infobox-caption em {
font-style: normal; /* override italic style */
}
.hatnote {
margin-top: 1em;
}
/* Reduce top banner font size */
#mp-topbanner {
font-size: 85%;
}
/* Set font variant for sup */
sup {
font-variant-position: super;
font-variant-numeric: lining-nums;
}
/* Set max-width, margins, padding and font variant for paragraph, dl */
.mw-body-content p, dl {
margin-top: 1.5em;
margin-bottom: 1.5em;
font-variant-numeric: oldstyle-nums;
hyphens: auto;
text-align: justify;
}
.mw-body-content li {
font-variant-numeric: oldstyle-nums;
hyphens: auto;
text-align: justify;
max-width: 48ch;
}
.mw-parser-output .sidebar p {
text-align: center;
}
.mw-parser-output .side-box {
margin-bottom:2em !important;
}
/* Set font variant for dd within dl */
dl dd {
font-variant-numeric: oldstyle-nums;
}
/* Hide edit section by default, show on hover */
.mw-content-ltr .mw-editsection {
opacity: 0;
}
.mw-content-ltr .mw-editsection:hover {
opacity: 1;
}
/* Set max-width for page history and contribution list items */
#pagehistory li, .ve-ce-branchNode.ve-ce-contentBranchNode.ve-ce-paragraphNode, .mw-contributions-list li {
max-width: 100%;
}
/* Move left-aligned images to the right */
div.tleft {
clear: right;
float: right;
margin: 0.5em 0 1.3em 1.4em;
}
/* Limit image width and adjust height automatically */
.center *:not(.notpageimage), div.thumbinner, div.tleft, div.tnone, div.tright, html .thumbimage, img:not(.notpageimage) {
max-width: 100%;
height: auto;
}
/* Do not shrink images within mbox-image */
.mbox-image img {
min-width: initial;
}
/* Adjust width and max-width for dl and table within dd */
#mw-content-text dl dd table {
width: 98%;
max-width: 98%;
}
/* Apply small-caps and remove underline for abbreviations */
abbr {
font-variant-caps: all-small-caps;
text-decoration-line: none;
font-size: 1.25em;
}
/* Tweak appearance of packed galleries */
.mw-gallery-packed, .mw-gallery-packed-overlay, .mw-gallery-packed-hover {
text-align: left;
position: relative;
width: 100%;
margin-left: 0;
}
li.gallerybox{
margin:0.25em;
}
/* Style for anchor links */
a {
color: #0645ad;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Style for lists */
ul, ol {
margin-left: 2em;
}