MediaWiki:Common.css

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
m (Changed standard text font; changed font weight of h5 to bold)
m (Renamed class 'needsHelp' to 'incomplete')
(37 intermediate revisions not shown)
Line 13: Line 13:
body {
body {
-
     background-image: url("/img/header-bg.png");
+
     background-image: -moz-linear-gradient(center top , #EAF1FB, #FFFFFF 200px, #EAF1FB);
 +
    background-image: -webkit-linear-gradient(top, #EAF1FB 0, white 200px, #EAF1FB 100%); /* Webkit */
 +
    background-image: -o-linear-gradient(top, #EAF1FB 0, white 200px, #EAF1FB 100%); /* Opera */
 +
    background-image: -ms-linear-gradient(top, #EAF1FB 0, white 200px, #EAF1FB 100%); /* IE */
     font-family: "Trebuchet MS", helvetica, sans-serif;
     font-family: "Trebuchet MS", helvetica, sans-serif;
 +
}
 +
 +
#globalWrapper {
 +
    background: url("/img/header-bg.png") no-repeat;
}
}
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6 {
-
     font-family: "TitilliumMaps", Helvetica, sans-serif;
+
     margin-top: 0.5em;
 +
    padding-top: 0;
 +
    /* font-family: "TitilliumMaps", Helvetica, sans-serif;   has ugly aliased borders at some PCs */
     font-weight: bold;
     font-weight: bold;
}
}
h1, h2 {
h1, h2 {
-
     border-bottom: 1px solid rgb(154, 203, 228);
+
     border-bottom: 2px solid rgb(154, 203, 228);
 +
    padding-top: 0.5em;
 +
    margin-top: 0.7em;
}
}
h2 {
h2 {
 +
    clear: both;
     font-size: 156%;
     font-size: 156%;
}
}
Line 33: Line 45:
     font-size: 138%;
     font-size: 138%;
     border-bottom: 1px solid #EEEEEE;
     border-bottom: 1px solid #EEEEEE;
 +
    margin-top: 1.2em;
}
}
h4 {
h4 {
     font-size: 122%;
     font-size: 122%;
 +
}
 +
 +
h1 + h3, h2 + h3 {
 +
    margin-top: 0.4em;
 +
}
 +
 +
hr {
 +
    background-color: rgb(154, 203, 228);
 +
}
 +
 +
.editsection {
 +
    font-family: "Trebuchet MS", helvetica, sans-serif;
}
}
Line 52: Line 77:
#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;
 +
    -moz-border-radius: 0 5px 5px 0; /* FF 3.6 */
     background-color: rgba(255, 255, 255, 0.4);
     background-color: rgba(255, 255, 255, 0.4);
 +
}
 +
 +
/* FF 3.6 */
 +
#p-search pBody,
 +
#p-Main pBody,
 +
#p-Panels pBody,
 +
#p-Extensions pBody,
 +
#p-Get_Involved pBody,
 +
#p-Wiki pBody,
 +
#p-tb pBody {
 +
    -moz-border-radius-bottomright: 5px;
 +
}
 +
 +
#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 {
#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;
 +
}
 +
 +
#toc {
 +
    font-size: 100%;
 +
}
 +
 +
