| Line 1: |
Line 1: |
| | + | /* All CSS here will be loaded for users of the Vector skin */ |
| | | | |
| | + | /*********/ |
| | + | /* Fonts */ |
| | + | /*********/ |
| | + | /* Article Heading */ |
| | + | .mw-body .firstHeading { |
| | + | font-family: 'ARCO'; |
| | + | } |
| | + | |
| | + | |
| | + | |
| | + | /********/ |
| | + | /* Logo */ |
| | + | /********/ |
| | + | /*Shifts logo to center*/ |
| | + | /*Left and right positions*/ |
| | + | #p-logo { |
| | + | top: -15em; |
| | + | left: 48.5vw; |
| | + | margin-left: -9.5em; |
| | + | position: absolute; |
| | + | } |
| | + | /*Image size*/ |
| | + | #p-logo a { |
| | + | width: 23em; |
| | + | height: 13em; |
| | + | transition: filter 0.3s, height 0.2s; |
| | + | } |
| | + | #p-logo a:hover { |
| | + | filter: brightness(1.2); |
| | + | } |
| | + | #p-logo a:active { |
| | + | height: 14.2em; |
| | + | } |
| | + | |
| | + | |
| | + | |
| | + | /****************/ |
| | + | /* Page Content */ |
| | + | /****************/ |
| | + | /*Main Background*/ |
| | + | body { |
| | + | background: #79c1f7; |
| | + | background-image: url('/w/images/0/0b/WikiBackground.png') ; |
| | + | background-attachment: fixed; |
| | + | background-size: cover; |
| | + | |
| | + | } |
| | + | /*Article background*/ |
| | + | .mw-body, .parsoid-body { |
| | + | background-color: rgba(255, 255, 255, 0.95); |
| | + | } |
| | + | /*Postion of main page content*/ |
| | + | #mw-head-base { |
| | + | height: 23.4em; |
| | + | } |
| | + | /*Position of top page controls*/ |
| | + | #mw-head { |
| | + | top: 16.7em; |
| | + | } |
| | + | /*Moves edit buttons, etc, down*/ |
| | + | .mw-body { |
| | + | padding: 4.25em 1.5em 1.5em 1.5em; |
| | + | border-radius: 10px; |
| | + | border: 3px solid #709fc3; |
| | + | margin-right: 3em; |
| | + | margin-left: 13em; |
| | + | box-shadow: #0000003b 0 0px 4px; |
| | + | } |
| | + | .mw-body .firstHeading { |
| | + | border-top: 1px solid #a2a9b1; |
| | + | } |
| | + | /*Category Box*/ |
| | + | .catlinks { |
| | + | background-color: #fffffff0; |
| | + | border-radius: 6px; |
| | + | } |
| | + | |
| | + | /***************/ |
| | + | /* Top Nav Bar */ |
| | + | /***************/ |
| | + | /*Widens top bar*/ |
| | + | #p-personal { |
| | + | right: 0; |
| | + | top: 0; |
| | + | position: fixed; |
| | + | width: 100%; |
| | + | background-color: #071e49; |
| | + | height: 23px; |
| | + | box-shadow: #000c 0px 0px 5px; |
| | + | } |
| | + | /*Text in top bar*/ |
| | + | #p-personal ul { |
| | + | float: right; |
| | + | padding-right: 10px; |
| | + | padding-left: 0; |
| | + | } |
| | + | /*Removes white bar under top bar*/ |
| | + | #mw-page-base { |
| | + | display: none; |
| | + | } |
| | + | /*Colors various links white*/ |
| | + | #pt-userpage a, #pt-login a { |
| | + | color: #80f139; /*Green*/ |
| | + | } |
| | + | #pt-mytalk a, #pt-mytalk a.new, #pt-mytalk a.new:visited, #pt-preferences a, #pt-betafeatures a, #pt-mycontris a, #pt-watchlist a, .vector-menu-content-list a { |
| | + | color: #73e4fb; /*Cyan*/ |
| | + | } |
| | + | #pt-logout a, #pt-anonuserpage { |
| | + | color: #f49f0b; /*Orange*/ |
| | + | } |
| | + | /****************/ |
| | + | /* Side Nav Bar */ |
| | + | /****************/ |
| | + | #mw-panel { |
| | + | top: 18.35em; |
| | + | background-color: rgba(255, 255, 255, 0.95); |
| | + | border: 3px solid #709fc3; |
| | + | box-shadow: #0000003b 0 0px 4px; |
| | + | margin-left: 1em; |
| | + | border-radius: 10px; |
| | + | } |
| | + | .portal .body li a:visited, .vector-menu-portal .body li a:visited, .portal .body li a, .vector-menu-portal .body li a { |
| | + | color: #0e73af; |
| | + | transition: 0.3s; |
| | + | } |
| | + | .portal .body li a:visited:hover, .vector-menu-portal .body li a:visited:hover, .portal .body li a:hover, .vector-menu-portal .body li a:hover { |
| | + | color: #e49202; |
| | + | } |
| | + | |
| | + | /*********************************/ |
| | + | /* Styling of buttons and links. */ |
| | + | /*********************************/ |
| | + | /*Shifts page and discussions right*/ |
| | + | #p-namespaces { |
| | + | margin-left: 3.4em; |
| | + | } |
| | + | |
| | + | |
| | + | /*Active*/ |
| | + | .vector-menu-tabs .selected { |
| | + | background-image: none; |
| | + | background: #72b531; |
| | + | border: none; |
| | + | margin: 5px 2px 0px 2px; |
| | + | border-radius: 5px; |
| | + | border-bottom: 0.3rem solid #3b7e0e; |
| | + | height: 2em; |
| | + | transition: 0.3s; |
| | + | } |
| | + | .vector-menu-tabs .selected:hover { |
| | + | margin: 5px 2px 0px 2px; |
| | + | background: #94c231; |
| | + | border-bottom: 0.3rem solid #6a9c0c; |
| | + | } |
| | + | .vector-menu-tabs .selected:active { |
| | + | margin: 5px 2px 0px 2px; |
| | + | background: #72b531; |
| | + | border-bottom: 0.3rem solid #3b7e0e; |
| | + | } |
| | + | .vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited { |
| | + | color: #fff; |
| | + | font-weight: bold; |
| | + | } |
| | + | .vector-menu-tabs li a { |
| | + | padding-top: 0.5em; |
| | + | } |
| | + | .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 { |
| | + | background-image: none; |
| | + | } |
| | + | |
| | + | |
| | + | /*Inactive*/ |
| | + | .vector-menu-tabs li { |
| | + | background-image: none; |
| | + | background: #5aa7e2; |
| | + | border-bottom: 0.3rem solid #254a8f; |
| | + | margin: 5px 2px 0px 2px; |
| | + | border-radius: 5px; |
| | + | height: 2em; |
| | + | transition: background 0.3s, border-bottom 0.3s, margin 0.1s; |
| | + | } |
| | + | .vector-menu-tabs li:hover { |
| | + | /*margin: 8px 2px 0px 2px;*/ |
| | + | background: #5cbee8; |
| | + | border-bottom: 0.3rem solid #2972a3; |
| | + | } |
| | + | .vector-menu-tabs li:active { |
| | + | margin: 7px 2px 0px 2px; |
| | + | background: #5aa7e2; |
| | + | border-bottom: 0.3rem solid #254a8f; |
| | + | } |
| | + | .vector-menu-tabs li a:hover { |
| | + | text-decoration: none; |
| | + | } |
| | + | .vector-menu-tabs li a:focus { |
| | + | text-decoration: none; |
| | + | } |
| | + | .vector-menu-tabs .new a, .vector-menu-tabs .new a:visited { |
| | + | color: white; |
| | + | font-weight: bold; |
| | + | } |
| | + | .vector-menu-tabs li a { |
| | + | color: white; |
| | + | font-weight: bold; |
| | + | } |
| | + | |
| | + | |
| | + | /*More Dropdown*/ |
| | + | /*Text*/ |
| | + | .vector-menu-dropdown h3 { |
| | + | color: white; |
| | + | font-weight: bold; |
| | + | } |
| | + | .vector-menu-dropdown h3:hover, .vector-menu-dropdown h3:focus { |
| | + | color: white; |
| | + | } |
| | + | /*Actual button*/ |
| | + | .vector-menu-dropdown { |
| | + | line-height: 0.125em; |
| | + | background: #e49202; |
| | + | margin: 5px 2px 0px 2px; |
| | + | border-radius: 5px; |
| | + | border-bottom: 0.3rem solid #b24408; |
| | + | height: 2em; |
| | + | transition: 0.3s; |
| | + | } |
| | + | .vector-menu-dropdown:hover { |
| | + | background: #f1ad00; |
| | + | border-bottom: 0.3rem solid #c36f08; |
| | + | } |
| | + | .vector-menu-dropdown:active { |
| | + | background: #f1ad00; |
| | + | border-bottom: 0.3rem solid #c36f08; |
| | + | } |
| | + | |
| | + | |
| | + | /*Button Icons*/ |
| | + | /*ArrowSVG*/ |
| | + | .vector-menu-dropdown h3::after { |
| | + | background-image: url(/w/images/e/e5/Arrow-down-white.png); |
| | + | background-image: linear-gradient(transparent,transparent),url(/w/images/5/53/Arrow-down-white.svg); |
| | + | top: -0.231em; |
| | + | } |
| | + | /*StarUnwatchSVG*/ |
| | + | .vector-menu-tabs #ca-unwatch.icon a::before { |
| | + | background-image: linear-gradient(transparent,transparent),url(/w/skins/Vector/resources/skins.vector.styles/images/watch-icon.svg?257a2); |
| | + | } |
| | + | /*StarWatchSVG*/ |
| | + | .vector-menu-tabs #ca-watch.icon a::before { |
| | + | |
| | + | background-image: linear-gradient(transparent,transparent),url(/w/images/f/f7/Unwatch-icon-mono.svg); |
| | + | |
| | + | } |
| | + | /*Moves watch star to button center*/ |
| | + | .vector-menu-tabs .mw-watchlink.icon a::before { |
| | + | top: 0.6em; |
| | + | left: 0.45em; |
| | + | } |
| | + | |
| | + | /*RedLinks*/ |
| | + | .mw-body a.new, .mw-body a.new:visited { |
| | + | color: #bd2020; |
| | + | transition: 0.3s; |
| | + | } |
| | + | .mw-body a:hover, .mw-body a:focus { |
| | + | text-decoration: underline; |
| | + | color: #e49202 !important; /*Won't replace without*/ |
| | + | } |
| | + | |
| | + | /*Regular*/ |
| | + | .mw-body a:visited, .mw-body a, .mw-parser-output a.extiw, .mw-parser-output a.external, .mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited{ |
| | + | color: #0e73af; |
| | + | transition: 0.3s; |
| | + | } |
| | + | /**************/ |
| | + | /* Searchbar */ |
| | + | /**************/ |
| | + | #searchInput { |
| | + | border-radius: 5px;d |
| | + | height: 2.6em; |
| | + | } |
| | + | /*Moves search bar left*/ |
| | + | #p-search { |
| | + | margin-right: 4.5em; |
| | + | } |
| | + | a.new { |
| | + | color: #bd2020; |
| | + | } |
| | + | |
| | + | |
| | + | |
| | + | |
| | + | /**************/ |
| | + | /* FooterBar */ |
| | + | /**************/ |
| | + | /*FooterBanner*/ |
| | + | .mw-body { |
| | + | margin-bottom: 65px; |
| | + | } |
| | + | .rfooter { |
| | + | background: #071e49; |
| | + | position: fixed; |
| | + | bottom: 0; |
| | + | width: 100%; |
| | + | height: 44px; |
| | + | box-shadow: #000c 0px 0px 5px; |
| | + | } |
| | + | #footer-info li { |
| | + | color: white; |
| | + | } |
| | + | #footer-places a, #footer-places a:hover, #footer-places a:visited { |
| | + | color: white; |
| | + | } |
| | + | #footer { |
| | + | position: fixed; |
| | + | bottom: -22px; |
| | + | } |
| | + | #footer-info { |
| | + | position: fixed; |
| | + | left: 210px; |
| | + | bottom: 4px; |
| | + | } |
| | + | #footer-places { |
| | + | position: fixed; |
| | + | bottom: 0; |
| | + | right: 40px; |
| | + | } |
| | + | |
| | + | /*Removes MediaWiki Badge. Will re-add elsewhere*/ |
| | + | #footer-poweredbyico { |
| | + | display: none; |
| | + | } |
| | + | |
| | + | |
| | + | /* Big Footer that works OKAY at best |
| | + | * { |
| | + | margin: 0; |
| | + | } |
| | + | html, body { |
| | + | height: 100%; |
| | + | } |
| | + | .rpush { |
| | + | min-height: 55%; |
| | + | margin-bottom: -200px; |
| | + | } |
| | + | .rpush:after { |
| | + | content: ""; |
| | + | display: block; |
| | + | } |
| | + | .rfooter, .rpush:after { |
| | + | height: 251px; |
| | + | } |
| | + | .rfooter { |
| | + | background: orange; |
| | + | } |
| | + | */ |
| | + | |
| | + | |
| | + | |
| | + | /***********************/ |
| | + | /* Media Resize Rules */ |
| | + | /***********************/ |
| | + | /*Removes edit timestamp*/ |
| | + | @media only screen and (max-width: 1020px) { |
| | + | #footer-info li { |
| | + | display: none; |
| | + | |
| | + | } |
| | + | } |
| | + | /*Removes redundant page button*/ |
| | + | @media only screen and (max-width: 702px) { |
| | + | .vector-menu-tabs .selected { |
| | + | display: none; |
| | + | |
| | + | } |
| | + | } |
| | + | /*Removes side bar*/ |
| | + | @media only screen and (max-width: 583px) { |
| | + | #mw-panel .portal-first { |
| | + | display: none; |
| | + | } |
| | + | #mw-panel { |
| | + | border: none; |
| | + | box-shadow: none; |
| | + | background-color: none; |
| | + | } |
| | + | .portal, .vector-menu-portal { |
| | + | display: none; |
| | + | } |
| | + | .mw-body { |
| | + | margin-right: 0; |
| | + | margin-left: 0; |
| | + | } |
| | + | #left-navigation { |
| | + | margin-left: 13em !important; /*Won't move otherwise*/ |
| | + | } |
| | + | #right-navigation { |
| | + | margin-right: -3.3em; |
| | + | } |
| | + | .vector-menu-tabs .selected { |
| | + | display: inherit; |
| | + | } |
| | + | #pt-betafeatures { |
| | + | display: none; |
| | + | } |
| | + | #footer-places { |
| | + | font-size: 0.9em; |
| | + | } |
| | + | #p-namespaces { |
| | + | margin-left: -11.6em; |
| | + | } |
| | + | #p-logo { |
| | + | left: 39.5vw; |
| | + | } |
| | + | .vector-menu-dropdown h3::after { |
| | + | display: none; |
| | + | } |
| | + | .vector-menu-dropdown { |
| | + | width: 51px; |
| | + | } |
| | + | } |