Difference between revisions of "MediaWiki:Common.css"
(33 intermediate revisions by 2 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 */ | /* Resources dropdown fix for mobile */ | ||
@media (max-width: 770px) { | @media (max-width: 770px) { | ||
Line 32: | Line 45: | ||
background-color: #fdfdfd; | background-color: #fdfdfd; | ||
font-size: 120%; | 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; | line-height: 1.8em; | ||
− | |||
− | |||
} | } | ||
Line 69: | Line 85: | ||
} | } | ||
− | /* | + | /* 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; | |
− | |||
− | |||
− | padding: | ||
} | } | ||
− | + | ||
− | + | /* 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%; | |
− | width: | + | 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%; | |
− | width: | + | 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%;
}
}