resources/sass/rounds.scss

   1 .rounds {
   2         margin: 1rem 0;
   3         padding: 0;
   4
   5         .round {
   6                 margin: 1rem 0;
   7                 border: $border-width solid $secondary;
   8                 border-radius: $border-radius;
   9                 background: $gray-700;
  10                 padding: 1ex;
  11                 list-style: none;
  12
  13                 &.has-not-finished {
  14                         border-color: $light;
  15                         box-shadow: 0 0 0.25rem 0.25rem $info;
  16                 }
  17
  18                 .info {
  19                         padding-right: 1rem;
  20                         min-width: 13em;
  21
  22                         .date {
  23                                 font-size: 125%;
  24                         }
  25
  26                         .rolled-by {
  27                                 display: inline-block;
  28                                 vertical-align: middle;
  29
  30                                 img {
  31                                         max-height: 2rem;
  32                                         width: auto;
  33                                         border-radius: 50%;
  34                                 }
  35                         }
  36
  37                         .seed-code, .btn, .rolled-by {
  38                                 margin-bottom: 1ex;
  39                         }
  40                 }
  41         }
  42 }
  43
  44 .seed-code {
  45         align-items: center;
  46         align-content: center;
  47         justify-content: flex-start;
  48         gap: 0.5ex;
  49         padding: 0.5ex;
  50         border-radius: 0.5ex;
  51         background: $dark;
  52         color: $light;
  53         vertical-align: middle;
  54
  55         &.game-alttpr {
  56                 display: inline-flex;
  57                 flex-direction: row;
  58                 flex-wrap: nowrap;
  59         }
  60
  61         &.game-smr {
  62                 display: inline-grid;
  63                 grid-template-columns: 1fr 1fr;
  64                 > span {
  65                         text-transform: uppercase;
  66                 }
  67         }
  68 }
  69
  70 .seed-code-input {
  71         border: none;
  72         padding: 0;
  73
  74         &.game-smr {
  75                 display: grid;
  76                 grid-template-columns: 1fr 1fr;
  77         }
  78 }