@mideind/netskrafl-react 2.5.0 → 3.0.0
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 +888 -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,52 @@ 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: use legacy variable values */
|
|
1663
|
+
background-color: var(--rack-tile-background);
|
|
1664
|
+
border-color: var(--ok-button);
|
|
1665
|
+
}
|
|
1666
|
+
|
|
1667
|
+
div.netskrafl-tile.dragging.legacy-colors.no-drop {
|
|
1668
|
+
border-color: var(--cancel-button);
|
|
1206
1669
|
}
|
|
1207
1670
|
|
|
1208
1671
|
.netskrafl-container div.board td,
|
|
1209
1672
|
.netskrafl-container table.board td {
|
|
1210
|
-
|
|
1673
|
+
/* Use border-box so border is included in width/height */
|
|
1674
|
+
box-sizing: border-box;
|
|
1675
|
+
width: 24px;
|
|
1676
|
+
min-width: 24px;
|
|
1677
|
+
max-width: 24px;
|
|
1678
|
+
height: 24px;
|
|
1679
|
+
min-height: 24px;
|
|
1680
|
+
max-height: 24px;
|
|
1211
1681
|
overflow: hidden;
|
|
1212
1682
|
background-color: var(--board-background);
|
|
1213
1683
|
padding: 0;
|
|
1214
1684
|
border-style: solid;
|
|
1215
|
-
border-color:
|
|
1216
|
-
border-width:
|
|
1217
|
-
border-radius:
|
|
1685
|
+
border-color: var(--board-cell-border-color);
|
|
1686
|
+
border-width: var(--board-cell-border-width);
|
|
1687
|
+
border-radius: var(--board-cell-border-radius);
|
|
1218
1688
|
}
|
|
1219
1689
|
|
|
1220
1690
|
.netskrafl-container div.rack td {
|
|
1221
|
-
|
|
1691
|
+
box-sizing: border-box;
|
|
1222
1692
|
width: 36px;
|
|
1693
|
+
min-width: 36px;
|
|
1694
|
+
max-width: 36px;
|
|
1695
|
+
height: 36px;
|
|
1696
|
+
min-height: 36px;
|
|
1697
|
+
max-height: 36px;
|
|
1223
1698
|
border-width: 0px;
|
|
1699
|
+
border-radius: 3px;
|
|
1224
1700
|
box-shadow: 2px 2px 4px 0 var(--rack-shadow);
|
|
1225
1701
|
}
|
|
1226
1702
|
|
|
@@ -1310,6 +1786,10 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1310
1786
|
line-height: 9px;
|
|
1311
1787
|
}
|
|
1312
1788
|
|
|
1789
|
+
/* --------------------------------------------------------------------------
|
|
1790
|
+
Score display and word check
|
|
1791
|
+
-------------------------------------------------------------------------- */
|
|
1792
|
+
|
|
1313
1793
|
.netskrafl-container div.word-check {
|
|
1314
1794
|
display: none;
|
|
1315
1795
|
position: absolute;
|
|
@@ -1481,7 +1961,12 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1481
1961
|
padding-right: 6px;
|
|
1482
1962
|
}
|
|
1483
1963
|
|
|
1484
|
-
|
|
1964
|
+
/* --------------------------------------------------------------------------
|
|
1965
|
+
Rack buttons - shared base styles
|
|
1966
|
+
-------------------------------------------------------------------------- */
|
|
1967
|
+
|
|
1968
|
+
.netskrafl-container div.recallbtn,
|
|
1969
|
+
.netskrafl-container div.scramblebtn {
|
|
1485
1970
|
display: none;
|
|
1486
1971
|
font-size: 18px;
|
|
1487
1972
|
font-weight: 700;
|
|
@@ -1493,34 +1978,20 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1493
1978
|
cursor: pointer;
|
|
1494
1979
|
width: 45px;
|
|
1495
1980
|
height: 40px;
|
|
1496
|
-
background-color: var(--triple-word-color);
|
|
1497
1981
|
}
|
|
1498
1982
|
|
|
1499
|
-
.netskrafl-container div.
|
|
1500
|
-
|
|
1501
|
-
margin-right: auto;
|
|
1502
|
-
/* Left-align the button */
|
|
1983
|
+
.netskrafl-container div.recallbtn {
|
|
1984
|
+
background-color: var(--triple-word-color);
|
|
1503
1985
|
}
|
|
1504
1986
|
|
|
1505
1987
|
.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
1988
|
background-color: var(--malfridur-accent);
|
|
1518
1989
|
}
|
|
1519
1990
|
|
|
1991
|
+
.netskrafl-container div.rack-left div.recallbtn,
|
|
1520
1992
|
.netskrafl-container div.rack-left div.scramblebtn {
|
|
1521
1993
|
display: flex;
|
|
1522
1994
|
margin-right: auto;
|
|
1523
|
-
/* Left-align the button */
|
|
1524
1995
|
}
|
|
1525
1996
|
|
|
1526
1997
|
.netskrafl-container div.buttons {
|
|
@@ -1541,11 +2012,18 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1541
2012
|
margin-right: 4px;
|
|
1542
2013
|
}
|
|
1543
2014
|
|
|
1544
|
-
|
|
2015
|
+
/* --------------------------------------------------------------------------
|
|
2016
|
+
Bottom action buttons - shared base styles
|
|
2017
|
+
-------------------------------------------------------------------------- */
|
|
2018
|
+
|
|
2019
|
+
.netskrafl-container .bottom-button,
|
|
2020
|
+
.netskrafl-container div.submitresign,
|
|
2021
|
+
.netskrafl-container div.submitexchange,
|
|
2022
|
+
.netskrafl-container div.submitpass,
|
|
2023
|
+
.netskrafl-container div.challenge {
|
|
1545
2024
|
text-align: center;
|
|
1546
2025
|
font-size: 18px;
|
|
1547
2026
|
font-weight: 700;
|
|
1548
|
-
color: white;
|
|
1549
2027
|
margin: 0;
|
|
1550
2028
|
padding: 6px;
|
|
1551
2029
|
padding-top: 8px;
|
|
@@ -1559,80 +2037,28 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1559
2037
|
height: 23px;
|
|
1560
2038
|
}
|
|
1561
2039
|
|
|
2040
|
+
.netskrafl-container .bottom-button {
|
|
2041
|
+
color: white;
|
|
2042
|
+
}
|
|
2043
|
+
|
|
1562
2044
|
.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
2045
|
color: var(--cancel-button);
|
|
1578
|
-
left:
|
|
2046
|
+
left: 0;
|
|
1579
2047
|
}
|
|
1580
2048
|
|
|
1581
2049
|
.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
2050
|
color: var(--human-color);
|
|
2051
|
+
left: 93px;
|
|
1598
2052
|
}
|
|
1599
2053
|
|
|
1600
2054
|
.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
2055
|
color: var(--pass-button);
|
|
1616
2056
|
left: 186px;
|
|
1617
2057
|
}
|
|
1618
2058
|
|
|
1619
2059
|
.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
2060
|
color: var(--triple-letter-color);
|
|
2061
|
+
left: 279px;
|
|
1636
2062
|
}
|
|
1637
2063
|
|
|
1638
2064
|
.netskrafl-container div.challenge.disabled {
|
|
@@ -1669,6 +2095,10 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1669
2095
|
margin-left: 8px;
|
|
1670
2096
|
}
|
|
1671
2097
|
|
|
2098
|
+
/* --------------------------------------------------------------------------
|
|
2099
|
+
Player info and scores
|
|
2100
|
+
-------------------------------------------------------------------------- */
|
|
2101
|
+
|
|
1672
2102
|
.netskrafl-container div.player {
|
|
1673
2103
|
display: block;
|
|
1674
2104
|
padding-left: 4px;
|
|
@@ -1677,7 +2107,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1677
2107
|
min-height: 30px;
|
|
1678
2108
|
font-size: 14px;
|
|
1679
2109
|
font-weight: 400;
|
|
1680
|
-
color:
|
|
2110
|
+
color: var(--player-btn-color);
|
|
1681
2111
|
}
|
|
1682
2112
|
|
|
1683
2113
|
.netskrafl-container div.scorewrapper {
|
|
@@ -1695,7 +2125,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1695
2125
|
line-height: 27px;
|
|
1696
2126
|
font-weight: 400;
|
|
1697
2127
|
text-align: left;
|
|
1698
|
-
color:
|
|
2128
|
+
color: var(--player-btn-color);
|
|
1699
2129
|
overflow: hidden;
|
|
1700
2130
|
position: absolute;
|
|
1701
2131
|
top: 4px;
|
|
@@ -1711,7 +2141,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1711
2141
|
line-height: 27px;
|
|
1712
2142
|
font-weight: 400;
|
|
1713
2143
|
text-align: right;
|
|
1714
|
-
color:
|
|
2144
|
+
color: var(--player-btn-color);
|
|
1715
2145
|
overflow: hidden;
|
|
1716
2146
|
position: absolute;
|
|
1717
2147
|
top: 4px;
|
|
@@ -1756,7 +2186,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1756
2186
|
overflow: hidden;
|
|
1757
2187
|
text-overflow: ellipsis;
|
|
1758
2188
|
background-color: transparent;
|
|
1759
|
-
color:
|
|
2189
|
+
color: var(--player-btn-color);
|
|
1760
2190
|
border-width: 0;
|
|
1761
2191
|
border-radius: 5px;
|
|
1762
2192
|
}
|
|
@@ -1773,11 +2203,6 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1773
2203
|
padding-right: 38px;
|
|
1774
2204
|
}
|
|
1775
2205
|
|
|
1776
|
-
.netskrafl-container div.player-btn.left.tomove,
|
|
1777
|
-
.netskrafl-container div.player-btn.right.tomove {
|
|
1778
|
-
color: white;
|
|
1779
|
-
}
|
|
1780
|
-
|
|
1781
2206
|
.netskrafl-container div.player-btn.left.tomove:hover,
|
|
1782
2207
|
.netskrafl-container div.player-btn.right.tomove:hover {
|
|
1783
2208
|
color: black;
|
|
@@ -1988,6 +2413,10 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
1988
2413
|
border-radius: 0 4px 4px 0;
|
|
1989
2414
|
}
|
|
1990
2415
|
|
|
2416
|
+
/* --------------------------------------------------------------------------
|
|
2417
|
+
Right column tabs and game area
|
|
2418
|
+
-------------------------------------------------------------------------- */
|
|
2419
|
+
|
|
1991
2420
|
.netskrafl-container div.right-tab {
|
|
1992
2421
|
position: absolute;
|
|
1993
2422
|
top: -28px;
|
|
@@ -2006,7 +2435,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2006
2435
|
opacity: 0.6;
|
|
2007
2436
|
z-index: 0;
|
|
2008
2437
|
cursor: pointer;
|
|
2009
|
-
box-shadow: 2px 2px 4px 0
|
|
2438
|
+
box-shadow: 2px 2px 4px 0 var(--rack-shadow);
|
|
2010
2439
|
}
|
|
2011
2440
|
|
|
2012
2441
|
.netskrafl-container div.right-tab#tab-board {
|
|
@@ -2016,7 +2445,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2016
2445
|
|
|
2017
2446
|
.netskrafl-container div.right-tab#tab-movelist {
|
|
2018
2447
|
left: 106px;
|
|
2019
|
-
background-color: var(--
|
|
2448
|
+
background-color: var(--tab-movelist-background);
|
|
2020
2449
|
}
|
|
2021
2450
|
|
|
2022
2451
|
.netskrafl-container div.right-tab#tab-twoletter {
|
|
@@ -2026,7 +2455,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2026
2455
|
|
|
2027
2456
|
.netskrafl-container div.right-tab#tab-games {
|
|
2028
2457
|
left: 236px;
|
|
2029
|
-
background-color: var(--
|
|
2458
|
+
background-color: var(--tab-games-background);
|
|
2030
2459
|
}
|
|
2031
2460
|
|
|
2032
2461
|
.netskrafl-container div.right-tab#tab-chat {
|
|
@@ -2080,13 +2509,17 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2080
2509
|
text-transform: uppercase;
|
|
2081
2510
|
}
|
|
2082
2511
|
|
|
2512
|
+
/* --------------------------------------------------------------------------
|
|
2513
|
+
Move list
|
|
2514
|
+
-------------------------------------------------------------------------- */
|
|
2515
|
+
|
|
2083
2516
|
.netskrafl-container div.movelist-container {
|
|
2084
2517
|
position: absolute;
|
|
2085
2518
|
top: 0;
|
|
2086
2519
|
left: 0;
|
|
2087
2520
|
width: 100%;
|
|
2088
2521
|
height: 458px;
|
|
2089
|
-
background-color: var(--
|
|
2522
|
+
background-color: var(--tab-movelist-background);
|
|
2090
2523
|
padding-top: 8px;
|
|
2091
2524
|
padding-bottom: 0;
|
|
2092
2525
|
z-index: 6;
|
|
@@ -2116,13 +2549,17 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2116
2549
|
background-color: var(--container-bg-color);
|
|
2117
2550
|
padding-top: 4px;
|
|
2118
2551
|
width: 100%;
|
|
2119
|
-
height:
|
|
2552
|
+
height: 106px;
|
|
2120
2553
|
}
|
|
2121
2554
|
|
|
2122
2555
|
.netskrafl-container div.game-timed {
|
|
2123
2556
|
display: none;
|
|
2124
2557
|
}
|
|
2125
2558
|
|
|
2559
|
+
/* --------------------------------------------------------------------------
|
|
2560
|
+
Modal dialogs and forms
|
|
2561
|
+
-------------------------------------------------------------------------- */
|
|
2562
|
+
|
|
2126
2563
|
.netskrafl-container div.modal-dialog {
|
|
2127
2564
|
visibility: hidden;
|
|
2128
2565
|
position: fixed;
|
|
@@ -2177,27 +2614,29 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2177
2614
|
filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
|
|
2178
2615
|
}
|
|
2179
2616
|
|
|
2180
|
-
|
|
2617
|
+
/* Common dialog form styles */
|
|
2618
|
+
|
|
2619
|
+
.netskrafl-container .std-form,
|
|
2620
|
+
.netskrafl-container div#blank-form,
|
|
2621
|
+
.netskrafl-container div#chall-form,
|
|
2622
|
+
.netskrafl-container div#promo-form,
|
|
2623
|
+
.netskrafl-container div#wait-form,
|
|
2624
|
+
.netskrafl-container div#thanks-form,
|
|
2625
|
+
.netskrafl-container div#cancel-form,
|
|
2626
|
+
.netskrafl-container div#confirm-form,
|
|
2627
|
+
.netskrafl-container div#conditions-form,
|
|
2628
|
+
.netskrafl-container div#usr-info-form,
|
|
2629
|
+
.netskrafl-container div#user-form,
|
|
2630
|
+
.netskrafl-container div#accept-form {
|
|
2181
2631
|
position: absolute;
|
|
2182
|
-
padding
|
|
2183
|
-
padding-right: 12px;
|
|
2184
|
-
padding-top: 6px;
|
|
2185
|
-
padding-bottom: 6px;
|
|
2632
|
+
padding: 6px 12px;
|
|
2186
2633
|
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
2187
2634
|
font-size: 1em;
|
|
2188
2635
|
z-index: 20;
|
|
2189
|
-
background-color: var(--
|
|
2636
|
+
background-color: var(--dialog-background-color);
|
|
2190
2637
|
}
|
|
2191
2638
|
|
|
2192
2639
|
.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
2640
|
top: 124px;
|
|
2202
2641
|
right: 36.5px;
|
|
2203
2642
|
width: 274px;
|
|
@@ -2205,9 +2644,23 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2205
2644
|
background-color: var(--board-background);
|
|
2206
2645
|
}
|
|
2207
2646
|
|
|
2208
|
-
|
|
2647
|
+
/* --------------------------------------------------------------------------
|
|
2648
|
+
Notification bars - shared base styles
|
|
2649
|
+
-------------------------------------------------------------------------- */
|
|
2650
|
+
|
|
2651
|
+
.netskrafl-container .bottom-message,
|
|
2652
|
+
.netskrafl-container .bold-bottom-message,
|
|
2653
|
+
.netskrafl-container div.error,
|
|
2654
|
+
.netskrafl-container div.resign,
|
|
2655
|
+
.netskrafl-container div.pass,
|
|
2656
|
+
.netskrafl-container div.pass-last,
|
|
2657
|
+
.netskrafl-container div.chall,
|
|
2658
|
+
.netskrafl-container div.chall-info,
|
|
2659
|
+
.netskrafl-container div.exchange,
|
|
2660
|
+
.netskrafl-container div.gameinfo,
|
|
2661
|
+
.netskrafl-container div#congrats,
|
|
2662
|
+
.netskrafl-container div#gameover {
|
|
2209
2663
|
position: absolute;
|
|
2210
|
-
text-align: right;
|
|
2211
2664
|
display: block;
|
|
2212
2665
|
bottom: 0;
|
|
2213
2666
|
left: 0;
|
|
@@ -2216,99 +2669,100 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2216
2669
|
font-size: 14px;
|
|
2217
2670
|
line-height: 26px;
|
|
2218
2671
|
margin: 0;
|
|
2219
|
-
padding
|
|
2220
|
-
padding-left: 4px;
|
|
2221
|
-
padding-right: 4px;
|
|
2222
|
-
padding-bottom: 4px;
|
|
2223
|
-
visibility: hidden;
|
|
2672
|
+
padding: 0 4px 4px 4px;
|
|
2224
2673
|
transform-origin: left top;
|
|
2225
2674
|
animation: slidein 0.4s;
|
|
2226
2675
|
}
|
|
2227
2676
|
|
|
2228
|
-
|
|
2229
|
-
|
|
2677
|
+
/* Notification bars - colored variants with white text */
|
|
2678
|
+
|
|
2679
|
+
.netskrafl-container .bold-bottom-message,
|
|
2680
|
+
.netskrafl-container div.error,
|
|
2681
|
+
.netskrafl-container div.resign,
|
|
2682
|
+
.netskrafl-container div.pass,
|
|
2683
|
+
.netskrafl-container div.pass-last,
|
|
2684
|
+
.netskrafl-container div.chall,
|
|
2685
|
+
.netskrafl-container div.chall-info,
|
|
2686
|
+
.netskrafl-container div.exchange {
|
|
2230
2687
|
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
2688
|
color: white;
|
|
2247
2689
|
border-radius: 4px;
|
|
2248
2690
|
}
|
|
2249
2691
|
|
|
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;
|
|
2692
|
+
/* Notification bars - hidden by default */
|
|
2693
|
+
|
|
2694
|
+
.netskrafl-container .bottom-message,
|
|
2695
|
+
.netskrafl-container .bold-bottom-message,
|
|
2696
|
+
.netskrafl-container div.error,
|
|
2697
|
+
.netskrafl-container div.gameinfo {
|
|
2265
2698
|
visibility: hidden;
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2699
|
+
}
|
|
2700
|
+
|
|
2701
|
+
/* Notification bars - individual background colors */
|
|
2702
|
+
|
|
2703
|
+
.netskrafl-container div.error,
|
|
2704
|
+
.netskrafl-container div.resign {
|
|
2270
2705
|
background-color: var(--cancel-button);
|
|
2271
|
-
cursor: pointer;
|
|
2272
2706
|
}
|
|
2273
2707
|
|
|
2274
|
-
.netskrafl-container div.
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2708
|
+
.netskrafl-container div.pass,
|
|
2709
|
+
.netskrafl-container div.pass-last {
|
|
2710
|
+
background-color: var(--triple-word-color);
|
|
2711
|
+
}
|
|
2712
|
+
|
|
2713
|
+
.netskrafl-container div.chall {
|
|
2714
|
+
background-color: var(--triple-letter-color);
|
|
2715
|
+
}
|
|
2716
|
+
|
|
2717
|
+
.netskrafl-container div.chall-info {
|
|
2718
|
+
background-color: var(--ok-button);
|
|
2719
|
+
}
|
|
2720
|
+
|
|
2721
|
+
.netskrafl-container div.exchange {
|
|
2722
|
+
background-color: var(--human-color);
|
|
2723
|
+
}
|
|
2724
|
+
|
|
2725
|
+
.netskrafl-container div.gameinfo {
|
|
2726
|
+
background-color: var(--board-background);
|
|
2727
|
+
}
|
|
2728
|
+
|
|
2729
|
+
/* Notification bars - individual overrides */
|
|
2730
|
+
|
|
2731
|
+
.netskrafl-container .bottom-message {
|
|
2279
2732
|
text-align: right;
|
|
2280
2733
|
}
|
|
2281
2734
|
|
|
2282
|
-
.netskrafl-container div.
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2735
|
+
.netskrafl-container div.error {
|
|
2736
|
+
cursor: pointer;
|
|
2737
|
+
}
|
|
2738
|
+
|
|
2739
|
+
.netskrafl-container div.chall-info {
|
|
2740
|
+
bottom: 60px;
|
|
2741
|
+
width: 311px;
|
|
2742
|
+
line-height: 20px;
|
|
2743
|
+
padding: 2px 24px 0 4px;
|
|
2744
|
+
}
|
|
2745
|
+
|
|
2746
|
+
.netskrafl-container div.gameinfo {
|
|
2747
|
+
text-align: right;
|
|
2748
|
+
bottom: 56px;
|
|
2749
|
+
height: 34px;
|
|
2750
|
+
padding-top: 10px;
|
|
2751
|
+
font-weight: normal;
|
|
2752
|
+
color: white;
|
|
2289
2753
|
}
|
|
2290
2754
|
|
|
2291
2755
|
.netskrafl-container div#congrats,
|
|
2292
2756
|
.netskrafl-container div#gameover {
|
|
2293
|
-
position: absolute;
|
|
2294
2757
|
text-align: center;
|
|
2295
|
-
display: block;
|
|
2296
|
-
bottom: 0;
|
|
2297
|
-
left: 0;
|
|
2298
2758
|
width: 100%;
|
|
2299
|
-
height: 52px;
|
|
2300
2759
|
font-size: 16px;
|
|
2301
|
-
|
|
2302
|
-
margin: 0;
|
|
2303
|
-
padding-top: 0px;
|
|
2304
|
-
padding-left: 4px;
|
|
2305
|
-
padding-right: 4px;
|
|
2306
|
-
padding-bottom: 0px;
|
|
2760
|
+
padding-bottom: 0;
|
|
2307
2761
|
visibility: visible;
|
|
2308
|
-
transform-origin: left top;
|
|
2309
|
-
animation: slidein 0.4s;
|
|
2310
2762
|
}
|
|
2311
2763
|
|
|
2764
|
+
/* Notification bar icons */
|
|
2765
|
+
|
|
2312
2766
|
.netskrafl-container div#congrats span.glyphicon-bookmark {
|
|
2313
2767
|
padding-right: 2px;
|
|
2314
2768
|
color: var(--ok-button);
|
|
@@ -2319,133 +2773,43 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2319
2773
|
color: var(--triple-letter-color);
|
|
2320
2774
|
}
|
|
2321
2775
|
|
|
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
|
-
}
|
|
2776
|
+
/* Opponent turn indicator (not a notification bar) */
|
|
2343
2777
|
|
|
2344
|
-
.netskrafl-container div.
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
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
|
-
}
|
|
2387
|
-
|
|
2388
|
-
.netskrafl-container div.chall {
|
|
2389
|
-
position: absolute;
|
|
2390
|
-
text-align: center;
|
|
2391
|
-
display: block;
|
|
2392
|
-
bottom: 0;
|
|
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);
|
|
2778
|
+
.netskrafl-container div.opp-turn {
|
|
2779
|
+
display: inline-block;
|
|
2780
|
+
padding-top: 8px;
|
|
2781
|
+
padding-left: 2px;
|
|
2782
|
+
text-align: left;
|
|
2408
2783
|
}
|
|
2409
2784
|
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2785
|
+
@keyframes oppTurnFlash {
|
|
2786
|
+
0% {
|
|
2787
|
+
opacity: 1;
|
|
2788
|
+
transform: scale(1);
|
|
2789
|
+
}
|
|
2790
|
+
25% {
|
|
2791
|
+
opacity: 1;
|
|
2792
|
+
transform: scale(1.1);
|
|
2793
|
+
}
|
|
2794
|
+
50% {
|
|
2795
|
+
opacity: 0;
|
|
2796
|
+
transform: scale(1.1);
|
|
2797
|
+
}
|
|
2798
|
+
75% {
|
|
2799
|
+
opacity: 1;
|
|
2800
|
+
transform: scale(1.1);
|
|
2801
|
+
}
|
|
2802
|
+
100% {
|
|
2803
|
+
opacity: 1;
|
|
2804
|
+
transform: scale(1);
|
|
2805
|
+
}
|
|
2427
2806
|
}
|
|
2428
2807
|
|
|
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);
|
|
2808
|
+
.netskrafl-container div.opp-turn.flashing {
|
|
2809
|
+
color: var(--cancel-button);
|
|
2810
|
+
transform-origin: center left;
|
|
2811
|
+
animation: oppTurnFlash 0.5s ease-in-out;
|
|
2812
|
+
animation-iteration-count: 2;
|
|
2449
2813
|
}
|
|
2450
2814
|
|
|
2451
2815
|
.netskrafl-container div.submitmove#move-mobile {
|
|
@@ -2474,6 +2838,11 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2474
2838
|
color: white;
|
|
2475
2839
|
}
|
|
2476
2840
|
|
|
2841
|
+
.netskrafl-container div.submitmove#move-mobile.word-bad {
|
|
2842
|
+
background-color: var(--cancel-button);
|
|
2843
|
+
color: white;
|
|
2844
|
+
}
|
|
2845
|
+
|
|
2477
2846
|
@keyframes colorPulseMobile {
|
|
2478
2847
|
0% {
|
|
2479
2848
|
transform: scale(1);
|
|
@@ -2539,28 +2908,9 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2539
2908
|
border-radius: 5px;
|
|
2540
2909
|
}
|
|
2541
2910
|
|
|
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
|
-
}
|
|
2911
|
+
/* --------------------------------------------------------------------------
|
|
2912
|
+
Chat
|
|
2913
|
+
-------------------------------------------------------------------------- */
|
|
2564
2914
|
|
|
2565
2915
|
.netskrafl-container input.chat-txt {
|
|
2566
2916
|
box-sizing: border-box;
|
|
@@ -2616,6 +2966,10 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2616
2966
|
top: 4px;
|
|
2617
2967
|
}
|
|
2618
2968
|
|
|
2969
|
+
/* --------------------------------------------------------------------------
|
|
2970
|
+
Two-letter words reference
|
|
2971
|
+
-------------------------------------------------------------------------- */
|
|
2972
|
+
|
|
2619
2973
|
.netskrafl-container div.twoletter {
|
|
2620
2974
|
position: absolute;
|
|
2621
2975
|
top: 0px;
|
|
@@ -2711,6 +3065,10 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
2711
3065
|
display: none;
|
|
2712
3066
|
}
|
|
2713
3067
|
|
|
3068
|
+
/* --------------------------------------------------------------------------
|
|
3069
|
+
List items and game/user lists
|
|
3070
|
+
-------------------------------------------------------------------------- */
|
|
3071
|
+
|
|
2714
3072
|
.netskrafl-container span.list-ts {
|
|
2715
3073
|
display: none;
|
|
2716
3074
|
width: 164px;
|
|
@@ -3016,14 +3374,8 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
3016
3374
|
|
|
3017
3375
|
.netskrafl-container div#chall-form {
|
|
3018
3376
|
position: relative;
|
|
3019
|
-
padding-left: 12px;
|
|
3020
|
-
padding-right: 12px;
|
|
3021
3377
|
padding-top: 8px;
|
|
3022
|
-
padding-bottom: 6px;
|
|
3023
|
-
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
3024
3378
|
font-size: 0.85em;
|
|
3025
|
-
z-index: 20;
|
|
3026
|
-
background-color: var(--container-bg-color);
|
|
3027
3379
|
/* left: @margin-small; */
|
|
3028
3380
|
left: auto;
|
|
3029
3381
|
right: auto;
|
|
@@ -3097,15 +3449,6 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
3097
3449
|
}
|
|
3098
3450
|
|
|
3099
3451
|
.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
3452
|
top: 64px;
|
|
3110
3453
|
left: 12px;
|
|
3111
3454
|
width: 327px;
|
|
@@ -3218,7 +3561,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
3218
3561
|
left: 0;
|
|
3219
3562
|
width: 100%;
|
|
3220
3563
|
height: 442px;
|
|
3221
|
-
background-color: var(--
|
|
3564
|
+
background-color: var(--tab-games-background);
|
|
3222
3565
|
overflow: auto;
|
|
3223
3566
|
z-index: 2;
|
|
3224
3567
|
padding-top: 12px;
|
|
@@ -3227,15 +3570,6 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
3227
3570
|
}
|
|
3228
3571
|
|
|
3229
3572
|
.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
3573
|
top: 8px;
|
|
3240
3574
|
left: 4px;
|
|
3241
3575
|
width: 335px;
|
|
@@ -3336,7 +3670,7 @@ div.netskrafl-tile.dragging div.letterscore {
|
|
|
3336
3670
|
|
|
3337
3671
|
div.netskrafl-racktile {
|
|
3338
3672
|
cursor: pointer;
|
|
3339
|
-
background-color:
|
|
3673
|
+
background-color: var(--racktile-background);
|
|
3340
3674
|
}
|
|
3341
3675
|
|
|
3342
3676
|
@keyframes selBlink {
|
|
@@ -3672,7 +4006,7 @@ div.netskrafl-xchgsel {
|
|
|
3672
4006
|
|
|
3673
4007
|
div.netskrafl-freshtile {
|
|
3674
4008
|
color: white;
|
|
3675
|
-
background-color: var(--
|
|
4009
|
+
background-color: var(--autoplayer-color);
|
|
3676
4010
|
opacity: 0;
|
|
3677
4011
|
animation-name: fresh-appear;
|
|
3678
4012
|
animation-duration: 100ms;
|
|
@@ -3692,8 +4026,8 @@ div.netskrafl-freshtile {
|
|
|
3692
4026
|
|
|
3693
4027
|
.netskrafl-container div.highlight1 {
|
|
3694
4028
|
/* Computer (remote) player */
|
|
3695
|
-
color:
|
|
3696
|
-
background-color: var(--
|
|
4029
|
+
color: var(--autoplayer-highlight-color);
|
|
4030
|
+
background-color: var(--autoplayer-color);
|
|
3697
4031
|
}
|
|
3698
4032
|
|
|
3699
4033
|
div.highlight0.netskrafl-blanktile {
|
|
@@ -3703,7 +4037,7 @@ div.highlight0.netskrafl-blanktile {
|
|
|
3703
4037
|
|
|
3704
4038
|
div.highlight1.netskrafl-blanktile {
|
|
3705
4039
|
/* Computer (remote) player */
|
|
3706
|
-
color:
|
|
4040
|
+
color: var(--double-word-color);
|
|
3707
4041
|
}
|
|
3708
4042
|
|
|
3709
4043
|
.netskrafl-container div.highlight0.dim {
|
|
@@ -3970,7 +4304,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
3970
4304
|
height: 18px;
|
|
3971
4305
|
text-align: left;
|
|
3972
4306
|
padding: 11px;
|
|
3973
|
-
background-color: var(--
|
|
4307
|
+
background-color: var(--triple-word-color);
|
|
3974
4308
|
color: white;
|
|
3975
4309
|
font-weight: 400;
|
|
3976
4310
|
font-size: 18px;
|
|
@@ -3979,7 +4313,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
3979
4313
|
|
|
3980
4314
|
.netskrafl-container span.movenumber {
|
|
3981
4315
|
background-color: white;
|
|
3982
|
-
color: var(--
|
|
4316
|
+
color: var(--triple-word-color);
|
|
3983
4317
|
text-align: center;
|
|
3984
4318
|
font-size: 18px;
|
|
3985
4319
|
font-weight: 700;
|
|
@@ -4055,25 +4389,29 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4055
4389
|
}
|
|
4056
4390
|
|
|
4057
4391
|
.netskrafl-container .autoplayercolor {
|
|
4058
|
-
background-color: var(--
|
|
4392
|
+
background-color: var(--autoplayer-color);
|
|
4059
4393
|
}
|
|
4060
4394
|
|
|
4061
4395
|
/* Scores in move list */
|
|
4062
4396
|
|
|
4063
4397
|
.netskrafl-container .humangrad_left {
|
|
4064
4398
|
color: var(--human-color);
|
|
4399
|
+
background: var(--humangrad-left);
|
|
4065
4400
|
}
|
|
4066
4401
|
|
|
4067
4402
|
.netskrafl-container .autoplayergrad_right {
|
|
4068
|
-
color: var(--
|
|
4403
|
+
color: var(--autoplayer-color);
|
|
4404
|
+
background: var(--autoplayergrad-right);
|
|
4069
4405
|
}
|
|
4070
4406
|
|
|
4071
4407
|
.netskrafl-container .humangrad_right {
|
|
4072
4408
|
color: var(--human-color);
|
|
4409
|
+
background: var(--humangrad-right);
|
|
4073
4410
|
}
|
|
4074
4411
|
|
|
4075
4412
|
.netskrafl-container .autoplayergrad_left {
|
|
4076
|
-
color: var(--
|
|
4413
|
+
color: var(--autoplayer-color);
|
|
4414
|
+
background: var(--autoplayergrad-left);
|
|
4077
4415
|
}
|
|
4078
4416
|
|
|
4079
4417
|
.netskrafl-container span.score {
|
|
@@ -4086,19 +4424,21 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4086
4424
|
font-weight: 700;
|
|
4087
4425
|
text-align: right;
|
|
4088
4426
|
line-height: 20px;
|
|
4427
|
+
color: var(--move-text-color);
|
|
4089
4428
|
}
|
|
4090
4429
|
|
|
4091
4430
|
.netskrafl-container span.total {
|
|
4092
4431
|
display: inline-block;
|
|
4093
4432
|
width: 28px;
|
|
4094
4433
|
padding-left: 3px;
|
|
4095
|
-
margin-left:
|
|
4434
|
+
margin-left: var(--total-margin);
|
|
4096
4435
|
padding-right: 6px;
|
|
4097
|
-
margin-right:
|
|
4436
|
+
margin-right: var(--total-margin);
|
|
4098
4437
|
font-weight: 700;
|
|
4099
4438
|
text-align: right;
|
|
4100
4439
|
color: white;
|
|
4101
4440
|
line-height: 20px;
|
|
4441
|
+
background-color: var(--total-background-color);
|
|
4102
4442
|
}
|
|
4103
4443
|
|
|
4104
4444
|
.netskrafl-container div.leftmove span.total {
|
|
@@ -4118,27 +4458,27 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4118
4458
|
}
|
|
4119
4459
|
|
|
4120
4460
|
.netskrafl-container span.total.human {
|
|
4121
|
-
background-color: var(--human-
|
|
4461
|
+
background-color: var(--total-human-background);
|
|
4122
4462
|
}
|
|
4123
4463
|
|
|
4124
4464
|
.netskrafl-container div.leftmove span.total.human {
|
|
4125
|
-
border-left-color: var(--
|
|
4465
|
+
border-left-color: var(--total-human-background);
|
|
4126
4466
|
}
|
|
4127
4467
|
|
|
4128
4468
|
.netskrafl-container div.rightmove span.total.human {
|
|
4129
|
-
border-right-color: var(--
|
|
4469
|
+
border-right-color: var(--total-human-background);
|
|
4130
4470
|
}
|
|
4131
4471
|
|
|
4132
4472
|
.netskrafl-container span.total.autoplayer {
|
|
4133
|
-
background-color: var(--
|
|
4473
|
+
background-color: var(--total-autoplayer-background);
|
|
4134
4474
|
}
|
|
4135
4475
|
|
|
4136
4476
|
.netskrafl-container div.leftmove span.total.autoplayer {
|
|
4137
|
-
border-left-color: var(--
|
|
4477
|
+
border-left-color: var(--total-autoplayer-background);
|
|
4138
4478
|
}
|
|
4139
4479
|
|
|
4140
4480
|
.netskrafl-container div.rightmove span.total.autoplayer {
|
|
4141
|
-
border-right-color: var(--
|
|
4481
|
+
border-right-color: var(--total-autoplayer-background);
|
|
4142
4482
|
}
|
|
4143
4483
|
|
|
4144
4484
|
.netskrafl-container span.highlight {
|
|
@@ -4151,6 +4491,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4151
4491
|
padding-left: 3px;
|
|
4152
4492
|
padding-right: 3px;
|
|
4153
4493
|
font-size: 12px;
|
|
4494
|
+
color: var(--move-text-color);
|
|
4154
4495
|
}
|
|
4155
4496
|
|
|
4156
4497
|
.netskrafl-container span.wordmove i {
|
|
@@ -4160,10 +4501,18 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4160
4501
|
font-size: 16px;
|
|
4161
4502
|
}
|
|
4162
4503
|
|
|
4504
|
+
.netskrafl-container div.reviewhdr span.wordmove i {
|
|
4505
|
+
font-size: 18px;
|
|
4506
|
+
}
|
|
4507
|
+
|
|
4163
4508
|
.netskrafl-container span.othermove {
|
|
4164
4509
|
text-transform: none;
|
|
4165
4510
|
padding-left: 3px;
|
|
4166
|
-
font-size:
|
|
4511
|
+
font-size: 15px;
|
|
4512
|
+
}
|
|
4513
|
+
|
|
4514
|
+
.netskrafl-container div.reviewhdr span.othermove {
|
|
4515
|
+
font-size: 18px;
|
|
4167
4516
|
}
|
|
4168
4517
|
|
|
4169
4518
|
.netskrafl-container div.error p {
|
|
@@ -4281,7 +4630,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4281
4630
|
|
|
4282
4631
|
.netskrafl-container div.score.opponent {
|
|
4283
4632
|
color: white;
|
|
4284
|
-
background-color: var(--
|
|
4633
|
+
background-color: var(--autoplayer-color);
|
|
4285
4634
|
border: none;
|
|
4286
4635
|
}
|
|
4287
4636
|
|
|
@@ -4380,9 +4729,12 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4380
4729
|
padding-right: 3px;
|
|
4381
4730
|
padding-top: 4px;
|
|
4382
4731
|
padding-bottom: 4px;
|
|
4732
|
+
margin-top: 2px;
|
|
4733
|
+
margin-bottom: 2px;
|
|
4383
4734
|
font-weight: 400;
|
|
4384
4735
|
border: solid 2px white;
|
|
4385
4736
|
border-collapse: collapse;
|
|
4737
|
+
border-radius: 5px;
|
|
4386
4738
|
}
|
|
4387
4739
|
|
|
4388
4740
|
.netskrafl-container div.board-color#triple-word {
|
|
@@ -4420,7 +4772,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4420
4772
|
vertical-align: middle;
|
|
4421
4773
|
bottom: 272px;
|
|
4422
4774
|
left: 646px;
|
|
4423
|
-
background-color: var(--
|
|
4775
|
+
background-color: var(--autoplayer-color);
|
|
4424
4776
|
font-size: 18px;
|
|
4425
4777
|
font-weight: normal;
|
|
4426
4778
|
color: white;
|
|
@@ -4731,11 +5083,11 @@ div.highlight1.netskrafl-blanktile {
|
|
|
4731
5083
|
}
|
|
4732
5084
|
|
|
4733
5085
|
.netskrafl-container div.oddlist {
|
|
4734
|
-
background-color: var(--
|
|
5086
|
+
background-color: var(--oddlist-background);
|
|
4735
5087
|
}
|
|
4736
5088
|
|
|
4737
5089
|
.netskrafl-container div.evenlist {
|
|
4738
|
-
background-color:
|
|
5090
|
+
background-color: var(--evenlist-background);
|
|
4739
5091
|
}
|
|
4740
5092
|
|
|
4741
5093
|
.netskrafl-container div.listheader {
|
|
@@ -5154,15 +5506,6 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5154
5506
|
}
|
|
5155
5507
|
|
|
5156
5508
|
.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
5509
|
top: 212px;
|
|
5167
5510
|
right: 224px;
|
|
5168
5511
|
width: 460px;
|
|
@@ -5171,15 +5514,6 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5171
5514
|
}
|
|
5172
5515
|
|
|
5173
5516
|
.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
5517
|
top: 150px;
|
|
5184
5518
|
right: 200px;
|
|
5185
5519
|
width: 508px;
|
|
@@ -5188,15 +5522,6 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5188
5522
|
}
|
|
5189
5523
|
|
|
5190
5524
|
.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
5525
|
top: 236px;
|
|
5201
5526
|
right: 224px;
|
|
5202
5527
|
width: 460px;
|
|
@@ -5205,15 +5530,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5205
5530
|
}
|
|
5206
5531
|
|
|
5207
5532
|
.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);
|
|
5533
|
+
padding: 6px 24px;
|
|
5217
5534
|
top: 80px;
|
|
5218
5535
|
right: 124px;
|
|
5219
5536
|
width: 660px;
|
|
@@ -5222,15 +5539,6 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5222
5539
|
}
|
|
5223
5540
|
|
|
5224
5541
|
.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
5542
|
top: 16px;
|
|
5235
5543
|
right: 12px;
|
|
5236
5544
|
width: 884px;
|
|
@@ -5535,17 +5843,8 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5535
5843
|
}
|
|
5536
5844
|
|
|
5537
5845
|
.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;
|
|
5846
|
+
top: 32px;
|
|
5847
|
+
left: 160px;
|
|
5549
5848
|
width: 736px;
|
|
5550
5849
|
height: 582px;
|
|
5551
5850
|
}
|
|
@@ -5565,7 +5864,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5565
5864
|
}
|
|
5566
5865
|
|
|
5567
5866
|
.netskrafl-container div#user-unfriend {
|
|
5568
|
-
left:
|
|
5867
|
+
left: 186px;
|
|
5569
5868
|
width: 280px;
|
|
5570
5869
|
/* Override */
|
|
5571
5870
|
border-style: solid;
|
|
@@ -5598,15 +5897,6 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5598
5897
|
}
|
|
5599
5898
|
|
|
5600
5899
|
.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
5900
|
top: 8px;
|
|
5611
5901
|
left: 4px;
|
|
5612
5902
|
width: 335px;
|
|
@@ -5679,7 +5969,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5679
5969
|
position: relative;
|
|
5680
5970
|
vertical-align: top;
|
|
5681
5971
|
top: 10px;
|
|
5682
|
-
width:
|
|
5972
|
+
width: 160px;
|
|
5683
5973
|
margin-right: 12px;
|
|
5684
5974
|
overflow: hidden;
|
|
5685
5975
|
text-align: right;
|
|
@@ -5706,7 +5996,7 @@ div.highlight1.netskrafl-blanktile {
|
|
|
5706
5996
|
}
|
|
5707
5997
|
|
|
5708
5998
|
.netskrafl-container div.explain {
|
|
5709
|
-
margin-left:
|
|
5999
|
+
margin-left: 178px;
|
|
5710
6000
|
margin-bottom: 12px;
|
|
5711
6001
|
font-size: 14px;
|
|
5712
6002
|
text-align: left;
|
|
@@ -5820,7 +6110,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
5820
6110
|
}
|
|
5821
6111
|
|
|
5822
6112
|
.netskrafl-container div.toggler {
|
|
5823
|
-
background-color: var(--
|
|
6113
|
+
background-color: var(--toggler-background);
|
|
5824
6114
|
color: white;
|
|
5825
6115
|
margin-top: 9px;
|
|
5826
6116
|
margin-bottom: 3px;
|
|
@@ -5867,7 +6157,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
5867
6157
|
}
|
|
5868
6158
|
|
|
5869
6159
|
.netskrafl-container div.toggler div.option.selected {
|
|
5870
|
-
background-color: var(--
|
|
6160
|
+
background-color: var(--toggler-selected);
|
|
5871
6161
|
}
|
|
5872
6162
|
|
|
5873
6163
|
.netskrafl-container div.toggler span.glyphicon {
|
|
@@ -5901,12 +6191,12 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
5901
6191
|
|
|
5902
6192
|
.netskrafl-container a.iconlink:link {
|
|
5903
6193
|
text-decoration: none;
|
|
5904
|
-
color: var(--
|
|
6194
|
+
color: var(--iconlink-color);
|
|
5905
6195
|
}
|
|
5906
6196
|
|
|
5907
6197
|
.netskrafl-container a.iconlink:visited {
|
|
5908
6198
|
text-decoration: none;
|
|
5909
|
-
color: var(--
|
|
6199
|
+
color: var(--iconlink-color);
|
|
5910
6200
|
}
|
|
5911
6201
|
|
|
5912
6202
|
.netskrafl-container a.iconlink:hover {
|
|
@@ -6065,7 +6355,9 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6065
6355
|
width: 900px;
|
|
6066
6356
|
}
|
|
6067
6357
|
|
|
6068
|
-
/*
|
|
6358
|
+
/* ==========================================================================
|
|
6359
|
+
RESPONSIVE: Mobile portrait (non-scrollable)
|
|
6360
|
+
========================================================================== */
|
|
6069
6361
|
|
|
6070
6362
|
@media all and (max-width: 1023px) and (min-height: 552px) {
|
|
6071
6363
|
/* On sufficiently large mobile screens, keep the body fixed (unscrollable) */
|
|
@@ -6075,7 +6367,9 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6075
6367
|
}
|
|
6076
6368
|
}
|
|
6077
6369
|
|
|
6078
|
-
/*
|
|
6370
|
+
/* ==========================================================================
|
|
6371
|
+
RESPONSIVE: Mobile portrait (extra tall - iPhone X+)
|
|
6372
|
+
========================================================================== */
|
|
6079
6373
|
|
|
6080
6374
|
@media all and (max-width: 1023px) and (min-height: 632px) {
|
|
6081
6375
|
/* iPhone X or taller */
|
|
@@ -6192,13 +6486,13 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6192
6486
|
}
|
|
6193
6487
|
.netskrafl-container div.chat-container,
|
|
6194
6488
|
.netskrafl-container div.twoletter {
|
|
6195
|
-
height:
|
|
6489
|
+
height: 476px;
|
|
6196
6490
|
}
|
|
6197
6491
|
.netskrafl-container div.games {
|
|
6198
|
-
height:
|
|
6492
|
+
height: 452px;
|
|
6199
6493
|
}
|
|
6200
6494
|
.netskrafl-container div.movelist-container {
|
|
6201
|
-
height:
|
|
6495
|
+
height: 468px;
|
|
6202
6496
|
}
|
|
6203
6497
|
.netskrafl-container div.movelist {
|
|
6204
6498
|
height: 358px;
|
|
@@ -6220,7 +6514,9 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6220
6514
|
}
|
|
6221
6515
|
}
|
|
6222
6516
|
|
|
6223
|
-
/*
|
|
6517
|
+
/* ==========================================================================
|
|
6518
|
+
RESPONSIVE: Mobile landscape
|
|
6519
|
+
========================================================================== */
|
|
6224
6520
|
|
|
6225
6521
|
@media all and (min-width: 667px) and (max-width: 1023px) and (
|
|
6226
6522
|
orientation: landscape
|
|
@@ -6468,17 +6764,20 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6468
6764
|
}
|
|
6469
6765
|
}
|
|
6470
6766
|
|
|
6767
|
+
/* Short landscape screens - scale board down slightly */
|
|
6768
|
+
|
|
6471
6769
|
@media all and (min-width: 667px) and (orientation: landscape) and (
|
|
6472
6770
|
max-height: 360px
|
|
6473
6771
|
) {
|
|
6474
|
-
/* Very short landscape screens - scale board down slightly */
|
|
6475
6772
|
.netskrafl-container div.board {
|
|
6476
6773
|
transform: scale(0.96);
|
|
6477
6774
|
transform-origin: top left;
|
|
6478
6775
|
}
|
|
6479
6776
|
}
|
|
6480
6777
|
|
|
6481
|
-
/*
|
|
6778
|
+
/* ==========================================================================
|
|
6779
|
+
RESPONSIVE: Large screen (iPad and larger, 1024px+)
|
|
6780
|
+
========================================================================== */
|
|
6482
6781
|
|
|
6483
6782
|
@media all and (min-width: 1024px) {
|
|
6484
6783
|
.netskrafl-container .ui-helper-reset {
|
|
@@ -6594,7 +6893,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6594
6893
|
box-shadow: 3px 3px 5px 2px var(--dark-shadow);
|
|
6595
6894
|
font-size: 1em;
|
|
6596
6895
|
z-index: 20;
|
|
6597
|
-
background-color: var(--
|
|
6896
|
+
background-color: var(--dialog-background-color);
|
|
6598
6897
|
top: 96px;
|
|
6599
6898
|
left: auto;
|
|
6600
6899
|
right: 202px;
|
|
@@ -6659,12 +6958,15 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6659
6958
|
}
|
|
6660
6959
|
.netskrafl-container div.board td,
|
|
6661
6960
|
.netskrafl-container table.board td {
|
|
6662
|
-
|
|
6663
|
-
|
|
6664
|
-
|
|
6665
|
-
width:
|
|
6666
|
-
|
|
6667
|
-
|
|
6961
|
+
/* Total outer size is 34px, border-box from base rule */
|
|
6962
|
+
width: 34px;
|
|
6963
|
+
min-width: 34px;
|
|
6964
|
+
max-width: 34px;
|
|
6965
|
+
height: 34px;
|
|
6966
|
+
min-height: 34px;
|
|
6967
|
+
max-height: 34px;
|
|
6968
|
+
border-width: var(--board-cell-border-width-lg);
|
|
6969
|
+
border-radius: var(--board-cell-border-radius-lg);
|
|
6668
6970
|
box-shadow: none;
|
|
6669
6971
|
}
|
|
6670
6972
|
.netskrafl-container table.board td.center:empty {
|
|
@@ -6673,7 +6975,6 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6673
6975
|
}
|
|
6674
6976
|
.netskrafl-container table.board tr {
|
|
6675
6977
|
height: 34px;
|
|
6676
|
-
/* 32px + 2 * 1.0px */
|
|
6677
6978
|
}
|
|
6678
6979
|
.netskrafl-container table.bag-content td {
|
|
6679
6980
|
width: 14px;
|
|
@@ -6686,7 +6987,6 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6686
6987
|
}
|
|
6687
6988
|
.netskrafl-container div.rack table.board tr {
|
|
6688
6989
|
height: 34px;
|
|
6689
|
-
/* 32px + 2 * 1.0px */
|
|
6690
6990
|
}
|
|
6691
6991
|
div.netskrafl-tile {
|
|
6692
6992
|
font-size: 24px;
|
|
@@ -6697,24 +6997,35 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6697
6997
|
padding-top: 2px;
|
|
6698
6998
|
padding-right: 2px;
|
|
6699
6999
|
}
|
|
7000
|
+
div.board div.netskrafl-tile {
|
|
7001
|
+
/* Fill the entire board square content area */
|
|
7002
|
+
display: block;
|
|
7003
|
+
box-sizing: border-box;
|
|
7004
|
+
font-size: 24px;
|
|
7005
|
+
height: 100%;
|
|
7006
|
+
width: 100%;
|
|
7007
|
+
padding: 0;
|
|
7008
|
+
margin: 0;
|
|
7009
|
+
/* Adjust line-height for vertical centering (scheme-dependent) */
|
|
7010
|
+
line-height: var(--board-tile-line-height-lg);
|
|
7011
|
+
text-indent: -4px;
|
|
7012
|
+
}
|
|
6700
7013
|
div.rack div.netskrafl-tile {
|
|
7014
|
+
/* Fill the entire rack slot content area */
|
|
7015
|
+
display: block;
|
|
7016
|
+
box-sizing: border-box;
|
|
6701
7017
|
font-size: 24px;
|
|
6702
|
-
line-height:
|
|
6703
|
-
height:
|
|
6704
|
-
width:
|
|
6705
|
-
padding
|
|
6706
|
-
margin
|
|
7018
|
+
line-height: 32px;
|
|
7019
|
+
height: 100%;
|
|
7020
|
+
width: 100%;
|
|
7021
|
+
padding: 0;
|
|
7022
|
+
margin: 0;
|
|
7023
|
+
text-indent: -3px;
|
|
6707
7024
|
}
|
|
6708
|
-
div.netskrafl-tile.netskrafl-wide,
|
|
6709
|
-
div.netskrafl-tile.netskrafl-extra-wide {
|
|
7025
|
+
div.rack div.netskrafl-tile.netskrafl-wide,
|
|
7026
|
+
div.rack div.netskrafl-tile.netskrafl-extra-wide {
|
|
6710
7027
|
/* Wide character tile */
|
|
6711
7028
|
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
7029
|
}
|
|
6719
7030
|
div.board div.netskrafl-tile.netskrafl-wide,
|
|
6720
7031
|
div.board div.netskrafl-tile.netskrafl-extra-wide {
|
|
@@ -6738,7 +7049,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6738
7049
|
}
|
|
6739
7050
|
div.rack div.letterscore {
|
|
6740
7051
|
left: auto;
|
|
6741
|
-
right:
|
|
7052
|
+
right: 1px;
|
|
6742
7053
|
bottom: 1px;
|
|
6743
7054
|
}
|
|
6744
7055
|
div.netskrafl-tile.netskrafl-wide div.letterscore,
|
|
@@ -6803,23 +7114,26 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
6803
7114
|
display: none;
|
|
6804
7115
|
}
|
|
6805
7116
|
.netskrafl-container div.rack td {
|
|
6806
|
-
|
|
6807
|
-
|
|
6808
|
-
|
|
6809
|
-
|
|
6810
|
-
height:
|
|
6811
|
-
width:
|
|
6812
|
-
|
|
6813
|
-
|
|
6814
|
-
|
|
7117
|
+
/* Match tr height of 34px for consistent sizing */
|
|
7118
|
+
box-sizing: border-box;
|
|
7119
|
+
min-height: 34px;
|
|
7120
|
+
min-width: 34px;
|
|
7121
|
+
max-height: 34px;
|
|
7122
|
+
max-width: 34px;
|
|
7123
|
+
height: 34px;
|
|
7124
|
+
width: 34px;
|
|
7125
|
+
border-color: var(--rack-slot-background);
|
|
7126
|
+
background-color: var(--rack-slot-background);
|
|
7127
|
+
box-shadow: 2px 2px 4px 0 var(--rack-shadow);
|
|
6815
7128
|
}
|
|
6816
7129
|
.netskrafl-container div.rack td.opp {
|
|
6817
|
-
border-color: var(--
|
|
6818
|
-
background-color: var(--
|
|
7130
|
+
border-color: var(--autoplayer-color);
|
|
7131
|
+
background-color: var(--autoplayer-color);
|
|
6819
7132
|
}
|
|
6820
7133
|
.netskrafl-container div.rack td:empty {
|
|
6821
7134
|
border-color: var(--middle-shadow);
|
|
6822
|
-
background-color: var(--
|
|
7135
|
+
background-color: var(--rack-slot-background);
|
|
7136
|
+
border-width: 2px;
|
|
6823
7137
|
box-shadow: none;
|
|
6824
7138
|
}
|
|
6825
7139
|
.netskrafl-container div.buttons {
|
|
@@ -7044,13 +7358,17 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7044
7358
|
visibility: hidden;
|
|
7045
7359
|
}
|
|
7046
7360
|
.netskrafl-container div.player {
|
|
7047
|
-
display:
|
|
7048
|
-
|
|
7361
|
+
display: flex;
|
|
7362
|
+
align-items: center;
|
|
7363
|
+
height: 48px;
|
|
7049
7364
|
font-size: 16px;
|
|
7050
7365
|
line-height: 24px;
|
|
7051
7366
|
width: 100%;
|
|
7052
|
-
padding
|
|
7053
|
-
|
|
7367
|
+
padding: 0;
|
|
7368
|
+
color: var(--player-btn-color);
|
|
7369
|
+
}
|
|
7370
|
+
.netskrafl-container div.player.right {
|
|
7371
|
+
justify-content: flex-end;
|
|
7054
7372
|
}
|
|
7055
7373
|
.netskrafl-container div.gamestats div.player {
|
|
7056
7374
|
padding: 0;
|
|
@@ -7070,7 +7388,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7070
7388
|
padding-right: 12px;
|
|
7071
7389
|
}
|
|
7072
7390
|
.netskrafl-container div.gamestats div.player.humancolor {
|
|
7073
|
-
color:
|
|
7391
|
+
color: var(--player-btn-color);
|
|
7074
7392
|
}
|
|
7075
7393
|
.netskrafl-container div.gamestats div.player.left {
|
|
7076
7394
|
border-top-left-radius: 5px;
|
|
@@ -7081,7 +7399,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7081
7399
|
border-bottom-right-radius: 5px;
|
|
7082
7400
|
}
|
|
7083
7401
|
.netskrafl-container div.scorewrapper {
|
|
7084
|
-
background-color: var(--
|
|
7402
|
+
background-color: var(--scorewrapper-background);
|
|
7085
7403
|
min-height: 32px;
|
|
7086
7404
|
}
|
|
7087
7405
|
.netskrafl-container div.scoreleft {
|
|
@@ -7107,39 +7425,37 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7107
7425
|
font-weight: 700;
|
|
7108
7426
|
color: white;
|
|
7109
7427
|
}
|
|
7110
|
-
.netskrafl-container div.player-btn
|
|
7428
|
+
.netskrafl-container div.player-btn,
|
|
7429
|
+
.netskrafl-container div.robot-btn {
|
|
7111
7430
|
position: relative;
|
|
7112
|
-
|
|
7113
|
-
|
|
7431
|
+
display: flex;
|
|
7432
|
+
align-items: center;
|
|
7433
|
+
height: 28px;
|
|
7434
|
+
margin: 10px 0;
|
|
7435
|
+
padding: 0 4px;
|
|
7114
7436
|
width: auto;
|
|
7115
|
-
|
|
7437
|
+
}
|
|
7438
|
+
.netskrafl-container div.player-btn {
|
|
7439
|
+
color: var(--player-btn-color);
|
|
7116
7440
|
cursor: pointer;
|
|
7117
7441
|
}
|
|
7118
7442
|
.netskrafl-container div.player-btn:hover {
|
|
7119
7443
|
background-color: white;
|
|
7120
7444
|
color: black;
|
|
7121
7445
|
}
|
|
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
|
-
}
|
|
7446
|
+
.netskrafl-container div.player-btn.left,
|
|
7136
7447
|
.netskrafl-container div.robot-btn.left {
|
|
7448
|
+
margin-left: 4px;
|
|
7137
7449
|
padding-left: 6px;
|
|
7138
|
-
padding-right: 2px;
|
|
7139
7450
|
}
|
|
7451
|
+
.netskrafl-container div.player-btn.right,
|
|
7140
7452
|
.netskrafl-container div.robot-btn.right {
|
|
7141
|
-
|
|
7142
|
-
|
|
7453
|
+
margin-left: auto;
|
|
7454
|
+
margin-right: 4px;
|
|
7455
|
+
padding-right: 6px;
|
|
7456
|
+
}
|
|
7457
|
+
.netskrafl-container div.robot-btn span.glyphicon-cog {
|
|
7458
|
+
top: 0;
|
|
7143
7459
|
}
|
|
7144
7460
|
.netskrafl-container div.gamestats div.robot-btn {
|
|
7145
7461
|
width: 100%;
|
|
@@ -7252,6 +7568,14 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7252
7568
|
.netskrafl-container div.game-timed {
|
|
7253
7569
|
display: block;
|
|
7254
7570
|
}
|
|
7571
|
+
.netskrafl-container div.modal-dialog {
|
|
7572
|
+
/* Constrain modal to game container size so positioned children align correctly */
|
|
7573
|
+
max-width: 1024px;
|
|
7574
|
+
max-height: 686px;
|
|
7575
|
+
padding-top: 0.5rem;
|
|
7576
|
+
left: 50%;
|
|
7577
|
+
transform: translateX(-50%);
|
|
7578
|
+
}
|
|
7255
7579
|
.netskrafl-container div#blank-form {
|
|
7256
7580
|
display: block;
|
|
7257
7581
|
right: 12px;
|
|
@@ -7625,7 +7949,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7625
7949
|
padding-top: 12px;
|
|
7626
7950
|
left: auto;
|
|
7627
7951
|
right: 300px;
|
|
7628
|
-
top:
|
|
7952
|
+
top: 32px;
|
|
7629
7953
|
width: 428px;
|
|
7630
7954
|
height: 618px;
|
|
7631
7955
|
font-size: 1em;
|
|
@@ -7760,15 +8084,7 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7760
8084
|
margin-right: 4px;
|
|
7761
8085
|
}
|
|
7762
8086
|
.netskrafl-container div#wait-form {
|
|
7763
|
-
position: absolute;
|
|
7764
|
-
padding-left: 12px;
|
|
7765
|
-
padding-right: 12px;
|
|
7766
8087
|
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
8088
|
top: 160px;
|
|
7773
8089
|
left: auto;
|
|
7774
8090
|
right: 202px;
|
|
@@ -7862,6 +8178,17 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7862
8178
|
}
|
|
7863
8179
|
}
|
|
7864
8180
|
|
|
8181
|
+
/* ==========================================================================
|
|
8182
|
+
LEGACY COLOR SCHEME: Fullscreen overrides
|
|
8183
|
+
========================================================================== */
|
|
8184
|
+
|
|
8185
|
+
@media all and (min-width: 1024px) {
|
|
8186
|
+
/* Override legacy mobile tile styles for fullscreen */
|
|
8187
|
+
div.netskrafl-container.legacy-colors div.board div.netskrafl-tile {
|
|
8188
|
+
line-height: var(--board-tile-line-height-lg);
|
|
8189
|
+
}
|
|
8190
|
+
}
|
|
8191
|
+
|
|
7865
8192
|
/* ================= GÁTA DAGSINS STYLES =============== */
|
|
7866
8193
|
|
|
7867
8194
|
/* Mobile styles for Gáta Dagsins */
|
|
@@ -7909,8 +8236,8 @@ div.netskrafl-container input[type="checkbox"] {
|
|
|
7909
8236
|
display: flex;
|
|
7910
8237
|
align-items: center;
|
|
7911
8238
|
justify-content: center;
|
|
7912
|
-
margin-left:
|
|
7913
|
-
margin-right:
|
|
8239
|
+
margin-left: 7.5px;
|
|
8240
|
+
margin-right: 7.5px;
|
|
7914
8241
|
}
|
|
7915
8242
|
|
|
7916
8243
|
div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
@@ -8190,7 +8517,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
8190
8517
|
.netskrafl-container .mobile-date-nav-container .date-navigator {
|
|
8191
8518
|
background-color: transparent;
|
|
8192
8519
|
padding: 0;
|
|
8193
|
-
width: 100%;
|
|
8194
8520
|
justify-content: center;
|
|
8195
8521
|
margin-bottom: 0;
|
|
8196
8522
|
}
|
|
@@ -9048,8 +9374,8 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
9048
9374
|
display: flex;
|
|
9049
9375
|
align-items: center;
|
|
9050
9376
|
gap: 10px;
|
|
9051
|
-
padding:
|
|
9052
|
-
background-color: var(--
|
|
9377
|
+
padding: 7px 10px;
|
|
9378
|
+
background-color: var(--stats-item-background);
|
|
9053
9379
|
border-radius: 8px;
|
|
9054
9380
|
border-left: 6px solid transparent;
|
|
9055
9381
|
transition: all 0.3s ease;
|
|
@@ -9109,17 +9435,25 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
9109
9435
|
/* Settings section at bottom of stats view */
|
|
9110
9436
|
|
|
9111
9437
|
.netskrafl-container .stats-settings {
|
|
9112
|
-
margin-top:
|
|
9113
|
-
padding-top:
|
|
9438
|
+
margin-top: 10px;
|
|
9439
|
+
padding-top: 10px;
|
|
9114
9440
|
border-top: 1px solid var(--board-background);
|
|
9115
9441
|
}
|
|
9116
9442
|
|
|
9443
|
+
/* Subsequent settings sections: no border, less spacing */
|
|
9444
|
+
|
|
9445
|
+
.netskrafl-container .stats-settings + .stats-settings {
|
|
9446
|
+
margin-top: 6px;
|
|
9447
|
+
padding-top: 0;
|
|
9448
|
+
border-top: none;
|
|
9449
|
+
}
|
|
9450
|
+
|
|
9117
9451
|
.netskrafl-container .stats-settings .settings-row {
|
|
9118
9452
|
display: flex;
|
|
9119
9453
|
justify-content: space-between;
|
|
9120
9454
|
align-items: center;
|
|
9121
|
-
padding:
|
|
9122
|
-
background-color: var(--
|
|
9455
|
+
padding: 6px 12px;
|
|
9456
|
+
background-color: var(--stats-item-background);
|
|
9123
9457
|
border-radius: 8px;
|
|
9124
9458
|
}
|
|
9125
9459
|
|
|
@@ -9132,7 +9466,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
9132
9466
|
.netskrafl-container .stats-settings .settings-explain {
|
|
9133
9467
|
font-size: 11px;
|
|
9134
9468
|
color: #999;
|
|
9135
|
-
margin-top:
|
|
9469
|
+
margin-top: 4px;
|
|
9136
9470
|
padding: 0 4px;
|
|
9137
9471
|
line-height: 1.4;
|
|
9138
9472
|
}
|
|
@@ -9187,7 +9521,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
9187
9521
|
align-items: center;
|
|
9188
9522
|
gap: 6px;
|
|
9189
9523
|
padding: 4px 8px;
|
|
9190
|
-
background-color: var(--
|
|
9524
|
+
background-color: var(--stats-item-background);
|
|
9191
9525
|
border-radius: 4px;
|
|
9192
9526
|
transition: all 0.3s ease;
|
|
9193
9527
|
min-height: 24px;
|
|
@@ -9326,7 +9660,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
|
|
|
9326
9660
|
height: 80%;
|
|
9327
9661
|
max-width: 400px;
|
|
9328
9662
|
max-height: 768px;
|
|
9329
|
-
min-height:
|
|
9663
|
+
min-height: 540px;
|
|
9330
9664
|
display: flex;
|
|
9331
9665
|
align-items: center;
|
|
9332
9666
|
flex-direction: column;
|