761 lines
15 KiB
SCSS
761 lines
15 KiB
SCSS
@import "/fonts/hornbill.css";
|
|
@import "/lib/fomantic-ui-2.9.2/semantic.min.css" layer(semantic);
|
|
|
|
@layer pairgoth {
|
|
|
|
/* general styles */
|
|
body {
|
|
font-size: clamp(14px, 1rem + 1vw, 24px);
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
&.horz {
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
}
|
|
&.vert {
|
|
flex-flow: column nowrap;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
font-family: Hornbill, serif;
|
|
font-weight: bolder;
|
|
font-style: normal;
|
|
}
|
|
|
|
.centered {
|
|
text-align: center;
|
|
}
|
|
|
|
.note {
|
|
padding-left: 0.5em;
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
.nobreak {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.darkred {
|
|
color: darkred;
|
|
}
|
|
|
|
.warning {
|
|
color: darkred;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
.strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* header, center, footer */
|
|
|
|
#header {
|
|
height: 3em;
|
|
width: 100%;
|
|
position: relative;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
#logo {
|
|
height: 100%;
|
|
img {
|
|
display: inline-block;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
#header-right {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
gap: 0.5em;
|
|
padding-right: 0.5em;
|
|
}
|
|
}
|
|
|
|
#center {
|
|
position: relative;
|
|
flex: 1;
|
|
overflow: auto;
|
|
#inner {
|
|
/* max-width: clamp(800px, 80vw, 100vw); */
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
/* align-items: center; */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
> .section {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
#footer {
|
|
flex: 0;
|
|
height: 2em;
|
|
margin: 0 0.5em;
|
|
font-size: 0.8em;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.section {
|
|
text-align: center;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
/* modal and dimmer */
|
|
|
|
#dimmer {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: black;
|
|
opacity: 0;
|
|
transition: opacity 300ms;
|
|
z-index: 50;
|
|
pointer-events: none;
|
|
}
|
|
|
|
body.dimmed #dimmer {
|
|
display: block;
|
|
opacity: 0.85;
|
|
pointer-events: all;
|
|
}
|
|
.ui.modal {
|
|
display: block;
|
|
opacity: 0;
|
|
transition: opacity 300ms;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ui.modal .header {
|
|
font-size: 1em;
|
|
align-items: baseline;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.active.ui.modal {
|
|
font-size: 1em;
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
/* buttons */
|
|
|
|
.button {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.button.floating {
|
|
box-shadow: 0px 8px 8px -5px rgba(0,0,0,35%);
|
|
transition: all 200ms;
|
|
&.white {
|
|
border: solid 1px black;
|
|
background-color: white;
|
|
}
|
|
&:hover {
|
|
box-shadow: 0px 10px 10px -5px rgba(0,0,0,35%);
|
|
transform: scale(1.05);
|
|
}
|
|
&:active {
|
|
transition: all 200ms;
|
|
box-shadow: none;
|
|
transform: translate(0px, 5px);
|
|
}
|
|
}
|
|
|
|
/* languages */
|
|
|
|
#lang {
|
|
position: relative;
|
|
cursor: pointer;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
#lang-list {
|
|
position: fixed;
|
|
display: none;
|
|
top:3em;
|
|
right: 1em;
|
|
flex-flow: column nowrap;
|
|
padding: 0.5em;
|
|
gap: 0.5em;
|
|
background-color: #dddddd;
|
|
align-items: flex-start;
|
|
z-index: 60;
|
|
&.shown {
|
|
display: flex;
|
|
}
|
|
.lang {
|
|
cursor: pointer;
|
|
}
|
|
a {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
i {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* UI fixes */
|
|
|
|
.ui.form, .ui.segment, .ui.form .field > label { font-size: 1em; }
|
|
.ui.form .fields { margin-bottom: 0; }
|
|
span > input[type="radio"] { vertical-align: text-top; }
|
|
span > input[type="text"] { vertical-align: baseline; width: initial; }
|
|
span > input.date { vertical-align: baseline; width: 8em; }
|
|
.ui.table>tbody>tr>td, .ui.table>tr>td {
|
|
padding: 0.2em 0.2em;
|
|
}
|
|
select.ui.dropdown {
|
|
height: unset;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.step, .step .title { font-size: 1em; }
|
|
.step:before { font-size: 1em; }
|
|
.step.description { font-size: 0.8em; }
|
|
.step:first-child { padding-left: 1em; }
|
|
.step:last-child { padding-right: 1em; }
|
|
.step .description { display: none; }
|
|
|
|
label input[type="checkbox"] {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.ui.form .inline.fields select, .ui.form label select {
|
|
width: initial;
|
|
}
|
|
|
|
.ui.form .centered.inline.fields {
|
|
justify-content: center;
|
|
}
|
|
|
|
.ui.accordion .content {
|
|
display: block;
|
|
max-height: 0;
|
|
overflow-y: hidden;
|
|
padding: 0 1em 0 2em;
|
|
//transition: all 1s linear;
|
|
&.active {
|
|
padding: 0.5em 1em 0.5em 2em;
|
|
max-height: 150vh;
|
|
}
|
|
}
|
|
|
|
.ui.form input[type=text], .ui.form input[type="number"], .ui.form select {
|
|
padding: 0.1em 0.2em;
|
|
}
|
|
.ui.form input[type="number"], input.duration {
|
|
text-align: center;
|
|
}
|
|
|
|
.ui.form .field :invalid {
|
|
color: #9f3a38;
|
|
background: #fff6f6;
|
|
background-image: initial;
|
|
background-position-x: initial;
|
|
background-position-y: initial;
|
|
background-size: initial;
|
|
background-repeat-x: initial;
|
|
background-repeat-y: initial;
|
|
background-attachment: initial;
|
|
background-origin: initial;
|
|
background-clip: initial;
|
|
}
|
|
|
|
.ui.form label input[type="checkbox"]:not(.inline) {
|
|
margin-left: 1em;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.ui.striped.table > tbody > tr:nth-child(2n), .ui.striped.table > tr:nth-child(2n) {
|
|
background-color: inherit;
|
|
//background-color: rgba(0,0,50,.1)
|
|
}
|
|
|
|
.ui.striped.table > tbody > tr:nth-child(2n of :not(.filtered)), .ui.striped.table > tr:nth-child(2n of :not(.filtered)) {
|
|
background-color: rgba(0, 0, 50, 0.1);
|
|
}
|
|
|
|
.form-actions {
|
|
position: sticky;
|
|
bottom: 1em;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
&.right {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
padding: 0.2em 0.1em 0.2em 1em;
|
|
vertical-align: baseline;
|
|
width: 3.5em;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.roundbox {
|
|
border: solid 2px darkgray;
|
|
border-radius: 10px;
|
|
margin: 0.5em;
|
|
padding: 0.5em;
|
|
background-color: #EEEEEE;
|
|
}
|
|
|
|
#backdrop {
|
|
display: block;
|
|
background-color: rgba(0,0,0,0.2);
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 999;
|
|
transition: opacity 500s ease-out;
|
|
pointer-events: none;
|
|
&.active {
|
|
pointer-events: initial;
|
|
cursor: wait;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#backdrop.active {
|
|
}
|
|
|
|
#feedback {
|
|
position: absolute;
|
|
top: 1em;
|
|
left: 50%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#success, #error {
|
|
position: relative;
|
|
left: -50%;
|
|
border-radius: 10px;
|
|
padding: 0.5em 1em;
|
|
z-index: 100;
|
|
}
|
|
|
|
#success {
|
|
background: lightgreen;
|
|
border: solid 2px green;
|
|
color: green;
|
|
}
|
|
|
|
#error {
|
|
background: lightcoral;
|
|
border: solid 2px red;
|
|
color: red;
|
|
&::after {
|
|
content: 'x';
|
|
position: absolute;
|
|
top: 0.1em;
|
|
right: 0.1em;
|
|
cursor: pointer;
|
|
line-height: 0.4em;
|
|
}
|
|
}
|
|
|
|
body.initial {
|
|
.popup-body {
|
|
transition: initial;
|
|
}
|
|
}
|
|
.popup {
|
|
position: fixed;
|
|
top: 10vh;
|
|
left: 50%;
|
|
transform: translate(-50%, 0px);
|
|
max-width: max(90vw, 800px);
|
|
max-height: 80vh;
|
|
margin: auto;
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
&.wide {
|
|
left: 0;
|
|
right: 0;
|
|
transform: initial;
|
|
max-width: max(90vw, 1200px);
|
|
width: 90vw;
|
|
}
|
|
div.close {
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 30px;
|
|
top: -10px;
|
|
right: -10px;
|
|
cursor: pointer;
|
|
.icon {
|
|
background-color: white;
|
|
box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 34%);
|
|
}
|
|
}
|
|
.popup-body {
|
|
max-height: 80vh;
|
|
max-width: 80vw;
|
|
transform: rotate3d(1, 0, 0, 90deg);
|
|
transition: transform 300ms ease-out;
|
|
background-color: white;
|
|
padding: 1em;
|
|
border-radius: 5px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
.popup-header {
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
margin-bottom: 1em;
|
|
}
|
|
.popup-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: start;
|
|
text-align: justify;
|
|
}
|
|
.popup-footer {
|
|
margin-top: 1em;
|
|
position: relative;
|
|
text-align: justify;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-around;
|
|
gap: 2em;
|
|
align-items: center;
|
|
}
|
|
}
|
|
&.shown {
|
|
pointer-events: initial;
|
|
transition: transform 300ms ease-out; // cubic-bezier(0.500, 0.250, 0.300, 1.650);
|
|
display: block;
|
|
.popup-body {
|
|
transform: rotate3d(1, 0, 0, 0deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.clickable {
|
|
pointer-events: all;
|
|
cursor: pointer;
|
|
}
|
|
|
|
thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
#landing {
|
|
text-align: justify;
|
|
}
|
|
|
|
a.disabled {
|
|
color: darkgray;
|
|
}
|
|
|
|
.toggle {
|
|
padding-top: 0.2em;
|
|
display: inline-flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
input {
|
|
display: none !important;
|
|
}
|
|
label {
|
|
display: inline-block;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
color: gray;
|
|
}
|
|
.checkbox {
|
|
width: 50px;
|
|
height: 26px;
|
|
border-radius: 18px;
|
|
background-color: #dadada;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
cursor: pointer;
|
|
.circle {
|
|
background-color: #6B5E8A;
|
|
transform: translateX(0px);
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
transition: 300ms;
|
|
}
|
|
}
|
|
input:checked + .checkbox {
|
|
background-color: rgb(218, 154, 80);
|
|
.circle {
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
input:checked + .checkbox + label {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
#logout {
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media screen {
|
|
#players-list {
|
|
font-size: smaller;
|
|
}
|
|
.multi-select .listitem {
|
|
font-size: smaller;
|
|
}
|
|
#results-list {
|
|
font-size: smaller;
|
|
}
|
|
#standings-container {
|
|
font-size: smaller;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
|
|
body {
|
|
width: unset;
|
|
height: unset;
|
|
font-size: 0.65em;
|
|
overflow: visible;
|
|
}
|
|
|
|
#center #inner > .section {
|
|
margin: 0 0.5em;
|
|
}
|
|
|
|
#players-list {
|
|
max-width: 98vw;
|
|
}
|
|
|
|
.roundbox {
|
|
border: none;
|
|
}
|
|
|
|
#title {
|
|
position: relative;
|
|
font-size: 1rem !important;
|
|
margin-top: 0.1em !important;
|
|
}
|
|
|
|
/* TODO - plenty of those elements could just use the .noprint class */
|
|
#header, #logo, #lang, .steps, #filter-box, #reglist-mode, #footer, #unpairables, #pairing-buttons, button, #standings-params, #logout, .pairing-stats, .pairing-post-actions, .toggle, #overview, .tables-exclusion, .button, .noprint {
|
|
display: none !important;
|
|
}
|
|
|
|
#center, #paired {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
#paired {
|
|
display: none !important;
|
|
}
|
|
|
|
body {
|
|
&.nogame {
|
|
#pairables {
|
|
max-height: unset !important;
|
|
max-width: unset !important;
|
|
font-size: 1rem !important;
|
|
line-height: 1.1rem !important;
|
|
min-width: 60vw;
|
|
|
|
&::before {
|
|
top: 0;
|
|
}
|
|
}
|
|
#print-pairings {
|
|
display: none !important;
|
|
}
|
|
|
|
}
|
|
|
|
&:not(.nogame) {
|
|
#print-pairings {
|
|
display: table;
|
|
.left {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
#pairables {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
#pairing-right {
|
|
max-width: unset !important;
|
|
}
|
|
|
|
.page {
|
|
width: 96vw;
|
|
height: 96vh;
|
|
page-break-after: always;
|
|
|
|
.page-item {
|
|
font-size: 1.4rem;
|
|
line-height: 1.5rem;
|
|
height: 24vh;
|
|
border-bottom: 2px dotted gray;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-evenly;
|
|
|
|
.title {
|
|
margin-top: 1vh;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.details {
|
|
margin: 1vh 1em;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
line-height: 1.1rem;
|
|
}
|
|
|
|
.instructions {
|
|
text-align: center;
|
|
font-style: italic;
|
|
}
|
|
|
|
.players {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
gap: 1em;
|
|
|
|
.equal {
|
|
padding: 1em;
|
|
border: solid 1px gray;
|
|
}
|
|
|
|
.player {
|
|
padding: 0.2em 1em;
|
|
border: solid 1px gray;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.signatures {
|
|
height: 8vh;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
|
|
.signature {
|
|
font-style: italic;
|
|
text-align: left;
|
|
flex: 1;
|
|
&:not(:first-child) {
|
|
padding-left: 6em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.player {
|
|
color: black !important;
|
|
}
|
|
|
|
#participation-stats {
|
|
display: none;
|
|
}
|
|
|
|
/* should final/preliminary column be printed? */
|
|
/* #players-list tr > :first-child { */
|
|
/* display: none; */
|
|
/* } */
|
|
|
|
#players-list #players .participation .ui.label {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1rem !important;
|
|
min-width: unset !important;
|
|
min-height: unset !important;
|
|
padding: 0 !important;
|
|
&.red {
|
|
color: rgba(0,0,0,0);
|
|
text-decoration: solid line-through black;
|
|
}
|
|
&.green {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
table {
|
|
border-top: none;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
tr td, tr th {
|
|
page-break-inside:avoid;
|
|
height: 2em;
|
|
}
|
|
thead {
|
|
display:table-header-group;
|
|
th {
|
|
border-top: 1px solid rgba(34, 36, 38, .1);
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
tfoot { display:table-footer-group; }
|
|
}
|
|
#results-table td.looser {
|
|
font-weight: normal;
|
|
}
|
|
#print-pairings table {
|
|
font-size: 1.2rem;
|
|
}
|
|
#pairing-round, #results-round, #standings-round {
|
|
font-size: 1.1rem;
|
|
}
|
|
#standings-table {
|
|
font-size: 0.70rem;
|
|
}
|
|
.title-popup {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
}
|