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 p.words {
  77   line-height: 0.9em;
  78 }
  79 .word {
  80   cursor: pointer;
  81   padding: 3px;
  82   display: inline-block;
  83   margin: 2px;
  84 }
  85 .highlight-word {
  86   background-color: lightblue;
  87 }
  88
  89 /* Game link div + custom game "button" */
  90 #gameLink span, #gameLink a, #playCustom {
  91   text-decoration: underline;
  92   color: blue;
  93   cursor: pointer;
  94 }
  95
  96 #selectVariant {
  97   margin-right: 15px;
  98 }
  99
 100 /* Board container (without reserves) */
 101 #chessboard {
 102   position: absolute;
 103   cursor: pointer;
 104 }
 105
 106 /* Board container can be resized */
 107 .resizeable {
 108   resize: both;
 109   overflow: hidden;
 110   min-width: 200px;
 111   min-height: 200px;
 112 }
 113
 114 piece {
 115   position: absolute;
 116   top: 0;
 117   left: 0;
 118   background-size: cover;
 119   z-index: 2;
 120   will-change: transform;
 121   pointer-events: none;
 122 }
 123
 124 /* Drawing of the board */
 125 #chessboard_SVG {
 126   width: 100%;
 127   height: 100%;
 128 }
 129
 130 .dark-square {
 131   fill: #b58863;
 132 }
 133 .light-square {
 134   fill: #f0d9b5;
 135 }
 136 .in-shadow {
 137   filter: brightness(50%);
 138 }
 139
 140 .reserves {
 141   position: absolute;
 142   display: block;
 143   cursor: pointer;
 144 }
 145
 146 .reserve-cell {
 147   position: relative;
 148   display: block;
 149   float: left;
 150 }
 151
 152 /* Pieces' counter for reserves */
 153 .reserve-num {
 154   color: red;
 155   position: absolute;
 156   display: block;
 157   font-weight: bold;
 158   /*z-index: 10;*/
 159 }
 160
 161 /* Choices div after a promotion (TODO: do not hide board) */
 162 #choices, .choice {
 163   position: absolute;
 164   cursor: pointer;
 165 }
 166
 167 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
 168 :root{
 169   --loader-width: 70px;
 170   --loader-height: 70px;
 171   --loader-color-primary: #141D58;
 172   --loader-color-secondary: #EEE;
 173   --line-width: 3px;
 174   --animation-duration: 3s;
 175   --loader-initial-scale: 0.1;
 176 }
 177 .loader,.loader:before,.loader:after{
 178   box-sizing: border-box;
 179   flex-grow: 0;
 180   flex-shrink: 0;
 181 }
 182
 183 @keyframes slide {
 184   0% {
 185     transform: translateY(0%);
 186   }
 187   25% {
 188     transform: translateY(100%);
 189   }
 190   50% {
 191     transform: translateY(100%);
 192   }
 193   75% {
 194     transform: translateY(0%);
 195   }
 196   100% {
 197     transform: translateY(0%);
 198   }
 199 }
 200
 201 @keyframes spin {
 202   0% {
 203     transform: rotate(0deg);
 204   }
 205   25% {
 206     transform: rotate(0deg);
 207   }
 208   50% {
 209     transform: rotate(180deg);
 210   }
 211   75% {
 212     transform: rotate(180deg);
 213   }
 214   100% {
 215     transform: rotate(360deg);
 216   }
 217 }
 218
 219 .loader.hour-glass {
 220   position: relative;
 221   width: var(--loader-width, 100px);
 222   height: var(--loader-height, 100px);
 223   background-color: var(--loader-color-primary, #00f);
 224   -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
 225   clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
 226   overflow: hidden;
 227   animation: spin var(--animation-duration, 4s) infinite ease-in-out;
 228   margin: 20px auto;
 229 }
 230
 231 .hour-glass:before {
 232   content: "";
 233   position: absolute;
 234   top: 0px;
 235   left: 0px;
 236   width: var(--loader-width, 100px);
 237   height: 50%;
 238   background-color: var(--loader-color-secondary, #eee);
 239   animation: slide var(--animation-duration, 4s) infinite ease-in-out;
 240 }