From 28cf5ed6773a7c2736d995711bbc8a0720d9a514 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sun, 15 May 2022 01:58:49 +0200 Subject: Clean up common play.css file. --- blocks_columbia.css | 2 +- blocks_simple.css | 2 +- info/cards.html | 54 +++++++++++++++++++++++------------------------ play.css | 61 +++++++++++++++++++++++++++++++++++++++++------------ 4 files changed, 76 insertions(+), 43 deletions(-) diff --git a/blocks_columbia.css b/blocks_columbia.css index 164b19f..30935ad 100644 --- a/blocks_columbia.css +++ b/blocks_columbia.css @@ -1,5 +1,5 @@ .columbia-labels .known.block { - background-image: url('blocks_columbia.webp'); + background-image: url('blocks_columbia.jpg'); background-repeat: no-repeat; background-size: 496px 496px; } diff --git a/blocks_simple.css b/blocks_simple.css index 8856cb6..c3d4523 100644 --- a/blocks_simple.css +++ b/blocks_simple.css @@ -1,5 +1,5 @@ .simple-labels .block.known { - background-image: url('blocks_simple.webp'); + background-image: url('blocks_simple.opt.png'); background-repeat: no-repeat; background-size: 600% 3100%; } diff --git a/info/cards.html b/info/cards.html index c433480..8a7ce6a 100644 --- a/info/cards.html +++ b/info/cards.html @@ -8,30 +8,30 @@ img { margin: 12px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); width: 224px; heig

Julius Caesar - Cards

- - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/play.css b/play.css index a81f79b..c060369 100644 --- a/play.css +++ b/play.css @@ -1,5 +1,9 @@ /* MAIN */ +html { + image-rendering: -webkit-optimize-contrast; /* try to fix chromium's terrible image rescaling */ +} + main { background-color: #461145; } #roles { background-color: tan; } header { background-color: tan; } @@ -7,8 +11,10 @@ header.your_turn { background-color: orange; } #role_Caesar .role_name { background-color: salmon; } #role_Pompeius .role_name { background-color: #eb5; } #turn_info { background-color: burlywood; } +.role_vp { float: right; } #log { background-color: wheat; } +#log div { padding-left: 20px; text-indent: -12px; } #log .st { background-color: brown; color: gold; font-weight: bold; } #log .C { background-color: salmon; } #log .P { background-color: #eb5; } @@ -17,6 +23,15 @@ header.your_turn { background-color: orange; } /* CARDS */ +.hand { + margin: 25px; + display: flex; + flex-wrap: wrap; + justify-content: center; + min-height: 348px; + gap: 16px; +} + .card_back { background-image: url('cards/card_back.jpg'); } .card_apollo { background-image: url('cards/card_apollo.jpg'); } .card_jupiter { background-image: url('cards/card_jupiter.jpg'); } @@ -35,9 +50,11 @@ header.your_turn { background-color: orange; } .card_41 { background-image: url('cards/card_41.jpg'); } .card { + background-size: cover; + background-repeat: no-repeat; background-color: white; - width: 225px; - height: 350px; + width: 224px; + height: 348px; border-radius: 12px; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); transition: 100ms; @@ -49,7 +66,15 @@ header.your_turn { background-color: orange; } } .card.enabled:hover { - transform: scale(1.1); + transform: translateY(-8px); +} + +.card.enabled { + cursor: pointer; +} + +.card.disabled { + filter: grayscale(100%); } .card.prior { @@ -60,19 +85,23 @@ header.your_turn { background-color: orange; } background-color: #822c1f; } -.role_info { padding: 15px; } -.role_info .card { margin: 0 auto; } -.role_info .card { width: 90px; height: 140px; border-radius: 5px; } -.role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; } +.role_info { + overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */ + padding-top: 16px; +} -@media (max-height: 800px) { - .role_info { padding: 15px 0 0 0; } - .role_info .card { width: 135px; height: 80px; border-radius: 8px 8px 0 0; } - .role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; margin-bottom: 15px; } +.role_info .card { + width: 168px; + height: 261px; + border-radius: 9px; + margin: 0 auto 16px auto; } -@media (min-height: 1200px) { - .role_info .card { width: 180px; height: 280px; border-radius: 10px; } +.role_info .card:not(:hover) { + margin: 0 auto; + height: 96px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } /* BATTLE BOARD */ @@ -100,10 +129,14 @@ body:not(.replay) .battle_line.enemy .battle_menu_list { min-height: 0; } #map { width: 2475px; height: 1275px; - background-image: url("map.jpg"); background-size: cover; } +#map { background-image: url("map75.jpg") } +@media (min-resolution: 97dpi) { + #map { background-image: url("map150.jpg") } +} + #turn { position: absolute; width: 75px; -- cgit v1.2.3