From cfb1e5c492c621d6ca3880b903a66c8c754a9735 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Mon, 25 Nov 2024 12:40:44 +0100 Subject: responsive political display --- play.css | 376 +++++++++++++++++++++++++++++++++------------------------------ 1 file changed, 198 insertions(+), 178 deletions(-) (limited to 'play.css') diff --git a/play.css b/play.css index f26d24d..7ea25f9 100644 --- a/play.css +++ b/play.css @@ -2,6 +2,36 @@ Maria */ +/* 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(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(264, 10%, 65%); + --color-medium-austria: hsl(0, 0%, 90%); + --color-medium-political: hsl(50, 35%, 60%); + --color-medium-discard: hsl(52, 25%, 70%); + + --color-clubs: #0079a1; + --color-diamonds: #9d403f; + --color-hearts: #ed1c23; + --color-spades: #00507c; + --color-reserve: #59594c; +} + +/* FONTS */ + @font-face { font-family: "Suit Symbols"; src: url(fonts/FriedrichSymbols-Regular.woff2) format(woff2); @@ -14,6 +44,11 @@ white-space: wrap; } +#log { + font-family: "Suit Symbols", var(--font-small); + font-variant-numeric: tabular-nums; +} + button span.suit { font-family: "Suit Symbols", var(--font-widget); line-height: 1; @@ -23,21 +58,56 @@ button { height: 30px; } +/* BODY, HEADER, BOARD */ + body { background-color: slategray; } -#role_Maria_Theresa { background-color: var(--color-light-austria); } -#role_Louis_XV { background-color: var(--color-light-france); } -#role_Frederick { - background-image: linear-gradient(45deg, - var(--color-light-prussia) 40%, - var(--color-light-pragmatic) 60% - ); +header { background-color: hsl(44, 35%, 80%); color: #000c; } +header.your_turn { color: black; } +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); } + +#mapwrap { + width: 2485px; + height: 1654px; + margin-bottom: 30px; + box-shadow: 2px 2px 4px #0006; } -#role_Player_A { background-color: thistle; } -#role_Player_B { background-color: whitesmoke; } +#map { + position: absolute; + width: 2485px; + height: 1654px; + background-size: cover; + background-image: url(Maria.Gameboard.075.jpg); + background-color: #ece1a9; +} + +#tooltip { + pointer-events: none; + position: fixed; + z-index: 600; + right: 240px; + top: 60px; +} + +@media (max-width: 800px) { + #tooltip { + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + } +} + +/* ROLES */ .role.active span { font-weight: bold } @@ -49,30 +119,16 @@ body { padding-right: 3px; } -button:has(.austria) { background-color: #ffffff; } -button:has(.bavaria) { background-color: #ffc825; border-color: #fff766 #c69100 #c69100 #fff766; box-shadow: 0 0 0 1px #5c2a00; } -button:has(.bavaria):active:hover { border-color: #c69100 #fff766 #fff766 #c69100; } -button:has(.france) { background-color: #ed1c24; border-color: #ff544d #c00000 #c00000 #ff544d; box-shadow: 0 0 0 1px #680000; } -button:has(.france):active:hover { border-color: #c00000 #ff544d #ff544d #c00000; } -button:has(.pragmatic) { background-color: #5f5c5c; border-color: #7a7777 #454242 #454242 #7a7777; box-shadow: 0 0 0 1px #161313; } -button:has(.pragmatic):active:hover { border-color: #454242 #7a7777 #7a7777 #454242; } -button:has(.prussia) { background-color: #005988; border-color: #2973a4 #00406d #00406d #2973a4; box-shadow: 0 0 0 1px #000f3a; } -button:has(.prussia):active:hover { border-color: #00406d #2973a4 #2973a4 #00406d; } -button:has(.saxony) { background-color: #157d36; border-color: #3e9d54 #005e17 #005e17 #3e9d54; box-shadow: 0 0 0 1px #002500; } -button:has(.saxony):active:hover { border-color: #005e17 #3e9d54 #3e9d54 #005e17; } +#role_Player_A { background-color: thistle; } +#role_Player_B { background-color: whitesmoke; } -button:not(.hide):has(img) { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 4px; -} -.shift_track { - display: block; - border: 1px solid black; -} -.shift_arrow { - display: block; +#role_Maria_Theresa { background-color: var(--color-light-austria); } +#role_Louis_XV { background-color: var(--color-light-france); } +#role_Frederick { + background-image: linear-gradient(45deg, + var(--color-light-prussia) 40%, + var(--color-light-pragmatic) 60% + ); } .role_marker { @@ -112,99 +168,7 @@ button:not(.hide):has(img) { .role_marker.bavaria { background-image: url(images/role_bavaria.2x.png) } } -#mapwrap { - width: 2485px; - height: 1654px; - margin-bottom: 30px; - box-shadow: 2px 2px 4px #0006; -} - -#map { - position: absolute; - width: 2485px; - height: 1654px; - background-size: cover; - background-image: url(Maria.Gameboard.075.jpg); - background-color: #ece1a9; -} - -#tooltip { - pointer-events: none; - position: fixed; - z-index: 600; - right: 240px; - top: 60px; -} - -@media (max-width: 800px) { - #tooltip { - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - } -} - -#political_display { - position: relative; - width: 877px; - height: 620px; - background-size: cover; - background-image: url(Maria.Political.Display.075.jpg); - background-color: #ece1a9; - Xbox-shadow: 2px 2px 4px #0006; - border: 1px solid #0008; -} - -.pc_pile { - position: absolute; - top: 325px; -} - -#placed_prussia { left: 42px; } -#placed_france { left: 246px; } -#placed_pragmatic { left: 449px; } -#placed_austria { left: 653px; } - -header { background-color: hsl(44, 35%, 80%); color: #000c; } -header.your_turn { color: black; } -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(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(264, 10%, 65%); - --color-medium-austria: hsl(0, 0%, 90%); - --color-medium-political: hsl(50, 35%, 60%); - --color-medium-discard: hsl(52, 25%, 70%); - - --color-clubs: #0079a1; - --color-diamonds: #9d403f; - --color-hearts: #ed1c23; - --color-spades: #00507c; - --color-reserve: #59594c; -} - -/* DEALS */ +/* PROPOSE DEAL DIALOG */ dialog { background-color: #f3ebd4; @@ -214,28 +178,6 @@ dialog button { margin-left: 8px; } -#political_body table { - width: 100%; - background-color: var(--color-light-political); - border: 1px solid #0008; -} - -#political_body td { - border: 1px solid #0004; - padding: 4px; - vertical-align: top; -} - -#political_body td img { - display: block; - border: 1px solid black; -} - -#political_body th { - font-weight: normal; - background-color: #0002; -} - /* PANELS */ .panel { @@ -288,35 +230,126 @@ dialog button { #discard_pile_panel { max-width: calc(230px * 4 + 18px * 5) } #discard_pile_body { padding: 18px; gap: 18px; } +/* BUTTON IMAGES */ + +button:has(.austria) { background-color: #ffffff; } +button:has(.bavaria) { background-color: #ffc825; border-color: #fff766 #c69100 #c69100 #fff766; box-shadow: 0 0 0 1px #5c2a00; } +button:has(.bavaria):active:hover { border-color: #c69100 #fff766 #fff766 #c69100; } +button:has(.france) { background-color: #ed1c24; border-color: #ff544d #c00000 #c00000 #ff544d; box-shadow: 0 0 0 1px #680000; } +button:has(.france):active:hover { border-color: #c00000 #ff544d #ff544d #c00000; } +button:has(.pragmatic) { background-color: #5f5c5c; border-color: #7a7777 #454242 #454242 #7a7777; box-shadow: 0 0 0 1px #161313; } +button:has(.pragmatic):active:hover { border-color: #454242 #7a7777 #7a7777 #454242; } +button:has(.prussia) { background-color: #005988; border-color: #2973a4 #00406d #00406d #2973a4; box-shadow: 0 0 0 1px #000f3a; } +button:has(.prussia):active:hover { border-color: #00406d #2973a4 #2973a4 #00406d; } +button:has(.saxony) { background-color: #157d36; border-color: #3e9d54 #005e17 #005e17 #3e9d54; box-shadow: 0 0 0 1px #002500; } +button:has(.saxony):active:hover { border-color: #005e17 #3e9d54 #3e9d54 #005e17; } + +button:not(.hide):has(img) { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px; +} + +.shift_track { + display: block; + border: 1px solid black; +} + +.shift_arrow { + display: block; +} + +/* POLITICAL DISPLAY */ + #political_panel { width: min-content; } + +#political_display { + position: relative; + width: 877px; + height: 620px; + background-size: cover; + background-image: url(Maria.Political.Display.075.jpg); + background-color: #ece1a9; + Xbox-shadow: 2px 2px 4px #0006; + border: 1px solid #0008; +} + +#placed_prussia { left: 42px; } +#placed_france { left: 246px; } +#placed_pragmatic { left: 449px; } +#placed_austria { left: 653px; } + +.pc_pile { + position: absolute; + top: 325px; +} + #political_body { - padding: 4px; + padding-top: 4px; display: grid; - grid-template-rows: min-content 1fr; - grid-template-columns: 179px 879px 169px; - gap: 12px; } -#political_display { grid-row: 1; grid-column: 2; } -#pc_deck { grid-row: 1; grid-column: 1; } -#pc_show { grid-row: 1; grid-column: 3; } -#pc_show .card + .card { margin-top: 12px ; } -#pc_deck, #pc_show { margin-top: 4px; } -#pd_deals { grid-row: 2; grid-column: 2; } +#pc_deck { width: calc(167px + 6px * 3); height: 259px; } -div.deal + div.deal { - margin-top: 8px; +#political_body { + grid-template-columns: repeat(2, min-content); + grid-template-rows: repeat(3, min-content); } -/* LOG */ +#pd_cards { + padding: 8px; + display: flex; + flex-wrap: wrap; + justify-content: start; + align-items: center; + gap: 8px; +} -#log { - font-family: "Suit Symbols", var(--font-small); - font-variant-numeric: tabular-nums; +#pd_main { grid-row: 1; grid-column: 1; } +#pd_deals { grid-row: 2; grid-column: 1; } +#pd_cards { grid-row: 1 / 4; grid-column: 2; } +#pd_cards { flex-direction: column; } + +@media (max-width: 1300px) { +#pd_main { grid-row: 1; grid-column: 1; } +#pd_deals { grid-row: 3; grid-column: 1; } +#pd_cards { grid-row: 2; grid-column: 1; } +#pd_cards { flex-direction: row; } +} + +/* POLITICAL DEAL LIST */ + +#pd_deals table { + width: 100%; + background-color: var(--color-light-political); + border: 1px solid #0008; +} + +#pd_deals td { + border: 1px solid #0004; + padding: 4px; + vertical-align: top; +} + +#pd_deals td img { + display: block; + border: 1px solid black; +} + +#pd_deals th { + font-weight: normal; + background-color: #0002; } +#pd_deals .deal { + margin-top: 8px; +} + +/* LOG */ + #log { background-color: #f3ebd4 } #log div:empty { @@ -425,21 +458,6 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family: height: 56px; } -/* -.space.country_austria { background-color: #fcffff; } -.space.country_france { background-color: #ea192e; } -.space.country_prussia { background-color: #035783; } -.space.country_netherlands { background-color: #7d7c7a; } -.space.country_silesia { background-color: #91b4a0; } -.space.country_saxony { background-color: #127a3b; } -.space.country_bavaria { background-color: #fcb01f; } -.space.country_poland { background-color: #cac180; } - -.space.minor_fortress.Empire { background-color: #b41a70; } -.space.major_fortress.Empire { background-color: #b41a70; } -.space.city.Empire { background-color: #e0d796; } -*/ - .space.tip { border-color: lime; box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; @@ -695,6 +713,8 @@ body.shift span.value.deck_4 { background-color: #f002 } width: 230px; } +/* @1X */ + .card.tc.H10 { background-image: url(cards/Maria.TC.01.075.jpg) } .card.tc.H9 { background-image: url(cards/Maria.TC.02.075.jpg) } .card.tc.H8 { background-image: url(cards/Maria.TC.03.075.jpg) } -- cgit v1.2.3