resources/sass/channels.scss

   1 .bkgg-buttons {
   2         grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   3 }
   4 .guessing-game-winner.no-points {
   5         opacity: .6;
   6         background: repeating-linear-gradient(150deg, #444, #444 1ex, transparent 1ex, transparent 1em);
   7 }
   8
   9 .guessing-game-monitor {
  10         font-size: 5vw;
  11         text-align: center;
  12
  13         .message-box {
  14                 display: inline-block;
  15                 padding: 0.5ex 1ex;
  16                 border-radius: 0.5ex;
  17                 background: rgba(0, 0, 0, 0.8);
  18         }
  19         .message-title {
  20                 display: flex;
  21                 align-items: center;
  22                 justify-content: space-between;
  23         }
  24         .accepting-guesses .message-icon {
  25                 color: $warning;
  26         }
  27         .guessing-closed .message-icon {
  28                 color: $danger;
  29         }
  30         .message-text {
  31                 flex-grow: 1;
  32                 margin-left: 1ex;
  33                 margin-right: 1ex;
  34                 width: 70vw;
  35                 height: 1.2em;
  36                 line-height: 1;
  37         }
  38
  39         .guessing-stats {
  40                 display: flex;
  41                 font-size: 3vw;
  42                 justify-content: center;
  43                 margin-top: 1ex;
  44         }
  45         .guessing-stat {
  46                 width: 1.3em;
  47         }
  48         .guessing-box {
  49                 width: 100%;
  50                 height: 2em;
  51                 position: relative;
  52         }
  53         .guessing-box-bar {
  54                 background-color: $primary;
  55                 position: absolute;
  56                 bottom: 0;
  57                 width: 100%;
  58         }
  59         .has-won .guessing-box-bar {
  60                 background-color: $danger;
  61         }
  62 }