Difference between revisions of "MediaWiki:Vector.css"

From Final Fantasy XIV Online Wiki
Jump to navigation Jump to search
m
 
(8 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/*<nowiki>*/
/* CSS placed here will affect users of the Vector skin */
/*General body setup*/
a, a.external {
html, body {
  color: #05f;
    min-height: 100%;
    height: auto;
}
html {
    background-color: #F3F3F3;
    background-image: url("/images/2/2b/Skin_footer_%28Heart_of_Thorns%29.png"), url("/images/8/8b/Skin_page_bg_gradient.jpg");
    background-repeat: no-repeat, repeat-x;
    background-position: center bottom -75px, center top;
    min-width: 800px; /* chrome mobile fixes */
}
}


body {
a:visited {
    font-size: 100%;
  color: #795cb2;
    line-height: 1.2em;
    background: transparent !important;
}
}


#p-logo a
/* new header navigation tabs */
{
.vector-menu-tabs,
  width: 10em;
.vector-menu-tabs a,
}
#mw-head .vector-menu-dropdown h3 {
 
   background-image: none;
#p-logo
{
  width: 10em;
  background-color: transparent;
  left: 0 !important; /* Over-ride media css */
}
 
@media screen and (min-width:982px) {
div#content {
   padding: 1em 1.2em 1em;
}
}
}


/*Rhythmic text sizes and grid leading*/
div#mw-head ul.vector-menu-content-list > li {
#bodyContent > h1:hover, #bodyContent > h2:hover, #bodyContent > h3:hover, #bodyContent > h4:hover, #bodyContent > h5:hover, #bodyContent > h6:hover
{
   background-image: none;
   background-image: none;
}
}


div#content h1, div#content h2, div#content h3, div#content h4, div#content h5, div#content h6
div#mw-head ul.vector-menu-content-list > li.selected {
{
   background-color: #eff8f9;
   line-height: 1em;
  padding: 0;
}
}


div#content h1, div#content h2
div#mw-head .vector-menu-tabs li a {
{
   color: #000000;
  font-family: "EasonPro","Times New Roman", serif !important;
  font-weight: normal;
}
 
div#content h3, div#content h4, div#content h5, div#content h6
{
   font-family: Arial, sans-serif !important;
   font-weight: bold;
   font-weight: bold;
}
}


div#content h1
div#simpleSearch {
{
   background-color: #ffffff;
   font-size:    2.2308em;
  margin-top:    0.7241379310em;
  margin-bottom: 0.6896551724em;
}
}


div#content #firstHeading /* note: this element is outside div.bodyContent so is actually the same displayed font size as h1 2.2308em */
/* new sidebar */
{
div#mw-panel ul.vector-menu-content-list > li > a {
   font-size:     1.8125em;
   color: #000000;
   margin-top:   0;
   font-weight: bold;
}
}


div#content h2
/* new footer */
{
footer.mw-footer ul#footer-places > li > a {
  font-size:    1.92301em;
   color: #000000;
  margin-top:    1em;
   margin-bottom: 0.4em;
}
}


div#content h3
/* widen the sidebar */
{
div#mw-panel {
   font-size:    1.3077em;
   width: 12em;
  margin-top:    1.3529411765em;
  margin-bottom: 0.5882352941em;
}
}
 
div#footer,
div#content h4
#mw-head-base,
{
div#content {
  font-size:    1.1538em;
   margin-left: 12em;
   margin-top:    1em;
  margin-bottom: 0.6666666667em;
  padding: 0;
}
}
 
#left-navigation {
div#content h5
   left: 12em;
{
   font-size:    1.0000em;
  margin-top:    1.3076923077em;
  margin-bottom: 0.7692307692em;
}
}


div#content h6
div#mw-panel div.portal {
{
   padding-bottom: 5px;
  font-size:    0.92308em;
  margin-top:    1.5em;
   margin-bottom: 0.8333333333em;
}
}


#contentSub
div#p-namespaces {
{
   margin-left: 1em;
   margin-top: -1.2em;
}
}


p, ul, ol, dl
div#mw-panel div.portal {
{
  margin: 0 0.6em 0 0;
  margin-top:   0.7692307692em;
  margin-bottom: 0.7692307692em;
  line-height:  1.5384615385em;
}
}


dd, dt, li
div#mw-panel div.portal div.body ul li {
{
  margin-left: 1em;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5384615385em;
}
}


#bodyContent {
div#mw-panel div.portal h3 {
   font-size: 0.8125em;
   margin-left: 2.4em;
  padding-top: 0px !important;
}
}


#content li > ul, #content li > ol
/* background colors */
{
body {
  margin-top: 0px;
  background-color: #ebebeb;
  margin-bottom: 0px;
}
}


