Schafkopf-Server/Public/style.css

588 lines
11 KiB
CSS
Raw Normal View History

: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);
--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-27 11:59:13 +01:00
/* Style all input fields */
.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;
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;
background-color: var(--standard-background);
}
2021-11-30 20:59:50 +01:00
#login-window input {
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;
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%;
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 {
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 {
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;
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%;
margin-top: 5px;
}
2021-11-30 20:59:50 +01:00
#login-error {
margin-top: 8px;
}
#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;
}
#player-info {
position: absolute;
right: 8px;
height: 50px;
2021-12-01 22:50:42 +01:00
width: 205px;
display: grid;
align-items: center;
2021-12-01 22:50:42 +01:00
grid-template-columns: 120px 80px;
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;
}
#logout-button {
width: 80px;
height: 34px;
padding: 0px;
grid-column: 2;
}
2021-11-29 11:06:20 +01:00
#table-list-bar {
position: absolute;
width: 460px; /* 540px */
height: 40px;
top: 5px;
left: 10px;
display: grid;
grid-template-columns: 200px 120px 120px; /* 200px 30px 50px 120px 120px */
column-gap: 10px;
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;
grid-column: 1;
}
#table-public-checkbox {
display: none; /* Remove in future */
grid-column: 2;
margin-left: 16px;
}
#table-public-label {
display: none; /* Remove in future */
grid-column: 3;
}
#create-table-button {
width: 120px;
grid-column: 2; /* 4 in future */
padding: 0px;
height: 34px;
}
#refresh-tables {
width: 120px;
grid-column: 3; /* 5 in future */
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-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%;
}
#table-list {
margin: 20px;
padding-right: 20px;
}
.table-row {
width: 100%;
height: 40px;
2021-11-27 11:59:13 +01:00
padding: 10px;
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;
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: auto auto;
column-gap: 10px;
2021-11-27 11:59:13 +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 {
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;
grid-column: 2 / span 5;
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;
border: 2px solid var(--standard-background);
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;
}
.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
}