Difference between revisions of "MediaWiki:Vector.css"

Revision as of 14:43, 6 July 2022

@import url('https://fonts.googleapis.com/css?family=Comfortaa:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:800&display=swap');

img:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url(gamedb/icons/missing_24.png);
}

a.new, a:visited.new {
    color: #ff761a;
}

.vector-menu-portal .vector-menu-content li a, .vector-menu-portal .vector-menu-content li a:visited {
  color: #f7f5f1;
}

a:hover.new, a:active.new {
    color: #f7f5f1;
    text-decoration: none;
}

.vector-menu-portal .vector-menu-content li a:hover, .vector-menu-portal .vector-menu-content li a:active {
    color: #ff761a;
    text-decoration: none;
}

.mw-parser-output a.external, .mw-parser-output a.external:visited {
    color: #ffb94d;
    text-decoration: none;
    line-height: 150%!important;
}

.mw-parser-output a.external:hover, .mw-parser-output a.external:active {
    color: #f7f5f1;
    text-decoration: none;
    line-height: 150%!important;
}

a, a:visited {
    color: #ffb94d;
}

a:hover, a:active {
    color: #f7f5f1;
    text-decoration: none;
}


.vector-menu-portal h3 {
    color: #68bca3;
}

body, #mw-page-base, #mw-head-base, #mw-head{
  background-color: #070707;
  font-family: 'Comfortaa', cursive;
}

#mw-page-base {
    background-color: #070707;
    background-image: linear-gradient(to bottom,#070707 50%,#070707 100%);
}

.mw-body {
    margin-left: 15em;
    border-radius: 0 25px 25px 25px;
}


#mw-panel {
  width: 14em;
}

.mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, .mw-footer {
    margin-left: 15em;
}

#right-navigation, #p-personal, #footer-icons {
    padding-right: 2.5em;
}

#content{
    margin-right: 2em;
}

#content, .mw-body {
  background-color: #2f343a;
  color: #f7f5f1;
}

.mw-body {
  border: 1px solid #111;
}

h1 {
    font-family: 'Nunito Sans', sans-serif;
    color: #f2bc00;
}

h2, h3, h4, h5, h6 {
    font-family: 'Nunito Sans', sans-serif;
    color: #68bca3;
}

.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
    font-family: 'Nunito Sans', sans-serif;
}

.vector-menu-tabs li {
    background: #68bca3;
    background-image: linear-gradient(to top,#88dcc3 0,#68bca3 1px,#88dcc3 100%);
}

.vector-menu-tabs li:hover {
    background: #58ac93 ;
    background-image: linear-gradient(to top,#78ccb3 0,#58ac93 1px,#78ccb3 100%);
}

.vector-menu-tabs .selected {
    background: #58ac93 ;
    background-image: linear-gradient(to top,#78ccb3 0,#58ac93 1px,#78ccb3 100%);
}

.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:hover, .vector-menu-tabs .selected a:visited, .vector-menu-tabs .selected a:active,
.vector-menu-tabs .new a, .vector-menu-tabs .new a:visited, .vector-menu-tabs .new a, .vector-menu-tabs li a, .vector-menu-tabs li a:visited {
  color: #111;
}

#searchInput {
    background-color: rgba(0,0,0,0.5);
    color: #f7f5f1;
    border: 1px solid #a2a9b1;
    box-shadow: inset 0 0 0 1px transparent;
}

#searchInput:focus, #simpleSearch:hover #searchInput:focus {
    border-color: #f2bc00;
    box-shadow: inset 0 0 0 1px #f2bc00;
}

.vector-menu-dropdown h3 {
    color: #111;
}

.vector-menu-dropdown .vector-menu-content {
    background-color: #68bca3;
    border: 1px solid #111;
    color: #111;
}

.vector-menu-dropdown .mw-list-item:hover {
    background-color: #88dcc3;
    text-decoration: none;
}

.vector-menu-dropdown li a {
    color: #111;
}

#mw-head .vector-menu-dropdown {
    background-image: linear-gradient(to top,#88dcc3 0,#68bca3 1px,#88dcc3 100%);
}

.vector-menu-tabs, .vector-menu-tabs a {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0) 0,#111 100%);
}

.mw-footer li {
    color: #c7c5c1;
}

.mw-plusminus-pos {
    color: #92cc23;
}