sup, sub
/* gives makes the entire header section gray */
{
#mw-page-base {
  line-height: 0;
}
 
div#content #toc {
  margin: 10px 0px;
}
 
div#content #toc h2, div#content .toc h2 {
  font-family: sans-serif !important;
  font-weight: bold;
}
 
/*Personal panel*/
 
#p-personal
{
  right: 0;
  top: 0;
  padding-right: 0.75em;
  border-radius: 0 0 0 0.5em;
  margin-left: 10em;
  background-color: #fff;
  z-index: 6;
  text-transform: lowercase;
}
 
#p-personal ul
{
padding-left: 0;
}
 
#pt-userpage, #pt-anonuserpage, #pt-login
{
  text-transform: none;
}
 
#p-personal li
{
  margin: 0.4em 0 0.4em 1em;
  line-height:1em;
}
 
#p-personal li.active a
{
  font-weight: bold;
}
 
li#pt-userpage
{
  background: none;
  padding-left: 0px !important;
}
 
/*Left panel*/
 
#mw-panel
{
  z-index: 1;
}
 
div#mw-panel div.portal
{
  width: 8em;
  margin: 0 0.8em 0.4em 0.8em !important;
  padding: 0.1em 0 0 !important;
  background-image: none !important;
}
 
div#mw-panel div.portal div.body ul li, div#mw-panel div.portal h3
{
  font-size: 0.75em;
}
div#mw-panel div.portal div.body {
  margin-left: 0.25em !important;
}
 
/*Footer*/
 
div#footer
{
   background-color: transparent;
   background-color: transparent;
  margin: -7.5em 0 0 !important;
  padding: 8em 0 0.5em 13em !important;
  position: relative;
  height: 7em;
}
#footer ul li
{
  padding: 0 !important;
}
#footer #footer-info li, #footer #footer-places li
{
  line-height: 1.6666666667em;
}
#footer #footer-places
{
  margin-top: 0.8333333333em;
}
#footer #footer-icons
{
  position: absolute;
  right: 1em;
  z-index:1;
  margin-top: 0.5em;
}
#footer #footer-icons li
{
  margin-bottom: 1em !important;
}
#footer #footer-icons ul li a
{
  display: block;
  float: left;
}
#footer #footer-icons li a + a
{
  margin-left: 0.75em;
}
#footer #footer-icons li#footer-copyrightico
{
  /*background-image: url("/images/0/01/Square Enix.png");
  background-repeat: no-repeat;
  width: 90px;
  height: 36px;
  position: relative;
  top: 0;
  margin: 0 5px 0 0;*/
}
#footer #footer-icons li#footer-copyrightico img
{
  display:none;
}
#catlinks {
  padding-left: 10px;
}
#mw-normal-catlinks, #mw-hidden-catlinks {
  display: inline-block;
}
#mw-hidden-catlinks {
  padding-left: 1em;
}
/*Main content changes*/
div#content
{
  position:relative;
  box-shadow: rgba(0, 0, 0, 0.15) 0 0.1em 0.75em;
  border-radius: 0;
  border: 1px solid #CCC;
  z-index: 1;
  margin-left: 10em;
  background-image: none;
}
div#bodyContent, #mw-head, #mw-panel, #footer, input, select, #p-personal
{
  font-family: Arial, sans-serif;
  line-height: 1.5384615385em;
}
textarea, pre, xmp, plaintext, listing
{
  font-family: monospace !important;
  font-size: 1.2em;
}
pre, xmp, plaintext, listing
{
  white-space: pre-wrap;
}
.mw-editsection
{
  font-family: Arial, sans-serif;
  line-height: unset;
}
.mw-dismissable-notice-close
{
  margin-top: 4px;
}
/*VECTOR TABS*/
div.vectorTabs li a, div.vectorMenu li a, #p-cactions-label
{
  text-decoration: none;
  font-size: 0.75em;
 
}
div.vectorTabs
{
  padding: 0;
  background-color:transparent;
   background-image: none;
   background-image: none;
}
}


div.vectorTabs span
/* gives header panel that blue look */
{
#mw-head-base {
overflow: hidden;
  background: rgba(215, 239, 242, 0.5);
height: 1.875em;
  border-top: 1px solid #a7d7f9;
background: transparent;
  border-left: 1px solid #a7d7f9;
  border-right: 1px solid #a7d7f9;
  border-bottom: 1px solid #a7d7f9;
  bottom: 0;
  height: 40px;
  margin-top: -41px;
}
}


#right-navigation, #left-navigation
/* modifies personal info links in header */
{
#p-personal a {
  padding: 1px 0 0;
   color: #000000;
  z-index: 3;
}
 
