jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Added drop-shadow to active Tile

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-02-19 12:02:22 -08:00
parent f1ea873a29
commit 8cb3efc70f
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/Board.css
View File

@ -16,12 +16,18 @@
} }
.Tile { .Tile {
z-index: 5; /* Below Road and Corner */
position: absolute; position: absolute;
background-position-y: 0px; background-position-y: 0px;
background-size: cover; background-size: cover;
transform: translate(-50%, -50%) rotate(-30deg); transform: translate(-50%, -50%) rotate(-30deg);
} }
.Tile.Active {
z-index: 10; /* Above non-Active Tile, below Road and Corner */
filter: drop-shadow(8px 8px 12px black);
}
.Border { .Border {
position: absolute; position: absolute;
transform-origin: 0 0; transform-origin: 0 0;
@ -29,6 +35,7 @@
} }
.Pip { .Pip {
z-index: 50; /* Above Tile (5,10), Road (12), Corner (20) */
position: absolute; position: absolute;
background-size: 600% auto; /* pip-numbers is a 6x6 grid of pip images */ background-size: 600% auto; /* pip-numbers is a 6x6 grid of pip images */
width: 2em; width: 2em;
@ -53,7 +60,7 @@
.Corner { .Corner {
filter: drop-shadow(2.5px 2.5px 1.5px rgba(0, 0, 0, 0.75)); filter: drop-shadow(2.5px 2.5px 1.5px rgba(0, 0, 0, 0.75));
z-index: 10; z-index: 20; /* Above Tile, below Road */
position: absolute; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
@ -62,7 +69,6 @@
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 5;
pointer-events: none; pointer-events: none;
} }
@ -93,7 +99,7 @@
transform-origin: 50% 0; transform-origin: 50% 0;
width: 0.5em; width: 0.5em;
height: 2.5em; height: 2.5em;
z-index: 0; z-index: 11; /* Above Tile, below Corner */
pointer-events: none; pointer-events: none;
} }