.mw-plusminus-neg {
    color: #D15534;
}

.mw-changeslist-legend {
    border-radius: 10px;
    background-color: #3f444a !important;
    border: 1px solid #1f242a !important;
}

.warningbox {
    border-radius: 10px;
    background-color: #3f444a;
    border-color: #1f242a;
}

.warningbox, .successbox {
    color: #d5cfbb;
}

.oo-ui-panelLayout-framed {
    border: 1px solid #1f242a;
    border-radius: 10px;
    background-color: #3f444a;
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
    border: 1px solid #1f242a;
    background-color: #2f343a;
    color: #d5cfbb;
    border-radius: 0;
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
    border: 1px solid #1f242a;
    background-color: #2f343a;
    color: #ff761a;
    border-radius: 0;
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
    background-color: #2f343a;
    color: #d5cfbb;
    border: 1px solid #121212;
    border-radius: 0;
}

.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
    background-color: #3f444a !important;
    color: #f7f5f1 !important;
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
    background-color: #3f444a;
}

.oo-ui-menuSelectWidget {
    background-color: #3f444a;
    border: 1px solid #121212;
}

.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
    color: #c7c5c1;
    text-shadow: none;
    border-color: #000;
    background-color: #1f242a;
    border-radius: 0;
}

.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-inputWidget-input {
    color: #c7c5c1;
    text-shadow: none;
    border-color: #000;
    background-color: #1f242a;
    border-radius: 0;
}

.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
    background-color: rgba(120, 200, 220, 0.1);
    color: #f7f5f1;
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
    border: 1px solid #1f242a;
    outline: 0;
    box-shadow: inset 0 0 0 1px #1f242a;
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
    color: #d5cfbb;
}
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
    background-color: #2f343a;
    color: #d5cfbb;
}

.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
    background-color: #3f444a;
    color: #ff761a;
}


fieldset {
    border: 1px solid #1f242a;
    border-radius: 10px;
    background-color: #3f444a;
}

.wikitable {
    background-color: #2f343a;
    color: #f7f5f1;
    line-height: 150%;
}

.wikitable > tr > th, .wikitable > * > tr > th {
    background-color: #1f242a;
    padding: 10px;
    border: 5px solid #2f343a;
    line-height: 150%;
}

.wikitable > tr > td, .wikitable > * > tr > td {
    background-color: #3f444a;
    padding: 10px;
    border: 5px solid #2f343a;
    line-height: 150%;
}

.manualpage{
    color: #f7f5f1;
    border-spacing: 10px 20px;
    line-height: 150%;
}


.manualpage> tr > th, .manualpage > * > tr > th {
    background-color: #1f242a;
    padding: 15px;
    line-height: 150%;
}

.manualpage> tr > td, .manualpage> * > tr > td {
    padding: 15px;
    vertical-align: top;
    text-align: left;
    background-color: #3f444a;
    line-height: 150%;
}

.manualpage> tr > td > video, .manualpage> * > tr > td > video {
    max-width: 800px!important;
    max-height: 450px!important;
}


pre, code, .mw-code {
    color: #d7d5d1;
    background-color: #1a1a1a;
    border: 1px solid #050505;
    border-radius: 0px;
    font-family: monospace;
    padding: 3px;
    font-size: smaller;
}

textarea {
    padding: 10px;
    color: #f7f5f1;
    background-color: #2f343a;
    border: 1px inset #050505;
    border-radius: 10px 10px 0 0;
    box-shadow: inset -2px 0 20px 4px #121212;
}


.editOptions {
    background-color: #3f444a;
    color: #f7f5f1;
    border: 1px solid #050505;
    border-top: 0;
    border-radius: 10px;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    color: #fff;
    background-color: #68bca3;
    border-color: #68bca3;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
    color: #fff;
    background-color: #ff761a;
    border-color: #ff761a;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span {
    background-color: #68bca3;
    border-color: #68bca3;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled:hover [type='checkbox']:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled:hover [type='checkbox']:indeterminate + span {
    background-color: #ff761a;
    border-color: #ff761a;
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
    color: #f7f5f1;
    background-color: #3f444a;
}

.toc, .toccolours {
    border: 1px solid #050505;
    background-color: #3f444a;
    border-radius: 10px;
}

