1 | import { controlsWidth } from "./util/globals";
|
2 |
|
3 |
|
4 | export const titleFont = "Lato, Helvetica Neue, Helvetica, sans-serif";
|
5 | export const headerFont = "Lato, Helvetica Neue, Helvetica, sans-serif";
|
6 | export const dataFont = "Lato, Helvetica Neue, Helvetica, sans-serif";
|
7 | export const lighterGrey = "rgb(200, 200, 200)";
|
8 | export const darkGrey = "#333";
|
9 | export const medGrey = "#888";
|
10 | export const lightGrey = "#BBB";
|
11 | export const extraLightGrey = "#F1F1F1";
|
12 | export const brandColor = "#5097BA";
|
13 | export const sidebarColor = "#F2F2F2";
|
14 | export const goColor = "#89B77F";
|
15 | export const pauseColor = "#E39B39";
|
16 |
|
17 |
|
18 | export const sidebarField = {
|
19 | backgroundColor: "#FFF",
|
20 | fontFamily: dataFont,
|
21 | width: controlsWidth - 13,
|
22 | borderSpacing: 0,
|
23 | fontSize: 14,
|
24 | paddingLeft: "10px",
|
25 | border: "1px solid #ccc",
|
26 | height: 36,
|
27 | appearance: "none",
|
28 | borderRadius: "4px",
|
29 | color: darkGrey,
|
30 | fontWeight: 400,
|
31 | marginBottom: "3px"
|
32 | };
|
33 |
|
34 | export const materialButton = {
|
35 | border: "0px",
|
36 | backgroundColor: "inherit",
|
37 | marginLeft: 0,
|
38 | marginTop: 5,
|
39 | marginRight: 10,
|
40 | marginBottom: 5,
|
41 | borderRadius: 2,
|
42 | cursor: "pointer",
|
43 | padding: 2,
|
44 | fontFamily: dataFont,
|
45 | color: darkGrey,
|
46 | fontWeight: 400,
|
47 | textTransform: "uppercase",
|
48 | fontSize: 14,
|
49 | verticalAlign: "top",
|
50 | outline: 0
|
51 | };
|
52 |
|
53 | export const materialButtonSelected = {
|
54 | border: "0px",
|
55 | backgroundColor: "inherit",
|
56 | marginLeft: 0,
|
57 | marginTop: 5,
|
58 | marginRight: 10,
|
59 | marginBottom: 5,
|
60 | borderRadius: 2,
|
61 | cursor: "pointer",
|
62 | padding: 2,
|
63 | fontFamily: dataFont,
|
64 | color: brandColor,
|
65 | fontWeight: 400,
|
66 | textTransform: "uppercase",
|
67 | fontSize: 14,
|
68 | verticalAlign: "top",
|
69 | outline: 0
|
70 | };
|
71 |
|
72 | export const materialButtonOutline = {
|
73 | border: "1px solid #CCC",
|
74 | backgroundColor: "inherit",
|
75 | borderRadius: 3,
|
76 | cursor: "pointer",
|
77 | paddingTop: 5,
|
78 | paddingBottom: 5,
|
79 | paddingLeft: 10,
|
80 | paddingRight: 10,
|
81 | fontFamily: dataFont,
|
82 | color: medGrey,
|
83 | fontWeight: 400,
|
84 | textTransform: "uppercase",
|
85 | fontSize: 14,
|
86 | verticalAlign: "top"
|
87 | };
|
88 |
|
89 | export const tabSingle = {
|
90 | borderTop: "1px solid #BBB",
|
91 | borderLeft: "1px solid #CCC",
|
92 | borderRight: "1px solid #CCC",
|
93 | borderBottom: "1px solid #CCC",
|
94 | borderRadius: "0px 0px 3px 3px",
|
95 | paddingTop: 3,
|
96 | paddingBottom: 3,
|
97 | paddingLeft: 6,
|
98 | paddingRight: 6,
|
99 | backgroundColor: "#fff",
|
100 | fontWeight: 400,
|
101 | color: darkGrey,
|
102 | fontFamily: dataFont,
|
103 | fontSize: 12,
|
104 | textTransform: "uppercase"
|
105 | };
|
106 |
|
107 | export const tabGroup = {
|
108 | borderTop: "1px solid #BBB",
|
109 | borderLeft: "1px solid #CCC",
|
110 | borderRight: "1px solid #CCC",
|
111 | borderBottom: "1px solid #CCC",
|
112 | borderRadius: "0px 0px 3px 3px",
|
113 | paddingTop: 3,
|
114 | paddingBottom: 3,
|
115 | paddingLeft: 6,
|
116 | paddingRight: 6,
|
117 | backgroundColor: "#fff"
|
118 | };
|
119 |
|
120 | export const tabGroupMember = {
|
121 | border: "none",
|
122 | backgroundColor: "inherit",
|
123 | padding: 0,
|
124 | margin: 0,
|
125 | cursor: "pointer",
|
126 | fontFamily: dataFont,
|
127 | color: darkGrey,
|
128 | fontWeight: 400,
|
129 | textTransform: "uppercase",
|
130 | fontSize: 12
|
131 | };
|
132 |
|
133 | export const tabGroupMemberSelected = {
|
134 | border: "none",
|
135 | backgroundColor: "inherit",
|
136 | padding: 0,
|
137 | margin: 0,
|
138 | cursor: "pointer",
|
139 | fontFamily: dataFont,
|
140 | color: brandColor,
|
141 | fontWeight: 400,
|
142 | textTransform: "uppercase",
|
143 | fontSize: 12
|
144 | };
|
145 |
|
146 |
|
147 | export const titleStyles = {
|
148 | big: {
|
149 | fontFamily: titleFont,
|
150 | fontSize: 76,
|
151 | lineHeight: "76px",
|
152 | letterSpacing: -1.8,
|
153 | marginTop: 20,
|
154 | marginBottom: 10,
|
155 | fontWeight: 300,
|
156 | color: "#fff"
|
157 | },
|
158 | small: {
|
159 | fontFamily: headerFont,
|
160 | fontSize: 16,
|
161 | lineHeight: "28px",
|
162 | marginTop: 15,
|
163 | marginBottom: 5,
|
164 | fontWeight: 500,
|
165 | color: "#000"
|
166 | }
|
167 | };
|
168 |
|
169 | export const infoPanelStyles = {
|
170 | branchInfoHeading: {
|
171 | fontSize: 15,
|
172 | fontWeight: 400,
|
173 | verticalAlign: "middle",
|
174 | padding: "5px"
|
175 | },
|
176 | buttonLink: {
|
177 | float: "right",
|
178 | fontFamily: dataFont,
|
179 | fontSize: 14,
|
180 | fontWeight: 400,
|
181 | textDecoration: "none",
|
182 | pointerEvents: "auto",
|
183 | background: "none",
|
184 | color: "white",
|
185 | cursor: "pointer",
|
186 | textTransform: "uppercase",
|
187 | borderRadius: 2,
|
188 | border: "1px solid #CCC",
|
189 | verticalAlign: "middle"
|
190 | },
|
191 | tooltip: {
|
192 | position: "relative",
|
193 | padding: 5,
|
194 | color: "white",
|
195 | fontFamily: dataFont,
|
196 | fontSize: 14,
|
197 | lineHeight: 1,
|
198 | fontWeight: 300
|
199 | },
|
200 | modalContainer: {
|
201 | position: "absolute",
|
202 | width: "100%",
|
203 | height: "100%",
|
204 | pointerEvents: "all",
|
205 | top: 0,
|
206 | left: 0,
|
207 | zIndex: 2000,
|
208 | backgroundColor: "rgba(80, 80, 80, .20)",
|
209 |
|
210 | display: "flex",
|
211 | justifyContent: "center",
|
212 | alignItems: "center",
|
213 | wordWrap: "break-word",
|
214 | wordBreak: "break-word"
|
215 | },
|
216 | panel: {
|
217 | position: "relative",
|
218 | paddingLeft: 30,
|
219 | padding: "5% 5%",
|
220 | borderRadius: 5,
|
221 | backgroundColor: "rgba(55,55,55,0.9)",
|
222 | color: "white",
|
223 | fontFamily: dataFont,
|
224 | fontSize: 18,
|
225 | lineHeight: 1,
|
226 | fontWeight: 300,
|
227 | maxWidth: "80%",
|
228 | overflowY: "auto"
|
229 | },
|
230 | modalHeading: {
|
231 | fontSize: 24,
|
232 | fontWeight: 400
|
233 | },
|
234 | modalSubheading: {
|
235 | fontSize: 20,
|
236 | fontWeight: 400,
|
237 | marginTop: "20px",
|
238 | marginBottom: "20px"
|
239 | },
|
240 | tooltipHeading: {
|
241 | fontSize: 18,
|
242 | fontWeight: 400,
|
243 | marginBottom: "10px"
|
244 | },
|
245 | comment: {
|
246 | fontStyle: "italic",
|
247 | fontWeight: 200,
|
248 | fontSize: 14,
|
249 | marginTop: "10px"
|
250 | },
|
251 | topRightMessage: {
|
252 | fontStyle: "italic",
|
253 | fontWeight: 200,
|
254 | fontSize: 14,
|
255 | textAlign: "right",
|
256 | marginTop: "-20px"
|
257 | },
|
258 | list: {
|
259 | paddingLeft: 15,
|
260 | listStyleType: "disc"
|
261 | },
|
262 | item: {
|
263 | paddingTop: 4,
|
264 | paddingBottom: 4,
|
265 | minWidth: 120
|
266 | },
|
267 | break: {
|
268 | marginBottom: "10px"
|
269 | }
|
270 | };
|