MediaWiki:Common.css: Difference between revisions
Dustin Loup (talk | contribs) No edit summary |
Dustin Loup (talk | contribs) No edit summary |
||
Line 250: | Line 250: | ||
width:35%; | width:35%; | ||
text-align: center; | text-align: center; | ||
} | |||
#topbar { | |||
background: -moz-linear-gradient(#098280, #E95F26);/* For Firefox 3.6 to 15 */ | |||
background: #098280; /* For browsers that do not support gradients */ | |||
background: -webkit-linear-gradient(#098280, #E95F26); /* For Safari 5.1 to 6.0 */ | |||
background: -o-linear-gradient(#098280, #E95F26); /* For Opera 11.1 to 12.0 */ | |||
background: linear-gradient(#098280, #E95F26); /* Standard syntax */ | |||
width:100%; | |||
color:white; | |||
font-size:4vw; | |||
text-align:center; | |||
text-shadow:2px 2px black; | |||
font-weight:bold; | |||
min-height:130px; | |||
display:flex; | |||
align-items:center; | |||
} | |||
#body { | |||
width:100%; | |||
margin:0 auto; | |||
} | |||
.fixed { | |||
margin:0 auto; | |||
vertical-align:baseline; | |||
} | |||
.flexbox{ | |||
display:flex; | |||
flex-direction:column; | |||
margin: 15px 15px; | |||
font-size:1.3vw; | |||
} | |||
.navbutton { | |||
border-right:.2vw solid #587560; | |||
color:white; | |||
font-weight:bold; | |||
font-size:1.7vw; | |||
padding:0 .5vw; | |||
display:flex; | |||
flex-direction:column; | |||
width:12.7vw; | |||
height:2.7vw; | |||
text-align:center; | |||
float:left; | |||
text-shadow:1px 1px black; | |||
} | |||
.navbutton2 { | |||
color:white; | |||
font-weight:bold; | |||
font-size:1.7vw; | |||
padding:0 .5vw; | |||
display:flex; | |||
flex-direction:column; | |||
width:11.7vw; | |||
height:2.7vw; | |||
text-align:center; | |||
float:left; | |||
text-shadow:1px 1px black; | |||
} | |||
#navbar { | |||
background:#E95F26; | |||
border:.2vw solid #587560; | |||
height:3vw; | |||
display:flex; | |||
flex-direction:column; | |||
} | |||
.sectionheader{ | |||
background:#098280; | |||
width:100%; | |||
color:white; | |||
font-size:2vw; | |||
text-align:center; | |||
text-shadow:1px 1px black; | |||
font-weight:bold; | |||
min-height:40px; | |||
border-radius:25px; | |||
display:flex; | |||
align-items:left; | |||
padding:0 0px 0 0px; | |||
} | |||
.primerlogo { | |||
width:auto; | |||
max-width:13vw; | |||
height:auto; | |||
max-height:13vw; | |||
margin:0 0 2vw 3vw; | |||
} | |||
.camel { | |||
width: auto; | |||
max-width: 16vw; | |||
height: auto; | |||
max-height: 11vw; | |||
width: auto; | |||
position:relative; | |||
top:1vw; | |||
} | |||
.editathonTall { | |||
width:auto; | |||
max-width:13vw; | |||
height:auto; | |||
max-height:30vw; | |||
padding:0 0 0 0; | |||
} | |||
#editathonsection { | |||
font-size:1.3vw; | |||
text-align:left; | |||
display:flex; | |||
align-items:center; | |||
} | |||
.sectionheader2{ | |||
background:#52A7A6; | |||
width:100%; | |||
color:white; | |||
font-size:2vw; | |||
text-align:center; | |||
text-shadow:1px 1px black; | |||
font-weight:bold; | |||
min-height:30px; | |||
border-radius:0px; | |||
display:flex; | |||
align-items:left; | |||
padding:10px 0 0 10px; | |||
} | |||
.primertextbox{ | |||
background-color:gray; | |||
color:white; | |||
padding:25px 15px 15px 15px; | |||
position:relative; | |||
bottom:.4vw; | |||
font-size:1.3vw; | |||
} | |||
.mw-collapsible-toggle { | |||
float: right; | |||
-moz-user-select: none; | |||
-webkit-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
} | |||
/* Align the toggle based on the direction of the content language */ | |||
/* @noflip */ | |||
.mw-content-ltr .mw-collapsible-toggle, | |||
.mw-content-rtl .mw-content-ltr .mw-collapsible-toggle { | |||
float: right; | |||
} | |||
/* @noflip */ | |||
.mw-content-rtl .mw-collapsible-toggle, | |||
.mw-content-ltr .mw-content-rtl .mw-collapsible-toggle { | |||
float: left; | |||
} | |||
.mw-customtoggle, | |||
.mw-collapsible-toggle { | |||
cursor: pointer; | |||
} | |||
/* collapse links in captions should be inline */ | |||
caption .mw-collapsible-toggle, | |||
.mw-content-ltr caption .mw-collapsible-toggle, | |||
.mw-content-rtl caption .mw-collapsible-toggle, | |||
.mw-content-rtl .mw-content-ltr caption .mw-collapsible-toggle, | |||
.mw-content-ltr .mw-content-rtl caption .mw-collapsible-toggle { | |||
float: none; | |||
} | |||
/* list-items go as wide as their parent element, don't float them inside list items */ | |||
li .mw-collapsible-toggle, | |||
.mw-content-ltr li .mw-collapsible-toggle, | |||
.mw-content-rtl li .mw-collapsible-toggle, | |||
.mw-content-rtl .mw-content-ltr li .mw-collapsible-toggle, | |||
.mw-content-ltr .mw-content-rtl li .mw-collapsible-toggle { | |||
float: none; | |||
} | |||
/* the added list item should have no list-style */ | |||
.mw-collapsible-toggle-li { | |||
list-style: none; | |||
} | |||
#AcronymList{ | |||
background: -moz-linear-gradient(#098280, #E95F26);/* For Firefox 3.6 to 15 */ | |||
background: #098280; /* For browsers that do not support gradients */ | |||
background: -webkit-linear-gradient(#098280, #E95F26); /* For Safari 5.1 to 6.0 */ | |||
background: -o-linear-gradient(#098280, #E95F26); /* For Opera 11.1 to 12.0 */ | |||
background: linear-gradient(#098280, #E95F26); /* Standard syntax */ | |||
max-width:85vw; | |||
font-size:5vw; | |||
text-align:center; | |||
font-weight:bold; | |||
min-height:130px; | |||
} | |||
#abc{ | |||
width:85vw; | |||
color:white; | |||
font-size:5vw; | |||
text-align:center; | |||
text-shadow:2px 2px black; | |||
font-weight:bold; | |||
min-height:130px; | |||
border-radius:0px; | |||
} | |||
*, | |||
*:before, | |||
*:after { | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
} | |||
.AcronymButton{ | |||
background-color:transparent; | |||
font-size:2.4vw; | |||
width:12vw; | |||
height:7.7vw; | |||
padding:.5vw .5vw; | |||
display: inline-block; | |||
position: relative; | |||
border: .2vw solid #FFF; | |||
overflow: hidden; | |||
text-decoration: none; | |||
text-align:center; | |||
outline: none; | |||
color: #FFF; | |||
font-family: 'raleway', sans-serif; | |||
box-shadow: 1px 1px 1px gray; | |||
} | |||
.AcronymButton span { | |||
-webkit-transition: 0.6s; | |||
-moz-transition: 0.6s; | |||
-o-transition: 0.6s; | |||
transition: 0.6s; | |||
-webkit-transition-delay: 0.2s; | |||
-moz-transition-delay: 0.2s; | |||
-o-transition-delay: 0.2s; | |||
transition-delay: 0.2s; | |||
} | |||
.AcronymButton:before, | |||
.AcronymButton:after { | |||
content: ''; | |||
position: absolute; | |||
top: 0.67em; | |||
left: 0; | |||
width: 100%; | |||
text-align: center; | |||
opacity: 0; | |||
-webkit-transition: .4s,opacity .6s; | |||
-moz-transition: .4s,opacity .6s; | |||
-o-transition: .4s,opacity .6s; | |||
transition: .4s,opacity .6s; | |||
} | |||
.AcronymButton:before { | |||
content: attr(data-hover); | |||
font-size:1vw; | |||
-webkit-transform: translate(-150%,0); | |||
-moz-transform: translate(-150%,0); | |||
-ms-transform: translate(-150%,0); | |||
-o-transform: translate(-150%,0); | |||
transform: translate(-150%,0); | |||
} | |||
/* :after */ | |||
.AcronymButton:after { | |||
content: attr(data-active); | |||
-webkit-transform: translate(150%,0); | |||
-moz-transform: translate(150%,0); | |||
-ms-transform: translate(150%,0); | |||
-o-transform: translate(150%,0); | |||
transform: translate(150%,0); | |||
} | |||
/* Span on :hover and :active */ | |||
.AcronymButton:hover span, | |||
.AcronymButton:active span { | |||
font-size:1vw; | |||
opacity: 0; | |||
-webkit-transform: scale(0.3); | |||
-moz-transform: scale(0.3); | |||
-ms-transform: scale(0.3); | |||
-o-transform: scale(0.3); | |||
transform: scale(0.3); | |||
} | |||
/* | |||
We show :before pseudo-element on :hover | |||
and :after pseudo-element on :active | |||
*/ | |||
.AcronymButton:hover:before, | |||
.AcronymButton:active:after { | |||
opacity: 1; | |||
-webkit-transform: translate(0,0); | |||
-moz-transform: translate(0,0); | |||
-ms-transform: translate(0,0); | |||
-o-transform: translate(0,0); | |||
transform: translate(0,0); | |||
-webkit-transition-delay: .4s; | |||
-moz-transition-delay: .4s; | |||
-o-transition-delay: .4s; | |||
transition-delay: .4s; | |||
} | |||
/* | |||
We hide :before pseudo-element on :active | |||
*/ | |||
.AcronymButton:active:before { | |||
-webkit-transform: translate(-150%,0); | |||
-moz-transform: translate(-150%,0); | |||
-ms-transform: translate(-150%,0); | |||
-o-transform: translate(-150%,0); | |||
transform: translate(-150%,0); | |||
-webkit-transition-delay: 0s; | |||
-moz-transition-delay: 0s; | |||
-o-transition-delay: 0s; | |||
transition-delay: 0s; | |||
} | } |