@mideind/netskrafl-react 2.6.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/css/netskrafl.css +889 -554
- package/dist/esm/index.js +125 -125
- package/dist/esm/index.js.map +1 -1
- package/package.json +5 -1
|
@@ -184,6 +184,10 @@
|
|
|
184
184
|
content: "\E185";
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
+
.netskrafl-container .glyphicon-brush:before {
|
|
188
|
+
content: "\E235";
|
|
189
|
+
}
|
|
190
|
+
|
|
187
191
|
.netskrafl-container .glyphicon-hourglass:before {
|
|
188
192
|
content: "\231B";
|
|
189
193
|
}
|
|
@@ -327,6 +331,10 @@
|
|
|
327
331
|
|
|
328
332
|
*/
|
|
329
333
|
|
|
334
|
+
/* ==========================================================================
|
|
335
|
+
CSS CUSTOM PROPERTIES - DEFAULT THEME (Málstaður)
|
|
336
|
+
========================================================================== */
|
|
337
|
+
|
|
330
338
|
div.netskrafl-container {
|
|
331
339
|
--logo-primary: #c94314;
|
|
332
340
|
--logo-primary-light: hsl(from var(--logo-primary) h s 75%);
|
|
@@ -352,8 +360,11 @@ div.netskrafl-container {
|
|
|
352
360
|
--header-color: hsl(from var(--malfridur-accent) h 50% 60%);
|
|
353
361
|
--header-hover-color: hsl(from var(--malfridur-accent) h 50% 70%);
|
|
354
362
|
--humangrad-color: hsl(from var(--malfridur-accent) h 55% 65%);
|
|
363
|
+
--scorewrapper-background: var(--humangrad-color);
|
|
364
|
+
--player-btn-color: white;
|
|
355
365
|
--stats-foreground: hsl(from var(--malfridur-accent) h 45% 45%);
|
|
356
366
|
--link-hover-color: #006db8;
|
|
367
|
+
--iconlink-color: var(--malfridur-accent);
|
|
357
368
|
--double-word-color: hsl(from var(--malfridur-secondary) h 85% 80%);
|
|
358
369
|
--triple-word-color: hsl(from var(--malfridur-secondary) h 85% 65%);
|
|
359
370
|
--double-letter-color: hsl(from var(--svarkur-accent) h 50% 75%);
|
|
@@ -364,11 +375,22 @@ div.netskrafl-container {
|
|
|
364
375
|
--pass-button: hsl(from var(--malfridur-secondary) h 85% 50%);
|
|
365
376
|
--option-selected: hsl(from var(--svarkur-secondary) h 80% 35%);
|
|
366
377
|
--human-color: hsl(from var(--svarkur-secondary) h s 35%);
|
|
378
|
+
--autoplayer-color: #b6676d;
|
|
367
379
|
--list-header-background: hsl(from var(--malfridur-secondary) h 85% 90%);
|
|
368
380
|
--list-header-bottom: hsl(from var(--malfridur-secondary) h 90% 55%);
|
|
369
381
|
--tile-background: hsl(from var(--logo-secondary) h 70% 92%);
|
|
382
|
+
--tab-games-background: var(--tile-background);
|
|
383
|
+
--rack-tile-background: white;
|
|
370
384
|
--board-background: #e4eaf0;
|
|
385
|
+
--stats-item-background: var(--board-background);
|
|
386
|
+
--board-cell-border-width: 1.5px;
|
|
387
|
+
--board-cell-border-radius: 2.5px;
|
|
388
|
+
--board-cell-border-width-lg: 2px;
|
|
389
|
+
--board-cell-border-radius-lg: 3.5px;
|
|
390
|
+
--board-cell-border-color: white;
|
|
391
|
+
--board-tile-line-height-lg: 30px;
|
|
371
392
|
--tab-background: #f3f3f6;
|
|
393
|
+
--rack-slot-background: #f3f3f6;
|
|
372
394
|
--header-background: #dde1e4;
|
|
373
395
|
--two-letter-background: hsl(from var(--malfridur-green) h 20% 90%);
|
|
374
396
|
--header-green: hsl(from var(--malfridur-green) h 80% 35%);
|
|
@@ -376,12 +398,414 @@ div.netskrafl-container {
|
|
|
376
398
|
--rack-shadow: #afb7cad0;
|
|
377
399
|
--focus-border: var(--triple-word-color);
|
|
378
400
|
--light-background: #b9d9dc;
|
|
401
|
+
--dialog-background-color: #fafafa;
|
|
402
|
+
--oddlist-background: var(--board-background);
|
|
403
|
+
--evenlist-background: #f7f0de;
|
|
404
|
+
--toggler-background: #b9d9dc;
|
|
405
|
+
--toggler-selected: var(--option-selected);
|
|
406
|
+
--tab-movelist-background: var(--board-background);
|
|
407
|
+
/* Move list gradients - none for default scheme */
|
|
408
|
+
--humangrad-left: none;
|
|
409
|
+
--humangrad-right: none;
|
|
410
|
+
--autoplayergrad-left: none;
|
|
411
|
+
--autoplayergrad-right: none;
|
|
412
|
+
--move-text-color: inherit;
|
|
413
|
+
--total-background-color: transparent;
|
|
414
|
+
--total-margin: 0px;
|
|
415
|
+
--total-human-background: var(--human-color);
|
|
416
|
+
--total-autoplayer-background: var(--autoplayer-color);
|
|
417
|
+
--autoplayer-highlight-color: white;
|
|
418
|
+
--racktile-background: white;
|
|
379
419
|
/* The following two variables are assumed to be defined
|
|
380
420
|
by the container */
|
|
381
421
|
--primary-font: var(--font-lato);
|
|
382
422
|
--number-font: var(--font-open-sans);
|
|
383
423
|
}
|
|
384
424
|
|
|
425
|
+
/* ==========================================================================
|
|
426
|
+
LEGACY COLOR SCHEME (skrafl-curry)
|
|
427
|
+
==========================================================================
|
|
428
|
+
This color scheme is based on the original Netskrafl "curry" theme,
|
|
429
|
+
with warm yellows and oranges. Color values are computed from the
|
|
430
|
+
original Less variables in skrafl-curry.less.
|
|
431
|
+
|
|
432
|
+
Original Less color definitions:
|
|
433
|
+
@board-background: lighten(#afb8bf, 2%) -> #b5bdc4
|
|
434
|
+
@double-word: desaturate(#f7d2d8, 10%) -> #f3d4d9
|
|
435
|
+
@triple-word: desaturate(#ee4f68, 15%) -> #da5e72
|
|
436
|
+
@double-letter: desaturate(#78aee6, 10%) -> #82add9
|
|
437
|
+
@triple-letter: desaturate(#006db8, 15%) -> #0e6aa8
|
|
438
|
+
@tile: lighten(#e4ad87, 5%) -> #eabc9c
|
|
439
|
+
@freshtile: desaturate(darken(#7ad3b7, 5%), 5%) -> #6cc8ab
|
|
440
|
+
@racktile: #fcce43
|
|
441
|
+
@container: #fff1dc
|
|
442
|
+
@pass-btn: #ffa03b
|
|
443
|
+
@hover-link: #ffa03b
|
|
444
|
+
@theme1: #fcf0cd (light cream)
|
|
445
|
+
@theme3: #fce5cb (light peach)
|
|
446
|
+
@theme5: desaturate(darken(@theme3, 10%), 10%) -> #f0cfa4
|
|
447
|
+
========================================================================== */
|
|
448
|
+
|
|
449
|
+
div.netskrafl-container.legacy-colors {
|
|
450
|
+
/* Board and square colors */
|
|
451
|
+
--board-background: #b5bdc4;
|
|
452
|
+
--double-word-color: #f3d4d9;
|
|
453
|
+
--triple-word-color: #da5e72;
|
|
454
|
+
--double-letter-color: #82add9;
|
|
455
|
+
--triple-letter-color: #0e6aa8;
|
|
456
|
+
|
|
457
|
+
/* Tile colors - board tiles are gold/brown, rack tiles are yellow */
|
|
458
|
+
--tile-background: #eabc9c;
|
|
459
|
+
--tab-games-background: #d2d2cd;
|
|
460
|
+
--rack-tile-background: #fcce43;
|
|
461
|
+
--blank-tile: #777777;
|
|
462
|
+
|
|
463
|
+
/* Container and UI backgrounds */
|
|
464
|
+
--container-bg-color: #fff1dc;
|
|
465
|
+
--tab-background: #f4f4f4;
|
|
466
|
+
--rack-slot-background: #b5bdc4;
|
|
467
|
+
--stats-item-background: #ece8e0;
|
|
468
|
+
--header-background: #d6d1c4;
|
|
469
|
+
--chat-background: #f4cda0;
|
|
470
|
+
--light-header-color: #fcf0cd;
|
|
471
|
+
--list-header-background: #fcf0cd;
|
|
472
|
+
--two-letter-background: #b9dbcf;
|
|
473
|
+
|
|
474
|
+
/* Buttons and accents */
|
|
475
|
+
--pass-button: #ffa03b;
|
|
476
|
+
--link-hover-color: #ffa03b;
|
|
477
|
+
--iconlink-color: #0e6aa8;
|
|
478
|
+
--ok-button: #47ba96;
|
|
479
|
+
--cancel-button: #da5e72;
|
|
480
|
+
|
|
481
|
+
/* Header and UI element colors - keep distinct player colors */
|
|
482
|
+
--header-color: #82add9;
|
|
483
|
+
--header-hover-color: #9ac0e4;
|
|
484
|
+
--humangrad-color: #8fb8e0;
|
|
485
|
+
--scorewrapper-background: #b5bdc4;
|
|
486
|
+
--player-btn-color: black;
|
|
487
|
+
--stats-foreground: #0e6aa8;
|
|
488
|
+
--header-green: #5ab896;
|
|
489
|
+
--option-selected: #0e6aa8;
|
|
490
|
+
|
|
491
|
+
/* Player colors - @racktile and @freshtile from skrafl-curry */
|
|
492
|
+
--human-color: #fcce43;
|
|
493
|
+
--autoplayer-color: #6cc8ab;
|
|
494
|
+
|
|
495
|
+
/* Shadows and borders */
|
|
496
|
+
--light-shadow: #666666;
|
|
497
|
+
--rack-shadow: #afb7cad0;
|
|
498
|
+
--focus-border: yellow;
|
|
499
|
+
--list-header-bottom: #ffa03b;
|
|
500
|
+
--light-background: #d8efe7;
|
|
501
|
+
|
|
502
|
+
/* Board cell styling - hairline borders, no rounded corners */
|
|
503
|
+
--board-cell-border-width: 1px;
|
|
504
|
+
--board-cell-border-radius: 0;
|
|
505
|
+
--board-cell-border-width-lg: 1px;
|
|
506
|
+
--board-cell-border-radius-lg: 0;
|
|
507
|
+
--board-cell-border-color: #e8e8e8;
|
|
508
|
+
--board-tile-line-height-lg: 32px;
|
|
509
|
+
|
|
510
|
+
/* Dialog backgrounds remain white */
|
|
511
|
+
--dialog-background-color: #fafafa;
|
|
512
|
+
|
|
513
|
+
/* List backgrounds - theme2 and theme1 from skrafl-curry */
|
|
514
|
+
--oddlist-background: #d8efe7;
|
|
515
|
+
--evenlist-background: #fcf0cd;
|
|
516
|
+
|
|
517
|
+
/* Toggler colors - fade(@board-background, 50%) and @triple-letter */
|
|
518
|
+
--toggler-background: rgba(181, 189, 196, 0.5);
|
|
519
|
+
--toggler-selected: #0e6aa8;
|
|
520
|
+
|
|
521
|
+
/* Tab background - uses @background (#d6d1c4) */
|
|
522
|
+
--tab-movelist-background: #d6d1c4;
|
|
523
|
+
|
|
524
|
+
/* Move list gradients for classic scheme */
|
|
525
|
+
--humangrad-left: linear-gradient(to right, var(--human-color), var(--tab-movelist-background), var(--tab-movelist-background));
|
|
526
|
+
--humangrad-right: linear-gradient(to right, var(--tab-movelist-background), var(--tab-movelist-background), var(--human-color));
|
|
527
|
+
--autoplayergrad-left: linear-gradient(to right, var(--autoplayer-color), var(--tab-movelist-background), var(--tab-movelist-background));
|
|
528
|
+
--autoplayergrad-right: linear-gradient(to right, var(--tab-movelist-background), var(--tab-movelist-background), var(--autoplayer-color));
|
|
529
|
+
--move-text-color: black;
|
|
530
|
+
--total-background-color: #b5bdc4;
|
|
531
|
+
--total-margin: 2px;
|
|
532
|
+
--total-human-background: #b5bdc4;
|
|
533
|
+
--total-autoplayer-background: #b5bdc4;
|
|
534
|
+
--autoplayer-highlight-color: black;
|
|
535
|
+
--racktile-background: var(--human-color);
|
|
536
|
+
|
|
537
|
+
/* Button backgrounds for classic scheme - white text on colored background */
|
|
538
|
+
--recallbtn-background: #fbc111;
|
|
539
|
+
--scramblebtn-background: #5894d3;
|
|
540
|
+
--submitexchange-background: #47ba96;
|
|
541
|
+
--submitpass-background: #ffa03b;
|
|
542
|
+
--submitresign-background: #ee4f68;
|
|
543
|
+
|
|
544
|
+
/* ---- Legacy Style Overrides (nested) ---- */
|
|
545
|
+
|
|
546
|
+
/* Button overrides - use classic "white text on colored background" pattern */
|
|
547
|
+
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
div.netskrafl-container.legacy-colors div.recallbtn {
|
|
551
|
+
background-color: var(--recallbtn-background);
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
/* Gáta Dagsins recallbtn needs higher specificity to override gata-dagsins.css */
|
|
555
|
+
|
|
556
|
+
div.netskrafl-container.legacy-colors div.gatadagsins-container div.recallbtn {
|
|
557
|
+
background-color: var(--recallbtn-background);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
/* Gáta Dagsins date navigator - use lighter background */
|
|
561
|
+
|
|
562
|
+
div.netskrafl-container.legacy-colors div.gatadagsins-container .date-navigator {
|
|
563
|
+
background-color: var(--stats-item-background);
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
/* Gáta Dagsins mobile date navigator - keep transparent */
|
|
567
|
+
|
|
568
|
+
div.netskrafl-container.legacy-colors div.gatadagsins-container .mobile-date-nav-container .date-navigator {
|
|
569
|
+
background-color: transparent;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
/* Gáta Dagsins active tab - use lighter background */
|
|
573
|
+
|
|
574
|
+
div.netskrafl-container.legacy-colors div.gatadagsins-container div.tab-item.active {
|
|
575
|
+
background-color: var(--stats-item-background);
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
div.netskrafl-container.legacy-colors div.scramblebtn {
|
|
579
|
+
background-color: var(--scramblebtn-background);
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
div.netskrafl-container.legacy-colors div.submitexchange {
|
|
583
|
+
background-color: var(--submitexchange-background);
|
|
584
|
+
color: white;
|
|
585
|
+
border-color: var(--submitexchange-background);
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
div.netskrafl-container.legacy-colors div.submitpass {
|
|
589
|
+
background-color: var(--submitpass-background);
|
|
590
|
+
color: white;
|
|
591
|
+
border-color: var(--submitpass-background);
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
div.netskrafl-container.legacy-colors div.submitresign {
|
|
595
|
+
background-color: var(--submitresign-background);
|
|
596
|
+
color: white;
|
|
597
|
+
border-color: var(--submitresign-background);
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
/* Disabled state overrides */
|
|
601
|
+
|
|
602
|
+
div.netskrafl-container.legacy-colors div.submitexchange.disabled,div.netskrafl-container.legacy-colors div.submitpass.disabled,div.netskrafl-container.legacy-colors div.submitresign.disabled {
|
|
603
|
+
background-color: var(--board-background);
|
|
604
|
+
border-color: var(--board-background);
|
|
605
|
+
color: white;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
/* Move list styling - smaller total box with vertical margins to show gradient */
|
|
609
|
+
|
|
610
|
+
div.netskrafl-container.legacy-colors div.move span.total {
|
|
611
|
+
line-height: 17px;
|
|
612
|
+
margin-top: 1.5px;
|
|
613
|
+
margin-bottom: 1.5px;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
/* Pass notification - use pass-button orange instead of triple-word red */
|
|
617
|
+
|
|
618
|
+
div.netskrafl-container.legacy-colors div.pass {
|
|
619
|
+
background-color: var(--pass-button);
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
div.netskrafl-container.legacy-colors div.pass span.yesnobutton,div.netskrafl-container.legacy-colors div.pass-last span.yesnobutton {
|
|
623
|
+
color: var(--pass-button);
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
/* Exchange notification - use green instead of human-color yellow */
|
|
627
|
+
|
|
628
|
+
div.netskrafl-container.legacy-colors div.exchange {
|
|
629
|
+
background-color: var(--submitexchange-background);
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
div.netskrafl-container.legacy-colors div.exchange span.yesnobutton {
|
|
633
|
+
color: var(--submitexchange-background);
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
/* Blank-form dialog - light background with grey tile rack */
|
|
637
|
+
|
|
638
|
+
div.netskrafl-container.legacy-colors div#blank-form {
|
|
639
|
+
background-color: #fcfdfd;
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
div.netskrafl-container.legacy-colors div.blank-rack {
|
|
643
|
+
background-color: var(--board-background);
|
|
644
|
+
bottom: auto;
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
/* Score display - use board-background color instead of blank-tile */
|
|
648
|
+
|
|
649
|
+
div.netskrafl-container.legacy-colors div.score {
|
|
650
|
+
color: var(--board-background);
|
|
651
|
+
border-style: solid;
|
|
652
|
+
border-width: 2px;
|
|
653
|
+
border-color: var(--board-background);
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
div.netskrafl-container.legacy-colors div.score.word-good {
|
|
657
|
+
color: var(--ok-button);
|
|
658
|
+
border-color: var(--ok-button);
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
div.netskrafl-container.legacy-colors div.score.word-great {
|
|
662
|
+
border-color: var(--ok-button);
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
div.netskrafl-container.legacy-colors div.score.manual {
|
|
666
|
+
color: var(--triple-letter-color);
|
|
667
|
+
border-color: var(--triple-letter-color);
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
div.netskrafl-container.legacy-colors div.score.opponent {
|
|
671
|
+
color: black;
|
|
672
|
+
border-color: black;
|
|
673
|
+
background-color: var(--ok-button);
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
div.netskrafl-container.legacy-colors div.score.localplayer {
|
|
677
|
+
color: black;
|
|
678
|
+
border-color: black;
|
|
679
|
+
background-color: var(--human-color);
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
/* Game UI overrides */
|
|
683
|
+
|
|
684
|
+
div.netskrafl-container.legacy-colors div.gameover {
|
|
685
|
+
background-color: var(--pass-button);
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
div.netskrafl-container.legacy-colors div.navbtn {
|
|
689
|
+
background-color: var(--pass-button);
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
div.netskrafl-container.legacy-colors div.highlight0 {
|
|
693
|
+
background-color: var(--human-color);
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
div.netskrafl-container.legacy-colors div.reviewhdr {
|
|
697
|
+
background-color: var(--pass-button);
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
div.netskrafl-container.legacy-colors span.movenumber {
|
|
701
|
+
color: var(--pass-button);
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
div.netskrafl-container.legacy-colors div.reviewhdr span.wordmove {
|
|
705
|
+
color: inherit;
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
div.netskrafl-container.legacy-colors div.netskrafl-freshtile {
|
|
709
|
+
background-color: var(--autoplayer-color);
|
|
710
|
+
color: black;
|
|
711
|
+
}
|
|
712
|
+
|
|
713
|
+
div.netskrafl-container.legacy-colors div.rack td.opp {
|
|
714
|
+
border-width: 2px;
|
|
715
|
+
border-color: var(--middle-shadow);
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
div.netskrafl-container.legacy-colors div.highlight1.netskrafl-blanktile {
|
|
719
|
+
color: var(--blank-tile);
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
div.netskrafl-container.legacy-colors div.scorediff {
|
|
723
|
+
background-color: var(--cancel-button);
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
div.netskrafl-container.legacy-colors div.posdiff {
|
|
727
|
+
background-color: var(--ok-button);
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
/* Chat overrides */
|
|
731
|
+
|
|
732
|
+
div.netskrafl-container.legacy-colors div.chat-msg.local {
|
|
733
|
+
background-color: #fde69d;
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
div.netskrafl-container.legacy-colors div.chat-msg.remote {
|
|
737
|
+
background-color: #afe1d1;
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
div.netskrafl-container.legacy-colors input.chat-txt {
|
|
741
|
+
border-color: var(--ok-button);
|
|
742
|
+
background-color: white;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
/* Board tile line-height override for mobile */
|
|
746
|
+
|
|
747
|
+
div.netskrafl-container.legacy-colors div.board div.netskrafl-tile {
|
|
748
|
+
line-height: 22px;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
div.netskrafl-container.legacy-colors div.board div.letterscore {
|
|
752
|
+
right: 2px;
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
/* Rack tile overrides for mobile */
|
|
756
|
+
|
|
757
|
+
div.netskrafl-container.legacy-colors div.rack div.netskrafl-tile {
|
|
758
|
+
line-height: 34px;
|
|
759
|
+
margin-left: 0;
|
|
760
|
+
padding-right: 0;
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
/* Center square icon color */
|
|
764
|
+
|
|
765
|
+
div.netskrafl-container.legacy-colors table.board td.center:empty {
|
|
766
|
+
color: var(--triple-word-color);
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
/* Exchange-selected tile background */
|
|
770
|
+
|
|
771
|
+
div.netskrafl-container.legacy-colors div.netskrafl-xchgsel {
|
|
772
|
+
background-color: var(--submitexchange-background);
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
/* Move list other move text color */
|
|
776
|
+
|
|
777
|
+
div.netskrafl-container.legacy-colors div.movelist span.othermove {
|
|
778
|
+
color: black;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
/* Tile count background in top-left area */
|
|
782
|
+
|
|
783
|
+
div.netskrafl-container.legacy-colors div.at-top-left div.tilecount {
|
|
784
|
+
background-color: #babab2;
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
/* Challenge dialog header */
|
|
788
|
+
|
|
789
|
+
div.netskrafl-container.legacy-colors div.chall-hdr h2 {
|
|
790
|
+
color: black;
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
/* Challenge time selection - use gold color when selected */
|
|
794
|
+
|
|
795
|
+
div.netskrafl-container.legacy-colors div.chall-time.selected {
|
|
796
|
+
background-color: var(--human-color);
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
/* Help tabs links - use darker blue for better readability on white */
|
|
800
|
+
|
|
801
|
+
div.netskrafl-container.legacy-colors div.help-tabs .ui-tabs-panel a:link,div.netskrafl-container.legacy-colors div.help-tabs .ui-tabs-panel a:visited {
|
|
802
|
+
color: #2266aa;
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
/* ==========================================================================
|
|
806
|
+
BASE CONTAINER STYLES
|
|
807
|
+
========================================================================== */
|
|
808
|
+
|
|
385
809
|
div.netskrafl-container {
|
|
386
810
|
position: relative;
|
|
387
811
|
top: 0;
|
|
@@ -402,6 +826,10 @@ div.netskrafl-container * {
|
|
|
402
826
|
box-sizing: content-box;
|
|
403
827
|
}
|
|
404
828
|
|
|
829
|
+
/* --------------------------------------------------------------------------
|
|
830
|
+
Reset and base element styles
|
|
831
|
+
-------------------------------------------------------------------------- */
|
|
832
|
+
|
|
405
833
|
.netskrafl-container ol,
|
|
406
834
|
.netskrafl-container ul {
|
|
407
835
|
list-style: initial;
|
|
@@ -421,6 +849,10 @@ div.netskrafl-container * {
|
|
|
421
849
|
height: 100%;
|
|
422
850
|
}
|
|
423
851
|
|
|
852
|
+
/* --------------------------------------------------------------------------
|
|
853
|
+
Utility classes and animations
|
|
854
|
+
-------------------------------------------------------------------------- */
|
|
855
|
+
|
|
424
856
|
.netskrafl-container div#board-background {
|
|
425
857
|
height: 100%;
|
|
426
858
|
width: 100%;
|
|
@@ -530,7 +962,7 @@ div.netskrafl-container * {
|
|
|
530
962
|
border-bottom-width: 0;
|
|
531
963
|
padding: 0;
|
|
532
964
|
white-space: nowrap;
|
|
533
|
-
box-shadow: 1px 2px 4px 1px
|
|
965
|
+
box-shadow: 1px 2px 4px 1px var(--rack-shadow);
|
|
534
966
|
}
|
|
535
967
|
|
|
536
968
|
.netskrafl-container .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
|
|
@@ -861,6 +1293,10 @@ div.netskrafl-container * {
|
|
|
861
1293
|
}
|
|
862
1294
|
}
|
|
863
1295
|
|
|
1296
|
+
/* --------------------------------------------------------------------------
|
|
1297
|
+
Header and logo
|
|
1298
|
+
-------------------------------------------------------------------------- */
|
|
1299
|
+
|
|
864
1300
|
.netskrafl-container div.header-logo {
|
|
865
1301
|
display: block;
|
|
866
1302
|
}
|
|
@@ -950,7 +1386,7 @@ div.netskrafl-container * {
|
|
|
950
1386
|
}
|
|
951
1387
|
|
|
952
1388
|
.netskrafl-container table.bag-content.empty td {
|
|
953
|
-
background-color: var(--
|
|
1389
|
+
background-color: var(--autoplayer-color);
|
|
954
1390
|
/* Opponent's color */
|
|
955
1391
|
color: white;
|
|
956
1392
|
}
|
|
@@ -967,7 +1403,9 @@ div.netskrafl-container * {
|
|
|
967
1403
|
display: none;
|
|
968
1404
|
}
|
|
969
1405
|
|
|
970
|
-
/*
|
|
1406
|
+
/* --------------------------------------------------------------------------
|
|
1407
|
+
Board square colors (bonus squares)
|
|
1408
|
+
-------------------------------------------------------------------------- */
|
|
971
1409
|
|
|
972
1410
|
.netskrafl-container #H8,
|
|
973
1411
|
.netskrafl-container #B2,
|
|
@@ -1107,6 +1545,10 @@ div.netskrafl-container * {
|
|
|
1107
1545
|
height: 36px;
|
|
1108
1546
|
}
|
|
1109
1547
|
|
|
1548
|
+
/* --------------------------------------------------------------------------
|
|
1549
|
+
Board area and tiles
|
|
1550
|
+
-------------------------------------------------------------------------- */
|
|
1551
|
+
|
|
1110
1552
|
.netskrafl-container div.info {
|
|
1111
1553
|
display: none;
|
|
1112
1554
|
}
|
|
@@ -1135,18 +1577,10 @@ div.netskrafl-tile {
|
|
|
1135
1577
|
position: relative;
|
|
1136
1578
|
background-color: var(--tile-background);
|
|
1137
1579
|
font-family: var(--number-font);
|
|
1138
|
-
font-size: 17px;
|
|
1139
|
-
line-height: 21px;
|
|
1140
1580
|
font-weight: 700;
|
|
1141
1581
|
text-align: center;
|
|
1142
1582
|
text-transform: uppercase;
|
|
1143
|
-
height: 21px;
|
|
1144
|
-
width: 21px;
|
|
1145
1583
|
overflow: hidden;
|
|
1146
|
-
margin: 0;
|
|
1147
|
-
padding: 0;
|
|
1148
|
-
margin-left: -1px;
|
|
1149
|
-
padding-right: 1px;
|
|
1150
1584
|
vertical-align: top;
|
|
1151
1585
|
cursor: default;
|
|
1152
1586
|
}
|
|
@@ -1157,6 +1591,20 @@ div.netskrafl-tile.netskrafl-extra-wide {
|
|
|
1157
1591
|
text-indent: -6px;
|
|
1158
1592
|
}
|
|
1159
1593
|
|
|
1594
|
+
/* Board tiles fill their entire cell */
|
|
1595
|
+
|
|
1596
|
+
div.board div.netskrafl-tile {
|
|
1597
|
+
display: block;
|
|
1598
|
+
box-sizing: border-box;
|
|
1599
|
+
font-size: 17px;
|
|
1600
|
+
line-height: 21px;
|
|
1601
|
+
height: 100%;
|
|
1602
|
+
width: 100%;
|
|
1603
|
+
margin: 0;
|
|
1604
|
+
padding: 0;
|
|
1605
|
+
text-indent: -3px;
|
|
1606
|
+
}
|
|
1607
|
+
|
|
1160
1608
|
div.board div.netskrafl-tile.netskrafl-wide,
|
|
1161
1609
|
div.board div.netskrafl-tile.netskrafl-extra-wide {
|
|
1162
1610
|
/* Wide letter tile on the board */
|
|
@@ -1174,17 +1622,24 @@ div.rack div.netskrafl-tile {
|
|
|
1174
1622
|
padding-right: 2px;
|
|
1175
1623
|
}
|
|
1176
1624
|
|
|
1625
|
+
div.rack div.netskrafl-freshtile {
|
|
1626
|
+
background-color: var(--autoplayer-color);
|
|
1627
|
+
}
|
|
1628
|
+
|
|
1177
1629
|
/* While dragging a tile, show it in the rack form factor */
|
|
1178
1630
|
|
|
1179
1631
|
div.netskrafl-tile.dragging {
|
|
1180
1632
|
position: fixed;
|
|
1181
1633
|
z-index: 10;
|
|
1182
1634
|
font-family: var(--font-open-sans);
|
|
1183
|
-
/* Note: We can't use Netskrafl-specific variables here because this
|
|
1184
|
-
becomes a child of the document body element when dragging, and
|
|
1185
|
-
the style variables are not in scope at the body level.
|
|
1635
|
+
/* Note: We can't use Netskrafl-specific CSS variables here because this
|
|
1636
|
+
element becomes a child of the document body element when dragging, and
|
|
1637
|
+
the style variables are not in scope at the body level. Therefore, these
|
|
1638
|
+
colors are intentionally hardcoded to match the default theme values.
|
|
1639
|
+
For legacy theme support, the .legacy-colors class is added dynamically
|
|
1640
|
+
during drag operations (see dragging.legacy-colors rules below). */
|
|
1186
1641
|
box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
|
|
1187
|
-
border-color: #09814a; /*
|
|
1642
|
+
border-color: #09814a; /* Matches default --ok-button */
|
|
1188
1643
|
border-radius: 5px;
|
|
1189
1644
|
border-width: 3px;
|
|
1190
1645
|
border-style: solid;
|
|
@@ -1196,31 +1651,53 @@ div.netskrafl-tile.dragging {
|
|
|
1196
1651
|
padding-top: 1px;
|
|
1197
1652
|
height: 38px;
|
|
1198
1653
|
width: 38px;
|
|
1199
|
-
/* The following is necessary as the tile is a child of the body,
|
|
1200
|
-
not of the netskrafl-container div */
|
|
1201
1654
|
box-sizing: content-box;
|
|
1202
1655
|
}
|
|
1203
1656
|
|
|
1204
1657
|
div.netskrafl-tile.dragging.no-drop {
|
|
1205
|
-
border-color: #c07359; /*
|
|
1658
|
+
border-color: #c07359; /* Matches default --cancel-button */
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1661
|
+
div.netskrafl-tile.dragging.legacy-colors {
|
|
1662
|
+
/* Legacy color scheme: hardcode values since CSS variables are out of
|
|
1663
|
+
scope when the tile is a child of the document body during dragging */
|
|
1664
|
+
background-color: #fcce43; /* Matches legacy --rack-tile-background */
|
|
1665
|
+
border-color: #47ba96; /* Matches legacy --ok-button */
|
|
1666
|
+
}
|
|
1667
|
+
|
|
1668
|
+
div.netskrafl-tile.dragging.legacy-colors.no-drop {
|
|
1669
|
+
border-color: #da5e72; /* Matches legacy --cancel-button */
|
|
1206
1670
|
}
|
|
1207
1671
|
|
|
1208
1672
|
.netskrafl-container div.board td,
|
|
1209
1673
|
.netskrafl-container table.board td {
|
|
1210
|
-
|
|
1674
|
+
/* Use border-box so border is included in width/height */
|
|
1675
|
+
box-sizing: border-box;
|
|
1676
|
+
width: 24px;
|
|
1677
|
+
min-width: 24px;
|
|
1678
|
+
max-width: 24px;
|
|
1679
|
+
height: 24px;
|
|
1680
|
+
min-height: 24px;
|
|
1681
|
+
max-height: 24px;
|
|
1211
1682
|
overflow: hidden;
|
|
1212
1683
|
background-color: var(--board-background);
|
|
1213
1684
|
padding: 0;
|
|
1214
1685
|
border-style: solid;
|
|
1215
|
-
border-color:
|
|
1216
|
-
border-width:
|
|
1217
|
-
border-radius:
|
|
1686
|
+
border-color: var(--board-cell-border-color);
|
|
1687
|
+
border-width: var(--board-cell-border-width);
|
|
1688
|
+
border-radius: var(--board-cell-border-radius);
|
|
1218
1689
|
}
|
|
1219
1690
|
|
|
1220
1691
|
.netskrafl-container div.rack td {
|
|
1221
|
-
|
|
1692
|
+
box-sizing: border-box;
|
|
1222
1693
|
width: 36px;
|
|
1694
|
+
min-width: 36px;
|
|
1695
|
+
max-width: 36px;
|
|
1696
|
+
height: 36px;
|
|
1697
|
+
min-height: 36px;
|
|
1698
|
+
max-height: 36px;
|
|
1223
1699
|
border-width: 0px;
|
|
1700
|
+
border-radius: 3px;
|
|
1224
1701
|
box-shadow: 2px 2px 4px 0 var(--rack-shadow);
|
|
1225
1702
|
}
|
|
1226
1703
|
|
|
@@ -1310,6 +1787,10 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1310
1787
|
line-height: 9px;
|
|
1311
1788
|
}
|
|
1312
1789
|
|
|
1790
|
+
/* --------------------------------------------------------------------------
|
|
1791
|
+
Score display and word check
|
|
1792
|
+
-------------------------------------------------------------------------- */
|
|
1793
|
+
|
|
1313
1794
|
.netskrafl-container div.word-check {
|
|
1314
1795
|
display: none;
|
|
1315
1796
|
position: absolute;
|
|
@@ -1481,7 +1962,12 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1481
1962
|
padding-right: 6px;
|
|
1482
1963
|
}
|
|
1483
1964
|
|
|
1484
|
-
|
|
1965
|
+
/* --------------------------------------------------------------------------
|
|
1966
|
+
Rack buttons - shared base styles
|
|
1967
|
+
-------------------------------------------------------------------------- */
|
|
1968
|
+
|
|
1969
|
+
.netskrafl-container div.recallbtn,
|
|
1970
|
+
.netskrafl-container div.scramblebtn {
|
|
1485
1971
|
display: none;
|
|
1486
1972
|
font-size: 18px;
|
|
1487
1973
|
font-weight: 700;
|
|
@@ -1493,34 +1979,20 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1493
1979
|
cursor: pointer;
|
|
1494
1980
|
width: 45px;
|
|
1495
1981
|
height: 40px;
|
|
1496
|
-
background-color: var(--triple-word-color);
|
|
1497
1982
|
}
|
|
1498
1983
|
|
|
1499
|
-
.netskrafl-container div.
|
|
1500
|
-
|
|
1501
|
-
margin-right: auto;
|
|
1502
|
-
/* Left-align the button */
|
|
1984
|
+
.netskrafl-container div.recallbtn {
|
|
1985
|
+
background-color: var(--triple-word-color);
|
|
1503
1986
|
}
|
|
1504
1987
|
|
|
1505
1988
|
.netskrafl-container div.scramblebtn {
|
|
1506
|
-
display: none;
|
|
1507
|
-
font-size: 18px;
|
|
1508
|
-
font-weight: 700;
|
|
1509
|
-
color: white;
|
|
1510
|
-
margin: 0;
|
|
1511
|
-
align-items: center;
|
|
1512
|
-
justify-content: center;
|
|
1513
|
-
border-radius: 5px;
|
|
1514
|
-
cursor: pointer;
|
|
1515
|
-
width: 45px;
|
|
1516
|
-
height: 40px;
|
|
1517
1989
|
background-color: var(--malfridur-accent);
|
|
1518
1990
|
}
|
|
1519
1991
|
|
|
1992
|
+
.netskrafl-container div.rack-left div.recallbtn,
|
|
1520
1993
|
.netskrafl-container div.rack-left div.scramblebtn {
|
|
1521
1994
|
display: flex;
|
|
1522
1995
|
margin-right: auto;
|
|
1523
|
-
/* Left-align the button */
|
|
1524
1996
|
}
|
|
1525
1997
|
|
|
1526
1998
|
.netskrafl-container div.buttons {
|
|
@@ -1541,11 +2013,18 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1541
2013
|
margin-right: 4px;
|
|
1542
2014
|
}
|
|
1543
2015
|
|
|
1544
|
-
|
|
2016
|
+
/* --------------------------------------------------------------------------
|
|
2017
|
+
Bottom action buttons - shared base styles
|
|
2018
|
+
-------------------------------------------------------------------------- */
|
|
2019
|
+
|
|
2020
|
+
.netskrafl-container .bottom-button,
|
|
2021
|
+
.netskrafl-container div.submitresign,
|
|
2022
|
+
.netskrafl-container div.submitexchange,
|
|
2023
|
+
.netskrafl-container div.submitpass,
|
|
2024
|
+
.netskrafl-container div.challenge {
|
|
1545
2025
|
text-align: center;
|
|
1546
2026
|
font-size: 18px;
|
|
1547
2027
|
font-weight: 700;
|
|
1548
|
-
color: white;
|
|
1549
2028
|
margin: 0;
|
|
1550
2029
|
padding: 6px;
|
|
1551
2030
|
padding-top: 8px;
|
|
@@ -1559,80 +2038,28 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1559
2038
|
height: 23px;
|
|
1560
2039
|
}
|
|
1561
2040
|
|
|
2041
|
+
.netskrafl-container .bottom-button {
|
|
2042
|
+
color: white;
|
|
2043
|
+
}
|
|
2044
|
+
|
|
1562
2045
|
.netskrafl-container div.submitresign {
|
|
1563
|
-
text-align: center;
|
|
1564
|
-
font-size: 18px;
|
|
1565
|
-
font-weight: 700;
|
|
1566
|
-
margin: 0;
|
|
1567
|
-
padding: 6px;
|
|
1568
|
-
padding-top: 8px;
|
|
1569
|
-
border-radius: 5px;
|
|
1570
|
-
cursor: pointer;
|
|
1571
|
-
position: absolute;
|
|
1572
|
-
top: 0;
|
|
1573
|
-
background-color: var(--tab-background);
|
|
1574
|
-
border: 1.5px solid var(--header-background);
|
|
1575
|
-
width: 66px;
|
|
1576
|
-
height: 23px;
|
|
1577
2046
|
color: var(--cancel-button);
|
|
1578
|
-
left:
|
|
2047
|
+
left: 0;
|
|
1579
2048
|
}
|
|
1580
2049
|
|
|
1581
2050
|
.netskrafl-container div.submitexchange {
|
|
1582
|
-
text-align: center;
|
|
1583
|
-
font-size: 18px;
|
|
1584
|
-
font-weight: 700;
|
|
1585
|
-
margin: 0;
|
|
1586
|
-
padding: 6px;
|
|
1587
|
-
padding-top: 8px;
|
|
1588
|
-
border-radius: 5px;
|
|
1589
|
-
cursor: pointer;
|
|
1590
|
-
position: absolute;
|
|
1591
|
-
top: 0;
|
|
1592
|
-
left: 93px;
|
|
1593
|
-
background-color: var(--tab-background);
|
|
1594
|
-
border: 1.5px solid var(--header-background);
|
|
1595
|
-
width: 66px;
|
|
1596
|
-
height: 23px;
|
|
1597
2051
|
color: var(--human-color);
|
|
2052
|
+
left: 93px;
|
|
1598
2053
|
}
|
|
1599
2054
|
|
|
1600
2055
|
.netskrafl-container div.submitpass {
|
|
1601
|
-
text-align: center;
|
|
1602
|
-
font-size: 18px;
|
|
1603
|
-
font-weight: 700;
|
|
1604
|
-
margin: 0;
|
|
1605
|
-
padding: 6px;
|
|
1606
|
-
padding-top: 8px;
|
|
1607
|
-
border-radius: 5px;
|
|
1608
|
-
cursor: pointer;
|
|
1609
|
-
position: absolute;
|
|
1610
|
-
top: 0;
|
|
1611
|
-
background-color: var(--tab-background);
|
|
1612
|
-
border: 1.5px solid var(--header-background);
|
|
1613
|
-
width: 66px;
|
|
1614
|
-
height: 23px;
|
|
1615
2056
|
color: var(--pass-button);
|
|
1616
2057
|
left: 186px;
|
|
1617
2058
|
}
|
|
1618
2059
|
|
|
1619
2060
|
.netskrafl-container div.challenge {
|
|
1620
|
-
text-align: center;
|
|
1621
|
-
font-size: 18px;
|
|
1622
|
-
font-weight: 700;
|
|
1623
|
-
margin: 0;
|
|
1624
|
-
padding: 6px;
|
|
1625
|
-
padding-top: 8px;
|
|
1626
|
-
border-radius: 5px;
|
|
1627
|
-
cursor: pointer;
|
|
1628
|
-
position: absolute;
|
|
1629
|
-
top: 0;
|
|
1630
|
-
background-color: var(--tab-background);
|
|
1631
|
-
border: 1.5px solid var(--header-background);
|
|
1632
|
-
width: 66px;
|
|
1633
|
-
height: 23px;
|
|
1634
|
-
left: 279px;
|
|
1635
2061
|
color: var(--triple-letter-color);
|
|
2062
|
+
left: 279px;
|
|
1636
2063
|
}
|
|
1637
2064
|
|
|
1638
2065
|
.netskrafl-container div.challenge.disabled {
|
|
@@ -1669,6 +2096,10 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1669
2096
|
margin-left: 8px;
|
|
1670
2097
|
}
|
|
1671
2098
|
|
|
2099
|
+
/* --------------------------------------------------------------------------
|
|
2100
|
+
Player info and scores
|
|
2101
|
+
-------------------------------------------------------------------------- */
|
|
2102
|
+
|
|
1672
2103
|
.netskrafl-container div.player {
|
|
1673
2104
|
display: block;
|
|
1674
2105
|
padding-left: 4px;
|
|
@@ -1677,7 +2108,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1677
2108
|
min-height: 30px;
|
|
1678
2109
|
font-size: 14px;
|
|
1679
2110
|
font-weight: 400;
|
|
1680
|
-
color:
|
|
2111
|
+
color: var(--player-btn-color);
|
|
1681
2112
|
}
|
|
1682
2113
|
|
|
1683
2114
|
.netskrafl-container div.scorewrapper {
|
|
@@ -1695,7 +2126,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1695
2126
|
line-height: 27px;
|
|
1696
2127
|
font-weight: 400;
|
|
1697
2128
|
text-align: left;
|
|
1698
|
-
color:
|
|
2129
|
+
color: var(--player-btn-color);
|
|
1699
2130
|
overflow: hidden;
|
|
1700
2131
|
position: absolute;
|
|
1701
2132
|
top: 4px;
|
|
@@ -1711,7 +2142,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1711
2142
|
line-height: 27px;
|
|
1712
2143
|
font-weight: 400;
|
|
1713
2144
|
text-align: right;
|
|
1714
|
-
color:
|
|
2145
|
+
color: var(--player-btn-color);
|
|
1715
2146
|
overflow: hidden;
|
|
1716
2147
|
position: absolute;
|
|
1717
2148
|
top: 4px;
|
|
@@ -1756,7 +2187,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1756
2187
|
overflow: hidden;
|
|
1757
2188
|
text-overflow: ellipsis;
|
|
1758
2189
|
background-color: transparent;
|
|
1759
|
-
color:
|
|
2190
|
+
color: var(--player-btn-color);
|
|
1760
2191
|
border-width: 0;
|
|
1761
2192
|
border-radius: 5px;
|
|
1762
2193
|
}
|
|
@@ -1773,11 +2204,6 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1773
2204
|
padding-right: 38px;
|
|
1774
2205
|
}
|
|
1775
2206
|
|
|
1776
|
-
.netskrafl-container div.player-btn.left.tomove,
|
|
1777
|
-
.netskrafl-container div.player-btn.right.tomove {
|
|
1778
|
-
color: white;
|
|
1779
|
-
}
|
|
1780
|
-
|
|
1781
2207
|
.netskrafl-container div.player-btn.left.tomove:hover,
|
|
1782
2208
|
.netskrafl-container div.player-btn.right.tomove:hover {
|
|
1783
2209
|
color: black;
|
|
@@ -1988,6 +2414,10 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1988
2414
|
border-radius: 0 4px 4px 0;
|
|
1989
2415
|
}
|
|
1990
2416
|
|
|
2417
|
+
/* --------------------------------------------------------------------------
|
|
2418
|
+
Right column tabs and game area
|
|
2419
|
+
-------------------------------------------------------------------------- */
|
|
2420
|
+
|
|
1991
2421
|
.netskrafl-container div.right-tab {
|
|
1992
2422
|
position: absolute;
|
|
1993
2423
|
top: -28px;
|
|
@@ -2006,7 +2436,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2006
2436
|
opacity: 0.6;
|
|
2007
2437
|
z-index: 0;
|
|
2008
2438
|
cursor: pointer;
|
|
2009
|
-
box-shadow: 2px 2px 4px 0
|
|
2439
|
+
box-shadow: 2px 2px 4px 0 var(--rack-shadow);
|
|
2010
2440
|
}
|
|
2011
2441
|
|
|
2012
2442
|
.netskrafl-container div.right-tab#tab-board {
|
|
@@ -2016,7 +2446,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2016
2446
|
|
|
2017
2447
|
.netskrafl-container div.right-tab#tab-movelist {
|
|
2018
2448
|
left: 106px;
|
|
2019
|
-
background-color: var(--
|
|
2449
|
+
background-color: var(--tab-movelist-background);
|
|
2020
2450
|
}
|
|
2021
2451
|
|
|
2022
2452
|
.netskrafl-container div.right-tab#tab-twoletter {
|
|
@@ -2026,7 +2456,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2026
2456
|
|
|
2027
2457
|
.netskrafl-container div.right-tab#tab-games {
|
|
2028
2458
|
left: 236px;
|
|
2029
|
-
background-color: var(--
|
|
2459
|
+
background-color: var(--tab-games-background);
|
|
2030
2460
|
}
|
|
2031
2461
|
|
|
2032
2462
|
.netskrafl-container div.right-tab#tab-chat {
|
|
@@ -2080,13 +2510,17 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2080
2510
|
text-transform: uppercase;
|
|
2081
2511
|
}
|
|
2082
2512
|
|
|
2513
|
+
/* --------------------------------------------------------------------------
|
|
2514
|
+
Move list
|
|
2515
|
+
-------------------------------------------------------------------------- */
|
|
2516
|
+
|
|
2083
2517
|
.netskrafl-container div.movelist-container {
|
|
2084
2518
|
position: absolute;
|
|
2085
2519
|
top: 0;
|
|
2086
2520
|
left: 0;
|
|
2087
2521
|
width: 100%;
|
|
2088
2522
|
height: 458px;
|
|
2089
|
-
background-color: var(--
|
|
2523
|
+
background-color: var(--tab-movelist-background);
|
|
2090
2524
|
padding-top: 8px;
|
|
2091
2525
|
padding-bottom: 0;
|
|
2092
2526
|
z-index: 6;
|
|
@@ -2116,13 +2550,17 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2116
2550
|
background-color: var(--container-bg-color);
|
|
2117
2551
|
padding-top: 4px;
|
|
2118
2552
|
width: 100%;
|
|
2119
|
-
height:
|
|
2553
|
+
height: 106px;
|
|
2120
2554
|
}
|
|
2121
2555
|
|
|
2122
2556
|
.netskrafl-container div.game-timed {
|
|
2123
2557
|
display: none;
|
|
2124
2558
|
}
|
|
2125
2559
|
|
|
2560
|
+
/* --------------------------------------------------------------------------
|
|
2561
|
+
Modal dialogs and forms
|
|
2562
|
+
-------------------------------------------------------------------------- */
|
|
2563
|
+
|
|
2126
2564
|
.netskrafl-container div.modal-dialog {
|
|
2127
2565
|
visibility: hidden;
|
|
2128
2566
|
position: fixed;
|
|
@@ -2177,27 +2615,29 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2177
2615
|
filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
|
|
2178
2616
|
}
|
|
2179
2617
|
|
|
2180
|
-
|
|
2618
|
+
/* Common dialog form styles */
|
|
2619
|
+
|
|
2620
|
+
.netskrafl-container .std-form,
|
|
2621
|
+
.netskrafl-container div#blank-form,
|
|
2622
|
+
.netskrafl-container div#chall-form,
|
|
2623
|
+
.netskrafl-container div#promo-form,
|
|
2624
|
+
.netskrafl-container div#wait-form,
|
|
2625
|
+
.netskrafl-container div#thanks-form,
|
|
2626
|
+
.netskrafl-container div#cancel-form,
|
|
2627
|
+
.netskrafl-container div#confirm-form,
|
|
2628
|
+
.netskrafl-container div#conditions-form,
|
|
2629
|
+
.netskrafl-container div#usr-info-form,
|
|
2630
|
+
.netskrafl-container div#user-form,
|
|
2631
|
+
.netskrafl-container div#accept-form {
|
|
2181
2632
|
position: absolute;
|
|
2182
|
-
padding
|
|
2183
|
-
padding-right: 12px;
|
|
2184
|
-
padding-top: 6px;
|
|
2185
|
-
padding-bottom: 6px;
|
|
2633
|
+
padding: 6px 12px;
|
|
2186
2634
|
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
2187
2635
|
font-size: 1em;
|
|
2188
2636
|
z-index: 20;
|
|
2189
|
-
background-color: var(--
|
|
2637
|
+
background-color: var(--dialog-background-color);
|
|
2190
2638
|
}
|
|
2191
2639
|
|
|
2192
2640
|
.netskrafl-container div#blank-form {
|
|
2193
|
-
position: absolute;
|
|
2194
|
-
padding-left: 12px;
|
|
2195
|
-
padding-right: 12px;
|
|
2196
|
-
padding-top: 6px;
|
|
2197
|
-
padding-bottom: 6px;
|
|
2198
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
2199
|
-
font-size: 1em;
|
|
2200
|
-
z-index: 20;
|
|
2201
2641
|
top: 124px;
|
|
2202
2642
|
right: 36.5px;
|
|
2203
2643
|
width: 274px;
|
|
@@ -2205,9 +2645,23 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2205
2645
|
background-color: var(--board-background);
|
|
2206
2646
|
}
|
|
2207
2647
|
|
|
2208
|
-
|
|
2648
|
+
/* --------------------------------------------------------------------------
|
|
2649
|
+
Notification bars - shared base styles
|
|
2650
|
+
-------------------------------------------------------------------------- */
|
|
2651
|
+
|
|
2652
|
+
.netskrafl-container .bottom-message,
|
|
2653
|
+
.netskrafl-container .bold-bottom-message,
|
|
2654
|
+
.netskrafl-container div.error,
|
|
2655
|
+
.netskrafl-container div.resign,
|
|
2656
|
+
.netskrafl-container div.pass,
|
|
2657
|
+
.netskrafl-container div.pass-last,
|
|
2658
|
+
.netskrafl-container div.chall,
|
|
2659
|
+
.netskrafl-container div.chall-info,
|
|
2660
|
+
.netskrafl-container div.exchange,
|
|
2661
|
+
.netskrafl-container div.gameinfo,
|
|
2662
|
+
.netskrafl-container div#congrats,
|
|
2663
|
+
.netskrafl-container div#gameover {
|
|
2209
2664
|
position: absolute;
|
|
2210
|
-
text-align: right;
|
|
2211
2665
|
display: block;
|
|
2212
2666
|
bottom: 0;
|
|
2213
2667
|
left: 0;
|
|
@@ -2216,99 +2670,100 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2216
2670
|
font-size: 14px;
|
|
2217
2671
|
line-height: 26px;
|
|
2218
2672
|
margin: 0;
|
|
2219
|
-
padding
|
|
2220
|
-
padding-left: 4px;
|
|
2221
|
-
padding-right: 4px;
|
|
2222
|
-
padding-bottom: 4px;
|
|
2223
|
-
visibility: hidden;
|
|
2673
|
+
padding: 0 4px 4px 4px;
|
|
2224
2674
|
transform-origin: left top;
|
|
2225
2675
|
animation: slidein 0.4s;
|
|
2226
2676
|
}
|
|
2227
2677
|
|
|
2228
|
-
|
|
2229
|
-
|
|
2678
|
+
/* Notification bars - colored variants with white text */
|
|
2679
|
+
|
|
2680
|
+
.netskrafl-container .bold-bottom-message,
|
|
2681
|
+
.netskrafl-container div.error,
|
|
2682
|
+
.netskrafl-container div.resign,
|
|
2683
|
+
.netskrafl-container div.pass,
|
|
2684
|
+
.netskrafl-container div.pass-last,
|
|
2685
|
+
.netskrafl-container div.chall,
|
|
2686
|
+
.netskrafl-container div.chall-info,
|
|
2687
|
+
.netskrafl-container div.exchange {
|
|
2230
2688
|
text-align: center;
|
|
2231
|
-
display: block;
|
|
2232
|
-
bottom: 0;
|
|
2233
|
-
left: 0;
|
|
2234
|
-
width: 352px;
|
|
2235
|
-
height: 52px;
|
|
2236
|
-
font-size: 14px;
|
|
2237
|
-
line-height: 26px;
|
|
2238
|
-
margin: 0;
|
|
2239
|
-
padding-top: 0px;
|
|
2240
|
-
padding-left: 4px;
|
|
2241
|
-
padding-right: 4px;
|
|
2242
|
-
padding-bottom: 4px;
|
|
2243
|
-
visibility: hidden;
|
|
2244
|
-
transform-origin: left top;
|
|
2245
|
-
animation: slidein 0.4s;
|
|
2246
2689
|
color: white;
|
|
2247
2690
|
border-radius: 4px;
|
|
2248
2691
|
}
|
|
2249
2692
|
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
width: 352px;
|
|
2257
|
-
height: 52px;
|
|
2258
|
-
font-size: 14px;
|
|
2259
|
-
line-height: 26px;
|
|
2260
|
-
margin: 0;
|
|
2261
|
-
padding-top: 0px;
|
|
2262
|
-
padding-left: 4px;
|
|
2263
|
-
padding-right: 4px;
|
|
2264
|
-
padding-bottom: 4px;
|
|
2693
|
+
/* Notification bars - hidden by default */
|
|
2694
|
+
|
|
2695
|
+
.netskrafl-container .bottom-message,
|
|
2696
|
+
.netskrafl-container .bold-bottom-message,
|
|
2697
|
+
.netskrafl-container div.error,
|
|
2698
|
+
.netskrafl-container div.gameinfo {
|
|
2265
2699
|
visibility: hidden;
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2700
|
+
}
|
|
2701
|
+
|
|
2702
|
+
/* Notification bars - individual background colors */
|
|
2703
|
+
|
|
2704
|
+
.netskrafl-container div.error,
|
|
2705
|
+
.netskrafl-container div.resign {
|
|
2270
2706
|
background-color: var(--cancel-button);
|
|
2271
|
-
cursor: pointer;
|
|
2272
2707
|
}
|
|
2273
2708
|
|
|
2274
|
-
.netskrafl-container div.
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2709
|
+
.netskrafl-container div.pass,
|
|
2710
|
+
.netskrafl-container div.pass-last {
|
|
2711
|
+
background-color: var(--triple-word-color);
|
|
2712
|
+
}
|
|
2713
|
+
|
|
2714
|
+
.netskrafl-container div.chall {
|
|
2715
|
+
background-color: var(--triple-letter-color);
|
|
2716
|
+
}
|
|
2717
|
+
|
|
2718
|
+
.netskrafl-container div.chall-info {
|
|
2719
|
+
background-color: var(--ok-button);
|
|
2720
|
+
}
|
|
2721
|
+
|
|
2722
|
+
.netskrafl-container div.exchange {
|
|
2723
|
+
background-color: var(--human-color);
|
|
2724
|
+
}
|
|
2725
|
+
|
|
2726
|
+
.netskrafl-container div.gameinfo {
|
|
2727
|
+
background-color: var(--board-background);
|
|
2728
|
+
}
|
|
2729
|
+
|
|
2730
|
+
/* Notification bars - individual overrides */
|
|
2731
|
+
|
|
2732
|
+
.netskrafl-container .bottom-message {
|
|
2279
2733
|
text-align: right;
|
|
2280
2734
|
}
|
|
2281
2735
|
|
|
2282
|
-
.netskrafl-container div.
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2736
|
+
.netskrafl-container div.error {
|
|
2737
|
+
cursor: pointer;
|
|
2738
|
+
}
|
|
2739
|
+
|
|
2740
|
+
.netskrafl-container div.chall-info {
|
|
2741
|
+
bottom: 60px;
|
|
2742
|
+
width: 311px;
|
|
2743
|
+
line-height: 20px;
|
|
2744
|
+
padding: 2px 24px 0 4px;
|
|
2745
|
+
}
|
|
2746
|
+
|
|
2747
|
+
.netskrafl-container div.gameinfo {
|
|
2748
|
+
text-align: right;
|
|
2749
|
+
bottom: 56px;
|
|
2750
|
+
height: 34px;
|
|
2751
|
+
padding-top: 10px;
|
|
2752
|
+
font-weight: normal;
|
|
2753
|
+
color: white;
|
|
2289
2754
|
}
|
|
2290
2755
|
|
|
2291
2756
|
.netskrafl-container div#congrats,
|
|
2292
2757
|
.netskrafl-container div#gameover {
|
|
2293
|
-
position: absolute;
|
|
2294
2758
|
text-align: center;
|
|
2295
|
-
display: block;
|
|
2296
|
-
bottom: 0;
|
|
2297
|
-
left: 0;
|
|
2298
2759
|
width: 100%;
|
|
2299
|
-
height: 52px;
|
|
2300
2760
|
font-size: 16px;
|
|
2301
|
-
|
|
2302
|
-
margin: 0;
|
|
2303
|
-
padding-top: 0px;
|
|
2304
|
-
padding-left: 4px;
|
|
2305
|
-
padding-right: 4px;
|
|
2306
|
-
padding-bottom: 0px;
|
|
2761
|
+
padding-bottom: 0;
|
|
2307
2762
|
visibility: visible;
|
|
2308
|
-
transform-origin: left top;
|
|
2309
|
-
animation: slidein 0.4s;
|
|
2310
2763
|
}
|
|
2311
2764
|
|
|
2765
|
+
/* Notification bar icons */
|
|
2766
|
+
|
|
2312
2767
|
.netskrafl-container div#congrats span.glyphicon-bookmark {
|
|
2313
2768
|
padding-right: 2px;
|
|
2314
2769
|
color: var(--ok-button);
|
|
@@ -2319,133 +2774,43 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2319
2774
|
color: var(--triple-letter-color);
|
|
2320
2775
|
}
|
|
2321
2776
|
|
|
2322
|
-
|
|
2323
|
-
position: absolute;
|
|
2324
|
-
text-align: center;
|
|
2325
|
-
display: block;
|
|
2326
|
-
bottom: 0;
|
|
2327
|
-
left: 0;
|
|
2328
|
-
width: 352px;
|
|
2329
|
-
height: 52px;
|
|
2330
|
-
font-size: 14px;
|
|
2331
|
-
line-height: 26px;
|
|
2332
|
-
margin: 0;
|
|
2333
|
-
padding-top: 0px;
|
|
2334
|
-
padding-left: 4px;
|
|
2335
|
-
padding-right: 4px;
|
|
2336
|
-
padding-bottom: 4px;
|
|
2337
|
-
transform-origin: left top;
|
|
2338
|
-
animation: slidein 0.4s;
|
|
2339
|
-
color: white;
|
|
2340
|
-
border-radius: 4px;
|
|
2341
|
-
background-color: var(--cancel-button);
|
|
2342
|
-
}
|
|
2343
|
-
|
|
2344
|
-
.netskrafl-container div.pass {
|
|
2345
|
-
position: absolute;
|
|
2346
|
-
text-align: center;
|
|
2347
|
-
display: block;
|
|
2348
|
-
bottom: 0;
|
|
2349
|
-
left: 0;
|
|
2350
|
-
width: 352px;
|
|
2351
|
-
height: 52px;
|
|
2352
|
-
font-size: 14px;
|
|
2353
|
-
line-height: 26px;
|
|
2354
|
-
margin: 0;
|
|
2355
|
-
padding-top: 0px;
|
|
2356
|
-
padding-left: 4px;
|
|
2357
|
-
padding-right: 4px;
|
|
2358
|
-
padding-bottom: 4px;
|
|
2359
|
-
transform-origin: left top;
|
|
2360
|
-
animation: slidein 0.4s;
|
|
2361
|
-
color: white;
|
|
2362
|
-
border-radius: 4px;
|
|
2363
|
-
background-color: var(--triple-word-color);
|
|
2364
|
-
}
|
|
2365
|
-
|
|
2366
|
-
.netskrafl-container div.pass-last {
|
|
2367
|
-
position: absolute;
|
|
2368
|
-
text-align: center;
|
|
2369
|
-
display: block;
|
|
2370
|
-
bottom: 0;
|
|
2371
|
-
left: 0;
|
|
2372
|
-
width: 352px;
|
|
2373
|
-
height: 52px;
|
|
2374
|
-
font-size: 14px;
|
|
2375
|
-
line-height: 26px;
|
|
2376
|
-
margin: 0;
|
|
2377
|
-
padding-top: 0px;
|
|
2378
|
-
padding-left: 4px;
|
|
2379
|
-
padding-right: 4px;
|
|
2380
|
-
padding-bottom: 4px;
|
|
2381
|
-
transform-origin: left top;
|
|
2382
|
-
animation: slidein 0.4s;
|
|
2383
|
-
color: white;
|
|
2384
|
-
border-radius: 4px;
|
|
2385
|
-
background-color: var(--triple-word-color);
|
|
2386
|
-
}
|
|
2777
|
+
/* Opponent turn indicator (not a notification bar) */
|
|
2387
2778
|
|
|
2388
|
-
.netskrafl-container div.
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
left: 0;
|
|
2394
|
-
width: 352px;
|
|
2395
|
-
height: 52px;
|
|
2396
|
-
font-size: 14px;
|
|
2397
|
-
line-height: 26px;
|
|
2398
|
-
margin: 0;
|
|
2399
|
-
padding-top: 0px;
|
|
2400
|
-
padding-left: 4px;
|
|
2401
|
-
padding-right: 4px;
|
|
2402
|
-
padding-bottom: 4px;
|
|
2403
|
-
transform-origin: left top;
|
|
2404
|
-
animation: slidein 0.4s;
|
|
2405
|
-
color: white;
|
|
2406
|
-
border-radius: 4px;
|
|
2407
|
-
background-color: var(--triple-letter-color);
|
|
2779
|
+
.netskrafl-container div.opp-turn {
|
|
2780
|
+
display: inline-block;
|
|
2781
|
+
padding-top: 8px;
|
|
2782
|
+
padding-left: 2px;
|
|
2783
|
+
text-align: left;
|
|
2408
2784
|
}
|
|
2409
2785
|
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2786
|
+
@keyframes oppTurnFlash {
|
|
2787
|
+
0% {
|
|
2788
|
+
opacity: 1;
|
|
2789
|
+
transform: scale(1);
|
|
2790
|
+
}
|
|
2791
|
+
25% {
|
|
2792
|
+
opacity: 1;
|
|
2793
|
+
transform: scale(1.1);
|
|
2794
|
+
}
|
|
2795
|
+
50% {
|
|
2796
|
+
opacity: 0;
|
|
2797
|
+
transform: scale(1.1);
|
|
2798
|
+
}
|
|
2799
|
+
75% {
|
|
2800
|
+
opacity: 1;
|
|
2801
|
+
transform: scale(1.1);
|
|
2802
|
+
}
|
|
2803
|
+
100% {
|
|
2804
|
+
opacity: 1;
|
|
2805
|
+
transform: scale(1);
|
|
2806
|
+
}
|
|
2427
2807
|
}
|
|
2428
2808
|
|
|
2429
|
-
.netskrafl-container div.
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
left: 0;
|
|
2435
|
-
width: 352px;
|
|
2436
|
-
height: 52px;
|
|
2437
|
-
font-size: 14px;
|
|
2438
|
-
line-height: 26px;
|
|
2439
|
-
margin: 0;
|
|
2440
|
-
padding-top: 0px;
|
|
2441
|
-
padding-left: 4px;
|
|
2442
|
-
padding-right: 4px;
|
|
2443
|
-
padding-bottom: 4px;
|
|
2444
|
-
transform-origin: left top;
|
|
2445
|
-
animation: slidein 0.4s;
|
|
2446
|
-
color: white;
|
|
2447
|
-
border-radius: 4px;
|
|
2448
|
-
background-color: var(--human-color);
|
|
2809
|
+
.netskrafl-container div.opp-turn.flashing {
|
|
2810
|
+
color: var(--cancel-button);
|
|
2811
|
+
transform-origin: center left;
|
|
2812
|
+
animation: oppTurnFlash 0.5s ease-in-out;
|
|
2813
|
+
animation-iteration-count: 2;
|
|
2449
2814
|
}
|
|
2450
2815
|
|
|
2451
2816
|
.netskrafl-container div.submitmove#move-mobile {
|
|
@@ -2474,6 +2839,11 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2474
2839
|
color: white;
|
|
2475
2840
|
}
|
|
2476
2841
|
|
|
2842
|
+
.netskrafl-container div.submitmove#move-mobile.word-bad {
|
|
2843
|
+
background-color: var(--cancel-button);
|
|
2844
|
+
color: white;
|
|
2845
|
+
}
|
|
2846
|
+
|
|
2477
2847
|
@keyframes colorPulseMobile {
|
|
2478
2848
|
0% {
|
|
2479
2849
|
transform: scale(1);
|
|
@@ -2539,28 +2909,9 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2539
2909
|
border-radius: 5px;
|
|
2540
2910
|
}
|
|
2541
2911
|
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
display: block;
|
|
2546
|
-
bottom: 56px;
|
|
2547
|
-
left: 0;
|
|
2548
|
-
width: 352px;
|
|
2549
|
-
height: 34px;
|
|
2550
|
-
font-size: 14px;
|
|
2551
|
-
line-height: 26px;
|
|
2552
|
-
margin: 0;
|
|
2553
|
-
padding-top: 10px;
|
|
2554
|
-
padding-left: 4px;
|
|
2555
|
-
padding-right: 4px;
|
|
2556
|
-
padding-bottom: 4px;
|
|
2557
|
-
visibility: hidden;
|
|
2558
|
-
transform-origin: left top;
|
|
2559
|
-
animation: slidein 0.4s;
|
|
2560
|
-
background-color: var(--board-background);
|
|
2561
|
-
font-weight: normal;
|
|
2562
|
-
color: white;
|
|
2563
|
-
}
|
|
2912
|
+
/* --------------------------------------------------------------------------
|
|
2913
|
+
Chat
|
|
2914
|
+
-------------------------------------------------------------------------- */
|
|
2564
2915
|
|
|
2565
2916
|
.netskrafl-container input.chat-txt {
|
|
2566
2917
|
box-sizing: border-box;
|
|
@@ -2616,6 +2967,10 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2616
2967
|
top: 4px;
|
|
2617
2968
|
}
|
|
2618
2969
|
|
|
2970
|
+
/* --------------------------------------------------------------------------
|
|
2971
|
+
Two-letter words reference
|
|
2972
|
+
-------------------------------------------------------------------------- */
|
|
2973
|
+
|
|
2619
2974
|
.netskrafl-container div.twoletter {
|
|
2620
2975
|
position: absolute;
|
|
2621
2976
|
top: 0px;
|
|
@@ -2711,6 +3066,10 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2711
3066
|
display: none;
|
|
2712
3067
|
}
|
|
2713
3068
|
|
|
3069
|
+
/* --------------------------------------------------------------------------
|
|
3070
|
+
List items and game/user lists
|
|
3071
|
+
-------------------------------------------------------------------------- */
|
|
3072
|
+
|
|
2714
3073
|
.netskrafl-container span.list-ts {
|
|
2715
3074
|
display: none;
|
|
2716
3075
|
width: 164px;
|
|
@@ -3016,14 +3375,8 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
3016
3375
|
|
|
3017
3376
|
.netskrafl-container div#chall-form {
|
|
3018
3377
|
position: relative;
|
|
3019
|
-
padding-left: 12px;
|
|
3020
|
-
padding-right: 12px;
|
|
3021
3378
|
padding-top: 8px;
|
|
3022
|
-
padding-bottom: 6px;
|
|
3023
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
3024
3379
|
font-size: 0.85em;
|
|
3025
|
-
z-index: 20;
|
|
3026
|
-
background-color: var(--container-bg-color);
|
|
3027
3380
|
/* left: @margin-small; */
|
|
3028
3381
|
left: auto;
|
|
3029
3382
|
right: auto;
|
|
@@ -3097,15 +3450,6 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
3097
3450
|
}
|
|
3098
3451
|
|
|
3099
3452
|
.netskrafl-container div#promo-form {
|
|
3100
|
-
position: absolute;
|
|
3101
|
-
padding-left: 12px;
|
|
3102
|
-
padding-right: 12px;
|
|
3103
|
-
padding-top: 6px;
|
|
3104
|
-
padding-bottom: 6px;
|
|
3105
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
3106
|
-
font-size: 1em;
|
|
3107
|
-
z-index: 20;
|
|
3108
|
-
background-color: var(--container-bg-color);
|
|
3109
3453
|
top: 64px;
|
|
3110
3454
|
left: 12px;
|
|
3111
3455
|
width: 327px;
|
|
@@ -3218,7 +3562,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
3218
3562
|
left: 0;
|
|
3219
3563
|
width: 100%;
|
|
3220
3564
|
height: 442px;
|
|
3221
|
-
background-color: var(--
|
|
3565
|
+
background-color: var(--tab-games-background);
|
|
3222
3566
|
overflow: auto;
|
|
3223
3567
|
z-index: 2;
|
|
3224
3568
|
padding-top: 12px;
|
|
@@ -3227,15 +3571,6 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
3227
3571
|
}
|
|
3228
3572
|
|
|
3229
3573
|
.netskrafl-container div#wait-form {
|
|
3230
|
-
position: absolute;
|
|
3231
|
-
padding-left: 12px;
|
|
3232
|
-
padding-right: 12px;
|
|
3233
|
-
padding-top: 6px;
|
|
3234
|
-
padding-bottom: 6px;
|
|
3235
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
3236
|
-
font-size: 1em;
|
|
3237
|
-
z-index: 20;
|
|
3238
|
-
background-color: var(--container-bg-color);
|
|
3239
3574
|
top: 8px;
|
|
3240
3575
|
left: 4px;
|
|
3241
3576
|
width: 335px;
|
|
@@ -3336,7 +3671,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
3336
3671
|
|
|
3337
3672
|
div.netskrafl-racktile {
|
|
3338
3673
|
cursor: pointer;
|
|
3339
|
-
background-color:
|
|
3674
|
+
background-color: var(--racktile-background);
|
|
3340
3675
|
}
|
|
3341
3676
|
|
|
3342
3677
|
@keyframes selBlink {
|
|
@@ -3672,7 +4007,7 @@ div.netskrafl-xchgsel {
|
|
|
3672
4007
|
|
|
3673
4008
|
div.netskrafl-freshtile {
|
|
3674
4009
|
color: white;
|
|
3675
|
-
background-color: var(--
|
|
4010
|
+
background-color: var(--autoplayer-color);
|
|
3676
4011
|
opacity: 0;
|
|
3677
4012
|
animation-name: fresh-appear;
|
|
3678
4013
|
animation-duration: 100ms;
|
|
@@ -3692,8 +4027,8 @@ div.netskrafl-freshtile {
|
|
|
3692
4027
|
|
|
3693
4028
|
.netskrafl-container div.highlight1 {
|
|
3694
4029
|
/* Computer (remote) player */
|
|
3695
|
-
color:
|
|
3696
|
-
background-color: var(--
|
|
4030
|
+
color: var(--autoplayer-highlight-color);
|
|
4031
|
+
background-color: var(--autoplayer-color);
|
|
3697
4032
|
}
|
|
3698
4033
|
|
|
3699
4034
|
div.highlight0.netskrafl-blanktile {
|
|
@@ -3703,7 +4038,7 @@ div.highlight0.netskrafl-blanktile {
|
|
|
3703
4038
|
|
|
3704
4039
|
div.highlight1.netskrafl-blanktile {
|
|
3705
4040
|
/* Computer (remote) player */
|
|
3706
|
-
color:
|
|
4041
|
+
color: var(--double-word-color);
|
|
3707
4042
|
}
|
|
3708
4043
|
|
|
3709
4044
|
.netskrafl-container div.highlight0.dim {
|
|
@@ -3970,7 +4305,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
3970
4305
|
height: 18px;
|
|
3971
4306
|
text-align: left;
|
|
3972
4307
|
padding: 11px;
|
|
3973
|
-
background-color: var(--
|
|
4308
|
+
background-color: var(--triple-word-color);
|
|
3974
4309
|
color: white;
|
|
3975
4310
|
font-weight: 400;
|
|
3976
4311
|
font-size: 18px;
|
|
@@ -3979,7 +4314,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
3979
4314
|
|
|
3980
4315
|
.netskrafl-container span.movenumber {
|
|
3981
4316
|
background-color: white;
|
|
3982
|
-
color: var(--
|
|
4317
|
+
color: var(--triple-word-color);
|
|
3983
4318
|
text-align: center;
|
|
3984
4319
|
font-size: 18px;
|
|
3985
4320
|
font-weight: 700;
|
|
@@ -4055,25 +4390,29 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4055
4390
|
}
|
|
4056
4391
|
|
|
4057
4392
|
.netskrafl-container .autoplayercolor {
|
|
4058
|
-
background-color: var(--
|
|
4393
|
+
background-color: var(--autoplayer-color);
|
|
4059
4394
|
}
|
|
4060
4395
|
|
|
4061
4396
|
/* Scores in move list */
|
|
4062
4397
|
|
|
4063
4398
|
.netskrafl-container .humangrad_left {
|
|
4064
4399
|
color: var(--human-color);
|
|
4400
|
+
background: var(--humangrad-left);
|
|
4065
4401
|
}
|
|
4066
4402
|
|
|
4067
4403
|
.netskrafl-container .autoplayergrad_right {
|
|
4068
|
-
color: var(--
|
|
4404
|
+
color: var(--autoplayer-color);
|
|
4405
|
+
background: var(--autoplayergrad-right);
|
|
4069
4406
|
}
|
|
4070
4407
|
|
|
4071
4408
|
.netskrafl-container .humangrad_right {
|
|
4072
4409
|
color: var(--human-color);
|
|
4410
|
+
background: var(--humangrad-right);
|
|
4073
4411
|
}
|
|
4074
4412
|
|
|
4075
4413
|
.netskrafl-container .autoplayergrad_left {
|
|
4076
|
-
color: var(--
|
|
4414
|
+
color: var(--autoplayer-color);
|
|
4415
|
+
background: var(--autoplayergrad-left);
|
|
4077
4416
|
}
|
|
4078
4417
|
|
|
4079
4418
|
.netskrafl-container span.score {
|
|
@@ -4086,19 +4425,21 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4086
4425
|
font-weight: 700;
|
|
4087
4426
|
text-align: right;
|
|
4088
4427
|
line-height: 20px;
|
|
4428
|
+
color: var(--move-text-color);
|
|
4089
4429
|
}
|
|
4090
4430
|
|
|
4091
4431
|
.netskrafl-container span.total {
|
|
4092
4432
|
display: inline-block;
|
|
4093
4433
|
width: 28px;
|
|
4094
4434
|
padding-left: 3px;
|
|
4095
|
-
margin-left:
|
|
4435
|
+
margin-left: var(--total-margin);
|
|
4096
4436
|
padding-right: 6px;
|
|
4097
|
-
margin-right:
|
|
4437
|
+
margin-right: var(--total-margin);
|
|
4098
4438
|
font-weight: 700;
|
|
4099
4439
|
text-align: right;
|
|
4100
4440
|
color: white;
|
|
4101
4441
|
line-height: 20px;
|
|
4442
|
+
background-color: var(--total-background-color);
|
|
4102
4443
|
}
|
|
4103
4444
|
|
|
4104
4445
|
.netskrafl-container div.leftmove span.total {
|
|
@@ -4118,27 +4459,27 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4118
4459
|
}
|
|
4119
4460
|
|
|
4120
4461
|
.netskrafl-container span.total.human {
|
|
4121
|
-
background-color: var(--human-
|
|
4462
|
+
background-color: var(--total-human-background);
|
|
4122
4463
|
}
|
|
4123
4464
|
|
|
4124
4465
|
.netskrafl-container div.leftmove span.total.human {
|
|
4125
|
-
border-left-color: var(--
|
|
4466
|
+
border-left-color: var(--total-human-background);
|
|
4126
4467
|
}
|
|
4127
4468
|
|
|
4128
4469
|
.netskrafl-container div.rightmove span.total.human {
|
|
4129
|
-
border-right-color: var(--
|
|
4470
|
+
border-right-color: var(--total-human-background);
|
|
4130
4471
|
}
|
|
4131
4472
|
|
|
4132
4473
|
.netskrafl-container span.total.autoplayer {
|
|
4133
|
-
background-color: var(--
|
|
4474
|
+
background-color: var(--total-autoplayer-background);
|
|
4134
4475
|
}
|
|
4135
4476
|
|
|
4136
4477
|
.netskrafl-container div.leftmove span.total.autoplayer {
|
|
4137
|
-
border-left-color: var(--
|
|
4478
|
+
border-left-color: var(--total-autoplayer-background);
|
|
4138
4479
|
}
|
|
4139
4480
|
|
|
4140
4481
|
.netskrafl-container div.rightmove span.total.autoplayer {
|
|
4141
|
-
border-right-color: var(--
|
|
4482
|
+
border-right-color: var(--total-autoplayer-background);
|
|
4142
4483
|
}
|
|
4143
4484
|
|
|
4144
4485
|
.netskrafl-container span.highlight {
|
|
@@ -4151,6 +4492,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4151
4492
|
padding-left: 3px;
|
|
4152
4493
|
padding-right: 3px;
|
|
4153
4494
|
font-size: 12px;
|
|
4495
|
+
color: var(--move-text-color);
|
|
4154
4496
|
}
|
|
4155
4497
|
|
|
4156
4498
|
.netskrafl-container span.wordmove i {
|
|
@@ -4160,10 +4502,18 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4160
4502
|
font-size: 16px;
|
|
4161
4503
|
}
|
|
4162
4504
|
|
|
4505
|
+
.netskrafl-container div.reviewhdr span.wordmove i {
|
|
4506
|
+
font-size: 18px;
|
|
4507
|
+
}
|
|
4508
|
+
|
|
4163
4509
|
.netskrafl-container span.othermove {
|
|
4164
4510
|
text-transform: none;
|
|
4165
4511
|
padding-left: 3px;
|
|
4166
|
-
font-size:
|
|
4512
|
+
font-size: 15px;
|
|
4513
|
+
}
|
|
4514
|
+
|
|
4515
|
+
.netskrafl-container div.reviewhdr span.othermove {
|
|
4516
|
+
font-size: 18px;
|
|
4167
4517
|
}
|
|
4168
4518
|
|
|
4169
4519
|
.netskrafl-container div.error p {
|
|
@@ -4281,7 +4631,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4281
4631
|
|
|
4282
4632
|
.netskrafl-container div.score.opponent {
|
|
4283
4633
|
color: white;
|
|
4284
|
-
background-color: var(--
|
|
4634
|
+
background-color: var(--autoplayer-color);
|
|
4285
4635
|
border: none;
|
|
4286
4636
|
}
|
|
4287
4637
|
|
|
@@ -4380,9 +4730,12 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4380
4730
|
padding-right: 3px;
|
|
4381
4731
|
padding-top: 4px;
|
|
4382
4732
|
padding-bottom: 4px;
|
|
4733
|
+
margin-top: 2px;
|
|
4734
|
+
margin-bottom: 2px;
|
|
4383
4735
|
font-weight: 400;
|
|
4384
4736
|
border: solid 2px white;
|
|
4385
4737
|
border-collapse: collapse;
|
|
4738
|
+
border-radius: 5px;
|
|
4386
4739
|
}
|
|
4387
4740
|
|
|
4388
4741
|
.netskrafl-container div.board-color#triple-word {
|
|
@@ -4420,7 +4773,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4420
4773
|
vertical-align: middle;
|
|
4421
4774
|
bottom: 272px;
|
|
4422
4775
|
left: 646px;
|
|
4423
|
-
background-color: var(--
|
|
4776
|
+
background-color: var(--autoplayer-color);
|
|
4424
4777
|
font-size: 18px;
|
|
4425
4778
|
font-weight: normal;
|
|
4426
4779
|
color: white;
|
|
@@ -4731,11 +5084,11 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4731
5084
|
}
|
|
4732
5085
|
|
|
4733
5086
|
.netskrafl-container div.oddlist {
|
|
4734
|
-
background-color: var(--
|
|
5087
|
+
background-color: var(--oddlist-background);
|
|
4735
5088
|
}
|
|
4736
5089
|
|
|
4737
5090
|
.netskrafl-container div.evenlist {
|
|
4738
|
-
background-color:
|
|
5091
|
+
background-color: var(--evenlist-background);
|
|
4739
5092
|
}
|
|
4740
5093
|
|
|
4741
5094
|
.netskrafl-container div.listheader {
|
|
@@ -5154,15 +5507,6 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5154
5507
|
}
|
|
5155
5508
|
|
|
5156
5509
|
.netskrafl-container div#thanks-form {
|
|
5157
|
-
position: absolute;
|
|
5158
|
-
padding-left: 12px;
|
|
5159
|
-
padding-right: 12px;
|
|
5160
|
-
padding-top: 6px;
|
|
5161
|
-
padding-bottom: 6px;
|
|
5162
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
5163
|
-
font-size: 1em;
|
|
5164
|
-
z-index: 20;
|
|
5165
|
-
background-color: var(--container-bg-color);
|
|
5166
5510
|
top: 212px;
|
|
5167
5511
|
right: 224px;
|
|
5168
5512
|
width: 460px;
|
|
@@ -5171,15 +5515,6 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5171
5515
|
}
|
|
5172
5516
|
|
|
5173
5517
|
.netskrafl-container div#cancel-form {
|
|
5174
|
-
position: absolute;
|
|
5175
|
-
padding-left: 12px;
|
|
5176
|
-
padding-right: 12px;
|
|
5177
|
-
padding-top: 6px;
|
|
5178
|
-
padding-bottom: 6px;
|
|
5179
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
5180
|
-
font-size: 1em;
|
|
5181
|
-
z-index: 20;
|
|
5182
|
-
background-color: var(--container-bg-color);
|
|
5183
5518
|
top: 150px;
|
|
5184
5519
|
right: 200px;
|
|
5185
5520
|
width: 508px;
|
|
@@ -5188,15 +5523,6 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5188
5523
|
}
|
|
5189
5524
|
|
|
5190
5525
|
.netskrafl-container div#confirm-form {
|
|
5191
|
-
position: absolute;
|
|
5192
|
-
padding-left: 12px;
|
|
5193
|
-
padding-right: 12px;
|
|
5194
|
-
padding-top: 6px;
|
|
5195
|
-
padding-bottom: 6px;
|
|
5196
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
5197
|
-
font-size: 1em;
|
|
5198
|
-
z-index: 20;
|
|
5199
|
-
background-color: var(--container-bg-color);
|
|
5200
5526
|
top: 236px;
|
|
5201
5527
|
right: 224px;
|
|
5202
5528
|
width: 460px;
|
|
@@ -5205,15 +5531,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5205
5531
|
}
|
|
5206
5532
|
|
|
5207
5533
|
.netskrafl-container div#conditions-form {
|
|
5208
|
-
|
|
5209
|
-
padding-left: 24px;
|
|
5210
|
-
padding-right: 24px;
|
|
5211
|
-
padding-top: 6px;
|
|
5212
|
-
padding-bottom: 6px;
|
|
5213
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
5214
|
-
font-size: 1em;
|
|
5215
|
-
z-index: 20;
|
|
5216
|
-
background-color: var(--container-bg-color);
|
|
5534
|
+
padding: 6px 24px;
|
|
5217
5535
|
top: 80px;
|
|
5218
5536
|
right: 124px;
|
|
5219
5537
|
width: 660px;
|
|
@@ -5222,15 +5540,6 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5222
5540
|
}
|
|
5223
5541
|
|
|
5224
5542
|
.netskrafl-container div#usr-info-form {
|
|
5225
|
-
position: absolute;
|
|
5226
|
-
padding-left: 12px;
|
|
5227
|
-
padding-right: 12px;
|
|
5228
|
-
padding-top: 6px;
|
|
5229
|
-
padding-bottom: 6px;
|
|
5230
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
5231
|
-
font-size: 1em;
|
|
5232
|
-
z-index: 20;
|
|
5233
|
-
background-color: var(--container-bg-color);
|
|
5234
5543
|
top: 16px;
|
|
5235
5544
|
right: 12px;
|
|
5236
5545
|
width: 884px;
|
|
@@ -5535,17 +5844,8 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5535
5844
|
}
|
|
5536
5845
|
|
|
5537
5846
|
.netskrafl-container div#user-form {
|
|
5538
|
-
|
|
5539
|
-
|
|
5540
|
-
padding-right: 12px;
|
|
5541
|
-
padding-top: 6px;
|
|
5542
|
-
padding-bottom: 6px;
|
|
5543
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
5544
|
-
font-size: 1em;
|
|
5545
|
-
z-index: 20;
|
|
5546
|
-
background-color: var(--container-bg-color);
|
|
5547
|
-
top: 40px;
|
|
5548
|
-
right: 64px;
|
|
5847
|
+
top: 32px;
|
|
5848
|
+
left: 160px;
|
|
5549
5849
|
width: 736px;
|
|
5550
5850
|
height: 582px;
|
|
5551
5851
|
}
|
|
@@ -5565,7 +5865,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5565
5865
|
}
|
|
5566
5866
|
|
|
5567
5867
|
.netskrafl-container div#user-unfriend {
|
|
5568
|
-
left:
|
|
5868
|
+
left: 186px;
|
|
5569
5869
|
width: 280px;
|
|
5570
5870
|
/* Override */
|
|
5571
5871
|
border-style: solid;
|
|
@@ -5598,15 +5898,6 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5598
5898
|
}
|
|
5599
5899
|
|
|
5600
5900
|
.netskrafl-container div#accept-form {
|
|
5601
|
-
position: absolute;
|
|
5602
|
-
padding-left: 12px;
|
|
5603
|
-
padding-right: 12px;
|
|
5604
|
-
padding-top: 6px;
|
|
5605
|
-
padding-bottom: 6px;
|
|
5606
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
5607
|
-
font-size: 1em;
|
|
5608
|
-
z-index: 20;
|
|
5609
|
-
background-color: var(--container-bg-color);
|
|
5610
5901
|
top: 8px;
|
|
5611
5902
|
left: 4px;
|
|
5612
5903
|
width: 335px;
|
|
@@ -5679,7 +5970,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5679
5970
|
position: relative;
|
|
5680
5971
|
vertical-align: top;
|
|
5681
5972
|
top: 10px;
|
|
5682
|
-
width:
|
|
5973
|
+
width: 160px;
|
|
5683
5974
|
margin-right: 12px;
|
|
5684
5975
|
overflow: hidden;
|
|
5685
5976
|
text-align: right;
|
|
@@ -5706,7 +5997,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5706
5997
|
}
|
|
5707
5998
|
|
|
5708
5999
|
.netskrafl-container div.explain {
|
|
5709
|
-
margin-left:
|
|
6000
|
+
margin-left: 178px;
|
|
5710
6001
|
margin-bottom: 12px;
|
|
5711
6002
|
font-size: 14px;
|
|
5712
6003
|
text-align: left;
|
|
@@ -5820,7 +6111,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
5820
6111
|
}
|
|
5821
6112
|
|
|
5822
6113
|
.netskrafl-container div.toggler {
|
|
5823
|
-
background-color: var(--
|
|
6114
|
+
background-color: var(--toggler-background);
|
|
5824
6115
|
color: white;
|
|
5825
6116
|
margin-top: 9px;
|
|
5826
6117
|
margin-bottom: 3px;
|
|
@@ -5867,7 +6158,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
5867
6158
|
}
|
|
5868
6159
|
|
|
5869
6160
|
.netskrafl-container div.toggler div.option.selected {
|
|
5870
|
-
background-color: var(--
|
|
6161
|
+
background-color: var(--toggler-selected);
|
|
5871
6162
|
}
|
|
5872
6163
|
|
|
5873
6164
|
.netskrafl-container div.toggler span.glyphicon {
|
|
@@ -5901,12 +6192,12 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
5901
6192
|
|
|
5902
6193
|
.netskrafl-container a.iconlink:link {
|
|
5903
6194
|
text-decoration: none;
|
|
5904
|
-
color: var(--
|
|
6195
|
+
color: var(--iconlink-color);
|
|
5905
6196
|
}
|
|
5906
6197
|
|
|
5907
6198
|
.netskrafl-container a.iconlink:visited {
|
|
5908
6199
|
text-decoration: none;
|
|
5909
|
-
color: var(--
|
|
6200
|
+
color: var(--iconlink-color);
|
|
5910
6201
|
}
|
|
5911
6202
|
|
|
5912
6203
|
.netskrafl-container a.iconlink:hover {
|
|
@@ -6065,7 +6356,9 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6065
6356
|
width: 900px;
|
|
6066
6357
|
}
|
|
6067
6358
|
|
|
6068
|
-
/*
|
|
6359
|
+
/* ==========================================================================
|
|
6360
|
+
RESPONSIVE: Mobile portrait (non-scrollable)
|
|
6361
|
+
========================================================================== */
|
|
6069
6362
|
|
|
6070
6363
|
@media all and (max-width: 1023px) and (min-height: 552px) {
|
|
6071
6364
|
/* On sufficiently large mobile screens, keep the body fixed (unscrollable) */
|
|
@@ -6075,7 +6368,9 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6075
6368
|
}
|
|
6076
6369
|
}
|
|
6077
6370
|
|
|
6078
|
-
/*
|
|
6371
|
+
/* ==========================================================================
|
|
6372
|
+
RESPONSIVE: Mobile portrait (extra tall - iPhone X+)
|
|
6373
|
+
========================================================================== */
|
|
6079
6374
|
|
|
6080
6375
|
@media all and (max-width: 1023px) and (min-height: 632px) {
|
|
6081
6376
|
/* iPhone X or taller */
|
|
@@ -6192,13 +6487,13 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6192
6487
|
}
|
|
6193
6488
|
.netskrafl-container div.chat-container,
|
|
6194
6489
|
.netskrafl-container div.twoletter {
|
|
6195
|
-
height:
|
|
6490
|
+
height: 476px;
|
|
6196
6491
|
}
|
|
6197
6492
|
.netskrafl-container div.games {
|
|
6198
|
-
height:
|
|
6493
|
+
height: 452px;
|
|
6199
6494
|
}
|
|
6200
6495
|
.netskrafl-container div.movelist-container {
|
|
6201
|
-
height:
|
|
6496
|
+
height: 468px;
|
|
6202
6497
|
}
|
|
6203
6498
|
.netskrafl-container div.movelist {
|
|
6204
6499
|
height: 358px;
|
|
@@ -6220,7 +6515,9 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6220
6515
|
}
|
|
6221
6516
|
}
|
|
6222
6517
|
|
|
6223
|
-
/*
|
|
6518
|
+
/* ==========================================================================
|
|
6519
|
+
RESPONSIVE: Mobile landscape
|
|
6520
|
+
========================================================================== */
|
|
6224
6521
|
|
|
6225
6522
|
@media all and (min-width: 667px) and (max-width: 1023px) and (
|
|
6226
6523
|
orientation: landscape
|
|
@@ -6468,17 +6765,20 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6468
6765
|
}
|
|
6469
6766
|
}
|
|
6470
6767
|
|
|
6768
|
+
/* Short landscape screens - scale board down slightly */
|
|
6769
|
+
|
|
6471
6770
|
@media all and (min-width: 667px) and (orientation: landscape) and (
|
|
6472
6771
|
max-height: 360px
|
|
6473
6772
|
) {
|
|
6474
|
-
/* Very short landscape screens - scale board down slightly */
|
|
6475
6773
|
.netskrafl-container div.board {
|
|
6476
6774
|
transform: scale(0.96);
|
|
6477
6775
|
transform-origin: top left;
|
|
6478
6776
|
}
|
|
6479
6777
|
}
|
|
6480
6778
|
|
|
6481
|
-
/*
|
|
6779
|
+
/* ==========================================================================
|
|
6780
|
+
RESPONSIVE: Large screen (iPad and larger, 1024px+)
|
|
6781
|
+
========================================================================== */
|
|
6482
6782
|
|
|
6483
6783
|
@media all and (min-width: 1024px) {
|
|
6484
6784
|
.netskrafl-container .ui-helper-reset {
|
|
@@ -6594,7 +6894,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6594
6894
|
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
6595
6895
|
font-size: 1em;
|
|
6596
6896
|
z-index: 20;
|
|
6597
|
-
background-color: var(--
|
|
6897
|
+
background-color: var(--dialog-background-color);
|
|
6598
6898
|
top: 96px;
|
|
6599
6899
|
left: auto;
|
|
6600
6900
|
right: 202px;
|
|
@@ -6659,12 +6959,15 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6659
6959
|
}
|
|
6660
6960
|
.netskrafl-container div.board td,
|
|
6661
6961
|
.netskrafl-container table.board td {
|
|
6662
|
-
|
|
6663
|
-
|
|
6664
|
-
|
|
6665
|
-
width:
|
|
6666
|
-
|
|
6667
|
-
|
|
6962
|
+
/* Total outer size is 34px, border-box from base rule */
|
|
6963
|
+
width: 34px;
|
|
6964
|
+
min-width: 34px;
|
|
6965
|
+
max-width: 34px;
|
|
6966
|
+
height: 34px;
|
|
6967
|
+
min-height: 34px;
|
|
6968
|
+
max-height: 34px;
|
|
6969
|
+
border-width: var(--board-cell-border-width-lg);
|
|
6970
|
+
border-radius: var(--board-cell-border-radius-lg);
|
|
6668
6971
|
box-shadow: none;
|
|
6669
6972
|
}
|
|
6670
6973
|
.netskrafl-container table.board td.center:empty {
|
|
@@ -6673,7 +6976,6 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6673
6976
|
}
|
|
6674
6977
|
.netskrafl-container table.board tr {
|
|
6675
6978
|
height: 34px;
|
|
6676
|
-
/* 32px + 2 * 1.0px */
|
|
6677
6979
|
}
|
|
6678
6980
|
.netskrafl-container table.bag-content td {
|
|
6679
6981
|
width: 14px;
|
|
@@ -6686,7 +6988,6 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6686
6988
|
}
|
|
6687
6989
|
.netskrafl-container div.rack table.board tr {
|
|
6688
6990
|
height: 34px;
|
|
6689
|
-
/* 32px + 2 * 1.0px */
|
|
6690
6991
|
}
|
|
6691
6992
|
div.netskrafl-tile {
|
|
6692
6993
|
font-size: 24px;
|
|
@@ -6697,24 +6998,35 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6697
6998
|
padding-top: 2px;
|
|
6698
6999
|
padding-right: 2px;
|
|
6699
7000
|
}
|
|
7001
|
+
div.board div.netskrafl-tile {
|
|
7002
|
+
/* Fill the entire board square content area */
|
|
7003
|
+
display: block;
|
|
7004
|
+
box-sizing: border-box;
|
|
7005
|
+
font-size: 24px;
|
|
7006
|
+
height: 100%;
|
|
7007
|
+
width: 100%;
|
|
7008
|
+
padding: 0;
|
|
7009
|
+
margin: 0;
|
|
7010
|
+
/* Adjust line-height for vertical centering (scheme-dependent) */
|
|
7011
|
+
line-height: var(--board-tile-line-height-lg);
|
|
7012
|
+
text-indent: -4px;
|
|
7013
|
+
}
|
|
6700
7014
|
div.rack div.netskrafl-tile {
|
|
7015
|
+
/* Fill the entire rack slot content area */
|
|
7016
|
+
display: block;
|
|
7017
|
+
box-sizing: border-box;
|
|
6701
7018
|
font-size: 24px;
|
|
6702
|
-
line-height:
|
|
6703
|
-
height:
|
|
6704
|
-
width:
|
|
6705
|
-
padding
|
|
6706
|
-
margin
|
|
7019
|
+
line-height: 32px;
|
|
7020
|
+
height: 100%;
|
|
7021
|
+
width: 100%;
|
|
7022
|
+
padding: 0;
|
|
7023
|
+
margin: 0;
|
|
7024
|
+
text-indent: -3px;
|
|
6707
7025
|
}
|
|
6708
|
-
div.netskrafl-tile.netskrafl-wide,
|
|
6709
|
-
div.netskrafl-tile.netskrafl-extra-wide {
|
|
7026
|
+
div.rack div.netskrafl-tile.netskrafl-wide,
|
|
7027
|
+
div.rack div.netskrafl-tile.netskrafl-extra-wide {
|
|
6710
7028
|
/* Wide character tile */
|
|
6711
7029
|
text-indent: -6px;
|
|
6712
|
-
margin-left: 0;
|
|
6713
|
-
padding-right: 2px;
|
|
6714
|
-
}
|
|
6715
|
-
div.netskrafl-tile.extra-wide {
|
|
6716
|
-
/* Extra wide character tile: Q */
|
|
6717
|
-
text-indent: -8px;
|
|
6718
7030
|
}
|
|
6719
7031
|
div.board div.netskrafl-tile.netskrafl-wide,
|
|
6720
7032
|
div.board div.netskrafl-tile.netskrafl-extra-wide {
|
|
@@ -6738,7 +7050,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6738
7050
|
}
|
|
6739
7051
|
div.rack div.letterscore {
|
|
6740
7052
|
left: auto;
|
|
6741
|
-
right:
|
|
7053
|
+
right: 1px;
|
|
6742
7054
|
bottom: 1px;
|
|
6743
7055
|
}
|
|
6744
7056
|
div.netskrafl-tile.netskrafl-wide div.letterscore,
|
|
@@ -6803,23 +7115,26 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6803
7115
|
display: none;
|
|
6804
7116
|
}
|
|
6805
7117
|
.netskrafl-container div.rack td {
|
|
6806
|
-
|
|
6807
|
-
|
|
6808
|
-
|
|
6809
|
-
|
|
6810
|
-
height:
|
|
6811
|
-
width:
|
|
6812
|
-
|
|
6813
|
-
|
|
6814
|
-
|
|
7118
|
+
/* Match tr height of 34px for consistent sizing */
|
|
7119
|
+
box-sizing: border-box;
|
|
7120
|
+
min-height: 34px;
|
|
7121
|
+
min-width: 34px;
|
|
7122
|
+
max-height: 34px;
|
|
7123
|
+
max-width: 34px;
|
|
7124
|
+
height: 34px;
|
|
7125
|
+
width: 34px;
|
|
7126
|
+
border-color: var(--rack-slot-background);
|
|
7127
|
+
background-color: var(--rack-slot-background);
|
|
7128
|
+
box-shadow: 2px 2px 4px 0 var(--rack-shadow);
|
|
6815
7129
|
}
|
|
6816
7130
|
.netskrafl-container div.rack td.opp {
|
|
6817
|
-
border-color: var(--
|
|
6818
|
-
background-color: var(--
|
|
7131
|
+
border-color: var(--autoplayer-color);
|
|
7132
|
+
background-color: var(--autoplayer-color);
|
|
6819
7133
|
}
|
|
6820
7134
|
.netskrafl-container div.rack td:empty {
|
|
6821
7135
|
border-color: var(--middle-shadow);
|
|
6822
|
-
background-color: var(--
|
|
7136
|
+
background-color: var(--rack-slot-background);
|
|
7137
|
+
border-width: 2px;
|
|
6823
7138
|
box-shadow: none;
|
|
6824
7139
|
}
|
|
6825
7140
|
.netskrafl-container div.buttons {
|
|
@@ -7044,13 +7359,17 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7044
7359
|
visibility: hidden;
|
|
7045
7360
|
}
|
|
7046
7361
|
.netskrafl-container div.player {
|
|
7047
|
-
display:
|
|
7048
|
-
|
|
7362
|
+
display: flex;
|
|
7363
|
+
align-items: center;
|
|
7364
|
+
height: 48px;
|
|
7049
7365
|
font-size: 16px;
|
|
7050
7366
|
line-height: 24px;
|
|
7051
7367
|
width: 100%;
|
|
7052
|
-
padding
|
|
7053
|
-
|
|
7368
|
+
padding: 0;
|
|
7369
|
+
color: var(--player-btn-color);
|
|
7370
|
+
}
|
|
7371
|
+
.netskrafl-container div.player.right {
|
|
7372
|
+
justify-content: flex-end;
|
|
7054
7373
|
}
|
|
7055
7374
|
.netskrafl-container div.gamestats div.player {
|
|
7056
7375
|
padding: 0;
|
|
@@ -7070,7 +7389,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7070
7389
|
padding-right: 12px;
|
|
7071
7390
|
}
|
|
7072
7391
|
.netskrafl-container div.gamestats div.player.humancolor {
|
|
7073
|
-
color:
|
|
7392
|
+
color: var(--player-btn-color);
|
|
7074
7393
|
}
|
|
7075
7394
|
.netskrafl-container div.gamestats div.player.left {
|
|
7076
7395
|
border-top-left-radius: 5px;
|
|
@@ -7081,7 +7400,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7081
7400
|
border-bottom-right-radius: 5px;
|
|
7082
7401
|
}
|
|
7083
7402
|
.netskrafl-container div.scorewrapper {
|
|
7084
|
-
background-color: var(--
|
|
7403
|
+
background-color: var(--scorewrapper-background);
|
|
7085
7404
|
min-height: 32px;
|
|
7086
7405
|
}
|
|
7087
7406
|
.netskrafl-container div.scoreleft {
|
|
@@ -7107,39 +7426,37 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7107
7426
|
font-weight: 700;
|
|
7108
7427
|
color: white;
|
|
7109
7428
|
}
|
|
7110
|
-
.netskrafl-container div.player-btn
|
|
7429
|
+
.netskrafl-container div.player-btn,
|
|
7430
|
+
.netskrafl-container div.robot-btn {
|
|
7111
7431
|
position: relative;
|
|
7112
|
-
|
|
7113
|
-
|
|
7432
|
+
display: flex;
|
|
7433
|
+
align-items: center;
|
|
7434
|
+
height: 28px;
|
|
7435
|
+
margin: 10px 0;
|
|
7436
|
+
padding: 0 4px;
|
|
7114
7437
|
width: auto;
|
|
7115
|
-
|
|
7438
|
+
}
|
|
7439
|
+
.netskrafl-container div.player-btn {
|
|
7440
|
+
color: var(--player-btn-color);
|
|
7116
7441
|
cursor: pointer;
|
|
7117
7442
|
}
|
|
7118
7443
|
.netskrafl-container div.player-btn:hover {
|
|
7119
7444
|
background-color: white;
|
|
7120
7445
|
color: black;
|
|
7121
7446
|
}
|
|
7122
|
-
.netskrafl-container div.player-btn.left
|
|
7123
|
-
padding-left: 2px;
|
|
7124
|
-
padding-right: 2px;
|
|
7125
|
-
}
|
|
7126
|
-
.netskrafl-container div.player-btn.right {
|
|
7127
|
-
padding-left: 2px;
|
|
7128
|
-
padding-right: 6px;
|
|
7129
|
-
}
|
|
7130
|
-
.netskrafl-container div.robot-btn {
|
|
7131
|
-
position: relative;
|
|
7132
|
-
margin-top: 4px;
|
|
7133
|
-
padding-top: 4px;
|
|
7134
|
-
width: auto;
|
|
7135
|
-
}
|
|
7447
|
+
.netskrafl-container div.player-btn.left,
|
|
7136
7448
|
.netskrafl-container div.robot-btn.left {
|
|
7449
|
+
margin-left: 4px;
|
|
7137
7450
|
padding-left: 6px;
|
|
7138
|
-
padding-right: 2px;
|
|
7139
7451
|
}
|
|
7452
|
+
.netskrafl-container div.player-btn.right,
|
|
7140
7453
|
.netskrafl-container div.robot-btn.right {
|
|
7141
|
-
|
|
7142
|
-
|
|
7454
|
+
margin-left: auto;
|
|
7455
|
+
margin-right: 4px;
|
|
7456
|
+
padding-right: 6px;
|
|
7457
|
+
}
|
|
7458
|
+
.netskrafl-container div.robot-btn span.glyphicon-cog {
|
|
7459
|
+
top: 0;
|
|
7143
7460
|
}
|
|
7144
7461
|
.netskrafl-container div.gamestats div.robot-btn {
|
|
7145
7462
|
width: 100%;
|
|
@@ -7252,6 +7569,14 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7252
7569
|
.netskrafl-container div.game-timed {
|
|
7253
7570
|
display: block;
|
|
7254
7571
|
}
|
|
7572
|
+
.netskrafl-container div.modal-dialog {
|
|
7573
|
+
/* Constrain modal to game container size so positioned children align correctly */
|
|
7574
|
+
max-width: 1024px;
|
|
7575
|
+
max-height: 686px;
|
|
7576
|
+
padding-top: 0.5rem;
|
|
7577
|
+
left: 50%;
|
|
7578
|
+
transform: translateX(-50%);
|
|
7579
|
+
}
|
|
7255
7580
|
.netskrafl-container div#blank-form {
|
|
7256
7581
|
display: block;
|
|
7257
7582
|
right: 12px;
|
|
@@ -7625,7 +7950,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7625
7950
|
padding-top: 12px;
|
|
7626
7951
|
left: auto;
|
|
7627
7952
|
right: 300px;
|
|
7628
|
-
top:
|
|
7953
|
+
top: 32px;
|
|
7629
7954
|
width: 428px;
|
|
7630
7955
|
height: 618px;
|
|
7631
7956
|
font-size: 1em;
|
|
@@ -7760,15 +8085,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7760
8085
|
margin-right: 4px;
|
|
7761
8086
|
}
|
|
7762
8087
|
.netskrafl-container div#wait-form {
|
|
7763
|
-
position: absolute;
|
|
7764
|
-
padding-left: 12px;
|
|
7765
|
-
padding-right: 12px;
|
|
7766
8088
|
padding-top: 16px;
|
|
7767
|
-
padding-bottom: 6px;
|
|
7768
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
7769
|
-
font-size: 1em;
|
|
7770
|
-
z-index: 20;
|
|
7771
|
-
background-color: var(--container-bg-color);
|
|
7772
8089
|
top: 160px;
|
|
7773
8090
|
left: auto;
|
|
7774
8091
|
right: 202px;
|
|
@@ -7862,6 +8179,17 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7862
8179
|
}
|
|
7863
8180
|
}
|
|
7864
8181
|
|
|
8182
|
+
/* ==========================================================================
|
|
8183
|
+
LEGACY COLOR SCHEME: Fullscreen overrides
|
|
8184
|
+
========================================================================== */
|
|
8185
|
+
|
|
8186
|
+
@media all and (min-width: 1024px) {
|
|
8187
|
+
/* Override legacy mobile tile styles for fullscreen */
|
|
8188
|
+
div.netskrafl-container.legacy-colors div.board div.netskrafl-tile {
|
|
8189
|
+
line-height: var(--board-tile-line-height-lg);
|
|
8190
|
+
}
|
|
8191
|
+
}
|
|
8192
|
+
|
|
7865
8193
|
/* ================= GÁTA DAGSINS STYLES =============== */
|
|
7866
8194
|
|
|
7867
8195
|
/* Mobile styles for Gáta Dagsins */
|
|
@@ -7909,8 +8237,8 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7909
8237
|
display: flex;
|
|
7910
8238
|
align-items: center;
|
|
7911
8239
|
justify-content: center;
|
|
7912
|
-
margin-left:
|
|
7913
|
-
margin-right:
|
|
8240
|
+
margin-left: 7.5px;
|
|
8241
|
+
margin-right: 7.5px;
|
|
7914
8242
|
}
|
|
7915
8243
|
|
|
7916
8244
|
div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
@@ -8190,7 +8518,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
8190
8518
|
.netskrafl-container .mobile-date-nav-container .date-navigator {
|
|
8191
8519
|
background-color: transparent;
|
|
8192
8520
|
padding: 0;
|
|
8193
|
-
width: 100%;
|
|
8194
8521
|
justify-content: center;
|
|
8195
8522
|
margin-bottom: 0;
|
|
8196
8523
|
}
|
|
@@ -9048,8 +9375,8 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
9048
9375
|
display: flex;
|
|
9049
9376
|
align-items: center;
|
|
9050
9377
|
gap: 10px;
|
|
9051
|
-
padding:
|
|
9052
|
-
background-color: var(--
|
|
9378
|
+
padding: 7px 10px;
|
|
9379
|
+
background-color: var(--stats-item-background);
|
|
9053
9380
|
border-radius: 8px;
|
|
9054
9381
|
border-left: 6px solid transparent;
|
|
9055
9382
|
transition: all 0.3s ease;
|
|
@@ -9109,17 +9436,25 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
9109
9436
|
/* Settings section at bottom of stats view */
|
|
9110
9437
|
|
|
9111
9438
|
.netskrafl-container .stats-settings {
|
|
9112
|
-
margin-top:
|
|
9113
|
-
padding-top:
|
|
9439
|
+
margin-top: 10px;
|
|
9440
|
+
padding-top: 10px;
|
|
9114
9441
|
border-top: 1px solid var(--board-background);
|
|
9115
9442
|
}
|
|
9116
9443
|
|
|
9444
|
+
/* Subsequent settings sections: no border, less spacing */
|
|
9445
|
+
|
|
9446
|
+
.netskrafl-container .stats-settings + .stats-settings {
|
|
9447
|
+
margin-top: 6px;
|
|
9448
|
+
padding-top: 0;
|
|
9449
|
+
border-top: none;
|
|
9450
|
+
}
|
|
9451
|
+
|
|
9117
9452
|
.netskrafl-container .stats-settings .settings-row {
|
|
9118
9453
|
display: flex;
|
|
9119
9454
|
justify-content: space-between;
|
|
9120
9455
|
align-items: center;
|
|
9121
|
-
padding:
|
|
9122
|
-
background-color: var(--
|
|
9456
|
+
padding: 6px 12px;
|
|
9457
|
+
background-color: var(--stats-item-background);
|
|
9123
9458
|
border-radius: 8px;
|
|
9124
9459
|
}
|
|
9125
9460
|
|
|
@@ -9132,7 +9467,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
9132
9467
|
.netskrafl-container .stats-settings .settings-explain {
|
|
9133
9468
|
font-size: 11px;
|
|
9134
9469
|
color: #999;
|
|
9135
|
-
margin-top:
|
|
9470
|
+
margin-top: 4px;
|
|
9136
9471
|
padding: 0 4px;
|
|
9137
9472
|
line-height: 1.4;
|
|
9138
9473
|
}
|
|
@@ -9187,7 +9522,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
9187
9522
|
align-items: center;
|
|
9188
9523
|
gap: 6px;
|
|
9189
9524
|
padding: 4px 8px;
|
|
9190
|
-
background-color: var(--
|
|
9525
|
+
background-color: var(--stats-item-background);
|
|
9191
9526
|
border-radius: 4px;
|
|
9192
9527
|
transition: all 0.3s ease;
|
|
9193
9528
|
min-height: 24px;
|
|
@@ -9326,7 +9661,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
9326
9661
|
height: 80%;
|
|
9327
9662
|
max-width: 400px;
|
|
9328
9663
|
max-height: 768px;
|
|
9329
|
-
min-height:
|
|
9664
|
+
min-height: 540px;
|
|
9330
9665
|
display: flex;
|
|
9331
9666
|
align-items: center;
|
|
9332
9667
|
flex-direction: column;
|