2021-11-28 15:53:47 +01:00
|
|
|
:root {
|
|
|
|
/* Color definitions for light mode */
|
2021-12-01 22:50:42 +01:00
|
|
|
--button-color: rgb(233, 144, 0);
|
|
|
|
--button-hover: rgb(255, 191, 89);
|
2021-11-28 23:59:24 +01:00
|
|
|
--button-disabled: rgb(128, 88, 24);
|
2021-11-28 15:53:47 +01:00
|
|
|
--button-text: rgb(0,0,0);
|
|
|
|
--standard-background: rgb(54, 54, 54);
|
|
|
|
--element-background: rgb(42, 42, 42);
|
|
|
|
--element-border: rgb(27, 27, 27);
|
|
|
|
--text-color: rgb(255,255,255);
|
2021-12-01 22:50:42 +01:00
|
|
|
--secondary-text-color: rgb(27, 27, 27);
|
|
|
|
--card-color: rgb(255,255,255);
|
|
|
|
--alert-color: rgb(255,0,0);
|
2021-12-07 09:10:28 +01:00
|
|
|
--game-type-color: rgb(100, 100, 100);
|
2021-11-28 15:53:47 +01:00
|
|
|
}
|
|
|
|
|
2021-11-27 11:59:13 +01:00
|
|
|
/* Style all input fields */
|
2021-11-28 15:53:47 +01:00
|
|
|
|
|
|
|
.standard-button {
|
|
|
|
padding: 10px;
|
|
|
|
background-color: var(--button-color);
|
|
|
|
color: #000;
|
|
|
|
border-style: hidden;
|
|
|
|
border-radius: 5px;
|
|
|
|
font-size: medium;
|
|
|
|
}
|
|
|
|
|
|
|
|
.standard-button:hover {
|
|
|
|
background-color: var(--button-hover);
|
|
|
|
}
|
|
|
|
|
2021-11-27 11:59:13 +01:00
|
|
|
input {
|
|
|
|
padding: 8px;
|
2021-11-28 15:53:47 +01:00
|
|
|
border: 1px solid var(--element-border);
|
2021-11-28 23:59:24 +01:00
|
|
|
border-radius: 5px;
|
2021-11-27 11:59:13 +01:00
|
|
|
box-sizing: border-box;
|
2021-11-28 15:53:47 +01:00
|
|
|
background-color: var(--standard-background);
|
|
|
|
}
|
|
|
|
|
2021-11-30 20:59:50 +01:00
|
|
|
#login-window input {
|
2021-11-28 15:53:47 +01:00
|
|
|
width: 100%;
|
2021-11-27 11:59:13 +01:00
|
|
|
margin-top: 6px;
|
|
|
|
margin-bottom: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
html * {
|
|
|
|
font-family:-apple-system, BlinkMacSystemFont, "SF Hello", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
|
2021-11-28 15:53:47 +01:00
|
|
|
color: var(--text-color);
|
2021-11-27 11:59:13 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
body, html {
|
|
|
|
min-height: 100%;
|
|
|
|
height: 100%;
|
2021-12-01 22:50:42 +01:00
|
|
|
width: 100%;
|
2021-11-28 15:53:47 +01:00
|
|
|
margin: 0px;
|
|
|
|
background-color: var(--standard-background);
|
2021-11-27 11:59:13 +01:00
|
|
|
}
|
|
|
|
|
2021-12-01 22:50:42 +01:00
|
|
|
body {
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
|
2021-11-30 20:59:50 +01:00
|
|
|
#login-window {
|
2021-11-28 15:53:47 +01:00
|
|
|
background-color: var(--standard-background);
|
2021-11-27 11:59:13 +01:00
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
display: table;
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
|
2021-11-30 20:59:50 +01:00
|
|
|
#login-window-vertical-center {
|
2021-11-27 11:59:13 +01:00
|
|
|
display: table-cell;
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
|
2021-11-30 20:59:50 +01:00
|
|
|
#login-window-inner {
|
2021-11-28 15:53:47 +01:00
|
|
|
background-color: var(--element-background);
|
2021-11-27 11:59:13 +01:00
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
width: 300px;
|
|
|
|
border-radius: 10px;
|
|
|
|
border-style: solid;
|
|
|
|
border-width: thin;
|
2021-11-28 15:53:47 +01:00
|
|
|
border-color: var(--element-border);
|
2021-11-27 11:59:13 +01:00
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
|
2021-12-21 14:53:34 +01:00
|
|
|
#sheephead-logo {
|
|
|
|
color: rgb(0, 255, 0);
|
|
|
|
font-family: monospace, monospace;
|
|
|
|
white-space: pre;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
2021-11-27 11:59:13 +01:00
|
|
|
.login-buttons {
|
|
|
|
width: 100%;
|
2021-11-28 15:53:47 +01:00
|
|
|
margin-top: 5px;
|
|
|
|
}
|
|
|
|
|
2021-11-30 20:59:50 +01:00
|
|
|
#login-error {
|
|
|
|
margin-top: 8px;
|
|
|
|
}
|
|
|
|
|
2021-11-28 15:53:47 +01:00
|
|
|
#top-bar {
|
|
|
|
height: 50px;
|
|
|
|
background-color: var(--element-background);
|
|
|
|
padding: 0px;
|
2021-12-18 12:29:08 +01:00
|
|
|
z-index: 5;
|
2021-12-01 22:50:42 +01:00
|
|
|
width: 100%;
|
|
|
|
position: absolute;
|
2021-11-28 15:53:47 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#player-info {
|
|
|
|
position: absolute;
|
|
|
|
right: 8px;
|
|
|
|
height: 50px;
|
2021-12-01 22:50:42 +01:00
|
|
|
width: 205px;
|
2021-11-28 15:53:47 +01:00
|
|
|
display: grid;
|
|
|
|
align-items: center;
|
2021-12-01 22:50:42 +01:00
|
|
|
grid-template-columns: 120px 80px;
|
2021-11-28 15:53:47 +01:00
|
|
|
column-gap: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#player-name {
|
|
|
|
text-align: right;
|
|
|
|
grid-column: 1;
|
2021-11-28 23:59:24 +01:00
|
|
|
padding-right: 5px;
|
2021-12-01 22:50:42 +01:00
|
|
|
width: 120px;
|
2021-11-28 15:53:47 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#logout-button {
|
|
|
|
width: 80px;
|
|
|
|
height: 34px;
|
|
|
|
padding: 0px;
|
|
|
|
grid-column: 2;
|
|
|
|
}
|
|
|
|
|
2021-11-29 11:06:20 +01:00
|
|
|
#table-list-bar {
|
2021-11-28 15:53:47 +01:00
|
|
|
position: absolute;
|
2021-11-30 11:56:11 +01:00
|
|
|
width: 460px; /* 540px */
|
2021-11-28 15:53:47 +01:00
|
|
|
height: 40px;
|
|
|
|
top: 5px;
|
|
|
|
left: 10px;
|
|
|
|
display: grid;
|
2021-11-30 11:56:11 +01:00
|
|
|
grid-template-columns: 200px 120px 120px; /* 200px 30px 50px 120px 120px */
|
|
|
|
column-gap: 10px;
|
2021-11-28 15:53:47 +01:00
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
justify-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
#table-name-field {
|
|
|
|
width: 100%;
|
2021-11-28 23:59:24 +01:00
|
|
|
font-size: medium;
|
2021-11-28 15:53:47 +01:00
|
|
|
grid-column: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
#table-public-checkbox {
|
2021-11-30 11:56:11 +01:00
|
|
|
display: none; /* Remove in future */
|
2021-11-28 15:53:47 +01:00
|
|
|
grid-column: 2;
|
|
|
|
margin-left: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#table-public-label {
|
2021-11-30 11:56:11 +01:00
|
|
|
display: none; /* Remove in future */
|
2021-11-28 15:53:47 +01:00
|
|
|
grid-column: 3;
|
|
|
|
}
|
|
|
|
|
|
|
|
#create-table-button {
|
|
|
|
width: 120px;
|
2021-11-30 11:56:11 +01:00
|
|
|
grid-column: 2; /* 4 in future */
|
2021-11-28 15:53:47 +01:00
|
|
|
padding: 0px;
|
|
|
|
height: 34px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#refresh-tables {
|
2021-11-30 11:56:11 +01:00
|
|
|
width: 120px;
|
|
|
|
grid-column: 3; /* 5 in future */
|
2021-11-28 15:53:47 +01:00
|
|
|
padding: 0px;
|
|
|
|
height: 34px;
|
2021-11-30 20:55:25 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#game-bar {
|
|
|
|
position: absolute;
|
2021-12-01 22:50:42 +01:00
|
|
|
width: 270px;
|
2021-11-30 20:55:25 +01:00
|
|
|
height: 40px;
|
|
|
|
top: 5px;
|
|
|
|
left: 10px;
|
|
|
|
display: none;
|
2021-12-01 22:50:42 +01:00
|
|
|
grid-template-columns: 120px 140px;
|
2021-11-30 20:55:25 +01:00
|
|
|
column-gap: 10px;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
justify-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
#leave-table {
|
|
|
|
width: 120px;
|
|
|
|
grid-column: 1;
|
|
|
|
padding: 0px;
|
|
|
|
height: 34px;
|
2021-11-28 15:53:47 +01:00
|
|
|
}
|
|
|
|
|
2021-12-21 14:53:34 +01:00
|
|
|
#table-name-label {
|
2021-12-01 22:50:42 +01:00
|
|
|
grid-column: 2;
|
|
|
|
width: 140px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#main {
|
|
|
|
height: 100%;
|
|
|
|
max-height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
overflow: scroll;
|
|
|
|
}
|
|
|
|
|
|
|
|
#main-spacer {
|
|
|
|
height: 50px;
|
|
|
|
position: relative;
|
|
|
|
top: 0px;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2021-11-28 15:53:47 +01:00
|
|
|
#table-list {
|
|
|
|
margin: 20px;
|
|
|
|
padding-right: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.table-row {
|
|
|
|
width: 100%;
|
|
|
|
height: 40px;
|
2021-11-27 11:59:13 +01:00
|
|
|
padding: 10px;
|
2021-11-28 15:53:47 +01:00
|
|
|
margin-top: 10px;
|
|
|
|
background-color: var(--element-background);
|
2021-11-27 11:59:13 +01:00
|
|
|
border-style: hidden;
|
|
|
|
border-radius: 5px;
|
|
|
|
font-size: medium;
|
2021-11-28 15:53:47 +01:00
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 100px auto;
|
|
|
|
grid-template-rows: auto auto;
|
|
|
|
column-gap: 10px;
|
2021-11-27 11:59:13 +01:00
|
|
|
}
|
|
|
|
|
2021-11-28 15:53:47 +01:00
|
|
|
.table-join-btn {
|
|
|
|
padding: 10px;
|
|
|
|
width: 100px;
|
|
|
|
background-color: var(--button-color);
|
|
|
|
color: var(--button-text);
|
|
|
|
border-style: hidden;
|
|
|
|
border-radius: 5px;
|
|
|
|
font-size: medium;
|
|
|
|
grid-column: 1;
|
|
|
|
grid-row: 1 / span 2;
|
|
|
|
}
|
|
|
|
|
2021-11-28 23:59:24 +01:00
|
|
|
.table-join-btn:disabled,
|
|
|
|
.table-join-btn[disabled] {
|
|
|
|
background-color: var(--button-disabled);
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
|
|
|
|
.table-join-btn:hover:enabled {
|
2021-11-28 15:53:47 +01:00
|
|
|
background-color: var(--button-hover);
|
|
|
|
}
|
|
|
|
|
|
|
|
.table-title {
|
|
|
|
grid-column: 2;
|
|
|
|
grid-row: 1;
|
|
|
|
font-size: medium;
|
|
|
|
}
|
|
|
|
|
|
|
|
.table-subtitle {
|
|
|
|
grid-column: 2;
|
|
|
|
grid-row: 2;
|
|
|
|
font-size: small;
|
|
|
|
}
|
2021-12-01 22:50:42 +01:00
|
|
|
|
2021-12-06 18:27:52 +01:00
|
|
|
#action-bar-centering {
|
|
|
|
margin-top: 10px;
|
|
|
|
text-align: center;
|
|
|
|
width: 100%;
|
|
|
|
height: 40px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#action-bar {
|
|
|
|
height: 40px;
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
2021-12-03 18:03:29 +01:00
|
|
|
.action-button {
|
|
|
|
height: 100%;
|
2021-12-06 18:27:52 +01:00
|
|
|
padding-left: 16px;
|
|
|
|
padding-right: 16px;
|
2021-12-01 22:50:42 +01:00
|
|
|
}
|
|
|
|
|
2021-12-07 09:10:28 +01:00
|
|
|
#table-players {
|
|
|
|
display: none;
|
2021-12-03 18:03:29 +01:00
|
|
|
margin-top: 10px;
|
2021-12-07 09:10:28 +01:00
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
2021-12-18 12:29:08 +01:00
|
|
|
width: 649px;
|
|
|
|
height: 389px;
|
|
|
|
grid-template-columns: 200px 71px 36px 35px 36px 71px 200px;
|
|
|
|
grid-template-rows: 101px 86px 15px 86px 101px;
|
2021-12-07 09:10:28 +01:00
|
|
|
column-gap: 0px;
|
|
|
|
row-gap: 0px;
|
|
|
|
align-items: center;
|
2021-12-01 22:50:42 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.table-card {
|
|
|
|
height: 187px;
|
|
|
|
border-radius: 17px;
|
|
|
|
background-color: var(--element-background);
|
|
|
|
}
|
|
|
|
|
2021-12-03 18:03:29 +01:00
|
|
|
#table-player-card-bottom {
|
2021-12-18 12:29:08 +01:00
|
|
|
grid-column: 3 / span 3;
|
2021-12-01 22:50:42 +01:00
|
|
|
grid-row: 4 / span 2;
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
|
2021-12-03 18:03:29 +01:00
|
|
|
#table-player-card-left {
|
2021-12-18 12:29:08 +01:00
|
|
|
grid-column: 2 / span 2;
|
2021-12-01 22:50:42 +01:00
|
|
|
grid-row: 2 / span 3;
|
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
|
2021-12-03 18:03:29 +01:00
|
|
|
#table-player-card-top {
|
2021-12-18 12:29:08 +01:00
|
|
|
grid-column: 3 / span 3;
|
2021-12-01 22:50:42 +01:00
|
|
|
grid-row: 1 / span 2;
|
|
|
|
z-index: 4;
|
|
|
|
}
|
|
|
|
|
2021-12-03 18:03:29 +01:00
|
|
|
#table-player-card-right {
|
2021-12-18 12:29:08 +01:00
|
|
|
grid-column: 5 / span 2;
|
2021-12-01 22:50:42 +01:00
|
|
|
grid-row: 2 / span 3;
|
|
|
|
z-index: 3;
|
|
|
|
}
|
|
|
|
|
2021-12-03 18:03:29 +01:00
|
|
|
#table-player-info-bottom {
|
2021-12-18 12:29:08 +01:00
|
|
|
grid-column: 1 / span 2;
|
2021-12-01 22:50:42 +01:00
|
|
|
grid-row: 5;
|
|
|
|
font-size: large;
|
|
|
|
text-align: right;
|
|
|
|
margin-right: 15px;
|
|
|
|
margin-top: 50px;
|
|
|
|
}
|
|
|
|
|
2021-12-03 18:03:29 +01:00
|
|
|
#table-player-info-left {
|
2021-12-18 12:29:08 +01:00
|
|
|
grid-column: 1;
|
|
|
|
grid-row: 2 / span 3;
|
2021-12-01 22:50:42 +01:00
|
|
|
font-size: large;
|
|
|
|
text-align: right;
|
|
|
|
margin-right: 15px;
|
|
|
|
}
|
|
|
|
|
2021-12-03 18:03:29 +01:00
|
|
|
#table-player-info-top {
|
2021-12-18 12:29:08 +01:00
|
|
|
grid-column: 1 / span 2;
|
2021-12-01 22:50:42 +01:00
|
|
|
grid-row: 1;
|
|
|
|
font-size: large;
|
|
|
|
text-align: right;
|
|
|
|
margin-right: 15px;
|
|
|
|
margin-bottom: 50px;
|
|
|
|
}
|
|
|
|
|
2021-12-03 18:03:29 +01:00
|
|
|
#table-player-info-right {
|
2021-12-18 12:29:08 +01:00
|
|
|
grid-column: 7;
|
|
|
|
grid-row: 2 / span 3;
|
2021-12-01 22:50:42 +01:00
|
|
|
font-size: large;
|
|
|
|
margin-left: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.player-connection-state {
|
|
|
|
font-size: x-small;
|
|
|
|
}
|
|
|
|
|
2021-12-07 09:10:28 +01:00
|
|
|
#available-games-list {
|
2021-12-18 12:29:08 +01:00
|
|
|
grid-column: 3 / span 3;
|
2021-12-07 09:10:28 +01:00
|
|
|
grid-row: 1 / span 5;
|
|
|
|
width: 100%;
|
2021-12-18 12:29:08 +01:00
|
|
|
z-index: 1;
|
2021-12-07 09:10:28 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.available-game {
|
2021-12-18 12:29:08 +01:00
|
|
|
margin: 5px;
|
|
|
|
padding: 5px;
|
2021-12-07 09:10:28 +01:00
|
|
|
background-color: var(--game-type-color);
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
2021-12-21 11:16:54 +01:00
|
|
|
#game-summary {
|
|
|
|
display: none;
|
|
|
|
width: 180px;
|
|
|
|
height: 130px;
|
|
|
|
text-align: center;
|
2021-12-21 16:07:08 +01:00
|
|
|
grid-column: 1 / span 7;
|
2021-12-21 11:16:54 +01:00
|
|
|
grid-row: 2 / span 3;
|
|
|
|
z-index: 6;
|
|
|
|
margin: auto;
|
|
|
|
padding: 10px;
|
|
|
|
background-color: var(--standard-background);
|
|
|
|
color: var(--text-color);
|
|
|
|
border: 2px solid var(--button-color);
|
|
|
|
border-radius: 5px;
|
|
|
|
font-size: medium;
|
|
|
|
}
|
|
|
|
|
2021-12-18 12:29:08 +01:00
|
|
|
#player-cards-center {
|
|
|
|
width: 100%;
|
|
|
|
margin-top: 10px;
|
|
|
|
}
|
|
|
|
|
2021-12-01 22:50:42 +01:00
|
|
|
#player-cards {
|
|
|
|
display: none;
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
width: 923px;
|
|
|
|
grid-template-columns: 111px 111px 111px 111px 111px 111px 111px 111px;
|
|
|
|
column-gap: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.player-card {
|
|
|
|
width: 111px;
|
|
|
|
height: 191px;
|
2021-12-21 16:07:08 +01:00
|
|
|
border: 2px solid var(--button-color);
|
2021-12-01 22:50:42 +01:00
|
|
|
background-color: var(--element-background);
|
|
|
|
border-radius: 17px;
|
|
|
|
transition-duration: 0.2s;
|
|
|
|
}
|
|
|
|
|
2021-12-18 12:29:08 +01:00
|
|
|
@media screen and (max-width: 925px) {
|
|
|
|
#player-cards {
|
|
|
|
width: 748px;
|
|
|
|
grid-template-columns: 91px 91px 91px 91px 91px 91px 91px 91px;
|
|
|
|
column-gap: 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 750px) {
|
|
|
|
#player-cards {
|
|
|
|
width: 601px;
|
|
|
|
grid-template-columns: 70px 70px 70px 70px 70px 70px 70px 70px;
|
|
|
|
column-gap: 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 605px) {
|
|
|
|
#player-cards {
|
|
|
|
width: 461px;
|
|
|
|
grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px;
|
|
|
|
column-gap: 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 465px) {
|
|
|
|
#player-cards {
|
|
|
|
width: 321px;
|
|
|
|
grid-template-columns: 30px 30px 30px 30px 30px 30px 30px 30px;
|
|
|
|
column-gap: 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 650px) {
|
|
|
|
#table-players {
|
|
|
|
width: 549px;
|
|
|
|
grid-template-columns: 150px 71px 36px 35px 36px 71px 150px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 550px) {
|
|
|
|
#table-players {
|
|
|
|
width: 514px;
|
|
|
|
grid-template-columns: 150px 54px 53px 0px 54px 53px 150px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 515px) {
|
|
|
|
#table-players {
|
|
|
|
width: 467px;
|
|
|
|
grid-template-columns: 150px 30px 53px 0px 54px 30px 150px;
|
|
|
|
}
|
|
|
|
#table-player-card-right {
|
|
|
|
grid-column: 3 / span 4;
|
|
|
|
margin-left: 30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 470px) {
|
|
|
|
#table-players {
|
|
|
|
width: 407px;
|
|
|
|
grid-template-columns: 120px 30px 53px 0px 54px 30px 120px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 410px) {
|
|
|
|
#table-players {
|
|
|
|
width: 367px;
|
|
|
|
grid-template-columns: 100px 30px 53px 0px 54px 30px 100px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 370px) {
|
|
|
|
#table-players {
|
|
|
|
width: 307px;
|
|
|
|
grid-template-columns: 70px 30px 53px 0px 54px 30px 70px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-height: 715px) {
|
|
|
|
#table-players {
|
|
|
|
grid-template-rows: 94px 93px 0px 94px 93px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-height: 700px) {
|
|
|
|
#player-cards-center {
|
|
|
|
max-height: 150px;
|
|
|
|
overflow: hidden;
|
|
|
|
bottom: 0px;
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-height: 650px) {
|
|
|
|
#player-cards-center {
|
|
|
|
max-height: 100px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-height: 600px) {
|
|
|
|
#player-cards-center {
|
|
|
|
max-height: 50px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-01 22:50:42 +01:00
|
|
|
.player-card:disabled,
|
|
|
|
.player-card[disabled] {
|
|
|
|
cursor: not-allowed;
|
2021-12-21 16:07:08 +01:00
|
|
|
border-color: var(--standard-background);
|
2021-12-01 22:50:42 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.player-card:hover:enabled {
|
|
|
|
border-color: var(--button-hover);
|
|
|
|
}
|
|
|
|
|
|
|
|
#player-card1 {
|
|
|
|
grid-column: 1;
|
2021-12-18 12:29:08 +01:00
|
|
|
z-index: 1;
|
2021-12-01 22:50:42 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#player-card2 {
|
|
|
|
grid-column: 2;
|
2021-12-18 12:29:08 +01:00
|
|
|
z-index: 2;
|
2021-12-01 22:50:42 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#player-card3 {
|
|
|
|
grid-column: 3;
|
2021-12-18 12:29:08 +01:00
|
|
|
z-index: 3;
|
2021-12-01 22:50:42 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#player-card4 {
|
|
|
|
grid-column: 4;
|
2021-12-18 12:29:08 +01:00
|
|
|
z-index: 4;
|
2021-12-01 22:50:42 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#player-card5 {
|
|
|
|
grid-column: 5;
|
2021-12-18 12:29:08 +01:00
|
|
|
z-index: 5;
|
2021-12-01 22:50:42 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#player-card6 {
|
|
|
|
grid-column: 6;
|
2021-12-18 12:29:08 +01:00
|
|
|
z-index: 6;
|
2021-12-01 22:50:42 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#player-card7 {
|
|
|
|
grid-column: 7;
|
2021-12-18 12:29:08 +01:00
|
|
|
z-index: 7;
|
2021-12-01 22:50:42 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#player-card8 {
|
|
|
|
grid-column: 8;
|
2021-12-18 12:29:08 +01:00
|
|
|
z-index: 8;
|
2021-12-01 22:50:42 +01:00
|
|
|
}
|