@mideind/netskrafl-react 1.0.0-beta.5 → 1.0.0-beta.7

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.
Files changed (67) hide show
  1. package/{src/css/skrafl-explo.css → dist/cjs/css/netskrafl.css} +1068 -174
  2. package/dist/cjs/index.js +32477 -364
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/{cjs/index.css → esm/css/netskrafl.css} +1043 -350
  5. package/dist/esm/index.js +32475 -364
  6. package/dist/esm/index.js.map +1 -1
  7. package/dist/types.d.ts +2 -1
  8. package/package.json +14 -2
  9. package/.eslintignore +0 -8
  10. package/.eslintrc.json +0 -13
  11. package/dist/esm/index.css +0 -6837
  12. package/rollup.config.js +0 -60
  13. package/src/components/index.ts +0 -2
  14. package/src/components/netskrafl/Netskrafl.stories.tsx +0 -66
  15. package/src/components/netskrafl/Netskrafl.tsx +0 -138
  16. package/src/components/netskrafl/Netskrafl.types.ts +0 -7
  17. package/src/components/netskrafl/index.ts +0 -2
  18. package/src/css/fonts.css +0 -4
  19. package/src/css/glyphs.css +0 -224
  20. package/src/fonts/glyphicons-regular.eot +0 -0
  21. package/src/fonts/glyphicons-regular.ttf +0 -0
  22. package/src/fonts/glyphicons-regular.woff +0 -0
  23. package/src/index.ts +0 -2
  24. package/src/messages/messages.json +0 -1576
  25. package/src/mithril/actions.ts +0 -319
  26. package/src/mithril/bag.ts +0 -65
  27. package/src/mithril/bestdisplay.ts +0 -74
  28. package/src/mithril/blankdialog.ts +0 -94
  29. package/src/mithril/board.ts +0 -339
  30. package/src/mithril/buttons.ts +0 -303
  31. package/src/mithril/challengedialog.ts +0 -186
  32. package/src/mithril/channel.ts +0 -162
  33. package/src/mithril/chat.ts +0 -228
  34. package/src/mithril/components.ts +0 -496
  35. package/src/mithril/dragdrop.ts +0 -219
  36. package/src/mithril/elopage.ts +0 -202
  37. package/src/mithril/friend.ts +0 -227
  38. package/src/mithril/game.ts +0 -1378
  39. package/src/mithril/gameview.ts +0 -111
  40. package/src/mithril/globalstate.ts +0 -33
  41. package/src/mithril/i18n.ts +0 -186
  42. package/src/mithril/localstorage.ts +0 -133
  43. package/src/mithril/login.ts +0 -122
  44. package/src/mithril/logo.ts +0 -323
  45. package/src/mithril/main.ts +0 -755
  46. package/src/mithril/mithril.ts +0 -29
  47. package/src/mithril/model.ts +0 -855
  48. package/src/mithril/movelistitem.ts +0 -226
  49. package/src/mithril/page.ts +0 -856
  50. package/src/mithril/playername.ts +0 -91
  51. package/src/mithril/promodialog.ts +0 -82
  52. package/src/mithril/recentlist.ts +0 -148
  53. package/src/mithril/request.ts +0 -52
  54. package/src/mithril/review.ts +0 -634
  55. package/src/mithril/rightcolumn.ts +0 -398
  56. package/src/mithril/searchbutton.ts +0 -118
  57. package/src/mithril/statsdisplay.ts +0 -109
  58. package/src/mithril/tabs.ts +0 -169
  59. package/src/mithril/tile.ts +0 -145
  60. package/src/mithril/twoletter.ts +0 -76
  61. package/src/mithril/types.ts +0 -384
  62. package/src/mithril/userinfodialog.ts +0 -171
  63. package/src/mithril/util.ts +0 -304
  64. package/src/mithril/wait.ts +0 -246
  65. package/src/mithril/wordcheck.ts +0 -102
  66. package/tsconfig.json +0 -28
  67. package/vite.config.ts +0 -12
@@ -1,8 +1,293 @@
1
+ /*
2
+
3
+ Glyphs.css
4
+
5
+ Style support for Glyphicons
6
+
7
+ Copyright © 2025 Miðeind ehf.
8
+ Author: Vilhjalmur Thorsteinsson
9
+
10
+ The Creative Commons Attribution-NonCommercial 4.0
11
+ International Public License (CC-BY-NC 4.0) applies to this software.
12
+ For further information, see https://github.com/mideind/Netskrafl
13
+
14
+ */
15
+
16
+ @font-face {
17
+ font-family: 'Glyphicons Regular';
18
+ /* The following source URLs are assumed to be present on the host */
19
+ src: url('/static/fonts/glyphicons-regular.eot') format('embedded-opentype'),
20
+ url('/static/fonts/glyphicons-regular.woff') format('woff'),
21
+ url('/static/fonts/glyphicons-regular.ttf') format('truetype');
22
+ }
23
+
24
+ .glyphicon {
25
+ position: relative;
26
+ top: 2px;
27
+ display: inline-block;
28
+ font-family: 'Glyphicons Regular';
29
+ font-style: normal;
30
+ font-weight: normal;
31
+ line-height: 1;
32
+ }
33
+
34
+ .glyphicon-play:before {
35
+ content: "\E174";
36
+ }
37
+
38
+ .glyphicon-exclamation-sign:before {
39
+ content: "\E197";
40
+ }
41
+
42
+ .glyphicon-log-in:before {
43
+ content: "\E387";
44
+ }
45
+
46
+ .glyphicon-log-out:before {
47
+ content: "\E388";
48
+ }
49
+
50
+ .glyphicon-screenshot:before {
51
+ content: "\E186";
52
+ }
53
+
54
+ .glyphicon-refresh:before {
55
+ content: "\E082";
56
+ }
57
+
58
+ .glyphicon-forward:before {
59
+ content: "\E177";
60
+ }
61
+
62
+ .glyphicon-fire:before {
63
+ content: "\E023";
64
+ }
65
+
66
+ .glyphicon-ok:before {
67
+ content: "\E207";
68
+ }
69
+
70
+ .glyphicon-remove:before {
71
+ content: "\E208";
72
+ }
73
+
74
+ .glyphicon-info-sign:before {
75
+ content: "\E196";
76
+ }
77
+
78
+ .glyphicon-cog:before {
79
+ content: "\E137";
80
+ }
81
+
82
+ .glyphicon-chevron-left:before {
83
+ content: "\E225";
84
+ }
85
+
86
+ .glyphicon-chevron-right:before {
87
+ content: "\E224";
88
+ }
89
+
90
+ .glyphicon-circle-arrow-down:before {
91
+ content: "\E220";
92
+ }
93
+
94
+ .glyphicon-download:before {
95
+ content: "\E201";
96
+ }
97
+
98
+ .glyphicon-star:before {
99
+ content: "\E050";
100
+ }
101
+
102
+ .glyphicon-flag:before {
103
+ content: "\E267";
104
+ }
105
+
106
+ .glyphicon-flag-after:after {
107
+ content: "\E267";
108
+ }
109
+
110
+ .glyphicon-bookmark:before {
111
+ content: "\E073";
112
+ }
113
+
114
+ .glyphicon-star-empty:before {
115
+ content: "\E049";
116
+ }
117
+
118
+ .glyphicon-hand-right:before {
119
+ content: "\E346";
120
+ }
121
+
122
+ .glyphicon-hand-left:before {
123
+ content: "\E347";
124
+ }
125
+
126
+ .glyphicon-thumbs-up:before {
127
+ content: "\E344";
128
+ }
129
+
130
+ .glyphicon-thumbs-down:before {
131
+ content: "\E345";
132
+ }
133
+
134
+ .glyphicon-remove-circle:before {
135
+ content: "\E198";
136
+ }
137
+
138
+ .glyphicon-th:before {
139
+ content: "\E157";
140
+ }
141
+
142
+ .glyphicon-user:before {
143
+ content: "\E004";
144
+ }
145
+
146
+ .glyphicon-comment:before {
147
+ content: "\E310";
148
+ }
149
+
150
+ .glyphicon-eye-open:before {
151
+ content: "\E052";
152
+ }
153
+
154
+ .glyphicon-paperclip:before {
155
+ content: "\E063";
156
+ }
157
+
158
+ .glyphicon-link:before {
159
+ content: "\E051";
160
+ }
161
+
162
+ .glyphicon-arrow-up:before {
163
+ content: "\E214";
164
+ }
165
+
166
+ .glyphicon-flash:before {
167
+ content: "\E242";
168
+ }
169
+
170
+ .glyphicon-time:before {
171
+ content: "\E055";
172
+ }
173
+
174
+ .glyphicon-volume-off:before {
175
+ content: "\E183";
176
+ }
177
+
178
+ .glyphicon-volume-up:before {
179
+ content: "\E185";
180
+ }
181
+
182
+ .glyphicon-hourglass:before {
183
+ content: "\231B";
184
+ }
185
+
186
+ .glyphicon-random:before {
187
+ content: "\E084";
188
+ }
189
+
190
+ .glyphicon-down-arrow:before {
191
+ content: "\E213";
192
+ }
193
+
194
+ .glyphicon-signal:before {
195
+ content: "\E080";
196
+ }
197
+
198
+ .glyphicon-crown:before {
199
+ content: "\E362";
200
+ }
201
+
202
+ .glyphicon-dashboard:before {
203
+ content: "\E332";
204
+ }
205
+
206
+ .glyphicon-show-lines:before {
207
+ content: "\E159";
208
+ }
209
+
210
+ .glyphicon-user-conversation:before {
211
+ content: "\E527";
212
+ }
213
+
214
+ .glyphicon-life-preserver:before {
215
+ content: "\E308";
216
+ }
217
+
218
+ .glyphicon-conversation:before {
219
+ content: "\E245";
220
+ }
221
+
222
+ .glyphicon-chat:before {
223
+ content: "\E246";
224
+ }
225
+
226
+ .glyphicon-baby-formula:before {
227
+ content: "\E492";
228
+ }
229
+
230
+ .glyphicon-stroller:before {
231
+ content: "\E076";
232
+ }
233
+
234
+ .glyphicon-edit:before {
235
+ content: "\E151";
236
+ }
237
+
238
+ .glyphicon-circle-question-mark:before {
239
+ content: "\E195";
240
+ }
241
+
242
+ .glyphicon-resize-small:before {
243
+ content: "\E215";
244
+ }
245
+
246
+ .glyphicon-shopping-bag:before {
247
+ content: "\E351";
248
+ }
249
+
250
+ .glyphicon-address-book:before {
251
+ content: "\E089";
252
+ }
253
+
254
+ .glyphicon-search:before {
255
+ content: "\E028";
256
+ }
257
+
258
+ .glyphicon-lightbulb:before {
259
+ content: "\E065";
260
+ }
261
+
262
+ .glyphicon-coffee-cup:before {
263
+ content: "\E295";
264
+ }
265
+
266
+ .glyphicon-grid:before {
267
+ content: "\E157";
268
+ }
269
+
270
+ .glyphicon-home:before {
271
+ content: "\E021";
272
+ }
273
+
274
+ .glyphicon-target:before {
275
+ content: "\E473";
276
+ }
277
+
278
+ .glyphicon-ban-circle:before {
279
+ content: "\E200";
280
+ }
281
+
282
+ .glyphicon-right-arrow:before {
283
+ content: "\E212";
284
+ }
285
+
1
286
  /*
2
287
 
3
288
  Skrafl-explo.css
4
289
 
5
- Explo theme template for netskrafl.is
290
+ Styles for netskrafl.is using Málstaður colors
6
291
 
7
292
  Copyright © 2025 Miðeind ehf.
8
293
  Author: Vilhjalmur Thorsteinsson
@@ -12,8 +297,10 @@
12
297
  For further information, see https://github.com/mideind/Netskrafl
13
298
 
14
299
  */
300
+
15
301
  /*
16
302
  */
