Difference between revisions of "MediaWiki:Common.css"

(Extra highlighting for hovered cell in pinyin chart)
 
(105 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
/* Menu Bar Gradient Styling */
+
/* Possibly for addition to MW skin */
  
−
.tabs {
+
.tright .thumbinner {padding-left: 1.2em; }
−
background: -moz-linear-gradient(#F7F8F8, #F6F6F6, #F4F4F4, #ECECEC, #DBDBDB);
+
.tleft .thumbinner {padding-right: 1.2em; }
−
background: -o-linear-gradient(#F7F8F8, #F6F6F6, #F4F4F4, #ECECEC, #DBDBDB);
 
−
background: -webkit-linear-gradient(#F7F8F8, #F6F6F6, #F4F4F4, #ECECEC, #DBDBDB);
 
−
}
 
  
−
/* Stub tag text styling */
+
img.thumbimage { width: 100% !important; }
 +
div.thumbinner { width: auto !important; }
  
−
table.stub, #contentSub {
+
/* Infobox title styling */
−
font-size: 90%;
+
.ibox-title { padding: 10px; }
−
margin: -2em 0 1.6em 0;
+
.syllable-box-title { position: relative; top: -13px; float: left; margin: 0px; }
−
color: #888;
+
.ibox-label { clear: both; }
−
}
 
  
−
/* Custom Footer Text Styles (text styled is from the allset skin's footer.php */
+
/* Resources dropdown fix for mobile */
−
 
+
@media (max-width: 770px) {
−
.custom-footer p {
+
li.dropdown {
−
font-size: 80%;
+
position: relative;  
−
padding: 1em;
 
−
margin: 0;
 
−
}
 
−
 
 
−
/* Pinyin Table */
 
−
.pinyin-table {
 
−
background-color: #a9d0f5;
 
−
table-layout: fixed;
 
−
width: 0px;
 
−
text-align: center;
 
−
}
 
−
.pinyin-table th, .pinyin-table td {
 
−
width: 50px;
 
−
}
 
−
.table-ipa, .table-zhuyin, .table-wade-giles {
 
−
font-size: 10px;
 
−
}
 
−
.pinyin-table th.table-selected {
 
−
background: #DDD;
 
−
cursor: pointer;
 
 
}
 
}
−
.pinyin-table th {
+
.dropdown .dropdown-menu,
−
border-style: solid;
+
.dropdown .dropdown-panel {
−
border-color: rgb(205,205,205);
+
background-color: transparent;
 
border-width: 0px;
 
border-width: 0px;
 +
box-shadow: 0 0 0 #fff;
 
}
 
}
−
th.first-row:not(.first-col):not(.last-col) {
+
.dropdown-menu > li > a {
−
border-bottom-width: 1px;
+
clear: both;
 +
line-height: 20px;
 +
border-radius: 3px;
 +
color: #777;
 +
padding: 9px 15px;
 
}
 
}
−
th.last-row:not(.first-col):not(.last-col) {
+
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
−
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;
+
/* 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;
 
}
 
}
−
.table-highlight {
+
 
−
cursor: pointer;
+
div.points-big ol li, div.points-big ul li {
 +
line-height: 1.8em;
 
}
 
}
−
.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,
+
/* Accents Table */
−
.col-u.row-null, .col-u.row-dtnl, .col-u.row-zhchshr, .col-u.row-gkh {
+
 
−
background: rgb(255,255,255);
+
table.accents {
 +
width: 100%;
 +
overflow: auto;
 +
margin-bottom: 1.5em;
 
}
 
}
−
.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,
+
table.accents tr {
−
.col-u.row-null.table-highlight, .col-u.row-dtnl.table-highlight, .col-u.row-zhchshr.table-highlight, .col-u.row-gkh.table-highlight {
+
padding: 1.3em 0;
−
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,
+
table.accents td {
−
.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 {
+
border: 1px solid white;
−
background: rgba(255,255,255,0.5);
 
 
}
 
}
−
.col-a.row-bpmf, .col-a.row-zcs, .col-a.row-jqx,
+
 
−
.col-o.row-bpmf, .col-o.row-zcs, .col-o.row-jqx,
+
table.accents th {
−
.col-u.row-bpmf, .col-u.row-zcs, .col-u.row-jqx,
+
font-weight: bold;
−
.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,
+
table.accents td.plus {
−
.col-u.row-bpmf.table-highlight, .col-u.row-zcs.table-highlight, .col-u.row-jqx.table-highlight,
+
text-align: center;
−
.col-e.row-null.table-highlight, .col-e.row-dtnl.table-highlight, .col-e.row-zhchshr.table-highlight, .col-e.row-gkh.table-highlight,
+
font-weight: bold;
−
.col-i.row-null.table-highlight, .col-i.row-dtnl.table-highlight, .col-i.row-zhchshr.table-highlight, .col-i.row-gkh.table-highlight,
+
background-color: #A9F5BC;
−
.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,
+
table.accents td.minus {
−
.col-u.row-bpmf.table-extra-highlight, .col-u.row-zcs.table-extra-highlight, .col-u.row-jqx.table-extra-highlight,
+
text-align: center;
−
.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,
+
font-weight: bold;
−
.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,
+
background-color: #F5A9A9;
−
.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.5);
 
 
}
 
}
−
.col-e.row-bpmf, .col-e.row-zcs, .col-e.row-jqx,
+
 
−
.col-i.row-bpmf, .col-i.row-zcs, .col-i.row-jqx,
+
/* For Tone Change Tables */
−
.col-v.row-bpmf, .col-v.row-zcs, .col-v.row-jqx {
+
 
−
background: rgb(234,234,238);
+
table.table em {
 +
    background-color: #FFFFAA;
 +
    font-style: normal;
 
}
 
}
−
.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,
+
/* For Tone Pairs Table */
−
.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);
+
table#tone-pairs td.pair {
 +
    text-align: center;
 
}
 
}
−
.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,
+
td.pair a {
−
.col-v.row-bpmf.table-extra-highlight, .col-v.row-zcs.table-extra-highlight, .col-v.row-jqx.table-extra-highlight {
+
    font-size: 150%;
−
background: rgba(234,234,238,0.7);
+
    font-weight: 600;
 +
    padding: 0.5em 0;
 
}
 
}
−
.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,
+
/* Make Embedded YouTube Videos Responsive */
−
.last-row.col-a, .last-row.col-o, .last-row.col-u,
+
/* CSS Code via: https://themeskills.com/make-embedded-youtube-videos-responsive-wordpress/ */
−
.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 {
+
.YT-container {
−
background: rgb(255,255,255);
+
position:relative;
 +
padding-bottom:56.25%;
 +
padding-top:30px;
 +
margin-bottom:1em;
 +
height:0;
 +
overflow:hidden;
 
}
 
}
−
.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,
+
.YT-container iframe, .YT-container p iframe, .YT-container object, .YT-container embed {
−
.first-col.row-null.table-highlight, .first-col.row-dtnl.table-highlight, .first-col.row-zhchshr.table-highlight, .first-col.row-gkh.table-highlight,
+
position:absolute;
−
.last-col.row-null.table-highlight, .last-col.row-dtnl.table-highlight, .last-col.row-zhchshr.table-highlight, .last-col.row-gkh.table-highlight {
+
top:0;
−
background: rgba(255,255,255,0.7);
+
left:0;
−
}
+
width:100%;
−
.first-row.col-e, .first-row.col-i, .first-row.col-v,
+
height:100%;
−
.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);
 
 
}
 
}
  
−
/* Other Randomness */
+
/* Make Image Grids Responsive with "imgrid" classes */
 +
/* CSS Code via: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp */
  
−
.mw-redirect { float: none; }
+
.imgrid-row {
 +
  display: flex;
 +
  flex-wrap: wrap;
 +
  padding: 0 4px;
 +
}
  
−
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul, .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol {
+
/* Create four equal columns that sits next to each other */
−
margin: 0.3em 0 1em 1em;
+
.imgrid-column {
−
padding: 0;
+
  flex: 25%;
−
}
+
  max-width: 25%;
−
div.liju, div.jiegou {
+
  padding: 0 0;
−
width: 90%;
+
/*  padding: 0 4px; */
 
}
 
}
  
−
li {
+
.imgrid-column img {
−
line-height: 1.5em;
+
  margin-top: 8px;
 +
  vertical-align: middle;
 +
  width: 99%;
 
}
 
}
  
−
.nolayout .firstHeading {
+
/* Responsive layout - makes a two column-layout instead of four columns */
−
margin: 1.6em 0;
+
@media screen and (max-width: 800px) {
 +
  .imgrid-column {
 +
    flex: 50%;
 +
    max-width: 50%;
 +
  }
 
}
 
}
  
−
 
+
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
−
/* Remove margin and padding from ul, but only if it's not in ".ibox-level". Currently some ibox sections which do not contain information on the level use the ".ibox-level" class for styling (should probably be cleaned up), and those already have margin and padding removed */
+
@media screen and (max-width: 600px) {
−
#ibox li:not(.ibox-level) > div.ibox-info > ul {
+
  .imgrid-column {
−
margin-left: 0;
+
    flex: 100%;
−
padding-left: 0;
+
    max-width: 100%;
 +
  }
 
}
 
}

Latest revision as of 07:12, 5 May 2020

/* 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;
}

/* For Tone Change Tables */

table.table em {
    background-color: #FFFFAA;
    font-style: normal;
}

/* For Tone Pairs Table */

table#tone-pairs td.pair {
    text-align: center;
}

td.pair a {
    font-size: 150%;
    font-weight: 600;
    padding: 0.5em 0;
}

/* Make Embedded YouTube Videos Responsive */
/* CSS Code via: https://themeskills.com/make-embedded-youtube-videos-responsive-wordpress/ */

.YT-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
margin-bottom:1em;
height:0;
overflow:hidden;
}

.YT-container iframe, .YT-container p iframe, .YT-container object, .YT-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/* Make Image Grids Responsive with "imgrid" classes */
/* CSS Code via: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp */

.imgrid-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.imgrid-column {
  flex: 25%;
  max-width: 25%;
  padding: 0 0;
/*   padding: 0 4px; */
}

.imgrid-column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 99%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .imgrid-column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .imgrid-column {
    flex: 100%;
    max-width: 100%;
  }
}
Retrieved from "https://resources.allsetlearning.com/pronwiki/?title=MediaWiki:Common.css&oldid=4238"