app.css (6536B) [raw]
1 /* this class is manipulated dynamically by the app, 2 so keep it first, before any imports */ 3 .err__post { 4 color: red; 5 } 6 7 .lobby__outer { 8 margin-top: 2rem; 9 margin-left: 3rem; 10 } 11 .unique__error { 12 margin-top: 1.2rem; 13 color: red; 14 } 15 .gover__outer { 16 display: flex; 17 flex-direction: column; 18 align-items: center; 19 background-color: bisque; 20 padding: 15px; 21 } 22 .gover__inwin { 23 font-size: 2rem; 24 font-weight: bold; 25 } 26 .gover__inst { 27 font-size: 1.2rem; 28 margin-top: 10px; 29 margin-bottom: 10px; 30 } 31 .textRow { 32 display: flex; 33 align-items: flex-start; 34 margin-top: 1rem; 35 margin-left: 15px; 36 width: 30rem; 37 } 38 .textRow .bx--btn--icon-only { 39 background-color: lightgreen; 40 } 41 42 .table__main { 43 /* margin-top: 2rem; */ 44 min-width: 950px; 45 min-height: 650px; 46 } 47 .banner { 48 padding-top: 1rem; 49 } 50 51 .og { 52 padding-left: 0; 53 padding-right: 0; 54 } 55 56 .score__holder{ 57 font-size: 1.2rem; 58 font-weight: bold; 59 display: flex; 60 flex-direction: column; 61 align-items: flex-end; 62 padding-top: 1rem; 63 } 64 65 .exit__row { 66 display: flex; 67 justify-content: flex-end; 68 align-items: baseline; 69 } 70 .leave__button { 71 font-size: 1.3rem; 72 } 73 .menu__holder { 74 padding-top: 1rem; 75 padding-left: 2rem; 76 } 77 .seat__picker { 78 height: 46vh; 79 margin-top: 2vh; 80 } 81 .table__seat { 82 display: flex; 83 justify-content: center; 84 align-items: baseline; 85 } 86 .spName { 87 font-size: 1.3rem; 88 font-weight: bold; 89 } 90 91 .sp__top, .sp__bot { 92 display: flex; 93 justify-content: center; 94 align-items: center; 95 height: 12vh; 96 } 97 .sp__mid { 98 display: flex; 99 justify-content: space-between; 100 align-items: center; 101 height: 20vh; 102 } 103 .start__game { 104 display: flex; 105 } 106 .start__game .bx--dropdown__wrapper { 107 width: -webkit-fill-available; 108 } 109 110 .player__name { 111 font-size: 1.6rem; 112 font-weight: bold; 113 } 114 .play__hinfo { 115 font-size: 1.3rem; 116 min-height: 20px; 117 } 118 .play__tinfo { 119 font-size: 1.3rem; 120 min-height: 20px; 121 } 122 .partner__stack{ 123 display: flex; 124 flex-direction: column; 125 align-items: center; 126 padding-top: 1rem; 127 } 128 .partner__info { 129 width: 100%; 130 display: flex; 131 justify-content: space-evenly; 132 } 133 .my__stack { 134 float: right; 135 } 136 .my__hinfo { 137 font-size: 1.5rem; 138 } 139 .my__tinfo { 140 font-size: 1.3rem; 141 } 142 .mh__card__wrapper { 143 overflow: hidden; 144 } 145 146 .mh__card__wrapper:last-child, .mh__card__wrapper:hover { 147 overflow: visible; 148 } 149 .mh__card { 150 width: 9vw; 151 min-width: 80px; 152 } 153 .mh__card__row { 154 display: flex; 155 align-content: center; 156 max-width: 35vw; 157 } 158 .my__hand { 159 /* background-color: cadetblue; */ 160 161 } 162 .cp__outer { 163 width: 100% 164 } 165 .chat__panel { 166 width: 100%; 167 height: 241px; 168 display: flex; 169 flex-direction: column; 170 border: 1px solid; 171 } 172 .chat__holder { 173 flex: auto; 174 max-height: 207px; 175 overflow: hidden; 176 } 177 .chat__tile { 178 height: 207px; 179 overflow: auto; 180 background-color: whitesmoke; 181 } 182 .chat__input__row { 183 display: flex; 184 } 185 .chat__post, .err__post { 186 padding-right: 0.3rem; 187 padding-left: 0.3rem; 188 } 189 .hid__card { 190 width: 30px; 191 } 192 .hid__card__row { 193 display: flex; 194 } 195 196 .vert__stack { 197 display: flex; 198 flex-direction: column; 199 } 200 .vert__stack .hid__card__div { 201 height: 32px; 202 } 203 .vert__stack .hid__card__row { 204 flex-direction: column; 205 } 206 .vert__stack .hid__card { 207 transform: rotate(90deg); 208 } 209 210 .right__stack { 211 margin-left: 1.5vw; 212 } 213 .og__left, .inner__left { 214 padding-right: 0; 215 padding-left: 0; 216 } 217 .og__right, inner__right { 218 padding-left: 0; 219 } 220 221 .tm__left { 222 /* background-color: rgb(217, 249, 255); */ 223 } 224 .tm__left .vert__stack { 225 float: right; 226 align-items: flex-end; 227 } 228 229 .tt__center { 230 /* background-color: rgb(217, 249, 255); */ 231 text-align: center; 232 } 233 234 .tm__right { 235 height: 35vh; 236 /* background-color: rgb(217, 249, 255); */ 237 } 238 .tb__center { 239 /* background-color: rgb(217, 249, 255); */ 240 } 241 .trick__card { 242 width: 80px; 243 } 244 .trick__holder, .trick__outer, .trick__grid, .trick__row { 245 height: 100%; 246 } 247 .left__trick, .right__trick { 248 height: 100%; 249 display: flex; 250 flex-direction: column; 251 justify-content: center; 252 } 253 .mid__trick { 254 height: 100%; 255 display: flex; 256 flex-direction: column; 257 } 258 .me { 259 justify-content: flex-end; 260 } 261 .partner { 262 justify-content: flex-start; 263 } 264 .both { 265 justify-content: space-between; 266 } 267 268 .trump__card { 269 width: 80px; 270 } 271 .trump__outer { 272 height: 100%; 273 width: 100%; 274 } 275 .trump__holder { 276 height: 100%; 277 display: flex; 278 align-items: center; 279 } 280 .trump__holder.me { 281 flex-direction: column; 282 justify-content: flex-end; 283 } 284 .trump__holder.partner { 285 flex-direction: column; 286 justify-content: flex-start; 287 } 288 .trump__holder.left { 289 flex-direction: row; 290 justify-content: flex-start; 291 } 292 .trump__holder.right { 293 flex-direction: row; 294 justify-content: flex-end; 295 } 296 .tp1__stack { 297 display: flex; 298 flex-direction: column; 299 } 300 .tp1__stack .bx--btn, .bx--dropdown__wrapper{ 301 margin-bottom: 3px; 302 } 303 304 .table__header { 305 height: 10vh; 306 margin-left: 2rem; 307 } 308 .table__top { 309 height: 20vh; 310 } 311 .table__mid { 312 height: 50vh; 313 } 314 .table__bot { 315 height: 20vh; 316 margin-left: 0; 317 } 318 .tt__right { 319 height: 20vh; 320 justify-content: flex-end; 321 /* background-color: lightsalmon; */ 322 } 323 .tb__right { 324 height: 35vh; 325 /* background-color: lightsalmon; */ 326 } 327 .tb__left { 328 padding-left: 2rem; 329 } 330 .tlist__title { 331 font-size: 1.75rem; 332 font-weight: 400; 333 padding-right: 0.5rem; 334 } 335 .tlist__title__row { 336 display: flex; 337 align-items: center; 338 } 339 .tlist__main { 340 border: 3px solid darkgray; 341 margin-right: 4rem; 342 } 343 .tlist__cntl { 344 border-bottom: 1px solid; 345 } 346 .tlist__none { 347 margin: 1rem; 348 } 349 .tlist__holder { 350 height: 45vh; 351 overflow: hidden; 352 } 353 .tlist__list { 354 height: 45vh; 355 overflow: auto; 356 } 357 .tlist__list .bx--tile{ 358 margin-bottom: 5px; 359 } 360 361 .table__name { 362 font-size: 1.2rem; 363 font-weight: 600; 364 } 365 .table__options { 366 font-size: 0.8rem; 367 font-variant: small-caps; 368 } 369 .table__name--locked { 370 color: red; 371 } 372 .table__conflict { 373 font-style: italic; 374 font-weight: 600; 375 color: red; 376 } 377 .ti__name { 378 font-size: 1.2rem; 379 font-weight: 600; 380 } 381 .ti__opt { 382 font-variant: small-caps; 383 padding-top: 2px; 384 } 385 .spec__title { 386 font-weight: 600; 387 } 388 389 /* 390 .hd__left { 391 background-color: rosybrown; 392 } 393 .hd__right { 394 background-color: skyblue; 395 } 396 .tt__left { 397 background-color: slategray; 398 } 399 .tm__center { 400 background-color: lightpink; 401 } 402 */