MediaWiki:Vector.css: Difference between revisions

Latest revision as of 15:37, 16 February 2024

/* CSS placed here will affect users of the Vector skin */

body {
  background-image: url("https://cdn.wikimg.net/es/splatoonwiki/images/6/60/Inkipedia_background_S3_Vector.svg");
  background-repeat: repeat;
}

/* Styles the account information box in the top right corner */
.skin-vector-legacy #p-personal {
  background-color: white;
  top: -0.09em;
  margin-right: 4em;
  padding: 2px 12px 2px 0;
  border-radius: 2px 2px 10px 10px;
  border-style: solid;
  border-color: #AADC00;
  border-width: 2px;
}

/* Tab stuff */
.skin-vector-legacy nav.vectorTabs,
.skin-vector-legacy nav.vectorMenu h3#p-cactions-label,
.skin-vector-legacy #left-navigation .vector-menu-content a,
.skin-vector-legacy #right-navigation .vector-menu-content a {
  background-image: none;
}

.skin-vector-legacy nav#p-namespaces li,
.skin-vector-legacy nav#p-views li,
.skin-vector-legacy nav#p-cactions {
  background-color: #f3f3f3;
  background-image: none;
  border-radius: 0.95em 0.95em 0 0;
  height: 1.85em;
  line-height: 1px;
  margin-right: 0.15em;
  margin-top: 0.5em;
  border-style: dashed dashed solid dashed;
  border-color: #aadc00;
  border-width: 1px;
  min-width: 30px;
}
.skin-vector-legacy nav#p-cactions h3 {
	color: var(--link-internal,#378B00);
	height: 30px !important;
	padding-right: 8px !important;
	text-align: center;
}
.skin-vector-legacy nav#p-cactions h3::after {
	right: 0;
	padding: 0.5em;
	background-position: initial;
	/** This brings the arrow in-line with the middle of the e from "More" */
	top: 0.6em;
    margin-left: 0.2em;
}
/* Make the dropdown arrow play nicely */
.skin-vector-legacy .vector-menu-dropdown h3:after {
  top: auto;
  right: inherit;
  position: inherit; 
}

.skin-vector-legacy .vector-menu-dropdown .vector-menu-content {
	border-width: 1px;
	top: 100%;
}

.skin-vector-legacy nav#p-views .selected,
.skin-vector-legacy nav#p-namespaces .selected {
  background: #ffffff;
}

.skin-vector-legacy #ca-unwatch.icon a,
.skin-vector-legacy #ca-watch.icon a {
  padding-top: 21px;
  padding-bottom: 21px;
  padding-left: 24px;
  margin-top: -5px;
  width: 68px;
}

.skin-vector-legacy #ca-unwatch.icon a {
  width: 82px;
}

.skin-vector-legacy div#mw-head div.vectorMenu h3 {
  background: #fff;
  height: 28px;
  margin-top: 0.6em;
  border-style: dashed dashed solid dashed;
  border-color: #aadc00;
  border-width: 1px;
  border-radius: 10px 10px 0 0;
  margin-left: 0.1em;
  margin-right: 0.4em;
}

.skin-vector-legacy div.vectorMenu h3 span {
  padding-top: 6px;
}

.skin-vector-legacy .skin-vector-legacy #left-navigation {
  margin-left: 11em;
}

.skin-vector-legacy #right-navigation {
  margin-right: 4em;
  overflow: visible;
  display: inline;
}

.skin-vector-legacy #p-logo {
  left: -1em;
  margin-top: -185px;
  margin-left: -15px;
}

.skin-vector-legacy div#mw-page-base {
  background-image: none;
  background-color: rgba(255,255,255,0);
  opacity: 0;
}

.skin-vector-legacy #mw-panel {
  background-color: white;
  max-width: 8em;
  margin-left: 0.8em;
  margin-top: 11em;
  padding: 1em 0.5em 1em 0em;
  border-style: solid;
  border-color: #AADC00;
  border-width: 2px 2px 2px 10px;
  border-radius: 2px;
}

.skin-vector-legacy  .mw-body {
  border-style: solid;
  border-color: #AADC00;
  border-width: 1px 2px 0 2px;
  margin-left: 11em;
  margin-right: 5em;
  background-color: #ffffff;
}

.skin-vector-legacy .mw-body h1, .mw-body h2, .mw-body #firstHeading {
  font-family: sans-serif;
}

