Difference between revisions of "MediaWiki:Common.css"

m (ibox title styling)
(6 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
.tright .thumbinner {padding-left: 1.2em; }
 
.tright .thumbinner {padding-left: 1.2em; }
 
.tleft .thumbinner {padding-right: 1.2em; }
 
.tleft .thumbinner {padding-right: 1.2em; }
 +
 +
img.thumbimage { width: 100% !important; }
 +
div.thumbinner { width: auto !important; }
 +
 +
/* Infobox title styling */
 +
.ibox-title { padding: 10px; }
 +
.syllable-box-title { position: relative; top: -13px; float: left; margin: 0px; }
 +
.ibox-label { clear: both; }
  
 
/* Resources dropdown fix for mobile */
 
/* Resources dropdown fix for mobile */
Line 75: Line 83:
 
font-weight: bold;
 
font-weight: bold;
 
background-color: #F5A9A9;
 
background-color: #F5A9A9;
}
 
 
/* Pinyin Table */
 
 
div.table-container {
 
border-color: rgba(0,0,0,.15);
 
border-width: 1px;
 
border-style: solid;
 
border-radius: 4px;
 
max-width: 100%;
 
overflow: auto;
 
margin-bottom: 1.5em;
 
}
 
#pinyin-chart-settings .additional-settings-label {
 
background-color:#F5F5F5;
 
border-color: rgba(0,0,0,0.15);
 
border-width: 1px;
 
border-style: solid;
 
border-top-left-radius: 4px;
 
border-top-right-radius: 4px;
 
padding: 6px;
 
font-size:13pt;
 
}
 
#pinyin-chart-settings .additional-settings-content {
 
border-color: rgba(0,0,0,0.15);
 
border-width: 1px;
 
border-top-width: 0px;
 
border-style: solid;
 
border-bottom-left-radius: 4px;
 
border-bottom-right-radius: 4px;
 
padding: 6px;
 
}
 
#pinyin-chart-settings .tone-option-label,
 
#pinyin-chart-settings .tone-option {
 
padding-right: 10px;
 
}
 
#pinyin-chart-settings .settings-collapse {
 
float: right;
 
}
 
.pinyin-table {
 
background-color: #a9d0f5;
 
table-layout: fixed;
 
width: 0px;
 
text-align: center;
 
}
 
 
.pinyin-table.small .table-pinyin,
 
.pinyin-table.small .table-link,
 
.pinyin-table.small th {
 
font-size: 13px;
 
}
 
.pinyin-table.medium .table-pinyin,
 
.pinyin-table.medium .table-link,
 
.pinyin-table.medium th {
 
font-size: 16px;
 
}
 
.pinyin-table.large .table-pinyin,
 
.pinyin-table.large .table-link,
 
.pinyin-table.large th {
 
font-size: 24px;
 
}
 
 
.pinyin-table.small th, .pinyin-table.small td {
 
width: 40px;
 
}
 
.pinyin-table.medium th, .pinyin-table.medium td {
 
width: 50px;
 
}
 
.pinyin-table.large th, .pinyin-table.large td {
 
width: 70px;
 
}
 
 
.pinyin-table.small .table-ipa,
 
.pinyin-table.small .table-zhuyin,
 
.pinyin-table.small .table-wade-giles {
 
font-size: 10px;
 
}
 
.pinyin-table.medium .table-ipa,
 
.pinyin-table.medium .table-zhuyin,
 
.pinyin-table.medium .table-wade-giles {
 
font-size: 12px;
 
}
 
.pinyin-table.large .table-ipa,
 
.pinyin-table.large .table-zhuyin,
 
.pinyin-table.large .table-wade-giles {
 
font-size: 16px;
 
}
 
 
.pinyin-table th.table-selected {
 
background: #DDD;
 
cursor: pointer;
 
}
 
 
.pinyin-table th {
 
border-style: solid;
 
border-color: rgb(205,205,205);
 
border-width: 0px;
 
}
 
th.first-row:not(.first-col):not(.last-col) {
 
border-bottom-width: 1px;
 
}
 
th.last-row:not(.first-col):not(.last-col) {
 
border-top-width: 1px;
 
}
 
th.first-col:not(.first-row):not(.last-row) {
 
border-right-width: 1px;
 
}
 
th.last-col:not(.first-row):not(.last-row) {
 
border-left-width: 1px;
 
}
 
.table-highlight {
 
cursor: pointer;
 
}
 
.pinyin-table.loading-audio td {
 
cursor: wait;
 
}
 
td.playing-audio * {
 
font-weight: bold;
 
}
 
.col-a.row-null, .col-a.row-dtnl, .col-a.row-zhchshr, .col-a.row-gkh,
 
.col-o.row-null, .col-o.row-dtnl, .col-o.row-zhchshr, .col-o.row-gkh,
 
.col-u.row-null, .col-u.row-dtnl, .col-u.row-zhchshr, .col-u.row-gkh {
 
background: rgb(255,255,255);
 
}
 
