summaryrefslogtreecommitdiff
path: root/play.css
diff options
context:
space:
mode:
Diffstat (limited to 'play.css')
-rw-r--r--play.css214
1 files changed, 135 insertions, 79 deletions
diff --git a/play.css b/play.css
index 95fe951..76fc72e 100644
--- a/play.css
+++ b/play.css
@@ -11,6 +11,7 @@
#prompt {
font-family: "Suit Symbols", var(--font-widget);
font-variant-numeric: tabular-nums;
+ white-space: wrap;
}
body {
@@ -39,13 +40,12 @@ body {
#political_display {
position: relative;
- margin: 0 auto;
width: 877px;
height: 620px;
background-size: cover;
background-image: url(Maria.Political.Display.075.jpg);
background-color: #ece1a9;
- box-shadow: 2px 2px 4px #0006;
+ Xbox-shadow: 2px 2px 4px #0006;
border: 1px solid #0008;
}
@@ -77,34 +77,29 @@ svg .main_road {
--color-light-bavaria: hsl(36, 70%, 80%);
--color-light-prussia: hsl(210, 80%, 75%);
--color-light-saxony: hsl(140, 50%, 70%);
- --color-light-pragmatic: hsl(0, 0%, 75%);
+ --color-light-pragmatic: hsl(264, 10%, 75%);
--color-light-austria: hsl(0, 0%, 97%);
--color-light-political: hsl(50, 73%, 78%);
+ --color-light-discard: hsl(52, 37%, 80%);
--color-medium-france: hsl(0, 35%, 70%);
--color-medium-bavaria: hsl(36, 65%, 70%);
--color-medium-prussia: hsl(210, 30%, 60%);
--color-medium-saxony: hsl(140, 20%, 55%);
- --color-medium-pragmatic: hsl(0, 0%, 65%);
+ --color-medium-pragmatic: hsl(264, 10%, 65%);
--color-medium-austria: hsl(0, 0%, 90%);
--color-medium-political: hsl(50, 35%, 60%);
-
- --color-dark-france: hsl(358, 85%, 52%);
- --color-dark-bavaria: hsl(36, 65%, 52%);
- --color-dark-prussia: hsl(198, 100%, 24%);
- --color-dark-saxony: hsl(139, 72%, 28%);
- --color-dark-pragmatic: hsl(0, 0%, 87%);
- --color-dark-austria: hsl(0, 0%, 97%);
+ --color-medium-discard: hsl(52, 25%, 70%);
--color-role-louis: hsl(0, 70%, 80%);
--color-role-frederick: hsl(210, 80%, 75%);
--color-role-maria: hsl(0, 0%, 97%);
- --color-clubs: #007c49;
- --color-diamonds: #c2263e;
- --color-hearts: #ed1c24;
- --color-spades: #274085;
- --color-reserve: #0094c9;
+ --color-clubs: #0079a1;
+ --color-diamonds: #9d403f;
+ --color-hearts: #ed1c23;
+ --color-spades: #00507c;
+ --color-reserve: #59594c;
}
/* PANELS */
@@ -130,8 +125,7 @@ svg .main_road {
justify-content: start;
flex-wrap: wrap;
padding: 18px;
- gap: 18px;
- min-height: 256px;
+ min-height: calc(257px + 4px);
}
#hand_france_header { background-color: var(--color-light-france) }
@@ -151,6 +145,8 @@ svg .main_road {
#political_header { background-color: var(--color-light-political) }
#political_panel { background-color: var(--color-medium-political) }
+#discard_pile_header { background-color: var(--color-light-discard); }
+#discard_pile_panel { background-color: var(--color-medium-discard); }
/* LOG */
@@ -195,6 +191,8 @@ svg .main_road {
#log span.suit { font-size: 11px; }
+span.value { padding: 0 1px }
+
span.suit.reserve { padding: 0 1px; }
span.suit.spades { color: var(--color-spades) }
@@ -412,6 +410,19 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
.number.n7 { background-position: -84px 0px; }
.number.n8 { background-position: -98px 0px; }
+/* CARD COUNTING AIDS */
+
+@media (hover: hover) {
+ #shift_button {
+ display: none;
+ }
+}
+
+body.shift span.value.deck_1 { background-color: #9513 }
+body.shift span.value.deck_2 { background-color: #04f2 }
+body.shift span.value.deck_3 { background-color: #0f03 }
+body.shift span.value.deck_4 { background-color: #f002 }
+
/* CARDS */
.card {
@@ -444,9 +455,26 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
.card.polcard { cursor: zoom-in }
.card.polcard.zoom { cursor: zoom-out }
-.draw-break { margin-left: 145px; }
-.card.tc { margin-right: -145px; }
-.panel_body { padding-right: calc(18px + 145px); }
+.draw-break { margin-left: 167px; }
+.card.tc { margin-right: calc(-167px + 40px); }
+.card.tc.reverse { margin-right: calc(-167px + 20px); }
+.card.tc.pile { margin-right: calc(-167px + 6px); }
+.card.tc.hand { margin-right: calc(-167px + 10px); }
+.card.polcard.pile { margin-right: calc(-167px + 6px); }
+
+.panel_body { padding-right: calc(18px + 167px); }
+.panel_body { gap: 18px 0; }
+#discard_pile_body { padding: 18px; gap: 18px; }
+
+#political_body { padding: 4px 0; display: body; }
+#political_panel { width: 879px }
+#discard_pile_panel { max-width: calc(230px * 4 + 18px * 5) }
+
+.card_pile {
+ display: flex;
+ flex-wrap: wrap;
+ width: 230px;
+}
.card.tc.H10 { background-image: url(cards/Maria.TC.01.075.jpg) }
.card.tc.H9 { background-image: url(cards/Maria.TC.02.075.jpg) }
@@ -491,15 +519,15 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
.card.tc.reverse.deck_3 { background-image: url(cards/Maria.TC.reverse.deck_3.075.jpg) }
.card.tc.reverse.deck_4 { background-image: url(cards/Maria.TC.reverse.deck_4.075.jpg) }
-.card.polcard.c01 { background-image: url(cards/Maria.PolCard.01.075.jpg) }
-.card.polcard.c02 { background-image: url(cards/Maria.PolCard.02.075.jpg) }
-.card.polcard.c03 { background-image: url(cards/Maria.PolCard.03.075.jpg) }
-.card.polcard.c04 { background-image: url(cards/Maria.PolCard.04.075.jpg) }
-.card.polcard.c05 { background-image: url(cards/Maria.PolCard.05.075.jpg) }
-.card.polcard.c06 { background-image: url(cards/Maria.PolCard.06.075.jpg) }
-.card.polcard.c07 { background-image: url(cards/Maria.PolCard.07.075.jpg) }
-.card.polcard.c08 { background-image: url(cards/Maria.PolCard.08.075.jpg) }
-.card.polcard.c09 { background-image: url(cards/Maria.PolCard.09.075.jpg) }
+.card.polcard.c1 { background-image: url(cards/Maria.PolCard.01.075.jpg) }
+.card.polcard.c2 { background-image: url(cards/Maria.PolCard.02.075.jpg) }
+.card.polcard.c3 { background-image: url(cards/Maria.PolCard.03.075.jpg) }
+.card.polcard.c4 { background-image: url(cards/Maria.PolCard.04.075.jpg) }
+.card.polcard.c5 { background-image: url(cards/Maria.PolCard.05.075.jpg) }
+.card.polcard.c6 { background-image: url(cards/Maria.PolCard.06.075.jpg) }
+.card.polcard.c7 { background-image: url(cards/Maria.PolCard.07.075.jpg) }
+.card.polcard.c8 { background-image: url(cards/Maria.PolCard.08.075.jpg) }
+.card.polcard.c9 { background-image: url(cards/Maria.PolCard.09.075.jpg) }
.card.polcard.c10 { background-image: url(cards/Maria.PolCard.10.075.jpg) }
.card.polcard.c11 { background-image: url(cards/Maria.PolCard.11.075.jpg) }
.card.polcard.c12 { background-image: url(cards/Maria.PolCard.12.075.jpg) }
@@ -515,70 +543,97 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
.card.polcard.c22 { background-image: url(cards/Maria.PolCard.22.075.jpg) }
.card.polcard.c23 { background-image: url(cards/Maria.PolCard.23.075.jpg) }
.card.polcard.c24 { background-image: url(cards/Maria.PolCard.24.075.jpg) }
-.card.polcard.impelection { background-image: url(cards/Maria.PolCard.ImpElection.075.jpg) }
+.card.polcard.c25 { background-image: url(cards/Maria.PolCard.ImpElection.075.jpg) }
+
.card.polcard.reverse.deck_1 { background-image: url(cards/Maria.PolCard.reverse.deck_1.075.jpg) }
.card.polcard.reverse.deck_2 { background-image: url(cards/Maria.PolCard.reverse.deck_2.075.jpg) }
.card.polcard.reverse.deck_3 { background-image: url(cards/Maria.PolCard.reverse.deck_3.075.jpg) }
.card.polcard.reverse.deck_4 { background-image: url(cards/Maria.PolCard.reverse.deck_4.075.jpg) }
+.card.polcard.c1.zoom { background-image: url(cards/Maria.PolCard.01.150.jpg) }
+.card.polcard.c2.zoom { background-image: url(cards/Maria.PolCard.02.150.jpg) }
+.card.polcard.c3.zoom { background-image: url(cards/Maria.PolCard.03.150.jpg) }
+.card.polcard.c4.zoom { background-image: url(cards/Maria.PolCard.04.150.jpg) }
+.card.polcard.c5.zoom { background-image: url(cards/Maria.PolCard.05.150.jpg) }
+.card.polcard.c6.zoom { background-image: url(cards/Maria.PolCard.06.150.jpg) }
+.card.polcard.c7.zoom { background-image: url(cards/Maria.PolCard.07.150.jpg) }
+.card.polcard.c8.zoom { background-image: url(cards/Maria.PolCard.08.150.jpg) }
+.card.polcard.c9.zoom { background-image: url(cards/Maria.PolCard.09.150.jpg) }
+.card.polcard.c10.zoom { background-image: url(cards/Maria.PolCard.10.150.jpg) }
+.card.polcard.c11.zoom { background-image: url(cards/Maria.PolCard.11.150.jpg) }
+.card.polcard.c12.zoom { background-image: url(cards/Maria.PolCard.12.150.jpg) }
+.card.polcard.c13.zoom { background-image: url(cards/Maria.PolCard.13.150.jpg) }
+.card.polcard.c14.zoom { background-image: url(cards/Maria.PolCard.14.150.jpg) }
+.card.polcard.c15.zoom { background-image: url(cards/Maria.PolCard.15.150.jpg) }
+.card.polcard.c16.zoom { background-image: url(cards/Maria.PolCard.16.150.jpg) }
+.card.polcard.c17.zoom { background-image: url(cards/Maria.PolCard.17.150.jpg) }
+.card.polcard.c18.zoom { background-image: url(cards/Maria.PolCard.18.150.jpg) }
+.card.polcard.c19.zoom { background-image: url(cards/Maria.PolCard.19.150.jpg) }
+.card.polcard.c20.zoom { background-image: url(cards/Maria.PolCard.20.150.jpg) }
+.card.polcard.c21.zoom { background-image: url(cards/Maria.PolCard.21.150.jpg) }
+.card.polcard.c22.zoom { background-image: url(cards/Maria.PolCard.22.150.jpg) }
+.card.polcard.c23.zoom { background-image: url(cards/Maria.PolCard.23.150.jpg) }
+.card.polcard.c24.zoom { background-image: url(cards/Maria.PolCard.24.150.jpg) }
+.card.polcard.c25.zoom { background-image: url(cards/Maria.PolCard.ImpElection.150.jpg) }
+
/* @2x */
@media (min-resolution: 97dpi) {
#map { background-image: url(Maria.Gameboard.150.jpg) }
#political_display { background-image: url(Maria.Political.Display.150.jpg) }
- .card.tc.c01 { background-image: url(cards/Maria.TC.01.150.jpg) }
- .card.tc.c02 { background-image: url(cards/Maria.TC.02.150.jpg) }
- .card.tc.c03 { background-image: url(cards/Maria.TC.03.150.jpg) }
- .card.tc.c04 { background-image: url(cards/Maria.TC.04.150.jpg) }
- .card.tc.c05 { background-image: url(cards/Maria.TC.05.150.jpg) }
- .card.tc.c06 { background-image: url(cards/Maria.TC.06.150.jpg) }
- .card.tc.c07 { background-image: url(cards/Maria.TC.07.150.jpg) }
- .card.tc.c08 { background-image: url(cards/Maria.TC.08.150.jpg) }
- .card.tc.c09 { background-image: url(cards/Maria.TC.09.150.jpg) }
- .card.tc.c10 { background-image: url(cards/Maria.TC.10.150.jpg) }
- .card.tc.c11 { background-image: url(cards/Maria.TC.11.150.jpg) }
- .card.tc.c12 { background-image: url(cards/Maria.TC.12.150.jpg) }
- .card.tc.c13 { background-image: url(cards/Maria.TC.13.150.jpg) }
- .card.tc.c14 { background-image: url(cards/Maria.TC.14.150.jpg) }
- .card.tc.c15 { background-image: url(cards/Maria.TC.15.150.jpg) }
- .card.tc.c16 { background-image: url(cards/Maria.TC.16.150.jpg) }
- .card.tc.c17 { background-image: url(cards/Maria.TC.17.150.jpg) }
- .card.tc.c18 { background-image: url(cards/Maria.TC.18.150.jpg) }
- .card.tc.c19 { background-image: url(cards/Maria.TC.19.150.jpg) }
- .card.tc.c20 { background-image: url(cards/Maria.TC.20.150.jpg) }
- .card.tc.c21 { background-image: url(cards/Maria.TC.21.150.jpg) }
- .card.tc.c22 { background-image: url(cards/Maria.TC.22.150.jpg) }
- .card.tc.c23 { background-image: url(cards/Maria.TC.23.150.jpg) }
- .card.tc.c24 { background-image: url(cards/Maria.TC.24.150.jpg) }
- .card.tc.c25 { background-image: url(cards/Maria.TC.25.150.jpg) }
- .card.tc.c26 { background-image: url(cards/Maria.TC.26.150.jpg) }
- .card.tc.c27 { background-image: url(cards/Maria.TC.27.150.jpg) }
- .card.tc.c28 { background-image: url(cards/Maria.TC.28.150.jpg) }
- .card.tc.c29 { background-image: url(cards/Maria.TC.29.150.jpg) }
- .card.tc.c30 { background-image: url(cards/Maria.TC.30.150.jpg) }
- .card.tc.c31 { background-image: url(cards/Maria.TC.31.150.jpg) }
- .card.tc.c32 { background-image: url(cards/Maria.TC.32.150.jpg) }
- .card.tc.c33 { background-image: url(cards/Maria.TC.33.150.jpg) }
- .card.tc.c34 { background-image: url(cards/Maria.TC.34.150.jpg) }
- .card.tc.c35 { background-image: url(cards/Maria.TC.35.150.jpg) }
- .card.tc.c36 { background-image: url(cards/Maria.TC.36.150.jpg) }
- .card.tc.c37 { background-image: url(cards/Maria.TC.37.150.jpg) }
- .card.tc.c38 { background-image: url(cards/Maria.TC.38.150.jpg) }
+ .card.tc.H10 { background-image: url(cards/Maria.TC.01.150.jpg) }
+ .card.tc.H9 { background-image: url(cards/Maria.TC.02.150.jpg) }
+ .card.tc.H8 { background-image: url(cards/Maria.TC.03.150.jpg) }
+ .card.tc.H7 { background-image: url(cards/Maria.TC.04.150.jpg) }
+ .card.tc.H6 { background-image: url(cards/Maria.TC.05.150.jpg) }
+ .card.tc.H5 { background-image: url(cards/Maria.TC.06.150.jpg) }
+ .card.tc.H4 { background-image: url(cards/Maria.TC.07.150.jpg) }
+ .card.tc.H3 { background-image: url(cards/Maria.TC.08.150.jpg) }
+ .card.tc.H2 { background-image: url(cards/Maria.TC.09.150.jpg) }
+ .card.tc.R { background-image: url(cards/Maria.TC.10.150.jpg) }
+ .card.tc.S10 { background-image: url(cards/Maria.TC.11.150.jpg) }
+ .card.tc.S9 { background-image: url(cards/Maria.TC.12.150.jpg) }
+ .card.tc.S8 { background-image: url(cards/Maria.TC.13.150.jpg) }
+ .card.tc.S7 { background-image: url(cards/Maria.TC.14.150.jpg) }
+ .card.tc.S6 { background-image: url(cards/Maria.TC.15.150.jpg) }
+ .card.tc.S5 { background-image: url(cards/Maria.TC.16.150.jpg) }
+ .card.tc.S4 { background-image: url(cards/Maria.TC.17.150.jpg) }
+ .card.tc.S3 { background-image: url(cards/Maria.TC.18.150.jpg) }
+ .card.tc.S2 { background-image: url(cards/Maria.TC.19.150.jpg) }
+ .card.tc.D10 { background-image: url(cards/Maria.TC.21.150.jpg) }
+ .card.tc.D9 { background-image: url(cards/Maria.TC.22.150.jpg) }
+ .card.tc.D8 { background-image: url(cards/Maria.TC.23.150.jpg) }
+ .card.tc.D7 { background-image: url(cards/Maria.TC.24.150.jpg) }
+ .card.tc.D6 { background-image: url(cards/Maria.TC.25.150.jpg) }
+ .card.tc.D5 { background-image: url(cards/Maria.TC.26.150.jpg) }
+ .card.tc.D4 { background-image: url(cards/Maria.TC.27.150.jpg) }
+ .card.tc.D3 { background-image: url(cards/Maria.TC.28.150.jpg) }
+ .card.tc.D2 { background-image: url(cards/Maria.TC.29.150.jpg) }
+ .card.tc.C10 { background-image: url(cards/Maria.TC.30.150.jpg) }
+ .card.tc.C9 { background-image: url(cards/Maria.TC.31.150.jpg) }
+ .card.tc.C8 { background-image: url(cards/Maria.TC.32.150.jpg) }
+ .card.tc.C7 { background-image: url(cards/Maria.TC.33.150.jpg) }
+ .card.tc.C6 { background-image: url(cards/Maria.TC.34.150.jpg) }
+ .card.tc.C5 { background-image: url(cards/Maria.TC.35.150.jpg) }
+ .card.tc.C4 { background-image: url(cards/Maria.TC.36.150.jpg) }
+ .card.tc.C3 { background-image: url(cards/Maria.TC.37.150.jpg) }
+ .card.tc.C2 { background-image: url(cards/Maria.TC.38.150.jpg) }
+
.card.tc.reverse.deck_1 { background-image: url(cards/Maria.TC.reverse.deck_1.150.jpg) }
.card.tc.reverse.deck_2 { background-image: url(cards/Maria.TC.reverse.deck_2.150.jpg) }
.card.tc.reverse.deck_3 { background-image: url(cards/Maria.TC.reverse.deck_3.150.jpg) }
.card.tc.reverse.deck_4 { background-image: url(cards/Maria.TC.reverse.deck_4.150.jpg) }
- .card.polcard.c01 { background-image: url(cards/Maria.PolCard.01.150.jpg) }
- .card.polcard.c02 { background-image: url(cards/Maria.PolCard.02.150.jpg) }
- .card.polcard.c03 { background-image: url(cards/Maria.PolCard.03.150.jpg) }
- .card.polcard.c04 { background-image: url(cards/Maria.PolCard.04.150.jpg) }
- .card.polcard.c05 { background-image: url(cards/Maria.PolCard.05.150.jpg) }
- .card.polcard.c06 { background-image: url(cards/Maria.PolCard.06.150.jpg) }
- .card.polcard.c07 { background-image: url(cards/Maria.PolCard.07.150.jpg) }
- .card.polcard.c08 { background-image: url(cards/Maria.PolCard.08.150.jpg) }
- .card.polcard.c09 { background-image: url(cards/Maria.PolCard.09.150.jpg) }
+ .card.polcard.c1 { background-image: url(cards/Maria.PolCard.01.150.jpg) }
+ .card.polcard.c2 { background-image: url(cards/Maria.PolCard.02.150.jpg) }
+ .card.polcard.c3 { background-image: url(cards/Maria.PolCard.03.150.jpg) }
+ .card.polcard.c4 { background-image: url(cards/Maria.PolCard.04.150.jpg) }
+ .card.polcard.c5 { background-image: url(cards/Maria.PolCard.05.150.jpg) }
+ .card.polcard.c6 { background-image: url(cards/Maria.PolCard.06.150.jpg) }
+ .card.polcard.c7 { background-image: url(cards/Maria.PolCard.07.150.jpg) }
+ .card.polcard.c8 { background-image: url(cards/Maria.PolCard.08.150.jpg) }
+ .card.polcard.c9 { background-image: url(cards/Maria.PolCard.09.150.jpg) }
.card.polcard.c10 { background-image: url(cards/Maria.PolCard.10.150.jpg) }
.card.polcard.c11 { background-image: url(cards/Maria.PolCard.11.150.jpg) }
.card.polcard.c12 { background-image: url(cards/Maria.PolCard.12.150.jpg) }
@@ -594,7 +649,8 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
.card.polcard.c22 { background-image: url(cards/Maria.PolCard.22.150.jpg) }
.card.polcard.c23 { background-image: url(cards/Maria.PolCard.23.150.jpg) }
.card.polcard.c24 { background-image: url(cards/Maria.PolCard.24.150.jpg) }
- .card.polcard.impelection { background-image: url(cards/Maria.PolCard.ImpElection.150.jpg) }
+ .card.polcard.c25 { background-image: url(cards/Maria.PolCard.ImpElection.150.jpg) }
+
.card.polcard.reverse.deck_1 { background-image: url(cards/Maria.PolCard.reverse.deck_1.150.jpg) }
.card.polcard.reverse.deck_2 { background-image: url(cards/Maria.PolCard.reverse.deck_2.150.jpg) }
.card.polcard.reverse.deck_3 { background-image: url(cards/Maria.PolCard.reverse.deck_3.150.jpg) }