Rss-Bridge/static/HtmlFormat.css
logmanoriginal 99d4571c6b core: Make RSS-Bridge more usable via mobile devices
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
2019-06-22 18:46:37 +02:00

115 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;
}
}