553 lines
9.5 KiB
SCSS
553 lines
9.5 KiB
SCSS
@layer pairgoth {
|
|
/* general rules */
|
|
|
|
.steps .step:not(.active) {
|
|
cursor: pointer;
|
|
}
|
|
.tab-content {
|
|
display: none;
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.active-round-box {
|
|
padding: 0.2em 1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#overview {
|
|
position: absolute;
|
|
top: 0.2em;
|
|
right: 0.5em;
|
|
z-index: 2;
|
|
button {
|
|
line-height: 0.6em;
|
|
}
|
|
transform: scale(0.65);
|
|
}
|
|
|
|
#tournament-overview table {
|
|
table-layout: fixed;
|
|
text-align: center;
|
|
border-collapse: collapse;
|
|
th, td {
|
|
border: solid 1px gray;
|
|
}
|
|
th {
|
|
padding: 0 0.5em;
|
|
}
|
|
}
|
|
|
|
/* information section */
|
|
|
|
form {
|
|
input, select, .edit {
|
|
display: none;
|
|
}
|
|
&.edit {
|
|
input:not(.hidden), select:not(.hidden), .edit:not(.hidden) {
|
|
display: initial;
|
|
}
|
|
.info, #edit {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
div.field:not(.hidden) {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-between;
|
|
margin: 1px;
|
|
padding: 0.2em;
|
|
background-color: #eeeeee;
|
|
align-items: flex-start;
|
|
&.centered {
|
|
align-items: center;
|
|
}
|
|
&.right {
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
.inline.fields {
|
|
background-color: #eeeeee;
|
|
margin-left: -0.5em;
|
|
margin-right: -0.5em;
|
|
padding-left: 0.5em;
|
|
padding-right: 0.5em;
|
|
.centered.field > label {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
/* registration section */
|
|
|
|
#list-header {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
margin: 0 1em;
|
|
align-items: baseline;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
#players-list {
|
|
max-width: 95vw;
|
|
#players {
|
|
tr.filtered {
|
|
display: none;
|
|
}
|
|
tr.highlighted {
|
|
background-color: #D0FFD0;
|
|
}
|
|
.participation {
|
|
/* white-space: nowrap; */
|
|
.ui.label {
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
min-width: 2em;
|
|
min-height: 2em;
|
|
padding: .5em;
|
|
line-height: 1em;
|
|
text-align: center;
|
|
border-radius: 500rem;
|
|
}
|
|
}
|
|
tr:not(.final) .participation {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
#player {
|
|
&.create {
|
|
.edition {
|
|
display: none;
|
|
}
|
|
#unregister {
|
|
display: none;
|
|
}
|
|
}
|
|
&.edit {
|
|
.creation {
|
|
display: none;
|
|
}
|
|
}
|
|
.success-feedback {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 1em;
|
|
right: 1em;
|
|
opacity: 1;
|
|
transition: opacity 2s ease-in;
|
|
}
|
|
&.successful .success-feedback {
|
|
display: block;
|
|
&.done {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.active > * {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
#player {
|
|
&.edit {
|
|
#search-form, #search-result {
|
|
display: none;
|
|
}
|
|
}
|
|
&.create {
|
|
.popup-body {
|
|
padding-top: 0;
|
|
.needle {
|
|
padding-top: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#search-form {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
#search-header {
|
|
position: relative;
|
|
background-color: white;
|
|
}
|
|
#search-wrapper {
|
|
position: relative;
|
|
}
|
|
#search-result {
|
|
text-align: left;
|
|
position: absolute;
|
|
background-color: gray;
|
|
z-index: 2;
|
|
width:100%;
|
|
top: 100%;
|
|
padding: 1em;
|
|
overflow-y: auto;
|
|
&:empty, &.hidden {
|
|
display: none;
|
|
}
|
|
.result-line {
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: rgba(100, 200, 255, 0.44);
|
|
}
|
|
&.spotted {
|
|
background-color: rgba(100, 200, 255, 0.44);
|
|
}
|
|
&.highlighted, &.highlighted:hover, &.spotted:hover {
|
|
background-color: rgba(100,200,255,1);
|
|
}
|
|
}
|
|
}
|
|
|
|
#player.popup {
|
|
min-width: 65vw;
|
|
#final-reg {
|
|
.final {
|
|
color: green;
|
|
display: none;
|
|
}
|
|
&.final {
|
|
.preliminary {
|
|
display: none;
|
|
}
|
|
.final {
|
|
display: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
td.reg-status {
|
|
.final {
|
|
color: green;
|
|
display: none;
|
|
}
|
|
&.final {
|
|
.final {
|
|
display: initial;
|
|
}
|
|
.preliminary {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
#macmahon-groups {
|
|
.popup-content {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
}
|
|
|
|
/* teams section */
|
|
|
|
#teams-content {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: start;
|
|
align-items: center;
|
|
}
|
|
|
|
#teams-lists {
|
|
margin-top: 1em;
|
|
flex-grow: 2;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
gap: 1em;
|
|
align-items: start;
|
|
}
|
|
#teams-buttons {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: start;
|
|
align-items: stretch;
|
|
gap: 1em;
|
|
max-width: max(10em, 20vw);
|
|
}
|
|
#teams-right {
|
|
display: inline-flex;
|
|
flex-flow: row wrap;
|
|
gap: 1em;
|
|
flex-shrink: 1;
|
|
max-width: max(300px, 60vw);
|
|
justify-content: center;
|
|
}
|
|
|
|
#teams {
|
|
max-width: max(50vw, 20em);
|
|
}
|
|
|
|
#composition.multi-select .listitem {
|
|
cursor: default;
|
|
i.icon {
|
|
cursor: pointer;
|
|
@media (hover: hover) {
|
|
display: none;
|
|
}
|
|
}
|
|
&:hover {
|
|
i.icon {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* pairing section */
|
|
|
|
#pairing-content {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: start;
|
|
align-items: center;
|
|
}
|
|
|
|
#pairing-lists {
|
|
margin-top: 1em;
|
|
flex-grow: 2;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
gap: 1em;
|
|
align-items: start;
|
|
}
|
|
.multi-select {
|
|
position: relative;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
min-height: 30vh;
|
|
max-height: 60vh;
|
|
min-width: 20vw;
|
|
max-width: max(30vw, 15em);
|
|
border: solid 2px darkgray;
|
|
border-radius: 5px;
|
|
padding: 0 0.2em;
|
|
&:before {
|
|
position: sticky;
|
|
background-color: white;
|
|
width: 100%;
|
|
content: attr(title);
|
|
top: 0;
|
|
white-space: nowrap;
|
|
font-size: smaller;
|
|
font-weight: bold;
|
|
z-index: 2;
|
|
}
|
|
.listitem {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
gap: 1em;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
&:hover {
|
|
background-color: rgba(50, 50, 50, .2);
|
|
}
|
|
&.selected {
|
|
background-color: rgba(100,200,255,200);
|
|
cursor: grab;
|
|
}
|
|
&:not(.selected):nth-child(2n) {
|
|
background-color: rgba(0,0,50,.1)
|
|
}
|
|
}
|
|
}
|
|
#pairables, #teams {
|
|
margin-bottom: 1em;
|
|
}
|
|
#paired {
|
|
.listitem {
|
|
position: relative;
|
|
gap: 0;
|
|
.table, .handicap {
|
|
width: 3em;
|
|
}
|
|
.black, .white {
|
|
width: 45%;
|
|
}
|
|
.levels {
|
|
width: 6em;
|
|
}
|
|
}
|
|
&:empty + .pairing-post-actions {
|
|
display: none;
|
|
}
|
|
}
|
|
#print-pairables {
|
|
width: 100%;
|
|
display: none;
|
|
}
|
|
#print-pairings {
|
|
width: 100%;
|
|
display: none;
|
|
}
|
|
.pairing-buttons {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: start;
|
|
align-items: stretch;
|
|
gap: 1em;
|
|
max-width: max(10em, 20vw);
|
|
}
|
|
#unpairables, #previous_games, #composition {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
min-height: 10vh;
|
|
max-height: 30vh;
|
|
}
|
|
|
|
#pairing-right {
|
|
display: inline-flex;
|
|
flex-flow: row wrap;
|
|
gap: 1em;
|
|
flex-shrink: 1;
|
|
max-width: max(300px, 60vw);
|
|
justify-content: center;
|
|
}
|
|
|
|
#paired {
|
|
max-width: max(50vw, 20em);
|
|
}
|
|
|
|
.choose-round.button {
|
|
padding: 0.2em 0.8em;
|
|
}
|
|
|
|
.pairing-post-actions {
|
|
margin-top: 0.2em;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.bottom-pairing-actions {
|
|
margin-top: 0.2em;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
gap: 0.2em;
|
|
}
|
|
|
|
.tables-exclusion {
|
|
margin-top: 0.2em;
|
|
}
|
|
|
|
/* results section */
|
|
|
|
#results-filter {
|
|
margin-left: 2em;
|
|
}
|
|
|
|
#results-list {
|
|
text-align: center;
|
|
.player, .result {
|
|
background-color: unset;
|
|
color: black;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background: rgba(0,0,0,.05);
|
|
color: rgba(0,0,0,.95);
|
|
}
|
|
}
|
|
.player {
|
|
min-width: 12em;
|
|
&.winner {
|
|
color: darkred;
|
|
font-weight: bold;
|
|
}
|
|
&.looser {
|
|
color: blue;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
#results-table {
|
|
tr.filtered {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* standings section */
|
|
|
|
#standings-params {
|
|
display: inline-flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
background-color: #eeeeee;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
.criterium {
|
|
position: relative;
|
|
cursor: pointer;
|
|
select {
|
|
position: absolute;
|
|
top: 100%;
|
|
z-index: 2;
|
|
&.active {
|
|
display: initial;
|
|
}
|
|
}
|
|
select.active {
|
|
}
|
|
}
|
|
#params-submit {
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
#standings-container {
|
|
max-width: 95vw;
|
|
}
|
|
|
|
#standings-table thead tr th {
|
|
z-index: 10;
|
|
}
|
|
|
|
td.game-result {
|
|
position: relative;
|
|
.title-popup {
|
|
position: absolute;
|
|
top: 90%;
|
|
background: silver;
|
|
padding: 4px;
|
|
left: 10%;
|
|
white-space: nowrap;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
.ui.steps {
|
|
margin-top: 0.2em;
|
|
.step {
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 1600px) {
|
|
.ui.steps > .step:not(.active) {
|
|
padding-left: 1.2em;
|
|
padding-right: 0.8em;
|
|
&::before {
|
|
margin-right: 0;
|
|
}
|
|
.content > .title {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(max-width: 750px) {
|
|
#logo {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|