diff --git a/index.html b/index.html index 4e35fe4..f581c2b 100644 --- a/index.html +++ b/index.html @@ -51,7 +51,7 @@

3D Billiards

-
+
Player 1 ()
    @@ -65,7 +65,7 @@
    Player 1 ()
-
+
Player 2 ()
    diff --git a/styles.css b/styles.css index 0da9865..c488c77 100644 --- a/styles.css +++ b/styles.css @@ -122,7 +122,7 @@ width: 20px; height: 20px; text-align: center; - background-color: #d3d3d3; + display: block; border-radius: 20px; } @@ -272,4 +272,78 @@ top: 420px; left: 810px; z-index: 1; -} \ No newline at end of file +} + +.player ul li { + font-size: 10px; + line-height: 19px; + text-align: center; +} + +.player ul li::after { + display: block; + background-color: white; + width: 12px; + height: 12px; + border-radius: 12px; + margin-top: -15px; + content: ''; + margin-left: 4px; + z-index: 10; +} + +.player.striped ul li::before { + background-image: linear-gradient(#fff 13%, transparent 13%, transparent 87%, #fff 13%); +} + +.player.solid ul li::before { + background-image: none; +} + +.player ul li::before { + display: block; + border: 1px solid #000; + width: 20px; + height: 20px; + border-radius: 20px; + margin-top: 0; + content: ''; + margin-bottom: -20px; +} + + +.player ul li:nth-child(1) { + background-color: #f5c61f; +} + +.player ul li:nth-child(2) { + background-color: #123ecd; +} + +.player ul li:nth-child(3) { + background-color: #cd1b12; +} + +.player ul li:nth-child(4) { + background-color: #8412cd; +} + +.player ul li:nth-child(5) { + background-color: #ff7f00; +} + +.player ul li:nth-child(6) { + background-color: #269c0f; +} + +.player ul li:nth-child(7) { + background-color: #a20000; +} + +.player ul li.pocketed { + opacity: 0.5; +} + +.player.unknown ul li { + background-color: #3d3d3d; +}