Difference between revisions of "MediaWiki:Vector.css"
(Created page with "→CSS placed here will be applied to all skins: @font-face { font-family: 'FoundersGrotesk'; src: url('/w/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Bold.e...") |
|||
(6 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
@font-face { | @font-face { | ||
font-family: 'FoundersGrotesk'; | font-family: 'FoundersGrotesk'; | ||
− | src: url(' | + | src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Bold.eot'); |
− | src: url(' | + | src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Bold.woff2') format('woff2'), |
− | url(' | + | url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Bold.woff') format('woff'); |
font-weight: 700; | font-weight: 700; | ||
font-style: normal; | font-style: normal; | ||
Line 11: | Line 11: | ||
@font-face { | @font-face { | ||
font-family: 'FoundersGrotesk'; | font-family: 'FoundersGrotesk'; | ||
− | src: url(' | + | src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Semibold.eot'); |
− | src: url(' | + | src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Semibold.woff2') format('woff2'), |
− | url(' | + | url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Semibold.woff') format('woff'); |
font-weight: 600; | font-weight: 600; | ||
font-style: normal; | font-style: normal; | ||
Line 20: | Line 20: | ||
@font-face { | @font-face { | ||
font-family: 'FoundersGrotesk'; | font-family: 'FoundersGrotesk'; | ||
− | src: url(' | + | src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Medium.eot'); |
− | src: url(' | + | src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Medium.woff2') format('woff2'), |
− | url(' | + | url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Medium.woff') format('woff'); |
font-weight: 500; | font-weight: 500; | ||
font-style: normal; | font-style: normal; | ||
Line 29: | Line 29: | ||
@font-face { | @font-face { | ||
font-family: 'FoundersGrotesk'; | font-family: 'FoundersGrotesk'; | ||
− | src: url(' | + | src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Regular.eot'); |
− | src: url(' | + | src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Regular.woff2') format('woff2'), |
− | url(' | + | url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Regular.woff') format('woff'); |
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 38: | Line 38: | ||
@font-face { | @font-face { | ||
font-family: 'radikalblack'; | font-family: 'radikalblack'; | ||
− | src: url(' | + | src: url('/resources/assets/RadikalBlack/radikal-black.eot'); |
− | src: url(' | + | src: url('/resources/assets/RadikalBlack/radikal-black.eot?#iefix') format('embedded-opentype'), |
− | url(' | + | url('/resources/assets/RadikalBlack/radikal-black.woff2') format('woff2'), |
− | url(' | + | url('/resources/assets/RadikalBlack/radikal-black.woff') format('woff'), |
− | url(' | + | url('/resources/assets/RadikalBlack/radikal-black.ttf') format('truetype'); |
} | } | ||
html{ | html{ | ||
Line 58: | Line 58: | ||
} | } | ||
.mw-wiki-logo{ | .mw-wiki-logo{ | ||
− | background:url(" | + | background:url("/resources/assets/ukiepedia-logo-navy.svg") 0 0 no-repeat transparent; |
− | background-size: | + | background-size:360px 180px; |
height:90px !important; | height:90px !important; | ||
} | } | ||
Line 90: | Line 90: | ||
} | } | ||
.vectorTabs{ | .vectorTabs{ | ||
− | height:1.9em; | + | height:1.9em !important; |
− | background:none; | + | background:none !important; |
− | position:relative; | + | position:relative !important; |
} | } | ||
.vectorTabs:before{ | .vectorTabs:before{ | ||
− | content:" "; | + | content:" " !important; |
− | position:absolute; | + | position:absolute !important; |
− | top:0; | + | top:0 !important; |
− | left:0; | + | left:0 !important; |
− | height:2em; | + | height:2em !important; |
− | width:1px; | + | width:1px !important; |
− | background:#a7d7f9; | + | background:#a7d7f9 !important; |
} | } | ||
.vectorTabs li{ | .vectorTabs li{ | ||
− | background:#f5f5f5; | + | background:#f5f5f5 !important; |
− | border-top:1px solid #a7d7f9; | + | border-top:1px solid #a7d7f9 !important; |
− | border-right:1px solid #a7d7f9; | + | border-right:1px solid #a7d7f9 !important; |
} | } | ||
.vectorTabs li.selected{ | .vectorTabs li.selected{ | ||
− | background:white; | + | background:white !important; |
} | } | ||
.vectorTabs span{ | .vectorTabs span{ | ||
− | background:none; | + | background:none !important; |
− | border-bottom:1px solid #a7d7f9; | + | border-bottom:1px solid #a7d7f9 !important; |
} | } | ||
.vectorTabs li.selected span{ | .vectorTabs li.selected span{ | ||
− | border-bottom-color:#ffffff; | + | border-bottom-color:#ffffff !important; |
} | } | ||
.vectorTabs span a{ | .vectorTabs span a{ | ||
− | padding-top:0.5em; | + | padding-top:0.5em !important; |
} | } | ||
.vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a{ | .vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a{ | ||
− | padding-top:2.1em; | + | padding-top:2.1em !important; |
} | } | ||
#mw-head .vectorMenu h3{ | #mw-head .vectorMenu h3{ | ||
− | height:2em; | + | height:2em !important; |
− | background:none; | + | background:none !important; |
} | } | ||
.vectorMenu h3 span{ | .vectorMenu h3 span{ | ||
− | padding-top:0.5em; | + | padding-top:0.5em !important; |
} | } | ||
.vectorMenu h3 span:after{ | .vectorMenu h3 span:after{ | ||
− | top:0.5em; | + | top:0.5em !important; |
} | } | ||
.vectorMenu .menu{ | .vectorMenu .menu{ | ||
− | top:2em; | + | top:2em !important; |
} | } | ||
#p-search form{ | #p-search form{ | ||
− | margin-top:- | + | margin-top:-1px !important; |
+ | } | ||
+ | #simpleSearch{ | ||
+ | margin-top:0; | ||
+ | border:0; | ||
+ | width:auto; | ||
+ | padding:0; | ||
+ | height:auto; | ||
+ | background:none; | ||
} | } | ||
#simpleSearch input[type="search"]{ | #simpleSearch input[type="search"]{ | ||
− | padding-bottom: 10px; | + | padding-bottom: 10px !important; |
− | padding-bottom: 1rem; | + | padding-bottom: 1rem !important; |
− | padding-left: 15px; | + | padding-left: 15px !important; |
− | padding-left: 1.5rem; | + | padding-left: 1.5rem !important; |
− | padding-right: 15px; | + | padding-right: 15px !important; |
− | padding-right: 1.5rem; | + | padding-right: 1.5rem !important; |
− | padding-top: 10px; | + | padding-top: 10px !important; |
− | padding-top: 1rem; | + | padding-top: 1rem !important; |
− | width: 100%; | + | width: 100% !important; |
− | max-width: 100%; | + | max-width: 100% !important; |
− | border: 1px solid #c6cfd9; | + | border: 1px solid #c6cfd9 !important; |
− | border-radius: 4px; | + | border-radius: 4px !important; |
− | box-sizing: border-box; | + | box-sizing: border-box !important; |
− | outline: none; | + | outline: none !important; |
− | background:#ffffff; | + | background:#ffffff !important; |
− | border-bottom-left-radius:0; | + | border-bottom-left-radius:0 !important; |
− | border-bottom-right-radius:0; | + | border-bottom-right-radius:0 !important; |
} | } | ||
#searchButton, #mw-searchButton{ | #searchButton, #mw-searchButton{ | ||
− | min-width:36px; | + | min-width:36px !important; |
} | } | ||
.mw-backlink{ | .mw-backlink{ | ||
Line 166: | Line 174: | ||
margin-left:11em; | margin-left:11em; | ||
margin-top:1em; | margin-top:1em; | ||
+ | top:0; | ||
+ | left:0; | ||
} | } | ||
.mw-body-content{ | .mw-body-content{ | ||
Line 171: | Line 181: | ||
} | } | ||
#mw-panel .portal h3{ | #mw-panel .portal h3{ | ||
− | font-size: 1.17em; | + | font-size: 1.17em !important; |
− | font-weight: bold; | + | font-weight: bold !important; |
− | margin-left:0.5em; | + | margin-left:0.5em !important; |
− | color:#222147; | + | color:#222147 !important; |
} | } | ||
#mw-panel .portal .body{ | #mw-panel .portal .body{ | ||
− | background:none; | + | background:none !important; |
} | } | ||
#mw-panel .portal .body li{ | #mw-panel .portal .body li{ | ||
− | font-size:1em; | + | font-size:1em !important; |
} | } | ||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button{ | .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button{ | ||
− | background-color: #ffffff; | + | background-color: #ffffff !important; |
− | display: inline-block; | + | display: inline-block !important; |
− | padding: 1.2rem 4rem 1.3rem; | + | padding: 1.2rem 4rem 1.3rem !important; |
− | border-width: 1px; | + | border-width: 1px !important; |
− | border-style: solid; | + | border-style: solid !important; |
− | border-color: #222147; | + | border-color: #222147 !important; |
− | border-radius: .5rem; | + | border-radius: .5rem !important; |
− | color: #fff; | + | color: #fff !important; |
− | cursor: pointer; | + | cursor: pointer !important; |
− | text-decoration: none; | + | text-decoration: none !important; |
− | transition-property: background-color,border-color; | + | transition-property: background-color,border-color !important; |
− | transition-duration: .5s; | + | transition-duration: .5s !important; |
− | outline: none; | + | outline: none !important; |
− | font-weight:normal; | + | font-weight:normal !important; |
− | color:#222147; | + | color:#222147 !important; |
} | } | ||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button{ | .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button{ | ||
− | background:#222147; | + | background:#222147 !important; |
− | color:#ffffff; | + | color:#ffffff !important; |
} | } | ||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover{ | .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover{ | ||
− | background-color: #80a2fc; | + | background-color: #80a2fc !important; |
− | border-color: #80a2fc; | + | border-color: #80a2fc !important; |
− | color:#ffffff; | + | color:#ffffff !important; |
} | } |
Latest revision as of 12:52, 16 September 2019
/* CSS placed here will be applied to all skins */ @font-face { font-family: 'FoundersGrotesk'; src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Bold.eot'); src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Bold.woff2') format('woff2'), url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Bold.woff') format('woff'); font-weight: 700; font-style: normal; } @font-face { font-family: 'FoundersGrotesk'; src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Semibold.eot'); src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Semibold.woff2') format('woff2'), url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Semibold.woff') format('woff'); font-weight: 600; font-style: normal; } @font-face { font-family: 'FoundersGrotesk'; src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Medium.eot'); src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Medium.woff2') format('woff2'), url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Medium.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: 'FoundersGrotesk'; src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Regular.eot'); src: url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Regular.woff2') format('woff2'), url('/resources/assets/FoundersGrotesk/FoundersGroteskWeb-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'radikalblack'; src: url('/resources/assets/RadikalBlack/radikal-black.eot'); src: url('/resources/assets/RadikalBlack/radikal-black.eot?#iefix') format('embedded-opentype'), url('/resources/assets/RadikalBlack/radikal-black.woff2') format('woff2'), url('/resources/assets/RadikalBlack/radikal-black.woff') format('woff'), url('/resources/assets/RadikalBlack/radikal-black.ttf') format('truetype'); } html{ font-size:62.5%; } body{ background-color:#eeeeee; color:#222147; font-family: "FoundersGrotesk"; font-size: 1.8em; line-height: 2.7rem; } #mw-page-base{ background:#eeeeee; } .mw-wiki-logo{ background:url("/resources/assets/ukiepedia-logo-navy.svg") 0 0 no-repeat transparent; background-size:360px 180px; height:90px !important; } #p-logo{ height:90px; } .mw-body h1, .mw-body-content h1{ font-size:4rem; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.27; letter-spacing: -1px; margin: 0.67em 0; font-family:"FoundersGrotesk"; } .mw-body .firstHeading{ margin-top:0; } .mw-body h2, .mw-body-content h2{ font-family: "radikalblack",sans-serif; font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: 0.69px; text-transform:uppercase; } #left-navigation, #right-navigation{ margin-top:3em; } .vectorTabs{ height:1.9em !important; background:none !important; position:relative !important; } .vectorTabs:before{ content:" " !important; position:absolute !important; top:0 !important; left:0 !important; height:2em !important; width:1px !important; background:#a7d7f9 !important; } .vectorTabs li{ background:#f5f5f5 !important; border-top:1px solid #a7d7f9 !important; border-right:1px solid #a7d7f9 !important; } .vectorTabs li.selected{ background:white !important; } .vectorTabs span{ background:none !important; border-bottom:1px solid #a7d7f9 !important; } .vectorTabs li.selected span{ border-bottom-color:#ffffff !important; } .vectorTabs span a{ padding-top:0.5em !important; } .vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a{ padding-top:2.1em !important; } #mw-head .vectorMenu h3{ height:2em !important; background:none !important; } .vectorMenu h3 span{ padding-top:0.5em !important; } .vectorMenu h3 span:after{ top:0.5em !important; } .vectorMenu .menu{ top:2em !important; } #p-search form{ margin-top:-1px !important; } #simpleSearch{ margin-top:0; border:0; width:auto; padding:0; height:auto; background:none; } #simpleSearch input[type="search"]{ padding-bottom: 10px !important; padding-bottom: 1rem !important; padding-left: 15px !important; padding-left: 1.5rem !important; padding-right: 15px !important; padding-right: 1.5rem !important; padding-top: 10px !important; padding-top: 1rem !important; width: 100% !important; max-width: 100% !important; border: 1px solid #c6cfd9 !important; border-radius: 4px !important; box-sizing: border-box !important; outline: none !important; background:#ffffff !important; border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; } #searchButton, #mw-searchButton{ min-width:36px !important; } .mw-backlink{ position:absolute; margin-left:11em; margin-top:1em; top:0; left:0; } .mw-body-content{ font-size:1em; } #mw-panel .portal h3{ font-size: 1.17em !important; font-weight: bold !important; margin-left:0.5em !important; color:#222147 !important; } #mw-panel .portal .body{ background:none !important; } #mw-panel .portal .body li{ font-size:1em !important; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button{ background-color: #ffffff !important; display: inline-block !important; padding: 1.2rem 4rem 1.3rem !important; border-width: 1px !important; border-style: solid !important; border-color: #222147 !important; border-radius: .5rem !important; color: #fff !important; cursor: pointer !important; text-decoration: none !important; transition-property: background-color,border-color !important; transition-duration: .5s !important; outline: none !important; font-weight:normal !important; color:#222147 !important; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button{ background:#222147 !important; color:#ffffff !important; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover{ background-color: #80a2fc !important; border-color: #80a2fc !important; color:#ffffff !important; }