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