summaryrefslogtreecommitdiff
path: root/play.css
diff options
context:
space:
mode:
Diffstat (limited to 'play.css')
-rw-r--r--play.css85
1 files changed, 74 insertions, 11 deletions
diff --git a/play.css b/play.css
index 0836d17..2d421d3 100644
--- a/play.css
+++ b/play.css
@@ -136,12 +136,47 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
background-color: #fff8;
}
+.space.institutional.action {
+ border: 4px solid hsl(78, 64%, 85%);
+ background-color: hsl(78, 64%, 85%, 0.5);
+}
+
+.space.public_opinion.action {
+ border: 4px solid hsl(34, 80%, 85%);
+ background-color: hsl(34, 80%, 85%, 0.5);
+}
+
+.space.forts.action {
+ border: 4px solid hsl(175, 32%, 85%);
+ background-color: hsl(175, 32%, 85%, 0.5);
+}
+
+.space.paris.action {
+ border: 4px solid hsl(275, 40%, 85%);
+ background-color: hsl(275, 40%, 85%, 0.5);
+}
+
+.space.pivotal.action {
+ border: none;
+ border-radius: 50%;
+ background-color: transparent;
+}
+
+.space.pivotal.action.institutional { background-image: url(images/pivotal_institutional.svg) }
+.space.pivotal.action.public_opinion { background-image: url(images/pivotal_public_opinion.svg) }
+.space.pivotal.action.forts { background-image: url(images/pivotal_forts.svg) }
+.space.pivotal.action.paris { background-image: url(images/pivotal_paris.svg) }
+
.space.selected {
border: 4px dashed yellow;
}
+.space.pivotal.selected {
+ border: none;
+ background-image: url(images/pivotal_selected.svg);
+}
+
.piece {
- pointer-events: none;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
@@ -151,6 +186,10 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
transition-timing-function: ease;
}
+.piece.cube {
+ pointer-events: none;
+}
+
.piece.action {
pointer-events: auto;
filter:
@@ -160,7 +199,7 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
drop-shadow(2px 0 0 white)
}
-.piece.selected {
+.piece.red.action {
filter:
drop-shadow(0 -2px 0 yellow)
drop-shadow(0 2px 0 yellow)
@@ -168,6 +207,30 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
drop-shadow(2px 0 0 yellow)
}
+.piece.blue.action {
+ filter:
+ drop-shadow(0 -2px 0 cyan)
+ drop-shadow(0 2px 0 cyan)
+ drop-shadow(-2px 0 0 cyan)
+ drop-shadow(2px 0 0 cyan)
+}
+
+.piece.red.selected {
+ filter:
+ drop-shadow(0 -2px 0 gold)
+ drop-shadow(0 2px 0 gold)
+ drop-shadow(-2px 0 0 gold)
+ drop-shadow(2px 0 0 gold)
+}
+
+.piece.blue.selected {
+ filter:
+ drop-shadow(0 -2px 0 mediumturquoise)
+ drop-shadow(0 2px 0 mediumturquoise)
+ drop-shadow(-2px 0 0 mediumturquoise)
+ drop-shadow(2px 0 0 mediumturquoise)
+}
+
.card.action {
box-shadow: 0 0 0 3px white;
}
@@ -181,15 +244,15 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
.piece.cylinder { width: 50px; height: 50px; }
.piece.pawn { width: 35px; height: 60px; }
-.piece.cube.red { background-image:url(pieces/red_cube.svg) }
-.piece.cube.blue { background-image:url(pieces/blue_cube.svg) }
-.piece.disc.red { background-image:url(pieces/red_disc.svg) }
-.piece.disc.blue { background-image:url(pieces/blue_disc.svg) }
-.piece.cylinder.red { background-image:url(pieces/red_cylinder.svg) }
-.piece.cylinder.blue { background-image:url(pieces/blue_cylinder.svg) }
-.piece.cylinder.orange { background-image:url(pieces/orange_cylinder.svg) }
-.piece.cylinder.purple { background-image:url(pieces/purple_cylinder.svg) }
-.piece.pawn { background-image:url(pieces/pawn.svg) }
+.piece.cube.red { background-image:url(images/red_cube.svg) }
+.piece.cube.blue { background-image:url(images/blue_cube.svg) }
+.piece.disc.red { background-image:url(images/red_disc.svg) }
+.piece.disc.blue { background-image:url(images/blue_disc.svg) }
+.piece.cylinder.red { background-image:url(images/red_cylinder.svg) }
+.piece.cylinder.blue { background-image:url(images/blue_cylinder.svg) }
+.piece.cylinder.orange { background-image:url(images/orange_cylinder.svg) }
+.piece.cylinder.purple { background-image:url(images/purple_cylinder.svg) }
+.piece.pawn { background-image:url(images/pawn.svg) }
#round_marker { top: 965px; }
#round_marker.round1 { left: 623px; }