Rss-Bridge/static/style.css
LogMANOriginal bf9946d1fc
CSS adjustments to improve readability for bridge parameters (#763)
* Group common selectors
* Fix indentation using tabs
* Use same styles for number and text inputs
* Use grid layout for parameters

Introduces the grid layout for bridge parameters. All parameters are
arranged in a grid to improve readability. Read more on grid layouts
at

- https://www.w3schools.com/css/css_grid.asp
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Notice:

Grid layouts are not supported in very old browser versions:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

This is why @supports checks for browser support (not supported in IE)
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#Browser_compatibility

In case grid layout is not supported, the displayed form is usable
but not very pretty due to <br> being removed by this commit for
cosmetic reasons (breaks grid layout).

Unfortunately it doesn't seem possible to insert line breaks manually
via '::after { content: '\A' }' in cases where grid layout isn't
supported.

* Add padding to card parameters

Adds padding to parameters to improve readability. For bridges without
parameters (count($parameters) === 0), the parameter 'div' is no longer
created.

* Add colon ':' after label via CSS
* Capitalize first letter of label for readability
* Fix checkbox isn't aligned left

Sets the size of the checkbox to 20x20 px for good measure.

* Harmonize formatting
* Add new style to number and select boxes

References #797

* Add fallback solution for browsers without grid support
2018-09-15 16:39:50 +02:00

303 lines
5.1 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;
}
/* 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";
}
a, a:link, a:visited {
color: #2196F3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Header */
header {
margin-top: 40px;
text-align: center;
color: #1182DB;
}
header > h1 {
font-size: 500%;
font-weight: bold;
}
header > h2 {
margin-left: 1em;
font-size: 200%;
}
header > section.warning {
width: 40%;
background-color: #ffc600;
color: #5f5f5f;
}
header > section.critical-warning {
width: 40%;
background-color: #cf3e3e;
font-weight: bold;
color: white;
}
select,
input[type="text"],
input[type="number"] {
background-color: white;
color: #404552;
border: 1px solid #dedede;
margin-left: 8px;
margin-bottom: 10px;
padding: 5px 10px;
}
select:focus,
input[type="text"]:focus,
input[type="number"]:focus {
outline: none;
border-color: #888;
}
.searchbar {
width: 40%;
margin: 40px auto 100px;
}
.searchbar input[type="text"] {
width: 90%;
margin: auto;
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,
.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: 200%;
font-weight: bold;
color: #1182DB;
margin-bottom: 10px;
}
/* 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.footer .version {
font-size: 80%;
}
section > h2 {
font-size: 200%;
font-weight: bold;
}
/* Buttons */
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: calc(20% - 4px);
}
button.small {
width: auto;
line-height: 1.2em;
}
button:hover {
background: #49afff;
}
.description {
margin: 10px;
}
h5 {
margin: 20px;
font-weight: bold;
}
form {
margin-bottom: 6px;
}
.parameters label::first-letter {
text-transform: capitalize;
}
.parameters label::after {
content: ' :';
}
@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 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;
}