#right-navigation div.vectorTabs
{
  margin: 0px;
}
 
div.vectorMenu
{
  height: 1.875em;
  margin-top: 0;
  background-color: #eee;
  border: 1px solid #ccc;
}
 
#mw-navigation #mw-head div.vectorMenu h3
{
  height: 1.875em;
}
 
#mw-navigation div.vectorMenu h3 a
{
  background-position: 100% 50%;
}
 
#mw-navigation div.vectorMenu h3 span
{
  display: inline-block;
  height: 100%;
  line-height: 2.3em;
  padding: 0 0.25em 0 0.8em;
}
 
#mw-navigation div.vectorMenu div.menu
{
  top: 1.875em;
  border: none;
  left: 0;
}
 
div.vectorMenu ul
{
  margin-left: -1px;
  background-color: #eee;
  border: solid 1px #ccc;
}
 
div.vectorMenu li a
{
  height: 1.4em;
  line-height:1.53846em;
}
 
div.vectorTabs ul li
{
  height: 1.875em;
  line-height: 0;
  margin: 0 -1px 0 0;
  background-image: none;
  background-color:#eee;
  border:1px solid #ccc;
}
 
div.vectorTabs ul li:first-child
{
  border-top-left-radius:0.5em;
}
 
div.vectorTabs ul li:hover, div.vectorMenu ul li:hover, div.vectorMenu:hover
{
  background-color:#f8f8f8;
}
 
div.vectorTabs li a
{
  height: 1.4em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  background-image: none;
}
 
div.vectorTabs li.selected
{
  background-color:  #fff;
  border: 1px solid #ccc;
  border-bottom-width: 0;
  padding-bottom: 1px;
  margin: 0 -1px 0 0;
}
 
div.vectorTabs li.selected a span
{
  margin-top: 0px;
}
 
div#left-navigation div.vectorTabs li.selected
{
  border-radius: 0.5em 0 0 0;
}
 
div#left-navigation div.vectorTabs li + li.selected
{
  border-radius: 0;
}
 
div#left-navigation div.vectorTabs ul li:last-child
{
  border-top-right-radius:0.5em;
}
 
div.vectorTabs a span
{
  padding-top: 0;
  line-height: 2.5em;
}
 
#left-navigation
{
  top: 2.5em;
  left: 10em !important;
  margin: -1px 0 0 !important;
  position: absolute;
}
 
#right-navigation
{
  top: 2.5em;
  margin-top: -1px;
  position: absolute;
  right: 0;
}
 
#mw-page-base
{
  background-image: url("/images/8/88/Skin_header_%28Heart_of_Thorns%29.png");
  height: 228px;
  background-position: top left;
  background-repeat: no-repeat;
  background-color:transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
}
 
#mw-head-base
{
  margin: 0 0 -1px 12em;
  height: 4.4em;
  padding: 2px 0 0 0;
  background-color:transparent;
  background-image: none;
  border-radius: 0.5em 0 0 0;
  background-image: none;
  position: relative;
  z-index:2;
}
 
/** Simple search - enable this in the search options in preferences! **/
div#simpleSearch
{
  border: 1px solid #ccc !important;
  height: 1.875em !important;
  width: 10em !important;
  margin-top: 0px !important;
}
 
#p-search
{
  margin: 0 0 0 -1px;
}
 
#p-search form, #p-search input
{
  margin: 0;
}
 
div#simpleSearch input#searchInput
{
  height:100% !important;
  padding: 0.2em 0px 0px 0.2em;
}
 
#ca-watch.icon a, #ca-watch.icon a:focus, #ca-watch.icon a:hover, #ca-unwatch.icon a, #ca-unwatch.icon a:hover, #ca-unwatch.icon a:focus
{
   background-image: url("/images/5/56/Watch_icons.png");
}
 
.vectorTabs #ca-watch span a.loading, .vectorTabs #ca-unwatch span a.loading {
  animation: none;
}
 
#ca-watch.icon a, #ca-watch.icon a:focus          { background-position:  5px 35%; }
#ca-watch.icon a:hover                            { background-position: -19px 35%; }
#ca-unwatch.icon a                                { background-position: -43px 35%; }
#ca-unwatch.icon a:hover, #ca-unwatch.icon a:focus { background-position: -67px 35%; }
 
#ca-watch.icon, #ca-unwatch.icon                  { margin-right: -1px; }
 
#ca-watch.icon a, #ca-unwatch.icon a
{
  margin: 0 0.33em;
  width: 27px;
  height: 0;
}
 
#ca-watch.icon a.loading, #ca-unwatch.icon a.loading
{
  background-image: none;
}
div#mw-notification-area
{
  top: 1em !important;
}
 
