99d4571c6b
Adds styles for display sizes smaller than 768px where elements are currently hardly usable. Note that RSS-Bridge is not designed for mobile use, but some users may want to try things on their mobile phone before using it in real life applications. Resolves #796
116 lines
2.6 KiB
CSS
116 lines
2.6 KiB
CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
}
|
|
/* HTML5 display-role reset for older browsers */
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
|
display: block;
|
|
}
|
|
/* Let's go for the actual style */
|
|
body {
|
|
background-color: #f0f0f0;
|
|
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
|
}
|
|
a, a:link, a:visited {
|
|
color: #2196F3;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
/* Section */
|
|
section {
|
|
background-color: #FFFFFF;
|
|
width: 60%;
|
|
margin: 30px auto;
|
|
padding: 15px 15px;
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.09);
|
|
border-radius: 4px;
|
|
}
|
|
section > h2 {
|
|
font-size: 200%;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
h1.pagetitle {
|
|
margin: 40px 0 20px;
|
|
font-size: 300%;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #2196F3;
|
|
}
|
|
h1.pagetitle > a {
|
|
color: #2196F3;
|
|
}
|
|
a.backlink, a.backlink:link, a.backlink:visited, a.itemtitle, a.itemtitle:link, a.itemtitle:visited {
|
|
color: #2196F3;
|
|
}
|
|
.buttons {
|
|
text-align: center;
|
|
}
|
|
section > div.content, section > div.attachments {
|
|
padding: 10px;
|
|
}
|
|
section h1, section h2, section h3, section b, section strong {
|
|
font-weight: bold;
|
|
}
|
|
section i, section em {
|
|
font-style: italic;
|
|
}
|
|
section p:not(:last-child) {
|
|
margin-bottom: 1em;
|
|
}
|
|
section li {
|
|
margin-left: 1em;
|
|
}
|
|
section > div.attachments > li.enclosure {
|
|
list-style-type: circle;
|
|
list-style-position: inside;
|
|
}
|
|
section > time, section > p.author {
|
|
color: #888;
|
|
font-size: 80%;
|
|
padding: 10px;
|
|
}
|
|
button {
|
|
line-height: 1.9em;
|
|
color: #FFF;
|
|
font-weight: bold;
|
|
vertical-align: middle;
|
|
padding: 6px 12px;
|
|
margin: 12px auto 0px;
|
|
border-radius: 4px;
|
|
border: 1px solid transparent;
|
|
background: #2196F3 none repeat scroll 0% 0%;
|
|
cursor: pointer;
|
|
width: 200px;
|
|
}
|
|
button:hover {
|
|
background: #49afff;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
|
section {
|
|
width: 100%;
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
button {
|
|
display: inline-block;
|
|
width: 40%;
|
|
padding: 5px auto;
|
|
margin: 3px auto 0;
|
|
}
|
|
|
|
}
|