| Line 1: |
Line 1: |
| | + | /* All CSS here will be loaded for users of the Vector skin */ |
| | + | /**********************/ |
| | + | /* Custom Font Import */ |
| | + | /**********************/ |
| | + | |
| | + | /*Arco is the main h1 font*/ |
| | + | @font-face { |
| | + | font-family: 'ARCO'; |
| | + | src:url('ARCO.ttf.woff') format('woff'), |
| | + | url('ARCO.ttf.svg#ARCO') format('svg'), |
| | + | url('ARCO.ttf.eot'), |
| | + | url('ARCO.ttf.eot?#iefix') format('embedded-opentype'); |
| | + | font-weight: normal; |
| | + | font-style: normal; |
| | + | } |
| | + | |
| | + | /* |
| | + | @font-face { |
| | + | font-family: "ArtBrush"; |
| | + | font-style: normal; |
| | + | font-weight: normal; |
| | + | src: url("https://vignette.wikia.nocookie.net/drawntolife/images/f/fc/Artbrush.ttf") format("truetype"); |
| | + | } |
| | + | |
| | + | @font-face { |
| | + | font-family: "Raposa"; |
| | + | font-style: normal; |
| | + | font-weight: normal; |
| | + | src: url("https://vignette.wikia.nocookie.net/drawntolife/images/c/c3/Raposa.ttf") format("truetype"); |
| | + | } |
| | + | */ |
| | + | |
| | + | /* Article Heading */ |
| | + | .mw-body .firstHeading { |
| | + | font-family: 'ARCO'; |
| | + | } |
| | + | |
| | + | |
| | + | |
| | + | /********/ |
| | + | /* Logo */ |
| | + | /********/ |
| | + | /*Shifts logo to center*/ |
| | + | /*Left and right positions*/ |
| | + | #p-logo { |
| | + | top: -25em; |
| | + | left: 49vw; |
| | + | margin-left: -9.5em; |
| | + | position: absolute; |
| | + | } |
| | + | /*Image size*/ |
| | + | #p-logo a { |
| | + | width: 23em; |
| | + | height: 20em; |
| | + | transition: filter 0.3s, height 0.2s; |
| | + | } |
| | + | #p-logo a:hover { |
| | + | filter: brightness(1.2); |
| | + | } |
| | + | #p-logo a:active { |
| | + | height: 20.2em !important; |
| | + | } |
| | + | |
| | + | |
| | + | |
| | + | /****************/ |
| | + | /* 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; |
| | + | box-shadow: #0000003b 0 0px 4px; |
| | + | } |
| | + | .mw-body .firstHeading { |
| | + | border-top: 1px solid #a2a9b1; |
| | + | } |
| | + | |
| | + | |
| | + | |
| | + | /***************/ |
| | + | /* 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: 25em; |
| | + | } |
| | + | .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: 20px; |
| | + | } |
| | + | |
| | + | |
| | + | /*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 cetner*/ |
| | + | .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; |
| | + | } |
| | + | |
| | | | |
| | /* ---------------------------------------------*/ | | /* ---------------------------------------------*/ |