framework7-rails 0.7.4.0 → 0.9.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +50 -45
  3. data/app/helpers/app_helper.rb +1 -1
  4. data/app/helpers/bar_helper.rb +45 -0
  5. data/app/helpers/bar_item_helper.rb +105 -0
  6. data/app/helpers/content_block_helper.rb +66 -0
  7. data/app/helpers/framework7_helper.rb +26 -0
  8. data/app/helpers/list_block_helper.rb +180 -0
  9. data/app/helpers/pages_helper.rb +66 -0
  10. data/app/helpers/panel_helper.rb +27 -0
  11. data/app/helpers/toolbar_helper.rb +52 -0
  12. data/app/helpers/views_helper.rb +36 -0
  13. data/app/presenters/framework7/base_presenter.rb +24 -0
  14. data/framework7-rails.gemspec +5 -1
  15. data/lib/framework7.rb +6 -0
  16. data/lib/framework7/rails/version.rb +1 -1
  17. data/lib/generators/f7/install/examples/examples_generator.rb +17 -0
  18. data/lib/generators/f7/install/examples/templates/app/controllers/examples_controller.rb +16 -0
  19. data/lib/generators/f7/install/examples/templates/app/views/examples/about.html.erb +27 -0
  20. data/lib/generators/f7/install/examples/templates/app/views/examples/form.html.erb +227 -0
  21. data/lib/generators/f7/install/examples/templates/app/views/examples/index.html.erb +80 -0
  22. data/lib/generators/f7/install/examples/templates/app/views/examples/services.html.erb +27 -0
  23. data/lib/generators/f7/install/install_generator.rb +1 -1
  24. data/lib/generators/f7/install/templates/application.css +1 -0
  25. data/lib/generators/f7/layout/layout_generator.rb +17 -3
  26. data/lib/generators/f7/layout/templates/layout.html.erb +9 -82
  27. data/lib/generators/f7/layout/templates/setup.coffee +10 -0
  28. data/lib/generators/f7/layout/templates/setup.js +12 -0
  29. data/vendor/assets/javascripts/framework7.js +5859 -1140
  30. data/vendor/assets/stylesheets/framework7.css +2569 -244
  31. data/vendor/assets/stylesheets/framework7.rtl.css +427 -0
  32. data/vendor/assets/stylesheets/framework7.themes.css +279 -0
  33. metadata +56 -15
  34. data/lib/generators/f7/layout/templates/app.js.coffee.erb +0 -77
  35. data/vendor/assets/images/i-form-checkbox-black.png +0 -0
  36. data/vendor/assets/images/i-form-checkbox-blue.png +0 -0
  37. data/vendor/assets/images/i-form-checkbox-white.png +0 -0
  38. data/vendor/assets/images/i-form-radio-black.png +0 -0
  39. data/vendor/assets/images/i-form-radio-blue.png +0 -0
  40. data/vendor/assets/images/i-form-radio-white.png +0 -0
  41. data/vendor/assets/javascripts/framework7.min.js +0 -16
  42. data/vendor/assets/stylesheets/framework7.min.css +0 -15
@@ -1,5 +1,5 @@
1
1
  /*
2
- * Framework7 0.7.4
2
+ * Framework7 0.9.5
3
3
  * Full Featured HTML Framework For Building iOS 7 Apps
4
4
  *
5
5
  * http://www.idangero.us/framework7
@@ -10,11 +10,8 @@
10
10
  *
11
11
  * Licensed under MIT
12
12
  *
13
- * Released on: April 13, 2014
13
+ * Released on: September 17, 2014
14
14
  */
15
- /*=============
16
- Framework 7
17
- =============*/
18
15
  html,
