6bc83310b9
The current solution for titles on input boxes is not obvious to the user as support varies between bridges. This commit adds an button to all input boxes with titles in order to make it clear to the user that additional information is available.
385 lines
6.2 KiB
CSS
385 lines
6.2 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 > div.logo {
|
|
background-image: url(logo_600px.png);
|
|
width: 599px;
|
|
height: 177px;
|
|
margin: auto;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
input:focus::-webkit-input-placeholder { opacity: 0; }
|
|
input:focus::-moz-placeholder { opacity: 0; }
|
|
input:focus::placeholder { opacity: 0; }
|
|
input:focus:-moz-placeholder { opacity: 0; }
|
|
input:focus:-ms-input-placeholder { opacity: 0; }
|
|
|
|
.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 > 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: ' :';
|
|
}
|
|
|
|
.info {
|
|
cursor: help;
|
|
opacity: 0.5;
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
color: #fff;
|
|
background-image: radial-gradient(#49afff, #1182DB);
|
|
-webkit-border-radius: 16px;
|
|
-moz-border-radius: 16px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.info:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
@supports (display: grid) {
|
|
|
|
.parameters {
|
|
display: grid;
|
|
padding: 12px 0;
|
|
grid-template-columns: 40% max-content 24px;
|
|
grid-column-gap: 10px;
|
|
grid-row-gap: 5px;
|
|
}
|
|
|
|
.parameters label {
|
|
text-align: right;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
body {
|
|
font-size: 75%;
|
|
}
|
|
|
|
header > div.logo {
|
|
background-image: url(logo_300px.png);
|
|
width: 300px;
|
|
height: 89px;
|
|
}
|
|
|
|
header > section.warning {
|
|
width: 90%;
|
|
}
|
|
|
|
header > section.critical-warning {
|
|
width: 90%;
|
|
}
|
|
|
|
.searchbar {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
section {
|
|
width: 90%;
|
|
margin: 10px auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
button {
|
|
display: inline-block;
|
|
width: 40%;
|
|
padding: 5px auto;
|
|
margin: 3px auto 0;
|
|
}
|
|
|
|
.info {
|
|
display: none;
|
|
}
|
|
|
|
@supports (display: grid) {
|
|
|
|
.parameters {
|
|
grid-template-columns: auto auto;
|
|
grid-column-gap: 5px;
|
|
}
|
|
|
|
.parameters label {
|
|
line-height: 2em;
|
|
word-break: break-word;
|
|
}
|
|
|
|
} /* @supports (display: grid) */
|
|
|
|
.secure-warning {
|
|
width: 100%;
|
|
}
|
|
|
|
} |