Difference between revisions of "MediaWiki:Common.css"

From FirebugWiki
Jump to: navigation, search
m (Better icon position for top links)
(Adjusted styles for Webkit browsers and FF 3.6)
Line 14: Line 14:
 
body {
 
body {
 
     background-image: -moz-linear-gradient(center top , #EAF1FB, #FFFFFF 200px, #EAF1FB);
 
     background-image: -moz-linear-gradient(center top , #EAF1FB, #FFFFFF 200px, #EAF1FB);
 +
    background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0, #EAF1FB), color-stop(200px, #FFFFFF), color-stop(100%, #EAF1FB)); /* Webkit */
 
     font-family: "Trebuchet MS", helvetica, sans-serif;
 
     font-family: "Trebuchet MS", helvetica, sans-serif;
 
}
 
}
Line 64: Line 65:
 
#p-tb {
 
#p-tb {
 
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
 
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
 +
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); /* FF 3.6 */
 
     border-radius: 0 5px 5px 0;
 
     border-radius: 0 5px 5px 0;
 
     background-color: rgba(255, 255, 255, 0.4);
 
     background-color: rgba(255, 255, 255, 0.4);
Line 93: Line 95:
 
#content {
 
#content {
 
     box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
 
     box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
 +
    -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3); /* FF 3.6 */
 
     border: none;
 
     border: none;
 
     margin-top: 4em;
 
     margin-top: 4em;
Line 119: Line 122:
 
#p-cactions li {
 
#p-cactions li {
 
     background-image: -moz-linear-gradient(center bottom , #EAF1FB, rgba(255, 255, 255, 0.3));
 
     background-image: -moz-linear-gradient(center bottom , #EAF1FB, rgba(255, 255, 255, 0.3));
 +
    background-image: -webkit-gradient(linear, center bottom, center top, color-stop(0, #EAF1FB), color-stop(100%, rgba(255, 255, 255, 0.3))); /* Webkit */
 
     border-radius: 5px 5px 0 0;
 
     border-radius: 5px 5px 0 0;
 
     box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);
 
     box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);
 +
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5); /* FF 3.6 */
 
     margin: 0 0.3em 0 0;
 
     margin: 0 0.3em 0 0;
 
     padding: 0.3em;
 
     padding: 0.3em;
Line 128: Line 133:
 
#p-cactions li:hover {
 
#p-cactions li:hover {
 
     background-image: -moz-radial-gradient(center bottom, ellipse farthest-corner, #FFFFFF, #FFFFFF, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), -moz-linear-gradient(center bottom, #EAF1FB, rgba(255, 255, 255, 0.3));
 
     background-image: -moz-radial-gradient(center bottom, ellipse farthest-corner, #FFFFFF, #FFFFFF, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), -moz-linear-gradient(center bottom, #EAF1FB, rgba(255, 255, 255, 0.3));
 +
    background-image: -webkit-gradient(radial, center bottom, ellipse farthest-corner, color-stop(0, #FFFFFF), color-stop(33.33%, #FFFFFF), color-stop(66.67%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); /* Webkit */
 
}
 
}
  
 
#p-cactions li.selected {
 
#p-cactions li.selected {
 
     background-image: -moz-linear-gradient(center bottom , #FBEEBE, rgba(255, 255, 255, 0.3));
 
     background-image: -moz-linear-gradient(center bottom , #FBEEBE, rgba(255, 255, 255, 0.3));
 +
    background-image: -webkit-gradient(linear, center bottom, center top, color-stop(0, #FBEEBE), color-stop(100%, rgba(255, 255, 255, 0.3))); /* Webkit */
 
     padding: 0.5em 0.3em 0.3em 0.3em;
 
     padding: 0.5em 0.3em 0.3em 0.3em;
 
}
 
}
Line 141: Line 148:
 
div.thumbinner {
 
div.thumbinner {
 
     box-shadow: 0 0 15px -2px rgba(0, 0, 0, 0.2);
 
     box-shadow: 0 0 15px -2px rgba(0, 0, 0, 0.2);
 +
    -moz-box-shadow: 0 0 15px -2px rgba(0, 0, 0, 0.2); /* FF 3.6 */
 
}
 
}

Revision as of 21:29, 18 May 2011

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

@font-face {
    font-family: "TitilliumMaps";
    src: local("☺"), url("../../../fonts/TitilliumMaps26L002.woff") format("woff"), url("../../../fonts/TitilliumMaps26L002.ttf") format("truetype");
}

@font-face {
    font-family: "TitilliumMaps";
    font-weight: bold;
    src: local("☺"), url("../../../fonts/TitilliumMaps26L001.woff") format("woff"), url("../../../fonts/TitilliumMaps26L001.ttf") format("truetype");
}

body {
    background-image: -moz-linear-gradient(center top , #EAF1FB, #FFFFFF 200px, #EAF1FB);
    background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0, #EAF1FB), color-stop(200px, #FFFFFF), color-stop(100%, #EAF1FB)); /* Webkit */
    font-family: "Trebuchet MS", helvetica, sans-serif;
}

#globalWrapper {
    background: url("/img/header-bg.png") no-repeat;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "TitilliumMaps", Helvetica, sans-serif;
    font-weight: bold;
}

h1, h2 {
    border-bottom: 1px solid rgb(154, 203, 228);
}

h2 {
    font-size: 156%;
}

h3 {
    font-size: 138%;
    border-bottom: 1px solid #EEEEEE;
}

h4 {
    font-size: 122%;
}

hr {
    background-color: rgb(154, 203, 228);
}

.editsection {
    font-family: "Trebuchet MS", helvetica, sans-serif;
}

.portlet h5 {
    font-size: 110%;
    font-weight: bold;
}

#p-search,
#p-Main,
#p-Panels,
#p-Extensions,
#p-Get_Involved,
#p-Wiki,
#p-tb {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); /* FF 3.6 */
    border-radius: 0 5px 5px 0;
    background-color: rgba(255, 255, 255, 0.4);
}

#p-personal ul {
    padding-right: 1em;
    line-height: 2.4em;
}

#p-personal li {
    margin: 0;
    background-position: 5px center;
    padding: 5px 7px;
}

li#pt-userpage, li#pt-anonuserpage, li#pt-login {
    padding-left: 24px;
}

#p-personal li:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

#p-personal li a:hover {
    background-color: transparent!important;
}

