From d07deb093044614d68361f018054f36ec7839b6e Mon Sep 17 00:00:00 2001 From: Marcin C <misc@melangue.com> Date: Tue, 21 Aug 2018 17:22:46 +0200 Subject: [PATCH] css: Modern look for RSS-Bridge (#781) --- static/HtmlFormat.css | 122 ++++++---------- static/style.css | 313 +++++++++++++++--------------------------- 2 files changed, 152 insertions(+), 283 deletions(-) diff --git a/static/HtmlFormat.css b/static/HtmlFormat.css index 195a9b0d..e17e3255 100644 --- a/static/HtmlFormat.css +++ b/static/HtmlFormat.css @@ -1,119 +1,87 @@ 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%; - vertical-align: baseline; - + 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; - + article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } - /* Let's go for the actual style */ - -body { - - background-color: #EEEEEE; - font-family: 'Noto Sans'; - + 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"; } - -section { - + 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: 90%; + width: 60%; margin: 30px auto; - padding: 10px 15px; - - box-shadow: 0px 1px 2px rgba(0,0,0, 0.25); - + padding: 15px 15px; + text-align: center; + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.09); + border-radius: 4px; } - -section > h2 { - + section > h2 { font-size: 200%; font-weight: bold; text-align: center; - } - -h1.pagetitle { - + h1.pagetitle { + margin: 40px 0 20px; font-size: 300%; font-weight: bold; - text-align: center; color: #2196F3; - } - -h1.pagetitle > a { + h1.pagetitle > a { color: #2196F3; } - -a.backlink, a.backlink:link, a.backlink:visited, a.itemtitle, a.itemtitle:link, a.itemtitle:visited { - + a.backlink, a.backlink:link, a.backlink:visited, a.itemtitle, a.itemtitle:link, a.itemtitle:visited { color: #2196F3; - } - -.buttons { - + .buttons { text-align: center; - } - -section > div.content, section > div.categories, -section > div.content, section > div.attachments { - + section > div.content, section > div.attachments { padding: 10px; - } - -section > div.categories > li.category, -section > div.attachments > li.enclosure { - + section > div.attachments > li.enclosure { list-style-type: circle; list-style-position: inside; - } - -section > time, section > p.author { - + section > time, section > p.author { color: #888; font-size: 80%; padding: 10px; - } - -button.backbutton, button.rss-feed { - - line-height: 1em; + button { + line-height: 1.9em; color: #FFF; font-weight: bold; vertical-align: middle; padding: 6px 12px; margin: 12px auto 0px; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); - border-radius: 2px; + border-radius: 4px; border: 1px solid transparent; - width: 200px; background: #2196F3 none repeat scroll 0% 0%; cursor: pointer; - - margin: 10px; - - -} - -img { - - max-width: 100%; - + width: 200px; } + button:hover { + background: #49afff; +} \ No newline at end of file diff --git a/static/style.css b/static/style.css index ac2f4690..5354ffb9 100644 --- a/static/style.css +++ b/static/style.css @@ -1,310 +1,211 @@ 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; - + 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; - + article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } - /* Let's go for the actual style */ - -body { - - background-color: #EEEEEE; - font-family: 'Noto Sans'; - + 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"; } -header { +a, a:link, a:visited { + color: #2196F3; + text-decoration: none; +} - text-shadow:0 5px 6px rgba(150,150,150,0.69); +a:hover { + text-decoration: underline; +} + +/* Header */ + header { + margin-top: 40px; text-align: center; color: #1182DB; - } - -header > h1 { - - font-size: 300%; - + header > h1 { + font-size: 500%; + font-weight: bold; } - -header > h2 { - + header > h2 { margin-left: 1em; - font-size: 120%; - + font-size: 200%; } - -header > p.status { + header > p.status { font-weight: bold; margin: 1em; color: red; } -input[type="text"] { - +/* Input boxes */ + input[type="text"] { background-color: white; color: #404552; - border: 0px; - border-bottom: 2px solid #2196F3; - font-size: 1.1em; + border: 1px solid #dedede; margin-left: 8px; - padding-left: 4px; - + margin-bottom: 10px; + padding: 5px 10px; } - -.searchbar { - - width: 50%; +input[type="text"]:focus { + outline: none; + border-color: #888; +} + .searchbar { + width: 40%; + margin: 40px auto 100px; +} + .searchbar input[type="text"] { + width: 90%; margin: auto; - -} - -.searchbar input[type="text"] { - - width: 100%; - margin: auto; - font-size: 1.4em; + font-size: 1.1em; text-align: center; - + margin-bottom: 10px; } - -.searchbar input[type="text"]::placeholder { - + .searchbar input[type="text"]::placeholder { text-align: center; - } + .searchbar input[type="text"]:focus::-webkit-input-placeholder { opacity: 0; } + .searchbar input[type="text"]:focus::-moz-placeholder { opacity: 0; } + .searchbar input[type="text"]:focus:-moz-placeholder { opacity: 0; } + .searchbar input[type="text"]:focus:-ms-input-placeholder { opacity: 0; } -.searchbar input[type="text"]:focus::-webkit-input-placeholder { - - opacity: 0; - -} - -.searchbar input[type="text"]:focus::-moz-placeholder { - - opacity: 0; - -} - -.searchbar input[type="text"]:focus:-moz-placeholder { - - opacity: 0; - -} - -.searchbar input[type="text"]:focus:-ms-input-placeholder { - - opacity: 0; - -} - -.searchbar > h3 { - - font-size: 150%; - font-weight: bold; - color: #1182DB; - -} - -section { - - background-color: #FFFFFF; - width: 80%; - margin: 30px auto; - padding: 10px 15px; - text-align: center; - - box-shadow: 0px 1px 2px rgba(0,0,0, 0.25); - -} - - -section.footer { - - opacity: 0.5; - -} - -section.footer:hover { - - opacity: 1; - -} - -section.footer .version { - - font-size: 80%; - -} - -section > h2 { - + .searchbar > h3 { font-size: 200%; font-weight: bold; - + color: #1182DB; + margin-bottom: 10px; } -a, a:link, a:visited { - - color: #2196F3; - +/* Section */ + section { + background-color: #FFFFFF; + width: 60%; + margin: 30px auto; + padding: 15px 15px; + text-align: center; + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.09); + border-radius: 4px; +} + section.footer { + opacity: 0.5; +} + section.footer:hover { + opacity: 1; +} + section > h2 { + font-size: 200%; + font-weight: bold; } -button { +/* Buttons */ + button { line-height: 1.9em; color: #FFF; font-weight: bold; vertical-align: middle; padding: 6px 12px; margin: 12px auto 0px; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); - border-radius: 2px; + border-radius: 4px; border: 1px solid transparent; - min-width: 140px; background: #2196F3 none repeat scroll 0% 0%; cursor: pointer; - width: calc(20% - 4px); - } - -button.small { - + button.small { width: auto; line-height: 1.2em; - } + button:hover { + background: #49afff; + } -.description { - + .description { margin: 10px; - text-decoration: underline; - } - -h5 { - + h5 { margin: 20px; font-weight: bold; - } - -form { - + form { margin-bottom: 6px; - } - -.maintainer { - - font-size: 60%; + .maintainer { + color: #888888; + font-size: 70%; text-align: right; - } - -.secure-warning { - + .secure-warning { background-color: #ffc600; color: #5f5f5f; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); border-radius: 2px; border: 1px solid transparent; - width: 80%; margin: auto; margin-bottom: 6px; - } - -form { - + form { display: none; - } -h5 { +select { + padding: 5px 10px; + margin-left: 8px; +} + h5 { display: none; - } -.showmore-box { - +/* Show more / less */ + .showmore-box { display: none; - } - -.showmore, .showless { - + .showmore, .showless { color: #888888; cursor: pointer; - } - -.showmore-box:checked ~ .showmore { - +.showmore:hover, .showless:hover { + color: #000; + cursor: pointer; +} + .showmore-box:checked ~ .showmore { display: none; - } - -.showmore-box:not(:checked) ~ .showless { - + .showmore-box:not(:checked) ~ .showless { display: none; - } - - - -.showmore-box:checked ~ form, .showmore-box:checked ~ h5 { - + .showmore-box:checked ~ form, .showmore-box:checked ~ h5 { display: block; - } /* Additional styles for error pages */ - -.exception-message { - + .exception-message { background-color: #c00000; color: #FFFFFF; - font-weight: bold; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); border-radius: 2px; border: 1px solid transparent; - width: 80%; margin: auto; margin-bottom: 6px; - } - -.advice { - + .advice { margin-left: auto; margin-right: auto; - display: table; - } - -.advice > li { - + .advice > li { text-align: left; - -} +} \ No newline at end of file