add simple guessing game browser source

[alttp.git] / resources / sass / channels.scss

diff --git a/resources/sass/channels.scss b/resources/sass/channels.scss
index cffa5785ad0500fa4c1a74caadb409811196117e..3e0f18528ec985bb236302f63428d0f154bb5dfa 100644 (file)
--- a/resources/sass/channels.scss
+++ b/resources/sass/channels.scss
@@ -5,3 +5,58 @@
        opacity: .6;
        background: repeating-linear-gradient(150deg, #444, #444 1ex, transparent 1ex, transparent 1em);
 }
+
+.guessing-game-monitor {
+       font-size: 5vw;
+       text-align: center;
+
+       .message-box {
+               display: inline-block;
+               padding: 0.5ex 1ex;
+               border-radius: 0.5ex;
+               background: rgba(0, 0, 0, 0.5);
+       }
+       .message-title {
+               display: flex;
+               align-items: center;
+               justify-content: space-between;
+       }
+       .accepting-guesses .message-icon {
+               color: $warning;
+       }
+       .guessing-closed .message-icon {
+               color: $danger;
+       }
+       .message-text {
+               flex-grow: 1;
+               margin-left: 1ex;
+               margin-right: 1ex;
+               width: 70vw;
+               height: 1.2em;
+               line-height: 1;
+       }
+
+       .guessing-stats {
+               display: flex;
+               font-size: 3vw;
+               justify-content: center;
+               margin-top: 1ex;
+       }
+       .guessing-stat {
+               width: 1.3em;
+       }
+       .guessing-box {
+               width: 100%;
+               height: 2em;
+               position: relative;
+       }
+       .guessing-box-bar {
+               background-color: $primary;
+               position: absolute;
+               bottom: 0;
+               width: 100%;
+       }
+       .has-won .guessing-box-bar {
+               background-color: $danger;
+       }
+}