Difference between revisions of "MediaWiki:Common.css"
| (77 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| − | /* | + | /* 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 { | |
| − | color: # | + | 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 ol { | + | .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; | max-width: 22em; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
background-color: #fdfdfd; | background-color: #fdfdfd; | ||
| + | font-size: 120%; | ||
margin: 0.5em 0 1.2em 2em; | margin: 0.5em 0 1.2em 2em; | ||
| − | padding: 1em; | + | padding: 1em 2.5em; |
} | } | ||
| − | . | + | div.points-big ol li, div.points-big ul li { |
| − | + | line-height: 1.8em; | |
} | } | ||
| − | /* | + | /* Accents Table */ |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | table.accents { | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
width: 100%; | width: 100%; | ||
overflow: auto; | overflow: auto; | ||
| + | margin-bottom: 1.5em; | ||
} | } | ||
| − | + | ||
| − | + | table.accents tr { | |
| − | + | padding: 1.3em 0; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | ||
| − | border | + | 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; | text-align: center; | ||
| + | font-weight: bold; | ||
| + | background-color: #F5A9A9; | ||
} | } | ||
| − | + | /* For Tone Change Tables */ | |
| − | + | ||
| − | + | table.table em { | |
| − | font- | + | 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 { | |
| − | padding: 0; | + | 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%; | |
| + | } | ||
} | } | ||
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%;
}
}
