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