User:SamanthaNguyen/vector.css


 * root {

--reset-margin: -1.875rem; }

/* reset styles */ width: unset; }
 * 1) mw-panel {

.mw-page-container, .vector-menu-portal h3 { background-image: unset; }
 * 1) mw-panel,

.vector-menu-portal, .vector-menu-portal h3, .vector-menu-portal .vector-menu-content, .vector-menu-portal .vector-menu-content ul, .mw-sidebar-action { padding: unset; margin: unset; }
 * 1) mw-panel,
 * 2) mw-panel nav:first-child .vector-menu-content,

/* typography */ html, body { font-family: 'Inter', sans-serif; }

.mw-body h1, .mw-body-content h1 { font-family: 'DM Serif Text', sans-serif; }

.mw-body h1, .mw-body-content h1 { font-size: 32px; }

.vector-body .mw-parser-ouput > h2 { display: flex; align-items: center; justify-content: space-between;

border-bottom: 3px solid #eaecf0; font-family: 'DM Sans', sans-serif; font-size: 24px; }

.mw-editsection-bracket { display: none; }

/* sidebar action */ .mw-sidebar-action-link:visited { color: currentColor; }

.mw-sidebar-action-link:hover, .mw-sidebar-action-link:focus { text-decoration: none; }

.mw-sidebar-action-link { padding: .5rem 1rem; background-color: #f8f9fa; border: 1px solid #a2a9b1; border-radius: .125rem; color: #202122; transition: .2s ease-in-out; }

.mw-sidebar-action-link:hover { background-color: #fff; color: #404244; border-color: #a2a9b1; }

.mw-sidebar-action-link:active { border-color: #36c; box-shadow: inset 0 0 0 1px #36c; outline: 1px solid transparent; }

/* sidebar */ display: flex; flex-direction: column; gap: 2rem; padding: 1.5rem 1.5rem 0; }
 * 1) mw-panel {

.vector-menu-portal { display: flex; flex-direction: column; gap: .25rem; }

.vector-menu-portal h3 { color: #202122; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; }

.vector-menu-portal .vector-menu-content li { font-size: 0.875rem; }

/* header */ .mw-header { padding: .5rem 1.5rem; border: 0; margin: 0; margin-left: var(--reset-margin); margin-right: var(--reset-margin); background-color: #eaecf0; box-shadow: inset 0 -1px 3px rgba(0,0,0,0.08); }

/* footer */ .mw-footer-container { margin-left: var(--reset-margin); margin-right: var(--reset-margin); background: #eaecf0; }

.mw-footer { padding: 0; border-top: 0; }

/* article toolbar */ .vector-menu-tabs, .vector-menu-tabs a, .vector-menu-tabs li, background-image: unset; }
 * 1) mw-head .vector-menu-dropdown h3 {

.vector-menu-tabs { height: unset; }

.vector-menu-tabs li a { padding: unset; height: unset; float: unset; }

.vector-menu-tabs li a:hover, .vector-menu-tabs li a:focus { text-decoration: none; }

.mw-article-toolbar-container::after { content: unset; display: none; }

.mw-article-toolbar-container { display: flex; justify-content: space-between; border-bottom: 1px solid #a2a9b1; }

.vector-menu-tabs li a { color: #222; font-weight: 700; padding: .75rem; }

.vector-menu-tabs li a:hover { color: #36c; font-weight: 700; border-bottom: 2px solid #36c; }

.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited { color: #36c; font-weight: 700; border-bottom: 2px solid #36c; }

.vector-menu-tabs .mw-watchlink.icon a::before { background-image: unset; }

/* container */ .mw-body { border-top: 0; }

.mw-body h1 { border: 0; }

.mw-workspace-container { margin-top: 1rem; }

.warning-message + .warning-message, .warning-message + .mw-note { margin: 0; }

/* categories */ .catlinks { background: unset; border: unset; box-shadow: unset; }

.catlinks { padding: 1rem; }

/* HACK: hide ":" after "Categories" */ .catlinks { font-size: 0; }

.catlinks a[title="Help:Category"], .catlinks ul { font-size: .875rem; }

/* end hack */

.catlinks a[title="Help:Category"] { display: flex; padding: .5rem; }

.catlinks ul { font-size: .875rem; display: flex; flex-direction: row; flex-wrap: wrap; gap: .25rem; }

.catlinks li { display: inline-flex; border-left: 0; padding: 0; margin: 0; }

.catlinks ul a { background: #eaf3ff; border: 1px solid #36c; border-radius: 1.25rem; padding: .25rem .75rem; }

.catlinks a:hover, .catlinks a:focus { text-decoration: none; }

/* toc */ background: #f8f9fa; border: 1px solid #a2a9b1; border-radius: .25rem; box-shadow: unset; }
 * 1) toc {