diff options
Diffstat (limited to 'play.css')
| -rw-r--r-- | play.css | 71 |
1 files changed, 34 insertions, 37 deletions
@@ -28,6 +28,12 @@ header.your_turn { background-color: orange; } gap: 24px; } +@media (max-width: 800px) { + .hand { + min-width: 1638px; + } +} + .card_back{background-image: url('cards/card_back.svg')} .card_truce{background-image:url('cards/card_truce.jpg')} @@ -68,22 +74,30 @@ header.your_turn { background-color: orange; } } .role_info { - overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */ - padding-top: 16px; + overflow: clip; + transition: height 100ms, padding 100ms; + height: 84px; + padding: 12px 0; } .role_info .card { width: 168px; height: 258px; border-radius: 9px; - margin: 0 auto 16px auto; + margin: 0 auto; } -.role_info .card:not(:hover) { - margin: 0 auto; - height: 96px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; +.role:hover .role_info { + height: 258px; +} + +@media (max-height: 600px) { + .role:not(:hover) .role_info { display: none; } +} + +@media (max-height: 800px) { + #turn_info { display: none; } + .role_info { height: 56px; padding: 8px 0; } } /* MAP */ @@ -233,40 +247,23 @@ div.block { /* HERALD DIALOG */ #herald { - background-color: white; - border: 1px solid black; - position: fixed; - top: 80px; - left: 36px; + top: calc(44px + 12px); + left: 12px; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); - z-index: 50; - user-select: none; - display: none; -} -#herald.show { - display: block; -} -#herald_header { - font-weight: bold; - cursor: move; - border-bottom: 1px solid black; - background-color: lightsteelblue; - padding: 3px 1em; -} -.herald_noble { - padding: 3px 1em; - display: none; -} -.herald_noble:hover { - color: white; - background-color: black; -} -.herald_noble.show { - display: block; + min-width: 120px; + max-height: calc(100% - 44px - 24px); } +#herald li.title { font-weight: bold; } +#herald li.title { background-color: hsl(43, 79%, 70%) } +#herald li { background-color: hsl(43, 79%, 95%) } + +body.England #herald li.action:hover { background-color: hsl(204, 100%, 35%); } +body.Scotland #herald li.action:hover { background-color: hsl(0, 59%, 35%); } /* BATTLE BOARD */ +#battle { top: 160px; left: 185px; } + #battle { background-color: silver; } #battle_message { background-color: lightsteelblue; } #battle_header { background-color: steelblue; color: white; } |