framework7-rails 0.7.4.0 → 0.9.6.0

Sign up to get free protection for your applications and to get access to all the features.
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
+ }