Difference between revisions of "MediaWiki:Common.css"
From SHA2017 Wiki
(better font size for the h1, so it matches the box on the left more without losing connection to the page) |
|||
| (34 intermediate revisions by 3 users not shown) | |||
| Line 4: | Line 4: | ||
background-image: url('/images/5/52/Shawiki.png') !important; | background-image: url('/images/5/52/Shawiki.png') !important; | ||
} | } | ||
| − | |||
| − | |||
/* How to make it go 100% or be static? Do we have to stretch an image or something? It's a bit ugly now... */ | /* How to make it go 100% or be static? Do we have to stretch an image or something? It's a bit ugly now... */ | ||
/* | /* | ||
| Line 23: | Line 21: | ||
} | } | ||
*/ | */ | ||
| − | |||
/* Gradient background start */ | /* Gradient background start */ | ||
| Line 31: | Line 28: | ||
background-color: inherit !important; | background-color: inherit !important; | ||
} | } | ||
| − | |||
#mw-panel { | #mw-panel { | ||
| − | background: rgba(255,255,255,0.6) !important; | + | background: rgba(255, 255, 255, 0.6) !important; |
width: 10.5em !important; | width: 10.5em !important; | ||
padding-bottom: 1em; | padding-bottom: 1em; | ||
} | } | ||
| − | |||
#p-personal { | #p-personal { | ||
| − | background: rgba(255,255,255,0.6); | + | background: rgba(255, 255, 255, 0.6); |
padding: 0.2em; | padding: 0.2em; | ||
| − | + | margin-right: 4em; | |
| + | } | ||
| + | #codebox { | ||
| + | margin-right: 0.6em; | ||
| + | margin-top: 0.3em; | ||
| + | font-size: 20px; | ||
| + | top: 30px; | ||
| + | margin: 0px; | ||
} | } | ||
| − | |||
#p-cactions-label { | #p-cactions-label { | ||
| − | background: rgba(255,255,255,0.6); | + | background: rgba(255, 255, 255, 0.6); |
} | } | ||
| − | |||
/* Gradient background END */ | /* Gradient background END */ | ||
| + | /* [[Template:ToDo]] START */ | ||
| − | |||
table.mbox-style { | table.mbox-style { | ||
border-left: 10px solid #fc3; | border-left: 10px solid #fc3; | ||
} | } | ||
| − | |||
table.mbox { | table.mbox { | ||
margin: 0 10%; | margin: 0 10%; | ||
| Line 69: | Line 68: | ||
text-align: center; | text-align: center; | ||
} | } | ||
| − | .mbox th.mbox-text, .mbox td.mbox-text { | + | .mbox th.mbox-text, |
| + | .mbox td.mbox-text { | ||
padding: 0.25em 0.5em; | padding: 0.25em 0.5em; | ||
} | } | ||
| − | th.mbox-text, td.mbox-text { | + | th.mbox-text, |
| + | td.mbox-text { | ||
border: none; | border: none; | ||
padding: 0.25em 0.9em; | padding: 0.25em 0.9em; | ||
| Line 78: | Line 79: | ||
} | } | ||
/* [[Template:ToDo]] END */ | /* [[Template:ToDo]] END */ | ||
| − | |||
/* [[Template:Countdown]] START */ | /* [[Template:Countdown]] START */ | ||
/* the countdown clock on the front page of the wiki. See common.js for the script. */ | /* the countdown clock on the front page of the wiki. See common.js for the script. */ | ||
| − | #clockdiv{ | + | |
| − | + | #clockdiv { | |
| − | + | font-family: sans-serif; | |
| − | + | color: #fff; | |
| − | + | display: inline-block; | |
| − | + | font-weight: 100; | |
| − | + | text-align: center; | |
| + | font-size: 30px; | ||
} | } | ||
| − | + | #clockdiv > div { | |
| − | #clockdiv > div{ | + | padding: 10px; |
| − | + | border-radius: 3px; | |
| − | + | background: #00BF96; | |
| − | + | display: inline-block; | |
| − | + | margin-left: 10px; | |
| − | |||
} | } | ||
| − | + | #clockdiv div > span { | |
| − | #clockdiv div > span{ | + | padding: 15px; |
| − | + | border-radius: 3px; | |
| − | + | background: #00816A; | |
| − | + | display: inline-block; | |
| − | + | width: 50px; | |
| − | + | height: 50px; | |
| − | |||
} | } | ||
| − | + | .clocksmalltext { | |
| − | .clocksmalltext{ | + | padding-top: 5px; |
| − | + | font-size: 16px; | |
| − | |||
} | } | ||
/* [[Template:Countdown]] END */ | /* [[Template:Countdown]] END */ | ||
| + | /* [[Template:FAQ]] START */ | ||
| − | |||
.metadata-faq { | .metadata-faq { | ||
| − | + | font-size: 10px; | |
| − | + | border: collapsed; | |
| − | + | line-height: 12px; | |
} | } | ||
/* [[Template:FAQ]] END */ | /* [[Template:FAQ]] END */ | ||
| + | /* bombastic header start */ | ||
| − | |||
.mw-body .firstHeading { | .mw-body .firstHeading { | ||
padding: 20px; | padding: 20px; | ||
| Line 128: | Line 126: | ||
padding-right: 24px; | padding-right: 24px; | ||
} | } | ||
| − | |||
@media screen and (min-width: 982px) { | @media screen and (min-width: 982px) { | ||
.mw-body .firstHeading { | .mw-body .firstHeading { | ||
padding: 20px; | padding: 20px; | ||
margin: -24px; | margin: -24px; | ||
| − | margin-top: -20px | + | margin-top: -20px padding-left: 24px; |
| − | |||
padding-right: 24px; | padding-right: 24px; | ||
} | } | ||
| Line 143: | Line 139: | ||
font-family: 'robotoblack'; | font-family: 'robotoblack'; | ||
src: url('/design/font/roboto_black/Roboto-Black-webfont.eot'); | src: url('/design/font/roboto_black/Roboto-Black-webfont.eot'); | ||
| − | src: url('/design/font/roboto_black/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'), | + | src: url('/design/font/roboto_black/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'), url('/design/font/roboto_black/Roboto-Black-webfont.woff') format('woff'), url('/design/font/roboto_black/Roboto-Black-webfont.ttf') format('truetype'), url('/design/font/roboto_black/Roboto-Black-webfont.svg#robotoblack') format('svg'); |
| − | |||
| − | |||
| − | |||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
} | } | ||
| − | |||
@font-face { | @font-face { | ||
font-family: 'robotoregular'; | font-family: 'robotoregular'; | ||
src: url('/design/font/roboto_regular/Roboto-Regular-webfont.eot'); | src: url('/design/font/roboto_regular/Roboto-Regular-webfont.eot'); | ||
| − | src: url('/design/font/roboto_regular/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), | + | src: url('/design/font/roboto_regular/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('/design/font/roboto_regular/Roboto-Regular-webfont.woff') format('woff'), url('/design/font/roboto_regular/Roboto-Regular-webfont.ttf') format('truetype'), url('/design/font/roboto_regular/Roboto-Regular-webfont.svg#robotoblack') format('svg'); |
| − | |||
| − | |||
| − | |||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
} | } | ||
| − | |||
body { | body { | ||
font-family: 'robotoregular'; | font-family: 'robotoregular'; | ||
} | } | ||
| + | h1, | ||
| + | h2, | ||
| + | h3, | ||
| + | h4 { | ||
| + | font-family: 'robotoblack' !important; | ||
| + | } | ||
| + | h1 { | ||
| + | font-size: 2.1em !important; | ||
| + | } | ||
| + | /* per cpresser's request for the Form:Village; vertically align the options */ | ||
| + | |||
| + | .checkboxLabelLineBreak:after { | ||
| + | content: '\A'; | ||
| + | white-space: pre-wrap; | ||
| + | } | ||
| + | /* Globally define user infobox style */ | ||
| + | |||
| + | .UserInfoBox { | ||
| + | width: 30em; | ||
| + | font-size: 90%; | ||
| + | border: 1px solid #aaaaaa; | ||
| + | background-color: #f9f9f9; | ||
| + | color: black; | ||
| + | margin-bottom: 0.5em; | ||
| + | margin-left: 1em; | ||
| + | padding: 0.2em; | ||
| + | float: right; | ||
| + | clear: right; | ||
| + | text-align: left; | ||
| + | } | ||
| + | .wikitable tr th { | ||
| + | text-align: right !important; | ||
| + | align: right !important; | ||
| + | padding-right: 5px; /*removed !important, otherwise the caret and text in smw-tables overlap */ | ||
| + | } | ||
| + | /* Bigger sidebar font */ | ||
| − | + | #p-navigation { | |
| − | + | font-size: 18px; | |
| + | } | ||
| + | /* Making sure the shaflag label codes are in the bottom right corner as designed */ | ||
| + | |||
| + | .shaflag-title #codebox { | ||
| + | position: relative; | ||
| + | top: 30px; | ||
| + | } | ||
| + | .shaflag-inline #codebox { | ||
| + | display: none; | ||
| + | } | ||
| + | /* Making calendars longer */ | ||
| + | /* Event calendar help class */ | ||
| + | |||
| + | .smw-eventcalendar { | ||
| + | width: 100%; | ||
| + | height: 1300px; | ||
| + | } | ||
| + | |||
| + | /* START [[Template:Stub]] */ | ||
| + | |||
| + | .stub-image { | ||
| + | width: 60px; | ||
| + | height: 60px; | ||
| + | text-align: center; | ||
| + | display: inline-block; | ||
| + | font-size: 40px; | ||
| + | vertical-align: middle; | ||
| + | margin-right: 10px; | ||
| + | } | ||
| + | /* END [[Template:Stub]] */ | ||
| + | |||
| + | /* START [[Template:ToDo]] */ | ||
| + | .todo-image { | ||
| + | margin-right: 10px; | ||
| + | display: inline-block; | ||
| + | vertical-align: middle; | ||
| + | } | ||
| + | |||
| + | .todo-text { | ||
| + | width: 80%; | ||
| + | display: inline-block; | ||
| + | vertical-align: middle; | ||
| + | line-height: 1; | ||
| + | } | ||
| + | /* END [[Template:ToDo]] */ | ||
| + | |||
| + | /* h2 for the shatitles */ | ||
| + | .nondecorated { | ||
| + | margin-top: 0em !important; | ||
| + | color: white !important; | ||
| + | border-bottom: 0px solid #aaa !important; | ||
| + | } | ||
| + | |||
| + | /* END h2 for the shatitles */ | ||
| + | |||
| + | |||
| + | .bool-table td.smwtype_boo { | ||
| + | text-transform: capitalize; | ||
| + | } | ||
| + | |||
| + | |||
| + | .bool-table td.smwtype_boo[data-sort-value="1"]::before { | ||
| + | content: '✅ '; | ||
| + | color: green; | ||
} | } | ||
| − | + | ||
| − | + | .bool-table td.smwtype_boo[data-sort-value="0"]::before { | |
| + | content: '❌ '; | ||
| + | color: red; | ||
} | } | ||
| − | + | ||
| − | + | .swag { | |
| + | animation: blink-animation 1s steps(5, start) infinite; | ||
| + | -webkit-animation: blink-animation 1s steps(5, start) infinite; | ||
| + | } | ||
| + | @keyframes blink-animation { | ||
| + | to { | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | } | ||
| + | @-webkit-keyframes blink-animation { | ||
| + | to { | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | } | ||
Latest revision as of 12:15, 22 June 2017
/* CSS placed here will be applied to all skins */
.mw-wiki-logo {
background-image: url('/images/5/52/Shawiki.png') !important;
}
/* How to make it go 100% or be static? Do we have to stretch an image or something? It's a bit ugly now... */
/*
Trying the new gradient background.
.mediawiki {
background-image:url("images/2/28/Screen_Shot_2017-01-04_at_15.23.19.png");
background-repeat: repeat-x;
background-size: 600% 600%;
}
#mw-head {
background: rgb(161,219,255);
background: -moz-linear-gradient(top, rgba(161,219,255,1) 1%, rgba(240,249,255,1) 99%);
background: -webkit-linear-gradient(top, rgba(161,219,255,1) 1%,rgba(240,249,255,1) 99%);
background: linear-gradient(to bottom, rgba(161,219,255,1) 1%,rgba(240,249,255,1) 99%);
}
*/
/* Gradient background start */
#mw-page-base {
background: inherit !important;
background-image: inherit !important;
background-color: inherit !important;
}
#mw-panel {
background: rgba(255, 255, 255, 0.6) !important;
width: 10.5em !important;
padding-bottom: 1em;
}
#p-personal {
background: rgba(255, 255, 255, 0.6);
padding: 0.2em;
margin-right: 4em;
}
#codebox {
margin-right: 0.6em;
margin-top: 0.3em;
font-size: 20px;
top: 30px;
margin: 0px;
}
#p-cactions-label {
background: rgba(255, 255, 255, 0.6);
}
/* Gradient background END */
/* [[Template:ToDo]] START */
table.mbox-style {
border-left: 10px solid #fc3;
}
table.mbox {
margin: 0 10%;
border: 1px solid #a2a9b1;
border-left: 10px solid #36c;
background: #fbfbfb;
}
.ambox td.mbox-image {
padding: 2px 0 2px 0.5em;
}
td.mbox-image {
border: none;
padding: 2px 0 2px 0.9em;
text-align: center;
}
.mbox th.mbox-text,
.mbox td.mbox-text {
padding: 0.25em 0.5em;
}
th.mbox-text,
td.mbox-text {
border: none;
padding: 0.25em 0.9em;
width: 100%;
}
/* [[Template:ToDo]] END */
/* [[Template:Countdown]] START */
/* the countdown clock on the front page of the wiki. See common.js for the script. */
#clockdiv {
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div {
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
margin-left: 10px;
}
#clockdiv div > span {
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
width: 50px;
height: 50px;
}
.clocksmalltext {
padding-top: 5px;
font-size: 16px;
}
/* [[Template:Countdown]] END */
/* [[Template:FAQ]] START */
.metadata-faq {
font-size: 10px;
border: collapsed;
line-height: 12px;
}
/* [[Template:FAQ]] END */
/* bombastic header start */
.mw-body .firstHeading {
padding: 20px;
margin: -16px;
padding-left: 24px;
padding-right: 24px;
}
@media screen and (min-width: 982px) {
.mw-body .firstHeading {
padding: 20px;
margin: -24px;
margin-top: -20px padding-left: 24px;
padding-right: 24px;
}
}
/* bombastic header end*/
@font-face {
font-family: 'robotoblack';
src: url('/design/font/roboto_black/Roboto-Black-webfont.eot');
src: url('/design/font/roboto_black/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'), url('/design/font/roboto_black/Roboto-Black-webfont.woff') format('woff'), url('/design/font/roboto_black/Roboto-Black-webfont.ttf') format('truetype'), url('/design/font/roboto_black/Roboto-Black-webfont.svg#robotoblack') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotoregular';
src: url('/design/font/roboto_regular/Roboto-Regular-webfont.eot');
src: url('/design/font/roboto_regular/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('/design/font/roboto_regular/Roboto-Regular-webfont.woff') format('woff'), url('/design/font/roboto_regular/Roboto-Regular-webfont.ttf') format('truetype'), url('/design/font/roboto_regular/Roboto-Regular-webfont.svg#robotoblack') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'robotoregular';
}
h1,
h2,
h3,
h4 {
font-family: 'robotoblack' !important;
}
h1 {
font-size: 2.1em !important;
}
/* per cpresser's request for the Form:Village; vertically align the options */
.checkboxLabelLineBreak:after {
content: '\A';
white-space: pre-wrap;
}
/* Globally define user infobox style */
.UserInfoBox {
width: 30em;
font-size: 90%;
border: 1px solid #aaaaaa;
background-color: #f9f9f9;
color: black;
margin-bottom: 0.5em;
margin-left: 1em;
padding: 0.2em;
float: right;
clear: right;
text-align: left;
}
.wikitable tr th {
text-align: right !important;
align: right !important;
padding-right: 5px; /*removed !important, otherwise the caret and text in smw-tables overlap */
}
/* Bigger sidebar font */
#p-navigation {
font-size: 18px;
}
/* Making sure the shaflag label codes are in the bottom right corner as designed */
.shaflag-title #codebox {
position: relative;
top: 30px;
}
.shaflag-inline #codebox {
display: none;
}
/* Making calendars longer */
/* Event calendar help class */
.smw-eventcalendar {
width: 100%;
height: 1300px;
}
/* START [[Template:Stub]] */
.stub-image {
width: 60px;
height: 60px;
text-align: center;
display: inline-block;
font-size: 40px;
vertical-align: middle;
margin-right: 10px;
}
/* END [[Template:Stub]] */
/* START [[Template:ToDo]] */
.todo-image {
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}
.todo-text {
width: 80%;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
/* END [[Template:ToDo]] */
/* h2 for the shatitles */
.nondecorated {
margin-top: 0em !important;
color: white !important;
border-bottom: 0px solid #aaa !important;
}
/* END h2 for the shatitles */
.bool-table td.smwtype_boo {
text-transform: capitalize;
}
.bool-table td.smwtype_boo[data-sort-value="1"]::before {
content: '✅ ';
color: green;
}
.bool-table td.smwtype_boo[data-sort-value="0"]::before {
content: '❌ ';
color: red;
}
.swag {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}