MediaWiki:Vector.css

From Animal Crossing Mods Wiki
Revision as of 05:10, 22 September 2021 by PanchamBro (talk | contribs) (slightly changing visual editor a bit.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Vector skin */

/* Main body adjustments */
.mw-wiki-logo {
    background-size: 150px;
}

body {
    background: url(https://acmods.org/images/7/7e/ACMods_Background.png);
    font-family: 'Open Sans',sans-serif !important;
    background-size: 350px;
}

#mw-page-base {
    background: transparent !important;
}

.mw-body {
	background-color: #ECE6CC;
    margin-top: -1px;
    border: none;
    border-right-width: 0;
    box-shadow: 0 0.22em 0.9em 0.1em #805216;
    border-radius: 2em;
}

/* Vector tabs */
.vector-menu-tabs li, .vector-menu-dropdown, .vector-menu-tabs li.selected {
    background: #F6F6DF;
    background-image: none;
	border-radius: 5em;
	margin: -4px 1px 0 0;
	line-height: 0.7em;
}
#left-navigation {
    margin-left: 11.5em !important;
}
.vector-menu-tabs, .vector-menu-tabs .selected, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3  {
    background: none;
}
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
    color: #F39802;
}
.vector-menu-tabs li a, .vector-menu-dropdown h3 {
    color: #53524D;
}
.vector-menu-dropdown .vector-menu-content {
    background-color: #F6F6DF;
    border: none;
}
.vector-menu-dropdown li a {
    color: #53524D;
}

/* Sidebar changes */
.vector-menu-portal h3 {
    font-weight: normal;
    font-size: 1em;
    background-color: #805216;
    justify-content: center;
    display: flex;
    text-align: center;
    transition: color 0.3s,background-color 0.3s;
    box-sizing: inherit;
    color: #fff !important;
    margin: 0;
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 10em;
    font-family: 'Varela Round',sans-serif;
    margin-top: 1em;
    box-shadow: rgb(89, 75, 62) 0px 3px 0px 0px;
    margin-bottom: 5px;
    border-bottom: none;
    background-image: none;
}
.vector-menu-portal .vector-menu-content ul {
    list-style: none none;
    margin: 0;
    padding-top: 0.3em;
    font-family: 'Varela Round',sans-serif;
}
.vector-menu-portal .vector-menu-content li {
    padding: 0.25em 0;
    background-color: #DAC783;
    border-radius: 10em;
    margin-bottom: 5px;
    box-shadow: rgb(162,144,115) 0px 3px 0px 0px;
}
.vector-menu-portal .vector-menu-content li:hover {
	background: #FFF1C3;
	transition: background-color 0.3s cubic-bezier(0.25,0.8,0.5,1),opacity 0.4s cubic-bezier(0.25,0.8,0.5,1);
}
.vector-menu-portal .vector-menu-content li:active {
	background: #B3A163;
	transition: background-color 0.3s cubic-bezier(0.25,0.8,0.5,1),opacity 0.4s cubic-bezier(0.25,0.8,0.5,1);
}
.vector-menu-portal .vector-menu-content {
    margin-left: 0.5em;
    margin-right: 0.5em;
}
.vector-menu-portal .vector-menu-content li a {
    color: #0645ad;
    text-align: center;
    padding: 0.25em 0;
    display: grid;
    color: #000 !important;
    cursor: pointer !important;
    font-family: 'Varela Round',sans-serif;
}
.vector-menu-portal {
	padding: unset;
	margin: unset;
}

/* Search appearance */
#searchInput {
    background-color: #fdfbe6;
    color: #7c7056;
    border-radius: 2em;
    font-family: 'Varela Round',sans-serif;
    border: none;
}

/* Text headers */
h1, h2 {
    border-bottom: 2px dashed #805216;
}

.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
    margin-bottom: 0.25em;
    padding: 0;
    font-family: 'Varela Round',sans-serif;
    line-height: 1.3;
    color: #805216;
}

/* Categories */
.catlinks {
    background-color: #E7E0C3;
    border-radius: 5em;
}

/* Prefernces & button stylizing */
.mw-prefs-buttons {
    background-color: #ECE6CC;
}
.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button, button {
    padding: 0.35em 1em;
    border-radius: 5em;
    font-family: 'Varela Round', sans-serif !important;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    color: #fff;
    background-color: #03B2AB;
    border-color: #03B2AB;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
    color: #fff;
    background-color: #216663;
    border-color: #216663;
    box-shadow: none;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
    background-color: #0D9B95;
    border-color: #0D9B95;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
    border-color: #03B2AB;
    box-shadow: inset 0 0 0 1px #03B2AB,inset 0 0 0 2px #fff;
    outline: 1px solid transparent;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
    background-color: #f5f7e1;
    color: #f49800;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
    background-color: #fff;
    color: #f49800;
    border-radius: 5em;
}
.oo-ui-tabSelectWidget-framed {
    background-color: #f5f7e1;
    font-family: 'Varela Round', sans-serif !important;
    border-radius: 5em;
}
.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
    line-height: 1.42857143em;
    font-family: 'Varela Round', sans-serif !important;
}
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed, .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
    border-color: transparent;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
    color: #FF4548;
    background-color: #D4CA82;
    border-radius: 5em;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
    color: #FF4548;
    background-color: #FFFDED;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
	background-color: #E2C599;
	color: #7C5C43;
    border-color: transparent;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    background-color: #F7DFB9;
    color: #9A7F62;
    border-color: #3CD7AB;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
    background-color: #B0A593;
    color: #443E38;
    border-color: #1F6450;
    box-shadow: none;
}

/* Visual editor changes */
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link {
    color: #fff;
    background-color: #0D9B95;
    font-family: 'Varela Round',sans-serif !important;
}