diff options
Diffstat (limited to 'static')
-rw-r--r-- | static/HtmlFormat.css | 126 | ||||
-rw-r--r-- | static/search.js | 45 | ||||
-rw-r--r-- | static/style.css | 256 |
3 files changed, 212 insertions, 215 deletions
diff --git a/static/HtmlFormat.css b/static/HtmlFormat.css index 195a9b0..e17e325 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'; - -} - -section { - + 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: 90%; + width: 60%; margin: 30px auto; - padding: 10px 15px; - - box-shadow: 0px 1px 2px rgba(0,0,0, 0.25); - -} - -section > h2 { - + padding: 15px 15px; + text-align: center; + 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 { - + 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/search.js b/static/search.js index 3ddd99b..daf3287 100644 --- a/static/search.js +++ b/static/search.js @@ -3,20 +3,53 @@ function search() { var searchTerm = document.getElementById('searchfield').value; var searchableElements = document.getElementsByTagName('section'); - var regexMatch = new RegExp(searchTerm, "i"); + var regexMatch = new RegExp(searchTerm, 'i'); + + // Attempt to create anchor from search term (will default to 'localhost' on failure) + var searchTermUri = document.createElement('a'); + searchTermUri.href = searchTerm; + + if(searchTermUri.hostname == 'localhost') { + searchTermUri = null; + } else { + + // Ignore "www." + if(searchTermUri.hostname.indexOf('www.') === 0) { + searchTermUri.hostname = searchTermUri.hostname.substr(4); + } + + } for(var i = 0; i < searchableElements.length; i++) { var textValue = searchableElements[i].getAttribute('data-ref'); - if(textValue != null) { + var anchors = searchableElements[i].getElementsByTagName('a'); + + if(anchors != null && anchors.length > 0) { + + var uriValue = anchors[0]; // First anchor is bridge URI + + // Ignore "www." + if(uriValue.hostname.indexOf('www.') === 0) { + uriValue.hostname = uriValue.hostname.substr(4); + } + + } + + if(textValue != null || uriValue != null) { - if(textValue.match(regexMatch) == null && searchableElements[i].style.display != "none") { + if(textValue.match(regexMatch) != null || + uriValue.hostname.match(regexMatch) || + searchTermUri != null && + uriValue.hostname != 'localhost' && ( + uriValue.href.match(regexMatch) != null || + uriValue.hostname == searchTermUri.hostname)) { - searchableElements[i].style.display = "none"; + searchableElements[i].style.display = 'block'; - } else if(textValue.match(regexMatch) != null) { + } else { - searchableElements[i].style.display = "block"; + searchableElements[i].style.display = 'none'; } diff --git a/static/style.css b/static/style.css index ac2f469..fa70f2d 100644 --- a/static/style.css +++ b/static/style.css @@ -1,310 +1,306 @@ 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; +} - display: block; +/* Adjust parameters for browsers that don't support the grid layout */ +.parameters label:before { + content: " "; + 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"; +} - background-color: #EEEEEE; - font-family: 'Noto Sans'; +a, a:link, a:visited { + color: #2196F3; + text-decoration: none; +} +a:hover { + text-decoration: underline; } -header { +/* Header */ - text-shadow:0 5px 6px rgba(150,150,150,0.69); +header { + margin-top: 40px; text-align: center; color: #1182DB; - } header > h1 { - - font-size: 300%; - + font-size: 500%; + font-weight: bold; } header > h2 { - margin-left: 1em; - font-size: 120%; + font-size: 200%; +} +header > section.warning { + width: 40%; + background-color: #ffc600; + color: #5f5f5f; } -header > p.status { +header > section.critical-warning { + width: 40%; + background-color: #cf3e3e; font-weight: bold; - margin: 1em; - color: red; + color: white; } -input[type="text"] { - +select, +input[type="text"], +input[type="number"] { 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; +} +select:focus, +input[type="text"]:focus, +input[type="number"]:focus { + outline: none; + border-color: #888; } .searchbar { - - width: 50%; - margin: auto; - + width: 40%; + margin: 40px auto 100px; } .searchbar input[type="text"] { - - width: 100%; + width: 90%; margin: auto; - font-size: 1.4em; + font-size: 1.1em; text-align: center; - + margin-bottom: 10px; } .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::-webkit-input-placeholder, +.searchbar input[type="text"]:focus::-moz-placeholder, +.searchbar input[type="text"]:focus:-moz-placeholder, .searchbar input[type="text"]:focus:-ms-input-placeholder { - opacity: 0; - } .searchbar > h3 { - - font-size: 150%; + font-size: 200%; font-weight: bold; color: #1182DB; - + margin-bottom: 10px; } +/* Section */ section { - background-color: #FFFFFF; - width: 80%; + width: 60%; margin: 30px auto; - padding: 10px 15px; + padding: 15px 15px; text-align: center; - - box-shadow: 0px 1px 2px rgba(0,0,0, 0.25); - + 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.footer .version { - font-size: 80%; - } section > h2 { - font-size: 200%; font-weight: bold; - -} - -a, a:link, a:visited { - - color: #2196F3; - } +/* 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 { - width: auto; line-height: 1.2em; +} +button:hover { + background: #49afff; } .description { - margin: 10px; - text-decoration: underline; - } h5 { - margin: 20px; font-weight: bold; - } form { - margin-bottom: 6px; +} +.parameters label::first-letter { + text-transform: capitalize; } -.maintainer { +.parameters label::after { + content: ' :'; +} - font-size: 60%; - text-align: right; +@supports (display: grid) { + + .parameters { + display: grid; + padding: 12px 0; + grid-template-columns: 40% max-content; + grid-column-gap: 10px; + grid-row-gap: 5px; + } + + .parameters label { + text-align: right; + } + + .parameters label::before { + content: none; + } + .parameters input[type="text"], + .parameters input[type="number"], + .parameters input[type="checkbox"], + .parameters select { + margin-left: 0; + } + + .parameters input[type="text"], + .parameters input[type="number"] { + width: auto; + color: #404552; + } + + .parameters input[type="checkbox"] { + width: 20px; + height: 20px; + } + +} /* @supports (display: grid) */ + +.maintainer { + color: #888888; + font-size: 70%; + text-align: right; } .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 { - display: none; +} +select { + padding: 5px 10px; + margin-left: 8px; } h5 { - display: none; - } +/* Show more / less */ .showmore-box { - display: none; - } .showmore, .showless { - color: #888888; cursor: pointer; - +} +.showmore:hover, .showless:hover { + color: #000; + cursor: pointer; } .showmore-box:checked ~ .showmore { - display: none; - } .showmore-box:not(:checked) ~ .showless { - display: none; - } - - .showmore-box:checked ~ form, .showmore-box:checked ~ h5 { - display: block; - } /* Additional styles for error pages */ - .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 { - margin-left: auto; margin-right: auto; - display: table; - } .advice > li { - text-align: left; - } |