19
16
  body {
20
17
  position: relative;
@@ -64,31 +61,33 @@ p {
64
61
  margin: 1em 0;
65
62
  }
66
63
  /* === Grid === */
67
- .row:before,
68
- .row:after {
69
- content: " ";
70
- display: table;
71
- }
72
- .row:after {
73
- clear: both;
64
+ .row {
65
+ display: -webkit-box;
66
+ display: -ms-flexbox;
67
+ display: -webkit-flex;
68
+ display: flex;
69
+ -webkit-box-pack: justify;
70
+ -ms-flex-pack: justify;
71
+ -webkit-justify-content: space-between;
72
+ justify-content: space-between;
73
+ -webkit-box-lines: multiple;
74
+ -moz-box-lines: multiple;
75
+ -webkit-flex-wrap: wrap;
76
+ -ms-flex-wrap: wrap;
77
+ flex-wrap: wrap;
78
+ -webkit-box-align: start;
79
+ -ms-flex-align: start;
80
+ -webkit-align-items: flex-start;
81
+ align-items: flex-start;
74
82
  }
75
83
  .row > [class*="col-"] {
76
- float: left;
77
- margin-left: 15px;
78
84
  -webkit-box-sizing: border-box;
79
85
  -moz-box-sizing: border-box;
80
86
  box-sizing: border-box;
81
87
  }
82
- .row > [class*="col-"]:first-child {
83
- margin-left: 0;
84
- }
85
- .no-gutter.row > [class*="col-"] {
86
- margin-left: 0;
87
- }
88
88
  .row .col-100 {
89
89
  width: 100%;
90
90
  width: -webkit-calc( (100% - 15px*0) / 1);
91
- width: -moz-calc( (100% - 15px*0) / 1);
92
91
  width: calc( (100% - 15px*0) / 1);
93
92
  }
94
93
  .row.no-gutter .col-100 {
@@ -97,7 +96,6 @@ p {
97
96
  .row .col-95 {
98
97
  width: 95%;
99
98
  width: -webkit-calc( (100% - 15px*0.05263157894736836) / 1.0526315789473684);
100
- width: -moz-calc( (100% - 15px*0.05263157894736836) / 1.0526315789473684);
101
99
  width: calc( (100% - 15px*0.05263157894736836) / 1.0526315789473684);
102
100
  }
103
101
  .row.no-gutter .col-95 {
@@ -106,7 +104,6 @@ p {
106
104
  .row .col-90 {
107
105
  width: 90%;
108
106
  width: -webkit-calc( (100% - 15px*0.11111111111111116) / 1.1111111111111112);
109
- width: -moz-calc( (100% - 15px*0.11111111111111116) / 1.1111111111111112);
110
107
  width: calc( (100% - 15px*0.11111111111111116) / 1.1111111111111112);
111
108
  }
112
109
  .row.no-gutter .col-90 {
@@ -115,7 +112,6 @@ p {
115
112
  .row .col-85 {
116
113
  width: 85%;
117
114
  width: -webkit-calc( (100% - 15px*0.17647058823529416) / 1.1764705882352942);
118
- width: -moz-calc( (100% - 15px*0.17647058823529416) / 1.1764705882352942);
119
115
  width: calc( (100% - 15px*0.17647058823529416) / 1.1764705882352942);
120
116
  }
121
117
  .row.no-gutter .col-85 {
@@ -124,7 +120,6 @@ p {
124
120
  .row .col-80 {
125
121
  width: 80%;
126
122
  width: -webkit-calc( (100% - 15px*0.25) / 1.25);
127
- width: -moz-calc( (100% - 15px*0.25) / 1.25);
128
123
  width: calc( (100% - 15px*0.25) / 1.25);
129
124
  }
130
125
  .row.no-gutter .col-80 {
@@ -133,7 +128,6 @@ p {
133
128
  .row .col-75 {
134
129
  width: 75%;
135
130
  width: -webkit-calc( (100% - 15px*0.33333333333333326) / 1.3333333333333333);
136
- width: -moz-calc( (100% - 15px*0.33333333333333326) / 1.3333333333333333);
137
131
  width: calc( (100% - 15px*0.33333333333333326) / 1.3333333333333333);
138
132
  }
139
133
  .row.no-gutter .col-75 {
@@ -142,7 +136,6 @@ p {
142
136
  .row .col-66 {
143
137
  width: 66.66666666666666%;
144
138
  width: -webkit-calc( (100% - 15px*0.5000000000000002) / 1.5000000000000002);
145
- width: -moz-calc( (100% - 15px*0.5000000000000002) / 1.5000000000000002);
146
139
  width: calc( (100% - 15px*0.5000000000000002) / 1.5000000000000002);
147
140
  }
148
141
  .row.no-gutter .col-66 {
@@ -151,7 +144,6 @@ p {
151
144
  .row .col-60 {
152
145
  width: 60%;
153
146
  width: -webkit-calc( (100% - 15px*0.6666666666666667) / 1.6666666666666667);
154
- width: -moz-calc( (100% - 15px*0.6666666666666667) / 1.6666666666666667);
155
147
  width: calc( (100% - 15px*0.6666666666666667) / 1.6666666666666667);
156
148
  }
157
149
  .row.no-gutter .col-60 {
@@ -160,7 +152,6 @@ p {
160
152
  .row .col-50 {
161
153
  width: 50%;
162
154
  width: -webkit-calc( (100% - 15px*1) / 2);
163
- width: -moz-calc( (100% - 15px*1) / 2);
164
155
  width: calc( (100% - 15px*1) / 2);
165
156
  }
166
157
  .row.no-gutter .col-50 {
@@ -169,7 +160,6 @@ p {
169
160
  .row .col-40 {
170
161
  width: 40%;
171
162
  width: -webkit-calc( (100% - 15px*1.5) / 2.5);
172
- width: -moz-calc( (100% - 15px*1.5) / 2.5);
173
163
  width: calc( (100% - 15px*1.5) / 2.5);
174
164
  }
175
165
  .row.no-gutter .col-40 {
@@ -178,7 +168,6 @@ p {
178
168
  .row .col-33 {
179
169
  width: 33.333333333333336%;
180
170
  width: -webkit-calc( (100% - 15px*2) / 3);
181
- width: -moz-calc( (100% - 15px*2) / 3);
182
171
  width: calc( (100% - 15px*2) / 3);
183
172
  }
184
173
  .row.no-gutter .col-33 {
@@ -187,7 +176,6 @@ p {
187
176
  .row .col-25 {
188
177
  width: 25%;
189
178
  width: -webkit-calc( (100% - 15px*3) / 4);
190
- width: -moz-calc( (100% - 15px*3) / 4);
191
179
  width: calc( (100% - 15px*3) / 4);
192
180
  }
193
181
  .row.no-gutter .col-25 {
@@ -196,7 +184,6 @@ p {
196
184
  .row .col-20 {
197
185
  width: 20%;
198
186
  width: -webkit-calc( (100% - 15px*4) / 5);
199
- width: -moz-calc( (100% - 15px*4) / 5);
200
187
  width: calc( (100% - 15px*4) / 5);
201
188
  }
202
189
  .row.no-gutter .col-20 {
@@ -205,7 +192,6 @@ p {
205
192
  .row .col-15 {
206
193
  width: 15%;
207
194
  width: -webkit-calc( (100% - 15px*5.666666666666667) / 6.666666666666667);
208
- width: -moz-calc( (100% - 15px*5.666666666666667) / 6.666666666666667);
209
195
  width: calc( (100% - 15px*5.666666666666667) / 6.666666666666667);
210
196
  }
211
197
  .row.no-gutter .col-15 {
@@ -214,7 +200,6 @@ p {
214
200
  .row .col-10 {
215
201
  width: 10%;
216
202
  width: -webkit-calc( (100% - 15px*9) / 10);
217
- width: -moz-calc( (100% - 15px*9) / 10);
218
203
  width: calc( (100% - 15px*9) / 10);
219
204
  }
220
205
  .row.no-gutter .col-10 {
@@ -223,12 +208,141 @@ p {
223
208
  .row .col-5 {
224
209
  width: 5%;
225
210
  width: -webkit-calc( (100% - 15px*19) / 20);
226
- width: -moz-calc( (100% - 15px*19) / 20);
227
211
  width: calc( (100% - 15px*19) / 20);
228
212
  }
229
213
  .row.no-gutter .col-5 {
230
214
  width: 5%;
231
215
  }
216
+ @media all and (min-width: 768px) {
217
+ .row .tablet-100 {
218
+ width: 100%;
219
+ width: -webkit-calc( (100% - 15px*0) / 1);
220
+ width: calc( (100% - 15px*0) / 1);
221
+ }
222
+ .row.no-gutter .tablet-100 {
223
+ width: 100%;
224
+ }
225
+ .row .tablet-95 {
226
+ width: 95%;
227
+ width: -webkit-calc( (100% - 15px*0.05263157894736836) / 1.0526315789473684);
228
+ width: calc( (100% - 15px*0.05263157894736836) / 1.0526315789473684);
229
+ }
230
+ .row.no-gutter .tablet-95 {
231
+ width: 95%;
232
+ }
233
+ .row .tablet-90 {
234
+ width: 90%;
235
+ width: -webkit-calc( (100% - 15px*0.11111111111111116) / 1.1111111111111112);
236
+ width: calc( (100% - 15px*0.11111111111111116) / 1.1111111111111112);
237
+ }
238
+ .row.no-gutter .tablet-90 {
239
+ width: 90%;
240
+ }
241
+ .row .tablet-85 {
242
+ width: 85%;
243
+ width: -webkit-calc( (100% - 15px*0.17647058823529416) / 1.1764705882352942);
244
+ width: calc( (100% - 15px*0.17647058823529416) / 1.1764705882352942);
245
+ }
246
+ .row.no-gutter .tablet-85 {
247
+ width: 85%;
248
+ }
249
+ .row .tablet-80 {
250
+ width: 80%;
251
+ width: -webkit-calc( (100% - 15px*0.25) / 1.25);
252
+ width: calc( (100% - 15px*0.25) / 1.25);
253
+ }
254
+ .row.no-gutter .tablet-80 {
255
+ width: 80%;
256
+ }
257
+ .row .tablet-75 {
258
+ width: 75%;
259
+ width: -webkit-calc( (100% - 15px*0.33333333333333326) / 1.3333333333333333);
260
+ width: calc( (100% - 15px*0.33333333333333326) / 1.3333333333333333);
261
+ }
262
+ .row.no-gutter .tablet-75 {
263
+ width: 75%;
264
+ }
265
+ .row .tablet-66 {
266
+ width: 66.66666666666666%;
267
+ width: -webkit-calc( (100% - 15px*0.5000000000000002) / 1.5000000000000002);
268
+ width: calc( (100% - 15px*0.5000000000000002) / 1.5000000000000002);
269
+ }
270
+ .row.no-gutter .tablet-66 {
271
+ width: 66.66666666666666%;
272
+ }
273
+ .row .tablet-60 {
274
+ width: 60%;
275
+ width: -webkit-calc( (100% - 15px*0.6666666666666667) / 1.6666666666666667);
276
+ width: calc( (100% - 15px*0.6666666666666667) / 1.6666666666666667);
277
+ }
278
+ .row.no-gutter .tablet-60 {
279
+ width: 60%;
280
+ }
281
+ .row .tablet-50 {
282
+ width: 50%;
283
+ width: -webkit-calc( (100% - 15px*1) / 2);
284
+ width: calc( (100% - 15px*1) / 2);
285
+ }
286
+ .row.no-gutter .tablet-50 {
287
+ width: 50%;
288
+ }
289
+ .row .tablet-40 {
290
+ width: 40%;
291
+ width: -webkit-calc( (100% - 15px*1.5) / 2.5);
292
+ width: calc( (100% - 15px*1.5) / 2.5);
293
+ }
294
+ .row.no-gutter .tablet-40 {
295
+ width: 40%;
296
+ }
297
+ .row .tablet-33 {
298
+ width: 33.333333333333336%;
299
+ width: -webkit-calc( (100% - 15px*2) / 3);
300
+ width: calc( (100% - 15px*2) / 3);
301
+ }
302
+ .row.no-gutter .tablet-33 {
303
+ width: 33.333333333333336%;
304
+ }
305
+ .row .tablet-25 {
306
+ width: 25%;
307
+ width: -webkit-calc( (100% - 15px*3) / 4);
308
+ width: calc( (100% - 15px*3) / 4);
309
+ }
310
+ .row.no-gutter .tablet-25 {
311
+ width: 25%;
312
+ }
313
+ .row .tablet-20 {
314
+ width: 20%;
315
+ width: -webkit-calc( (100% - 15px*4) / 5);
316
+ width: calc( (100% - 15px*4) / 5);
317
+ }
318
+ .row.no-gutter .tablet-20 {
319
+ width: 20%;
320
+ }
321
+ .row .tablet-15 {
322
+ width: 15%;
323
+ width: -webkit-calc( (100% - 15px*5.666666666666667) / 6.666666666666667);
324
+ width: calc( (100% - 15px*5.666666666666667) / 6.666666666666667);
325
+ }
326
+ .row.no-gutter .tablet-15 {
327
+ width: 15%;
328
+ }
329
+ .row .tablet-10 {
330
+ width: 10%;
331
+ width: -webkit-calc( (100% - 15px*9) / 10);
332
+ width: calc( (100% - 15px*9) / 10);
333
+ }
334
+ .row.no-gutter .tablet-10 {
335
+ width: 10%;
336
+ }
337
+ .row .tablet-5 {
338
+ width: 5%;
339
+ width: -webkit-calc( (100% - 15px*19) / 20);
340
+ width: calc( (100% - 15px*19) / 20);
341
+ }
342
+ .row.no-gutter .tablet-5 {
343
+ width: 5%;
344
+ }
345
+ }
232
346
  /* === Views === */
233
347
  .views,
234
348
  .view {
@@ -495,6 +609,8 @@ html.android .page-from-center-to-right {
495
609
  position: relative;
496
610
  margin: 0;
497
611
  z-index: 500;
612
+ -webkit-backface-visibility: hidden;
613
+ backface-visibility: hidden;
498
614
  }
499
615
  .navbar b,
500
616
  .toolbar b {
@@ -504,7 +620,6 @@ html.android .page-from-center-to-right {
504
620
  .toolbar a.link {
505
621
  line-height: 44px;
506
622
  height: 44px;
507
- color: #007aff;
508
623
  text-decoration: none;
509
624
  position: relative;
510
625
  display: -webkit-box;
@@ -522,8 +637,10 @@ html.android .page-from-center-to-right {
522
637
  -webkit-transition-duration: 300ms;
523
638
  transition-duration: 300ms;
524
639
  }
525
- .navbar a.link:active,
526
- .toolbar a.link:active {
640
+ html:not(.watch-active-state) .navbar a.link:active,
641
+ html:not(.watch-active-state) .toolbar a.link:active,
642
+ .navbar a.link.active-state,
643
+ .toolbar a.link.active-state {
527
644
  opacity: 0.3;
528
645
  -webkit-transition-duration: 0ms;
529
646
  transition-duration: 0ms;
@@ -531,7 +648,11 @@ html.android .page-from-center-to-right {
531
648
  .navbar a.link i + span,
532
649
  .toolbar a.link i + span,
533
650
  .navbar a.link i + i,
534
- .toolbar a.link i + i {
651
+ .toolbar a.link i + i,
652
+ .navbar a.link span + i,
653
+ .toolbar a.link span + i,
654
+ .navbar a.link span + span,
655
+ .toolbar a.link span + span {
535
656
  margin-left: 7px;
536
657
  }
537
658
  .navbar a.icon-only,
@@ -561,6 +682,9 @@ html.android .page-from-center-to-right {
561
682
  background: #f7f7f8;
562
683
  border-bottom: 1px solid #c4c4c4;
563
684
  }
685
+ html.retina.ios-gt-7 .navbar {
686
+ border-bottom-width: 0.5px;
687
+ }
564
688
  .navbar .center {
565
689
  font-size: 17px;
566
690
  font-weight: 500;
@@ -570,10 +694,18 @@ html.android .page-from-center-to-right {
570
694
  overflow: hidden;
571
695
  text-overflow: ellipsis;
572
696
  white-space: nowrap;
697
+ line-height: 44px;
573
698
  -webkit-flex-shrink: 10;
574
699
  -ms-flex: 0 10 auto;
575
700
  flex-shrink: 10;
576
- line-height: 43px;
701
+ display: -webkit-box;
702
+ display: -ms-flexbox;
703
+ display: -webkit-flex;
704
+ display: flex;
705
+ -webkit-box-align: center;
706
+ -ms-flex-align: center;
707
+ -webkit-align-items: center;
708
+ align-items: center;
577
709
  }
578
710
  .navbar .left,
579
711
  .navbar .right {
@@ -606,12 +738,20 @@ html.android .page-from-center-to-right {
606
738
  .navbar .right {
607
739
  margin-left: 10px;
608
740
  }
741
+ .navbar .right:first-child {
742
+ position: absolute;
743
+ right: 8px;
744
+ height: 100%;
745
+ }
609
746
  .toolbar {
610
747
  left: 0;
611
748
  bottom: 0;
612
749
  background: #f7f7f8;
613
750
  border-top: 1px solid #c4c4c4;
614
751
  }
752
+ html.retina.ios-gt-7 .toolbar {
753
+ border-top-width: 0.5px;
754
+ }
615
755
  .toolbar a {
616
756
  -webkit-flex-shrink: 1;
617
757
  -ms-flex: 0 1 auto;
@@ -631,7 +771,9 @@ html.android .page-from-center-to-right {
631
771
  .tabbar a.active {
632
772
  color: #007aff;
633
773
  }
634
- .tabbar a.tab-link {
774
+ .tabbar a.tab-link,
775
+ .tabbar a.link {
776
+ height: 100%;
635
777
  width: 100%;
636
778
  -webkit-box-sizing: border-box;
637
779
  -moz-box-sizing: border-box;
@@ -640,10 +782,10 @@ html.android .page-from-center-to-right {
640
782
  display: -ms-flexbox;
641
783
  display: -webkit-flex;
642
784
  display: flex;
643
- -webkit-box-pack: justify;
644
- -ms-flex-pack: justify;
645
- -webkit-justify-content: space-between;
646
- justify-content: space-between;
785
+ -webkit-box-pack: center;
786
+ -ms-flex-pack: center;
787
+ -webkit-justify-content: center;
788
+ justify-content: center;
647
789
  -webkit-box-align: center;
648
790
  -ms-flex-align: center;
649
791
  -webkit-align-items: center;
@@ -657,13 +799,21 @@ html.android .page-from-center-to-right {
657
799
  -webkit-flex-direction: column;
658
800
  flex-direction: column;
659
801
  }
802
+ .tabbar i.icon {
803
+ height: 30px;
804
+ }
660
805
  .tabbar-labels {
661
806
  height: 50px;
662
807
  }
663
- .tabbar-labels a.tab-link {
808
+ .tabbar-labels a.tab-link,
809
+ .tabbar-labels a.link {
664
810
  padding-top: 4px;
665
811
  padding-bottom: 4px;
666
812
  height: 100%;
813
+ -webkit-box-pack: justify;
814
+ -ms-flex-pack: justify;
815
+ -webkit-justify-content: space-between;
816
+ justify-content: space-between;
667
817
  }
668
818
  .tabbar-labels span.tabbar-label {
669
819
  line-height: 1;
@@ -681,12 +831,13 @@ html.android .page-from-center-to-right {
681
831
  -webkit-justify-content: center;
682
832
  justify-content: center;
683
833
  }
684
- .tabbar a.tab-link {
834
+ .tabbar a.tab-link,
835
+ .tabbar a.link {
685
836
  width: auto;
686
837
  min-width: 105px;
687
838
  }
688
839
  .tabbar-labels {
689
- height: 55px;
840
+ height: 56px;
690
841
  }
691
842
  .tabbar-labels span.tabbar-label {
692
843
  font-size: 14px;
@@ -801,17 +952,25 @@ html.android .page-from-center-to-right {
801
952
  .views > .toolbar {
802
953
  position: absolute;
803
954
  }
804
- .navbar-through .page-content {
955
+ .navbar-through .page-content,
956
+ .navbar-fixed .page-content {
805
957
  padding-top: 44px;
806
958
  }
807
- .toolbar-through .page-content {
959
+ .toolbar-through .page-content,
960
+ .toolbar-fixed .page-content,
961
+ .tabbar-through .page-content,
962
+ .tabbar-fixed .page-content {
808
963
  padding-bottom: 44px;
809
964
  }
810
- .navbar-fixed .page-content {
811
- padding-top: 44px;
965
+ .tabbar-labels-fixed .page-content,
966
+ .tabbar-labels-through .page-content {
967
+ padding-bottom: 50px;
812
968
  }
813
- .toolbar-fixed .page-content {
814
- padding-bottom: 44px;
969
+ @media all and (min-width: 768px) {
970
+ .tabbar-labels-fixed .page-content,
971
+ .tabbar-labels-through .page-content {
972
+ padding-bottom: 56px;
973
+ }
815
974
  }
816
975
  .hidden-navbar .navbar {
817
976
  -webkit-transition-duration: 400ms;
@@ -847,6 +1006,227 @@ html.android .page-from-center-to-right {
847
1006
  .page.no-toolbar .page-content {
848
1007
  padding-bottom: 0;
849
1008
  }
1009
+ /* === Search Bar === */
1010
+ .searchbar {
1011
+ height: 44px;
1012
+ background: #c9c9ce;
1013
+ -webkit-box-sizing: border-box;
1014
+ -moz-box-sizing: border-box;
1015
+ box-sizing: border-box;
1016
+ border-bottom: 1px solid #b4b4b4;
1017
+ padding: 0 8px;
1018
+ overflow: hidden;
1019
+ position: relative;
1020
+ display: -webkit-box;
1021
+ display: -ms-flexbox;
1022
+ display: -webkit-flex;
1023
+ display: flex;
1024
+ -webkit-box-align: center;
1025
+ -ms-flex-align: center;
1026
+ -webkit-align-items: center;
1027
+ align-items: center;
1028
+ }
1029
+ html.retina.ios-gt-7 .searchbar {
1030
+ border-bottom-width: 0.5px;
1031
+ }
1032
+ .searchbar .searchbar-input {
1033
+ width: 100%;
1034
+ height: 28px;
1035
+ position: relative;
1036
+ -webkit-flex-shrink: 1;
1037
+ -ms-flex: 0 1 auto;
1038
+ flex-shrink: 1;
1039
+ }
1040
+ .searchbar input[type="search"] {
1041
+ -webkit-box-sizing: border-box;
1042
+ -moz-box-sizing: border-box;
1043
+ box-sizing: border-box;
1044
+ width: 100%;
1045
+ height: 100%;
1046
+ display: block;
1047
+ border: none;
1048
+ -webkit-appearance: none;
1049
+ -moz-appearance: none;
1050
+ -ms-appearance: none;
1051
+ appearance: none;
1052
+ border-radius: 5px;
1053
+ font-family: inherit;
1054
+ color: #000;
1055
+ font-size: 14px;
1056
+ font-weight: normal;
1057
+ padding: 0 28px;
1058
+ background: #ffffff url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' enable-background='new 0 0 13 13'><g><path fill='%23939398' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/></g><line stroke='%23939398' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>") no-repeat 8px center;
1059
+ -webkit-background-size: 13px 13px;
1060
+ background-size: 13px 13px;
1061
+ }
1062
+ .searchbar input[type="search"]::-webkit-input-placeholder {
1063
+ color: #939398;
1064
+ opacity: 1;
1065
+ }
1066
+ .searchbar input[type="search"]::-webkit-search-cancel-button {
1067
+ -webkit-appearance: none;
1068
+ }
1069
+ .searchbar .searchbar-clear {
1070
+ position: absolute;
1071
+ width: 28px;
1072
+ height: 28px;
1073
+ right: 0;
1074
+ top: 0;
1075
+ opacity: 0;
1076
+ pointer-events: none;
1077
+ background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><circle cx='14' cy='14' r='14' fill='%238e8e93'/><line stroke='%23ffffff' stroke-width='2' stroke-miterlimit='10' x1='8' y1='8' x2='20' y2='20'/><line fill='none' stroke='%23ffffff' stroke-width='2' stroke-miterlimit='10' x1='20' y1='8' x2='8' y2='20'/></svg>") no-repeat center;
1078
+ -webkit-background-size: 14px 14px;
1079
+ background-size: 14px 14px;
1080
+ -webkit-transition-duration: 300ms;
1081
+ transition-duration: 300ms;
1082
+ cursor: pointer;
1083
+ }
1084
+ .searchbar .searchbar-cancel {
1085
+ -webkit-transition-duration: 300ms;
1086
+ transition-duration: 300ms;
1087
+ -webkit-transform: translate3d(0, 0, 0);
1088
+ -ms-transform: translate3d(0, 0, 0);
1089
+ transform: translate3d(0, 0, 0);
1090
+ font-size: 17px;
1091
+ cursor: pointer;
1092
+ opacity: 0;
1093
+ -webkit-flex-shrink: 0;
1094
+ -ms-flex: 0 0 auto;
1095
+ flex-shrink: 0;
1096
+ margin-left: 0;
1097
+ pointer-events: none;
1098
+ }
1099
+ .searchbar.searchbar-active .searchbar-cancel {
1100
+ margin-left: 8px;
1101
+ opacity: 1;
1102
+ pointer-events: auto;
1103
+ }
1104
+ html:not(.watch-active-state) .searchbar.searchbar-active .searchbar-cancel:active,
1105
+ .searchbar.searchbar-active .searchbar-cancel.active-state {
1106
+ opacity: 0.3;
1107
+ -webkit-transition-duration: 0ms;
1108
+ transition-duration: 0ms;
1109
+ }
1110
+ .searchbar.searchbar-not-empty .searchbar-clear {
1111
+ pointer-events: auto;
1112
+ opacity: 1;
1113
+ }
1114
+ .searchbar-overlay {
1115
+ position: absolute;
1116
+ left: 0;
1117
+ top: 0;
1118
+ width: 100%;
1119
+ height: 100%;
1120
+ z-index: 100;
1121
+ opacity: 0;
1122
+ pointer-events: none;
1123
+ background: rgba(0, 0, 0, 0.4);
1124
+ -webkit-transition-duration: 300ms;
1125
+ transition-duration: 300ms;
1126
+ -webkit-transform: translate3d(0, 0, 0);
1127
+ -ms-transform: translate3d(0, 0, 0);
1128
+ transform: translate3d(0, 0, 0);
1129
+ }
1130
+ .searchbar-overlay.searchbar-overlay-active {
1131
+ opacity: 1;
1132
+ pointer-events: auto;
1133
+ }
1134
+ .searchbar-not-found {
1135
+ display: none;
1136
+ }
1137
+ .hidden-by-searchbar,
1138
+ .list-block .hidden-by-searchbar,
1139
+ .list-block li.hidden-by-searchbar {
1140
+ display: none;
1141
+ }
1142
+ .page > .searchbar {
1143
+ position: absolute;
1144
+ width: 100%;
1145
+ left: 0;
1146
+ top: 0;
1147
+ z-index: 200;
1148
+ }
1149
+ .page > .searchbar ~ .page-content {
1150
+ padding-top: 44px;
1151
+ }
1152
+ .navbar-fixed .page > .searchbar,
1153
+ .navbar-through .page > .searchbar,
1154
+ .navbar-fixed > .searchbar,
1155
+ .navbar-through > .searchbar {
1156
+ top: 44px;
1157
+ }
1158
+ .navbar-fixed .page > .searchbar ~ .page-content,
1159
+ .navbar-through .page > .searchbar ~ .page-content,
1160
+ .navbar-fixed > .searchbar ~ .page-content,
1161
+ .navbar-through > .searchbar ~ .page-content {
1162
+ padding-top: 88px;
1163
+ }
1164
+ /* === Message Bar === */
1165
+ .messagebar {
1166
+ -webkit-transform: translate3d(0, 0, 0);
1167
+ -ms-transform: translate3d(0, 0, 0);
1168
+ transform: translate3d(0, 0, 0);
1169
+ -webkit-transition-duration: 0ms;
1170
+ transition-duration: 0ms;
1171
+ }
1172
+ .messagebar textarea {
1173
+ -webkit-appearance: none;
1174
+ -moz-appearance: none;
1175
+ -ms-appearance: none;
1176
+ appearance: none;
1177
+ -webkit-box-sizing: border-box;
1178
+ -moz-box-sizing: border-box;
1179
+ box-sizing: border-box;
1180
+ border: 1px solid #c8c8cd;
1181
+ background: #fff;
1182
+ border-radius: 5px;
1183
+ box-shadow: none;
1184
+ display: block;
1185
+ padding: 3px 8px 3px;
1186
+ margin: 0;
1187
+ width: 100%;
1188
+ height: 28px;
1189
+ color: #000;
1190
+ font-size: 17px;
1191
+ line-height: 20px;
1192
+ font-family: inherit;
1193
+ resize: none;
1194
+ -webkit-flex-shrink: 1;
1195
+ -ms-flex: 0 1 auto;
1196
+ flex-shrink: 1;
1197
+ }
1198
+ .messagebar .link {
1199
+ -ms-flex-item-align: flex-end;
1200
+ -webkit-align-self: flex-end;
1201
+ align-self: flex-end;
1202
+ }
1203
+ .messagebar .link.icon-only:first-child {
1204
+ margin-left: -6px;
1205
+ }
1206
+ .messagebar .link:not(.icon-only) + textarea {
1207
+ margin-left: 8px;
1208
+ }
1209
+ .messagebar textarea + .link {
1210
+ margin-left: 8px;
1211
+ }
1212
+ .messagebar .link {
1213
+ -webkit-flex-shrink: 0;
1214
+ -ms-flex: 0 0 auto;
1215
+ flex-shrink: 0;
1216
+ }
1217
+ .messagebar ~ .page-content {
1218
+ padding-bottom: 44px;
1219
+ }
1220
+ .page.no-toolbar .messagebar ~ .page-content {
1221
+ padding-bottom: 44px;
1222
+ }
1223
+ .hidden-toolbar .messagebar {
1224
+ -webkit-transform: translate3d(0, 0, 0);
1225
+ -ms-transform: translate3d(0, 0, 0);
1226
+ transform: translate3d(0, 0, 0);
1227
+ -webkit-transition-duration: 0ms;
1228
+ transition-duration: 0ms;
1229
+ }
850
1230
  /* === Icons === */
851
1231
  i.icon {
852
1232
  display: inline-block;
@@ -857,35 +1237,20 @@ i.icon {
857
1237
  font-style: normal;
858
1238
  position: relative;
859
1239
  }
860
- i.icon.icon-back-blue {
1240
+ i.icon.icon-back {
861
1241
  width: 12px;
862
1242
  height: 20px;
863
1243
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23007aff'/></svg>");
864
1244
  }
865
- i.icon.icon-back-white {
866
- width: 12px;
867
- height: 20px;
868
- background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23fff'/></svg>");
869
- }
870
- i.icon.icon-back-black {
871
- width: 12px;
872
- height: 20px;
873
- background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23000'/></svg>");
874
- }
875
- i.icon.icon-bars-blue {
876
- width: 21px;
877
- height: 13px;
878
- background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>");
879
- }
880
- i.icon.icon-bars-white {
1245
+ i.icon.icon-bars {
881
1246
  width: 21px;
882
1247
  height: 13px;
883
- background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23fff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>");
1248
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%23007aff' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
884
1249
  }
885
- i.icon.icon-bars-black {
886
- width: 21px;
887
- height: 13px;
888
- background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23000'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>");
1250
+ i.icon.icon-camera {
1251
+ width: 25px;
1252
+ height: 20px;
1253
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 20'><path fill='%238C8D92' d='M13.3,5.5c-2.7,0-5,2.2-5,5s2.2,5,5,5c2.7,0,5-2.2,5-5S16,5.5,13.3,5.5z'/><path fill='%238C8D92' d='M22.8,1.8h-3.3c-0.2-1.3-1-1.8-2-1.8H8.1c-1,0-1.8,0.4-2,1.8H2.8C1.4,1.8,0,2.8,0,4.2v12.6 c0,1.4,1.4,2.5,2.8,2.5h20c1.4,0,2.2-1.1,2.2-2.5V4.2C25,2.8,24.2,1.8,22.8,1.8z M3.5,6.4C2.6,6.4,2,5.8,2,5c0-0.8,0.7-1.5,1.5-1.5 S5,4.1,5,5C5,5.8,4.3,6.4,3.5,6.4z M13.3,16.8c-3.5,0-6.3-2.7-6.3-6.2c0-3.3,2.5-6.2,5.7-6.2h1.2c3.2,0,5.7,2.9,5.7,6.2 C19.6,14.1,16.7,16.8,13.3,16.8z'/></svg>");
889
1254
  }
890
1255
  i.icon.icon-f7 {
891
1256
  width: 29px;
@@ -942,29 +1307,36 @@ i.icon.icon-form-url {
942
1307
  height: 29px;
943
1308
  background-image: url("../assets/i-form-url.png");
944
1309
  }
945
- .badge {
1310
+ i.icon.icon-next,
1311
+ i.icon.icon-prev {
1312
+ width: 15px;
1313
+ height: 15px;
1314
+ }
1315
+ i.icon.icon-next {
1316
+ background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
1317
+ }
1318
+ i.icon.icon-prev {
1319
+ background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
1320
+ }
1321
+ i.icon.icon-plus {
1322
+ width: 25px;
1323
+ height: 25px;
1324
+ font-size: 31px;
1325
+ line-height: 20px;
1326
+ text-align: center;
1327
+ font-weight: 100;
1328
+ }
1329
+ .badge {
946
1330
  font-size: 13px;
947
1331
  display: inline-block;
948
- color: #000;
949
- background: #ddd;
1332
+ color: #fff;
1333
+ background: #8e8e93;
950
1334
  border-radius: 20px;
951
1335
  padding: 1px 7px;
952
1336
  -webkit-box-sizing: border-box;
953
1337
  -moz-box-sizing: border-box;
954
1338
  box-sizing: border-box;
955
1339
  }
956
- .badge.badge-red {
957
- background: #ff3b30;
958
- color: #fff;
959
- }
960
- .badge.badge-green {
961
- background: #4cd964;
962
- color: #fff;
963
- }
964
- .badge.badge-black {
965
- background: #000;
966
- color: #fff;
967
- }
968
1340
  .icon .badge {
969
1341
  position: absolute;
970
1342
  left: 100%;
@@ -989,7 +1361,11 @@ i.icon.icon-form-url {
989
1361
  text-transform: uppercase;
990
1362
  line-height: 1;
991
1363
  color: #6d6d72;
992
- margin: 35px 15px -25px;
1364
+ margin: 35px 15px 10px;
1365
+ }
1366
+ .content-block-title + .list-block,
1367
+ .content-block-title + .content-block {
1368
+ margin-top: 10px;
993
1369
  }
994
1370
  .content-block-inner {
995
1371
  background: #fff;
@@ -1000,6 +1376,30 @@ i.icon.icon-form-url {
1000
1376
  border-top: 1px solid #c8c7cc;
1001
1377
  color: #000;
1002
1378
  }
1379
+ html.retina.ios-gt-7 .content-block-inner {
1380
+ border-top-width: 0.5px;
1381
+ border-bottom-width: 0.5px;
1382
+ }
1383
+ .content-block.inset {
1384
+ margin-left: 15px;
1385
+ margin-right: 15px;
1386
+ border-radius: 7px;
1387
+ }
1388
+ .content-block.inset .content-block-inner {
1389
+ border: none;
1390
+ border-radius: 7px;
1391
+ }
1392
+ @media all and (min-width: 768px) {
1393
+ .content-block.tablet-inset {
1394
+ margin-left: 15px;
1395
+ margin-right: 15px;
1396
+ border-radius: 7px;
1397
+ }
1398
+ .content-block.tablet-inset .content-block-inner {
1399
+ border: none;
1400
+ border-radius: 7px;
1401
+ }
1402
+ }
1003
1403
  /* === Lists === */
1004
1404
  .list-block {
1005
1405
  margin: 35px 0;
@@ -1012,15 +1412,13 @@ i.icon.icon-form-url {
1012
1412
  margin: 0;
1013
1413
  border-top: 1px solid #c8c7cc;
1014
1414
  border-bottom: 1px solid #c8c7cc;
1415
+ position: relative;
1015
1416
  }
1016
1417
  .list-block ul ul {
1017
1418
  border-top: none;
1018
1419
  border-bottom: none;
1019
1420
  padding-left: 45px;
1020
1421
  }
1021
- .list-block ul ul li:last-child .item-inner {
1022
- border-bottom: 1px solid #c8c7cc;
1023
- }
1024
1422
  .list-block .align-top,
1025
1423
  .list-block .align-top .item-content,
1026
1424
  .list-block .align-top .item-inner {
@@ -1052,15 +1450,55 @@ i.icon.icon-form-url {
1052
1450
  .list-block.inset li:first-child:last-child > a {
1053
1451
  border-radius: 7px;
1054
1452
  }
1453
+ @media all and (min-width: 768px) {
1454
+ .list-block.tablet-inset {
1455
+ margin-left: 15px;
1456
+ margin-right: 15px;
1457
+ border-radius: 7px;
1458
+ }
1459
+ .list-block.tablet-inset .content-block-title {
1460
+ margin-left: 0;
1461
+ margin-right: 0;
1462
+ }
1463
+ .list-block.tablet-inset ul {
1464
+ border-radius: 7px;
1465
+ border-top: none;
1466
+ border-bottom: none;
1467
+ }
1468
+ .list-block.tablet-inset li:first-child > a {
1469
+ border-radius: 7px 7px 0 0;
1470
+ }
1471
+ .list-block.tablet-inset li:last-child > a {
1472
+ border-radius: 0 0 7px 7px;
1473
+ }
1474
+ .list-block.tablet-inset li:first-child:last-child > a {
1475
+ border-radius: 7px;
1476
+ }
1477
+ .list-block.tablet-inset .content-block-title {
1478
+ margin-left: 0;
1479
+ margin-right: 0;
1480
+ }
1481
+ .list-block.tablet-inset ul {
1482
+ border-radius: 7px;
1483
+ border-top: none;
1484
+ border-bottom: none;
1485
+ }
1486
+ .list-block.tablet-inset li:first-child > a {
1487
+ border-radius: 7px 7px 0 0;
1488
+ }
1489
+ .list-block.tablet-inset li:last-child > a {
1490
+ border-radius: 0 0 7px 7px;
1491
+ }
1492
+ .list-block.tablet-inset li:first-child:last-child > a {
1493
+ border-radius: 7px;
1494
+ }
1495
+ }
1055
1496
  .list-block li {
1056
1497
  -webkit-box-sizing: border-box;
1057
1498
  -moz-box-sizing: border-box;
1058
1499
  box-sizing: border-box;
1059
1500
  position: relative;
1060
1501
  }
1061
- .list-block li:last-child .item-inner {
1062
- border-bottom: 1px solid transparent;
1063
- }
1064
1502
  .list-block .item-media {
1065
1503
  display: -webkit-box;
1066
1504
  display: -ms-flexbox;
@@ -1069,7 +1507,10 @@ i.icon.icon-form-url {
1069
1507
  -webkit-flex-shrink: 0;
1070
1508
  -ms-flex: 0 0 auto;
1071
1509
  flex-shrink: 0;
1510
+ -webkit-box-lines: single;
1511
+ -moz-box-lines: single;
1072
1512
  -webkit-flex-wrap: nowrap;
1513
+ -ms-flex-wrap: none;
1073
1514
  -ms-flex-wrap: nowrap;
1074
1515
  flex-wrap: nowrap;
1075
1516
  -webkit-box-sizing: border-box;
@@ -1117,7 +1558,6 @@ i.icon.icon-form-url {
1117
1558
  align-items: center;
1118
1559
  }
1119
1560
  .list-block .item-title {
1120
- font-size: 17px;
1121
1561
  -webkit-flex-shrink: 1;
1122
1562
  -ms-flex: 0 1 auto;
1123
1563
  flex-shrink: 1;
@@ -1156,6 +1596,12 @@ i.icon.icon-form-url {
1156
1596
  display: flex;
1157
1597
  max-height: 28px;
1158
1598
  }
1599
+ .list-block .smart-select .item-after {
1600
+ max-width: 70%;
1601
+ overflow: hidden;
1602
+ text-overflow: ellipsis;
1603
+ position: relative;
1604
+ }
1159
1605
  .list-block .item-link {
1160
1606
  -webkit-transition-duration: 300ms;
1161
1607
  transition-duration: 300ms;
@@ -1165,18 +1611,19 @@ i.icon.icon-form-url {
1165
1611
  .list-block .item-link .item-inner {
1166
1612
  padding-right: 35px;
1167
1613
  background: no-repeat -webkit-calc(100% - 15px) center;
1168
- background: no-repeat -moz-calc(100% - 15px) center;
1169
1614
  background: no-repeat calc(100% - 15px) center;
1170
1615
  background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='%23c7c7cc'/></svg>");
1171
1616
  background-size: 10px 20px;
1172
1617
  }
1173
- .list-block .item-link:active {
1618
+ html:not(.watch-active-state) .list-block .item-link:active,
1619
+ .list-block .item-link.active-state {
1174
1620
  -webkit-transition-duration: 0ms;
1175
1621
  transition-duration: 0ms;
1176
1622
  background-color: #d9d9d9;
1177
1623
  }
1178
- .list-block .item-link:active .item-inner {
1179
- border-bottom: 1px solid transparent;
1624
+ html:not(.watch-active-state) .list-block .item-link:active .item-inner,
1625
+ .list-block .item-link.active-state .item-inner {
1626
+ border-bottom-color: transparent;
1180
1627
  }
1181
1628
  .list-block .item-link.list-button {
1182
1629
  padding: 0 15px;
@@ -1186,12 +1633,6 @@ i.icon.icon-form-url {
1186
1633
  border-bottom: 1px solid #c8c7cc;
1187
1634
  line-height: 43px;
1188
1635
  }
1189
- .list-block .item-link.list-button.button-red {
1190
- color: #fc3e39;
1191
- }
1192
- .list-block li:last-child .list-button {
1193
- border-bottom: none;
1194
- }
1195
1636
  .list-block .item-content {
1196
1637
  -webkit-box-sizing: border-box;
1197
1638
  -moz-box-sizing: border-box;
@@ -1217,8 +1658,12 @@ i.icon.icon-form-url {
1217
1658
  font-size: 14px;
1218
1659
  color: #8f8f94;
1219
1660
  }
1220
- .list-block .swipeout.deleting {
1661
+ .list-block .swipeout {
1221
1662
  overflow: hidden;
1663
+ -webkit-transform-style: preserve-3d;
1664
+ transform-style: preserve-3d;
1665
+ }
1666
+ .list-block .swipeout.deleting {
1222
1667
  -webkit-transition-duration: 300ms;
1223
1668
  transition-duration: 300ms;
1224
1669
  }
@@ -1227,41 +1672,36 @@ i.icon.icon-form-url {
1227
1672
  -ms-transform: translate3d(-100%, 0, 0);
1228
1673
  transform: translate3d(-100%, 0, 0);
1229
1674
  }
1230
- .list-block .swipeout.transitioning .swipeout-content {
1231
- -webkit-transition-duration: 300ms;
1232
- transition-duration: 300ms;
1675
+ .list-block .swipeout.transitioning .swipeout-content,
1676
+ .list-block .swipeout.transitioning .swipeout-actions-right a,
1677
+ .list-block .swipeout.transitioning .swipeout-actions-left a,
1678
+ .list-block .swipeout.transitioning .swipeout-overswipe {
1679
+ -webkit-transition: 300ms;
1680
+ transition: 300ms;
1233
1681
  }
1234
1682
  .list-block .swipeout-content {
1235
1683
  position: relative;
1236
1684
  z-index: 10;
1237
- background: #fff;
1238
- }
1239
- .list-block .swipeout-actions {
1240
- border-bottom: 1px solid #c8c7cc;
1241
- position: absolute;
1242
- z-index: 0;
1243
- right: 0;
1244
- top: 0;
1245
- width: 100%;
1246
- height: 100%;
1247
- -webkit-box-sizing: border-box;
1248
- -moz-box-sizing: border-box;
1249
- box-sizing: border-box;
1250
1685
  }
1251
- .list-block li:last-child .swipeout-actions {
1252
- border-bottom: none;
1686
+ .list-block .swipeout-overswipe {
1687
+ -webkit-transition: 200ms left;
1688
+ transition: 200ms left;
1253
1689
  }
1254
- .list-block .swipeout-actions-inner {
1690
+ .list-block .swipeout-actions-left,
1691
+ .list-block .swipeout-actions-right {
1255
1692
  position: absolute;
1256
- right: 0;
1257
1693
  top: 0;
1258
1694
  height: 100%;
1259
1695
  display: -webkit-box;
1260
1696
  display: -ms-flexbox;
1261
1697
  display: -webkit-flex;
1262
1698
  display: flex;
1699
+ -webkit-transform: translate3d(0%, 0, 0);
1700
+ -ms-transform: translate3d(0%, 0, 0);
1701
+ transform: translate3d(0%, 0, 0);
1263
1702
  }
1264
- .list-block .swipeout-actions-inner a {
1703
+ .list-block .swipeout-actions-left a,
1704
+ .list-block .swipeout-actions-right a {
1265
1705
  padding: 0 30px;
1266
1706
  color: #fff;
1267
1707
  background: #c7c7cc;
@@ -1273,9 +1713,42 @@ i.icon.icon-form-url {
1273
1713
  -ms-flex-align: center;
1274
1714
  -webkit-align-items: center;
1275
1715
  align-items: center;
1716
+ position: relative;
1717
+ left: 0;
1718
+ }
1719
+ .list-block .swipeout-actions-left a:after,
1720
+ .list-block .swipeout-actions-right a:after {
1721
+ content: '';
1722
+ position: absolute;
1723
+ top: 0;
1724
+ width: 600%;
1725
+ height: 100%;
1726
+ background: inherit;
1727
+ z-index: -1;
1728
+ }
1729
+ .list-block .swipeout-actions-left a.swipeout-delete,
1730
+ .list-block .swipeout-actions-right a.swipeout-delete {
1731
+ background: #ff3b30;
1732
+ }
1733
+ .list-block .swipeout-actions-right {
1734
+ right: 0%;
1735
+ -webkit-transform: translate3d(100%, 0, 0);
1736
+ -ms-transform: translate3d(100%, 0, 0);
1737
+ transform: translate3d(100%, 0, 0);
1738
+ }
1739
+ .list-block .swipeout-actions-right a:after {
1740
+ left: 100%;
1741
+ margin-left: -1px;
1742
+ }
1743
+ .list-block .swipeout-actions-left {
1744
+ left: 0%;
1745
+ -webkit-transform: translate3d(-100%, 0, 0);
1746
+ -ms-transform: translate3d(-100%, 0, 0);
1747
+ transform: translate3d(-100%, 0, 0);
1276
1748
  }
1277
- .list-block .swipeout-actions-inner a.swipeout-delete {
1278
- background: #fc3e39;
1749
+ .list-block .swipeout-actions-left a:after {
1750
+ right: 100%;
1751
+ margin-right: -1px;
1279
1752
  }
1280
1753
  .list-block .item-subtitle {
1281
1754
  font-size: 15px;
@@ -1368,6 +1841,79 @@ i.icon.icon-form-url {
1368
1841
  margin-top: 0;
1369
1842
  border-top: none;
1370
1843
  }
1844
+ .list-block .sortable-handler {
1845
+ position: absolute;
1846
+ right: 0;
1847
+ top: 0;
1848
+ height: -webkit-calc(100% - 1px);
1849
+ height: calc(100% - 1px);
1850
+ z-index: 10;
1851
+ background-repeat: no-repeat;
1852
+ background-size: 18px 12px;
1853
+ background-position: center;
1854
+ width: 35px;
1855
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='%23c7c7cc'><path d='M0,2V0h22v2H0z'/><path d='M0,7V5h22v2H0z'/><path d='M0,12v-2h22v2H0z'/></svg>");
1856
+ opacity: 0;
1857
+ visibility: hidden;
1858
+ cursor: pointer;
1859
+ -webkit-transition-duration: 300ms;
1860
+ transition-duration: 300ms;
1861
+ }
1862
+ .list-block.sortable .item-inner {
1863
+ -webkit-transition-duration: 300ms;
1864
+ transition-duration: 300ms;
1865
+ }
1866
+ .list-block.sortable-opened .sortable-handler {
1867
+ visibility: visible;
1868
+ opacity: 1;
1869
+ }
1870
+ .list-block.sortable-opened .item-inner,
1871
+ .list-block.sortable-opened .item-link .item-inner {
1872
+ padding-right: 35px;
1873
+ }
1874
+ .list-block.sortable-opened .item-link .item-inner,
1875
+ .list-block.sortable-opened .item-link .item-title-row {
1876
+ background-image: none;
1877
+ }
1878
+ .list-block.sortable-sorting li {
1879
+ -webkit-transition-duration: 300ms;
1880
+ transition-duration: 300ms;
1881
+ }
1882
+ .list-block li.sorting {
1883
+ z-index: 50;
1884
+ background: rgba(255, 255, 255, 0.8);
1885
+ box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
1886
+ -webkit-transition-duration: 0ms;
1887
+ transition-duration: 0ms;
1888
+ }
1889
+ .list-block li.sorting .item-inner {
1890
+ border-bottom: none;
1891
+ }
1892
+ .list-block li:last-child .list-button {
1893
+ border-bottom: none;
1894
+ }
1895
+ .list-block li:last-child .item-inner,
1896
+ .list-block li:last-child li:last-child .item-inner {
1897
+ border-bottom: none;
1898
+ }
1899
+ .list-block li li:last-child .item-inner,
1900
+ .list-block li:last-child li .item-inner {
1901
+ border-bottom: 1px solid #c8c7cc;
1902
+ }
1903
+ html.retina.ios-gt-7 .list-block ul {
1904
+ border-top-width: 0.5px;
1905
+ border-bottom-width: 0.5px;
1906
+ }
1907
+ html.retina.ios-gt-7 .list-block li:not(:last-child) .item-inner {
1908
+ border-bottom-width: 0.5px;
1909
+ }
1910
+ html.retina.ios-gt-7 .item-divider {
1911
+ border-top-width: 0.5px;
1912
+ margin-top: -0.5px;
1913
+ }
1914
+ html.retina.ios-gt-7 .item-link.list-button {
1915
+ border-bottom-width: 0.5px;
1916
+ }
1371
1917
  /* === Contacts === */
1372
1918
  .contacts-content {
1373
1919
  background: #fff;
@@ -1396,6 +1942,8 @@ i.icon.icon-form-url {
1396
1942
  .list-block input[type="tel"],
1397
1943
  .list-block input[type="url"],
1398
1944
  .list-block input[type="date"],
1945
+ .list-block input[type="datetime-local"],
1946
+ .list-block input[type="number"],
1399
1947
  .list-block select,
1400
1948
  .list-block textarea {
1401
1949
  -webkit-appearance: none;
@@ -1419,7 +1967,8 @@ i.icon.icon-form-url {
1419
1967
  font-size: 17px;
1420
1968
  font-family: inherit;
1421
1969
  }
1422
- .list-block input[type="date"] {
1970
+ .list-block input[type="date"],
1971
+ .list-block input[type="datetime-local"] {
1423
1972
  line-height: 44px;
1424
1973
  }
1425
1974
  .list-block select {
@@ -1434,8 +1983,9 @@ i.icon.icon-form-url {
1434
1983
  .list-block textarea {
1435
1984
  height: 100px;
1436
1985
  resize: none;
1437
- line-height: 1.5;
1438
- padding-top: 10px;
1986
+ line-height: 1.4;
1987
+ padding-top: 8px;
1988
+ padding-bottom: 7px;
1439
1989
  }
1440
1990
  .label-switch {
1441
1991
  display: inline-block;
@@ -1452,7 +2002,7 @@ i.icon.icon-form-url {
1452
2002
  -webkit-align-self: center;
1453
2003
  align-self: center;
1454
2004
  }
1455
- .label-switch input[type="checkbox"] {
2005
+ .label-switch .checkbox {
1456
2006
  width: 52px;
1457
2007
  border-radius: 16px;
1458
2008
  -webkit-box-sizing: border-box;
@@ -1473,7 +2023,7 @@ i.icon.icon-form-url {
1473
2023
  -webkit-transition-duration: 300ms;
1474
2024
  transition-duration: 300ms;
1475
2025
  }
1476
- .label-switch input[type="checkbox"]:before {
2026
+ .label-switch .checkbox:before {
1477
2027
  content: ' ';
1478
2028
  position: absolute;
1479
2029
  left: 2px;
@@ -1492,7 +2042,7 @@ i.icon.icon-form-url {
1492
2042
  -ms-transform: scale(1);
1493
2043
  transform: scale(1);
1494
2044
  }
1495
- .label-switch input[type="checkbox"]:after {
2045
+ .label-switch .checkbox:after {
1496
2046
  content: ' ';
1497
2047
  height: 28px;
1498
2048
  width: 28px;
@@ -1504,24 +2054,36 @@ i.icon.icon-form-url {
1504
2054
  left: 2px;
1505
2055
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
1506
2056
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
1507
- -webkit-transform: translate3d(0, 0, 0);
1508
- -ms-transform: translate3d(0, 0, 0);
1509
- transform: translate3d(0, 0, 0);
2057
+ -webkit-transform: translateX(0px);
2058
+ -ms-transform: translateX(0px);
2059
+ transform: translateX(0px);
1510
2060
  -webkit-transition-duration: 300ms;
1511
2061
  transition-duration: 300ms;
1512
2062
  }
1513
- .label-switch input[type="checkbox"]:checked {
2063
+ .label-switch input[type="checkbox"] {
2064
+ display: none;
2065
+ }
2066
+ .label-switch input[type="checkbox"]:checked + .checkbox {
1514
2067
  background: #4cd964;
1515
2068
  }
1516
- .label-switch input[type="checkbox"]:checked:before {
2069
+ .label-switch input[type="checkbox"]:checked + .checkbox:before {
1517
2070
  -webkit-transform: scale(0);
1518
2071
  -ms-transform: scale(0);
1519
2072
  transform: scale(0);
1520
2073
  }
1521
- .label-switch input[type="checkbox"]:checked:after {
1522
- -webkit-transform: translate3d(20px, 0, 0);
1523
- -ms-transform: translate3d(20px, 0, 0);
1524
- transform: translate3d(20px, 0, 0);
2074
+ .label-switch input[type="checkbox"]:checked + .checkbox:after {
2075
+ -webkit-transform: translateX(22px);
2076
+ -ms-transform: translateX(22px);
2077
+ transform: translateX(22px);
2078
+ }
2079
+ html.android .label-switch input[type="checkbox"] + .checkbox {
2080
+ -webkit-transition-duration: 0;
2081
+ transition-duration: 0;
2082
+ }
2083
+ html.android .label-switch input[type="checkbox"] + .checkbox:after,
2084
+ html.android .label-switch input[type="checkbox"] + .checkbox:before {
2085
+ -webkit-transition-duration: 0;
2086
+ transition-duration: 0;
1525
2087
  }
1526
2088
  .button {
1527
2089
  border: 1px solid #007aff;
@@ -1534,6 +2096,10 @@ i.icon.icon-form-url {
1534
2096
  -webkit-box-sizing: border-box;
1535
2097
  -moz-box-sizing: border-box;
1536
2098
  box-sizing: border-box;
2099
+ -webkit-appearance: none;
2100
+ -moz-appearance: none;
2101
+ -ms-appearance: none;
2102
+ appearance: none;
1537
2103
  padding: 0 10px;
1538
2104
  margin: 0;
1539
2105
  height: 29px;
@@ -1549,7 +2115,8 @@ input[type="submit"].button,
1549
2115
  input[type="button"].button {
1550
2116
  width: 100%;
1551
2117
  }
1552
- .button:active {
2118
+ html:not(.watch-active-state) .button:active,
2119
+ .button.active-state {
1553
2120
  background: rgba(0, 122, 255, 0.15);
1554
2121
  }
1555
2122
  .button.button-round {
@@ -1564,21 +2131,14 @@ input[type="button"].button {
1564
2131
  height: 44px;
1565
2132
  line-height: 42px;
1566
2133
  }
1567
- .button.button-submit,
1568
- .button.button-cancel {
2134
+ .button.button-fill {
1569
2135
  color: #fff;
2136
+ background: #007aff;
2137
+ border: none;
1570
2138
  }
1571
- .button.button-submit:active,
1572
- .button.button-cancel:active {
1573
- opacity: 0.6;
1574
- }
1575
- .button.button-submit {
1576
- border-color: #4cd964;
1577
- background: #4cd964;
1578
- }
1579
- .button.button-cancel {
1580
- border-color: #ff3b30;
1581
- background: #ff3b30;
2139
+ html:not(.watch-active-state) .button.button-fill:active,
2140
+ .button.button-fill.active-state {
2141
+ opacity: 0.8;
1582
2142
  }
1583
2143
  .buttons-row {
1584
2144
  -ms-flex-item-align: center;
@@ -1588,7 +2148,10 @@ input[type="button"].button {
1588
2148
  display: -ms-flexbox;
1589
2149
  display: -webkit-flex;
1590
2150
  display: flex;
2151
+ -webkit-box-lines: single;
2152
+ -moz-box-lines: single;
1591
2153
  -webkit-flex-wrap: nowrap;
2154
+ -ms-flex-wrap: none;
1592
2155
  -ms-flex-wrap: nowrap;
1593
2156
  flex-wrap: nowrap;
1594
2157
  }
@@ -1690,35 +2253,40 @@ label.label-checkbox {
1690
2253
  cursor: pointer;
1691
2254
  }
1692
2255
  label.label-checkbox i.icon-form-checkbox {
1693
- width: 29px;
1694
- height: 29px;
1695
- position: relative;
1696
- }
1697
- label.label-checkbox i.icon-form-checkbox:after {
1698
- content: ' ';
1699
- position: absolute;
1700
- left: 50%;
1701
- margin-left: -11px;
1702
- top: 50%;
1703
- margin-top: -11px;
1704
2256
  width: 22px;
1705
2257
  height: 22px;
2258
+ position: relative;
1706
2259
  border-radius: 22px;
1707
2260
  border: 1px solid #c7c7cc;
1708
2261
  -webkit-box-sizing: border-box;
1709
2262
  -moz-box-sizing: border-box;
1710
2263
  box-sizing: border-box;
1711
2264
  }
2265
+ label.label-checkbox i.icon-form-checkbox:after {
2266
+ content: ' ';
2267
+ position: absolute;
2268
+ left: 50%;
2269
+ margin-left: -6px;
2270
+ top: 50%;
2271
+ margin-top: -4px;
2272
+ width: 12px;
2273
+ height: 9px;
2274
+ }
1712
2275
  label.label-checkbox input[type="checkbox"],
1713
2276
  label.label-checkbox input[type="radio"] {
1714
2277
  display: none;
1715
2278
  }
2279
+ label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
2280
+ label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
2281
+ border: none;
2282
+ background-color: #007aff;
2283
+ }
1716
2284
  label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox:after,
1717
2285
  label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox:after {
1718
- border: none;
1719
- background: #007aff url("../assets/i-form-checkbox-white.png") no-repeat center;
1720
- -webkit-background-size: auto 9px;
1721
- background-size: auto 9px;
2286
+ background: no-repeat center;
2287
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 9' xml:space='preserve'><polygon fill='%23ffffff' points='12,0.7 11.3,0 3.9,7.4 0.7,4.2 0,4.9 3.9,8.8 3.9,8.8 3.9,8.8 '/></svg>");
2288
+ -webkit-background-size: 12px 9px;
2289
+ background-size: 12px 9px;
1722
2290
  }
1723
2291
  label.label-radio {
1724
2292
  cursor: pointer;
@@ -1733,52 +2301,125 @@ label.label-radio input[type="radio"] ~ .item-inner {
1733
2301
  }
1734
2302
  label.label-radio input[type="checkbox"]:checked ~ .item-inner,
1735
2303
  label.label-radio input[type="radio"]:checked ~ .item-inner {
1736
- background: url("../assets/i-form-radio-blue.png") no-repeat center;
2304
+ background: no-repeat center;
2305
+ background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%23007aff' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
2306
+ background-position: 90% center;
1737
2307
  background-position: -webkit-calc(100% - 15px) center;
1738
- background-position: -moz-calc(100% - 15px) center;
1739
- background-position: -ms-calc(100% - 15px) center;
1740
2308
  background-position: calc(100% - 15px) center;
1741
- -webkit-background-size: auto 10px;
1742
- background-size: auto 10px;
2309
+ -webkit-background-size: 13px 10px;
2310
+ background-size: 13px 10px;
1743
2311
  }
1744
2312
  label.label-checkbox,
1745
2313
  label.label-radio {
1746
2314
  -webkit-transition-duration: 300ms;
1747
2315
  transition-duration: 300ms;
1748
2316
  }
1749
- label.label-checkbox:active,
1750
- label.label-radio:active {
2317
+ html:not(.watch-active-state) label.label-checkbox:active,
2318
+ html:not(.watch-active-state) label.label-radio:active,
2319
+ label.label-checkbox.active-state,
2320
+ label.label-radio.active-state {
1751
2321
  -webkit-transition-duration: 0ms;
1752
2322
  transition-duration: 0ms;
1753
2323
  background-color: #d9d9d9;
1754
2324
  }
1755
- label.label-checkbox:active .item-inner,
1756
- label.label-radio:active .item-inner {
1757
- border-bottom: 1px solid transparent;
2325
+ html:not(.watch-active-state) label.label-checkbox:active .item-inner,
2326
+ html:not(.watch-active-state) label.label-radio:active .item-inner,
2327
+ label.label-checkbox.active-state .item-inner,
2328
+ label.label-radio.active-state .item-inner {
2329
+ border-bottom-color: transparent;
1758
2330
  }
1759
2331
  .smart-select select {
1760
2332
  display: none;
1761
2333
  }
2334
+ /* === Accordion === */
2335
+ .list-block .accordion-item-toggle {
2336
+ cursor: pointer;
2337
+ -webkit-transition-duration: 300ms;
2338
+ transition-duration: 300ms;
2339
+ }
2340
+ .list-block .accordion-item-toggle .item-inner {
2341
+ padding-right: 35px;
2342
+ background: no-repeat -webkit-calc(100% - 15px) center;
2343
+ background: no-repeat calc(100% - 15px) center;
2344
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='%23c7c7cc'/></svg>");
2345
+ background-size: 10px 20px;
2346
+ }
2347
+ html:not(.watch-active-state) .list-block .accordion-item-toggle:active,
2348
+ .list-block .accordion-item-toggle.active-state {
2349
+ -webkit-transition-duration: 0ms;
2350
+ transition-duration: 0ms;
2351
+ background-color: #d9d9d9;
2352
+ }
2353
+ html:not(.watch-active-state) .list-block .accordion-item-toggle:active > .item-inner,
2354
+ .list-block .accordion-item-toggle.active-state > .item-inner {
2355
+ border-bottom-color: transparent;
2356
+ }
2357
+ .list-block .accordion-item-toggle .item-inner,
2358
+ .list-block .accordion-item > .item-link .item-inner {
2359
+ -webkit-transition-duration: 300ms;
2360
+ transition-duration: 300ms;
2361
+ -webkit-transition-property: background-color, border-color;
2362
+ transition-property: background-color, border-color;
2363
+ }
2364
+ .list-block .accordion-item-expanded .accordion-toggle .item-inner,
2365
+ .list-block .accordion-item-expanded > .item-link .item-inner {
2366
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' transform='translate(115, 30) rotate(90)' fill='%23c7c7cc'/></svg>");
2367
+ background-size: 20px 20px;
2368
+ border-bottom-color: transparent;
2369
+ }
2370
+ .list-block .accordion-item .content-block,
2371
+ .list-block .accordion-item .list-block {
2372
+ margin-top: 0;
2373
+ margin-bottom: 0;
2374
+ }
2375
+ .list-block .accordion-item ul {
2376
+ padding-left: 0;
2377
+ }
2378
+ .accordion-item-content {
2379
+ position: relative;
2380
+ overflow: hidden;
2381
+ height: 0;
2382
+ font-size: 14px;
2383
+ -webkit-transition-duration: 300ms;
2384
+ transition-duration: 300ms;
2385
+ -webkit-transform: translate3d(0, 0, 0);
2386
+ -ms-transform: translate3d(0, 0, 0);
2387
+ transform: translate3d(0, 0, 0);
2388
+ }
2389
+ .accordion-item-expanded .accordion-item-content {
2390
+ height: auto;
2391
+ }
1762
2392
  /* === Modals === */
1763
2393
  .modal-overlay,
1764
- .preloader-indicator-overlay {
2394
+ .preloader-indicator-overlay,
2395
+ .popup-overlay {
1765
2396
  position: absolute;
1766
2397
  left: 0;
1767
2398
  top: 0;
1768
2399
  width: 100%;
1769
2400
  height: 100%;
1770
2401
  background: rgba(0, 0, 0, 0.4);
1771
- z-index: 10000;
2402
+ z-index: 10600;
1772
2403
  visibility: hidden;
1773
2404
  opacity: 0;
1774
2405
  -webkit-transition-duration: 400ms;
1775
2406
  transition-duration: 400ms;
1776
2407
  }
1777
2408
  .modal-overlay.modal-overlay-visible,
1778
- .preloader-indicator-overlay.modal-overlay-visible {
2409
+ .preloader-indicator-overlay.modal-overlay-visible,
2410
+ .popup-overlay.modal-overlay-visible {
1779
2411
  visibility: visible;
1780
2412
  opacity: 1;
1781
2413
  }
2414
+ html.ios .modal-overlay.modal-overlay-visible,
2415
+ html.ios .preloader-indicator-overlay.modal-overlay-visible,
2416
+ html.ios .popup-overlay.modal-overlay-visible {
2417
+ overflow: auto;
2418
+ -webkit-overflow-scrolling: touch;
2419
+ }
2420
+ .popup-overlay {
2421
+ z-index: 10200;
2422
+ }
1782
2423
  .modal {
1783
2424
  width: 270px;
1784
2425
  position: absolute;
@@ -1798,6 +2439,7 @@ label.label-radio:active .item-inner {
1798
2439
  -ms-transition-property: -ms-transform, opacity;
1799
2440
  -o-transition-property: -o-transform, opacity;
1800
2441
  transition-property: transform, opacity;
2442
+ color: #000;
1801
2443
  }
1802
2444
  .modal.modal-in {
1803
2445
  opacity: 1;
@@ -1877,7 +2519,8 @@ label.label-radio:active .item-inner {
1877
2519
  .modal-button.modal-button-bold {
1878
2520
  font-weight: 500;
1879
2521
  }
1880
- .modal-button:active {
2522
+ html:not(.watch-active-state) .modal-button:active,
2523
+ .modal-button.active-state {
1881
2524
  background: #d4d4d4;
1882
2525
  }
1883
2526
  .modal-no-buttons .modal-inner {
@@ -1943,7 +2586,7 @@ label.label-radio:active .item-inner {
1943
2586
  }
1944
2587
  .actions-modal-button.actions-modal-button-red,
1945
2588
  .actions-modal-label.actions-modal-button-red {
1946
- color: #fc3e39;
2589
+ color: #ff3b30;
1947
2590
  }
1948
2591
  .actions-modal-button:first-child,
1949
2592
  .actions-modal-label:first-child {
@@ -1964,7 +2607,8 @@ label.label-radio:active .item-inner {
1964
2607
  font-size: 20px;
1965
2608
  color: #007aff;
1966
2609
  }
1967
- .actions-modal-button:active {
2610
+ html:not(.watch-active-state) .actions-modal-button:active,
2611
+ .actions-modal-button.active-state {
1968
2612
  background: #dcdcdc;
1969
2613
  }
1970
2614
  .actions-modal-label {
@@ -1986,7 +2630,7 @@ label.label-radio:active .item-inner {
1986
2630
  -webkit-align-items: center;
1987
2631
  align-items: center;
1988
2632
  }
1989
- input.modal-prompt-input {
2633
+ input.modal-text-input {
1990
2634
  -webkit-box-sizing: border-box;
1991
2635
  -moz-box-sizing: border-box;
1992
2636
  box-sizing: border-box;
@@ -2008,6 +2652,17 @@ input.modal-prompt-input {
2008
2652
  -ms-appearance: none;
2009
2653
  appearance: none;
2010
2654
  }
2655
+ input.modal-text-input + input.modal-text-input {
2656
+ margin-top: 5px;
2657
+ }
2658
+ input.modal-text-input.modal-text-input-double {
2659
+ border-radius: 5px 5px 0 0;
2660
+ }
2661
+ input.modal-text-input.modal-text-input-double + input.modal-text-input {
2662
+ margin-top: 0;
2663
+ border-top: 0;
2664
+ border-radius: 0 0 5px 5px;
2665
+ }
2011
2666
  .popover {
2012
2667
  width: 320px;
2013
2668
  background: rgba(255, 255, 255, 0.95);
@@ -2033,6 +2688,33 @@ input.modal-prompt-input {
2033
2688
  transition-duration: 300ms;
2034
2689
  opacity: 1;
2035
2690
  }
2691
+ .popover .list-block {
2692
+ margin: 0;
2693
+ }
2694
+ .popover .list-block ul {
2695
+ background: none;
2696
+ }
2697
+ .popover .list-block:first-child ul {
2698
+ border-top: none;
2699
+ border-radius: 7px 7px 0 0;
2700
+ }
2701
+ .popover .list-block:first-child li:first-child a {
2702
+ border-radius: 7px 7px 0 0;
2703
+ }
2704
+ .popover .list-block:last-child ul {
2705
+ border-bottom: none;
2706
+ border-radius: 0 0 7px 7px;
2707
+ }
2708
+ .popover .list-block:last-child li:last-child a {
2709
+ border-radius: 0 0 7px 7px;
2710
+ }
2711
+ .popover .list-block:first-child:last-child li:first-child:last-child a,
2712
+ .popover .list-block:first-child:last-child ul:first-child:last-child {
2713
+ border-radius: 7px;
2714
+ }
2715
+ .popover .list-block + .list-block {
2716
+ margin-top: 35px;
2717
+ }
2036
2718
  .popover-angle {
2037
2719
  width: 26px;
2038
2720
  height: 26px;
@@ -2089,29 +2771,31 @@ input.modal-prompt-input {
2089
2771
  overflow: auto;
2090
2772
  -webkit-overflow-scrolling: touch;
2091
2773
  }
2092
- .popover-inner .list-block {
2093
- margin: 0;
2094
- }
2095
- .popover-inner .list-block ul {
2096
- border: none;
2097
- background: none;
2098
- }
2099
- .popover-inner .list-block li:first-child a {
2100
- border-radius: 7px 7px 0 0;
2774
+ .actions-popover .list-block + .list-block {
2775
+ margin-top: 20px;
2101
2776
  }
2102
- .popover-inner .list-block li:last-child a {
2103
- border-radius: 0 0 7px 7px;
2104
- }
2105
- .popover-inner .list-block li:first-child:last-child a {
2106
- border-radius: 7px;
2777
+ .actions-popover .list-block ul {
2778
+ background: #fff;
2107
2779
  }
2108
- .popup {
2780
+ .actions-popover-label {
2781
+ padding: 8px 10px;
2782
+ color: #8a8a8a;
2783
+ font-size: 13px;
2784
+ line-height: 1.3;
2785
+ text-align: center;
2786
+ border-bottom: 1px solid #d2d2d6;
2787
+ }
2788
+ .actions-popover-label:last-child {
2789
+ border-bottom: none;
2790
+ }
2791
+ .popup,
2792
+ .login-screen {
2109
2793
  position: absolute;
2110
2794
  left: 0;
2111
2795
  top: 0;
2112
2796
  width: 100%;
2113
2797
  height: 100%;
2114
- z-index: 11000;
2798
+ z-index: 10400;
2115
2799
  background: #fff;
2116
2800
  -webkit-box-sizing: border-box;
2117
2801
  -moz-box-sizing: border-box;
@@ -2129,22 +2813,30 @@ input.modal-prompt-input {
2129
2813
  transform: translate3d(0, 100%, 0);
2130
2814
  }
2131
2815
  .popup.modal-in,
2132
- .popup.modal-out {
2816
+ .login-screen.modal-in,
2817
+ .popup.modal-out,
2818
+ .login-screen.modal-out {
2133
2819
  -webkit-transition-duration: 400ms;
2134
2820
  transition-duration: 400ms;
2135
2821
  }
2136
- .popup.modal-in {
2822
+ .popup.modal-in,
2823
+ .login-screen.modal-in {
2137
2824
  -webkit-transform: translate3d(0, 0, 0);
2138
2825
  -ms-transform: translate3d(0, 0, 0);
2139
2826
  transform: translate3d(0, 0, 0);
2140
2827
  }
2141
- .popup.modal-out {
2828
+ .popup.modal-out,
2829
+ .login-screen.modal-out {
2142
2830
  -webkit-transform: translate3d(0, 100%, 0);
2143
2831
  -ms-transform: translate3d(0, 100%, 0);
2144
2832
  transform: translate3d(0, 100%, 0);
2145
2833
  }
2834
+ .login-screen.modal-in,
2835
+ .login-screen.modal-out {
2836
+ display: block;
2837
+ }
2146
2838
  @media all and (min-width: 630px) and (min-height: 630px) {
2147
- .popup {
2839
+ .popup:not(.tablet-fullscreen) {
2148
2840
  width: 630px;
2149
2841
  height: 630px;
2150
2842
  left: 50%;
@@ -2155,17 +2847,33 @@ input.modal-prompt-input {
2155
2847
  -ms-transform: translate3d(0, 1024px, 0);
2156
2848
  transform: translate3d(0, 1024px, 0);
2157
2849
  }
2158
- .popup.modal-in {
2850
+ .popup:not(.tablet-fullscreen).modal-in {
2159
2851
  -webkit-transform: translate3d(0, 0, 0);
2160
2852
  -ms-transform: translate3d(0, 0, 0);
2161
2853
  transform: translate3d(0, 0, 0);
2162
2854
  }
2163
- .popup.modal-out {
2855
+ .popup:not(.tablet-fullscreen).modal-out {
2164
2856
  -webkit-transform: translate3d(0, 1024px, 0);
2165
2857
  -ms-transform: translate3d(0, 1024px, 0);
2166
2858
  transform: translate3d(0, 1024px, 0);
2167
2859
  }
2168
2860
  }
2861
+ @media all and (max-width: 629px), (max-height: 629px) {
2862
+ html.with-statusbar-overlay .popup {
2863
+ height: -webkit-calc(100% - 20px);
2864
+ height: calc(100% - 20px);
2865
+ top: 20px;
2866
+ }
2867
+ html.with-statusbar-overlay .popup-overlay {
2868
+ z-index: 9800;
2869
+ }
2870
+ }
2871
+ html.with-statusbar-overlay .login-screen,
2872
+ html.with-statusbar-overlay .popup.tablet-fullscreen {
2873
+ height: -webkit-calc(100% - 20px);
2874
+ height: calc(100% - 20px);
2875
+ top: 20px;
2876
+ }
2169
2877
  .modal .preloader {
2170
2878
  width: 34px;
2171
2879
  height: 34px;
@@ -2191,6 +2899,22 @@ input.modal-prompt-input {
2191
2899
  width: 34px;
2192
2900
  height: 34px;
2193
2901
  }
2902
+ html.retina.ios-gt-7 .modal-inner {
2903
+ border-bottom-width: 0.5px;
2904
+ }
2905
+ html.retina.ios-gt-7 .modal-button {
2906
+ border-right-width: 0.5px;
2907
+ }
2908
+ html.retina.ios-gt-7 .actions-modal-button,
2909
+ html.retina.ios-gt-7 .actions-modal-label {
2910
+ border-bottom-width: 0.5px;
2911
+ }
2912
+ html.retina.ios-gt-7 .actions-popover-label {
2913
+ border-bottom-width: 0.5px;
2914
+ }
2915
+ html.retina.ios-gt-7 input.modal-text-input {
2916
+ border-width: 0.5px;
2917
+ }
2194
2918
  /* === Panels === */
2195
2919
  .panel-overlay {
2196
2920
  position: absolute;
@@ -2298,6 +3022,28 @@ body.panel-closing .views {
2298
3022
  .tabs .tab.active {
2299
3023
  display: block;
2300
3024
  }
3025
+ .tabs-animated-wrap {
3026
+ position: relative;
3027
+ width: 100%;
3028
+ overflow: hidden;
3029
+ height: 100%;
3030
+ }
3031
+ .tabs-animated-wrap > .tabs {
3032
+ display: -webkit-box;
3033
+ display: -ms-flexbox;
3034
+ display: -webkit-flex;
3035
+ display: flex;
3036
+ height: 100%;
3037
+ -webkit-transition-duration: 300ms;
3038
+ transition-duration: 300ms;
3039
+ }
3040
+ .tabs-animated-wrap > .tabs > .tab {
3041
+ width: 100%;
3042
+ display: block;
3043
+ -webkit-flex-shrink: 0;
3044
+ -ms-flex: 0 0 auto;
3045
+ flex-shrink: 0;
3046
+ }
2301
3047
  /* === Messages === */
2302
3048
  .messages-content {
2303
3049
  background: #fff;
@@ -2328,16 +3074,34 @@ body.panel-closing .views {
2328
3074
  -webkit-box-sizing: border-box;
2329
3075
  -moz-box-sizing: border-box;
2330
3076
  box-sizing: border-box;
2331
- font-size: 17px;
2332
- line-height: 1.2;
2333
3077
  margin: 1px 10px 0;
3078
+ max-width: 70%;
3079
+ display: -webkit-box;
3080
+ display: -ms-flexbox;
3081
+ display: -webkit-flex;
3082
+ display: flex;
3083
+ -webkit-box-orient: vertical;
3084
+ -moz-box-orient: vertical;
3085
+ -ms-flex-direction: column;
3086
+ -webkit-flex-direction: column;
3087
+ flex-direction: column;
3088
+ }
3089
+ .message:first-child {
3090
+ margin-top: 10px;
3091
+ }
3092
+ .message .message-text {
3093
+ -webkit-box-sizing: border-box;
3094
+ -moz-box-sizing: border-box;
3095
+ box-sizing: border-box;
3096
+ border-radius: 16px;
2334
3097
  padding: 6px 16px 9px;
2335
3098
  min-width: 48px;
2336
3099
  min-height: 35px;
2337
- max-width: 60%;
2338
- border-radius: 16px;
3100
+ font-size: 17px;
3101
+ line-height: 1.2;
3102
+ word-break: break-word;
2339
3103
  }
2340
- .message.message-pic {
3104
+ .message.message-pic .message-text {
2341
3105
  padding: 0;
2342
3106
  background: none;
2343
3107
  }
@@ -2347,51 +3111,112 @@ body.panel-closing .views {
2347
3111
  max-width: 100%;
2348
3112
  border-radius: 16px;
2349
3113
  }
3114
+ .message-name {
3115
+ font-size: 12px;
3116
+ line-height: 1;
3117
+ color: #8e8e93;
3118
+ margin-bottom: 2px;
3119
+ margin-top: 7px;
3120
+ display: none;
3121
+ }
3122
+ .message-avatar {
3123
+ width: 29px;
3124
+ height: 29px;
3125
+ border-radius: 100%;
3126
+ margin-top: -29px;
3127
+ position: relative;
3128
+ top: 1px;
3129
+ background-size: cover;
3130
+ opacity: 0;
3131
+ -webkit-transition-duration: 400ms;
3132
+ transition-duration: 400ms;
3133
+ }
2350
3134
  .message-sent {
2351
- padding-right: 22px;
2352
3135
  -ms-flex-item-align: end;
2353
3136
  -webkit-align-self: flex-end;
2354
3137
  align-self: flex-end;
3138
+ -webkit-box-align: end;
3139
+ -ms-flex-align: end;
3140
+ -webkit-align-items: flex-end;
3141
+ align-items: flex-end;
3142
+ }
3143
+ .message-sent .message-name {
3144
+ margin-right: 16px;
3145
+ }
3146
+ .message-sent.message-with-avatar .message-text {
3147
+ margin-right: 29px;
3148
+ }
3149
+ .message-sent.message-with-avatar .message-name {
3150
+ margin-right: 45px;
3151
+ }
3152
+ .message-sent .message-text {
3153
+ padding-right: 22px;
2355
3154
  background-color: #00d449;
2356
3155
  color: white;
2357
3156
  margin-left: auto;
2358
- -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 55.75% 49.5% 43.25%;
3157
+ -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 49% 43%;
2359
3158
  }
2360
- .message-sent.message-last {
3159
+ .message-sent.message-last .message-text {
2361
3160
  border-radius: 16px 16px 0 16px;
2362
- margin-bottom: 8px;
2363
- -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 49.5% 55.75% 49.5% 43.25%;
3161
+ -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 49% 43%;
2364
3162
  }
2365
3163
  .message-sent.message-last.message-pic img {
2366
3164
  border-radius: 16px 16px 0 16px;
2367
3165
  }
2368
3166
  .message-received {
2369
- padding-left: 22px;
2370
3167
  -ms-flex-item-align: start;
2371
3168
  -webkit-align-self: flex-start;
2372
3169
  align-self: flex-start;
3170
+ -webkit-box-align: start;
3171
+ -ms-flex-align: start;
3172
+ -webkit-align-items: flex-start;
3173
+ align-items: flex-start;
3174
+ }
3175
+ .message-received .message-text {
3176
+ padding-left: 22px;
2373
3177
  background-color: #e5e5ea;
2374
3178
  color: #000;
2375
- -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 43.25% 49.5% 55.75%;
3179
+ -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 43% 49% 56%;
2376
3180
  }
2377
- .message-received.message-last {
2378
- margin-bottom: 8px;
3181
+ .message-received .message-name {
3182
+ margin-left: 16px;
3183
+ }
3184
+ .message-received.message-with-avatar .message-text {
3185
+ margin-left: 29px;
3186
+ }
3187
+ .message-received.message-with-avatar .message-name {
3188
+ margin-left: 45px;
3189
+ }
3190
+ .message-received.message-last .message-text {
2379
3191
  border-radius: 16px 16px 16px 0;
2380
- -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 49.5% 43.25% 49.5% 55.75%;
3192
+ -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 43% 49% 56%;
2381
3193
  }
2382
3194
  .message-received.message-last.message-pic img {
2383
3195
  border-radius: 16px 16px 16px 0;
2384
3196
  }
3197
+ .message-first .message-name {
3198
+ display: block;
3199
+ }
3200
+ .message-last {
3201
+ margin-bottom: 8px;
3202
+ }
3203
+ .message-last .message-avatar {
3204
+ opacity: 1;
3205
+ }
2385
3206
  .message-appear {
2386
- -webkit-animation: messageAppear 400ms;
2387
- animation: messageAppear 400ms;
3207
+ -webkit-animation: messageAppearFromBottom 400ms;
3208
+ animation: messageAppearFromBottom 400ms;
2388
3209
  }
2389
- html.ios-6 .message,
2390
- html.ios-6 .message.message-pic img {
3210
+ .new-messages-first .message-appear {
3211
+ -webkit-animation: messageAppearFromTop 400ms;
3212
+ animation: messageAppearFromTop 400ms;
3213
+ }
3214
+ html.retina.ios-6 .message,
3215
+ html.retina.ios-6 .message.message-pic img {
2391
3216
  -webkit-mask-box-image: none;
2392
3217
  border-radius: 16px;
2393
3218
  }
2394
- @-webkit-keyframes messageAppear {
3219
+ @-webkit-keyframes messageAppearFromBottom {
2395
3220
  from {
2396
3221
  -webkit-transform: translate3d(0, 100%, 0);
2397
3222
  }
@@ -2399,7 +3224,7 @@ html.ios-6 .message.message-pic img {
2399
3224
  -webkit-transform: translate3d(0, 0, 0);
2400
3225
  }
2401
3226
  }
2402
- @keyframes messageAppear {
3227
+ @keyframes messageAppearFromBottom {
2403
3228
  from {
2404
3229
  transform: translate3d(0, 100%, 0);
2405
3230
  }
@@ -2407,6 +3232,22 @@ html.ios-6 .message.message-pic img {
2407
3232
  transform: translate3d(0, 0, 0);
2408
3233
  }
2409
3234
  }
3235
+ @-webkit-keyframes messageAppearFromTop {
3236
+ from {
3237
+ -webkit-transform: translate3d(0, -100%, 0);
3238
+ }
3239
+ to {
3240
+ -webkit-transform: translate3d(0, 0, 0);
3241
+ }
3242
+ }
3243
+ @keyframes messageAppearFromTop {
3244
+ from {
3245
+ transform: translate3d(0, -100%, 0);
3246
+ }
3247
+ to {
3248
+ transform: translate3d(0, 0, 0);
3249
+ }
3250
+ }
2410
3251
  /* === Statusbar overlay === */
2411
3252
  html.with-statusbar-overlay body {
2412
3253
  padding-top: 20px;
@@ -2422,7 +3263,7 @@ html.with-statusbar-overlay body .panel {
2422
3263
  }
2423
3264
  .statusbar-overlay {
2424
3265
  background: #f7f7f8;
2425
- z-index: 9999;
3266
+ z-index: 10000;
2426
3267
  position: absolute;
2427
3268
  left: 0;
2428
3269
  top: 0;
@@ -2439,8 +3280,8 @@ html.with-statusbar-overlay body .panel {
2439
3280
  height: 20px;
2440
3281
  -webkit-transform-origin: 50%;
2441
3282
  transform-origin: 50%;
2442
- -webkit-animation: spin 1s step-end infinite;
2443
- animation: spin 1s step-end infinite;
3283
+ -webkit-animation: preloader-spin 1s step-end infinite;
3284
+ animation: preloader-spin 1s step-end infinite;
2444
3285
  }
2445
3286
  .preloader:after {
2446
3287
  display: block;
@@ -2455,7 +3296,7 @@ html.with-statusbar-overlay body .panel {
2455
3296
  .preloader-white:after {
2456
3297
  background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%23fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
2457
3298
  }
2458
- @-webkit-keyframes spin {
3299
+ @-webkit-keyframes preloader-spin {
2459
3300
  0% {
2460
3301
  -webkit-transform: rotate(0deg);
2461
3302
  }
@@ -2496,7 +3337,7 @@ html.with-statusbar-overlay body .panel {
2496
3337
  -webkit-transform: rotate(360deg);
2497
3338
  }
2498
3339
  }
2499
- @keyframes spin {
3340
+ @keyframes preloader-spin {
2500
3341
  0% {
2501
3342
  transform: rotate(0deg);
2502
3343
  }
@@ -2573,10 +3414,15 @@ html.with-statusbar-overlay body .panel {
2573
3414
  -webkit-transition-duration: 300ms;
2574
3415
  transition-duration: 300ms;
2575
3416
  }
2576
- .pull-to-refresh-content.transitioning {
3417
+ .pull-to-refresh-content.transitioning,
3418
+ .pull-to-refresh-content.refreshing {
2577
3419
  -webkit-transition-duration: 400ms;
2578
3420
  transition-duration: 400ms;
2579
3421
  }
3422
+ .pull-to-refresh-content:not(.refreshing) .preloader {
3423
+ -webkit-animation: none;
3424
+ animation: none;
3425
+ }
2580
3426
  .pull-to-refresh-content.refreshing {
2581
3427
  -webkit-transform: translate3d(0, 44px, 0);
2582
3428
  -ms-transform: translate3d(0, 44px, 0);
@@ -2595,3 +3441,1482 @@ html.with-statusbar-overlay body .panel {
2595
3441
  -ms-transform: rotate(180deg) translate3d(0, 0, 0);
2596
3442
  transform: rotate(180deg) translate3d(0, 0, 0);
2597
3443
  }
3444
+ /* === Slider === */
3445
+ .slider-container {
3446
+ position: relative;
3447
+ overflow: hidden;
3448
+ width: 100%;
3449
+ height: 100%;
3450
+ }
3451
+ .slider-wrapper {
3452
+ display: -webkit-box;
3453
+ display: -ms-flexbox;
3454
+ display: -webkit-flex;
3455
+ display: flex;
3456
+ width: 100%;
3457
+ height: 100%;
3458
+ position: relative;
3459
+ -webkit-transition-property: -webkit-transform;
3460
+ -moz-transition-property: -moz-transform;
3461
+ transition-property: transform;
3462
+ -webkit-transform: translate3d(0, 0, 0);
3463
+ -ms-transform: translate3d(0, 0, 0);
3464
+ transform: translate3d(0, 0, 0);
3465
+ }
3466
+ .slider-container-vertical > .slider-wrapper {
3467
+ -webkit-box-orient: vertical;
3468
+ -moz-box-orient: vertical;
3469
+ -ms-flex-direction: column;
3470
+ -webkit-flex-direction: column;
3471
+ flex-direction: column;
3472
+ }
3473
+ .slider-slide {
3474
+ -webkit-flex-shrink: 0;
3475
+ -ms-flex: 0 0 auto;
3476
+ flex-shrink: 0;
3477
+ width: 100%;
3478
+ height: 100%;
3479
+ }
3480
+ .slider-pagination {
3481
+ position: absolute;
3482
+ z-index: 10;
3483
+ -webkit-transform: translate3d(0, 0, 0);
3484
+ -ms-transform: translate3d(0, 0, 0);
3485
+ transform: translate3d(0, 0, 0);
3486
+ left: 0;
3487
+ bottom: 10px;
3488
+ width: 100%;
3489
+ text-align: center;
3490
+ -webkit-transition-duration: 300ms;
3491
+ transition-duration: 300ms;
3492
+ opacity: 1;
3493
+ -webkit-transition-property: opacity;
3494
+ -moz-transition-property: opacity;
3495
+ transition-property: opacity;
3496
+ }
3497
+ .slider-pagination.slider-pagination-hidden {
3498
+ opacity: 0;
3499
+ pointer-events: none;
3500
+ }
3501
+ .slider-container-vertical > .slider-pagination {
3502
+ right: 10px;
3503
+ left: auto;
3504
+ top: 50%;
3505
+ bottom: auto;
3506
+ width: auto;
3507
+ height: auto;
3508
+ -webkit-transform: translate3d(0, -50%, 0);
3509
+ -ms-transform: translate3d(0, -50%, 0);
3510
+ transform: translate3d(0, -50%, 0);
3511
+ }
3512
+ .slider-container-vertical > .slider-pagination .slider-pagination-bullet {
3513
+ display: block;
3514
+ margin: 5px 0;
3515
+ }
3516
+ .slider-pagination-bullet {
3517
+ width: 8px;
3518
+ height: 8px;
3519
+ display: inline-block;
3520
+ border-radius: 100%;
3521
+ background: #000;
3522
+ opacity: 0.2;
3523
+ margin: 0 5px;
3524
+ }
3525
+ .slider-pagination-active {
3526
+ opacity: 1;
3527
+ background: #007aff;
3528
+ }
3529
+ /* === Photo Browser === */
3530
+ .photo-browser {
3531
+ position: absolute;
3532
+ left: 0;
3533
+ top: 0;
3534
+ width: 100%;
3535
+ height: 100%;
3536
+ z-index: 10500;
3537
+ }
3538
+ body > .photo-browser {
3539
+ opacity: 0;
3540
+ display: none;
3541
+ -webkit-transform: translate3d(0, 0, 0);
3542
+ -ms-transform: translate3d(0, 0, 0);
3543
+ transform: translate3d(0, 0, 0);
3544
+ }
3545
+ body > .photo-browser.photo-browser-in {
3546
+ display: block;
3547
+ -webkit-animation: photoBrowserIn 400ms forwards;
3548
+ animation: photoBrowserIn 400ms forwards;
3549
+ }
3550
+ body > .photo-browser.photo-browser-out {
3551
+ display: block;
3552
+ -webkit-animation: photoBrowserOut 400ms forwards;
3553
+ animation: photoBrowserOut 400ms forwards;
3554
+ }
3555
+ html.with-statusbar-overlay body > .photo-browser {
3556
+ height: -webkit-calc(100% - 20px);
3557
+ height: calc(100% - 20px);
3558
+ top: 20px;
3559
+ }
3560
+ .popup > .photo-browser .navbar,
3561
+ body > .photo-browser .navbar,
3562
+ .popup > .photo-browser .toolbar,
3563
+ body > .photo-browser .toolbar {
3564
+ -webkit-transform: translate3d(0, 0, 0);
3565
+ -ms-transform: translate3d(0, 0, 0);
3566
+ transform: translate3d(0, 0, 0);
3567
+ }
3568
+ .photo-browser .page[data-page="photo-browser-slides"] {
3569
+ background: none;
3570
+ }
3571
+ .photo-browser-popup {
3572
+ background: none;
3573
+ }
3574
+ .photo-browser .navbar,
3575
+ .view[data-page="photo-browser-slides"] .navbar,
3576
+ .photo-browser .toolbar,
3577
+ .view[data-page="photo-browser-slides"] .toolbar {
3578
+ background: rgba(247, 247, 247, 0.95);
3579
+ -webkit-transition-duration: 400ms;
3580
+ transition-duration: 400ms;
3581
+ }
3582
+ .view[data-page="photo-browser-slides"] .page[data-page="photo-browser-slides"] .navbar,
3583
+ .view[data-page="photo-browser-slides"] .page[data-page="photo-browser-slides"] .toolbar {
3584
+ -webkit-transform: translate3d(0, 0, 0);
3585
+ -ms-transform: translate3d(0, 0, 0);
3586
+ transform: translate3d(0, 0, 0);
3587
+ }
3588
+ .photo-browser-exposed .navbar,
3589
+ .photo-browser-exposed .toolbar {
3590
+ opacity: 0;
3591
+ visibility: hidden;
3592
+ pointer-events: none;
3593
+ }
3594
+ .photo-browser-exposed .photo-browser-slider-container {
3595
+ background: #000;
3596
+ }
3597
+ .photo-browser-of {
3598
+ margin: 0 5px;
3599
+ }
3600
+ .photo-browser-captions {
3601
+ pointer-events: none;
3602
+ position: absolute;
3603
+ left: 0;
3604
+ width: 100%;
3605
+ bottom: 0;
3606
+ z-index: 10;
3607
+ opacity: 1;
3608
+ -webkit-transition-duration: 400ms;
3609
+ transition-duration: 400ms;
3610
+ }
3611
+ .photo-browser-captions.photo-browser-captions-exposed {
3612
+ opacity: 0;
3613
+ }
3614
+ .toolbar ~ .photo-browser-captions {
3615
+ bottom: 44px;
3616
+ -webkit-transform: translate3d(0, 0px, 0);
3617
+ -ms-transform: translate3d(0, 0px, 0);
3618
+ transform: translate3d(0, 0px, 0);
3619
+ }
3620
+ .photo-browser-exposed .toolbar ~ .photo-browser-captions {
3621
+ -webkit-transform: translate3d(0, 44px, 0);
3622
+ -ms-transform: translate3d(0, 44px, 0);
3623
+ transform: translate3d(0, 44px, 0);
3624
+ }
3625
+ .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
3626
+ -webkit-transform: translate3d(0, 0px, 0);
3627
+ -ms-transform: translate3d(0, 0px, 0);
3628
+ transform: translate3d(0, 0px, 0);
3629
+ }
3630
+ .photo-browser-caption {
3631
+ -webkit-box-sizing: border-box;
3632
+ -moz-box-sizing: border-box;
3633
+ box-sizing: border-box;
3634
+ -webkit-transition-duration: 300ms;
3635
+ transition-duration: 300ms;
3636
+ position: absolute;
3637
+ bottom: 0;
3638
+ left: 0;
3639
+ opacity: 0;
3640
+ padding: 4px 5px;
3641
+ width: 100%;
3642
+ text-align: center;
3643
+ color: #fff;
3644
+ background: rgba(0, 0, 0, 0.8);
3645
+ }
3646
+ .photo-browser-caption:empty {
3647
+ display: none;
3648
+ }
3649
+ .photo-browser-caption.photo-browser-caption-active {
3650
+ opacity: 1;
3651
+ }
3652
+ .photo-browser-captions-light .photo-browser-caption {
3653
+ background: rgba(255, 255, 255, 0.8);
3654
+ color: #000;
3655
+ }
3656
+ .photo-browser-exposed .photo-browser-caption {
3657
+ color: #fff;
3658
+ background: rgba(0, 0, 0, 0.8);
3659
+ }
3660
+ .photo-browser-slider-container {
3661
+ position: absolute;
3662
+ left: 0;
3663
+ top: 0;
3664
+ width: 100%;
3665
+ height: 100%;
3666
+ overflow: hidden;
3667
+ background: #fff;
3668
+ -webkit-transition-duration: 400ms;
3669
+ transition-duration: 400ms;
3670
+ }
3671
+ .photo-browser-slider-wrapper {
3672
+ position: absolute;
3673
+ left: 0;
3674
+ top: 0;
3675
+ width: 100%;
3676
+ height: 100%;
3677
+ padding: 0;
3678
+ display: -webkit-box;
3679
+ display: -ms-flexbox;
3680
+ display: -webkit-flex;
3681
+ display: flex;
3682
+ }
3683
+ .photo-browser-link-inactive {
3684
+ opacity: 0.3;
3685
+ }
3686
+ .photo-browser-slide {
3687
+ width: 100%;
3688
+ height: 100%;
3689
+ position: relative;
3690
+ overflow: hidden;
3691
+ display: -webkit-box;
3692
+ display: -ms-flexbox;
3693
+ display: -webkit-flex;
3694
+ display: flex;
3695
+ -webkit-box-pack: center;
3696
+ -ms-flex-pack: center;
3697
+ -webkit-justify-content: center;
3698
+ justify-content: center;
3699
+ -webkit-box-align: center;
3700
+ -ms-flex-align: center;
3701
+ -webkit-align-items: center;
3702
+ align-items: center;
3703
+ -webkit-flex-shrink: 0;
3704
+ -ms-flex: 0 0 auto;
3705
+ flex-shrink: 0;
3706
+ -webkit-box-sizing: border-box;
3707
+ -moz-box-sizing: border-box;
3708
+ box-sizing: border-box;
3709
+ }
3710
+ .photo-browser-slide.transitioning {
3711
+ -webkit-transition-duration: 400ms;
3712
+ transition-duration: 400ms;
3713
+ }
3714
+ .photo-browser-slide span {
3715
+ width: 100%;
3716
+ text-align: center;
3717
+ display: none;
3718
+ }
3719
+ .photo-browser-slide img {
3720
+ width: auto;
3721
+ height: auto;
3722
+ max-width: 100%;
3723
+ max-height: 100%;
3724
+ display: none;
3725
+ }
3726
+ .photo-browser-slide.slider-slide-active span,
3727
+ .photo-browser-slide.slider-slide-next span,
3728
+ .photo-browser-slide.slider-slide-prev span {
3729
+ display: block;
3730
+ }
3731
+ .photo-browser-slide.slider-slide-active img,
3732
+ .photo-browser-slide.slider-slide-next img,
3733
+ .photo-browser-slide.slider-slide-prev img {
3734
+ display: inline;
3735
+ }
3736
+ .photo-browser-slide iframe {
3737
+ width: 100%;
3738
+ height: 100%;
3739
+ }
3740
+ .photo-browser-dark .navbar,
3741
+ .photo-browser-dark .toolbar {
3742
+ background: rgba(30, 30, 30, 0.8);
3743
+ border: none;
3744
+ color: #fff;
3745
+ }
3746
+ .photo-browser-dark .navbar a,
3747
+ .photo-browser-dark .toolbar a {
3748
+ color: #fff;
3749
+ }
3750
+ .photo-browser-dark .photo-browser-slider-container {
3751
+ background: #000;
3752
+ }
3753
+ @-webkit-keyframes photoBrowserIn {
3754
+ 0% {
3755
+ -webkit-transform: translate3d(0, 0, 0) scale(0.5);
3756
+ opacity: 0;
3757
+ }
3758
+ 100% {
3759
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
3760
+ opacity: 1;
3761
+ }
3762
+ }
3763
+ @keyframes photoBrowserIn {
3764
+ 0% {
3765
+ transform: translate3d(0, 0, 0) scale(0.5);
3766
+ opacity: 0;
3767
+ }
3768
+ 100% {
3769
+ transform: translate3d(0, 0, 0) scale(1);
3770
+ opacity: 1;
3771
+ }
3772
+ }
3773
+ @-webkit-keyframes photoBrowserOut {
3774
+ 0% {
3775
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
3776
+ opacity: 1;
3777
+ }
3778
+ 100% {
3779
+ -webkit-transform: translate3d(0, 0, 0) scale(0.5);
3780
+ opacity: 0;
3781
+ }
3782
+ }
3783
+ @keyframes photoBrowserOut {
3784
+ 0% {
3785
+ transform: translate3d(0, 0, 0) scale(1);
3786
+ opacity: 1;
3787
+ }
3788
+ 100% {
3789
+ transform: translate3d(0, 0, 0) scale(0.5);
3790
+ opacity: 0;
3791
+ }
3792
+ }
3793
+ /* === Notifications === */
3794
+ .notifications {
3795
+ position: absolute;
3796
+ left: 0;
3797
+ top: 0;
3798
+ width: 100%;
3799
+ z-index: 20000;
3800
+ color: #fff;
3801
+ font-size: 14px;
3802
+ margin: 0;
3803
+ border: none;
3804
+ display: none;
3805
+ -webkit-box-sizing: border-box;
3806
+ -moz-box-sizing: border-box;
3807
+ box-sizing: border-box;
3808
+ max-height: 100%;
3809
+ overflow: auto;
3810
+ -webkit-overflow-scrolling: touch;
3811
+ -webkit-transition-duration: 450ms;
3812
+ transition-duration: 450ms;
3813
+ background: rgba(0, 0, 0, 0.85);
3814
+ -webkit-perspective: 1200px;
3815
+ perspective: 1200px;
3816
+ }
3817
+ .notifications.list-block > ul {
3818
+ border: none;
3819
+ background: none;
3820
+ margin: 0;
3821
+ }
3822
+ .with-statusbar-overlay .notifications {
3823
+ padding-top: 20px;
3824
+ -webkit-transform: translate3d(0, -20px, 0);
3825
+ -ms-transform: translate3d(0, -20px, 0);
3826
+ transform: translate3d(0, -20px, 0);
3827
+ }
3828
+ .notifications .item-content {
3829
+ -webkit-box-align: start;
3830
+ -ms-flex-align: start;
3831
+ -webkit-align-items: flex-start;
3832
+ align-items: flex-start;
3833
+ }
3834
+ .notifications .item-text,
3835
+ .notifications .item-subtitle,
3836
+ .notifications .item-title {
3837
+ font-size: 14px;
3838
+ }
3839
+ .notifications .item-title {
3840
+ font-weight: 500;
3841
+ }
3842
+ .notifications .item-text {
3843
+ height: auto;
3844
+ color: #d2d2d2;
3845
+ line-height: inherit;
3846
+ }
3847
+ .notifications .item-text,
3848
+ .notifications .item-subtitle {
3849
+ font-weight: 300;
3850
+ }
3851
+ .notifications .item-inner {
3852
+ border-bottom-color: rgba(255, 255, 255, 0.2);
3853
+ }
3854
+ .notifications .item-media i.icon {
3855
+ width: 20px;
3856
+ height: 20px;
3857
+ -webkit-background-size: cover;
3858
+ background-size: cover;
3859
+ background-position: center;
3860
+ background-repeat: no-repeat;
3861
+ }
3862
+ .notifications li.notification-item .item-media {
3863
+ padding-top: 13px;
3864
+ }
3865
+ .notifications .close-notification {
3866
+ width: 19px;
3867
+ height: 19px;
3868
+ background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'><g><path fill='%23bcbfc4' d='M9.5,1C14.2,1,18,4.8,18,9.5S14.2,18,9.5,18S1,14.2,1,9.5S4.8,1,9.5,1 M9.5,0C4.3,0,0,4.3,0,9.5 S4.3,19,9.5,19S19,14.7,19,9.5S14.7,0,9.5,0L9.5,0z'/></g><line stroke='%23bcbfc4' stroke-miterlimit='10' x1='5.2' y1='5.2' x2='13.8' y2='13.8'/><line stroke='%23bcbfc4' stroke-miterlimit='10' x1='14.1' y1='4.9' x2='4.9' y2='14.1'/></svg>") no-repeat center top;
3869
+ -webkit-background-size: 100% auto;
3870
+ background-size: 100% auto;
3871
+ position: relative;
3872
+ }
3873
+ .notifications .close-notification span {
3874
+ position: absolute;
3875
+ width: 44px;
3876
+ height: 44px;
3877
+ left: 50%;
3878
+ top: 50%;
3879
+ margin-left: -22px;
3880
+ margin-top: -22px;
3881
+ }
3882
+ .notifications .notification-item {
3883
+ max-width: 568px;
3884
+ margin: 0 auto;
3885
+ -webkit-transition-duration: 450ms;
3886
+ transition-duration: 450ms;
3887
+ -webkit-transform: translate3d(0, 0, 0);
3888
+ -ms-transform: translate3d(0, 0, 0);
3889
+ transform: translate3d(0, 0, 0);
3890
+ opacity: 1;
3891
+ }
3892
+ .notifications .notification-hidden {
3893
+ opacity: 0;
3894
+ -webkit-transform: translate3d(0, 0, 0);
3895
+ -ms-transform: translate3d(0, 0, 0);
3896
+ transform: translate3d(0, 0, 0);
3897
+ }
3898
+ /* === Login screen === */
3899
+ .login-screen-content {
3900
+ background: #fff;
3901
+ }
3902
+ .login-screen-content .login-screen-title,
3903
+ .login-screen-content .list-block,
3904
+ .login-screen-content .content-block,
3905
+ .login-screen-content .list-block-label {
3906
+ max-width: 480px;
3907
+ margin: 25px auto;
3908
+ }
3909
+ .login-screen-content .list-block ul {
3910
+ border: none;
3911
+ background: none;
3912
+ }
3913
+ .login-screen-content .list-block-label {
3914
+ text-align: center;
3915
+ }
3916
+ .login-screen-title {
3917
+ text-align: center;
3918
+ font-size: 30px;
3919
+ }
3920
+ /* === Disabled elements === */
3921
+ .disabled,
3922
+ [disabled] {
3923
+ opacity: 0.55;
3924
+ pointer-events: none;
3925
+ }
3926
+ .disabled .disabled,
3927
+ .disabled [disabled],
3928
+ [disabled] .disabled,
3929
+ [disabled] [disabled] {
3930
+ opacity: 1;
3931
+ }
3932
+ /* === Color Themes === */
3933
+ .color-gray {
3934
+ color: #8e8e93;
3935
+ }
3936
+ .list-block .item-link.list-button.color-gray,
3937
+ .tabbar a.active.color-gray,
3938
+ a.color-gray {
3939
+ color: #8e8e93;
3940
+ }
3941
+ .label-switch input[type="checkbox"]:checked + .checkbox.color-gray,
3942
+ .label-switch.color-gray input[type="checkbox"]:checked + .checkbox {
3943
+ background-color: #8e8e93;
3944
+ }
3945
+ .color-gray.button:not(.button-fill),
3946
+ .color-gray.buttons-row .button,
3947
+ .theme-gray .button:not(.button-fill) {
3948
+ border-color: #8e8e93;
3949
+ }
3950
+ html:not(.watch-active-state) .color-gray.button:not(.button-fill):active,
3951
+ html:not(.watch-active-state) .color-gray.buttons-row .button:active,
3952
+ html:not(.watch-active-state) .theme-gray .button:not(.button-fill):active,
3953
+ .color-gray.button:not(.button-fill).active-state,
3954
+ .color-gray.buttons-row .button.active-state,
3955
+ .theme-gray .button:not(.button-fill).active-state {
3956
+ background-color: rgba(142, 142, 147, 0.15);
3957
+ }
3958
+ .color-gray.button:not(.button-fill).active,
3959
+ .color-gray.buttons-row .button.active,
3960
+ .theme-gray .button:not(.button-fill).active {
3961
+ background-color: #8e8e93;
3962
+ color: #fff;
3963
+ }
3964
+ .theme-gray .button.button-fill,
3965
+ .button.button-fill.color-gray {
3966
+ background: #8e8e93;
3967
+ color: #fff;
3968
+ }
3969
+ .color-gray i.icon,
3970
+ .theme-gray i.icon,
3971
+ i.icon.color-gray,
3972
+ i.icon.theme-gray {
3973
+ color: #8e8e93;
3974
+ }
3975
+ i.icon-next.color-gray,
3976
+ i.icon-next.theme-gray,
3977
+ .theme-gray i.icon-next {
3978
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%238e8e93' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
3979
+ }
3980
+ i.icon-prev.color-gray,
3981
+ i.icon-prev.theme-gray,
3982
+ .theme-gray i.icon-prev {
3983
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%238e8e93' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
3984
+ }
3985
+ i.icon-back.color-gray,
3986
+ i.icon-back.theme-gray,
3987
+ .theme-gray i.icon-back {
3988
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%238e8e93'/></svg>");
3989
+ }
3990
+ i.icon-bars.color-gray,
3991
+ i.icon-bars.theme-gray,
3992
+ .theme-gray i.icon-bars {
3993
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%238e8e93' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
3994
+ }
3995
+ .theme-gray a,
3996
+ .theme-gray .item-link.list-button {
3997
+ color: #8e8e93;
3998
+ }
3999
+ .theme-gray .tabbar a,
4000
+ .tabbar.theme-gray a {
4001
+ color: inherit;
4002
+ }
4003
+ .theme-gray .tabbar a.active,
4004
+ .tabbar.theme-gray a.active {
4005
+ color: #8e8e93;
4006
+ }
4007
+ .theme-gray .range-slider input[type="range"]::-webkit-slider-thumb:before,
4008
+ .range-slider.theme-gray input[type="range"]::-webkit-slider-thumb:before {
4009
+ background-color: #8e8e93;
4010
+ }
4011
+ .theme-gray label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
4012
+ .theme-gray label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
4013
+ background-color: #8e8e93;
4014
+ }
4015
+ .theme-gray label.label-radio input[type="checkbox"]:checked ~ .item-inner,
4016
+ .theme-gray label.label-radio input[type="radio"]:checked ~ .item-inner {
4017
+ background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%238e8e93' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
4018
+ }
4019
+ .theme-gray .slider-pagination-active {
4020
+ background-color: #8e8e93;
4021
+ }
4022
+ .bg-gray,
4023
+ .button.button-fill.bg-gray,
4024
+ a.bg-gray,
4025
+ .list-block .swipeout-actions-left a.bg-gray,
4026
+ .list-block .swipeout-actions-right a.bg-gray {
4027
+ background-color: #8e8e93;
4028
+ }
4029
+ .border-gray {
4030
+ border-color: #8e8e93;
4031
+ }
4032
+ .color-white {
4033
+ color: #ffffff;
4034
+ }
4035
+ .list-block .item-link.list-button.color-white,
4036
+ .tabbar a.active.color-white,
4037
+ a.color-white {
4038
+ color: #ffffff;
4039
+ }
4040
+ .label-switch input[type="checkbox"]:checked + .checkbox.color-white,
4041
+ .label-switch.color-white input[type="checkbox"]:checked + .checkbox {
4042
+ background-color: #ffffff;
4043
+ }
4044
+ .color-white.button:not(.button-fill),
4045
+ .color-white.buttons-row .button,
4046
+ .theme-white .button:not(.button-fill) {
4047
+ border-color: #ffffff;
4048
+ }
4049
+ html:not(.watch-active-state) .color-white.button:not(.button-fill):active,
4050
+ html:not(.watch-active-state) .color-white.buttons-row .button:active,
4051
+ html:not(.watch-active-state) .theme-white .button:not(.button-fill):active,
4052
+ .color-white.button:not(.button-fill).active-state,
4053
+ .color-white.buttons-row .button.active-state,
4054
+ .theme-white .button:not(.button-fill).active-state {
4055
+ background-color: rgba(255, 255, 255, 0.15);
4056
+ }
4057
+ .color-white.button:not(.button-fill).active,
4058
+ .color-white.buttons-row .button.active,
4059
+ .theme-white .button:not(.button-fill).active {
4060
+ background-color: #ffffff;
4061
+ color: #fff;
4062
+ }
4063
+ .theme-white .button.button-fill,
4064
+ .button.button-fill.color-white {
4065
+ background: #ffffff;
4066
+ color: #fff;
4067
+ }
4068
+ .color-white i.icon,
4069
+ .theme-white i.icon,
4070
+ i.icon.color-white,
4071
+ i.icon.theme-white {
4072
+ color: #ffffff;
4073
+ }
4074
+ i.icon-next.color-white,
4075
+ i.icon-next.theme-white,
4076
+ .theme-white i.icon-next {
4077
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffffff' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
4078
+ }
4079
+ i.icon-prev.color-white,
4080
+ i.icon-prev.theme-white,
4081
+ .theme-white i.icon-prev {
4082
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffffff' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
4083
+ }
4084
+ i.icon-back.color-white,
4085
+ i.icon-back.theme-white,
4086
+ .theme-white i.icon-back {
4087
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ffffff'/></svg>");
4088
+ }
4089
+ i.icon-bars.color-white,
4090
+ i.icon-bars.theme-white,
4091
+ .theme-white i.icon-bars {
4092
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%23ffffff' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
4093
+ }
4094
+ .theme-white a,
4095
+ .theme-white .item-link.list-button {
4096
+ color: #ffffff;
4097
+ }
4098
+ .theme-white .tabbar a,
4099
+ .tabbar.theme-white a {
4100
+ color: inherit;
4101
+ }
4102
+ .theme-white .tabbar a.active,
4103
+ .tabbar.theme-white a.active {
4104
+ color: #ffffff;
4105
+ }
4106
+ .theme-white .range-slider input[type="range"]::-webkit-slider-thumb:before,
4107
+ .range-slider.theme-white input[type="range"]::-webkit-slider-thumb:before {
4108
+ background-color: #ffffff;
4109
+ }
4110
+ .theme-white label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
4111
+ .theme-white label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
4112
+ background-color: #ffffff;
4113
+ }
4114
+ .theme-white label.label-radio input[type="checkbox"]:checked ~ .item-inner,
4115
+ .theme-white label.label-radio input[type="radio"]:checked ~ .item-inner {
4116
+ background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%23ffffff' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
4117
+ }
4118
+ .theme-white .slider-pagination-active {
4119
+ background-color: #ffffff;
4120
+ }
4121
+ .bg-white,
4122
+ .button.button-fill.bg-white,
4123
+ a.bg-white,
4124
+ .list-block .swipeout-actions-left a.bg-white,
4125
+ .list-block .swipeout-actions-right a.bg-white {
4126
+ background-color: #ffffff;
4127
+ }
4128
+ .border-white {
4129
+ border-color: #ffffff;
4130
+ }
4131
+ .color-black {
4132
+ color: #000000;
4133
+ }
4134
+ .list-block .item-link.list-button.color-black,
4135
+ .tabbar a.active.color-black,
4136
+ a.color-black {
4137
+ color: #000000;
4138
+ }
4139
+ .label-switch input[type="checkbox"]:checked + .checkbox.color-black,
4140
+ .label-switch.color-black input[type="checkbox"]:checked + .checkbox {
4141
+ background-color: #000000;
4142
+ }
4143
+ .color-black.button:not(.button-fill),
4144
+ .color-black.buttons-row .button,
4145
+ .theme-black .button:not(.button-fill) {
4146
+ border-color: #000000;
4147
+ }
4148
+ html:not(.watch-active-state) .color-black.button:not(.button-fill):active,
4149
+ html:not(.watch-active-state) .color-black.buttons-row .button:active,
4150
+ html:not(.watch-active-state) .theme-black .button:not(.button-fill):active,
4151
+ .color-black.button:not(.button-fill).active-state,
4152
+ .color-black.buttons-row .button.active-state,
4153
+ .theme-black .button:not(.button-fill).active-state {
4154
+ background-color: rgba(0, 0, 0, 0.15);
4155
+ }
4156
+ .color-black.button:not(.button-fill).active,
4157
+ .color-black.buttons-row .button.active,
4158
+ .theme-black .button:not(.button-fill).active {
4159
+ background-color: #000000;
4160
+ color: #fff;
4161
+ }
4162
+ .theme-black .button.button-fill,
4163
+ .button.button-fill.color-black {
4164
+ background: #000000;
4165
+ color: #fff;
4166
+ }
4167
+ .color-black i.icon,
4168
+ .theme-black i.icon,
4169
+ i.icon.color-black,
4170
+ i.icon.theme-black {
4171
+ color: #000000;
4172
+ }
4173
+ i.icon-next.color-black,
4174
+ i.icon-next.theme-black,
4175
+ .theme-black i.icon-next {
4176
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23000000' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
4177
+ }
4178
+ i.icon-prev.color-black,
4179
+ i.icon-prev.theme-black,
4180
+ .theme-black i.icon-prev {
4181
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23000000' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
4182
+ }
4183
+ i.icon-back.color-black,
4184
+ i.icon-back.theme-black,
4185
+ .theme-black i.icon-back {
4186
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23000000'/></svg>");
4187
+ }
4188
+ i.icon-bars.color-black,
4189
+ i.icon-bars.theme-black,
4190
+ .theme-black i.icon-bars {
4191
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%23000000' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
4192
+ }
4193
+ .theme-black a,
4194
+ .theme-black .item-link.list-button {
4195
+ color: #000000;
4196
+ }
4197
+ .theme-black .tabbar a,
4198
+ .tabbar.theme-black a {
4199
+ color: inherit;
4200
+ }
4201
+ .theme-black .tabbar a.active,
4202
+ .tabbar.theme-black a.active {
4203
+ color: #000000;
4204
+ }
4205
+ .theme-black .range-slider input[type="range"]::-webkit-slider-thumb:before,
4206
+ .range-slider.theme-black input[type="range"]::-webkit-slider-thumb:before {
4207
+ background-color: #000000;
4208
+ }
4209
+ .theme-black label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
4210
+ .theme-black label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
4211
+ background-color: #000000;
4212
+ }
4213
+ .theme-black label.label-radio input[type="checkbox"]:checked ~ .item-inner,
4214
+ .theme-black label.label-radio input[type="radio"]:checked ~ .item-inner {
4215
+ background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%23000000' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
4216
+ }
4217
+ .theme-black .slider-pagination-active {
4218
+ background-color: #000000;
4219
+ }
4220
+ .bg-black,
4221
+ .button.button-fill.bg-black,
4222
+ a.bg-black,
4223
+ .list-block .swipeout-actions-left a.bg-black,
4224
+ .list-block .swipeout-actions-right a.bg-black {
4225
+ background-color: #000000;
4226
+ }
4227
+ .border-black {
4228
+ border-color: #000000;
4229
+ }
4230
+ .color-lightblue {
4231
+ color: #5ac8fa;
4232
+ }
4233
+ .list-block .item-link.list-button.color-lightblue,
4234
+ .tabbar a.active.color-lightblue,
4235
+ a.color-lightblue {
4236
+ color: #5ac8fa;
4237
+ }
4238
+ .label-switch input[type="checkbox"]:checked + .checkbox.color-lightblue,
4239
+ .label-switch.color-lightblue input[type="checkbox"]:checked + .checkbox {
4240
+ background-color: #5ac8fa;
4241
+ }
4242
+ .color-lightblue.button:not(.button-fill),
4243
+ .color-lightblue.buttons-row .button,
4244
+ .theme-lightblue .button:not(.button-fill) {
4245
+ border-color: #5ac8fa;
4246
+ }
4247
+ html:not(.watch-active-state) .color-lightblue.button:not(.button-fill):active,
4248
+ html:not(.watch-active-state) .color-lightblue.buttons-row .button:active,
4249
+ html:not(.watch-active-state) .theme-lightblue .button:not(.button-fill):active,
4250
+ .color-lightblue.button:not(.button-fill).active-state,
4251
+ .color-lightblue.buttons-row .button.active-state,
4252
+ .theme-lightblue .button:not(.button-fill).active-state {
4253
+ background-color: rgba(90, 200, 250, 0.15);
4254
+ }
4255
+ .color-lightblue.button:not(.button-fill).active,
4256
+ .color-lightblue.buttons-row .button.active,
4257
+ .theme-lightblue .button:not(.button-fill).active {
4258
+ background-color: #5ac8fa;
4259
+ color: #fff;
4260
+ }
4261
+ .theme-lightblue .button.button-fill,
4262
+ .button.button-fill.color-lightblue {
4263
+ background: #5ac8fa;
4264
+ color: #fff;
4265
+ }
4266
+ .color-lightblue i.icon,
4267
+ .theme-lightblue i.icon,
4268
+ i.icon.color-lightblue,
4269
+ i.icon.theme-lightblue {
4270
+ color: #5ac8fa;
4271
+ }
4272
+ i.icon-next.color-lightblue,
4273
+ i.icon-next.theme-lightblue,
4274
+ .theme-lightblue i.icon-next {
4275
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%235ac8fa' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
4276
+ }
4277
+ i.icon-prev.color-lightblue,
4278
+ i.icon-prev.theme-lightblue,
4279
+ .theme-lightblue i.icon-prev {
4280
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%235ac8fa' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
4281
+ }
4282
+ i.icon-back.color-lightblue,
4283
+ i.icon-back.theme-lightblue,
4284
+ .theme-lightblue i.icon-back {
4285
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%235ac8fa'/></svg>");
4286
+ }
4287
+ i.icon-bars.color-lightblue,
4288
+ i.icon-bars.theme-lightblue,
4289
+ .theme-lightblue i.icon-bars {
4290
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%235ac8fa' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
4291
+ }
4292
+ .theme-lightblue a,
4293
+ .theme-lightblue .item-link.list-button {
4294
+ color: #5ac8fa;
4295
+ }
4296
+ .theme-lightblue .tabbar a,
4297
+ .tabbar.theme-lightblue a {
4298
+ color: inherit;
4299
+ }
4300
+ .theme-lightblue .tabbar a.active,
4301
+ .tabbar.theme-lightblue a.active {
4302
+ color: #5ac8fa;
4303
+ }
4304
+ .theme-lightblue .range-slider input[type="range"]::-webkit-slider-thumb:before,
4305
+ .range-slider.theme-lightblue input[type="range"]::-webkit-slider-thumb:before {
4306
+ background-color: #5ac8fa;
4307
+ }
4308
+ .theme-lightblue label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
4309
+ .theme-lightblue label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
4310
+ background-color: #5ac8fa;
4311
+ }
4312
+ .theme-lightblue label.label-radio input[type="checkbox"]:checked ~ .item-inner,
4313
+ .theme-lightblue label.label-radio input[type="radio"]:checked ~ .item-inner {
4314
+ background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%235ac8fa' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
4315
+ }
4316
+ .theme-lightblue .slider-pagination-active {
4317
+ background-color: #5ac8fa;
4318
+ }
4319
+ .bg-lightblue,
4320
+ .button.button-fill.bg-lightblue,
4321
+ a.bg-lightblue,
4322
+ .list-block .swipeout-actions-left a.bg-lightblue,
4323
+ .list-block .swipeout-actions-right a.bg-lightblue {
4324
+ background-color: #5ac8fa;
4325
+ }
4326
+ .border-lightblue {
4327
+ border-color: #5ac8fa;
4328
+ }
4329
+ .color-yellow {
4330
+ color: #ffcc00;
4331
+ }
4332
+ .list-block .item-link.list-button.color-yellow,
4333
+ .tabbar a.active.color-yellow,
4334
+ a.color-yellow {
4335
+ color: #ffcc00;
4336
+ }
4337
+ .label-switch input[type="checkbox"]:checked + .checkbox.color-yellow,
4338
+ .label-switch.color-yellow input[type="checkbox"]:checked + .checkbox {
4339
+ background-color: #ffcc00;
4340
+ }
4341
+ .color-yellow.button:not(.button-fill),
4342
+ .color-yellow.buttons-row .button,
4343
+ .theme-yellow .button:not(.button-fill) {
4344
+ border-color: #ffcc00;
4345
+ }
4346
+ html:not(.watch-active-state) .color-yellow.button:not(.button-fill):active,
4347
+ html:not(.watch-active-state) .color-yellow.buttons-row .button:active,
4348
+ html:not(.watch-active-state) .theme-yellow .button:not(.button-fill):active,
4349
+ .color-yellow.button:not(.button-fill).active-state,
4350
+ .color-yellow.buttons-row .button.active-state,
4351
+ .theme-yellow .button:not(.button-fill).active-state {
4352
+ background-color: rgba(255, 204, 0, 0.15);
4353
+ }
4354
+ .color-yellow.button:not(.button-fill).active,
4355
+ .color-yellow.buttons-row .button.active,
4356
+ .theme-yellow .button:not(.button-fill).active {
4357
+ background-color: #ffcc00;
4358
+ color: #fff;
4359
+ }
4360
+ .theme-yellow .button.button-fill,
4361
+ .button.button-fill.color-yellow {
4362
+ background: #ffcc00;
4363
+ color: #fff;
4364
+ }
4365
+ .color-yellow i.icon,
4366
+ .theme-yellow i.icon,
4367
+ i.icon.color-yellow,
4368
+ i.icon.theme-yellow {
4369
+ color: #ffcc00;
4370
+ }
4371
+ i.icon-next.color-yellow,
4372
+ i.icon-next.theme-yellow,
4373
+ .theme-yellow i.icon-next {
4374
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffcc00' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
4375
+ }
4376
+ i.icon-prev.color-yellow,
4377
+ i.icon-prev.theme-yellow,
4378
+ .theme-yellow i.icon-prev {
4379
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ffcc00' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
4380
+ }
4381
+ i.icon-back.color-yellow,
4382
+ i.icon-back.theme-yellow,
4383
+ .theme-yellow i.icon-back {
4384
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ffcc00'/></svg>");
4385
+ }
4386
+ i.icon-bars.color-yellow,
4387
+ i.icon-bars.theme-yellow,
4388
+ .theme-yellow i.icon-bars {
4389
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%23ffcc00' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
4390
+ }
4391
+ .theme-yellow a,
4392
+ .theme-yellow .item-link.list-button {
4393
+ color: #ffcc00;
4394
+ }
4395
+ .theme-yellow .tabbar a,
4396
+ .tabbar.theme-yellow a {
4397
+ color: inherit;
4398
+ }
4399
+ .theme-yellow .tabbar a.active,
4400
+ .tabbar.theme-yellow a.active {
4401
+ color: #ffcc00;
4402
+ }
4403
+ .theme-yellow .range-slider input[type="range"]::-webkit-slider-thumb:before,
4404
+ .range-slider.theme-yellow input[type="range"]::-webkit-slider-thumb:before {
4405
+ background-color: #ffcc00;
4406
+ }
4407
+ .theme-yellow label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
4408
+ .theme-yellow label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
4409
+ background-color: #ffcc00;
4410
+ }
4411
+ .theme-yellow label.label-radio input[type="checkbox"]:checked ~ .item-inner,
4412
+ .theme-yellow label.label-radio input[type="radio"]:checked ~ .item-inner {
4413
+ background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%23ffcc00' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
4414
+ }
4415
+ .theme-yellow .slider-pagination-active {
4416
+ background-color: #ffcc00;
4417
+ }
4418
+ .bg-yellow,
4419
+ .button.button-fill.bg-yellow,
4420
+ a.bg-yellow,
4421
+ .list-block .swipeout-actions-left a.bg-yellow,
4422
+ .list-block .swipeout-actions-right a.bg-yellow {
4423
+ background-color: #ffcc00;
4424
+ }
4425
+ .border-yellow {
4426
+ border-color: #ffcc00;
4427
+ }
4428
+ .color-orange {
4429
+ color: #ff9500;
4430
+ }
4431
+ .list-block .item-link.list-button.color-orange,
4432
+ .tabbar a.active.color-orange,
4433
+ a.color-orange {
4434
+ color: #ff9500;
4435
+ }
4436
+ .label-switch input[type="checkbox"]:checked + .checkbox.color-orange,
4437
+ .label-switch.color-orange input[type="checkbox"]:checked + .checkbox {
4438
+ background-color: #ff9500;
4439
+ }
4440
+ .color-orange.button:not(.button-fill),
4441
+ .color-orange.buttons-row .button,
4442
+ .theme-orange .button:not(.button-fill) {
4443
+ border-color: #ff9500;
4444
+ }
4445
+ html:not(.watch-active-state) .color-orange.button:not(.button-fill):active,
4446
+ html:not(.watch-active-state) .color-orange.buttons-row .button:active,
4447
+ html:not(.watch-active-state) .theme-orange .button:not(.button-fill):active,
4448
+ .color-orange.button:not(.button-fill).active-state,
4449
+ .color-orange.buttons-row .button.active-state,
4450
+ .theme-orange .button:not(.button-fill).active-state {
4451
+ background-color: rgba(255, 149, 0, 0.15);
4452
+ }
4453
+ .color-orange.button:not(.button-fill).active,
4454
+ .color-orange.buttons-row .button.active,
4455
+ .theme-orange .button:not(.button-fill).active {
4456
+ background-color: #ff9500;
4457
+ color: #fff;
4458
+ }
4459
+ .theme-orange .button.button-fill,
4460
+ .button.button-fill.color-orange {
4461
+ background: #ff9500;
4462
+ color: #fff;
4463
+ }
4464
+ .color-orange i.icon,
4465
+ .theme-orange i.icon,
4466
+ i.icon.color-orange,
4467
+ i.icon.theme-orange {
4468
+ color: #ff9500;
4469
+ }
4470
+ i.icon-next.color-orange,
4471
+ i.icon-next.theme-orange,
4472
+ .theme-orange i.icon-next {
4473
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff9500' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
4474
+ }
4475
+ i.icon-prev.color-orange,
4476
+ i.icon-prev.theme-orange,
4477
+ .theme-orange i.icon-prev {
4478
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff9500' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
4479
+ }
4480
+ i.icon-back.color-orange,
4481
+ i.icon-back.theme-orange,
4482
+ .theme-orange i.icon-back {
4483
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff9500'/></svg>");
4484
+ }
4485
+ i.icon-bars.color-orange,
4486
+ i.icon-bars.theme-orange,
4487
+ .theme-orange i.icon-bars {
4488
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%23ff9500' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
4489
+ }
4490
+ .theme-orange a,
4491
+ .theme-orange .item-link.list-button {
4492
+ color: #ff9500;
4493
+ }
4494
+ .theme-orange .tabbar a,
4495
+ .tabbar.theme-orange a {
4496
+ color: inherit;
4497
+ }
4498
+ .theme-orange .tabbar a.active,
4499
+ .tabbar.theme-orange a.active {
4500
+ color: #ff9500;
4501
+ }
4502
+ .theme-orange .range-slider input[type="range"]::-webkit-slider-thumb:before,
4503
+ .range-slider.theme-orange input[type="range"]::-webkit-slider-thumb:before {
4504
+ background-color: #ff9500;
4505
+ }
4506
+ .theme-orange label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
4507
+ .theme-orange label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
4508
+ background-color: #ff9500;
4509
+ }
4510
+ .theme-orange label.label-radio input[type="checkbox"]:checked ~ .item-inner,
4511
+ .theme-orange label.label-radio input[type="radio"]:checked ~ .item-inner {
4512
+ background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%23ff9500' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
4513
+ }
4514
+ .theme-orange .slider-pagination-active {
4515
+ background-color: #ff9500;
4516
+ }
4517
+ .bg-orange,
4518
+ .button.button-fill.bg-orange,
4519
+ a.bg-orange,
4520
+ .list-block .swipeout-actions-left a.bg-orange,
4521
+ .list-block .swipeout-actions-right a.bg-orange {
4522
+ background-color: #ff9500;
4523
+ }
4524
+ .border-orange {
4525
+ border-color: #ff9500;
4526
+ }
4527
+ .color-pink {
4528
+ color: #ff2d55;
4529
+ }
4530
+ .list-block .item-link.list-button.color-pink,
4531
+ .tabbar a.active.color-pink,
4532
+ a.color-pink {
4533
+ color: #ff2d55;
4534
+ }
4535
+ .label-switch input[type="checkbox"]:checked + .checkbox.color-pink,
4536
+ .label-switch.color-pink input[type="checkbox"]:checked + .checkbox {
4537
+ background-color: #ff2d55;
4538
+ }
4539
+ .color-pink.button:not(.button-fill),
4540
+ .color-pink.buttons-row .button,
4541
+ .theme-pink .button:not(.button-fill) {
4542
+ border-color: #ff2d55;
4543
+ }
4544
+ html:not(.watch-active-state) .color-pink.button:not(.button-fill):active,
4545
+ html:not(.watch-active-state) .color-pink.buttons-row .button:active,
4546
+ html:not(.watch-active-state) .theme-pink .button:not(.button-fill):active,
4547
+ .color-pink.button:not(.button-fill).active-state,
4548
+ .color-pink.buttons-row .button.active-state,
4549
+ .theme-pink .button:not(.button-fill).active-state {
4550
+ background-color: rgba(255, 45, 85, 0.15);
4551
+ }
4552
+ .color-pink.button:not(.button-fill).active,
4553
+ .color-pink.buttons-row .button.active,
4554
+ .theme-pink .button:not(.button-fill).active {
4555
+ background-color: #ff2d55;
4556
+ color: #fff;
4557
+ }
4558
+ .theme-pink .button.button-fill,
4559
+ .button.button-fill.color-pink {
4560
+ background: #ff2d55;
4561
+ color: #fff;
4562
+ }
4563
+ .color-pink i.icon,
4564
+ .theme-pink i.icon,
4565
+ i.icon.color-pink,
4566
+ i.icon.theme-pink {
4567
+ color: #ff2d55;
4568
+ }
4569
+ i.icon-next.color-pink,
4570
+ i.icon-next.theme-pink,
4571
+ .theme-pink i.icon-next {
4572
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff2d55' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
4573
+ }
4574
+ i.icon-prev.color-pink,
4575
+ i.icon-prev.theme-pink,
4576
+ .theme-pink i.icon-prev {
4577
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff2d55' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
4578
+ }
4579
+ i.icon-back.color-pink,
4580
+ i.icon-back.theme-pink,
4581
+ .theme-pink i.icon-back {
4582
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff2d55'/></svg>");
4583
+ }
4584
+ i.icon-bars.color-pink,
4585
+ i.icon-bars.theme-pink,
4586
+ .theme-pink i.icon-bars {
4587
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%23ff2d55' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
4588
+ }
4589
+ .theme-pink a,
4590
+ .theme-pink .item-link.list-button {
4591
+ color: #ff2d55;
4592
+ }
4593
+ .theme-pink .tabbar a,
4594
+ .tabbar.theme-pink a {
4595
+ color: inherit;
4596
+ }
4597
+ .theme-pink .tabbar a.active,
4598
+ .tabbar.theme-pink a.active {
4599
+ color: #ff2d55;
4600
+ }
4601
+ .theme-pink .range-slider input[type="range"]::-webkit-slider-thumb:before,
4602
+ .range-slider.theme-pink input[type="range"]::-webkit-slider-thumb:before {
4603
+ background-color: #ff2d55;
4604
+ }
4605
+ .theme-pink label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
4606
+ .theme-pink label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
4607
+ background-color: #ff2d55;
4608
+ }
4609
+ .theme-pink label.label-radio input[type="checkbox"]:checked ~ .item-inner,
4610
+ .theme-pink label.label-radio input[type="radio"]:checked ~ .item-inner {
4611
+ background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%23ff2d55' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
4612
+ }
4613
+ .theme-pink .slider-pagination-active {
4614
+ background-color: #ff2d55;
4615
+ }
4616
+ .bg-pink,
4617
+ .button.button-fill.bg-pink,
4618
+ a.bg-pink,
4619
+ .list-block .swipeout-actions-left a.bg-pink,
4620
+ .list-block .swipeout-actions-right a.bg-pink {
4621
+ background-color: #ff2d55;
4622
+ }
4623
+ .border-pink {
4624
+ border-color: #ff2d55;
4625
+ }
4626
+ .color-blue {
4627
+ color: #007aff;
4628
+ }
4629
+ .list-block .item-link.list-button.color-blue,
4630
+ .tabbar a.active.color-blue,
4631
+ a.color-blue {
4632
+ color: #007aff;
4633
+ }
4634
+ .label-switch input[type="checkbox"]:checked + .checkbox.color-blue,
4635
+ .label-switch.color-blue input[type="checkbox"]:checked + .checkbox {
4636
+ background-color: #007aff;
4637
+ }
4638
+ .color-blue.button:not(.button-fill),
4639
+ .color-blue.buttons-row .button,
4640
+ .theme-blue .button:not(.button-fill) {
4641
+ border-color: #007aff;
4642
+ }
4643
+ html:not(.watch-active-state) .color-blue.button:not(.button-fill):active,
4644
+ html:not(.watch-active-state) .color-blue.buttons-row .button:active,
4645
+ html:not(.watch-active-state) .theme-blue .button:not(.button-fill):active,
4646
+ .color-blue.button:not(.button-fill).active-state,
4647
+ .color-blue.buttons-row .button.active-state,
4648
+ .theme-blue .button:not(.button-fill).active-state {
4649
+ background-color: rgba(0, 122, 255, 0.15);
4650
+ }
4651
+ .color-blue.button:not(.button-fill).active,
4652
+ .color-blue.buttons-row .button.active,
4653
+ .theme-blue .button:not(.button-fill).active {
4654
+ background-color: #007aff;
4655
+ color: #fff;
4656
+ }
4657
+ .theme-blue .button.button-fill,
4658
+ .button.button-fill.color-blue {
4659
+ background: #007aff;
4660
+ color: #fff;
4661
+ }
4662
+ .color-blue i.icon,
4663
+ .theme-blue i.icon,
4664
+ i.icon.color-blue,
4665
+ i.icon.theme-blue {
4666
+ color: #007aff;
4667
+ }
4668
+ i.icon-next.color-blue,
4669
+ i.icon-next.theme-blue,
4670
+ .theme-blue i.icon-next {
4671
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
4672
+ }
4673
+ i.icon-prev.color-blue,
4674
+ i.icon-prev.theme-blue,
4675
+ .theme-blue i.icon-prev {
4676
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23007aff' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
4677
+ }
4678
+ i.icon-back.color-blue,
4679
+ i.icon-back.theme-blue,
4680
+ .theme-blue i.icon-back {
4681
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23007aff'/></svg>");
4682
+ }
4683
+ i.icon-bars.color-blue,
4684
+ i.icon-bars.theme-blue,
4685
+ .theme-blue i.icon-bars {
4686
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%23007aff' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
4687
+ }
4688
+ .theme-blue a,
4689
+ .theme-blue .item-link.list-button {
4690
+ color: #007aff;
4691
+ }
4692
+ .theme-blue .tabbar a,
4693
+ .tabbar.theme-blue a {
4694
+ color: inherit;
4695
+ }
4696
+ .theme-blue .tabbar a.active,
4697
+ .tabbar.theme-blue a.active {
4698
+ color: #007aff;
4699
+ }
4700
+ .theme-blue .range-slider input[type="range"]::-webkit-slider-thumb:before,
4701
+ .range-slider.theme-blue input[type="range"]::-webkit-slider-thumb:before {
4702
+ background-color: #007aff;
4703
+ }
4704
+ .theme-blue label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
4705
+ .theme-blue label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
4706
+ background-color: #007aff;
4707
+ }
4708
+ .theme-blue label.label-radio input[type="checkbox"]:checked ~ .item-inner,
4709
+ .theme-blue label.label-radio input[type="radio"]:checked ~ .item-inner {
4710
+ background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%23007aff' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
4711
+ }
4712
+ .theme-blue .slider-pagination-active {
4713
+ background-color: #007aff;
4714
+ }
4715
+ .bg-blue,
4716
+ .button.button-fill.bg-blue,
4717
+ a.bg-blue,
4718
+ .list-block .swipeout-actions-left a.bg-blue,
4719
+ .list-block .swipeout-actions-right a.bg-blue {
4720
+ background-color: #007aff;
4721
+ }
4722
+ .border-blue {
4723
+ border-color: #007aff;
4724
+ }
4725
+ .color-green {
4726
+ color: #4cd964;
4727
+ }
4728
+ .list-block .item-link.list-button.color-green,
4729
+ .tabbar a.active.color-green,
4730
+ a.color-green {
4731
+ color: #4cd964;
4732
+ }
4733
+ .label-switch input[type="checkbox"]:checked + .checkbox.color-green,
4734
+ .label-switch.color-green input[type="checkbox"]:checked + .checkbox {
4735
+ background-color: #4cd964;
4736
+ }
4737
+ .color-green.button:not(.button-fill),
4738
+ .color-green.buttons-row .button,
4739
+ .theme-green .button:not(.button-fill) {
4740
+ border-color: #4cd964;
4741
+ }
4742
+ html:not(.watch-active-state) .color-green.button:not(.button-fill):active,
4743
+ html:not(.watch-active-state) .color-green.buttons-row .button:active,
4744
+ html:not(.watch-active-state) .theme-green .button:not(.button-fill):active,
4745
+ .color-green.button:not(.button-fill).active-state,
4746
+ .color-green.buttons-row .button.active-state,
4747
+ .theme-green .button:not(.button-fill).active-state {
4748
+ background-color: rgba(76, 217, 100, 0.15);
4749
+ }
4750
+ .color-green.button:not(.button-fill).active,
4751
+ .color-green.buttons-row .button.active,
4752
+ .theme-green .button:not(.button-fill).active {
4753
+ background-color: #4cd964;
4754
+ color: #fff;
4755
+ }
4756
+ .theme-green .button.button-fill,
4757
+ .button.button-fill.color-green {
4758
+ background: #4cd964;
4759
+ color: #fff;
4760
+ }
4761
+ .color-green i.icon,
4762
+ .theme-green i.icon,
4763
+ i.icon.color-green,
4764
+ i.icon.theme-green {
4765
+ color: #4cd964;
4766
+ }
4767
+ i.icon-next.color-green,
4768
+ i.icon-next.theme-green,
4769
+ .theme-green i.icon-next {
4770
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%234cd964' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
4771
+ }
4772
+ i.icon-prev.color-green,
4773
+ i.icon-prev.theme-green,
4774
+ .theme-green i.icon-prev {
4775
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%234cd964' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
4776
+ }
4777
+ i.icon-back.color-green,
4778
+ i.icon-back.theme-green,
4779
+ .theme-green i.icon-back {
4780
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%234cd964'/></svg>");
4781
+ }
4782
+ i.icon-bars.color-green,
4783
+ i.icon-bars.theme-green,
4784
+ .theme-green i.icon-bars {
4785
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%234cd964' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
4786
+ }
4787
+ .theme-green a,
4788
+ .theme-green .item-link.list-button {
4789
+ color: #4cd964;
4790
+ }
4791
+ .theme-green .tabbar a,
4792
+ .tabbar.theme-green a {
4793
+ color: inherit;
4794
+ }
4795
+ .theme-green .tabbar a.active,
4796
+ .tabbar.theme-green a.active {
4797
+ color: #4cd964;
4798
+ }
4799
+ .theme-green .range-slider input[type="range"]::-webkit-slider-thumb:before,
4800
+ .range-slider.theme-green input[type="range"]::-webkit-slider-thumb:before {
4801
+ background-color: #4cd964;
4802
+ }
4803
+ .theme-green label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
4804
+ .theme-green label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
4805
+ background-color: #4cd964;
4806
+ }
4807
+ .theme-green label.label-radio input[type="checkbox"]:checked ~ .item-inner,
4808
+ .theme-green label.label-radio input[type="radio"]:checked ~ .item-inner {
4809
+ background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%234cd964' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
4810
+ }
4811
+ .theme-green .slider-pagination-active {
4812
+ background-color: #4cd964;
4813
+ }
4814
+ .bg-green,
4815
+ .button.button-fill.bg-green,
4816
+ a.bg-green,
4817
+ .list-block .swipeout-actions-left a.bg-green,
4818
+ .list-block .swipeout-actions-right a.bg-green {
4819
+ background-color: #4cd964;
4820
+ }
4821
+ .border-green {
4822
+ border-color: #4cd964;
4823
+ }
4824
+ .color-red {
4825
+ color: #ff3b30;
4826
+ }
4827
+ .list-block .item-link.list-button.color-red,
4828
+ .tabbar a.active.color-red,
4829
+ a.color-red {
4830
+ color: #ff3b30;
4831
+ }
4832
+ .label-switch input[type="checkbox"]:checked + .checkbox.color-red,
4833
+ .label-switch.color-red input[type="checkbox"]:checked + .checkbox {
4834
+ background-color: #ff3b30;
4835
+ }
4836
+ .color-red.button:not(.button-fill),
4837
+ .color-red.buttons-row .button,
4838
+ .theme-red .button:not(.button-fill) {
4839
+ border-color: #ff3b30;
4840
+ }
4841
+ html:not(.watch-active-state) .color-red.button:not(.button-fill):active,
4842
+ html:not(.watch-active-state) .color-red.buttons-row .button:active,
4843
+ html:not(.watch-active-state) .theme-red .button:not(.button-fill):active,
4844
+ .color-red.button:not(.button-fill).active-state,
4845
+ .color-red.buttons-row .button.active-state,
4846
+ .theme-red .button:not(.button-fill).active-state {
4847
+ background-color: rgba(255, 59, 48, 0.15);
4848
+ }
4849
+ .color-red.button:not(.button-fill).active,
4850
+ .color-red.buttons-row .button.active,
4851
+ .theme-red .button:not(.button-fill).active {
4852
+ background-color: #ff3b30;
4853
+ color: #fff;
4854
+ }
4855
+ .theme-red .button.button-fill,
4856
+ .button.button-fill.color-red {
4857
+ background: #ff3b30;
4858
+ color: #fff;
4859
+ }
4860
+ .color-red i.icon,
4861
+ .theme-red i.icon,
4862
+ i.icon.color-red,
4863
+ i.icon.theme-red {
4864
+ color: #ff3b30;
4865
+ }
4866
+ i.icon-next.color-red,
4867
+ i.icon-next.theme-red,
4868
+ .theme-red i.icon-next {
4869
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff3b30' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
4870
+ }
4871
+ i.icon-prev.color-red,
4872
+ i.icon-prev.theme-red,
4873
+ .theme-red i.icon-prev {
4874
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23ff3b30' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
4875
+ }
4876
+ i.icon-back.color-red,
4877
+ i.icon-back.theme-red,
4878
+ .theme-red i.icon-back {
4879
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff3b30'/></svg>");
4880
+ }
4881
+ i.icon-bars.color-red,
4882
+ i.icon-bars.theme-red,
4883
+ .theme-red i.icon-bars {
4884
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%23ff3b30' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
4885
+ }
4886
+ .theme-red a,
4887
+ .theme-red .item-link.list-button {
4888
+ color: #ff3b30;
4889
+ }
4890
+ .theme-red .tabbar a,
4891
+ .tabbar.theme-red a {
4892
+ color: inherit;
4893
+ }
4894
+ .theme-red .tabbar a.active,
4895
+ .tabbar.theme-red a.active {
4896
+ color: #ff3b30;
4897
+ }
4898
+ .theme-red .range-slider input[type="range"]::-webkit-slider-thumb:before,
4899
+ .range-slider.theme-red input[type="range"]::-webkit-slider-thumb:before {
4900
+ background-color: #ff3b30;
4901
+ }
4902
+ .theme-red label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
4903
+ .theme-red label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
4904
+ background-color: #ff3b30;
4905
+ }
4906
+ .theme-red label.label-radio input[type="checkbox"]:checked ~ .item-inner,
4907
+ .theme-red label.label-radio input[type="radio"]:checked ~ .item-inner {
4908
+ background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%23ff3b30' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
4909
+ }
4910
+ .theme-red .slider-pagination-active {
4911
+ background-color: #ff3b30;
4912
+ }
4913
+ .bg-red,
4914
+ .button.button-fill.bg-red,
4915
+ a.bg-red,
4916
+ .list-block .swipeout-actions-left a.bg-red,
4917
+ .list-block .swipeout-actions-right a.bg-red {
4918
+ background-color: #ff3b30;
4919
+ }
4920
+ .border-red {
4921
+ border-color: #ff3b30;
4922
+ }