Difference between revisions of "MediaWiki:Common.css"
(5 intermediate revisions by the same user not shown) | |||
Line 7: | Line 7: | ||
font-family: CelticTime; | font-family: CelticTime; | ||
src: url('skins/Timespinner/CelticTime.ttf'); | src: url('skins/Timespinner/CelticTime.ttf'); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 57: | Line 25: | ||
} | } | ||
+ | /* Navigation Bar */ | ||
div#navigaton_container { | div#navigaton_container { | ||
max-width: 875px; | max-width: 875px; | ||
Line 132: | Line 101: | ||
} | } | ||
− | + | li#menu-item.homelink { | |
margin-left: 0; | margin-left: 0; | ||
} | } | ||
− | + | #navbar_top ul > li.social.to-right { | |
margin-right: 0; | margin-right: 0; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
margin-left: 40px; | margin-left: 40px; | ||
} | } | ||
Line 162: | Line 124: | ||
} | } | ||
+ | #navbar_top { | ||
+ | width: 100%; | ||
+ | height: 50px; | ||
+ | position: absolute; | ||
+ | margin: 0 auto; | ||
+ | background-color: rgba(34, 29, 40, 0.8); | ||
+ | text-transform: uppercase; | ||
+ | font-weight: 600; | ||
+ | font-size: 17px; | ||
+ | z-index: 20; | ||
+ | } | ||
+ | #navbar_top a { | ||
+ | color: white; | ||
+ | font-family: 'Open Sans', sans-serif; | ||
+ | text-shadow: 0px 0px 4px rgba(0,0,0,0.4); | ||
+ | text-decoration: none; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #navbar_top a:hover, .product, li#menu-item-current a { | ||
+ | color: #ffffae; | ||
+ | } | ||
+ | |||
+ | #navbar_top ul > li { | ||
+ | display: inline-block; | ||
+ | line-height: 50px; | ||
+ | margin: 0 20px; | ||
+ | } | ||
@media screen and (max-width: 1025px) { | @media screen and (max-width: 1025px) { | ||
− | li.social { | + | #navbar_top ul > li.social.to-right { |
display: none; | display: none; | ||
} | } | ||
Line 180: | Line 172: | ||
} | } | ||
− | @media screen and (max-width: | + | @media screen and (max-width: 1330px) { |
div.navleft { | div.navleft { |
Latest revision as of 17:25, 11 September 2018
/* CSS placed here will be applied to all skins */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:600); @font-face { font-family: CelticTime; src: url('skins/Timespinner/CelticTime.ttf'); } div#mw-panel { margin-top: 30px; } div#mw-navigation { margin-top: 50px; } #mw-head-base { margin-top: -30px; } div#mw-head { top: 50px; } /* Navigation Bar */ div#navigaton_container { max-width: 875px; margin: auto; padding-top: 7px; } div#navigaton_container ul { margin-left: -0.29em; margin-top: 0.02em; } li.social.to-right { float:right; padding-top: 10px; } li.buy.to-right { float:right; margin-right: 8px !important; } .sociallink { width: 26px; height: 34px; display: inline-block; margin-left: 10px; } .sociallink a { width: 100%; height: 100%; } #facebook-button { background-image: url(skins/Timespinner/facebook-button.png); margin-right: -7px; } #facebook-button:hover { background-image: url(skins/Timespinner/facebook-button-hover.png); } #twitter-button { background-image: url(skins/Timespinner/twitter-button.png); margin-right: -3px; } #twitter-button:hover { background-image: url(skins/Timespinner/twitter-button-hover.png); } #reddit-button { background-image: url(skins/Timespinner/reddit-button.png); } #reddit-button:hover { background-image: url(skins/Timespinner/reddit-button-hover.png); } #contact-button { background-image: url(skins/Timespinner/contact-button.png); margin-right: -6px; } #contact-button:hover { background-image: url(skins/Timespinner/contact-button-hover.png); } div#navbar_top { height: 63px; background-image: url(skins/Timespinner/Navbar_bg.png); width: 100%; box-shadow: 0px 20px 30px black; } li#menu-item.homelink { margin-left: 0; } #navbar_top ul > li.social.to-right { margin-right: 0; margin-left: 40px; } div.navleft { height: 63px; width: 327px; background: url(skins/Timespinner/Navbar_left.png) no-repeat; float: left; } div.navright { height: 63px; width: 327px; background: url(skins/Timespinner/Navbar_right.png) no-repeat; float: right; } #navbar_top { width: 100%; height: 50px; position: absolute; margin: 0 auto; background-color: rgba(34, 29, 40, 0.8); text-transform: uppercase; font-weight: 600; font-size: 17px; z-index: 20; } #navbar_top a { color: white; font-family: 'Open Sans', sans-serif; text-shadow: 0px 0px 4px rgba(0,0,0,0.4); text-decoration: none; width: 100%; height: 100%; display: block; } #navbar_top a:hover, .product, li#menu-item-current a { color: #ffffae; } #navbar_top ul > li { display: inline-block; line-height: 50px; margin: 0 20px; } @media screen and (max-width: 1025px) { #navbar_top ul > li.social.to-right { display: none; } } @media screen and (max-width: 1425px) { div.navleft { margin-left: -50px; } div.navright { margin-right: -50px; } } @media screen and (max-width: 1330px) { div.navleft { margin-left: -150px; } div.navright { margin-right: -150px; } } @media screen and (max-width: 1125px) { div.navleft { margin-left: -200px; } div.navright { margin-right: -200px; } } @media screen and (max-width: 865px) { div.navleft, div.navright { display: none; } } @media screen and (max-width: 800px) { #navigaton_container { background-color: rgba(34, 29, 40, 0.8); min-height: 82px; } #navbar_top { background-color: transparent; } #navbar_top ul { text-align: center; } #navbar_top ul li { float: left; width: 50%; margin: 0px; } #navbar_top ul li a { display: block; padding: 0px; line-height: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1); padding: 10px 0px; } li.buy.to-right { margin-right: 0px !important; } li.social.to-right { display: none !important; } div#mw-panel { margin-top: 55px; } div#mw-head { top: 75px; } div#content.mw-body { margin-top: 25px; } }