common.css

   1 body {
   2   margin: 0;
   3   text-align: center;
   4   background-color: #f8f8f8;
   5   font-family:  Arial, Verdana, Tahoma, sans-serif;
   6 }
   7
   8 #gameInfos, #boardContainer, #gameStopped, #pendingSeek, #pendingRematch, #newGameForm {
   9   display: none;
  10 }
  11
  12 #gameStopped > h1 {
  13   margin-bottom: 10px;
  14 }
  15
  16 /* Sticky footer */
  17 footer {
  18   position: absolute;
  19   bottom: 0;
  20   left: 0;
  21   right: 0;
  22   height: 50px;
  23 }
  24
  25 button {
  26   background-color: green;
  27   border: none;
  28   color: white;
  29   padding: 10px 15px;
  30   text-align: center;
  31   text-decoration: none;
  32   display: inline-block;
  33   font-size: 1em;
  34   cursor: pointer;
  35   border-radius: 20%;
  36   margin: 15px 0;
  37 }
  38
  39 button:hover {
  40   background-color: darkblue;
  41 }
  42
  43 button.block-btn {
  44   display: block;
  45   margin: 30px auto 20px auto;
  46   font-size: 1.5em;
  47   padding: 15px 32px;
  48 }
  49
  50 #upLeftInfos {
  51   position: absolute;
  52   left: 0;
  53   top: 0;
  54 }
  55
  56 #upRightStop {
  57   position: absolute;
  58   left: calc(100% - 25px);
  59   top: 0;
  60 }
  61
  62 #upLeftInfos > img, #upRightStop > img {
  63   width: 25px;
  64   cursor: pointer;
  65 }
  66
  67 #ng-select {
  68   margin-bottom: 20px;
  69 }
  70
  71 #ng-name {
  72   /* TODO */
  73 }
  74
  75 /* Options when starting custom game */
  76 .word {
  77   cursor: pointer;
  78   padding: 3px;
  79 }
  80 .highlight-word {
  81   background-color: lightblue;
  82 }
  83
  84 /* Game link div + custom game "button" */
  85 #gameLink span, #gameLink a, #playCustom {
  86   text-decoration: underline;
  87   color: blue;
  88   cursor: pointer;
  89 }
  90
  91 #selectVariant {
  92   margin-right: 15px;
  93 }
  94
  95 /* Board container (without reserves) */
  96 #chessboard {
  97   position: absolute;
  98   cursor: pointer;
  99 }
 100
 101 /* Board container can be resized */
 102 .resizeable {
 103   resize: both;
 104   overflow: hidden;
 105   min-width: 200px;
 106   min-height: 200px;
 107 }
 108
 109 piece {
 110   position: absolute;
 111   top: 0;
 112   left: 0;
 113   background-size: cover;
 114   z-index: 2;
 115   will-change: transform;
 116   pointer-events: none;
 117 }
 118
 119 /* Drawing of the board */
 120 #chessboard_SVG {
 121   width: 100%;
 122   height: 100%;
 123 }
 124
 125 .reserves {
 126   position: absolute;
 127   display: block;
 128   cursor: pointer;
 129 }
 130
 131 .reserve-cell {
 132   position: relative;
 133   display: block;
 134   float: left;
 135 }
 136
 137 /* Pieces' counter for reserves */
 138 .reserve-num {
 139   color: red;
 140   position: absolute;
 141   display: block;
 142   font-weight: bold;
 143   /*z-index: 10;*/
 144 }
 145
 146 /* Choices div after a promotion (TODO: do not hide board) */
 147 #choices, .choice {
 148   position: absolute;
 149   cursor: pointer;
 150 }
 151
 152 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
 153 :root{
 154   --loader-width: 70px;
 155   --loader-height: 70px;
 156   --loader-color-primary: #141D58;
 157   --loader-color-secondary: #EEE;
 158   --line-width: 3px;
 159   --animation-duration: 3s;
 160   --loader-initial-scale: 0.1;
 161 }
 162 .loader,.loader:before,.loader:after{
 163   box-sizing: border-box;
 164   flex-grow: 0;
 165   flex-shrink: 0;
 166 }
 167
 168 @keyframes slide {
 169   0% {
 170     transform: translateY(0%);
 171   }
 172   25% {
 173     transform: translateY(100%);
 174   }
 175   50% {
 176     transform: translateY(100%);
 177   }
 178   75% {
 179     transform: translateY(0%);
 180   }
 181   100% {
 182     transform: translateY(0%);
 183   }
 184 }
 185
 186 @keyframes spin {
 187   0% {
 188     transform: rotate(0deg);
 189   }
 190   25% {
 191     transform: rotate(0deg);
 192   }
 193   50% {
 194     transform: rotate(180deg);
 195   }
 196   75% {
 197     transform: rotate(180deg);
 198   }
 199   100% {
 200     transform: rotate(360deg);
 201   }
 202 }
 203
 204 .loader.hour-glass {
 205   position: relative;
 206   width: var(--loader-width, 100px);
 207   height: var(--loader-height, 100px);
 208   background-color: var(--loader-color-primary, #00f);
 209   -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
 210   clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
 211   overflow: hidden;
 212   animation: spin var(--animation-duration, 4s) infinite ease-in-out;
 213   margin: 20px auto;
 214 }
 215
 216 .hour-glass:before {
 217   content: "";
 218   position: absolute;
 219   top: 0px;
 220   left: 0px;
 221   width: var(--loader-width, 100px);
 222   height: 50%;
 223   background-color: var(--loader-color-secondary, #eee);
 224   animation: slide var(--animation-duration, 4s) infinite ease-in-out;
 225 }