mockaton 13.9.8 → 13.9.9

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/client/app.css +36 -12
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "mockaton",
3
3
  "description": "HTTP Mock Server",
4
4
  "type": "module",
5
- "version": "13.9.8",
5
+ "version": "13.9.9",
6
6
  "exports": {
7
7
  ".": {
8
8
  "import": "./index.js",
package/src/client/app.css CHANGED
@@ -2,9 +2,10 @@
2
2
  color-scheme: light dark;
3
3
  --colorBg: light-dark(#fff, #181818);
4
4
  --colorBgField: light-dark(#fcfcfc, #2c2c2c);
5
+ --colorBgFieldHover: light-dark(#fff, #171717);
5
6
 
6
- --colorBgHeader: light-dark(#f2f2f3, #141414);
7
- --colorBgHeaderField: light-dark(#fff, #222);
7
+ --colorBgHeader: light-dark(#f0f0f2, #141414);
8
+ --colorBgHeaderField: light-dark(#fafafa, #222);
8
9
 
9
10
  --colorBorder: light-dark(#e0e0e0, #2c2c2c);
10
11
  --colorBorderActive: light-dark(#c8c8c8, #3c3c3c);
@@ -24,6 +25,10 @@
24
25
  accent-color: var(--colorAccent);
25
26
  --radius: 16px;
26
27
  --subtoolbarHeight: 42px;
28
+
29
+ --shadowRim: light-dark(#fff, #333);
30
+ --shadowDrop: light-dark(rgba(0, 0, 0, 0.2), #000);
31
+ --boxShadowRimDrop: inset 0 0 1px 1px var(--shadowRim), 0 1px 2px var(--shadowDrop);
27
32
  }
28
33
 
29
34
  html,
@@ -45,7 +50,7 @@ body {
45
50
  padding: 0;
46
51
  border: 0;
47
52
  margin: 0;
48
- letter-spacing: -0.374px;
53
+ letter-spacing: -0.2px;
49
54
  line-height: 14px;
50
55
  font-family: inherit;
51
56
  font-size: 100%;
@@ -86,7 +91,6 @@ a {
86
91
  }
87
92
 
88
93
  select {
89
- border: 1px solid transparent;
90
94
  color: var(--colorText);
91
95
  border-radius: var(--radius);
92
96
  appearance: none;
@@ -101,7 +105,7 @@ select {
101
105
 
102
106
  &:hover {
103
107
  border-color: var(--colorHover);
104
- background-color: var(--colorHover);
108
+ background-color: var(--colorBgFieldHover);
105
109
  }
106
110
  }
107
111
 
@@ -174,6 +178,7 @@ header {
174
178
  background: transparent;
175
179
  border-radius: 50px;
176
180
  color: var(--colorRed);
181
+ box-shadow: var(--boxShadowRimDrop);
177
182
 
178
183
  @media (prefers-color-scheme: dark) {
179
184
  color: var(--colorText);
@@ -186,12 +191,13 @@ header {
186
191
  }
187
192
 
188
193
  .HelpLink {
189
- width: 22px;
190
- height: 22px;
194
+ width: 24px;
195
+ height: 24px;
191
196
  flex-shrink: 0;
192
197
  align-self: end;
193
198
  margin-bottom: 3px;
194
199
  margin-left: auto;
200
+ box-shadow: var(--boxShadowRimDrop);
195
201
  opacity: 0.8;
196
202
  border-radius: 50%;
197
203
  fill: var(--colorBgHeader);
@@ -237,12 +243,17 @@ header {
237
243
  width: 100%;
238
244
  height: 28px;
239
245
  padding: 4px 8px;
240
- border: 1px solid var(--colorBorder);
241
246
  margin-top: 2px;
242
247
  color: var(--colorText);
243
248
  font-size: 11px;
244
249
  background-color: var(--colorBgHeaderField);
245
250
  border-radius: var(--radius);
251
+ box-shadow: var(--boxShadowRimDrop);
252
+ transition: background-color ease-in-out 120ms;
253
+
254
+ &:hover {
255
+ background-color: var(--colorBgFieldHover);
256
+ }
246
257
  }
247
258
 
248
259
  &.GlobalDelay {
@@ -279,7 +290,6 @@ header {
279
290
  margin-left: 4px;
280
291
  }
281
292
  input {
282
- border-left: 2px solid transparent;
283
293
  border-bottom-left-radius: 0;
284
294
  border-top-left-radius: 0;
285
295
  }
@@ -412,7 +422,6 @@ main {
412
422
  select {
413
423
  width: 110px;
414
424
  padding: 6px 8px;
415
- border: 1px solid var(--colorBorder);
416
425
  margin-left: 4px;
417
426
  background-image: none;
418
427
  text-align-last: center;
@@ -420,6 +429,12 @@ main {
420
429
  font-size: 11px;
421
430
  background-color: var(--colorBgHeaderField);
422
431
  border-radius: var(--radius);
432
+ box-shadow: var(--boxShadowRimDrop);
433
+ transition: background-color ease-in-out 120ms;
434
+
435
+ &:hover {
436
+ background-color: var(--colorBgFieldHover);
437
+ }
423
438
  }
424
439
  }
425
440
 
@@ -602,6 +617,13 @@ main {
602
617
  text-overflow: ellipsis;
603
618
  text-align: right;
604
619
 
620
+ &:enabled {
621
+ box-shadow: var(--boxShadowRimDrop);
622
+ &:hover {
623
+ background-color: var(--colorBgFieldHover);
624
+ }
625
+ }
626
+
605
627
  &.nonDefault {
606
628
  font-weight: bold;
607
629
  font-size: 11px;
@@ -665,11 +687,12 @@ main {
665
687
  height: 22px;
666
688
  align-items: center;
667
689
  justify-content: center;
668
- border: 1px solid var(--colorBorder);
669
690
  fill: none;
670
691
  stroke: var(--colorLabel);
671
692
  stroke-width: 2.5px;
672
693
  border-radius: 50%;
694
+ box-shadow: var(--boxShadowRimDrop);
695
+ background-color: var(--colorBgHeaderField);
673
696
  }
674
697
 
675
698
  &.canProxy {
@@ -685,7 +708,7 @@ main {
685
708
 
686
709
  .checkboxBody {
687
710
  svg {
688
- width: 16px;
711
+ width: 15px;
689
712
  }
690
713
  }
691
714
  }
@@ -736,6 +759,7 @@ main {
736
759
  }
737
760
 
738
761
  > code {
762
+ line-height: 1.3;
739
763
  white-space: pre;
740
764
  tab-size: 2;
741
765
  color: var(--colorLabel);