div.vectorMenu h3 a
{
  height: 1.875em;
  margin-bottom:-1px;
}
 
div.vectorTabs ul
{
  background: none;
}
 
/* MediaWiki help link on every special page */
.mw-helplink
{
  background-image: none !important;
   font-weight: bold;
   font-weight: bold;
}
.mw-helplink::before
{
  content: "[?] ";
  font-weight: normal;
  line-height:1.5em;
  vertical-align: top;
}
/* Recent changes "byte count change" text colours */
.mw-plusminus-pos
{
  color:#060;
}
.mw-plusminus-neg
{
  color:#900;
}
.mw-changeslist-legend dt {
  line-height: 1.5em !important;
}
}


.mw-changeslist-legend dd {
/* Discord link */
  line-height: 1.5em !important;
#n-Discord a {
    color: #fff !important;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #4c57d0;
    background-color: #5865f2;
    display: block;
    position: relative;
    padding: 6px 4px 5px calc(17px + 6.5px * 2);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
    width: 100px;
}
}


/* Search placeholder style */
#n-Discord a::before {
 
    content: 'Join our ';
input:-moz-placeholder
    font-weight: normal;
{
    opacity: 0.85;
  font-style: italic;
}
}


input::-webkit-input-placeholder
#n-Discord a::after {
{
    content: '';
  font-style: italic;
    background: url('/mediawiki/images/1/18/Discord_icon.png') no-repeat;
    background-size: 13px 13px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
    position: absolute;
    top: 5px;
    left: 7px;
    width: 17px;
    height: 13px;
}
}
#mw-dismissable-notice
{
  margin-bottom:1em;
}
li > ul, li > ol
{
  margin-top: 0;
  margin-bottom: 0;
}
/* Correct the location of icons fixed to page title line */
div.icon-fixed-top
{
  margin-top: -2.2em !important;
}
/*</nowiki>*/

Latest revision as of 05:13, 6 June 2024

/* CSS placed here will affect users of the Vector skin */
a, a.external {
  color: #05f;
}

a:visited {
  color: #795cb2;
}

/* new header navigation tabs */
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown h3 {
  background-image: none;
}

div#mw-head ul.vector-menu-content-list > li {
  background-image: none;
}

div#mw-head ul.vector-menu-content-list > li.selected {
  background-color: #eff8f9;
}

div#mw-head .vector-menu-tabs li a {
  color: #000000;
  font-weight: bold;
}

div#simpleSearch {
  background-color: #ffffff;
}

/* new sidebar */
div#mw-panel ul.vector-menu-content-list > li > a {
  color: #000000;
  font-weight: bold;
}

/* new footer */
footer.mw-footer ul#footer-places > li > a {
  color: #000000;
}

/* widen the sidebar */
div#mw-panel {
  width: 12em;
}
div#footer,
#mw-head-base,
div#content {
  margin-left: 12em;
}
#left-navigation {
  left: 12em;
}

div#mw-panel div.portal {
  padding-bottom: 5px;
}

div#p-namespaces {
  margin-left: 1em;
}

div#mw-panel div.portal {
  margin: 0 0.6em 0 0;
}

div#mw-panel div.portal div.body ul li {
  margin-left: 1em;
}

div#mw-panel div.portal h3 {
  margin-left: 2.4em;
}

/* background colors */
body {
  background-color: #ebebeb;
}

/* gives makes the entire header section gray */
#mw-page-base {
  background-color: transparent;
  background-image: none;
}

/* gives header panel that blue look */
#mw-head-base {
  background: rgba(215, 239, 242, 0.5);
  border-top: 1px solid #a7d7f9;
  border-left: 1px solid #a7d7f9;
  border-right: 1px solid #a7d7f9;
  border-bottom: 1px solid #a7d7f9;
  bottom: 0;
  height: 40px;
  margin-top: -41px;
}

/* modifies personal info links in header */
#p-personal a {
  color: #000000;
  font-weight: bold;
}

/* Discord link */
#n-Discord a {
    color: #fff !important;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #4c57d0;
    background-color: #5865f2;
    display: block;
    position: relative;
    padding: 6px 4px 5px calc(17px + 6.5px * 2);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
    width: 100px;
}

#n-Discord a::before {
    content: 'Join our ';
    font-weight: normal;
    opacity: 0.85;
}

#n-Discord a::after {
    content: '';
    background: url('/mediawiki/images/1/18/Discord_icon.png') no-repeat;
    background-size: 13px 13px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
    position: absolute;
    top: 5px;
    left: 7px;
    width: 17px;
    height: 13px;
}

Retrieved from "https://ffxiv.consolegameswiki.com/mediawiki/index.php?title=MediaWiki:Vector.css&oldid=741611"