summaryrefslogtreecommitdiff
path: root/play.css
diff options
context:
space:
mode:
Diffstat (limited to 'play.css')
-rw-r--r--play.css143
1 files changed, 143 insertions, 0 deletions
diff --git a/play.css b/play.css
index 217ed27..a9195f8 100644
--- a/play.css
+++ b/play.css
@@ -25,6 +25,7 @@ body {
width: 2485px;
height: 1654px;
margin-bottom: 30px;
+ box-shadow: 2px 2px 4px #0006;
}
#map {
@@ -44,8 +45,150 @@ body {
background-size: cover;
background-image: url(Maria.Political.Display.075.jpg);
background-color: #ece1a9;
+ box-shadow: 2px 2px 4px #0006;
+ border: 1px solid #0008;
}
+header.your_turn.france { background-color: var(--color-light-france); }
+header.your_turn.bavaria { background-color: var(--color-light-bavaria); }
+header.your_turn.prussia { background-color: var(--color-light-prussia); }
+header.your_turn.saxony { background-color: var(--color-light-saxony); }
+header.your_turn.pragmatic { background-color: var(--color-light-pragmatic); }
+header.your_turn.austria { background-color: var(--color-light-austria); }
+
+/* COLORS */
+
+:root {
+ --color-light-france: hsl(0, 70%, 80%);
+ --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-austria: hsl(0, 0%, 97%);
+ --color-light-political: hsl(50, 73%, 78%);
+
+ --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-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-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;
+}
+
+/* PANELS */
+
+.panel {
+ background-color: darkgray;
+ width: clamp(500px, calc(100% - 48px), 2475px);
+ margin: 24px auto;
+ box-shadow: 2px 2px 4px #0006;
+ border: 1px solid #0008;
+ padding: 4px;
+}
+
+.panel_header {
+ border: 1px solid #000a;
+ box-shadow: 1px 1px 4px #0003;
+ text-align: center;
+ padding: 2px 0;
+}
+
+.panel_body {
+ display: flex;
+ justify-content: start;
+ flex-wrap: wrap;
+ padding: 18px;
+ gap: 18px;
+ min-height: 256px;
+}
+
+#hand_france_header { background-color: var(--color-light-france) }
+#hand_bavaria_header { background-color: var(--color-light-bavaria) }
+#hand_prussia_header { background-color: var(--color-light-prussia) }
+#hand_saxony_header { background-color: var(--color-light-saxony) }
+#hand_pragmatic_header { background-color: var(--color-light-pragmatic) }
+#hand_austria_header { background-color: var(--color-light-austria) }
+
+#hand_france_panel { background-color: var(--color-medium-france) }
+#hand_bavaria_panel { background-color: var(--color-medium-bavaria) }
+#hand_prussia_panel { background-color: var(--color-medium-prussia) }
+#hand_saxony_panel { background-color: var(--color-medium-saxony) }
+#hand_pragmatic_panel { background-color: var(--color-medium-pragmatic) }
+#hand_austria_panel { background-color: var(--color-medium-austria) }
+
+#political_header { background-color: var(--color-light-political) }
+#political_panel { background-color: var(--color-medium-political) }
+
+
+/* LOG */
+
+#log {
+ font-family: "Suit Symbols", var(--font-small);
+ font-variant-numeric: tabular-nums;
+}
+
+#log { background-color: #f3ebd4 }
+
+#log div:empty {
+ min-height: 4px;
+}
+
+#log .city_tip:hover { cursor: pointer; text-decoration: underline; }
+
+#log .piece_tip:hover { cursor: pointer; text-decoration: underline; }
+
+#log .h {
+ background-color: tan;
+ border-top: 1px solid black; border-bottom: 1px solid black;
+ margin: 8px 0;
+}
+
+#log .h.fate { text-align: center; }
+#log .h.fate::before { content: "\2014 " }
+#log .h.fate::after { content: " \2014" }
+
+#log .combat { background-color: #d7cfb8; }
+
+#log .h.austria { background-color: var(--color-light-austria); }
+#log .h.france { background-color: var(--color-light-france); }
+#log .h.bavaria { background-color: var(--color-light-bavaria); }
+#log .h.prussia { background-color: var(--color-light-prussia); }
+#log .h.pragmatic { background-color: var(--color-light-pragmatic); }
+#log .h.saxony { background-color: var(--color-light-saxony); }
+
+#log .q { font-style: italic; }
+
+#log .i { padding-left: 20px }
+#log .ii { padding-left: 32px }
+
+#log span.suit { font-size: 11px; }
+
+span.suit.reserve { padding: 0 1px; }
+
+span.suit.spades { color: var(--color-spades) }
+span.suit.clubs { color: var(--color-clubs) }
+span.suit.hearts { color: var(--color-hearts) }
+span.suit.diamonds { color: var(--color-diamonds) }
+span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family: "Source Serif SmText"; }
+
/* SPACES */
.space {