| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-05-21 12:14:30 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-05-21 12:30:45 -0700 |
| commit | d01e0aa92bdedce5c03245e583d096ea5ce1753d (patch) | |
| tree | 73317e914f203410415b337b230469ce1bd4adfb /public/assets/css | |
| parent | 517c89b1cca85638f26d9987bc8b222d0a56ec6b (diff) | |
Add dice
Diffstat (limited to 'public/assets/css')
| -rw-r--r-- | public/assets/css/style.css | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/public/assets/css/style.css b/public/assets/css/style.css index c8c4e83..f3b1736 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -314,6 +314,105 @@ div#content { margin-bottom: 0; } +div#dice { + position: absolute; + right: 0; + bottom: 30px; + margin: 3px; + padding: 2px; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 4px; + border: 1px solid darkgray; +} + +.die { + width: 31px; + height: 31px; + border: 1px solid black; + border-radius: 4px; + margin: 0 auto; + margin-top: 3px; + margin-bottom: 1px; + background-color: white; + display: flex; + justify-content: space-around; +} + +.die > div { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.dot { + display: inline-block; + width: 7px; + height: 7px; + background-color: black; + border-radius: 50%; + padding: 0; + margin: 0; + visibility: hidden; +} + +.die.one > div:nth-child(even) > .dot:nth-child(even) { + visibility: visible; +} + +.die.two > div:first-child > .dot:first-child, +.die.two > div:last-child > .dot:last-child { + visibility: visible; +} + +.die.three > div:first-child > .dot:first-child, +.die.three > div:nth-child(even) > .dot:nth-child(even), +.die.three > div:last-child > .dot:last-child { + visibility: visible; +} + +.die.four > div:nth-child(odd) > .dot:nth-child(odd) { + visibility: visible; +} + +.die.five > div:nth-child(odd) > .dot:nth-child(odd), +.die.five > div:nth-child(even) > .dot:nth-child(even) { + visibility: visible; +} + +.die.six > div:nth-child(odd) > .dot { + visibility: visible; +} + +.die.test > div:first-child > .dot { + visibility: visible; +} + +.roll-in { + animation: roll-in 0.125s linear 1; +} + +.roll-out { + animation: roll-out 0.125s linear 1; +} + +@keyframes roll-out { + 0% { + transform: scaleX(1); + } + 100% { + transform: scaleX(0); + } +} + +@keyframes roll-in { + 0% { + transform: scaleX(0); + } + 100% { + transform: scaleX(1); + } +} + @media (width >= 1800px) { #record-sheet { flex-direction: row; |