Skip to content
Snippets Groups Projects
Select Git revision
  • b453a88e5707310cc8e8b01479ebb43172082d24
  • devel default
  • master
  • fo
  • jirka/typing
  • fo-base
  • mj/submit-images
  • jk/issue-96
  • jk/issue-196
  • honza/add-contestant
  • honza/mr7
  • honza/mrf
  • honza/mrd
  • honza/mra
  • honza/mr6
  • honza/submit-images
  • honza/kolo-vs-soutez
  • jh-stress-test-wip
  • shorten-schools
19 results

mo.css

Blame
  • 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;
    }