Difference between revisions of "MediaWiki:Vector.css"
From Animal Crossing Mods Wiki
PanchamBro (talk | contribs) (resizing logo) |
PanchamBro (talk | contribs) m (slightly changing visual editor a bit.) |
||
(9 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Vector skin */ | /* All CSS here will be loaded for users of the Vector skin */ | ||
/* Main body adjustments */ | |||
.mw-wiki-logo { | .mw-wiki-logo { | ||
background-size: 150px; | 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; | |||
} | } |
Latest revision as of 05:10, 22 September 2021
/* 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;
}