Schafkopf-Server/Public/style.css

239 lines
4.4 KiB
CSS
Raw Normal View History

:root {
/* Color definitions for light mode */
--button-color: rgb(255, 172, 39);
--button-hover: rgb(255, 185, 72);
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-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%;
margin: 0px;
background-color: var(--standard-background);
2021-11-27 11:59:13 +01:00
}
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;
}
.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;
}
#player-info {
position: absolute;
right: 8px;
height: 50px;
display: grid;
align-items: center;
grid-template-columns: auto auto;
column-gap: 5px;
}
#player-name {
text-align: right;
grid-column: 1;
2021-11-28 23:59:24 +01:00
padding-right: 5px;
}
#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;
width: 120px;
height: 40px;
top: 5px;
left: 10px;
display: none;
grid-template-columns: 1200px;
column-gap: 10px;
align-items: center;
justify-content: center;
justify-items: center;
}
#leave-table {
width: 120px;
grid-column: 1;
padding: 0px;
height: 34px;
}
#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;
}