303
+
17
304
  div.netskrafl-container {
18
305
  --logo-primary: #C94314;
19
306
  --logo-secondary: #FFAA88;
@@ -36,16 +323,18 @@ div.netskrafl-container {
36
323
  --humangrad-color: hsl(from var(--malfridur-accent) h 55% 65%);
37
324
  --stats-foreground: hsl(from var(--malfridur-accent) h 45% 45%);
38
325
  --link-hover-color: #006db8;
39
- --double-word-color: hsl(from var(--malfridur-secondary) h 85% 80%); /* #f8D992; */
40
- --triple-word-color: hsl(from var(--malfridur-secondary) h 90% 55%); /* #F9B32D; */
41
- --double-letter-color: hsl(from var(--svarkur-accent) h 55% 65%); /* #9ED5DA; */
42
- --triple-letter-color: hsl(from var(--svarkur-secondary) h 70% 40%); /* #21A4B6; */
326
+ --double-word-color: hsl(from var(--malfridur-secondary) h 85% 80%);
327
+ --triple-word-color: hsl(from var(--malfridur-secondary) h 85% 65%);
328
+ --double-letter-color: hsl(from var(--svarkur-accent) h 50% 75%);
329
+ --triple-letter-color: hsl(from var(--svarkur-secondary) h 60% 55%);
43
330
  --chat-background: hsl(from var(--malfridur-secondary) h 65% 92%);
44
331
  --ok-button: var(--malfridur-green);
45
- --cancel-button: hsl(from var(--logo-primary) h 45% 55%); /* #B6676D; */
46
- --human-color: hsl(from var(--svarkur-secondary) h s 35%); /* #208C9F; */
47
- --list-header-background: hsl(from var(--malfridur-secondary) h 85% 90%); /* #fff1d0; */
48
- --list-header-bottom: hsl(from var(--malfridur-secondary) h 90% 55%); /* #ffc559; */
332
+ --cancel-button: hsl(from var(--logo-primary) h 45% 55%);
333
+ --pass-button: hsl(from var(--malfridur-secondary) h 85% 50%);
334
+ --option-selected: hsl(from var(--svarkur-secondary) h 80% 35%);
335
+ --human-color: hsl(from var(--svarkur-secondary) h s 35%);
336
+ --list-header-background: hsl(from var(--malfridur-secondary) h 85% 90%);
337
+ --list-header-bottom: hsl(from var(--malfridur-secondary) h 90% 55%);
49
338
  --tile-background: hsl(from var(--logo-secondary) h 70% 92%);
50
339
  --board-background: #E4EAF0;
51
340
  --tab-background: #f3f3f6;
@@ -56,8 +345,10 @@ div.netskrafl-container {
56
345
  --rack-shadow: #afb7cad0;
57
346
  --focus-border: var(--triple-word-color);
58
347
  --light-background: #B9D9DC;
59
- --primary-font: 'Lato', 'Open Sans', 'Arial', sans-serif;
60
- --number-font: 'Open Sans', 'Lato', 'Arial', sans-serif;
348
+ /* The following two variables are assumed to be defined
349
+ by the container */
350
+ --primary-font: var(--font-lato);
351
+ --number-font: var(--font-open-sans);
61
352
  }
62
353
 
63
354
  div.netskrafl-container {
@@ -65,38 +356,47 @@ div.netskrafl-container {
65
356
  top: 0;
66
357
  left: 0;
67
358
  background-color: var(--container-bg-color);
68
- font-family: var(--primary-font);
359
+ /* font-family: var(--primary-font); */
69
360
  width: 375px;
70
361
  /* Full height is 667px - we subtract 115px for browser chrome, top and bottom */
71
- height: 552px;
362
+ height: 586px; /* 552px; */
72
363
  overflow-x: hidden;
73
364
  overflow-y: auto;
74
365
  margin: 0 auto;
75
366
  user-select: none;
76
367
  touch-action: none;
77
368
  }
369
+
78
370
  div.netskrafl-container * {
79
371
  box-sizing: content-box;
80
372
  }
373
+
81
374
  div.netskrafl-container ol, div.netskrafl-container ul {
82
375
  list-style: initial;
83
376
  }
377
+
378
+ /*
84
379
  div.netskrafl-container h1,
85
380
  div.netskrafl-container h2,
86
381
  div.netskrafl-container h3 {
87
382
  font-size: revert;
88
383
  font-weight: revert;
89
384
  }
385
+ */
386
+
90
387
  body div.netskrafl-loading,
91
388
  body div.netskrafl-user {
92
389
  display: none;
93
390
  }
391
+
94
392
  div.netskrafl-container div.netskrafl-user {
95
393
  display: block;
96
394
  }
395
+
97
396
  div#board-background {
98
397
  height: 100%;
99
398
  }
399
+
100
400
  div.game-container {
101
401
  position: absolute;
102
402
  top: 0;
@@ -106,18 +406,22 @@ div.game-container {
106
406
  overflow-x: hidden;
107
407
  overflow-y: hidden;
108
408
  }
409
+
109
410
  div.netskrafl-container p {
110
411
  margin-top: 12px;
111
412
  margin-bottom: 12px;
112
413
  }
414
+
113
415
  input,
114
416
  textarea {
115
417
  user-select: text;
116
418
  }
419
+
117
420
  p a img {
118
421
  display: inline;
119
422
  vertical-align: text-bottom;
120
423
  }
424
+
121
425
  .ui-helper-reset {
122
426
  margin: 0;
123
427
  padding: 0;
@@ -129,29 +433,35 @@ p a img {
129
433
  font-size: 100%;
130
434
  list-style: none;
131
435
  }
436
+
132
437
  .ui-helper-clearfix:before,
133
438
  .ui-helper-clearfix:after {
134
439
  content: "";
135
440
  display: table;
136
441
  border-collapse: collapse;
137
442
  }
443
+
138
444
  .ui-helper-clearfix:after {
139
445
  clear: both;
140
446
  }
447
+
141
448
  .ui-helper-clearfix {
142
449
  min-height: 0;
143
450
  /* support: IE7 */
144
451
  }
452
+
145
453
  .ui-tabs {
146
454
  position: relative;
147
455
  /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
148
456
  padding: 3px;
149
457
  border-width: 0;
150
458
  }
459
+
151
460
  .ui-tabs .ui-tabs-nav {
152
461
  margin: 0;
153
462
  padding: 3px 3px 0;
154
463
  }
464
+
155
465
  .ui-tabs .ui-tabs-nav li {
156
466
  list-style: none;
157
467
  float: left;
@@ -163,6 +473,7 @@ p a img {
163
473
  white-space: nowrap;
164
474
  box-shadow: 1px 2px 4px 1px #afb7cad0;
165
475
  }
476
+
166
477
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
167
478
  float: left;
168
479
  text-decoration: none;
@@ -171,15 +482,18 @@ p a img {
171
482
  padding-right: 12px;
172
483
  text-align: center;
173
484
  }
485
+
174
486
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor.sp {
175
487
  /* Single page version */
176
488
  min-width: 51px;
177
489
  }
490
+
178
491
  .ui-tabs .ui-tabs-nav li.ui-tabs-active {
179
492
  margin-bottom: -1px;
180
493
  padding-bottom: 0px;
181
494
  background-color: var(--container-bg-color);
182
495
  }
496
+
183
497
  .ui-tabs .ui-tabs-panel {
184
498
  display: block;
185
499
  border-width: 0;
@@ -189,48 +503,56 @@ p a img {
189
503
  padding-bottom: 4px;
190
504
  background-color: var(--container-bg-color);
191
505
  }
506
+
192
507
  .ui-widget {
193
- font-family: var(--primary-font);
194
508
  font-size: 1.2em;
195
509
  }
510
+
196
511
  .ui-widget input,
197
512
  .ui-widget select,
198
513
  .ui-widget textarea,
199
514
  .ui-widget button {
200
- font-family: var(--primary-font);
201
515
  font-size: 1em;
202
516
  }
517
+
203
518
  .ui-widget-content {
204
519
  color: var(--dark-bg-color);
205
520
  }
521
+
206
522
  .ui-widget-content a {
207
523
  color: var(--dark-bg-color);
208
524
  }
525
+
209
526
  .ui-widget-header {
210
527
  color: var(--light-header-color);
211
528
  font-weight: bold;
212
529
  cursor: pointer;
213
530
  }
531
+
214
532
  .ui-widget-header a {
215
533
  color: var(--light-header-color);
216
534
  }
535
+
217
536
  .ui-state-default {
218
537
  background-color: var(--header-color);
219
538
  font-weight: bold;
220
539
  color: white;
221
540
  }
541
+
222
542
  .ui-state-default a,
223
543
  .ui-state-default a:link,
224
544
  .ui-state-default a:visited {
225
545
  color: white;
226
546
  text-decoration: none;
227
547
  }
548
+
228
549
  .ui-state-hover,
229
550
  .ui-state-focus {
230
551
  background-color: var(--header-hover-color);
231
552
  font-weight: bold;
232
553
  color: white;
233
554
  }
555
+
234
556
  .ui-state-hover a,
235
557
  .ui-state-hover a:hover,
236
558
  .ui-state-hover a:link,
@@ -242,9 +564,11 @@ p a img {
242
564
  color: white;
243
565
  text-decoration: none;
244
566
  }
567
+
245
568
  .ui-state-focus a:focus {
246
569
  outline: 0;
247
570
  }
571
+
248
572
  .ui-state-active,
249
573
  .ui-widget-content .ui-state-active {
250
574
  background-color: var(--container-bg-color);
@@ -252,12 +576,14 @@ p a img {
252
576
  color: black;
253
577
  /* white; */
254
578
  }
579
+
255
580
  .ui-widget-header .ui-state-active {
256
581
  background-color: var(--container-bg-color);
257
582
  font-weight: bold;
258
583
  color: black;
259
584
  /* white; */
260
585
  }
586
+
261
587
  .ui-state-active a,
262
588
  .ui-state-active a:link,
263
589
  .ui-state-active a:hover,
@@ -265,57 +591,71 @@ p a img {
265
591
  color: black;
266
592
  text-decoration: none;
267
593
  }
594
+
268
595
  .ui-corner-all,
269
596
  .ui-corner-left,
270
597
  .ui-corner-tl {
271
598
  border-top-left-radius: 4px;
272
599
  }
600
+
273
601
  .ui-corner-all,
274
602
  .ui-corner-right,
275
603
  .ui-corner-tr {
276
604
  border-top-right-radius: 4px;
277
605
  }
606
+
278
607
  .ui-corner-all,
279
608
  .ui-corner-bottom,
280
609
  .ui-corner-left,
281
610
  .ui-corner-bl {
282
611
  border-bottom-left-radius: 4px;
283
612
  }
613
+
284
614
  .ui-corner-all,
285
615
  .ui-corner-bottom,
286
616
  .ui-corner-right,
287
617
  .ui-corner-br {
288
618
  border-bottom-right-radius: 4px;
289
619
  }
620
+
290
621
  .ui-corner-top {
291
622
  border-top-left-radius: 6px;
292
623
  border-top-right-radius: 6px;
293
624
  }
625
+
294
626
  ul.ui-tabs-nav.ui-corner-all {
295
627
  border-bottom-left-radius: 0px;
296
628
  border-bottom-right-radius: 0px;
297
629
  }
630
+
298
631
  /* Default media: small screen, i.e. mobile */
632
+
299
633
  span.mobile-space {
300
634
  display: inline;
301
635
  padding-left: 32px;
302
636
  padding-right: 32px;
303
637
  }
638
+
304
639
  .no-mobile-block {
305
640
  display: none;
306
641
  }
642
+
307
643
  .no-mobile-inline {
308
644
  display: none;
309
645
  }
646
+
310
647
  .no-mobile-inline-block {
311
648
  display: none;
312
649
  }
650
+
313
651
  .no-mobile-list {
314
652
  display: none;
315
653
  }
654
+
316
655
  .upper {
317
656
  text-transform: uppercase;
318
657
  }
658
+
319
659
  @media all and (max-width: 360px) {
320
660
  /* Hack to squeeze the content on 360 pixel wide phones */
321
661
  div.netskrafl-container {
@@ -324,16 +664,19 @@ span.mobile-space {
324
664
  transform-origin: center top;
325
665
  }
326
666
  }
667
+
327
668
  div.header-logo {
328
669
  display: block;
329
670
  float: left;
330
- padding-left: 5px;
331
- padding-top: 14px;
671
+ padding-left: 4px;
672
+ padding-top: 18px;
332
673
  }
674
+
333
675
  div.header-button {
334
676
  display: block;
335
677
  float: right;
336
678
  }
679
+
337
680
  div.logo {
338
681
  display: none;
339
682
  position: absolute;
@@ -341,32 +684,38 @@ div.logo {
341
684
  left: 28px;
342
685
  width: 46px;
343
686
  }
687
+
344
688
  div.logo:hover {
345
689
  animation: expand 0.4s;
346
690
  }
691
+
347
692
  div.netskrafl-logo {
348
693
  display: flex;
349
694
  align-items: center;
350
695
  justify-content: center;
351
- width: 32px;
352
- height: 32px;
696
+ width: 30px;
697
+ height: 30px;
353
698
  }
699
+
354
700
  div.rightcol {
355
701
  position: relative;
356
702
  width: 362px;
357
703
  left: 6px;
358
704
  }
705
+
359
706
  div.logowrapper {
360
707
  display: inline-block;
361
708
  width: 11%;
362
709
  vertical-align: top;
363
710
  }
711
+
364
712
  div.playerwrapper {
365
713
  display: inline-block;
366
714
  position: relative;
367
715
  width: 89%;
368
716
  padding-top: 4px;
369
717
  }
718
+
370
719
  div.bag {
371
720
  position: absolute;
372
721
  right: 12px;
@@ -381,9 +730,11 @@ div.bag {
381
730
  padding: 0;
382
731
  opacity: 0.75;
383
732
  }
733
+
384
734
  table.bag-content {
385
735
  border-collapse: separate;
386
736
  }
737
+
387
738
  table.bag-content td {
388
739
  width: 12px;
389
740
  height: 17px;
@@ -392,20 +743,25 @@ table.bag-content td {
392
743
  overflow: hidden;
393
744
  cursor: default;
394
745
  }
746
+
395
747
  table.bag-content.new td {
396
748
  background-color: var(--tile-background);
397
749
  }
750
+
398
751
  table.bag-content.empty td {
399
752
  background-color: var(--cancel-button);
400
753
  /* Opponent's color */
401
754
  color: white;
402
755
  }
756
+
403
757
  td.over {
404
758
  outline: var(--focus-border) solid 3px;
405
759
  }
760
+
406
761
  td.highlight {
407
762
  outline: var(--focus-border) solid 2px;
408
763
  }
764
+
409
765
  tr.colid td {
410
766
  height: 24px;
411
767
  width: 32px;
@@ -420,7 +776,9 @@ tr.colid td {
420
776
  border-color: transparent;
421
777
  box-shadow: none;
422
778
  }
779
+
423
780
  /* Board layout */
781
+
424
782
  #H8,
425
783
  #B2,
426
784
  #C3,
@@ -440,6 +798,7 @@ tr.colid td {
440
798
  #N14 {
441
799
  background-color: var(--double-word-color);
442
800
  }
801
+
443
802
  #A1,
444
803
  #A8,
445
804
  #A15,
@@ -450,6 +809,7 @@ tr.colid td {
450
809
  #O15 {
451
810
  background-color: var(--triple-word-color);
452
811
  }
812
+
453
813
  #A4,
454
814
  #A12,
455
815
  #C7,
@@ -476,6 +836,7 @@ tr.colid td {
476
836
  #L15 {
477
837
  background-color: var(--double-letter-color);
478
838
  }
839
+
479
840
  #B6,
480
841
  #B10,
481
842
  #F2,
@@ -490,22 +851,27 @@ tr.colid td {
490
851
  #J14 {
491
852
  background-color: var(--triple-letter-color);
492
853
  }
854
+
493
855
  table.board td.dw:empty {
494
856
  /* Double word score */
495
857
  background-color: var(--double-word-color);
496
858
  }
859
+
497
860
  table.board td.tw:empty {
498
861
  /* Triple word score */
499
862
  background-color: var(--triple-word-color);
500
863
  }
864
+
501
865
  table.board td.dl:empty {
502
866
  /* Double letter score */
503
867
  background-color: var(--double-letter-color);
504
868
  }
869
+
505
870
  table.board td.tl:empty {
506
871
  /* Triple letter score */
507
872
  background-color: var(--triple-letter-color);
508
873
  }
874
+
509
875
  table.board td.center:empty {
510
876
  font-family: 'Glyphicons Regular';
511
877
  text-align: center;
@@ -513,11 +879,13 @@ table.board td.center:empty {
513
879
  line-height: 21px;
514
880
  color: white;
515
881
  }
882
+
516
883
  table.board td.center:empty::before {
517
884
  content: "\E473";
518
885
  /* Target */
519
886
  animation: opacityBlink 1.5s infinite;
520
887
  }
888
+
521
889
  table.board {
522
890
  margin-left: auto;
523
891
  margin-right: auto;
@@ -526,6 +894,7 @@ table.board {
526
894
  border-collapse: separate;
527
895
  table-layout: fixed;
528
896
  }
897
+
529
898
  div.board table.board {
530
899
  transform: scale(1);
531
900
  transform-origin: 0 0;
@@ -536,26 +905,33 @@ div.board table.board {
536
905
  transition: transform .2s ease-in-out;
537
906
  */
538
907
  }
908
+
539
909
  table.board tr {
540
910
  height: 24px;
541
911
  }
912
+
542
913
  .rack table.board {
543
914
  border-spacing: 8px;
544
915
  margin-left: auto;
545
916
  margin-right: auto;
546
917
  }
918
+
547
919
  .rack table.board tr {
548
920
  height: 36px;
549
921
  }
922
+
550
923
  div.info {
551
924
  display: none;
552
925
  }
926
+
553
927
  div.board-help {
554
928
  display: none;
555
929
  }
930
+
556
931
  div.bag {
557
932
  display: none;
558
933
  }
934
+
559
935
  div.board-area {
560
936
  position: absolute;
561
937
  margin-left: 8px;
@@ -563,15 +939,17 @@ div.board-area {
563
939
  padding-top: 6px;
564
940
  background-color: var(--container-bg-color);
565
941
  }
942
+
566
943
  div.board {
567
944
  background-color: var(--container-bg-color);
568
- overflow: hidden;
945
+ overflow: auto; /* Must be auto to allow panning/scrolling */
569
946
  width: 361px;
570
947
  }
948
+
571
949
  div.tile {
572
950
  position: relative;
573
951
  background-color: var(--tile-background);
574
- font-family: 'Open Sans', 'Arial', sans-serif;
952
+ font-family: var(--number-font);
575
953
  font-size: 17px;
576
954
  line-height: 21px;
577
955
  font-weight: 700;
@@ -587,17 +965,21 @@ div.tile {
587
965
  vertical-align: top;
588
966
  cursor: default;
589
967
  }
968
+
590
969
  div.tile.wide,
591
970
  div.tile.extra-wide {
592
971
  /* Wide tile in the rack */
593
972
  text-indent: -6px;
594
973
  }
974
+
595
975
  div.board div.tile.wide,
596
976
  div.board div.tile.extra-wide {
597
977
  /* Wide letter tile on the board */
598
978
  text-indent: -2px;
599
979
  }
980
+
600
981
  /* On small form factors, we have bigger tiles in the rack than on the board */
982
+
601
983
  .rack div.tile {
602
984
  font-size: 26px;
603
985
  line-height: 33px;
@@ -606,7 +988,9 @@ div.board div.tile.extra-wide {
606
988
  margin-left: -2px;
607
989
  padding-right: 2px;
608
990
  }
991
+
609
992
  /* While dragging a tile, show it in the rack form factor */
993
+
610
994
  div.tile.dragging {
611
995
  position: fixed;
612
996
  z-index: 10;
@@ -630,9 +1014,11 @@ div.tile.dragging {
630
1014
  not of the netskrafl-container div */
631
1015
  box-sizing: content-box;
632
1016
  }
1017
+
633
1018
  div.tile.dragging.no-drop {
634
1019
  border-color: #c07359; /* var(--cancel-button); */
635
1020
  }
1021
+
636
1022
  .board td {
637
1023
  min-width: 21px;
638
1024
  overflow: hidden;
@@ -643,36 +1029,43 @@ div.tile.dragging.no-drop {
643
1029
  border-width: 1.5px;
644
1030
  border-radius: 2.5px;
645
1031
  }
1032
+
646
1033
  .rack td {
647
1034
  min-width: 36px;
648
1035
  width: 36px;
649
1036
  border-width: 0px;
650
1037
  box-shadow: 2px 2px 4px 0 var(--rack-shadow);
651
1038
  }
1039
+
652
1040
  tr.colid {
653
1041
  display: none;
654
1042
  }
1043
+
655
1044
  td.rowid {
656
1045
  display: none;
657
1046
  }
1047
+
658
1048
  div.rack-row {
659
1049
  display: block;
660
1050
  width: 100%;
661
1051
  margin-top: 8px;
662
1052
  height: 52px;
663
1053
  }
1054
+
664
1055
  div.rack-left {
665
1056
  display: block;
666
1057
  width: 14%;
667
1058
  height: 1px;
668
1059
  float: left;
669
1060
  }
1061
+
670
1062
  div.rack-right {
671
1063
  display: block;
672
1064
  width: 0%;
673
1065
  height: 1px;
674
1066
  float: left;
675
1067
  }
1068
+
676
1069
  div.rack {
677
1070
  display: block;
678
1071
  position: relative;
@@ -682,6 +1075,7 @@ div.rack {
682
1075
  top: -6px;
683
1076
  left: -3px;
684
1077
  }
1078
+
685
1079
  div.letterscore {
686
1080
  position: absolute;
687
1081
  bottom: 0px;
@@ -696,23 +1090,27 @@ div.letterscore {
696
1090
  background-color: transparent;
697
1091
  vertical-align: bottom;
698
1092
  }
1093
+
699
1094
  div.tile.wide div.letterscore,
700
1095
  div.tile.extra-wide div.letterscore {
701
1096
  /* Adjust letter score tracking for wide tiles */
702
1097
  letter-spacing: -0.5px;
703
1098
  }
1099
+
704
1100
  .rack div.letterscore {
705
1101
  right: 2px;
706
1102
  bottom: 3px;
707
1103
  font-size: 9px;
708
1104
  line-height: 9px;
709
1105
  }
1106
+
710
1107
  div.tile.dragging div.letterscore {
711
1108
  bottom: 5px;
712
1109
  right: 1.75px;
713
1110
  font-size: 9px;
714
1111
  line-height: 9px;
715
1112
  }
1113
+
716
1114
  div.word-check {
717
1115
  display: none;
718
1116
  position: absolute;
@@ -732,6 +1130,7 @@ div.word-check {
732
1130
  border: 1.5px solid;
733
1131
  border-radius: 5px;
734
1132
  }
1133
+
735
1134
  div.score {
736
1135
  display: none;
737
1136
  position: absolute;
@@ -750,6 +1149,7 @@ div.score {
750
1149
  border-radius: 5px;
751
1150
  border-color: var(--blank-tile);
752
1151
  }
1152
+
753
1153
  .standard-button {
754
1154
  text-align: center;
755
1155
  font-size: 18px;
@@ -761,20 +1161,7 @@ div.score {
761
1161
  border-radius: 5px;
762
1162
  cursor: pointer;
763
1163
  }
764
- .submitbutton {
765
- text-align: center;
766
- font-size: 18px;
767
- font-weight: 700;
768
- color: white;
769
- margin: 0;
770
- padding: 6px;
771
- padding-top: 9px;
772
- border-radius: 5px;
773
- cursor: pointer;
774
- width: 32px;
775
- height: 26px;
776
- background-color: var(--ok-button);
777
- }
1164
+
778
1165
  div.submitnewgame {
779
1166
  text-align: center;
780
1167
  font-size: 18px;
@@ -790,6 +1177,7 @@ div.submitnewgame {
790
1177
  background-color: var(--ok-button);
791
1178
  display: none;
792
1179
  }
1180
+
793
1181
  div.fb-share {
794
1182
  text-align: center;
795
1183
  font-size: 18px;
@@ -806,43 +1194,46 @@ div.fb-share {
806
1194
  display: none;
807
1195
  /* Don't display on mobile */
808
1196
  }
1197
+
809
1198
  div.fb-share:hover {
810
1199
  outline: var(--focus-border) solid 3px;
811
1200
  }
1201
+
812
1202
  div.waitmove {
813
- text-align: center;
814
- font-size: 18px;
815
- font-weight: 700;
816
- color: white;
1203
+ display: flex;
1204
+ justify-content: center;
1205
+ align-items: center;
1206
+ background-color: white;
817
1207
  margin: 0;
1208
+ margin-right: 1px;
818
1209
  padding: 6px;
819
- padding-top: 9px;
820
1210
  border-radius: 5px;
821
- cursor: pointer;
822
- width: 32px;
823
- height: 26px;
824
- background-color: var(--ok-button);
1211
+ cursor: default;
1212
+ width: 96px;
1213
+ height: 24px;
825
1214
  z-index: 10;
826
1215
  border-style: solid;
827
- border-width: 1px;
828
- border-color: var(--ok-button);
829
- background-color: white;
830
- margin-right: 1px;
1216
+ border-width: 1.5px;
1217
+ border-color: var(--logo-accent);
831
1218
  float: right;
832
- width: 96px;
833
1219
  }
1220
+
834
1221
  div.animated-waitmove {
835
- position: relative;
836
- display: inline-block;
837
- width: 40px;
838
- top: -4px;
1222
+ display: flex;
1223
+ justify-content: center;
1224
+ align-items: center;
1225
+ width: 26px;
1226
+ height: 26px;
839
1227
  }
1228
+
840
1229
  div.login-buttons {
841
1230
  position: relative;
842
1231
  }
1232
+
843
1233
  div.login-padding {
844
1234
  min-height: 60px;
845
1235
  }
1236
+
846
1237
  div.try-again {
847
1238
  text-align: center;
848
1239
  font-size: 18px;
@@ -865,6 +1256,7 @@ div.try-again {
865
1256
  padding: 10px;
866
1257
  font-size: 16px;
867
1258
  }
1259
+
868
1260
  div.get-help {
869
1261
  text-align: center;
870
1262
  font-size: 18px;
@@ -888,12 +1280,15 @@ div.get-help {
888
1280
  font-size: 16px;
889
1281
  background-color: var(--triple-letter-color);
890
1282
  }
1283
+
891
1284
  div.get-help span.glyphicon {
892
1285
  padding-right: 6px;
893
1286
  }
1287
+
894
1288
  div.try-again span.glyphicon {
895
1289
  padding-right: 6px;
896
1290
  }
1291
+
897
1292
  div.recallbtn {
898
1293
  text-align: center;
899
1294
  font-size: 18px;
@@ -909,11 +1304,13 @@ div.recallbtn {
909
1304
  background-color: var(--triple-word-color);
910
1305
  display: none;
911
1306
  }
1307
+
912
1308
  div.rack-left div.recallbtn {
913
1309
  display: block;
914
1310
  margin-right: auto;
915
1311
  /* Left-align the button */
916
1312
  }
1313
+
917
1314
  div.scramblebtn {
918
1315
  text-align: center;
919
1316
  font-size: 18px;
@@ -929,18 +1326,22 @@ div.scramblebtn {
929
1326
  background-color: var(--malfridur-accent);
930
1327
  display: none;
931
1328
  }
1329
+
932
1330
  div.rack-left div.scramblebtn {
933
1331
  display: block;
934
1332
  margin-right: auto;
935
1333
  /* Left-align the button */
936
1334
  }
1335
+
937
1336
  div.buttons {
938
1337
  position: relative;
939
1338
  height: 54px;
940
1339
  }
1340
+
941
1341
  div.buttons .glyphicon {
942
1342
  top: 0;
943
1343
  }
1344
+
944
1345
  .bottom-button {
945
1346
  text-align: center;
946
1347
  font-size: 18px;
@@ -959,6 +1360,7 @@ div.buttons .glyphicon {
959
1360
  width: 66px;
960
1361
  height: 23px;
961
1362
  }
1363
+
962
1364
  div.submitresign {
963
1365
  text-align: center;
964
1366
  font-size: 18px;
@@ -978,6 +1380,7 @@ div.submitresign {
978
1380
  color: var(--cancel-button);
979
1381
  left: 0px;
980
1382
  }
1383
+
981
1384
  div.submitexchange {
982
1385
  text-align: center;
983
1386
  font-size: 18px;
@@ -997,9 +1400,11 @@ div.submitexchange {
997
1400
  height: 23px;
998
1401
  color: var(--ok-button);
999
1402
  }
1403
+
1000
1404
  div.submitexchange.disabled {
1001
1405
  color: var(--blank-tile);
1002
1406
  }
1407
+
1003
1408
  div.submitpass {
1004
1409
  text-align: center;
1005
1410
  font-size: 18px;
@@ -1016,9 +1421,10 @@ div.submitpass {
1016
1421
  border: 1.5px solid var(--header-background);
1017
1422
  width: 66px;
1018
1423
  height: 23px;
1019
- color: var(--triple-word-color);
1424
+ color: var(--pass-button);
1020
1425
  left: 186px;
1021
1426
  }
1427
+
1022
1428
  div.challenge {
1023
1429
  text-align: center;
1024
1430
  font-size: 18px;
@@ -1038,9 +1444,11 @@ div.challenge {
1038
1444
  left: 279px;
1039
1445
  color: var(--triple-letter-color);
1040
1446
  }
1447
+
1041
1448
  div.challenge.disabled {
1042
1449
  border-color: var(--board-background);
1043
1450
  }
1451
+
1044
1452
  div.submitmove {
1045
1453
  text-align: center;
1046
1454
  font-size: 18px;
@@ -1056,17 +1464,21 @@ div.submitmove {
1056
1464
  background-color: var(--ok-button);
1057
1465
  display: none;
1058
1466
  }
1467
+
1059
1468
  div.rack-right div.submitmove {
1060
1469
  display: block;
1061
1470
  margin-left: auto;
1062
1471
  /* Right-align the button */
1063
1472
  }
1473
+
1064
1474
  div.submitmove.error-shown {
1065
1475
  display: none;
1066
1476
  }
1477
+
1067
1478
  div.submitmove span.glyphicon {
1068
1479
  margin-left: 8px;
1069
1480
  }
1481
+
1070
1482
  div.player {
1071
1483
  display: block;
1072
1484
  padding-left: 4px;
@@ -1077,11 +1489,13 @@ div.player {
1077
1489
  font-weight: 400;
1078
1490
  color: white;
1079
1491
  }
1492
+
1080
1493
  div.scorewrapper {
1081
1494
  font-family: var(--number-font);
1082
1495
  background-color: transparent;
1083
1496
  width: 100%;
1084
1497
  }
1498
+
1085
1499
  div.scoreleft {
1086
1500
  display: block;
1087
1501
  width: 42px;
@@ -1097,6 +1511,7 @@ div.scoreleft {
1097
1511
  top: 4px;
1098
1512
  left: 0;
1099
1513
  }
1514
+
1100
1515
  div.scoreright {
1101
1516
  display: block;
1102
1517
  width: 42px;
@@ -1112,6 +1527,7 @@ div.scoreright {
1112
1527
  top: 4px;
1113
1528
  right: 0;
1114
1529
  }
1530
+
1115
1531
  div.robot-btn {
1116
1532
  display: block;
1117
1533
  position: absolute;
@@ -1126,14 +1542,17 @@ div.robot-btn {
1126
1542
  overflow: hidden;
1127
1543
  background-color: transparent;
1128
1544
  }
1545
+
1129
1546
  div.robot-btn span.glyphicon-cog {
1130
1547
  margin-right: 2px;
1131
1548
  }
1549
+
1132
1550
  div.gamestats div.robot-btn {
1133
1551
  width: 100%;
1134
1552
  margin: 0;
1135
1553
  padding-top: 6px;
1136
1554
  }
1555
+
1137
1556
  div.player-btn {
1138
1557
  display: block;
1139
1558
  position: absolute;
@@ -1151,25 +1570,29 @@ div.player-btn {
1151
1570
  border-width: 0;
1152
1571
  border-radius: 5px;
1153
1572
  }
1573
+
1154
1574
  div.player-btn.left,
1155
1575
  div.robot-btn.left {
1156
1576
  padding-left: 38px;
1157
- padding-right: 12px;
1577
+ padding-right: 4px;
1158
1578
  }
1579
+
1159
1580
  div.player-btn.right,
1160
1581
  div.robot-btn.right {
1161
- padding-left: 10px;
1162
- /* Note: purposefully a bit asymmetric with the left button */
1582
+ padding-left: 4px;
1163
1583
  padding-right: 38px;
1164
1584
  }
1585
+
1165
1586
  div.player-btn.left.tomove,
1166
1587
  div.player-btn.right.tomove {
1167
1588
  color: white;
1168
1589
  }
1590
+
1169
1591
  div.player-btn.left.tomove:hover,
1170
1592
  div.player-btn.right.tomove:hover {
1171
1593
  color: black;
1172
1594
  }
1595
+
1173
1596
  div.heading {
1174
1597
  position: relative;
1175
1598
  width: 100%;
@@ -1180,6 +1603,7 @@ div.heading {
1180
1603
  padding-right: 0;
1181
1604
  height: 38px;
1182
1605
  }
1606
+
1183
1607
  div.tabbed-page {
1184
1608
  position: absolute;
1185
1609
  left: 0;
@@ -1190,9 +1614,11 @@ div.tabbed-page {
1190
1614
  font-size: 13px;
1191
1615
  line-height: 23px;
1192
1616
  }
1617
+
1193
1618
  div.tab-scroll-area {
1194
1619
  position: relative;
1195
1620
  }
1621
+
1196
1622
  div.loginform-small {
1197
1623
  display: block;
1198
1624
  position: absolute;
@@ -1201,6 +1627,7 @@ div.loginform-small {
1201
1627
  padding-left: 0;
1202
1628
  padding-right: 0;
1203
1629
  }
1630
+
1204
1631
  div.loginform-large {
1205
1632
  display: none;
1206
1633
  position: absolute;
@@ -1211,22 +1638,27 @@ div.loginform-large {
1211
1638
  max-width: 740px;
1212
1639
  padding: 0;
1213
1640
  }
1641
+
1214
1642
  div.login-logo {
1215
1643
  margin-top: 120px;
1216
1644
  margin-left: 100px;
1217
1645
  }
1646
+
1218
1647
  div.login-legend {
1219
1648
  margin-left: 50px;
1220
1649
  margin-top: 40px;
1221
1650
  }
1651
+
1222
1652
  div#logo-pic {
1223
1653
  text-align: center;
1224
1654
  padding-top: 32px;
1225
1655
  padding-bottom: 16px;
1226
1656
  }
1657
+
1227
1658
  div.loginform-small div#logo-pic {
1228
1659
  padding-top: 0;
1229
1660
  }
1661
+
1230
1662
  @keyframes expand {
1231
1663
  0% {
1232
1664
  transform: scale(1);
@@ -1238,6 +1670,7 @@ div.loginform-small div#logo-pic {
1238
1670
  transform: scale(1);
1239
1671
  }
1240
1672
  }
1673
+
1241
1674
  @-webkit-keyframes expand {
1242
1675
  0% {
1243
1676
  transform: scale(1);
@@ -1249,6 +1682,7 @@ div.loginform-small div#logo-pic {
1249
1682
  transform: scale(1);
1250
1683
  }
1251
1684
  }
1685
+
1252
1686
  @keyframes slidein {
1253
1687
  0% {
1254
1688
  transform: scale(0);
@@ -1257,6 +1691,7 @@ div.loginform-small div#logo-pic {
1257
1691
  transform: scale(1);
1258
1692
  }
1259
1693
  }
1694
+
1260
1695
  @-webkit-keyframes slidein {
1261
1696
  0% {
1262
1697
  transform: scale(0);
@@ -1265,6 +1700,7 @@ div.loginform-small div#logo-pic {
1265
1700
  transform: scale(1);
1266
1701
  }
1267
1702
  }
1703
+
1268
1704
  div.login-btn-large {
1269
1705
  text-align: center;
1270
1706
  font-size: 19px;
@@ -1282,13 +1718,16 @@ div.login-btn-large {
1282
1718
  cursor: pointer;
1283
1719
  float: right;
1284
1720
  }
1721
+
1285
1722
  div.login-btn-large:hover {
1286
- background-color: var(--triple-word-color);
1723
+ background-color: var(--pass-button);
1287
1724
  animation: expand 0.4s;
1288
1725
  }
1726
+
1289
1727
  div.login-btn-large span {
1290
1728
  padding-left: 18px;
1291
1729
  }
1730
+
1292
1731
  div.login-btn-small {
1293
1732
  width: 60%;
1294
1733
  text-align: center;
@@ -1306,15 +1745,18 @@ div.login-btn-small {
1306
1745
  vertical-align: middle;
1307
1746
  cursor: pointer;
1308
1747
  }
1748
+
1309
1749
  div.login-btn-small:hover {
1310
- background-color: var(--triple-word-color);
1750
+ background-color: var(--pass-button);
1311
1751
  }
1752
+
1312
1753
  div.blurb {
1313
1754
  font-size: 16px;
1314
1755
  font-weight: bold;
1315
1756
  padding-bottom: 24px;
1316
1757
  text-align: center;
1317
1758
  }
1759
+
1318
1760
  div.login-error {
1319
1761
  padding: 12px;
1320
1762
  margin-top: 160px;
@@ -1328,27 +1770,32 @@ div.login-error {
1328
1770
  font-size: 15px;
1329
1771
  box-shadow: 3px 3px 5px 2px var(--dark-shadow);
1330
1772
  }
1773
+
1331
1774
  p.login-sorry {
1332
1775
  font-weight: bold;
1333
1776
  }
1777
+
1334
1778
  p.login-error-icon {
1335
1779
  margin-top: 8px;
1336
1780
  margin-bottom: 8px;
1337
1781
  font-size: 34px;
1338
1782
  color: var(--triple-word-color);
1339
1783
  }
1784
+
1340
1785
  div.leftplayer {
1341
1786
  display: inline-block;
1342
1787
  width: 50%;
1343
1788
  text-align: left;
1344
1789
  border-radius: 4px 0 0 4px;
1345
1790
  }
1791
+
1346
1792
  div.rightplayer {
1347
1793
  display: inline-block;
1348
1794
  width: 50%;
1349
1795
  text-align: right;
1350
1796
  border-radius: 0 4px 4px 0;
1351
1797
  }
1798
+
1352
1799
  div.right-tab {
1353
1800
  position: absolute;
1354
1801
  top: -28px;
@@ -1369,37 +1816,46 @@ div.right-tab {
1369
1816
  cursor: pointer;
1370
1817
  box-shadow: 2px 2px 4px 0 #afb7cad0;
1371
1818
  }
1819
+
1372
1820
  div.right-tab#tab-board {
1373
1821
  left: 41px;
1374
1822
  background-color: var(--container-bg-color);
1375
1823
  }
1824
+
1376
1825
  div.right-tab#tab-movelist {
1377
1826
  left: 106px;
1378
1827
  background-color: var(--board-background);
1379
1828
  }
1829
+
1380
1830
  div.right-tab#tab-twoletter {
1381
1831
  left: 171px;
1382
1832
  background-color: var(--two-letter-background);
1383
1833
  }
1834
+
1384
1835
  div.right-tab#tab-games {
1385
1836
  left: 236px;
1386
1837
  background-color: var(--tile-background);
1387
1838
  }
1839
+
1388
1840
  div.right-tab#tab-chat {
1389
1841
  left: 301px;
1390
1842
  background-color: var(--chat-background);
1391
1843
  }
1844
+
1392
1845
  div.right-tab.selected {
1393
1846
  opacity: 1;
1394
1847
  }
1848
+
1395
1849
  div.right-tab:hover {
1396
1850
  opacity: 1;
1397
1851
  }
1852
+
1398
1853
  div.right-tab.alert > span.glyphicon {
1399
1854
  color: var(--cancel-button);
1400
1855
  animation: redBlink 1s infinite;
1401
1856
  -webkit-animation: redBlink 1s infinite;
1402
1857
  }
1858
+
1403
1859
  div.right-area {
1404
1860
  /* display: none; */
1405
1861
  position: relative;
@@ -1413,10 +1869,12 @@ div.right-area {
1413
1869
  color: black;
1414
1870
  cursor: default;
1415
1871
  }
1872
+
1416
1873
  div.right-area.with-clock {
1417
1874
  height: 380px;
1418
- margin-top: 48px;
1875
+ margin-top: 46px;
1419
1876
  }
1877
+
1420
1878
  div.message {
1421
1879
  text-align: center;
1422
1880
  font-size: 14px;
@@ -1425,9 +1883,11 @@ div.message {
1425
1883
  background-color: var(--light-background);
1426
1884
  font-weight: 400;
1427
1885
  }
1886
+
1428
1887
  div.message strong {
1429
1888
  text-transform: uppercase;
1430
1889
  }
1890
+
1431
1891
  div.movelist-container {
1432
1892
  position: absolute;
1433
1893
  top: 0;
@@ -1440,6 +1900,7 @@ div.movelist-container {
1440
1900
  z-index: 6;
1441
1901
  border-radius: 4px 4px 0 0;
1442
1902
  }
1903
+
1443
1904
  div.movelist {
1444
1905
  font-family: var(--number-font);
1445
1906
  margin: 0;
@@ -1448,9 +1909,11 @@ div.movelist {
1448
1909
  width: 100%;
1449
1910
  height: 350px;
1450
1911
  }
1912
+
1451
1913
  div.movelist.bestmoves {
1452
1914
  overflow-y: hidden;
1453
1915
  }
1916
+
1454
1917
  div.movelist-container div.bag {
1455
1918
  display: block;
1456
1919
  background-color: var(--container-bg-color);
@@ -1462,9 +1925,11 @@ div.movelist-container div.bag {
1462
1925
  width: 100%;
1463
1926
  height: 104px;
1464
1927
  }
1928
+
1465
1929
  div.game-timed {
1466
1930
  display: none;
1467
1931
  }
1932
+
1468
1933
  div.modal-dialog {
1469
1934
  visibility: hidden;
1470
1935
  position: fixed;
@@ -1475,17 +1940,40 @@ div.modal-dialog {
1475
1940
  z-index: 10;
1476
1941
  background-color: rgba(32, 32, 32, 0.2);
1477
1942
  }
1943
+
1478
1944
  div.modal-dialog#spinner-dialog {
1479
1945
  background-color: rgba(255, 255, 255, 0.4);
1480
1946
  }
1947
+
1481
1948
  div.animated-spinner {
1482
- position: absolute;
1949
+ position: fixed;
1950
+ top: min(360px, 50vh);
1483
1951
  left: 50%;
1484
- top: 271.5px;
1952
+ width: 120px;
1953
+ height: 120px;
1954
+ transform: translate(-50%, -50%);
1955
+ z-index: 100;
1956
+ }
1957
+
1958
+ @keyframes oscillate {
1959
+ 0% { transform: rotate(0deg); }
1960
+ 25% { transform: rotate(30deg); }
1961
+ 50% { transform: rotate(0deg); }
1962
+ 75% { transform: rotate(-30deg); }
1963
+ 100% { transform: rotate(0deg); }
1485
1964
  }
1965
+
1966
+ div.animated-netskrafl-logo {
1967
+ display: inline-block;
1968
+ aspect-ratio: 1;
1969
+ transform-origin: center center;
1970
+ animation: oscillate 2s ease-in-out infinite;
1971
+ }
1972
+
1486
1973
  svg circle.shadow {
1487
1974
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
1488
1975
  }
1976
+
1489
1977
  .std-form {
1490
1978
  position: absolute;
1491
1979
  padding-left: 12px;
@@ -1497,6 +1985,7 @@ svg circle.shadow {
1497
1985
  z-index: 20;
1498
1986
  background-color: var(--container-bg-color);
1499
1987
  }
1988
+
1500
1989
  div#blank-form {
1501
1990
  position: absolute;
1502
1991
  padding-left: 12px;
@@ -1513,6 +2002,7 @@ div#blank-form {
1513
2002
  height: 400px;
1514
2003
  background-color: var(--board-background);
1515
2004
  }
2005
+
1516
2006
  .bottom-message {
1517
2007
  position: absolute;
1518
2008
  text-align: right;
@@ -1532,6 +2022,7 @@ div#blank-form {
1532
2022
  transform-origin: left top;
1533
2023
  animation: slidein 0.4s;
1534
2024
  }
2025
+
1535
2026
  .bold-bottom-message {
1536
2027
  position: absolute;
1537
2028
  text-align: right;
@@ -1554,6 +2045,7 @@ div#blank-form {
1554
2045
  color: white;
1555
2046
  border-radius: 4px;
1556
2047
  }
2048
+
1557
2049
  div.error {
1558
2050
  position: absolute;
1559
2051
  text-align: right;
@@ -1578,6 +2070,7 @@ div.error {
1578
2070
  background-color: var(--cancel-button);
1579
2071
  cursor: pointer;
1580
2072
  }
2073
+
1581
2074
  div.opp-turn {
1582
2075
  display: inline-block;
1583
2076
  padding-top: 10px;
@@ -1585,14 +2078,16 @@ div.opp-turn {
1585
2078
  width: 220px;
1586
2079
  text-align: right;
1587
2080
  }
2081
+
1588
2082
  div.opp-turn.flashing {
1589
2083
  color: var(--cancel-button);
1590
2084
  transition: 0.1s;
1591
2085
  transform: scale(1.1);
1592
- transform-origin: center left;
2086
+ transform-origin: center right;
1593
2087
  animation: redBlink 0.4s;
1594
2088
  animation-iteration-count: 2;
1595
2089
  }
2090
+
1596
2091
  div#congrats,
1597
2092
  div#gameover {
1598
2093
  position: absolute;
@@ -1618,14 +2113,17 @@ div#gameover {
1618
2113
  text-align: center;
1619
2114
  padding-bottom: 0px;
1620
2115
  }
2116
+
1621
2117
  div#congrats span.glyphicon-bookmark {
1622
2118
  padding-right: 2px;
1623
2119
  color: var(--ok-button);
1624
2120
  }
2121
+
1625
2122
  div#gameover span.glyphicon-info-sign {
1626
2123
  padding-right: 4px;
1627
2124
  color: var(--triple-letter-color);
1628
2125
  }
2126
+
1629
2127
  div.resign {
1630
2128
  position: absolute;
1631
2129
  text-align: right;
@@ -1649,6 +2147,7 @@ div.resign {
1649
2147
  border-radius: 4px;
1650
2148
  background-color: var(--cancel-button);
1651
2149
  }
2150
+
1652
2151
  div.pass {
1653
2152
  position: absolute;
1654
2153
  text-align: right;
@@ -1672,6 +2171,7 @@ div.pass {
1672
2171
  border-radius: 4px;
1673
2172
  background-color: var(--triple-word-color);
1674
2173
  }
2174
+
1675
2175
  div.pass-last {
1676
2176
  position: absolute;
1677
2177
  text-align: right;
@@ -1695,6 +2195,7 @@ div.pass-last {
1695
2195
  border-radius: 4px;
1696
2196
  background-color: var(--triple-word-color);
1697
2197
  }
2198
+
1698
2199
  div.chall {
1699
2200
  position: absolute;
1700
2201
  text-align: right;
@@ -1718,6 +2219,7 @@ div.chall {
1718
2219
  border-radius: 4px;
1719
2220
  background-color: var(--triple-letter-color);
1720
2221
  }
2222
+
1721
2223
  div.chall-info {
1722
2224
  position: absolute;
1723
2225
  text-align: right;
@@ -1745,6 +2247,7 @@ div.chall-info {
1745
2247
  width: 311px;
1746
2248
  padding: 2px 24px 0px;
1747
2249
  }
2250
+
1748
2251
  div.exchange {
1749
2252
  position: absolute;
1750
2253
  text-align: right;
@@ -1768,6 +2271,7 @@ div.exchange {
1768
2271
  border-radius: 4px;
1769
2272
  background-color: var(--ok-button);
1770
2273
  }
2274
+
1771
2275
  div.submitmove#move-mobile {
1772
2276
  display: flex;
1773
2277
  flex-direction: row;
@@ -1783,14 +2287,17 @@ div.submitmove#move-mobile {
1783
2287
  padding-right: 10px;
1784
2288
  padding-top: 6px;
1785
2289
  }
2290
+
1786
2291
  div.submitmove#move-mobile.manual {
1787
2292
  background-color: var(--double-letter-color);
1788
2293
  color: white;
1789
2294
  }
2295
+
1790
2296
  div.submitmove#move-mobile.word-good {
1791
2297
  background-color: var(--ok-button);
1792
2298
  color: white;
1793
2299
  }
2300
+
1794
2301
  @keyframes colorPulseMobile {
1795
2302
  0% {
1796
2303
  transform: scale(1);
@@ -1805,6 +2312,7 @@ div.submitmove#move-mobile.word-good {
1805
2312
  transform: scale(1);
1806
2313
  }
1807
2314
  }
2315
+
1808
2316
  @-webkit-keyframes colorPulseMobile {
1809
2317
  0% {
1810
2318
  transform: scale(1);
@@ -1819,20 +2327,24 @@ div.submitmove#move-mobile.word-good {
1819
2327
  transform: scale(1);
1820
2328
  }
1821
2329
  }
2330
+
1822
2331
  span.score-mobile {
1823
2332
  display: inline-block;
1824
2333
  font-weight: 400;
1825
2334
  font-size: 22px;
1826
2335
  line-height: 22px;
1827
2336
  }
2337
+
1828
2338
  div.submitmove#move-mobile.word-great span.score-mobile {
1829
2339
  animation: colorPulseMobile 1.5s infinite;
1830
2340
  -webkit-animation: colorPulseMobile 1.5s infinite;
1831
2341
  }
2342
+
1832
2343
  div.submitmove#move-mobile span.glyphicon {
1833
2344
  top: 0px;
1834
2345
  margin-top: 2px;
1835
2346
  }
2347
+
1836
2348
  div.force-resign {
1837
2349
  display: inline-flex;
1838
2350
  flex-direction: column;
@@ -1850,6 +2362,7 @@ div.force-resign {
1850
2362
  background-color: var(--cancel-button);
1851
2363
  border-radius: 5px;
1852
2364
  }
2365
+
1853
2366
  div.gameinfo {
1854
2367
  position: absolute;
1855
2368
  text-align: right;
@@ -1875,30 +2388,32 @@ div.gameinfo {
1875
2388
  color: white;
1876
2389
  padding-top: 10px;
1877
2390
  }
2391
+
1878
2392
  input.chat-txt {
1879
2393
  box-sizing: border-box;
1880
- font-family: var(--primary-font);
1881
- width: 276px;
2394
+ /* font-family: var(--primary-font); */
2395
+ width: 292px;
1882
2396
  font-size: 18px;
1883
- height: 24px;
2397
+ height: 32px;
1884
2398
  font-weight: normal;
1885
2399
  border-style: solid;
1886
- border-color: var(--ok-button);
2400
+ border-color: var(--header-color);
1887
2401
  border-width: 1px;
1888
2402
  border-radius: 3px;
1889
- margin-top: 1px;
1890
2403
  padding-top: 4px;
1891
2404
  padding-bottom: 3px;
1892
2405
  padding-left: 6px;
1893
2406
  padding-right: 6px;
1894
2407
  }
2408
+
1895
2409
  input.chat-txt:focus {
1896
- border-color: var(--ok-button);
2410
+ border-color: var(--header-color);
1897
2411
  border-width: 2px;
1898
2412
  padding-left: 5px;
1899
2413
  padding-right: 5px;
1900
2414
  outline-style: none;
1901
2415
  }
2416
+
1902
2417
  div.chat-area {
1903
2418
  position: absolute;
1904
2419
  top: 6px;
@@ -1908,6 +2423,7 @@ div.chat-area {
1908
2423
  padding: 6px;
1909
2424
  overflow: auto;
1910
2425
  }
2426
+
1911
2427
  div.modal-close#chat-send {
1912
2428
  display: inline-block;
1913
2429
  position: relative;
@@ -1919,9 +2435,14 @@ div.modal-close#chat-send {
1919
2435
  margin: 0 0 2px 8px;
1920
2436
  padding-top: 4px;
1921
2437
  padding-bottom: 0;
1922
- background-color: var(--ok-button);
2438
+ background-color: var(--header-color);
1923
2439
  color: white;
1924
2440
  }
2441
+
2442
+ div.modal-close#chat-send span.glyphicon {
2443
+ top: 4px;
2444
+ }
2445
+
1925
2446
  div.twoletter {
1926
2447
  position: absolute;
1927
2448
  top: 0px;
@@ -1933,6 +2454,7 @@ div.twoletter {
1933
2454
  z-index: 3;
1934
2455
  border-radius: 4px 4px 0 0;
1935
2456
  }
2457
+
1936
2458
  div.twoletter-area {
1937
2459
  position: absolute;
1938
2460
  top: 0;
@@ -1946,17 +2468,21 @@ div.twoletter-area {
1946
2468
  margin-top: 12px;
1947
2469
  cursor: pointer;
1948
2470
  }
2471
+
1949
2472
  div.twoletter-area#two-2 {
1950
2473
  visibility: hidden;
1951
2474
  }
2475
+
1952
2476
  div.twoletter-group {
1953
2477
  display: inline-block;
1954
2478
  margin-right: 5px;
1955
2479
  }
2480
+
1956
2481
  div.twoletter-word {
1957
2482
  display: inline-block;
1958
2483
  padding-right: 4px;
1959
2484
  }
2485
+
1960
2486
  div.twoletter-word b {
1961
2487
  background-color: var(--ok-button);
1962
2488
  color: white;
@@ -1964,15 +2490,19 @@ div.twoletter-word b {
1964
2490
  padding-right: 2px;
1965
2491
  border-radius: 2px;
1966
2492
  }
2493
+
1967
2494
  span.statsbutton {
1968
2495
  display: none;
1969
2496
  }
2497
+
1970
2498
  div#ready-toggler {
1971
2499
  display: none;
1972
2500
  }
2501
+
1973
2502
  div#timed-toggler {
1974
2503
  display: none;
1975
2504
  }
2505
+
1976
2506
  div.help-container img {
1977
2507
  /* On mobile, scale images in help text down to fit the column width */
1978
2508
  max-width: 100%;
@@ -1980,39 +2510,47 @@ div.help-container img {
1980
2510
  object-fit: scale-down;
1981
2511
  display: inline;
1982
2512
  }
2513
+
1983
2514
  div#tabs,
1984
2515
  div#main-tabs {
1985
2516
  border-width: 0;
1986
2517
  padding: 0;
1987
2518
  }
2519
+
1988
2520
  div#tabs > div[role=tabpanel],
1989
2521
  div#main-tabs > div[role=tabpanel] {
1990
2522
  position: relative;
1991
2523
  top: -8px;
1992
2524
  height: 504px;
1993
2525
  }
1994
- div#main-tabs div.header-logo {
1995
- padding-left: 14px;
1996
- padding-right: 8px;
2526
+
2527
+ div#main-tabs div.header-logo {
2528
+ padding-left: 8px;
2529
+ padding-right: 4px;
1997
2530
  padding-top: 12px;
1998
2531
  }
2532
+
1999
2533
  div#tabs {
2000
2534
  background-color: transparent;
2001
2535
  }
2536
+
2002
2537
  div.userid {
2003
2538
  display: none;
2004
2539
  }
2540
+
2005
2541
  span.list-ts {
2006
2542
  display: none;
2007
2543
  width: 164px;
2008
2544
  max-width: 164px;
2009
2545
  }
2546
+
2010
2547
  span.list-ts-short {
2011
2548
  display: none;
2012
2549
  padding-left: 4px;
2013
2550
  width: 144px;
2014
2551
  max-width: 144px;
2015
2552
  }
2553
+
2016
2554
  span.list-chall {
2017
2555
  display: inline-block;
2018
2556
  width: 184px;
@@ -2020,24 +2558,28 @@ span.list-chall {
2020
2558
  overflow: hidden;
2021
2559
  text-overflow: ellipsis;
2022
2560
  }
2561
+
2023
2562
  span.list-s0 {
2024
2563
  width: 38px;
2025
2564
  max-width: 38px;
2026
2565
  text-align: right;
2027
2566
  justify-content: flex-end;
2028
2567
  }
2568
+
2029
2569
  span.list-s1 {
2030
2570
  width: 38px;
2031
2571
  max-width: 38px;
2032
2572
  text-align: left;
2033
2573
  justify-content: flex-start;
2034
2574
  }
2575
+
2035
2576
  span.list-colon {
2036
2577
  justify-content: center;
2037
2578
  text-align: center;
2038
2579
  width: 8px;
2039
2580
  max-width: 8px;
2040
2581
  }
2582
+
2041
2583
  span.list-scorehdr {
2042
2584
  display: inline-block;
2043
2585
  width: 84px;
@@ -2045,6 +2587,7 @@ span.list-scorehdr {
2045
2587
  max-width: 84px;
2046
2588
  text-align: center;
2047
2589
  }
2590
+
2048
2591
  div.list-elo-adj {
2049
2592
  display: inline-flex;
2050
2593
  flex-direction: column;
@@ -2055,6 +2598,7 @@ div.list-elo-adj {
2055
2598
  text-align: center;
2056
2599
  text-overflow: clip;
2057
2600
  }
2601
+
2058
2602
  span.list-elo-hdr {
2059
2603
  display: inline-block;
2060
2604
  width: 104px;
@@ -2062,6 +2606,7 @@ span.list-elo-hdr {
2062
2606
  max-width: 104px;
2063
2607
  text-align: center;
2064
2608
  }
2609
+
2065
2610
  span.list-tc {
2066
2611
  display: inline-block;
2067
2612
  width: 84px;
@@ -2069,6 +2614,7 @@ span.list-tc {
2069
2614
  text-align: left;
2070
2615
  padding-right: 0;
2071
2616
  }
2617
+
2072
2618
  div.tilecount {
2073
2619
  display: inline-block;
2074
2620
  vertical-align: middle;
@@ -2082,18 +2628,22 @@ div.tilecount {
2082
2628
  border-radius: 6px;
2083
2629
  overflow: hidden;
2084
2630
  }
2631
+
2085
2632
  div.tc {
2086
2633
  display: inline-block;
2087
2634
  text-align: left;
2088
2635
  background-color: var(--ok-button);
2089
2636
  }
2637
+
2090
2638
  div.tc.losing {
2091
2639
  background-color: var(--cancel-button);
2092
2640
  }
2641
+
2093
2642
  div.tc:before {
2094
2643
  content: "\A0";
2095
2644
  /* Invisible space */
2096
2645
  }
2646
+
2097
2647
  div#userlist span.list-ch,
2098
2648
  div#elolist span.list-ch,
2099
2649
  div#chall-received span.list-ch,
@@ -2101,6 +2651,7 @@ div#chall-sent span.list-ch,
2101
2651
  div#userlist span.list-fav {
2102
2652
  cursor: pointer;
2103
2653
  }
2654
+
2104
2655
  span.list-ch,
2105
2656
  span.list-fav,
2106
2657
  span.list-icon,
@@ -2113,10 +2664,12 @@ span.list-overdue {
2113
2664
  overflow: hidden;
2114
2665
  margin-left: 2px;
2115
2666
  }
2667
+
2116
2668
  span.list-overdue,
2117
2669
  span.list-fav {
2118
2670
  display: none;
2119
2671
  }
2672
+
2120
2673
  span.list-newbag {
2121
2674
  display: none;
2122
2675
  font-size: 18px;
@@ -2125,6 +2678,7 @@ span.list-newbag {
2125
2678
  max-width: 22px;
2126
2679
  margin-left: 14px;
2127
2680
  }
2681
+
2128
2682
  span.list-manual {
2129
2683
  display: none;
2130
2684
  font-size: 18px;
@@ -2133,6 +2687,7 @@ span.list-manual {
2133
2687
  max-width: 26px;
2134
2688
  margin-left: 14px;
2135
2689
  }
2690
+
2136
2691
  span.list-win {
2137
2692
  display: inline-block;
2138
2693
  font-size: 18px;
@@ -2140,28 +2695,33 @@ span.list-win {
2140
2695
  max-width: 26px;
2141
2696
  margin-left: 0;
2142
2697
  }
2698
+
2143
2699
  span.list-nick {
2144
2700
  display: inline-block;
2145
2701
  width: 140px;
2146
2702
  min-width: 140px;
2147
2703
  overflow: hidden;
2148
2704
  }
2705
+
2149
2706
  span.list-nick-elo {
2150
2707
  display: inline-block;
2151
2708
  width: 150px;
2152
2709
  max-width: 150px;
2153
2710
  }
2711
+
2154
2712
  span.list-opp {
2155
2713
  display: inline-block;
2156
2714
  width: 150px;
2157
2715
  max-width: 150px;
2158
2716
  }
2717
+
2159
2718
  span.list-fullname {
2160
2719
  display: inline-block;
2161
2720
  width: 400px;
2162
2721
  min-width: 400px;
2163
2722
  overflow: hidden;
2164
2723
  }
2724
+
2165
2725
  span.list-fullname-robot {
2166
2726
  display: inline-block;
2167
2727
  font-size: 14px;
@@ -2172,6 +2732,7 @@ span.list-fullname-robot {
2172
2732
  overflow: hidden;
2173
2733
  text-overflow: ellipsis;
2174
2734
  }
2735
+
2175
2736
  span.list-human-elo {
2176
2737
  display: inline-block;
2177
2738
  width: 40px;
@@ -2179,18 +2740,21 @@ span.list-human-elo {
2179
2740
  text-align: center;
2180
2741
  margin-right: 6px;
2181
2742
  }
2743
+
2182
2744
  span.list-duration {
2183
2745
  display: none;
2184
2746
  width: 192px;
2185
2747
  max-width: 192px;
2186
2748
  text-align: right;
2187
2749
  }
2750
+
2188
2751
  span.list-info-hdr {
2189
2752
  display: none;
2190
2753
  width: 52px;
2191
2754
  max-width: 52px;
2192
2755
  text-align: center;
2193
2756
  }
2757
+
2194
2758
  span.list-info {
2195
2759
  display: none;
2196
2760
  width: 52px;
@@ -2199,6 +2763,7 @@ span.list-info {
2199
2763
  height: 24px;
2200
2764
  line-height: 20px;
2201
2765
  }
2766
+
2202
2767
  span.list-rank {
2203
2768
  display: inline-block;
2204
2769
  width: 36px;
@@ -2206,6 +2771,7 @@ span.list-rank {
2206
2771
  text-align: center;
2207
2772
  margin-right: 8px;
2208
2773
  }
2774
+
2209
2775
  span.list-rank-no-mobile {
2210
2776
  display: none;
2211
2777
  width: 32px;
@@ -2213,6 +2779,7 @@ span.list-rank-no-mobile {
2213
2779
  text-align: center;
2214
2780
  margin-right: 10px;
2215
2781
  }
2782
+
2216
2783
  span.list-elo {
2217
2784
  display: inline-block;
2218
2785
  width: 40px;
@@ -2220,6 +2787,7 @@ span.list-elo {
2220
2787
  text-align: center;
2221
2788
  margin-right: 10px;
2222
2789
  }
2790
+
2223
2791
  span.list-elo-no-mobile {
2224
2792
  display: none;
2225
2793
  width: 40px;
@@ -2227,6 +2795,7 @@ span.list-elo-no-mobile {
2227
2795
  text-align: center;
2228
2796
  margin-right: 10px;
2229
2797
  }
2798
+
2230
2799
  span.list-games {
2231
2800
  display: none;
2232
2801
  width: 48px;
@@ -2234,6 +2803,7 @@ span.list-games {
2234
2803
  text-align: right;
2235
2804
  margin-right: 10px;
2236
2805
  }
2806
+
2237
2807
  span.list-ratio {
2238
2808
  display: none;
2239
2809
  width: 40px;
@@ -2241,6 +2811,7 @@ span.list-ratio {
2241
2811
  text-align: right;
2242
2812
  margin-right: 10px;
2243
2813
  }
2814
+
2244
2815
  span.list-avgpts {
2245
2816
  display: none;
2246
2817
  width: 36px;
@@ -2248,22 +2819,28 @@ span.list-avgpts {
2248
2819
  text-align: right;
2249
2820
  margin-right: 16px;
2250
2821
  }
2822
+
2251
2823
  span.mobile-break {
2252
2824
  display: inline;
2253
2825
  }
2826
+
2254
2827
  .tab-legend {
2255
2828
  display: none;
2256
2829
  font-weight: normal;
2257
2830
  }
2831
+
2258
2832
  div.user-cat span#break {
2259
2833
  display: inline;
2260
2834
  }
2835
+
2261
2836
  div.user-cat#user-headings {
2262
2837
  line-height: 32px;
2263
2838
  }
2839
+
2264
2840
  div.user-cat#user-search {
2265
2841
  display: none;
2266
2842
  }
2843
+
2267
2844
  div#chall-form {
2268
2845
  position: absolute;
2269
2846
  padding-left: 12px;
@@ -2286,6 +2863,7 @@ div#chall-form {
2286
2863
  height: 352px;
2287
2864
  font-size: 0.85em;
2288
2865
  }
2866
+
2289
2867
  div#chall-fairplay {
2290
2868
  margin-top: 10px;
2291
2869
  padding-left: 0;
@@ -2293,27 +2871,33 @@ div#chall-fairplay {
2293
2871
  font-size: 14px;
2294
2872
  text-align: right;
2295
2873
  }
2874
+
2296
2875
  div#chall-oldbag {
2297
2876
  position: absolute;
2298
2877
  bottom: 16px;
2299
2878
  font-size: 14px;
2300
2879
  }
2880
+
2301
2881
  div#chall-oldbag td span.glyphicon-exclamation-sign {
2302
2882
  color: var(--cancel-button);
2303
2883
  padding-right: 8px;
2304
2884
  }
2885
+
2305
2886
  span.caption.wide {
2306
2887
  width: 200px;
2307
2888
  }
2889
+
2308
2890
  div#manual-toggler {
2309
2891
  display: inline-block;
2310
2892
  }
2893
+
2311
2894
  div#chall-ok {
2312
2895
  right: 12px;
2313
2896
  width: 72px;
2314
2897
  /* Override */
2315
2898
  background-color: var(--ok-button);
2316
2899
  }
2900
+
2317
2901
  div#chall-cancel {
2318
2902
  right: 108px;
2319
2903
  /* 12 + 72 + 12 + 12 */
@@ -2321,9 +2905,11 @@ div#chall-cancel {
2321
2905
  /* Override */
2322
2906
  background-color: var(--cancel-button);
2323
2907
  }
2908
+
2324
2909
  div.user-cat#user-headings span {
2325
2910
  white-space: nowrap;
2326
2911
  }
2912
+
2327
2913
  div#user-load {
2328
2914
  display: none;
2329
2915
  position: absolute;
@@ -2332,10 +2918,14 @@ div#user-load {
2332
2918
  width: 24px;
2333
2919
  height: 24px;
2334
2920
  z-index: 10;
2921
+ /*
2922
+ !!! TODO:
2335
2923
  background-image: url('user-loader.gif');
2336
2924
  background-repeat: no-repeat;
2337
2925
  background-size: 24px 24px;
2926
+ */
2338
2927
  }
2928
+
2339
2929
  div#promo-form {
2340
2930
  position: absolute;
2341
2931
  padding-left: 12px;
@@ -2352,17 +2942,21 @@ div#promo-form {
2352
2942
  height: 364px;
2353
2943
  line-height: 1.5em;
2354
2944
  }
2945
+
2355
2946
  div.promo-content {
2356
2947
  margin-top: 16px;
2357
2948
  margin-left: 16px;
2358
2949
  margin-right: 16px;
2359
2950
  }
2951
+
2360
2952
  div.promo-fullscreen {
2361
2953
  display: none;
2362
2954
  }
2955
+
2363
2956
  div.promo-mobile {
2364
2957
  display: block;
2365
2958
  }
2959
+
2366
2960
  div.btn-promo-yes {
2367
2961
  text-align: center;
2368
2962
  font-size: 18px;
@@ -2381,6 +2975,7 @@ div.btn-promo-yes {
2381
2975
  top: auto;
2382
2976
  background-color: var(--ok-button);
2383
2977
  }
2978
+
2384
2979
  div.btn-promo-no {
2385
2980
  text-align: center;
2386
2981
  font-size: 18px;
@@ -2399,6 +2994,7 @@ div.btn-promo-no {
2399
2994
  top: auto;
2400
2995
  background-color: var(--ok-button);
2401
2996
  }
2997
+
2402
2998
  div #userlist,
2403
2999
  div #elolist {
2404
3000
  height: 396px;
@@ -2406,24 +3002,28 @@ div #elolist {
2406
3002
  overflow-y: auto;
2407
3003
  overflow-x: hidden;
2408
3004
  }
3005
+
2409
3006
  div #gamelist {
2410
3007
  height: 468px;
2411
3008
  /* 13 lines @ 36px each */
2412
3009
  overflow-y: auto;
2413
3010
  overflow-x: hidden;
2414
3011
  }
3012
+
2415
3013
  div #recentlist {
2416
3014
  height: 396px;
2417
3015
  /* 11 lines @ 36px each */
2418
3016
  overflow-y: auto;
2419
3017
  overflow-x: hidden;
2420
3018
  }
3019
+
2421
3020
  div #usr-recent {
2422
3021
  height: 432px;
2423
3022
  /* 12 lines @ 36px each */
2424
3023
  overflow-y: auto;
2425
3024
  overflow-x: hidden;
2426
3025
  }
3026
+
2427
3027
  div #chall-sent,
2428
3028
  div #chall-received {
2429
3029
  height: 216px;
@@ -2431,6 +3031,7 @@ div #chall-received {
2431
3031
  overflow-y: auto;
2432
3032
  overflow-x: hidden;
2433
3033
  }
3034
+
2434
3035
  div.games {
2435
3036
  position: absolute;
2436
3037
  top: 0;
@@ -2444,6 +3045,7 @@ div.games {
2444
3045
  padding-bottom: 12px;
2445
3046
  border-radius: 4px 4px 0 0;
2446
3047
  }
3048
+
2447
3049
  div#wait-form {
2448
3050
  position: absolute;
2449
3051
  padding-left: 12px;
@@ -2459,6 +3061,7 @@ div#wait-form {
2459
3061
  width: 335px;
2460
3062
  height: 488px;
2461
3063
  }
3064
+
2462
3065
  span.move-indicator {
2463
3066
  position: relative;
2464
3067
  top: 2px;
@@ -2472,9 +3075,11 @@ span.move-indicator {
2472
3075
  color: var(--triple-word-color);
2473
3076
  margin-right: 4px;
2474
3077
  }
3078
+
2475
3079
  span.move-indicator:before {
2476
3080
  content: "\E267";
2477
3081
  }
3082
+
2478
3083
  div.hint {
2479
3084
  display: none;
2480
3085
  position: absolute;
@@ -2486,6 +3091,7 @@ div.hint {
2486
3091
  margin-left: 12px;
2487
3092
  margin-right: 12px;
2488
3093
  }
3094
+
2489
3095
  div.stats-box {
2490
3096
  font-family: var(--number-font);
2491
3097
  width: 224px;
@@ -2493,6 +3099,7 @@ div.stats-box {
2493
3099
  top: 0px;
2494
3100
  right: -62px;
2495
3101
  }
3102
+
2496
3103
  div.stats-fig {
2497
3104
  display: inline-block;
2498
3105
  width: 68px;
@@ -2514,12 +3121,14 @@ div.stats-fig {
2514
3121
  margin-left: 2px;
2515
3122
  cursor: default;
2516
3123
  }
3124
+
2517
3125
  div#own-toggler {
2518
3126
  position: absolute;
2519
3127
  top: 2px;
2520
3128
  margin-top: 0;
2521
3129
  margin-right: 8px;
2522
3130
  }
3131
+
2523
3132
  p#own-best {
2524
3133
  display: inline-block;
2525
3134
  position: absolute;
@@ -2529,6 +3138,7 @@ p#own-best {
2529
3138
  text-align: right;
2530
3139
  font-size: 0.85em;
2531
3140
  }
3141
+
2532
3142
  div#own-stats {
2533
3143
  position: relative;
2534
3144
  margin-top: 2px;
@@ -2537,14 +3147,18 @@ div#own-stats {
2537
3147
  width: 100%;
2538
3148
  vertical-align: top;
2539
3149
  }
3150
+
2540
3151
  /* Paragraphs of help text that should be centered on screens that are wide enough */
3152
+
2541
3153
  p.help-center {
2542
3154
  text-align: left;
2543
3155
  }
3156
+
2544
3157
  div.racktile {
2545
3158
  cursor: pointer;
2546
3159
  background-color: white;
2547
3160
  }
3161
+
2548
3162
  @keyframes selBlink {
2549
3163
  0% {
2550
3164
  color: white;
@@ -2567,6 +3181,7 @@ div.racktile {
2567
3181
  background-color: var(--cancel-button);
2568
3182
  }
2569
3183
  }
3184
+
2570
3185
  @-webkit-keyframes selBlink {
2571
3186
  0% {
2572
3187
  color: white;
@@ -2589,6 +3204,7 @@ div.racktile {
2589
3204
  background-color: var(--cancel-button);
2590
3205
  }
2591
3206
  }
3207
+
2592
3208
  @keyframes selBlank {
2593
3209
  0% {
2594
3210
  color: white;
@@ -2611,6 +3227,7 @@ div.racktile {
2611
3227
  background-color: var(--cancel-button);
2612
3228
  }
2613
3229
  }
3230
+
2614
3231
  @-webkit-keyframes selBlank {
2615
3232
  0% {
2616
3233
  color: white;
@@ -2633,6 +3250,7 @@ div.racktile {
2633
3250
  background-color: var(--cancel-button);
2634
3251
  }
2635
3252
  }
3253
+
2636
3254
  @keyframes redBlink {
2637
3255
  0% {
2638
3256
  opacity: 1;
@@ -2650,6 +3268,7 @@ div.racktile {
2650
3268
  opacity: 1;
2651
3269
  }
2652
3270
  }
3271
+
2653
3272
  @-webkit-keyframes redBlink {
2654
3273
  0% {
2655
3274
  opacity: 1;
@@ -2667,6 +3286,7 @@ div.racktile {
2667
3286
  opacity: 1;
2668
3287
  }
2669
3288
  }
3289
+
2670
3290
  @keyframes opacityBlink {
2671
3291
  0% {
2672
3292
  opacity: 1;
@@ -2684,6 +3304,7 @@ div.racktile {
2684
3304
  opacity: 0.1;
2685
3305
  }
2686
3306
  }
3307
+
2687
3308
  @-webkit-keyframes opacityBlink {
2688
3309
  0% {
2689
3310
  opacity: 1;
@@ -2701,27 +3322,34 @@ div.racktile {
2701
3322
  opacity: 0.1;
2702
3323
  }
2703
3324
  }
3325
+
2704
3326
  div.sel {
2705
3327
  animation: selBlink 1.2s infinite;
2706
3328
  -webkit-animation: selBlink 1.2s infinite;
2707
3329
  }
3330
+
2708
3331
  div.blanktile.sel {
2709
3332
  animation: selBlank 1.2s infinite;
2710
3333
  -webkit-animation: selBlank 1.2s infinite;
2711
3334
  }
3335
+
2712
3336
  td.sel {
2713
3337
  outline: var(--cancel-button) solid 3px;
2714
3338
  }
3339
+
2715
3340
  div.xchg {
2716
3341
  cursor: pointer;
2717
3342
  }
3343
+
2718
3344
  div.xchgsel {
2719
3345
  color: white;
2720
3346
  background-color: var(--ok-button);
2721
3347
  }
3348
+
2722
3349
  .blanktile {
2723
3350
  color: var(--blank-tile);
2724
3351
  }
3352
+
2725
3353
  @keyframes fresh-appear {
2726
3354
  0% {
2727
3355
  opacity: 0;
@@ -2730,6 +3358,7 @@ div.xchgsel {
2730
3358
  opacity: 1;
2731
3359
  }
2732
3360
  }
3361
+
2733
3362
  @-webkit-keyframes fresh-appear {
2734
3363
  0% {
2735
3364
  opacity: 0;
@@ -2738,6 +3367,7 @@ div.xchgsel {
2738
3367
  opacity: 1;
2739
3368
  }
2740
3369
  }
3370
+
2741
3371
  div.freshtile {
2742
3372
  color: white;
2743
3373
  background-color: var(--cancel-button);
@@ -2751,30 +3381,37 @@ div.freshtile {
2751
3381
  -webkit-animation-delay: 0s;
2752
3382
  -webkit-animation-fill-mode: forwards;
2753
3383
  }
3384
+
2754
3385
  div.highlight0 {
2755
3386
  /* Human (local) player */
2756
3387
  color: black;
2757
3388
  background-color: white;
2758
3389
  }
3390
+
2759
3391
  div.highlight1 {
2760
3392
  /* Computer (remote) player */
2761
3393
  color: white;
2762
3394
  background-color: var(--cancel-button);
2763
3395
  }
3396
+
2764
3397
  div.highlight0.blanktile {
2765
3398
  /* Human (local) player */
2766
3399
  color: var(--blank-tile);
2767
3400
  }
3401
+
2768
3402
  div.highlight1.blanktile {
2769
3403
  /* Computer (remote) player */
2770
3404
  color: #f3d6d8;
2771
3405
  }
3406
+
2772
3407
  div.highlight0.dim {
2773
3408
  background-color: #fbedee;
2774
3409
  }
3410
+
2775
3411
  div.highlight1.dim {
2776
3412
  background-color: #deb3b6;
2777
3413
  }
3414
+
2778
3415
  .clock {
2779
3416
  display: inline-block;
2780
3417
  position: absolute;
@@ -2788,10 +3425,11 @@ div.highlight1.dim {
2788
3425
  margin-top: 4px;
2789
3426
  margin-bottom: 4px;
2790
3427
  }
3428
+
2791
3429
  h3.clockleft {
2792
3430
  display: inline-block;
2793
3431
  position: absolute;
2794
- top: 82px;
3432
+ top: 86px;
2795
3433
  width: 147px;
2796
3434
  font-size: 28px;
2797
3435
  line-height: 28px;
@@ -2803,10 +3441,11 @@ h3.clockleft {
2803
3441
  left: 0;
2804
3442
  text-align: left;
2805
3443
  }
3444
+
2806
3445
  h3.clockright {
2807
3446
  display: inline-block;
2808
3447
  position: absolute;
2809
- top: 82px;
3448
+ top: 86px;
2810
3449
  width: 147px;
2811
3450
  font-size: 28px;
2812
3451
  line-height: 28px;
@@ -2818,22 +3457,26 @@ h3.clockright {
2818
3457
  right: 0;
2819
3458
  text-align: right;
2820
3459
  }
3460
+
2821
3461
  h3.clockleft.running-out {
2822
3462
  color: var(--cancel-button);
2823
3463
  }
3464
+
2824
3465
  h3.clockright.running-out {
2825
3466
  color: var(--cancel-button);
2826
3467
  }
3468
+
2827
3469
  div.clockface {
2828
3470
  display: block;
2829
3471
  position: absolute;
2830
- top: 84px;
3472
+ top: 86px;
2831
3473
  width: 100%;
2832
3474
  text-align: center;
2833
3475
  font-size: 28px;
2834
3476
  line-height: 28px;
2835
3477
  color: var(--triple-word-color);
2836
3478
  }
3479
+
2837
3480
  div.fairplay {
2838
3481
  position: absolute;
2839
3482
  top: 10px;
@@ -2841,6 +3484,7 @@ div.fairplay {
2841
3484
  text-align: center;
2842
3485
  color: var(--ok-button);
2843
3486
  }
3487
+
2844
3488
  div.games-item {
2845
3489
  position: relative;
2846
3490
  height: 24px;
@@ -2857,18 +3501,22 @@ div.games-item {
2857
3501
  text-overflow: ellipsis;
2858
3502
  white-space: nowrap;
2859
3503
  }
3504
+
2860
3505
  div.games-item a:link,
2861
3506
  div.games-item a:visited {
2862
3507
  color: black;
2863
3508
  text-decoration: none;
2864
3509
  }
3510
+
2865
3511
  div.games-item a:hover {
2866
3512
  color: black;
2867
3513
  }
3514
+
2868
3515
  div.games-item:hover {
2869
3516
  border-radius: 5px;
2870
3517
  background-color: rgba(86, 153, 165, 0.5);
2871
3518
  }
3519
+
2872
3520
  div.at-top-left {
2873
3521
  position: absolute;
2874
3522
  top: 6px;
@@ -2878,6 +3526,7 @@ div.at-top-left {
2878
3526
  line-height: 20px;
2879
3527
  font-weight: bold;
2880
3528
  }
3529
+
2881
3530
  div.at-top-left div.tilecount {
2882
3531
  width: 276px;
2883
3532
  min-width: 276px;
@@ -2887,9 +3536,11 @@ div.at-top-left div.tilecount {
2887
3536
  overflow: hidden;
2888
3537
  background-color: var(--header-background);
2889
3538
  }
3539
+
2890
3540
  div.at-top-left div.tilecount.trans {
2891
3541
  background-color: transparent;
2892
3542
  }
3543
+
2893
3544
  div.at-top-left div.tilecount div.tc {
2894
3545
  color: var(--container-bg-color);
2895
3546
  padding-left: 4px;
@@ -2903,6 +3554,7 @@ div.at-top-left div.tilecount div.tc {
2903
3554
  padding-top: 2px;
2904
3555
  padding-bottom: 2px;
2905
3556
  }
3557
+
2906
3558
  div.at-top-left div.tilecount div.oc {
2907
3559
  color: var(--dark-bg-color);
2908
3560
  padding-left: 8px;
@@ -2915,6 +3567,7 @@ div.at-top-left div.tilecount div.oc {
2915
3567
  padding-bottom: 2px;
2916
3568
  background-color: transparent;
2917
3569
  }
3570
+
2918
3571
  div.chat-container {
2919
3572
  position: absolute;
2920
3573
  top: 0px;
@@ -2925,9 +3578,11 @@ div.chat-container {
2925
3578
  z-index: 1;
2926
3579
  border-radius: 4px 4px 0 0;
2927
3580
  }
3581
+
2928
3582
  div.chat-area.with-clock {
2929
3583
  height: 310px;
2930
3584
  }
3585
+
2931
3586
  div.chat-ts {
2932
3587
  clear: both;
2933
3588
  display: inline-block;
@@ -2939,6 +3594,7 @@ div.chat-ts {
2939
3594
  margin-bottom: 8px;
2940
3595
  width: 100%;
2941
3596
  }
3597
+
2942
3598
  div.chat-msg {
2943
3599
  display: inline-block;
2944
3600
  border-radius: 8px;
@@ -2952,22 +3608,27 @@ div.chat-msg {
2952
3608
  max-width: 80%;
2953
3609
  margin-bottom: 6px;
2954
3610
  }
3611
+
2955
3612
  div.chat-msg.left {
2956
3613
  float: left;
2957
3614
  clear: both;
2958
3615
  text-align: left;
2959
3616
  }
3617
+
2960
3618
  div.chat-msg.right {
2961
3619
  float: right;
2962
3620
  clear: both;
2963
3621
  text-align: right;
2964
3622
  }
3623
+
2965
3624
  div.chat-msg.local {
2966
3625
  background-color: var(--board-background);
2967
3626
  }
3627
+
2968
3628
  div.chat-msg.remote {
2969
3629
  background-color: #F1DBDA;
2970
3630
  }
3631
+
2971
3632
  div.chat-msg img {
2972
3633
  /* Emoticon alignment to baseline */
2973
3634
  vertical-align: -10px;
@@ -2975,6 +3636,7 @@ div.chat-msg img {
2975
3636
  margin-left: 2px;
2976
3637
  margin-right: 2px;
2977
3638
  }
3639
+
2978
3640
  div.chat-input {
2979
3641
  position: absolute;
2980
3642
  bottom: 0px;
@@ -2983,21 +3645,25 @@ div.chat-input {
2983
3645
  padding: 6px;
2984
3646
  vertical-align: bottom;
2985
3647
  }
3648
+
2986
3649
  div.movelist.noscroll {
2987
3650
  overflow-y: hidden;
2988
3651
  }
3652
+
2989
3653
  div.leftmove {
2990
3654
  text-align: left;
2991
3655
  padding-left: 0px;
2992
3656
  height: 20px;
2993
3657
  line-height: 18px;
2994
3658
  }
3659
+
2995
3660
  div.rightmove {
2996
3661
  text-align: right;
2997
3662
  padding-right: 0px;
2998
3663
  height: 20px;
2999
3664
  line-height: 18px;
3000
3665
  }
3666
+
3001
3667
  div.reviewhdr {
3002
3668
  height: 18px;
3003
3669
  text-align: left;
@@ -3008,6 +3674,7 @@ div.reviewhdr {
3008
3674
  font-size: 18px;
3009
3675
  line-height: 18px;
3010
3676
  }
3677
+
3011
3678
  span.movenumber {
3012
3679
  background-color: white;
3013
3680
  color: var(--ok-button);
@@ -3023,17 +3690,20 @@ span.movenumber {
3023
3690
  padding-left: 12px;
3024
3691
  padding-right: 12px;
3025
3692
  }
3693
+
3026
3694
  div.gameover {
3027
3695
  text-align: center;
3028
3696
  margin-top: 6px;
3029
3697
  padding: 10px;
3030
3698
  background-color: var(--triple-word-color);
3031
3699
  color: white;
3032
- font-weight: 700;
3700
+ font-weight: 400;
3033
3701
  }
3702
+
3034
3703
  span.gameovermsg {
3035
3704
  margin-right: 6px;
3036
3705
  }
3706
+
3037
3707
  div.gamestats {
3038
3708
  visibility: hidden;
3039
3709
  color: black;
@@ -3048,18 +3718,22 @@ div.gamestats {
3048
3718
  border-radius: 5px;
3049
3719
  box-shadow: 3px 3px 5px 2px var(--dark-shadow);
3050
3720
  }
3721
+
3051
3722
  div.statscol {
3052
3723
  display: block;
3053
3724
  float: left;
3054
3725
  width: 50%;
3055
3726
  }
3727
+
3056
3728
  div.statscol p {
3057
3729
  margin-top: 0;
3058
3730
  margin-bottom: 12px;
3059
3731
  }
3732
+
3060
3733
  div.gamestats p span {
3061
3734
  font-weight: 700;
3062
3735
  }
3736
+
3063
3737
  div#gamestarted {
3064
3738
  width: 100%;
3065
3739
  text-align: center;
@@ -3067,33 +3741,42 @@ div#gamestarted {
3067
3741
  margin-top: 16px;
3068
3742
  margin-bottom: 16px;
3069
3743
  }
3744
+
3070
3745
  #gamestarted p {
3071
3746
  font-style: italic;
3072
3747
  margin-top: 4px;
3073
3748
  margin-bottom: 8px;
3074
3749
  }
3750
+
3075
3751
  .humancolor {
3076
3752
  background-color: var(--human-color);
3077
3753
  }
3754
+
3078
3755
  .autoplayercolor {
3079
3756
  background-color: var(--cancel-button);
3080
3757
  }
3758
+
3081
3759
  /* Scores in move list */
3760
+
3082
3761
  .humangrad_left {
3083
3762
  color: var(--human-color);
3084
3763
  }
3764
+
3085
3765
  .autoplayergrad_right {
3086
3766
  color: var(--cancel-button);
3087
3767
  }
3768
+
3088
3769
  .humangrad_right {
3089
3770
  color: var(--human-color);
3090
3771
  }
3772
+
3091
3773
  .autoplayergrad_left {
3092
3774
  color: var(--cancel-button);
3093
3775
  }
3776
+
3094
3777
  span.score {
3095
3778
  display: inline-block;
3096
- width: 28px;
3779
+ width: 32px;
3097
3780
  padding-left: 2px;
3098
3781
  margin-left: 2px;
3099
3782
  padding-right: 2px;
@@ -3102,6 +3785,7 @@ span.score {
3102
3785
  text-align: right;
3103
3786
  line-height: 20px;
3104
3787
  }
3788
+
3105
3789
  span.total {
3106
3790
  display: inline-block;
3107
3791
  width: 28px;
@@ -3114,6 +3798,7 @@ span.total {
3114
3798
  color: white;
3115
3799
  line-height: 20px;
3116
3800
  }
3801
+
3117
3802
  div.leftmove span.total {
3118
3803
  border-left-width: 0px;
3119
3804
  border-left-style: solid;
@@ -3121,6 +3806,7 @@ div.leftmove span.total {
3121
3806
  border-bottom-right-radius: 2.5px;
3122
3807
  margin-right: 2px;
3123
3808
  }
3809
+
3124
3810
  div.rightmove span.total {
3125
3811
  border-right-width: 0px;
3126
3812
  border-right-style: solid;
@@ -3128,45 +3814,56 @@ div.rightmove span.total {
3128
3814
  border-bottom-left-radius: 2.5px;
3129
3815
  margin-left: 2px;
3130
3816
  }
3817
+
3131
3818
  span.total.human {
3132
3819
  background-color: var(--human-color);
3133
3820
  }
3821
+
3134
3822
  div.leftmove span.total.human {
3135
3823
  border-left-color: var(--svarkur-secondary);
3136
3824
  }
3825
+
3137
3826
  div.rightmove span.total.human {
3138
3827
  border-right-color: var(--svarkur-secondary);
3139
3828
  }
3829
+
3140
3830
  span.total.autoplayer {
3141
3831
  background-color: var(--cancel-button);
3142
3832
  }
3833
+
3143
3834
  div.leftmove span.total.autoplayer {
3144
3835
  border-left-color: var(--cancel-button);
3145
3836
  }
3837
+
3146
3838
  div.rightmove span.total.autoplayer {
3147
3839
  border-right-color: var(--cancel-button);
3148
3840
  }
3841
+
3149
3842
  span.highlight {
3150
3843
  background-color: var(--ok-button);
3151
3844
  color: white;
3152
3845
  }
3846
+
3153
3847
  span.wordmove {
3154
3848
  text-transform: uppercase;
3155
3849
  padding-left: 3px;
3156
3850
  padding-right: 3px;
3157
3851
  font-size: 12px;
3158
3852
  }
3853
+
3159
3854
  span.wordmove i {
3160
3855
  font-weight: bold;
3161
3856
  padding-left: 3px;
3162
3857
  padding-right: 3px;
3163
3858
  font-size: 16px;
3164
3859
  }
3860
+
3165
3861
  span.othermove {
3166
3862
  text-transform: none;
3167
3863
  padding-left: 3px;
3168
3864
  font-size: 14px;
3169
3865
  }
3866
+
3170
3867
  div.error p {
3171
3868
  display: inline;
3172
3869
  position: relative;
@@ -3175,15 +3872,18 @@ div.error p {
3175
3872
  margin: 0;
3176
3873
  padding: 0;
3177
3874
  }
3875
+
3178
3876
  div.error span.glyphicon {
3179
3877
  padding-right: 6px;
3180
3878
  }
3879
+
3181
3880
  span.pass-explain {
3182
3881
  font-weight: normal;
3183
3882
  font-style: italic;
3184
3883
  padding-left: 3px;
3185
3884
  padding-right: 3px;
3186
3885
  }
3886
+
3187
3887
  span.yesnobutton {
3188
3888
  height: 20px;
3189
3889
  text-align: center;
@@ -3201,33 +3901,42 @@ span.yesnobutton {
3201
3901
  border-radius: 5px;
3202
3902
  cursor: pointer;
3203
3903
  }
3904
+
3204
3905
  div.resign span.yesnobutton {
3205
3906
  color: var(--cancel-button);
3206
3907
  }
3908
+
3207
3909
  div.pass span.yesnobutton,
3208
3910
  div.pass-last span.yesnobutton {
3209
3911
  color: var(--triple-word-color);
3210
3912
  }
3913
+
3211
3914
  div.exchange span.yesnobutton {
3212
3915
  color: var(--ok-button);
3213
3916
  }
3917
+
3214
3918
  div.chall span.yesnobutton {
3215
3919
  color: var(--triple-letter-color);
3216
3920
  }
3921
+
3217
3922
  span.closebtn {
3218
3923
  color: var(--triple-word-color);
3219
3924
  }
3925
+
3220
3926
  span.yesnobutton#force-resign {
3221
3927
  display: none;
3222
3928
  }
3929
+
3223
3930
  div.score.word-good {
3224
3931
  color: var(--ok-button);
3225
3932
  border-color: var(--ok-button);
3226
3933
  }
3934
+
3227
3935
  div.score.manual {
3228
3936
  color: var(--triple-letter-color);
3229
3937
  border-color: var(--triple-letter-color);
3230
3938
  }
3939
+
3231
3940
  @keyframes colorPulse {
3232
3941
  0% {
3233
3942
  color: var(--ok-button);
@@ -3244,6 +3953,7 @@ div.score.manual {
3244
3953
  color: var(--ok-button);
3245
3954
  }
3246
3955
  }
3956
+
3247
3957
  @-webkit-keyframes colorPulse {
3248
3958
  0% {
3249
3959
  color: var(--ok-button);
@@ -3260,21 +3970,25 @@ div.score.manual {
3260
3970
  color: var(--ok-button);
3261
3971
  }
3262
3972
  }
3973
+
3263
3974
  div.score.word-great {
3264
3975
  animation: colorPulse 1.5s infinite;
3265
3976
  -webkit-animation: colorPulse 1.5s infinite;
3266
3977
  border-color: var(--ok-button);
3267
3978
  }
3979
+
3268
3980
  div.score.opponent {
3269
3981
  color: white;
3270
3982
  background-color: var(--cancel-button);
3271
3983
  border: none;
3272
3984
  }
3985
+
3273
3986
  div.score.localplayer {
3274
3987
  color: white;
3275
3988
  background-color: var(--human-color);
3276
3989
  border: none;
3277
3990
  }
3991
+
3278
3992
  div.channel {
3279
3993
  position: absolute;
3280
3994
  width: 32px;
@@ -3290,28 +4004,34 @@ div.channel {
3290
4004
  overflow: hidden;
3291
4005
  visibility: hidden;
3292
4006
  }
4007
+
3293
4008
  div.channel:before {
3294
4009
  content: "\E051";
3295
4010
  /* glyphicon-link */
3296
4011
  }
4012
+
3297
4013
  div.word-check.word-good {
3298
4014
  color: var(--ok-button);
3299
4015
  border-color: var(--ok-button);
3300
4016
  visibility: visible;
3301
4017
  }
4018
+
3302
4019
  div.word-check.word-good:before {
3303
4020
  content: "\E344";
3304
4021
  /* glyphicon-thumbs-up */
3305
4022
  }
4023
+
3306
4024
  div.word-check.word-bad {
3307
4025
  color: var(--cancel-button);
3308
4026
  border-color: var(--cancel-button);
3309
4027
  visibility: visible;
3310
4028
  }
4029
+
3311
4030
  div.word-check.word-bad:before {
3312
4031
  content: "\E200";
3313
4032
  /* glyphicon-ban-circle */
3314
4033
  }
4034
+
3315
4035
  div.board-help {
3316
4036
  position: absolute;
3317
4037
  z-index: 2;
@@ -3323,12 +4043,14 @@ div.board-help {
3323
4043
  border-radius: 5px;
3324
4044
  cursor: default;
3325
4045
  }
4046
+
3326
4047
  div.board-help-close {
3327
4048
  width: 50px;
3328
4049
  text-align: right;
3329
4050
  background-color: white;
3330
4051
  margin: 2px;
3331
4052
  }
4053
+
3332
4054
  div.board-help-close span {
3333
4055
  background-color: var(--cancel-button);
3334
4056
  color: white;
@@ -3337,13 +4059,16 @@ div.board-help-close span {
3337
4059
  padding-left: 2px;
3338
4060
  cursor: pointer;
3339
4061
  }
4062
+
3340
4063
  div.board-help-close span:hover {
3341
- background-color: var(--triple-word-color);
4064
+ background-color: var(--pass-button);
3342
4065
  }
4066
+
3343
4067
  div.board-colors {
3344
4068
  margin: 0;
3345
4069
  padding: 0;
3346
4070
  }
4071
+
3347
4072
  div.board-color {
3348
4073
  width: 44px;
3349
4074
  text-align: center;
@@ -3357,28 +4082,34 @@ div.board-color {
3357
4082
  border: solid 2px white;
3358
4083
  border-collapse: collapse;
3359
4084
  }
4085
+
3360
4086
  div.board-color#triple-word {
3361
4087
  background-color: var(--triple-word-color);
3362
4088
  color: white;
3363
4089
  border-bottom: none;
3364
4090
  }
4091
+
3365
4092
  div.board-color#double-word {
3366
4093
  background-color: var(--double-word-color);
3367
4094
  border-bottom: none;
3368
4095
  }
4096
+
3369
4097
  div.board-color#triple-letter {
3370
4098
  background-color: var(--triple-letter-color);
3371
4099
  color: white;
3372
4100
  border-bottom: none;
3373
4101
  }
4102
+
3374
4103
  div.board-color#double-letter {
3375
4104
  background-color: var(--double-letter-color);
3376
4105
  border-bottom: none;
3377
4106
  }
4107
+
3378
4108
  div.board-color#single-letter {
3379
4109
  background-color: var(--board-background);
3380
4110
  color: black;
3381
4111
  }
4112
+
3382
4113
  div.scorediff {
3383
4114
  position: absolute;
3384
4115
  width: 50px;
@@ -3386,7 +4117,7 @@ div.scorediff {
3386
4117
  text-align: center;
3387
4118
  vertical-align: middle;
3388
4119
  bottom: 272px;
3389
- left: 643px;
4120
+ left: 646px;
3390
4121
  background-color: var(--cancel-button);
3391
4122
  font-size: 18px;
3392
4123
  font-weight: normal;
@@ -3397,9 +4128,11 @@ div.scorediff {
3397
4128
  font-family: var(--number-font);
3398
4129
  border-radius: 5px;
3399
4130
  }
4131
+
3400
4132
  div.posdiff {
3401
- background-color: var(--ok-button);
4133
+ background-color: var(--human-color);
3402
4134
  }
4135
+
3403
4136
  div.navbtn {
3404
4137
  text-align: center;
3405
4138
  font-size: 18px;
@@ -3415,30 +4148,37 @@ div.navbtn {
3415
4148
  height: 30px;
3416
4149
  bottom: 136px;
3417
4150
  line-height: 24px;
3418
- background-color: var(--human-color);
4151
+ background-color: var(--header-color);
3419
4152
  }
4153
+
3420
4154
  div.navbtn#navnext {
3421
4155
  position: absolute;
3422
4156
  left: 550px;
3423
4157
  font-weight: normal;
3424
4158
  }
4159
+
3425
4160
  div.navbtn#navprev {
3426
4161
  position: absolute;
3427
4162
  left: 110px;
3428
4163
  font-weight: normal;
3429
4164
  }
4165
+
3430
4166
  span#nav-prev-visible {
3431
4167
  display: inline;
3432
4168
  }
4169
+
3433
4170
  span#nav-prev-waiting {
3434
4171
  display: none;
3435
4172
  }
4173
+
3436
4174
  span#nav-next-visible {
3437
4175
  display: inline;
3438
4176
  }
4177
+
3439
4178
  span#nav-next-waiting {
3440
4179
  display: none;
3441
4180
  }
4181
+
3442
4182
  div.closebtn {
3443
4183
  text-align: center;
3444
4184
  font-size: 18px;
@@ -3454,29 +4194,35 @@ div.closebtn {
3454
4194
  bottom: 12px;
3455
4195
  background-color: var(--ok-button);
3456
4196
  }
4197
+
3457
4198
  #review-close {
3458
4199
  position: absolute;
3459
4200
  right: 12px;
3460
4201
  }
4202
+
3461
4203
  span#total0,
3462
4204
  span#total1 {
3463
4205
  font-size: 28px;
3464
4206
  margin-left: 8px;
3465
4207
  margin-right: 8px;
3466
4208
  }
4209
+
3467
4210
  div.promo-content h2 {
3468
4211
  color: var(--ok-button);
3469
4212
  font-size: 24px;
3470
4213
  line-height: 30px;
3471
4214
  font-weight: bold;
3472
4215
  }
4216
+
3473
4217
  div.promo-content h2 span.glyphicon-coffee-cup,
3474
4218
  div.help-container span.glyphicon-coffee-cup {
3475
4219
  color: var(--triple-word-color);
3476
4220
  }
4221
+
3477
4222
  div.promo-krafla {
3478
4223
  background-color: var(--board-background);
3479
4224
  }
4225
+
3480
4226
  div.btn-krafla-yes {
3481
4227
  text-align: center;
3482
4228
  font-size: 18px;
@@ -3494,6 +4240,7 @@ div.btn-krafla-yes {
3494
4240
  top: auto;
3495
4241
  background-color: var(--ok-button);
3496
4242
  }
4243
+
3497
4244
  div#btn-thanks {
3498
4245
  text-align: center;
3499
4246
  font-size: 18px;
@@ -3512,6 +4259,7 @@ div#btn-thanks {
3512
4259
  top: auto;
3513
4260
  background-color: var(--ok-button);
3514
4261
  }
4262
+
3515
4263
  div#btn-cancel-yes {
3516
4264
  text-align: center;
3517
4265
  font-size: 18px;
@@ -3529,6 +4277,7 @@ div#btn-cancel-yes {
3529
4277
  top: auto;
3530
4278
  background-color: var(--cancel-button);
3531
4279
  }
4280
+
3532
4281
  div#btn-cancel-no {
3533
4282
  text-align: center;
3534
4283
  font-size: 18px;
@@ -3546,19 +4295,23 @@ div#btn-cancel-no {
3546
4295
  top: auto;
3547
4296
  background-color: var(--ok-button);
3548
4297
  }
4298
+
3549
4299
  div.help-tabs .ui-tabs-panel a:link,
3550
4300
  div.help-tabs .ui-tabs-panel a:visited {
3551
4301
  text-decoration: none;
3552
4302
  color: var(--humangrad-color);
3553
4303
  }
4304
+
3554
4305
  div.help-tabs .ui-tabs-panel a:hover {
3555
4306
  text-decoration: none;
3556
- color: var(--triple-word-color);
4307
+ color: var(--pass-button);
3557
4308
  }
4309
+
3558
4310
  a.ui-tabs-anchor:link,
3559
4311
  a.ui-tabs-anchor:visited {
3560
4312
  color: white;
3561
4313
  }
4314
+
3562
4315
  .notifier {
3563
4316
  display: none;
3564
4317
  /* Set to inline-block by the script if shown */
@@ -3575,6 +4328,7 @@ a.ui-tabs-anchor:visited {
3575
4328
  margin-top: 16px;
3576
4329
  vertical-align: top;
3577
4330
  }
4331
+
3578
4332
  span#numgames {
3579
4333
  display: none;
3580
4334
  /* Set to inline-block by the script if shown */
@@ -3591,6 +4345,7 @@ span#numgames {
3591
4345
  margin-top: 16px;
3592
4346
  vertical-align: top;
3593
4347
  }
4348
+
3594
4349
  span#numchallenges {
3595
4350
  display: none;
3596
4351
  /* Set to inline-block by the script if shown */
@@ -3607,10 +4362,12 @@ span#numchallenges {
3607
4362
  margin-top: 16px;
3608
4363
  vertical-align: top;
3609
4364
  }
4365
+
3610
4366
  div.smallprint {
3611
4367
  font-size: 12px;
3612
4368
  padding-top: 6px;
3613
4369
  }
4370
+
3614
4371
  div.userid {
3615
4372
  position: absolute;
3616
4373
  top: 22px;
@@ -3632,10 +4389,12 @@ div.userid {
3632
4389
  border-radius: 5px;
3633
4390
  cursor: pointer;
3634
4391
  }
4392
+
3635
4393
  div.userid:hover {
3636
4394
  background-color: var(--humangrad-color);
3637
4395
  color: white;
3638
4396
  }
4397
+
3639
4398
  div.listitem {
3640
4399
  display: flex;
3641
4400
  flex-direction: row;
@@ -3648,31 +4407,34 @@ div.listitem {
3648
4407
  white-space: nowrap;
3649
4408
  justify-items: center;
3650
4409
  }
4410
+
3651
4411
  .listheader > span {
3652
4412
  top: 0;
3653
4413
  }
4414
+
3654
4415
  .listitem a {
3655
4416
  display: flex;
3656
4417
  cursor: pointer;
3657
4418
  }
4419
+
3658
4420
  .listitem a:link,
3659
4421
  .listitem a:visited {
3660
4422
  color: black;
3661
4423
  text-decoration: none;
3662
4424
  }
4425
+
3663
4426
  .listitem a:hover {
3664
- color: var(--triple-word-color);
3665
- }
3666
- .listitem span {
3667
- display: flex;
3668
- align-items: center;
4427
+ color: var(--pass-button);
3669
4428
  }
4429
+
3670
4430
  div.oddlist {
3671
4431
  background-color: var(--board-background);
3672
4432
  }
4433
+
3673
4434
  div.evenlist {
3674
4435
  background-color: #F7F0DE;
3675
4436
  }
4437
+
3676
4438
  div.listheader {
3677
4439
  background-color: var(--list-header-background);
3678
4440
  font-weight: 400;
@@ -3680,9 +4442,11 @@ div.listheader {
3680
4442
  border-bottom-color: var(--list-header-bottom);
3681
4443
  border-bottom-style: solid;
3682
4444
  }
4445
+
3683
4446
  div#elo-hdr span {
3684
4447
  cursor: default;
3685
4448
  }
4449
+
3686
4450
  div#elo-toggler {
3687
4451
  display: inline-block;
3688
4452
  position: absolute;
@@ -3692,21 +4456,26 @@ div#elo-toggler {
3692
4456
  right: 6px;
3693
4457
  z-index: 10;
3694
4458
  }
4459
+
3695
4460
  span.bold {
3696
4461
  font-weight: 700;
3697
4462
  }
4463
+
3698
4464
  div#initials {
3699
4465
  margin-top: 8px;
3700
4466
  margin-bottom: 14px;
3701
4467
  padding: 0;
3702
4468
  }
4469
+
3703
4470
  div.user-cat {
3704
4471
  display: inline-block;
3705
4472
  vertical-align: middle;
3706
4473
  }
4474
+
3707
4475
  div.user-cat#user-search {
3708
4476
  float: right;
3709
4477
  }
4478
+
3710
4479
  div.user-cat span {
3711
4480
  font-size: 16px;
3712
4481
  cursor: pointer;
@@ -3716,20 +4485,24 @@ div.user-cat span {
3716
4485
  padding-right: 6px;
3717
4486
  margin: 2px;
3718
4487
  }
4488
+
3719
4489
  div.user-cat span.shown {
3720
4490
  background-color: rgba(158, 213, 218, 0.3);
3721
4491
  border-radius: 5px;
3722
4492
  }
4493
+
3723
4494
  div.user-cat span:hover {
3724
4495
  color: white;
3725
4496
  background-color: var(--header-hover-color);
3726
4497
  border-radius: 5px;
3727
4498
  }
4499
+
3728
4500
  div.user-cat#user-search span.glyphicon-search {
3729
4501
  padding-top: 6px;
3730
4502
  padding-bottom: 6px;
3731
4503
  top: 0;
3732
4504
  }
4505
+
3733
4506
  span.versus-cat span {
3734
4507
  font-size: 16px;
3735
4508
  cursor: pointer;
@@ -3739,15 +4512,18 @@ span.versus-cat span {
3739
4512
  padding-right: 6px;
3740
4513
  margin: 2px;
3741
4514
  }
4515
+
3742
4516
  span.versus-cat span.shown {
3743
4517
  background-color: rgba(158, 213, 218, 0.2);
3744
4518
  border-radius: 5px;
3745
4519
  }
4520
+
3746
4521
  span.versus-cat span:hover {
3747
4522
  color: white;
3748
4523
  background-color: var(--double-letter-color);
3749
4524
  border-radius: 5px;
3750
4525
  }
4526
+
3751
4527
  span.ready-btn {
3752
4528
  position: relative;
3753
4529
  top: 2px;
@@ -3763,15 +4539,17 @@ span.ready-btn {
3763
4539
  top: 0;
3764
4540
  cursor: default; /* Not a pushable button even though it looks like one */
3765
4541
  color: white;
3766
- background-color: var(--triple-letter-color);
4542
+ background-color: var(--option-selected);
3767
4543
  border-radius: 5px;
3768
4544
  padding: 4px;
3769
4545
  margin: 0 4px 0 0;
3770
4546
  }
4547
+
3771
4548
  span.ready-btn:before {
3772
4549
  content: "\E344";
3773
4550
  /* thumbs-up */
3774
4551
  }
4552
+
3775
4553
  span.timed-btn {
3776
4554
  position: relative;
3777
4555
  top: 2px;
@@ -3792,10 +4570,12 @@ span.timed-btn {
3792
4570
  padding: 4px;
3793
4571
  margin: 0 4px 0 0;
3794
4572
  }
4573
+
3795
4574
  span.timed-btn:before {
3796
4575
  content: "\E055";
3797
4576
  /* time */
3798
4577
  }
4578
+
3799
4579
  span.fairplay-btn {
3800
4580
  position: relative;
3801
4581
  top: 2px;
@@ -3816,10 +4596,12 @@ span.fairplay-btn {
3816
4596
  padding: 4px;
3817
4597
  margin: 0 4px 0 0;
3818
4598
  }
4599
+
3819
4600
  span.fairplay-btn:before {
3820
4601
  content: "\E151";
3821
4602
  /* edit */
3822
4603
  }
4604
+
3823
4605
  span.fairplay-btn.large {
3824
4606
  /* This is shown in the board header */
3825
4607
  top: 0;
@@ -3830,6 +4612,7 @@ span.fairplay-btn.large {
3830
4612
  padding: 2px;
3831
4613
  padding-bottom: 4px;
3832
4614
  }
4615
+
3833
4616
  span.manual-btn {
3834
4617
  position: relative;
3835
4618
  top: 2px;
@@ -3850,10 +4633,12 @@ span.manual-btn {
3850
4633
  padding: 4px;
3851
4634
  margin: 0 4px 0 0;
3852
4635
  }
4636
+
3853
4637
  span.manual-btn:before {
3854
4638
  content: "\E065";
3855
4639
  /* lightbulb */
3856
4640
  }
4641
+
3857
4642
  span.elo-btn {
3858
4643
  display: inline-block;
3859
4644
  width: 30px;
@@ -3867,32 +4652,40 @@ span.elo-btn {
3867
4652
  padding: 5px 6px;
3868
4653
  margin: 0;
3869
4654
  }
4655
+
3870
4656
  span.elo-btn .glyphicon {
3871
4657
  font-size: 15px;
3872
4658
  line-height: 12px;
3873
4659
  }
4660
+
3874
4661
  span.elo-btn.left {
3875
4662
  margin-left: 6px;
3876
4663
  margin-right: 4px;
3877
4664
  }
4665
+
3878
4666
  span.elo-btn.right {
3879
4667
  margin-left: 4px;
3880
4668
  margin-right: 6px;
3881
4669
  }
4670
+
3882
4671
  span.elo-btn.invisible {
3883
4672
  visibility: hidden;
3884
4673
  }
4674
+
3885
4675
  span.elo-btn.elo-win {
3886
4676
  background-color: var(--ok-button);
3887
4677
  }
4678
+
3888
4679
  span.elo-btn.elo-loss {
3889
4680
  background-color: var(--cancel-button);
3890
4681
  }
4682
+
3891
4683
  span.elo-btn.elo-neutral {
3892
- background-color: var(--double-letter-color);
4684
+ background-color: var(--option-selected);
3893
4685
  }
4686
+
3894
4687
  span.elo-hdr-left {
3895
- background-color: var(--header-color);
4688
+ background-color: var(--option-selected);
3896
4689
  color: white;
3897
4690
  border-radius: 5px;
3898
4691
  padding: 4px;
@@ -3902,8 +4695,9 @@ span.elo-hdr-left {
3902
4695
  margin-right: 6px;
3903
4696
  top: 0px;
3904
4697
  }
4698
+
3905
4699
  span.elo-hdr-right {
3906
- background-color: var(--header-color);
4700
+ background-color: var(--option-selected);
3907
4701
  color: white;
3908
4702
  border-radius: 5px;
3909
4703
  padding: 4px;
@@ -3913,6 +4707,7 @@ span.elo-hdr-right {
3913
4707
  margin-right: 6px;
3914
4708
  top: 0px;
3915
4709
  }
4710
+
3916
4711
  span.usr-info {
3917
4712
  position: relative;
3918
4713
  top: 2px;
@@ -3928,21 +4723,25 @@ span.usr-info {
3928
4723
  top: 0px;
3929
4724
  cursor: pointer;
3930
4725
  color: white;
3931
- background-color: var(--ok-button);
4726
+ background-color: var(--header-color);
3932
4727
  border-radius: 5px;
3933
4728
  padding: 4px;
3934
4729
  margin: 0;
3935
4730
  }
4731
+
3936
4732
  span.usr-info:before {
3937
4733
  content: "\E028";
3938
4734
  /* Search */
3939
4735
  }
4736
+
3940
4737
  span.usr-info:hover {
3941
- background-color: var(--triple-word-color);
4738
+ background-color: var(--pass-button);
3942
4739
  }
4740
+
3943
4741
  #userlist span.glyphicon.glyphicon-star {
3944
- color: var(--triple-letter-color);
4742
+ color: var(--header-color);
3945
4743
  }
4744
+
3946
4745
  #userlist span.glyphicon.glyphicon-hand-right,
3947
4746
  #elolist span.glyphicon.glyphicon-hand-right,
3948
4747
  #chall-sent span.glyphicon.glyphicon-hand-right,
@@ -3950,16 +4749,19 @@ span.usr-info:hover {
3950
4749
  p span.glyphicon.glyphicon-flag,
3951
4750
  #gamelist span.glyphicon.glyphicon-flag,
3952
4751
  #gamelist span.glyphicon.glyphicon-hourglass {
3953
- color: var(--triple-word-color);
4752
+ color: var(--pass-button);
3954
4753
  }
4754
+
3955
4755
  #recentlist span.glyphicon.glyphicon-bookmark,
3956
4756
  #usr-recent span.glyphicon.glyphicon-bookmark,
3957
4757
  #gamelist span.glyphicon.glyphicon-bookmark {
3958
4758
  color: var(--ok-button);
3959
4759
  }
4760
+
3960
4761
  span.glyphicon.glyphicon-lightbulb.grayed {
3961
4762
  color: rgba(0, 0, 0, 0.2);
3962
4763
  }
4764
+
3963
4765
  .listheader span.glyphicon.glyphicon-star-empty,
3964
4766
  .listheader span.glyphicon.glyphicon-hand-right.grayed,
3965
4767
  .listheader span.glyphicon.glyphicon-thumbs-down.grayed,
@@ -3970,10 +4772,12 @@ span.glyphicon.glyphicon-lightbulb.grayed {
3970
4772
  #elolist span.glyphicon.glyphicon-hand-right.grayed {
3971
4773
  color: rgba(0, 0, 0, 0.15);
3972
4774
  }
4775
+
3973
4776
  span.glyphicon.glyphicon-hourglass.grayed,
3974
4777
  span.glyphicon.glyphicon-shopping-bag.grayed {
3975
4778
  color: rgba(0, 0, 0, 0.1);
3976
4779
  }
4780
+
3977
4781
  .listheader span.glyphicon.glyphicon-bookmark.grayed,
3978
4782
  #recentlist span.glyphicon.glyphicon-bookmark.grayed,
3979
4783
  #usr-recent span.glyphicon.glyphicon-bookmark.grayed,
@@ -3981,9 +4785,11 @@ span.glyphicon.glyphicon-shopping-bag.grayed {
3981
4785
  #gamelist span.glyphicon.glyphicon-hourglass.grayed {
3982
4786
  color: rgba(0, 0, 0, 0.06);
3983
4787
  }
4788
+
3984
4789
  #gamelist span.glyphicon.glyphicon-flag.zombie {
3985
4790
  color: var(--double-letter-color);
3986
4791
  }
4792
+
3987
4793
  div#user-no-match {
3988
4794
  display: none;
3989
4795
  position: absolute;
@@ -3993,9 +4799,11 @@ div#user-no-match {
3993
4799
  z-index: 10;
3994
4800
  text-align: center;
3995
4801
  }
4802
+
3996
4803
  div#user-no-match span#search-prefix {
3997
4804
  font-weight: bold;
3998
4805
  }
4806
+
3999
4807
  div.modal-close {
4000
4808
  display: flex;
4001
4809
  flex-direction: row;
@@ -4016,35 +4824,38 @@ div.modal-close {
4016
4824
  right: 12px;
4017
4825
  top: auto;
4018
4826
  }
4019
- div.modal-close span.glyphicon {
4020
- top: 0;
4021
- }
4827
+
4022
4828
  div#usr-info-close {
4023
4829
  width: 72px;
4024
4830
  /* Override */
4025
4831
  background-color: var(--ok-button);
4026
4832
  }
4833
+
4027
4834
  div#load-game {
4028
4835
  width: 72px;
4029
4836
  /* Override */
4030
4837
  background-color: var(--ok-button);
4031
4838
  }
4839
+
4032
4840
  div#wait-cancel {
4033
4841
  right: 12px;
4034
4842
  width: 72px;
4035
4843
  /* Override */
4036
4844
  background-color: var(--cancel-button);
4037
4845
  }
4846
+
4038
4847
  div#accept-cancel {
4039
4848
  right: 12px;
4040
4849
  width: 72px;
4041
4850
  /* Override */
4042
4851
  background-color: var(--cancel-button);
4043
4852
  }
4853
+
4044
4854
  div#blank-close,
4045
4855
  div#promo-close {
4046
4856
  background-color: var(--cancel-button);
4047
4857
  }
4858
+
4048
4859
  div#thanks-form {
4049
4860
  position: absolute;
4050
4861
  padding-left: 12px;
@@ -4061,6 +4872,7 @@ div#thanks-form {
4061
4872
  height: 248px;
4062
4873
  line-height: 1.62em;
4063
4874
  }
4875
+
4064
4876
  div#cancel-form {
4065
4877
  position: absolute;
4066
4878
  padding-left: 12px;
@@ -4077,6 +4889,7 @@ div#cancel-form {
4077
4889
  height: 372px;
4078
4890
  line-height: 1.62em;
4079
4891
  }
4892
+
4080
4893
  div#confirm-form {
4081
4894
  position: absolute;
4082
4895
  padding-left: 12px;
@@ -4093,6 +4906,7 @@ div#confirm-form {
4093
4906
  height: 200px;
4094
4907
  line-height: 1.62em;
4095
4908
  }
4909
+
4096
4910
  div#conditions-form {
4097
4911
  position: absolute;
4098
4912
  padding-left: 12px;
@@ -4111,6 +4925,7 @@ div#conditions-form {
4111
4925
  padding-left: 24px;
4112
4926
  padding-right: 24px;
4113
4927
  }
4928
+
4114
4929
  div#usr-info-form {
4115
4930
  position: absolute;
4116
4931
  padding-left: 12px;
@@ -4126,6 +4941,7 @@ div#usr-info-form {
4126
4941
  width: 884px;
4127
4942
  height: 644px;
4128
4943
  }
4944
+
4129
4945
  div.thanks-content,
4130
4946
  div#cancel-content,
4131
4947
  div#confirm-content {
@@ -4133,35 +4949,46 @@ div#confirm-content {
4133
4949
  margin-left: 24px;
4134
4950
  margin-right: 24px;
4135
4951
  }
4952
+
4136
4953
  div.usr-info-hdr {
4954
+ display: flex;
4955
+ flex-direction: row;
4956
+ align-items: center;
4137
4957
  font-size: 18px;
4138
4958
  margin-top: 0px;
4139
4959
  margin-bottom: 0px;
4140
4960
  }
4961
+
4141
4962
  div.usr-info-hdr h1 {
4142
- display: inline;
4963
+ display: block;
4143
4964
  font-size: 36px;
4144
4965
  font-weight: bold;
4966
+ margin-right: 3px;
4145
4967
  }
4968
+
4146
4969
  div.usr-info-hdr h2 {
4147
- display: inline;
4970
+ display: block;
4148
4971
  font-size: 24px;
4149
4972
  font-weight: bold;
4150
4973
  }
4974
+
4151
4975
  span.vbar {
4152
4976
  color: var(--light-background);
4153
4977
  font-size: 2em;
4154
4978
  padding-left: 10px;
4155
4979
  padding-right: 10px;
4156
4980
  }
4981
+
4157
4982
  h1.usr-info-icon {
4158
4983
  color: var(--light-background);
4159
4984
  }
4985
+
4160
4986
  h1.usr-info-icon span.glyphicon-coffee-cup {
4161
4987
  color: var(--ok-button);
4162
4988
  }
4989
+
4163
4990
  div.usr-info-fav {
4164
- display: inline-block;
4991
+ display: block;
4165
4992
  position: absolute;
4166
4993
  top: 16px;
4167
4994
  right: 20px;
@@ -4169,28 +4996,34 @@ div.usr-info-fav {
4169
4996
  font-size: 26px;
4170
4997
  cursor: pointer;
4171
4998
  }
4999
+
4172
5000
  div.usr-info-fav span.glyphicon-star-empty {
4173
5001
  color: rgba(0, 0, 0, 0.15);
4174
5002
  }
5003
+
4175
5004
  div#usr-info-chall {
4176
5005
  display: inline-block;
4177
5006
  position: absolute;
4178
5007
  top: 68px;
4179
5008
  right: 20px;
4180
5009
  }
5010
+
4181
5011
  div#usr-info-chall.chall span.glyphicon-hand-right {
4182
5012
  font-size: 26px;
4183
5013
  color: var(--triple-word-color);
4184
5014
  }
5015
+
4185
5016
  div#usr-info-chall.no-chall span.glyphicon-hand-right {
4186
5017
  font-size: 26px;
4187
5018
  color: rgba(0, 0, 0, 0.15);
4188
5019
  }
5020
+
4189
5021
  span.best-word {
4190
5022
  text-transform: uppercase;
4191
5023
  font-weight: bold;
4192
5024
  font-style: italic;
4193
5025
  }
5026
+
4194
5027
  p#usr-best {
4195
5028
  display: inline-block;
4196
5029
  position: absolute;
@@ -4198,19 +5031,23 @@ p#usr-best {
4198
5031
  top: 50px;
4199
5032
  text-align: right;
4200
5033
  }
5034
+
4201
5035
  p#usr-best a:link,
4202
5036
  p#usr-best a:visited {
4203
5037
  text-decoration: none;
4204
5038
  color: var(--stats-foreground);
4205
5039
  }
5040
+
4206
5041
  p#usr-best a:hover {
4207
5042
  text-decoration: none;
4208
5043
  color: var(--logo-accent);
4209
5044
  }
5045
+
4210
5046
  div#stats-toggler {
4211
5047
  margin-top: 7px;
4212
5048
  margin-right: 8px;
4213
5049
  }
5050
+
4214
5051
  div#usr-stats {
4215
5052
  position: absolute;
4216
5053
  height: 48px;
@@ -4219,46 +5056,56 @@ div#usr-stats {
4219
5056
  left: 12px;
4220
5057
  vertical-align: top;
4221
5058
  }
5059
+
4222
5060
  div#usr-stats-human {
4223
5061
  display: inline-block;
4224
5062
  vertical-align: top;
4225
5063
  }
5064
+
4226
5065
  div#usr-stats-all {
4227
5066
  display: none;
4228
5067
  vertical-align: top;
4229
5068
  }
5069
+
4230
5070
  div#own-stats-human {
4231
5071
  display: inline-block;
4232
5072
  vertical-align: top;
4233
5073
  }
5074
+
4234
5075
  div#own-stats-all {
4235
5076
  display: none;
4236
5077
  vertical-align: top;
4237
5078
  }
5079
+
4238
5080
  div.stats-games {
4239
5081
  color: var(--malfridur-secondary);
4240
5082
  border-color: var(--malfridur-secondary);
4241
5083
  }
5084
+
4242
5085
  div.stats-win-ratio {
4243
5086
  color: var(--ok-button);
4244
5087
  border-color: var(--ok-button);
4245
5088
  }
5089
+
4246
5090
  div.stats-avg-score {
4247
5091
  color: var(--logo-accent);
4248
5092
  border-color: var(--logo-accent);
4249
5093
  }
5094
+
4250
5095
  div.chall-hdr {
4251
5096
  font-size: 18px;
4252
5097
  margin-top: 6px;
4253
5098
  margin-bottom: 15px;
4254
5099
  overflow-x: hidden;
4255
5100
  }
5101
+
4256
5102
  div.chall-hdr table {
4257
5103
  border-spacing: 0;
4258
5104
  margin: 0;
4259
5105
  padding: 0;
4260
5106
  vertical-align: top;
4261
5107
  }
5108
+
4262
5109
  td.l-border {
4263
5110
  border-left-style: solid;
4264
5111
  border-left-color: black;
@@ -4266,6 +5113,7 @@ td.l-border {
4266
5113
  padding-left: 12px;
4267
5114
  white-space: nowrap;
4268
5115
  }
5116
+
4269
5117
  div.chall-hdr h1 {
4270
5118
  display: inline-block;
4271
5119
  font-size: 28px;
@@ -4275,6 +5123,7 @@ div.chall-hdr h1 {
4275
5123
  margin-bottom: 8px;
4276
5124
  font-weight: bold;
4277
5125
  }
5126
+
4278
5127
  div.chall-hdr h2 {
4279
5128
  display: block;
4280
5129
  font-size: 22px;
@@ -4283,6 +5132,7 @@ div.chall-hdr h2 {
4283
5132
  margin-bottom: 4px;
4284
5133
  color: var(--humangrad-color);
4285
5134
  }
5135
+
4286
5136
  h1.chall-icon {
4287
5137
  display: block;
4288
5138
  color: var(--humangrad-color);
@@ -4290,6 +5140,7 @@ h1.chall-icon {
4290
5140
  margin-top: 0;
4291
5141
  margin-bottom: 0;
4292
5142
  }
5143
+
4293
5144
  div.chall-time {
4294
5145
  display: inline-block;
4295
5146
  width: 300px;
@@ -4310,19 +5161,24 @@ div.chall-time {
4310
5161
  cursor: pointer;
4311
5162
  border-radius: 4px;
4312
5163
  }
5164
+
4313
5165
  div.chall-time.selected {
4314
5166
  background-color: var(--triple-word-color);
4315
5167
  color: black;
4316
5168
  }
5169
+
4317
5170
  div.chall-time:hover {
4318
5171
  background-color: var(--double-letter-color);
4319
5172
  }
5173
+
4320
5174
  div.chall-time.selected:hover {
4321
5175
  background-color: var(--double-word-color);
4322
5176
  }
5177
+
4323
5178
  div.chall-time span.glyphicon-time {
4324
5179
  margin-right: 8px;
4325
5180
  }
5181
+
4326
5182
  span#chall-online {
4327
5183
  position: relative;
4328
5184
  top: 2px;
@@ -4340,13 +5196,16 @@ span#chall-online {
4340
5196
  padding: 5px;
4341
5197
  margin: 0;
4342
5198
  }
5199
+
4343
5200
  span#chall-online:before {
4344
5201
  content: "\E242";
4345
5202
  /* Flash */
4346
5203
  }
5204
+
4347
5205
  span#chall-online.online {
4348
5206
  background-color: var(--ok-button);
4349
5207
  }
5208
+
4350
5209
  div#chall-newbag {
4351
5210
  margin-top: 24px;
4352
5211
  padding-left: 6px;
@@ -4354,27 +5213,33 @@ div#chall-newbag {
4354
5213
  font-size: 14px;
4355
5214
  text-align: left;
4356
5215
  }
5216
+
4357
5217
  div#chall-newbag td {
4358
5218
  vertical-align: middle;
4359
5219
  padding-right: 12px;
4360
5220
  }
5221
+
4361
5222
  div#chall-manual {
4362
5223
  margin-top: 4px;
4363
5224
  font-size: 14px;
4364
5225
  }
5226
+
4365
5227
  div#manual-toggler {
4366
5228
  margin-top: 12px;
4367
5229
  margin-bottom: 0;
4368
5230
  }
5231
+
4369
5232
  div.wait-explain {
4370
5233
  padding-left: 48px;
4371
5234
  padding-right: 12px;
4372
5235
  padding-top: 24px;
4373
5236
  padding-bottom: 24px;
4374
5237
  }
5238
+
4375
5239
  div#user-dialog {
4376
5240
  visibility: visible;
4377
5241
  }
5242
+
4378
5243
  div#user-form {
4379
5244
  position: absolute;
4380
5245
  padding-left: 12px;
@@ -4390,18 +5255,21 @@ div#user-form {
4390
5255
  width: 736px;
4391
5256
  height: 582px;
4392
5257
  }
5258
+
4393
5259
  div#user-logout {
4394
5260
  left: 12px;
4395
5261
  width: 144px;
4396
5262
  /* Override */
4397
5263
  background-color: var(--triple-word-color);
4398
5264
  }
5265
+
4399
5266
  div#user-friend {
4400
5267
  left: 180px;
4401
5268
  width: 280px;
4402
5269
  /* Override */
4403
5270
  background-color: var(--ok-button);
4404
5271
  }
5272
+
4405
5273
  div#user-unfriend {
4406
5274
  left: 180px;
4407
5275
  width: 280px;
@@ -4412,11 +5280,13 @@ div#user-unfriend {
4412
5280
  background-color: white;
4413
5281
  color: var(--ok-button);
4414
5282
  }
5283
+
4415
5284
  div#user-unfriend span.glyphicon-coffee-cup {
4416
5285
  top: -1px;
4417
- color: var(--triple-word-color);
5286
+ color: var(--pass-button);
4418
5287
  margin-right: 8px;
4419
5288
  }
5289
+
4420
5290
  div#user-cancel {
4421
5291
  right: 108px;
4422
5292
  /* 12 + 72 + 12 + 12 */
@@ -4424,6 +5294,7 @@ div#user-cancel {
4424
5294
  /* Override */
4425
5295
  background-color: var(--cancel-button);
4426
5296
  }
5297
+
4427
5298
  div#user-ok {
4428
5299
  right: 12px;
4429
5300
  /* 12 */
@@ -4431,6 +5302,7 @@ div#user-ok {
4431
5302
  /* Override */
4432
5303
  background-color: var(--ok-button);
4433
5304
  }
5305
+
4434
5306
  div#accept-form {
4435
5307
  position: absolute;
4436
5308
  padding-left: 12px;
@@ -4446,6 +5318,7 @@ div#accept-form {
4446
5318
  width: 335px;
4447
5319
  height: 488px;
4448
5320
  }
5321
+
4449
5322
  h1#accept-nick {
4450
5323
  display: inline-block;
4451
5324
  font-size: 28px;
@@ -4454,48 +5327,59 @@ h1#accept-nick {
4454
5327
  margin-top: 0;
4455
5328
  margin-bottom: 8px;
4456
5329
  }
5330
+
4457
5331
  .blink {
4458
5332
  animation: opacityBlink 1s infinite;
4459
5333
  -webkit-animation: opacityBlink 1s infinite;
4460
5334
  }
5335
+
4461
5336
  .opp-ready {
4462
5337
  animation: opacityBlink 1s infinite;
4463
5338
  -webkit-animation: opacityBlink 1s infinite;
4464
5339
  }
5340
+
4465
5341
  a.opp-ready:link,
4466
5342
  a.opp-ready:visited {
4467
5343
  color: var(--cancel-button);
4468
5344
  }
5345
+
4469
5346
  a.opp-ready:hover {
4470
- color: var(--triple-word-color);
5347
+ color: var(--pass-button);
4471
5348
  }
5349
+
4472
5350
  div.blank-rack {
4473
5351
  position: relative;
4474
5352
  top: 0;
4475
5353
  left: 0;
4476
5354
  }
5355
+
4477
5356
  .blank-rack table.board {
4478
5357
  border-spacing: 8px;
4479
5358
  }
5359
+
4480
5360
  div.welcome {
4481
5361
  font-size: 15px;
4482
5362
  line-height: 20px;
4483
5363
  font-weight: normal;
4484
5364
  padding-bottom: 12px;
4485
5365
  }
5366
+
4486
5367
  .welcome a:link,
4487
5368
  .welcome a:visited {
4488
5369
  text-decoration: none;
4489
5370
  color: var(--humangrad-color);
4490
5371
  }
5372
+
4491
5373
  .welcome a:hover {
4492
5374
  text-decoration: none;
4493
- color: var(--triple-word-color);
5375
+ color: var(--pass-button);
4494
5376
  }
5377
+
4495
5378
  div.dialog-spacer {
4496
5379
  margin-top: 2px;
4497
5380
  margin-bottom: 4px;
4498
5381
  }
5382
+
4499
5383
  span.caption {
4500
5384
  display: inline-block;
4501
5385
  position: relative;
@@ -4506,6 +5390,7 @@ span.caption {
4506
5390
  overflow: hidden;
4507
5391
  text-align: right;
4508
5392
  }
5393
+
4509
5394
  span.subcaption {
4510
5395
  display: inline-block;
4511
5396
  position: relative;
@@ -4514,15 +5399,18 @@ span.subcaption {
4514
5399
  margin-left: 18px;
4515
5400
  margin-right: 6px;
4516
5401
  }
5402
+
4517
5403
  span.caption.sub {
4518
5404
  top: 16px;
4519
5405
  }
5406
+
4520
5407
  span.asterisk {
4521
5408
  color: red;
4522
5409
  font-size: 1.4em;
4523
5410
  font-weight: bold;
4524
5411
  margin-left: 4px;
4525
5412
  }
5413
+
4526
5414
  div.explain {
4527
5415
  margin-left: 158px;
4528
5416
  margin-bottom: 12px;
@@ -4531,6 +5419,7 @@ div.explain {
4531
5419
  font-style: italic;
4532
5420
  color: var(--light-shadow);
4533
5421
  }
5422
+
4534
5423
  div.subexplain {
4535
5424
  display: inline-block;
4536
5425
  width: 420px;
@@ -4541,6 +5430,7 @@ div.subexplain {
4541
5430
  font-size: 14px;
4542
5431
  color: var(--light-shadow);
4543
5432
  }
5433
+
4544
5434
  div.errinput {
4545
5435
  margin-left: 158px;
4546
5436
  margin-bottom: 10px;
@@ -4549,8 +5439,9 @@ div.errinput {
4549
5439
  font-weight: bold;
4550
5440
  color: var(--cancel-button);
4551
5441
  }
5442
+
4552
5443
  input.text {
4553
- font-family: var(--primary-font);
5444
+ /* font-family: var(--primary-font); */
4554
5445
  font-size: 20px;
4555
5446
  font-weight: 700;
4556
5447
  height: 32px;
@@ -4564,6 +5455,7 @@ input.text {
4564
5455
  padding-left: 8px;
4565
5456
  padding-right: 8px;
4566
5457
  }
5458
+
4567
5459
  input.text:focus {
4568
5460
  background-color: hsl(from var(--malfridur-secondary) h 85% 90%);
4569
5461
  border-style: solid;
@@ -4572,15 +5464,19 @@ input.text:focus {
4572
5464
  border-radius: 5px;
4573
5465
  outline-style: none;
4574
5466
  }
5467
+
4575
5468
  input.username {
4576
5469
  width: 300px;
4577
5470
  }
5471
+
4578
5472
  input.fullname {
4579
5473
  width: 450px;
4580
5474
  }
5475
+
4581
5476
  input.email {
4582
5477
  width: 400px;
4583
5478
  }
5479
+
4584
5480
  input.text#search-id {
4585
5481
  font-weight: normal;
4586
5482
  height: 28px;
@@ -4589,8 +5485,8 @@ input.text#search-id {
4589
5485
  margin-top: 0px;
4590
5486
  margin-bottom: 0px;
4591
5487
  }
5488
+
4592
5489
  div.netskrafl-container button[type="submit"] {
4593
- font-family: var(--primary-font);
4594
5490
  font-size: 20px;
4595
5491
  font-weight: 400;
4596
5492
  height: 40px;
@@ -4610,20 +5506,25 @@ div.netskrafl-container button[type="submit"] {
4610
5506
  padding-right: 8px;
4611
5507
  cursor: pointer;
4612
5508
  }
5509
+
4613
5510
  div.netskrafl-container button[type="submit"]:focus,
4614
5511
  div.netskrafl-container button[type="submit"]:hover {
4615
5512
  outline: var(--focus-border) solid 3px;
4616
5513
  }
5514
+
4617
5515
  div.netskrafl-container button.login {
4618
5516
  margin-top: 24px;
4619
5517
  }
5518
+
4620
5519
  div.netskrafl-container button.logout {
4621
5520
  margin-top: 80px;
4622
5521
  background-color: var(--cancel-button);
4623
5522
  }
5523
+
4624
5524
  div.netskrafl-container input[type="checkbox"] {
4625
5525
  display: none;
4626
5526
  }
5527
+
4627
5528
  div.toggler {
4628
5529
  background-color: var(--light-background);
4629
5530
  color: white;
@@ -4634,10 +5535,12 @@ div.toggler {
4634
5535
  overflow: hidden;
4635
5536
  border: white solid 3px;
4636
5537
  }
5538
+
4637
5539
  div.toggler:focus, div.toggler:hover {
4638
5540
  outline-style: none;
4639
5541
  border: var(--focus-border) solid 3px;
4640
5542
  }
5543
+
4641
5544
  div.toggler div.option {
4642
5545
  display: inline-block;
4643
5546
  width: 46px;
@@ -4649,6 +5552,7 @@ div.toggler div.option {
4649
5552
  text-align: center;
4650
5553
  border-style: none;
4651
5554
  }
5555
+
4652
5556
  div.toggler div.option.small {
4653
5557
  width: 36px;
4654
5558
  height: 24px;
@@ -4657,6 +5561,7 @@ div.toggler div.option.small {
4657
5561
  padding-top: 3px;
4658
5562
  padding-bottom: 2px;
4659
5563
  }
5564
+
4660
5565
  div.toggler div.option.x-small {
4661
5566
  width: 30px;
4662
5567
  height: 20px;
@@ -4665,58 +5570,74 @@ div.toggler div.option.x-small {
4665
5570
  padding-top: 1px;
4666
5571
  padding-bottom: 3px;
4667
5572
  }
5573
+
4668
5574
  div.toggler div.option.selected {
4669
- background-color: var(--triple-letter-color);
5575
+ background-color: var(--option-selected);
4670
5576
  }
5577
+
4671
5578
  div.toggler span.glyphicon {
5579
+ display: inline-block;
4672
5580
  top: 1px;
4673
5581
  }
5582
+
4674
5583
  div #radioset {
4675
5584
  padding-top: 6px;
4676
5585
  padding-bottom: 24px;
4677
5586
  }
5587
+
4678
5588
  div.disabled {
4679
5589
  background-color: var(--board-background);
4680
5590
  }
5591
+
4681
5592
  a.nodecorate:link {
4682
5593
  text-decoration: none;
4683
5594
  color: black;
4684
5595
  }
5596
+
4685
5597
  a.nodecorate:visited {
4686
5598
  text-decoration: none;
4687
5599
  color: black;
4688
5600
  }
5601
+
4689
5602
  a.nodecorate:hover {
4690
5603
  text-decoration: none;
4691
- color: var(--triple-letter-color);
5604
+ color: var(--pass-button);
4692
5605
  }
5606
+
4693
5607
  a.iconlink:link {
4694
5608
  text-decoration: none;
4695
- color: var(--malfridur-accent);
5609
+ color: var(--header-color);
4696
5610
  }
5611
+
4697
5612
  a.iconlink:visited {
4698
5613
  text-decoration: none;
4699
- color: var(--malfridur-accent);
5614
+ color: var(--header-color);
4700
5615
  }
5616
+
4701
5617
  a.iconlink:hover {
4702
5618
  text-decoration: none;
4703
- color: var(--triple-word-color);
5619
+ color: var(--pass-button);
4704
5620
  }
5621
+
4705
5622
  a.backlink:link {
4706
5623
  text-decoration: none;
4707
5624
  color: var(--board-background);
4708
5625
  }
5626
+
4709
5627
  a.backlink:visited {
4710
5628
  text-decoration: none;
4711
5629
  color: var(--board-background);
4712
5630
  }
5631
+
4713
5632
  a.backlink:hover {
4714
5633
  text-decoration: none;
4715
- color: var(--triple-word-color);
5634
+ color: var(--pass-button);
4716
5635
  }
5636
+
4717
5637
  div#tabs-1 p {
4718
5638
  line-height: 1.6em;
4719
5639
  }
5640
+
4720
5641
  div#tabs-1 p img,
4721
5642
  div#tabs-3 p img {
4722
5643
  margin-left: 3px;
@@ -4724,33 +5645,40 @@ div#tabs-3 p img {
4724
5645
  vertical-align: -3px;
4725
5646
  display: inline;
4726
5647
  }
5648
+
4727
5649
  div#tabs-3 p,
4728
5650
  div#tabs-3 ol li,
4729
5651
  div#tabs-3 ol p,
4730
5652
  div#tabs-3 ol ul li {
4731
5653
  line-height: 1.65em;
4732
5654
  }
5655
+
4733
5656
  div#tabs-3 ol {
4734
5657
  list-style-type: decimal;
4735
5658
  margin: auto;
4736
5659
  padding-inline-start: 40px;
4737
5660
  }
5661
+
4738
5662
  div#tabs-3 li {
4739
5663
  display: list-item;
4740
5664
  margin: auto;
4741
5665
  padding: auto;
4742
5666
  }
5667
+
4743
5668
  div.help-container ol li {
4744
5669
  font-weight: bold;
4745
5670
  }
5671
+
4746
5672
  div.help-container ul li {
4747
5673
  font-weight: normal;
4748
5674
  list-style-type: disc;
4749
5675
  }
5676
+
4750
5677
  div.help-container table {
4751
5678
  border-spacing: 0;
4752
5679
  border-collapse: collapse;
4753
5680
  }
5681
+
4754
5682
  div.help-container td {
4755
5683
  margin: 0;
4756
5684
  padding: 4px;
@@ -4761,27 +5689,33 @@ div.help-container td {
4761
5689
  border-style: solid;
4762
5690
  width: 80px;
4763
5691
  }
5692
+
4764
5693
  div.help-container td.row-caption {
4765
5694
  text-align: left;
4766
5695
  font-weight: bold;
4767
5696
  width: 120px;
4768
5697
  }
5698
+
4769
5699
  div.help-container span.glyphicon-hourglass {
4770
5700
  color: var(--cancel-button);
4771
5701
  }
5702
+
4772
5703
  div.help-container p {
4773
5704
  font-weight: normal;
4774
5705
  }
5706
+
4775
5707
  div.help-container img.browserlogo {
4776
5708
  height: 28px;
4777
5709
  width: auto;
4778
5710
  object-fit: scale-down;
4779
5711
  margin-right: 8px;
4780
5712
  }
5713
+
4781
5714
  div.help-container b.vcenter {
4782
5715
  position: relative;
4783
5716
  top: -8px;
4784
5717
  }
5718
+
4785
5719
  div.twolist {
4786
5720
  -webkit-column-count: 2;
4787
5721
  -moz-column-count: 2;
@@ -4790,27 +5724,33 @@ div.twolist {
4790
5724
  line-height: 30px;
4791
5725
  padding-bottom: 12px;
4792
5726
  }
5727
+
4793
5728
  span.twoword {
4794
5729
  font-weight: bold;
4795
5730
  padding-right: 3px;
4796
5731
  }
5732
+
4797
5733
  span.errword {
4798
5734
  text-transform: uppercase;
4799
5735
  }
5736
+
4800
5737
  div#emoticons-div {
4801
5738
  padding-bottom: 24px;
4802
5739
  }
5740
+
4803
5741
  table#emoticons td {
4804
5742
  font-family: 'Courier', sans-serif;
4805
5743
  font-size: 20px;
4806
5744
  text-align: center;
4807
5745
  }
5746
+
4808
5747
  img#villi {
4809
5748
  float: right;
4810
5749
  margin-left: 12px;
4811
5750
  margin-top: 18px;
4812
5751
  margin-bottom: 12px;
4813
5752
  }
5753
+
4814
5754
  div.signup-header {
4815
5755
  position: absolute;
4816
5756
  top: 12px;
@@ -4960,6 +5900,7 @@ div.signup-header {
4960
5900
  }
4961
5901
 
4962
5902
  /* iPhone 11 or larger: scale the UI to appear larger on the screen */
5903
+
4963
5904
  @media all and (min-width: 414px) and (max-width: 1023px) and (min-height: 652px) {
4964
5905
  div.netskrafl-container {
4965
5906
  /*
@@ -5068,7 +6009,7 @@ div.signup-header {
5068
6009
  border-width: 0;
5069
6010
  color: white;
5070
6011
  left: 506px;
5071
- background-color: var(--triple-word-color);
6012
+ background-color: var(--pass-button);
5072
6013
  }
5073
6014
  div.submitresign {
5074
6015
  top: 158px;
@@ -5276,8 +6217,9 @@ div.signup-header {
5276
6217
  display: block;
5277
6218
  }
5278
6219
  div.netskrafl-logo {
5279
- width: 46px;
5280
- height: 46px;
6220
+ /* Same size as Málstaður logo */
6221
+ width: 40px;
6222
+ height: 40px;
5281
6223
  }
5282
6224
  div#main-tabs div.header-logo {
5283
6225
  display: none;
@@ -5348,7 +6290,7 @@ div.signup-header {
5348
6290
  div.right-area {
5349
6291
  display: block;
5350
6292
  top: 0;
5351
- margin-top: 12px;
6293
+ margin-top: 6px;
5352
6294
  height: 420px;
5353
6295
  }
5354
6296
  div.games,
@@ -5560,7 +6502,7 @@ div.signup-header {
5560
6502
  line-height: 46px;
5561
6503
  top: auto;
5562
6504
  bottom: 273px;
5563
- left: 643px;
6505
+ left: 646px;
5564
6506
  border-radius: 5px;
5565
6507
  }
5566
6508
  div.score {
@@ -5571,9 +6513,9 @@ div.signup-header {
5571
6513
  line-height: 46px;
5572
6514
  top: auto;
5573
6515
  bottom: 211px;
5574
- left: 643px;
6516
+ left: 646px;
5575
6517
  border-radius: 5px;
5576
- font-family: 'Open Sans', 'Arial', sans-serif;
6518
+ font-family: var(--number-font);
5577
6519
  }
5578
6520
  .standard-button {
5579
6521
  position: absolute;
@@ -5588,28 +6530,6 @@ div.signup-header {
5588
6530
  border-radius: 5px;
5589
6531
  cursor: pointer;
5590
6532
  }
5591
- .submitbutton {
5592
- position: absolute;
5593
- top: 528px;
5594
- text-align: center;
5595
- font-size: 19px;
5596
- font-weight: 700;
5597
- color: white;
5598
- margin: 0;
5599
- padding: 6px;
5600
- padding-top: 9px;
5601
- border-radius: 5px;
5602
- cursor: pointer;
5603
- width: 78px;
5604
- height: 30px;
5605
- top: auto;
5606
- bottom: 136px;
5607
- left: 546px;
5608
- background-color: var(--ok-button);
5609
- font-size: 18px;
5610
- line-height: 24px;
5611
- font-weight: normal;
5612
- }
5613
6533
  div.submitnewgame {
5614
6534
  position: absolute;
5615
6535
  top: 528px;
@@ -5660,30 +6580,12 @@ div.signup-header {
5660
6580
  }
5661
6581
  div.waitmove {
5662
6582
  position: absolute;
5663
- top: 528px;
5664
- text-align: center;
5665
- font-size: 19px;
5666
- font-weight: 700;
5667
- color: white;
5668
- margin: 0;
5669
- padding: 6px;
5670
- padding-top: 9px;
5671
- border-radius: 5px;
5672
- cursor: pointer;
5673
- width: 78px;
5674
- height: 30px;
5675
6583
  top: auto;
5676
6584
  bottom: 136px;
5677
6585
  left: 546px;
5678
- background-color: var(--ok-button);
5679
- font-size: 18px;
5680
- line-height: 24px;
5681
- font-weight: normal;
6586
+ width: 78px;
6587
+ height: 30px;
5682
6588
  float: none;
5683
- border-style: solid;
5684
- border-width: 1px;
5685
- border-color: var(--ok-button);
5686
- background-color: white;
5687
6589
  }
5688
6590
  div.submitmove {
5689
6591
  position: absolute;
@@ -5996,9 +6898,6 @@ div.signup-header {
5996
6898
  div.message {
5997
6899
  display: none;
5998
6900
  }
5999
- div.right-area.with-clock {
6000
- margin-top: 52px;
6001
- }
6002
6901
  div.right-area.with-clock div.movelist-container {
6003
6902
  /* If in a clock game, reduce the movelist height by two lines (2 * 20px) */
6004
6903
  height: 380px;
@@ -6212,19 +7111,18 @@ div.signup-header {
6212
7111
  width: 278px;
6213
7112
  }
6214
7113
  div.modal-close#chat-send {
6215
- height: 26px;
6216
7114
  bottom: 0;
6217
7115
  }
6218
7116
  span.statsbutton {
6219
7117
  display: inline;
6220
7118
  text-align: center;
6221
- background-color: white;
7119
+ background-color: var(--header-color);
6222
7120
  font-size: 16px;
6223
7121
  font-weight: 700;
6224
- color: var(--triple-word-color);
7122
+ color: white;
6225
7123
  margin-left: 4px;
6226
7124
  margin-right: 4px;
6227
- padding-top: 2px;
7125
+ padding-top: 4px;
6228
7126
  padding-bottom: 4px;
6229
7127
  padding-left: 12px;
6230
7128
  padding-right: 12px;
@@ -6447,10 +7345,6 @@ div.signup-header {
6447
7345
  height: 48px;
6448
7346
  background-size: 48px 48px;
6449
7347
  }
6450
- div.animated-spinner {
6451
- left: 472px;
6452
- top: 272px;
6453
- }
6454
7348
  div#promo-form {
6455
7349
  left: auto;
6456
7350
  top: 60px;
@@ -6626,7 +7520,7 @@ div.signup-header {
6626
7520
  line-height: 23px;
6627
7521
  }
6628
7522
  div.twoletter-area.with-clock {
6629
- font-size: 15px;
7523
+ font-size: 14px;
6630
7524
  line-height: 24px;
6631
7525
  margin-top: 3px;
6632
7526
  }