.toctogglelabel {
    color: #ff761a;
}

.tocnumber {
    color: #f7f5f1;
}



.example {
    border: 1px solid #d7d5d1;
    background-color: #4f545a;
    border-radius: 5px;
    padding: 8px 10px 8px 10px;
    margin: 10px 0 10px 5px;
}


code {
    font-family: 'Comfortaa', cursive;
    border: 1px solid #0f141a;
    background-color: #1f242a;
    color: #d7d5d1;
    padding: 4px 5px 3px 5px;
}




.gc_icon_smaller {
    width: 16px;
    height: 16px;
}

.gc_icon_smaller:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    background-image: url(gamedb/icons/missing_16.png);
}


.gc_icon_small {
    width: 20px;
    height: 20px;
}

.gc_icon_small:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url(gamedb/icons/missing_20.png);
}


.gc_icon {
    width: 24px;
    height: 24px;
}

.gc_icon:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url(gamedb/icons/missing_24.png);
}


.gc_icon_big {
    width: 32px;
    height: 32px;
}

.gc_icon_big:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url(gamedb/icons/missing_32.png);
}


.gc_icon_bigger {
    width: 48px;
    height: 48px;
}

.gc_icon_bigger:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 48px;
    height: 48px;
    background-image: url(gamedb/icons/missing_48.png);
}


.gc_icon_giant {
    width: 64px;
    height: 64px;
}

.gc_icon_giant:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    background-image: url(gamedb/icons/missing_64.png);
}


.gc_portrait_small {
    width: 96px;
    height: 96px;
}

.gc_portrait_small:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 96px;
    height: 96px;
    background-image: url(gamedb/icons/missing_96.png);
}


.gc_portrait {
    width: 128px;
    height: 128px;
}

.gc_portrait:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 128px;
    height: 128px;
    background-image: url(gamedb/icons/missing_128.png);
}


.gc_portrait_large {
    width: 192px;
    height: 192px;
}

.gc_portrait_large:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 192px;
    height: 192px;
    background-image: url(gamedb/icons/missing_192.png);
}


.gc_portrait_larger {
    width: 256px;
    height: 256px;
}

.gc_portrait_larger:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 256px;
    height: 256px;
    background-image: url(gamedb/icons/missing_256.png);
}


.item_info .gc_tooltip {
    visibility: hidden;
    display: inline-block;
    text-align: center;
    padding: 5px 10px 5px 10px;
    margin-top: -10px!important;
    margin-left: 10px!important;
    position: absolute!important;
    z-index: 5!important;
    border: 1px solid #4f545a;
    background-color: #181818;
    border-radius: 10px;
}

.item_info:hover .gc_tooltip {
    visibility: visible!important;
}

table.mw-enhanced-rc {
    margin-bottom: 12px;
    line-height: 150%;
    color: #f7f5f1;
}


.infotable {
    background-color: #2f343a;
    color: #f7f5f1;
    line-height: 150%;
    width: 300px;
    font-size: small;
    right: 50px;
    border-spacing: 5px 5px;
    float: right;
    empty-cells: hide;
    clear: right;
}

.infotable > tr > th, .infotable > * > tr > th {
    background-color: #1f242a;
    padding: 6px 10px 3px 10px;
    line-height: 150%;
    vertical-align: middle;
}

.infotable > tr > td, .infotable > * > tr > td {
    background-color: #3f444a;
    padding: 6px 10px 3px 10px;
    line-height: 150%;
    vertical-align: middle;
}



.wikicontainer {
    background-color: #2f343a;
    color: #f7f5f1;
    line-height: 150%;
    border: 5px #1f242a solid;
    border-radius: 10px;
    border-spacing: 0;
    width: 20em;
    margin: 0 1% 15px 0;
    max-width: 100%;
    min-width: 32%;
    float:left;
}

.wikicontainer > tr > th, .wikicontainer > * > tr > th {
    background-color: #1f242a;
    padding: 5px 10px 5px 10px;
    line-height: 150%;
    width: 100%;
    height: 25px;
}

.wikicontainer > tr > td, .wikicontainer > * > tr > td {
    background-color: #3f444a;
    border: 2px #2f343a inset;
    padding: 5px 10px 5px 10px;
    border-radius: 0 0 7px 7px;
    line-height: 150%;
    width: 100%;
}