.col-a.row-null.table-highlight, .col-a.row-dtnl.table-highlight, .col-a.row-zhchshr.table-highlight, .col-a.row-gkh.table-highlight,
 
.col-o.row-null.table-highlight, .col-o.row-dtnl.table-highlight, .col-o.row-zhchshr.table-highlight, .col-o.row-gkh.table-highlight,
 
.col-u.row-null.table-highlight, .col-u.row-dtnl.table-highlight, .col-u.row-zhchshr.table-highlight, .col-u.row-gkh.table-highlight {
 
background: rgba(255,255,255,0.7);
 
}
 
.col-a.row-null.table-extra-highlight, .col-a.row-dtnl.table-extra-highlight, .col-a.row-zhchshr.table-extra-highlight, .col-a.row-gkh.table-extra-highlight,
 
.col-o.row-null.table-extra-highlight, .col-o.row-dtnl.table-extra-highlight, .col-o.row-zhchshr.table-extra-highlight, .col-o.row-gkh.table-extra-highlight,
 
.col-u.row-null.table-extra-highlight, .col-u.row-dtnl.table-extra-highlight, .col-u.row-zhchshr.table-extra-highlight, .col-u.row-gkh.table-extra-highlight {
 
background: rgba(255,255,255,0.4);
 
}
 
.col-a.row-bpmf, .col-a.row-zcs, .col-a.row-jqx,
 
.col-o.row-bpmf, .col-o.row-zcs, .col-o.row-jqx,
 
.col-u.row-bpmf, .col-u.row-zcs, .col-u.row-jqx,
 
.col-e.row-null, .col-e.row-dtnl, .col-e.row-zhchshr, .col-e.row-gkh,
 
.col-i.row-null, .col-i.row-dtnl, .col-i.row-zhchshr, .col-i.row-gkh,
 
.col-v.row-null, .col-v.row-dtnl, .col-v.row-zhchshr, .col-v.row-gkh {
 
background: rgb(240,240,240);
 
}
 
.col-a.row-bpmf.table-highlight, .col-a.row-zcs.table-highlight, .col-a.row-jqx.table-highlight,
 
.col-o.row-bpmf.table-highlight, .col-o.row-zcs.table-highlight, .col-o.row-jqx.table-highlight,
 
.col-u.row-bpmf.table-highlight, .col-u.row-zcs.table-highlight, .col-u.row-jqx.table-highlight,
 
.col-e.row-null.table-highlight, .col-e.row-dtnl.table-highlight, .col-e.row-zhchshr.table-highlight, .col-e.row-gkh.table-highlight,
 
.col-i.row-null.table-highlight, .col-i.row-dtnl.table-highlight, .col-i.row-zhchshr.table-highlight, .col-i.row-gkh.table-highlight,
 
.col-v.row-null.table-highlight, .col-v.row-dtnl.table-highlight, .col-v.row-zhchshr.table-highlight, .col-v.row-gkh.table-highlight {
 
background: rgba(240,240,240,0.7);
 
}
 
.col-a.row-bpmf.table-extra-highlight, .col-a.row-zcs.table-extra-highlight, .col-a.row-jqx.table-extra-highlight,
 
.col-o.row-bpmf.table-extra-highlight, .col-o.row-zcs.table-extra-highlight, .col-o.row-jqx.table-extra-highlight,
 
.col-u.row-bpmf.table-extra-highlight, .col-u.row-zcs.table-extra-highlight, .col-u.row-jqx.table-extra-highlight,
 
.col-e.row-null.table-extra-highlight, .col-e.row-dtnl.table-extra-highlight, .col-e.row-zhchshr.table-extra-highlight, .col-e.row-gkh.table-extra-highlight,
 
.col-i.row-null.table-extra-highlight, .col-i.row-dtnl.table-extra-highlight, .col-i.row-zhchshr.table-extra-highlight, .col-i.row-gkh.table-extra-highlight,
 
.col-v.row-null.table-extra-highlight, .col-v.row-dtnl.table-extra-highlight, .col-v.row-zhchshr.table-extra-highlight, .col-v.row-gkh.table-extra-highlight {
 
background: rgba(240,240,240,0.4);
 
}
 
.col-e.row-bpmf, .col-e.row-zcs, .col-e.row-jqx,
 
.col-i.row-bpmf, .col-i.row-zcs, .col-i.row-jqx,
 
.col-v.row-bpmf, .col-v.row-zcs, .col-v.row-jqx {
 
background: rgb(234,234,238);
 
}
 
.col-e.row-bpmf.table-highlight, .col-e.row-zcs.table-highlight, .col-e.row-jqx.table-highlight,
 
.col-i.row-bpmf.table-highlight, .col-i.row-zcs.table-highlight, .col-i.row-jqx.table-highlight,
 
