Select Git revision
splay_tests.txt
-
Martin Mareš authoredMartin Mareš authored
mo.css 5.74 KiB
body {
display: flex;
flex-direction: column;
background-color: white;
color: black;
margin: 0;
min-height: 100vh;
}
.flavor-test {
background-color: sandybrown;
}
.flavor-devel {
background-color: violet;
}
header {
display: flex;
flex-wrap: nowrap;
align-items: start;
margin-top: 15px;
margin-bottom: 15px;
}
header #header-text {
flex: 1 1 auto;
font-size: 50px;
}
header #logo {
flex: 0 0 auto;
margin-left: 15px;
width: 100px;
}
header #logo img {
width: 100%;
}
header a {
display: block;
line-height: 1.1em;
font-size: 0.8em;
font-weight: normal;
}
header a.main-title {
line-height: 1.2em;
font-size: 1em;
}
header a, header a:hover {text-decoration: none; color: #000;}
header small {
display: block;
font-size: 0.4em; color: #888;
padding-left: 1em;
}
@media (max-width: 991px) {
header #header-text {font-size: 45px}
header #logo {width: 90px}
}
@media (max-width: 767px) {
header #header-text {font-size: 40px}
header #logo {width: 80px}
}
@media (max-width: 577px) {
header #header-text {font-size: 36px}
header #logo {width: 72px}
}
nav {
position: sticky !important;
top: 0;
z-index: 1020;
}
footer {
margin-top: auto;
margin-bottom: 11px;
}
.error {
color: red;
font-weight: bold;
}
.okay {
color: green;
font-weight: bold;
}
.hint {
color: #737373;
}
.joiner + .joiner::before {
content: ", ";
}
span.unknown {
font-weight: bold;
color: red;
}
table.table-auto {
width: auto;
}
table.table thead, table.table tfoot {
background-color: #ddd;
}
td ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
table tr.state-disqualified, table tr.state-disqualified a:not(.btn) {
color: darkred;
}
table tr.state-absent, table tr.state-absent a:not(.btn) {
color: #888;
}
table tr.state-refused, table tr.state-refused a:not(.btn) {
color: #888;
}
.form-group.required .control-label:after {
content:"*";
color:red;
}
.form-frame {
padding: 10px;
border: 1px #ddd solid;
border-radius: 4px 4px;
margin-bottom: 22px;
}
select.no-scroll::-webkit-scrollbar {
display: none;
}
.checked_toggle input.toggle:checked ~ .checked_hide {
display: none;
}
.checked_toggle input.toggle:not(:checked) ~ .checked_show {
display: none;
}
/* Users */
.user-test {
color: green;
}
.user-inactive {
color: red;
}
/* Tabs - source: https://codepen.io/MPDoctor/pen/mpJdYe */
.tabbed {
margin: 15px 0px;
}
.tabbed [type="radio"] {
/* hiding the inputs */
display: none;
}
.tabs {
display: flex;
align-items: stretch;
list-style: none;
padding: 0;
margin-bottom: 0px;
margin-right: 3px;
border-bottom: 1px solid #ddd;
}
.tab > label {
display: block;
margin-right: 2px;
margin-bottom: -1px;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 4px 4px 0px 0px;
background: #eee;
color: #666;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
.tab:hover label {
background: #ddd;
color: #333;
}
.tab-content {
display: none;
margin: 0px;
margin-top: -1px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 0 4px 4px 4px;
border-top: 0px;
}
/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
border-bottom-color: #fff;
background: #fff;
color: #222;
}
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) {
display: block;
}
/* Icons */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.ttf?azc5ov') format('truetype'),
url('fonts/icomoon.woff?azc5ov') format('woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
.icon {
/* Use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better font rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.pdf-icon:hover, .pdf-icon:focus {
text-decoration: none;
border: 1px solid #337ab7;
}
/* Collapsible */
.collapsible {
position: relative;
}
.collapsible input[type="checkbox"].toggle {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.collapsible label.toggle {
cursor: pointer;
margin-left: 15px;
}
.collapsible label.toggle::before {
position: absolute;
content: "";
width: 0;
height: 0;
left: 0px;
border-left: 8px solid black;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
transition: 0.5s ease;
}
.collapsible input[type="checkbox"].toggle:checked ~ label.toggle::before {
transform: rotate(90deg);
}
.collapsible .collapsible-inner {
max-height: 0;
overflow-y: hidden;
transition: 0.5s ease;
}
.collapsible input[type="checkbox"].toggle:checked ~ .collapsible-inner {
max-height: 100vh;
}
div.message {
padding: 5px 10px;
margin-bottom: 5px;
border-radius: 5px;
border: solid 1px #f8d99b;
color:#46381f;
background-color:#fff8d5;
}
div.message.new {
background-color: #ffdede;
border: solid 1px #ff5e5e;
}
div.message .msg-title {
font-weight: bold;
}
div.message .msg-date {
float: right;
font-style: italic;
color: #777;
}