MediaWiki:Common.css
An Avatar.Global Resource
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* experimental begin */
/* fonts */
@font-face {
font-family: 'raleway-regular';
src: url('../fonts/raleway-regular.eot');
src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/raleway-regular.woff') format('woff'),
url('../fonts/raleway-regular.ttf') format('truetype'),
url('../fonts/raleway-regular.svg#raleway-regular') format('svg');
font-weight: normal;
font-style: normal;
}
/* General CSS
*/
body{
background: #fdfdfd;
}
.wrapper{
width: 1100px;
margin: 0 auto;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.back_link{
font-family: "raleway-regular", arial;
font-size: 16px;
text-align: center;
margin-bottom: 100px;
text-decoration: none;
display: block;
letter-spacing: 1px;
padding: 20px 0;
color:#3e3e3e;
background: #f1efef;
}
.back_link .arrow{
vertical-align: middle;
margin-right: 4px;
}
.row{
margin-bottom: 80px;
}
.row a:first-child{
float: left;
}
.row a:last-child{
float: right;
}
.content{
padding-top: 200px;
}
.content p{
font-family: 'raleway-regular', arial;
font-size: 16px;
margin-bottom: 40px;
line-height: 30px;
color: #494747;
}
/* Header Styling */
header{
width: 100%;
height: 100px;
background: #4b5f6d;
position: fixed;
}
.logo{
float: left;
margin-top: 33px;
}
/* nav */
nav{
float: right;
}
nav ul li{
list-style: none;
float: left;
margin-left: 40px;
}
nav ul li a{
display: block;
height: 100%;
line-height: 100px;
text-decoration: none;
color: #e5edf1;
font-family: 'raleway-regular', arial;
font-size: 14px;
letter-spacing: 1px;
}
nav ul li a .nav_arrow{
display: inline-block;
width: 9px;
height: 7px;
background: url('../images/nav_arrow.png') no-repeat;
background-position: 0 0;
margin-left: 6px;
-webkit-transition:all linear .1s;
-moz-transition:all linear .1s;
-o-transition:all linear .1s;
transition:all linear .1s;
}
nav ul li:hover > a .nav_arrow,
nav ul li .sm_style1_level1 > ul > li:hover > a .nav_arrow{
background-position: 0 -8px;
}
.sm_style1_level1,
.sm_style1_level2,
.sm_style2_level1{
width: 100%!important;
height: 80px;
left: 0;
top: 100px;
background: #435765;
position: absolute;
opacity: 0;
z-index: 2;
/* transition: <property> <duration> <timing-function> <delay>; */
-webkit-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;
-moz-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;
-o-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;
transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;
-webkit-transform: perspective(1000px) rotateX(-90deg);
-moz-transform: perspective(1000px) rotateX(-90deg);
-o-transform: perspective(1000px) rotateX(-90deg);
transform: perspective(1000px) rotateX(-90deg);
-webkit-transform-style: preserve- 3 d;
-moz-transform-style: preserve- 3 d;
-o-transform-style: preserve- 3 d;
transform-style: preserve- 3 d;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.sm_style1_level2{
top: 80px;
background: #3c4f5d;
-webkit-transition-delay:.2s;
-moz-transition-delay:.2s;
-o-transition-delay:.2s;
transition-delay:.2s;
}
nav ul li ul li{
list-style: none;
float: left;
display: block;
text-align: center;
border-right: 1px solid #3c4f5d;
margin: 0;
width: 19.9%;
}
nav ul li ul li:last-child{
border-right: 0;
}
nav ul li ul li a{
display: block;
width: 100%;
height: 100%;
line-height: 80px;
text-decoration: none;
color: #e3eff4;
}
nav ul li ul li img.menu_icon{
margin: 0 10px -5px 0;
}
nav ul li ul li li{
border-right: 1px solid #334552;
}
nav ul li .sm_style2_level1 > ul > li{
position: relative;
vertical-align: top;
}
nav ul li li .preview{
display: block;
width: 150px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -75px;
background: #ffffff;
text-decoration: none;
border: 2px solid #fff;
opacity: 0;
/* transition: <property> <duration> <timing-function> <delay>; */
-webkit-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .2s;
-moz-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .2s;
-o-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .2s;
transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .2s;
-webkit-transform: perspective(1000px) rotateX(-90deg);
-moz-transform: perspective(1000px) rotateX(-90deg);
-o-transform: perspective(1000px) rotateX(-90deg);
transform: perspective(1000px) rotateX(-90deg);
-webkit-transform-style: preserve- 3 d;
-moz-transform-style: preserve- 3 d;
-o-transform-style: preserve- 3 d;
transform-style: preserve- 3 d;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
nav ul li li .preview .preview_arrow{
display: block;
position: absolute;
width: 12px;
height: 6px;
background: url('../images/box-arrow.png') no-repeat;
left: 50%;
margin: -7px 0 0 -6px;
text-align: center;
}
nav ul li:hover .sm_style1_level1,
nav ul li li:hover .sm_style1_level2,
nav ul li:hover .sm_style2_level1,
nav ul li li:hover .preview{
opacity: 1;
-webkit-transform: perspective(1000px) rotateX(0deg);
-moz-transform: perspective(1000px) rotateX(0deg);
-o-transform: perspective(1000px) rotateX(0deg);
transform: perspective(1000px) rotateX(0deg);
}
nav ul li:hover .sm_style1_level1,
nav ul li:hover .sm_style2_level1{
-webkit-transition-delay:.6s;
-moz-transition-delay:.6s;
-o-transition-delay:.6s;
transition-delay:.6s;
}
nav ul li li:hover .sm_style1_level2,
nav ul li li:hover .preview{
-webkit-transition-delay:.4s;
-moz-transition-delay:.4s;
-o-transition-delay:.4s;
transition-delay:.4s;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
img{
max-width: 100%;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/* experimental end */
div.topnav ul {
list-style-type: none;
margin: 0;
margin-bottom:28px;
padding: 0;
overflow: hidden;
background-color: #fffafa;
border-bottom: 1px solid #888
}
div.topnav li {
float: left;
;
}
div.topnav li a {
display: block;
color: #222;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: .8s background-color;
}
div.nav ul {
list-style-type: none;
margin: 0;
margin-bottom:28px;
padding: 0;
overflow: hidden;
background-color: #fafffa;
border-bottom: 1px solid #888
}
div.nav li {
float: left;
;
}
div.nav li a {
display: block;
color: #222;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: .8s background-color;
}
div.nav ul a:hover:not(.active) {
background-color: #f3fff3;
}
div.nav ul .active {
background-color:#fafafa;
}
div.toc-mobile h2 {
display:none
}
div.toc
{
display:none;
}
div.definition, div.definition p:first-of-type
{
padding: 15px;
border: 1px solid #eee;
}
@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif")
body {font-family: "Noto Sans", sans-serif}
/* changes the default font used for MediaWiki to Noto Sans (does not include headings or monospaced text) */
div#content h1, div#content h2 {font-family: "Noto Serif", serif}
/* changes the default font used for MediaWiki headings to Noto Serif */