#p-cactions {
 +
    top: 2.5em;
}
}
Line 74: Line 145:
#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(bottom, #EAF1FB, rgba(255, 255, 255, 0.3));
 +
    background-image: -webkit-linear-gradient(bottom, #EAF1FB 0, rgba(255, 255, 255, 0.3) 100%); /* Webkit */
 +
    background-image: -o-linear-gradient(bottom, #EAF1FB 0, rgba(255, 255, 255, 0.3) 100%); /* Opera */
 +
    background-image: -ms-linear-gradient(bottom, #EAF1FB 0, rgba(255, 255, 255, 0.3) 100%); /* IE */
     border-radius: 5px 5px 0 0;
     border-radius: 5px 5px 0 0;
 +
    -moz-border-radius: 5px 5px 0 0; /* FF 3.6 */
     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 83: Line 159:
#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(bottom, #EAF1FB, rgba(255, 255, 255, 0.3));
 +
    background-image: -webkit-radial-gradient(center bottom, ellipse farthest-corner, white 0, white 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%), -webkit-linear-gradient(bottom, #EAF1FB 0, rgba(255, 255, 255, 0.3) 100%); /* Webkit */
 +
    background-image: -o-linear-gradient(bottom, #FFFFFF 0, rgba(255, 255, 255, 0.3) 100%); /* Opera (doesn't support radial gradients yet) */
 +
    background-image: -ms-radial-gradient(center bottom, ellipse farthest-corner, #FFFFFF 0, #FFFFFF 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%), -ms-linear-gradient(bottom, #EAF1FB 0, rgba(255, 255, 255, 0.3) 100%); /* IE */
}
}
#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(bottom, #FBEEBE, rgba(255, 255, 255, 0.3));
 +
    background-image: -webkit-linear-gradient(bottom, #FBEEBE 0, rgba(255, 255, 255, 0.3) 100%); /* Webkit */
 +
    background-image: -o-linear-gradient(bottom, #FBEEBE 0, rgba(255, 255, 255, 0.3) 100%); /* Opera */
 +
    background-image: -ms-linear-gradient(bottom, #FBEEBE 0, rgba(255, 255, 255, 0.3) 100%); /* IE */
     padding: 0.5em 0.3em 0.3em 0.3em;
     padding: 0.5em 0.3em 0.3em 0.3em;
}
}
Line 93: Line 175:
#p-cactions li a, #p-cactions li a:hover {
#p-cactions li a, #p-cactions li a:hover {
     background-color: transparent!important;
     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 */
 +
}
 +
 +
table.wikitable th, table.wikitable td {
 +
    border-left-width: 0;
 +
    border-right-width: 0;
 +
}
 +
 +
table.wikitable th, table.wikitable > tbody > tr:first-child td {
 +
    background-image: -moz-linear-gradient(center top , #F2F2F2, #E6E6E6);
 +
    background-image: -webkit-linear-gradient(center top , #F2F2F2, #E6E6E6); /* Webkit */
 +
    background-image: -o-linear-gradient(center top , #F2F2F2, #E6E6E6); /* Opera */
 +
    background-image: -ms-linear-gradient(center top , #F2F2F2, #E6E6E6); /* IE */
 +
}
 +
 +
table.wikitable tr:nth-child(even) {
 +
    background-color: #F0F0F0;
 +
}
 +
 +
table.wikitable tr:nth-child(even) code {
 +
    background-color: transparent;
 +
}
 +
 +
table.light {
 +
    border-spacing: 0;
 +
}
 +
 +
table.light th,
 +
table.light td {
 +
    border-bottom: 1px solid #DEDEDE;
 +
    padding: 3px;
 +
}
 +
 +
table.light th {
 +
    border-bottom-color: #C8C8C8;
 +
}
 +
 +
table.light td {
 +
    vertical-align: top;
 +
}
 +
 +
.maintenanceHint {
 +
    border-radius: 5px;
 +
    margin: 10px;
 +
    padding: 5px;
 +
}
 +
 +
#bodyContent .warning {
 +
    background: #FFA0A0 -moz-linear-gradient(bottom, #FFA0A0, #FFE6E6);
 +
}
 +
 +
#bodyContent .incomplete {
 +
    background: #FFFFA0 -moz-linear-gradient(bottom, #FFFFA0, #FFFFE6);
 +
}
 +
 +
code.key {
 +
    color: #0000DC;
 +
    background-color: transparent;
}
}

Revision as of 13:00, 17 July 2012

/* 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-linear-gradient(top, #EAF1FB 0, white 200px, #EAF1FB 100%); /* Webkit */
    background-image: -o-linear-gradient(top, #EAF1FB 0, white 200px, #EAF1FB 100%); /* Opera */
    background-image: -ms-linear-gradient(top, #EAF1FB 0, white 200px, #EAF1FB 100%); /* IE */
    font-family: "Trebuchet MS", helvetica, sans-serif;
}
 
#globalWrapper {
    background: url("/img/header-bg.png") no-repeat;
}
 
h1, h2, h3, h4, h5, h6 {
    margin-top: 0.5em;
    padding-top: 0;
    /* font-family: "TitilliumMaps", Helvetica, sans-serif;   has ugly aliased borders at some PCs */
    font-weight: bold;
}
 
h1, h2 {
    border-bottom: 2px solid rgb(154, 203, 228);
    padding-top: 0.5em;
    margin-top: 0.7em;
}
 
h2 {
    clear: both;
    font-size: 156%;
}
 
h3 {
    font-size: 138%;
    border-bottom: 1px solid #EEEEEE;
    margin-top: 1.2em;
}
 
h4 {
    font-size: 122%;
}
 
h1 + h3, h2 + h3 {
    margin-top: 0.4em;
}
 
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;
    -moz-border-radius: 0 5px 5px 0; /* FF 3.6 */
    background-color: rgba(255, 255, 255, 0.4);
}
 
/* FF 3.6 */
#p-search pBody,
#p-Main pBody,
#p-Panels pBody,
#p-Extensions pBody,
#p-Get_Involved pBody,
#p-Wiki pBody,
#p-tb pBody {
    -moz-border-radius-bottomright: 5px;
}
 
#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(bottom, #EAF1FB, rgba(255, 255, 255, 0.3));
    background-image: -webkit-linear-gradient(bottom, #EAF1FB 0, rgba(255, 255, 255, 0.3) 100%); /* Webkit */
    background-image: -o-linear-gradient(bottom, #EAF1FB 0, rgba(255, 255, 255, 0.3) 100%); /* Opera */
    background-image: -ms-linear-gradient(bottom, #EAF1FB 0, rgba(255, 255, 255, 0.3) 100%); /* IE */
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0; /* FF 3.6 */
    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(bottom, #EAF1FB, rgba(255, 255, 255, 0.3));
    background-image: -webkit-radial-gradient(center bottom, ellipse farthest-corner, white 0, white 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%), -webkit-linear-gradient(bottom, #EAF1FB 0, rgba(255, 255, 255, 0.3) 100%); /* Webkit */
    background-image: -o-linear-gradient(bottom, #FFFFFF 0, rgba(255, 255, 255, 0.3) 100%); /* Opera (doesn't support radial gradients yet) */
    background-image: -ms-radial-gradient(center bottom, ellipse farthest-corner, #FFFFFF 0, #FFFFFF 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%), -ms-linear-gradient(bottom, #EAF1FB 0, rgba(255, 255, 255, 0.3) 100%); /* IE */
}
 
#p-cactions li.selected {
    background-image: -moz-linear-gradient(bottom, #FBEEBE, rgba(255, 255, 255, 0.3));
    background-image: -webkit-linear-gradient(bottom, #FBEEBE 0, rgba(255, 255, 255, 0.3) 100%); /* Webkit */
    background-image: -o-linear-gradient(bottom, #FBEEBE 0, rgba(255, 255, 255, 0.3) 100%); /* Opera */
    background-image: -ms-linear-gradient(bottom, #FBEEBE 0, rgba(255, 255, 255, 0.3) 100%); /* IE */
    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 */
}
 
table.wikitable th, table.wikitable td {
    border-left-width: 0;
    border-right-width: 0;
}
 
table.wikitable th, table.wikitable > tbody > tr:first-child td {
    background-image: -moz-linear-gradient(center top , #F2F2F2, #E6E6E6);
    background-image: -webkit-linear-gradient(center top , #F2F2F2, #E6E6E6); /* Webkit */
    background-image: -o-linear-gradient(center top , #F2F2F2, #E6E6E6); /* Opera */
    background-image: -ms-linear-gradient(center top , #F2F2F2, #E6E6E6); /* IE */
}
 
table.wikitable tr:nth-child(even) {
    background-color: #F0F0F0;
}
 
table.wikitable tr:nth-child(even) code {
    background-color: transparent;
}
 
table.light {
    border-spacing: 0;
}
 
table.light th,
table.light td {
    border-bottom: 1px solid #DEDEDE;
    padding: 3px;
}
 
table.light th {
    border-bottom-color: #C8C8C8;
}
 
table.light td {
    vertical-align: top;
}
 
.maintenanceHint {
    border-radius: 5px;
    margin: 10px;
    padding: 5px;
}
 
#bodyContent .warning {
    background: #FFA0A0 -moz-linear-gradient(bottom, #FFA0A0, #FFE6E6);
}
 
#bodyContent .incomplete {
    background: #FFFFA0 -moz-linear-gradient(bottom, #FFFFA0, #FFFFE6);
}
 
code.key {
    color: #0000DC;
    background-color: transparent;
}
Personal tools