#content {
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3); /* FF 3.6 */
    border: none;
    margin-top: 4em;
}

#toc {
    font-size: 100%;
}

#p-cactions {
    top: 2.5em;
}

.pBody {
    border: none;
}

ul {
    margin: 0 0 0 1.5em;
}

.portlet ul {
    font-size: 100%;
}

#p-cactions li {
    background-image: -moz-linear-gradient(center bottom , #EAF1FB, rgba(255, 255, 255, 0.3));
    background-image: -webkit-gradient(linear, center bottom, center top, color-stop(0, #EAF1FB), color-stop(100%, rgba(255, 255, 255, 0.3))); /* Webkit */
    border-radius: 5px 5px 0 0;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5); /* FF 3.6 */
    margin: 0 0.3em 0 0;
    padding: 0.3em;
    border: none!important;
}

#p-cactions li:hover {
    background-image: -moz-radial-gradient(center bottom, ellipse farthest-corner, #FFFFFF, #FFFFFF, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), -moz-linear-gradient(center bottom, #EAF1FB, rgba(255, 255, 255, 0.3));
    background-image: -webkit-gradient(radial, center bottom, ellipse farthest-corner, color-stop(0, #FFFFFF), color-stop(33.33%, #FFFFFF), color-stop(66.67%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); /* Webkit */
}

#p-cactions li.selected {
    background-image: -moz-linear-gradient(center bottom , #FBEEBE, rgba(255, 255, 255, 0.3));
    background-image: -webkit-gradient(linear, center bottom, center top, color-stop(0, #FBEEBE), color-stop(100%, rgba(255, 255, 255, 0.3))); /* Webkit */
    padding: 0.5em 0.3em 0.3em 0.3em;
}

#p-cactions li a, #p-cactions li a:hover {
    background-color: transparent!important;
}

div.thumbinner {
    box-shadow: 0 0 15px -2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 15px -2px rgba(0, 0, 0, 0.2); /* FF 3.6 */
}