Widget:Pinyin chart style

<style> /* Pinyin Table */

div.table-container { display: inline-block; 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; }

1. 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; }

1. 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; }

1. pinyin-chart-settings .tone-option-label,
2. pinyin-chart-settings .tone-option {

padding-right: 10px; }

1. 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); } </style>