Difference between revisions of "MediaWiki:Common.css"

Revision as of 09:22, 19 June 2013

/* CSS placed here will be applied to all skins */

body{background-color: rgb(0, 0, 0);background-image:none;position: relative;
min-width: 1280px;}

#mw-page-base {
height:165px;
background-color: white;
background-image: url(http://i.imgur.com/uEuHKpt.jpg);
background-position: -125px 0px;
background-repeat: repeat-x;
}

#p-logo a {

width: 14em;
}

#p-personal{

background-image: url(http://i.imgur.com/Uqk8VnI.png);
background-position: bottom right;
background-repeat: no-repeat;
background-size:145px;
height: 109px;
}


#image {
margin: auto;
width: 1100px;}

#p-search{

height: 40px;
}

#banner{
color: rgb(255,255,255);
font-size: 125%;
text-align: center;
border-style: none;
margin: auto;
padding-top: 23px;
width: 448px;
text-shadow: 2px 2px 2px rgb(44,40,40);
background-image: url(http://i.imgur.com/SA6OmH1.png);
background-repeat: no-repeat;
background-position: 6px -16px;
text-indent: -9999px;

}

div#content,.mw-body
{
background-color: rgb(236, 236, 236);
background-position: top center;
background-repeat: no-repeat;

}






div#footer {

background-color: rgb(255, 255, 255);
background-image:none;
border-top: 1px solid rgb(182, 174, 174);

}

#left-navigation {
top: 7.8em;
}

#right-navigation {
margin-top: 7.8em;
}

#right-navigation {

background-color: white;
}

div#mw-panel div.portal {

margin-left: -11px;
}

div#mw-panel div.portal h5 {

color: rgb(255, 255, 255);

}

#test{

background-image: url(http://i.imgur.com/iNfZjjy.jpg);
background-position: -19px -708px;
border: solid 3px rgb(160,122,26);
box-shadow: 2px 2px 2px rgb(99,94,94);
height: 47px;
}


div#mw-panel div.portal div.body ul li a:visited {
color: rgb(165, 165, 165);
}

div#mw-panel div.portal div.body ul li a {
color: rgb(139, 161, 197);
}




#boule{
margin: auto;
width: 600px;
}

#boulebis{
margin: auto;
width: 650px;
}

#bouleter{
margin: auto;
width: 1192px;


}

#boulequa{
margin: auto;
width: 1012px;

}

#boulequabis{

margin: auto;
width: 674px;
}

#p-personal ul {
list-style: none;
margin: 0;
padding-left: 0em;
width: 104%;
padding-bottom: 4px;
height: 20px;
border-radius: 16px;
background-color: rgba(224,224,224,0.6);
font-weight: bold;
box-shadow: 0px 0px 2px rgba(27, 27, 27,0.6)
}


a.new, #p-personal a.new {
color: rgb(92, 48, 1);
}

#right-navigation {
background-color: rgba(255, 255, 255,0.4);
}

div.vectorTabs ul li {
background-color: rgba(255, 255, 255,0.1);
background-image:none;

}



div.vectorTabs li a {

color: rgb(255, 255, 255);
font-weight: bold;
}


div.vectorTabs li.selected {
background-color: rgb(236, 236, 236);
background-image: none;
}

div.vectorTabs li.new a, div.vectorTabs li.new a:visited {
color: rgb(236, 184, 154);
}

#firstHeading {
color: rgb(92,48,1);
font-weight: 500;
}

div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited {
color: rgb(92,48,1);
text-decoration: none;
}


div#content a.external, div#content a.external[href ^="gopher://"] {
background:none;
}



@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot');
    src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.woff') format('woff'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.ttf') format('truetype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont#WebSymbolsRegular') format('svg');
}

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url(http://subtlepatterns.com/patterns/dark_wall.png);
    background-repeat: repeat;
    height: 500px;
    padding: 1px;
}

h1 { color: white }

#slideshow-wrap {
    display: block;
    height: 320px;
    min-width: 260px;
    max-width: 640px;
    margin: auto;
    border: 12px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    margin-top: 20px;
    position: relative;
}

#slideshow-inner {
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    overflow: hidden;
    position: relative;
}

#slideshow-inner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0px;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

#slideshow-inner>ul>li {
    width: 20%;
    height: 320px;
    float: left;
    position: relative;
}

#slideshow-inner>ul>li>img {
    margin: auto;
    height: 100%;
}

#slideshow-wrap input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;
}

#slideshow-wrap label:not(.arrows):not(.show-description-label) {
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color: rgba(200,200,200,1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}

#slideshow-wrap label:not(.arrows):active { bottom: -46px }

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) }

#slideshow-wrap label[for=button-1] { margin-left: -36px }

#slideshow-wrap label[for=button-2] { margin-left: -18px }

#slideshow-wrap label[for=button-4] { margin-left: 18px }

#slideshow-wrap label[for=button-5] { margin-left: 36px }

#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }

label.arrows {
    font-family: 'WebSymbolsRegular';
    font-size: 25px;
    color: rgb(255,255,240);
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: none;
    opacity: 0.7;
    cursor: pointer;
    z-index: 1000;
    background-color: transparent;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    text-shadow: 0px 0px 3px rgba(0,0,0,.8);
}

label.arrows:hover { opacity: 1 }

label.arrows:active { margin-top: -23px }

input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5 {
    right: -55px;
    display: block;
}

input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4 {
    left: -55px;
    display: block;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }

input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }

input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }

.description {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    font-family: 'Yanone Kaffeesatz';
    z-index: 1000;
}

.description input { visibility: hidden }

.description label {
    font-family: 'WebSymbolsRegular';
    background-color: rgba(255,255,240,1);
    position: relative;
    left: -17px;
    top: 00px;
    width: 40px;
    height: 27px;
    display: inline-block;
    text-align: center;
    padding-top: 7px;
    border-bottom-right-radius: 15px;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    z-index: 5;
    color: rgb(20,20,20);
}

#slideshow-inner>ul>li:hover .description label { opacity: 1 }

.description input[type=checkbox]:checked~label { opacity: 1 }

.description .description-text {
    background-color: rgba(255,255,230,.5);
    padding-left: 45px;
    padding-top: 25px;
    padding-right: 15px;
    padding-bottom: 15px;
    position: relative;
    top: -35px;
    z-index: 4;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    color: rgb(20,20,20);
}

.description input[type=checkbox]:checked~.description-text { opacity: 1 }