mirror of
https://github.com/Kenshin/simpread.git
synced 2026-01-25 14:28:34 +00:00
Add theme mobile css.
This commit is contained in:
parent
fd08d8adf7
commit
fdb1403400
181
src/assets/css/theme_mobile.css
Normal file
181
src/assets/css/theme_mobile.css
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user