client/src/stylesheets/variant.sass

   1 // Menu:
   2
   3 #menuBar
   4   background: linear-gradient(#e66465, #9198e5)
   5   height: 29px
   6   margin-bottom: 10px
   7   @media screen and (max-width: 767px)
   8     height: 100%
   9     margin-bottom: 0
  10   @media screen and (min-width: 768px)
  11     width: 100%
  12     overflow: hidden
  13
  14 a#homeLink
  15   margin-left: 10px
  16   margin-top: 2px
  17   color: black
  18   display: inline-block
  19   @media screen and (max-width: 767px)
  20     display: block
  21     margin: 5px 0 0 12px
  22
  23 .info-container
  24   display: inline-block
  25   vertical-align: top
  26   padding: 0
  27   box-sizing: border-box
  28   a
  29     text-decoration: none
  30     color: black
  31   a, p
  32     display: inline-block
  33     padding: 0 3px
  34     border: 1px solid black;
  35     margin: 1px 0 0 15px
  36     @media screen and (max-width: 767px)
  37       margin-top: 10px
  38       display: block
  39
  40 #userMenu, #settings
  41   @media screen and (min-width: 768px)
  42     float: right
  43   .info-container
  44     p
  45       padding: 0 3px
  46       margin: 1px 0 0 15px
  47
  48 #flagMenu
  49   @media screen and (min-width: 768px)
  50     margin-top: 1px
  51     float: right
  52   margin: 0 15px
  53   @media screen and (max-width: 767px)
  54     margin: 25px 5px 0 15px
  55   img
  56     display: inline-block
  57     margin: 0
  58     height: 25px
  59
  60 label.drawer-toggle
  61   padding: 0
  62   &::before
  63     font-size: 2em;
  64     max-height: 32px;
  65     top: -7px;
  66     left: 5px
  67
  68 // Game section:
  69
  70 td.highlight-lm
  71   background-color: plum
  72
  73 button.play
  74   height: 24px
  75   margin: 0
  76   padding: 0 10px 24px 10px
  77   box-sizing: border-box
  78   border: 1px solid brown
  79 button.play.spaceleft
  80   margin-left: 15px
  81 button.play.spaceright
  82   margin-right: 15px
  83 button.play.big-spaceleft
  84   margin-left: 25px
  85 button.play.big-spaceright
  86   margin-right: 25px
  87
  88 .aboveboard-wrapper
  89   width: 80vh
  90   margin: 0 auto
  91   @media screen and (max-width: 767px)
  92     width: 100%
  93     margin: 0
  94
  95 button.above-board
  96   margin-left: 15px
  97   margin-right: 15px
  98
  99 i.material-icons
 100   font-size: 24px
 101
 102 .indic-left
 103   border: 1px solid brown
 104   float: left
 105   margin: 0 0 var(--universal-margin) 10vh
 106   @media screen and (max-width: 767px)
 107     margin-left: 20px
 108
 109 .indic-right
 110   border: 1px solid brown
 111   float: right
 112   margin: 0 10vh var(--universal-margin) 0
 113   @media screen and (max-width: 767px)
 114     margin-right: 20px
 115
 116 .my-chatmsg
 117   color: black
 118
 119 .opp-chatmsg
 120   color: blue
 121
 122 // TODO: this fix is not good (button height 0 if chat overflow window height)
 123 #sendChatBtn
 124   min-height: 42px
 125
 126 .connected
 127   background-color: green
 128
 129 .disconnected
 130   background-color: red
 131
 132 .white-turn
 133   background-color: white
 134
 135 .black-turn
 136   background-color: black
 137
 138 button.playing
 139   background-color: #ffcc99
 140   &:hover
 141     background-color: #ffcc99
 142
 143 button.seek
 144   background-color: #cc99ff
 145   &:hover
 146     background-color: #cc99ff
 147
 148 #fen-string
 149   margin-top: 0
 150   margin-bottom: 10px
 151
 152 #pgn-game
 153   margin-top: 0
 154   margin-bottom: 0
 155
 156 #downloadBtn
 157   display: block
 158   margin-left: auto
 159   margin-right: auto
 160
 161 #pgn-div > a
 162   display: none
 163
 164 //#fen-div > p
 165   margin-left: 0
 166   margin-right: 0
 167
 168 #modal-eog+div .card
 169   overflow: hidden
 170
 171 #actions
 172   margin: 10px 0
 173
 174 // Rules section:
 175 // TODO