html { box-sizing: border-box; font-size: 16px; } *, *:before, *:after { box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: normal; } ol, ul { list-style: none; } img { max-width: 100%; height: auto; } /* 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: sans-serif; font-size: 14px; } a, a:link, a:visited { color: #2196F3; text-decoration: none; } a:hover { text-decoration: underline; } h1,h2 { margin-bottom: 10px; } h5 { margin: 20px; font-weight: bold; display: none; } p { margin-bottom: 10px; } /* Header */ header { margin-top: 40px; padding: 15px; color: #1182DB; text-align: center; } section.warning { background-color: #ffc600; color: #5f5f5f; } section.critical-warning { 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: 60%; text-align: center; margin: 0 auto 50px; } .searchbar input[type="text"] { width: 90%; font-size: 1.1em; text-align: center; margin: auto auto 10px; } .searchbar input[type="text"]::placeholder { text-align: center; } .searchbar > h3 { font-size: 200%; font-weight: bold; color: #1182DB; margin-bottom: 10px; } .container { width: 60%; margin: 30px auto; } /* Section */ section { margin-bottom: 10px; background-color: #FFFFFF; padding: 15px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.09); border-radius: 4px; } section > time, section > p.author { color: #888; font-size: 80%; padding: 10px; } section.footer { opacity: 0.5; text-align: center; } section.footer:hover { opacity: 1; } section > h2 { font-size: 200%; font-weight: bold; text-align: center; } section li { margin-left: 1em; } .bridge-card { text-align: center; } /* Buttons */ button.small { width: auto; line-height: 1.2em; } button:hover { background: #49afff; } .description { margin: 10px; } form { margin-bottom: 6px; } .parameters label::first-letter { text-transform: capitalize; } .parameters label::after { content: ' :'; } .info { cursor: pointer; 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) */ p.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 auto 6px; } .error strong { display: inline-block; width: 100px; } /* Hide all forms on the frontpage by default */ form { display: none; } select { padding: 5px 10px; margin-left: 8px; } /* 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; } /* html format */ h1.pagetitle { margin: 40px 0 20px; font-size: 300%; font-weight: bold; text-align: center; color: #2196F3; } h1.pagetitle > a { color: #2196F3; } .buttons { text-align: center; margin-bottom: 15px; } 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; } .alert { margin-bottom: 15px; color: white; font-weight: bold; background-color: rgb(33, 150, 243); padding: 15px; border-radius: 4px; } @media screen and (max-width: 767px) { .container { width: 100%; padding: 5px; } .searchbar { margin-bottom: 5px; } button { display: inline-block; width: 40%; padding: 5px auto; margin: 3px auto 0; } .info, .no-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%; } } /* Dark theme */ @media (prefers-color-scheme: dark){ * { scrollbar-color: #202324 #454a4d; } body { background-color: #202325; color: #e8e6e3; } a, a:link, a:visited { color: #0A6AB6; } /* Header */ select, input[type="text"], input[type="number"] { background-color: #181A1B; /* does not apply to placeholder text without !important */ color: white !important; border: 1px solid #393E40; } /* Section */ section { background-color: #181A1B; } /* Buttons */ button { background: #0A6AB6 none repeat scroll 0% 0%; } button:hover { background: #004daa; } @supports (display: grid){ .parameters input[type="number"] { color: #BAB4AB; } } /* Show more / less */ .showmore:hover, .showless:hover { color: #d8d3cb; } }