.col-v.row-bpmf.table-highlight, .col-v.row-zcs.table-highlight, .col-v.row-jqx.table-highlight {
 
background: rgba(234,234,238,0.7);
 
}
 
.col-e.row-bpmf.table-extra-highlight, .col-e.row-zcs.table-extra-highlight, .col-e.row-jqx.table-extra-highlight,
 
.col-i.row-bpmf.table-extra-highlight, .col-i.row-zcs.table-extra-highlight, .col-i.row-jqx.table-extra-highlight,
 
.col-v.row-bpmf.table-extra-highlight, .col-v.row-zcs.table-extra-highlight, .col-v.row-jqx.table-extra-highlight {
 
background: rgba(234,234,238,0.4);
 
}
 
.first-row.first-col, .first-row.last-col, .last-row.first-col, .last-row.last-col,
 
.first-row.col-a, .first-row.col-o, .first-row.col-u,
 
.last-row.col-a, .last-row.col-o, .last-row.col-u,
 
.first-col.row-null, .first-col.row-dtnl, .first-col.row-zhchshr, .first-col.row-gkh,
 
.last-col.row-null, .last-col.row-dtnl, .last-col.row-zhchshr, .last-col.row-gkh {
 
background: rgb(255,255,255);
 
}
 
.first-row.col-a.table-highlight, .first-row.col-o.table-highlight, .first-row.col-u.table-highlight,
 
.last-row.col-a.table-highlight, .last-row.col-o.table-highlight, .last-row.col-u.table-highlight,
 
.first-col.row-null.table-highlight, .first-col.row-dtnl.table-highlight, .first-col.row-zhchshr.table-highlight, .first-col.row-gkh.table-highlight,
 
.last-col.row-null.table-highlight, .last-col.row-dtnl.table-highlight, .last-col.row-zhchshr.table-highlight, .last-col.row-gkh.table-highlight {
 
background: rgba(255,255,255,0.7);
 
}
 
.first-row.col-e, .first-row.col-i, .first-row.col-v,
 
.last-row.col-e, .last-row.col-i, .last-row.col-v,
 
.first-col.row-bpmf, .first-col.row-zcs, .first-col.row-jqx,
 
.last-col.row-bpmf, .last-col.row-zcs, .last-col.row-jqx {
 
background: rgb(245,245,248);
 
}
 
.first-row.col-e.table-highlight, .first-row.col-i.table-highlight, .first-row.col-v.table-highlight,
 
.last-row.col-e.table-highlight, .last-row.col-i.table-highlight, .last-row.col-v.table-highlight,
 
.first-col.row-bpmf.table-highlight, .first-col.row-zcs.table-highlight, .first-col.row-jqx.table-highlight,
 
.last-col.row-bpmf.table-highlight, .last-col.row-zcs.table-highlight, .last-col.row-jqx.table-highlight {
 
background: rgba(245,245,248,0.7);
 
 
}
 
}

Revision as of 01:24, 12 June 2015

/* Possibly for addition to MW skin */

.tright .thumbinner {padding-left: 1.2em; }
.tleft .thumbinner {padding-right: 1.2em; }

img.thumbimage { width: 100% !important; }
div.thumbinner { width: auto !important; }

/* Infobox title styling */
.ibox-title { padding: 10px; }
.syllable-box-title { position: relative; top: -13px; float: left; margin: 0px; }
.ibox-label { clear: both; }

/* Resources dropdown fix for mobile */
@media (max-width: 770px) {
li.dropdown {
position: relative; 
}
.dropdown .dropdown-menu,
.dropdown .dropdown-panel {
background-color: transparent;
border-width: 0px;
box-shadow: 0 0 0 #fff;
}
.dropdown-menu > li > a {
clear: both;
line-height: 20px;
border-radius: 3px;
color: #777;
padding: 9px 15px;
}
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
}
}

/* Text styling */

span.enpron {background-color: #CEE3F6; border-bottom: 2x solid #5882FA; }

/* Pinyin Quick Start Guide Points List styling */

.mw-content-ltr div.points-big ul, .mw-content-rtl .mw-content-ltr div.points-big ul, .mw-content-ltr div.points-big ol, .mw-content-rtl .mw-content-ltr div.points-big ol {
max-width: 22em;
border: 1px solid #ddd;
background-color: #fdfdfd;
font-size: 120%;
margin: 0.5em 0 1.2em 2em;
padding: 1em 2.5em;
}

div.points-big ol li, div.points-big ul li {
line-height: 1.8em;
}

/* Accents Table */

table.accents {
width: 100%;
overflow: auto;
margin-bottom: 1.5em;
}

table.accents tr {
padding: 1.3em 0;
}

table.accents td {
border: 1px solid white;
}

table.accents th {
font-weight: bold;
}

table.accents td.plus {
text-align: center;
font-weight: bold;
background-color: #A9F5BC;
}

table.accents td.minus {
text-align: center;
font-weight: bold;
background-color: #F5A9A9;
}