/* ink splotches on headers */
.skin-vector-legacy .mw-body h1,
.skin-vector-legacy .mw-body h2 {
  position: relative;
}
/* ::before element is needed for opacity */
.skin-vector-legacy .mw-body h1::before,
.skin-vector-legacy .mw-body h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  opacity: .6;
  z-index: -1;
  background-image: url(//cdn.wikimg.net/splatoonwiki/images/5/5c/Drip-heading.png);
  background-repeat: no-repeat;
  bottom: 0;
}
.skin-vector-legacy .mw-body h1::before { background-position: 95% -2.5%; } /* green */
.skin-vector-legacy .mw-body h2:nth-of-type(6n-5)::before { background-position: 95% 20%; } /* purple */
.skin-vector-legacy .mw-body h2:nth-of-type(6n-4)::before { background-position: 95% 40%; } /* blue */
.skin-vector-legacy .mw-body h2:nth-of-type(6n-3)::before { background-position: 95% 60%; } /* orange */
.skin-vector-legacy .mw-body h2:nth-of-type(6n-2)::before { background-position: 95% 80%; } /* pink */
.skin-vector-legacy .mw-body h2:nth-of-type(6n-1)::before { background-position: 95% 100%; } /* cyan */
.skin-vector-legacy .mw-body h2:nth-of-type(6n)::before { background-position: 95% 0%; } /* green */
.skin-vector-legacy #toc h2::before { background: none; } /* prevent splotches from showing on table of contents header */
.skin-vector-legacy #firstHeading {z-index: 0; } /* fix splotch not showing on title header */

/* prevent h1 help links from becoming unclickable due to the ::before elements */
.skin-vector-legacy div.mw-indicators.mw-body-content {
  position: relative;
  z-index: 1;
}

.skin-vector-legacy #footer {
  background-color: white;
  background-image: url("//cdn.wikimg.net/splatoonwiki/images/b/b4/Featured-bg.png");
  border-style: solid;
  border-color: #AADC00;
  border-width: 1px 2px 1px 2px;
  margin-right: 5em;
  margin-bottom: 16px;
  border-radius: 0 0 10px 10px;
  padding-bottom: 48px;
}

/* Make margins of footer and search consistent */
.skin-vector-legacy .mw-footer {
  margin-left: 11em;
}
.skin-vector-legacy #p-search {
  margin-right: 1em;
}

/*==================================================
  Interface improvements
==================================================*/

/*=NAVIGATION=*/

/* "More" menu */
.skin-vector-legacy .vectorMenu h3{
    border-radius:0.95em 0.95em 0 0 !important;
    padding-bottom:2px !important;
}
.skin-vector-legacy .vectorMenu h3 span:after{
    top:6px !important;
}
.skin-vector-legacy .vectorMenu span{
    top:2px;
}
.skin-vector-legacy .vectorMenu .menu{
    border-radius: 0 0 10px 10px;
    left:1.5px;
    min-width:86.5%;
}
.skin-vector-legacy .vectorMenu .menu ul{
    position:relative;
    left:-1px;
}

/* Remove blue background from the tab */
.skin-vector-legacy .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 {
  background: none;
}

/* Fix watch tab from overflow and bouncing */
.skin-vector-legacy .vector-menu-tabs .mw-watchlink.icon a {
	padding: 0.5em;
}
.skin-vector-legacy #ca-watch.icon a, #ca-unwatch.icon a {
    width: inherit;
}

/* Search */
.skin-vector-legacy #simpleSearch{
    background:#f3f3f3;
    bottom:3px;
    border-radius:0.95em 0.95em 0 0;
    border-style: dashed dashed solid dashed !important;
    border-width:1px;
    border-color:#aadc00;
    padding-bottom:0px;
    padding-top:4px;
    padding-left:5px;
    padding-right:5px;

    -webkit-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
}
.skin-vector-legacy #simpleSearch:hover{
    background-color:#ffffff;
    /* border-color:transparent; */
}
.skin-vector-legacy #searchInput{
    border:none;
}
.skin-vector-legacy #searchInput:focus, #simpleSearch:hover #searchInput:focus{
    -webkit-box-shadow:none; /* Disables blue border when focused */
    box-shadow:none;
}
.skin-vector-legacy #searchButton{
    top:1px;
    right:5px;
}

/* Code to resolve a display error on small screens for the main page */
@media all and (min-width: 1075px){
    .hide-div-mainPage-event {
        display: flex;
        flex-wrap: wrap;
    }
}