Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-08-27 13:24:26 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Visual enhancements

Browse Source 
Includes making the background better.
This commit is contained in:
Andrio Celos
2023-08-13 16:45:12 +10:00
parent 1acfa7937d
commit 91044db4c1
3 changed files with 59 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
TableturfBattleClient/tableturf.css
View File

@@ -42,7 +42,7 @@ dialog {
}
#gamePage {
background: black;
background: linear-gradient(to bottom, #3B3064 80%, #3B3B3D);
--player-primary-colour: var(--primary-colour-1);
--player-special-colour: var(--special-colour-1);
--player-special-accent-colour: var(--special-accent-colour-1);
@@ -257,9 +257,19 @@ dialog::backdrop {
.cardBack {
--colour: grey;
background: #000000C0;
display: flex;
justify-content: center;
align-items: center;
height: 14em;
}
.cardBack.waiting::before {
content: '';
width: 2em;
height: 2em;
background: url(assets/external/IconUp_00.webp) center/cover;
animation: 2s infinite linear loadingSpinner;
opacity: 0.333;
}
.card {
@@ -411,7 +421,7 @@ dialog::backdrop {
z-index: 1;
}
#gameBoard td.Empty { outline: 1px solid #80808080; outline-offset: -1px; }
#gameBoard td.Empty { background: #000000C0; outline: 1px solid #80808080; outline-offset: -1px; }
#gameBoard td.Wall { background: url('assets/Wall.png') center/cover, grey; }
#gameBoard td.Ink1 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-1); }
#gameBoard td.Ink2 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-2); }
@@ -618,6 +628,8 @@ dialog::backdrop {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
background: #00000080;
border-radius: 0 0.5em 0.5em 0;
text-align: center;
}
@@ -660,7 +672,7 @@ dialog::backdrop {
#showDeckContainer {
grid-column: 1 / span 3;
grid-row: 2 / -2;
background: black;
background: #000000C0;
z-index: 2;
}
#showDeck {
@@ -1013,18 +1025,27 @@ dialog::backdrop {
z-index: 1;
}
#turnNumberContainer {
#turnNumberContainer:not([hidden]) {
background: radial-gradient(circle, rgb(128, 128, 128) 0%, rgb(128, 128, 128) 70%, rgba(0, 0, 0, 0) 70%);
height: 5em;
width: 5em;
display: flex;
justify-content: center;
align-items: center;
}
#turnNumberContainer p {
text-align: center;
margin: 0;
font-size: smaller;
position: absolute;
margin-bottom: 4em;
}
#turnNumberLabel {
text-align: center;
font-size: 150%;
font-size: 200%;
margin-top: 0.333em;
text-shadow: #00000040 0.2rem 0.2rem 0;
}
#turnNumberLabel.nowOrNever {
color: red;
@@ -1088,13 +1109,22 @@ dialog::backdrop {
}
.points {
font-size: 200%;
font-size: 300%;
font-style: italic;
text-align: justify;
padding-right: 0.15em;
text-shadow: #00000040 0.05em 0.05em 0;
z-index: 1;
}
.pointsToContainer {
position: absolute;
bottom: 0;
bottom: -1.2rem;
right: 0;
font-size: 150%;
}
.pointsTo {
font-style: italic;
}
.pointsContainer[data-index="0"] { --colour: var(--primary-colour-1); }
@@ -1110,7 +1140,7 @@ dialog::backdrop {
right: 0;
bottom: 0;
opacity: 0.5;
background: radial-gradient(circle, var(--colour) 0%, var(--colour) 70%, rgba(0, 0, 0, 0) 70%);
background: radial-gradient(circle, color-mix(in srgb, var(--colour) 80%, black) 70%, rgba(0, 0, 0, 0) 70%);
}
.pointsContainer {
@@ -1119,8 +1149,19 @@ dialog::backdrop {
.pointsDelta {
position: absolute;
bottom: 0;
right: 1em;
top: -0.5em;
right: -0.5em;
font-size: 150%;
width: 2em;
height: 2em;
background: radial-gradient(circle, color-mix(in srgb, var(--colour) 90%, black) 70%, rgba(0, 0, 0, 0) 70%);
z-index: 1;
text-align: center;
color: white;
text-shadow: #00000080 0.1rem 0.1rem 0;
}
.pointsDelta.minus {
--colour: darkgrey;
}
/* Board section */
@@ -1129,8 +1170,9 @@ dialog::backdrop {
position: absolute;
left: 0;
top: 0;
right: 0;
right: -50vw;
bottom: 0;
padding-right: 50vw; /* Centre the dialog over the board but extend the backdrop all the way to the right of the page. */
background: #000000C0;
z-index: 1;
}