Add theme mobile css.

This commit is contained in:
Kenshin 2019-12-28 12:02:13 +08:00
parent fd08d8adf7
commit fdb1403400

View File

@ -0,0 +1,181 @@
/**
* Mobile media
*/
@media (pointer: coarse) {
sr-read {
margin: 20px 5%!important;
min-width: initial!important;
max-width: 90%!important;
}
sr-rd-title {
margin-top: 0;
font-size: 2.7rem;
}
sr-rd-desc,
sr-rd-content sr-blockquote {
margin: 10 0!important;
padding: 0 0 0 10px !important;
width: 90%;
font-size: 1.8rem;
font-style: normal;
line-height: 1.7;
text-align: justify;
}
sr-rd-content {
font-size: 1.75rem;
font-weight: 300;
}
sr-rd-content figure {
margin: 0;
padding: 0;
text-align: center;
}
sr-rd-content a, sr-rd-content a:link {
font-size: inherit;
}
sr-rd-content li code, sr-rd-content p code {
font-size: inherit;
}
sr-rd-footer {
margin-top: 20px;
}
sr-blockquote, sr-blockquote * {
margin: 5px !important;
padding: 5px !important;
}
sr-rd-title, sr-rd-content h1, sr-rd-content h2, sr-rd-content h3, sr-rd-content h4, sr-rd-content h5, sr-rd-content h6 {
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
color: #000;
font-weight: 100;
line-height: 1.35;
}
sr-rd-content h1, sr-rd-content h2, sr-rd-content h3, sr-rd-content h4, sr-rd-content h5, sr-rd-content h6,
sr-rd-content-h1, sr-rd-content-h2, sr-rd-content-h3, sr-rd-content-h4, sr-rd-content-h5, sr-rd-content-h6 {
margin-top: 1.2em;
margin-bottom: 0.6em;
line-height: 1.35;
}
sr-rd-content h1, sr-rd-content-h1 {
font-size: 1.8em;
}
sr-rd-content h2, sr-rd-content-h2 {
font-size: 1.6em;
}
sr-rd-content h3, sr-rd-content-h3 {
font-size: 1.4em;
}
sr-rd-content h4, sr-rd-content-h4 {
font-size: 1.2em;
}
sr-rd-content h5, sr-rd-content h6, sr-rd-content-h5, sr-rd-content-h6 {
font-size: 1.2em;
}
sr-rd-content ul, sr-rd-content-ul {
margin-left: 1.3em!important;
list-style: disc;
}
sr-rd-content ol, sr-rd-content-ol {
list-style: decimal;
margin-left: 1.9em!important;
}
sr-rd-content li ul, sr-rd-content li ol, sr-rd-content-ul ul, sr-rd-content-ul ol, sr-rd-content-ol ul, sr-rd-content-ol ol {
margin-bottom: 0.8em;
margin-left: 2em!important;;
}
sr-rd-content img {
margin: 0;
padding: 0;
border: 0;
max-width: 100%!important;
height: auto;
box-shadow: 0 20px 20px -10px rgba(0,0,0,0.1);
}
sr-rd-mult {
min-width: initial;
background-color: #fff;
box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
border-radius: 8px;
}
sr-rd-mult sr-rd-mult-avatar div {
margin: 0;
}
sr-rd-mult sr-rd-mult-avatar .sr-rd-content-center-small {
margin: 7px 0!important;
}
sr-rd-mult sr-rd-mult-avatar span {
display: block;
}
sr-rd-mult sr-rd-mult-content {
padding-left: 0;
}
/**
* iPad pro 12 and below
*/
@media only screen and (max-device-width: 1024px) {
html, .simpread-theme-root {
font-size: 80%!important;
}
sr-rd-mult sr-rd-mult-avatar img {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
}
}
/**
* iPhone XS Max and below
*/
@media only screen and (max-device-width: 414px) {
html, .simpread-theme-root {
font-size: 70%!important;
}
sr-rd-mult sr-rd-mult-avatar img {
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
}
}
/**
* iPhone SE and below
*/
@media only screen and (max-device-width: 320px) {
html, .simpread-theme-root {
font-size: 90%!important;
}
sr-rd-content p {
margin-bottom: .5em;
}
}
}