-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpart-vars.less
140 lines (136 loc) · 3.6 KB
/
part-vars.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/*====================
Core
==================== */
:root {
@themeColorRed: red(@themeColor);
@themeColorGreen: green(@themeColor);
@themeColorBlue: blue(@themeColor);
--f7-theme-color: @themeColor;
--f7-theme-color-rgb: @themeColorRed, @themeColorGreen, @themeColorBlue;
--f7-theme-color-shade: darken(@themeColor, 8%);
--f7-theme-color-tint: lighten(@themeColor, 8%);
--f7-safe-area-left: 0px;
--f7-safe-area-right: 0px;
--f7-safe-area-top: 0px;
--f7-safe-area-bottom: 0px;
--f7-safe-area-outer-left: 0px;
--f7-safe-area-outer-right: 0px;
@supports (left: env(safe-area-inset-left)) {
--f7-safe-area-top: env(safe-area-inset-top);
--f7-safe-area-bottom: env(safe-area-inset-bottom);
.ios-left-edge,
.ios-edges,
.safe-area-left,
.safe-areas,
.popup,
.sheet-modal,
.panel-left {
--f7-safe-area-left: env(safe-area-inset-left);
--f7-safe-area-outer-left: env(safe-area-inset-left);
}
.ios-right-edge,
.ios-edges,
.safe-area-right,
.safe-areas,
.popup,
.sheet-modal,
.panel-right {
--f7-safe-area-right: env(safe-area-inset-right);
--f7-safe-area-outer-right: env(safe-area-inset-right);
}
.no-safe-areas,
.no-safe-area-left,
.no-ios-edges,
.no-ios-left-edge {
--f7-safe-area-left: 0px;
--f7-safe-area-outer-left: 0px;
}
.no-safe-areas,
.no-safe-area-right,
.no-ios-edges,
.no-ios-right-edge {
--f7-safe-area-right: 0px;
--f7-safe-area-outer-right: 0px;
}
}
--f7-device-pixel-ratio: 1;
@media (min-resolution: 2dppx) {
--f7-device-pixel-ratio: 2;
}
@media (min-resolution: 3dppx) {
--f7-device-pixel-ratio: 3;
}
}
/*====================
Fonts & Bars
==================== */
:root {
--f7-font-size: 14px;
/*
--f7-bars-link-color: var(--f7-theme-color);
*/
--f7-bars-bg-image: none;
--f7-bars-translucent-opacity: 0.8;
--f7-bars-translucent-blur: 20px;
--f7-bars-shadow-bottom-image: linear-gradient(to bottom,
rgba(0,0,0,0.25) 0%,
rgba(0,0,0,0.08) 40%,
rgba(0,0,0,0.04) 50%,
rgba(0,0,0,0) 90%,
rgba(0,0,0,0) 100%
);
--f7-bars-shadow-top-image: linear-gradient(to top,
rgba(0,0,0,0.25) 0%,
rgba(0,0,0,0.08) 40%,
rgba(0,0,0,0.04) 50%,
rgba(0,0,0,0) 90%,
rgba(0,0,0,0) 100%
);
.light-vars({
--f7-bars-text-color: #000;
--f7-bars-bg-color: #f7f7f8;
--f7-bars-bg-color-rgb: 247, 247, 248;
});
.dark-vars({
--f7-bars-text-color: #fff;
});
}
.ios-vars({
--f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif, SimSun, '宋体';
--f7-line-height: 1.4;
.light-vars({
--f7-text-color: #000;
--f7-bars-border-color: rgba(0,0,0,0.25);
});
.dark-vars({
--f7-text-color: #fff;
--f7-bars-bg-color: #121212;
--f7-bars-bg-color-rgb: 22, 22, 22;
--f7-bars-border-color: rgba(255,255,255,0.16);
});
});
.md-vars({
--f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif, SimSun, '宋体';
--f7-line-height: 1.5;
--f7-bars-border-color: transparent;
.light-vars({
--f7-text-color: #212121;
});
.dark-vars({
--f7-text-color: rgba(255,255,255,0.87);
--f7-bars-bg-color: #202020;
});
});
.pc-vars({
--f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif, 'Microsoft Yahei', SimSun, '宋体';
--f7-line-height: 1.5;
.light-vars({
--f7-text-color: #000;
--f7-bars-border-color: rgba(0,0,0,0.2);
});
.dark-vars({
--f7-text-color: #fff;
--f7-bars-bg-color: #202020;
--f7-bars-border-color: rgba(255, 255, 255, 0.1);
});
});