Commit e32d6b2cb5fdca1e68b6e685cea458c300aebe08
1 parent
9e6e89dc74
Exists in
master
and in
1 other branch
fix style
Showing 2 changed files with 9 additions and 3 deletions Inline Diff
app/styles/main.css
1 | /* Space out content a bit */ | 1 | /* Space out content a bit */ |
2 | @import "../fonts/font.css"; | 2 | @import "../fonts/font.css"; |
3 | @import "../fonts/font_canvas/font-canvas.css"; | 3 | @import "../fonts/font_canvas/font-canvas.css"; |
4 | body { | 4 | body { |
5 | font-family: 'Hiragino Kaku Gothic Pro', sans-serif; | 5 | font-family: 'Hiragino Kaku Gothic Pro', sans-serif; |
6 | /*font-family: 'gn_aki_iro_sesami_cookies';*/ | 6 | /*font-family: 'gn_aki_iro_sesami_cookies';*/ |
7 | } | 7 | } |
8 | /*Scroll bar style*/ | 8 | /*Scroll bar style*/ |
9 | ::-webkit-scrollbar { | 9 | ::-webkit-scrollbar { |
10 | -webkit-appearance: none; | 10 | -webkit-appearance: none; |
11 | width: 7px; | 11 | width: 7px; |
12 | } | 12 | } |
13 | ::-webkit-scrollbar-thumb { | 13 | ::-webkit-scrollbar-thumb { |
14 | border-radius: 4px; | 14 | border-radius: 4px; |
15 | background-color: rgba(0,0,0,.5); | 15 | background-color: rgba(0,0,0,.5); |
16 | -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); | 16 | -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); |
17 | } | 17 | } |
18 | /*End scroll bar style*/ | 18 | /*End scroll bar style*/ |
19 | .padding-right-0{ | 19 | .padding-right-0{ |
20 | padding-right: 0!important; | 20 | padding-right: 0!important; |
21 | } | 21 | } |
22 | .padding-left-0{ | 22 | .padding-left-0{ |
23 | padding-left: 0!important; | 23 | padding-left: 0!important; |
24 | } | 24 | } |
25 | button.red{ | 25 | button.red{ |
26 | color: #ffffff; | 26 | color: #ffffff; |
27 | background-color: #ff0000; | 27 | background-color: #ff0000; |
28 | border: 1px solid #ff0000; | 28 | border: 1px solid #ff0000; |
29 | 29 | ||
30 | } | 30 | } |
31 | button.white{ | 31 | button.white{ |
32 | border: 1px solid #ff8080; | 32 | border: 1px solid #ff8080; |
33 | color: #ff8080; | 33 | color: #ff8080; |
34 | background-color: #ffffff; | 34 | background-color: #ffffff; |
35 | } | 35 | } |
36 | button.brown{ | 36 | button.brown{ |
37 | background-color: #666666; | 37 | background-color: #666666; |
38 | border: 1px solid #666666; | 38 | border: 1px solid #666666; |
39 | color: #ffffff; | 39 | color: #ffffff; |
40 | border-radius: 5px; | 40 | border-radius: 5px; |
41 | } | 41 | } |
42 | button.black{ | 42 | button.black{ |
43 | border: 1px solid #c9c9c9; | 43 | border: 1px solid #c9c9c9; |
44 | background-color: #343434; | 44 | background-color: #343434; |
45 | color: #ffffff; | 45 | color: #ffffff; |
46 | padding: 1px 6px; | 46 | padding: 1px 6px; |
47 | } | 47 | } |
48 | #tshirt-container{ | 48 | #tshirt-container{ |
49 | border-left: 1px solid #dcdcdc; | 49 | border-left: 1px solid #dcdcdc; |
50 | border-right: 1px solid #dcdcdc; | 50 | border-right: 1px solid #dcdcdc; |
51 | } | 51 | } |
52 | /*HEADER*/ | 52 | /*HEADER*/ |
53 | header{ | 53 | header{ |
54 | border-bottom: 1px solid #dcdcdc; | 54 | border-bottom: 1px solid #dcdcdc; |
55 | } | 55 | } |
56 | header .logo{ | 56 | header .logo{ |
57 | color: #ed1d24; | 57 | color: #ed1d24; |
58 | font-size: 30px; | 58 | font-size: 30px; |
59 | text-transform: uppercase; | 59 | text-transform: uppercase; |
60 | font-weight: bold; | 60 | font-weight: bold; |
61 | } | 61 | } |
62 | header .logo img{ | 62 | header .logo img{ |
63 | width: 60px; | 63 | width: 60px; |
64 | } | 64 | } |
65 | /*NAVIGATION*/ | 65 | /*NAVIGATION*/ |
66 | nav{ | 66 | nav{ |
67 | border-bottom: 1px solid #dcdcdc; | 67 | border-bottom: 1px solid #dcdcdc; |
68 | padding: 10px 0; | 68 | padding: 10px 0; |
69 | } | 69 | } |
70 | nav h2{ | 70 | nav h2{ |
71 | font-size: 27px; | 71 | font-size: 27px; |
72 | margin: 0 0; | 72 | margin: 0 0; |
73 | } | 73 | } |
74 | nav ul{ | 74 | nav ul{ |
75 | list-style: none; | 75 | list-style: none; |
76 | padding-left: 0; | 76 | padding-left: 0; |
77 | margin-bottom: 0; | 77 | margin-bottom: 0; |
78 | 78 | ||
79 | } | 79 | } |
80 | nav ul li{ | 80 | nav ul li{ |
81 | margin-left: 2px; | 81 | margin-left: 2px; |
82 | float: left; | 82 | float: left; |
83 | padding: 6px 12px; | 83 | padding: 6px 12px; |
84 | background-color: #999999; | 84 | background-color: #999999; |
85 | position: relative; | 85 | position: relative; |
86 | } | 86 | } |
87 | nav ul li i.fa{ | 87 | nav ul li i.fa{ |
88 | position: absolute; | 88 | position: absolute; |
89 | color: #ffffff; | 89 | color: #ffffff; |
90 | font-size: 18px; | 90 | font-size: 18px; |
91 | right: -4px; | 91 | right: -4px; |
92 | top: 50%; | 92 | top: 50%; |
93 | transform: translateX(-50%) translateY(-50%); | 93 | transform: translateX(-50%) translateY(-50%); |
94 | -webkit-transform: translateX(-50%) translateY(-50%); | 94 | -webkit-transform: translateX(-50%) translateY(-50%); |
95 | } | 95 | } |
96 | nav ul li a{ | 96 | nav ul li a{ |
97 | color: #ffffff; | 97 | color: #ffffff; |
98 | } | 98 | } |
99 | nav ul li:hover a{ | 99 | nav ul li:hover a{ |
100 | text-decoration: none; | 100 | text-decoration: none; |
101 | color: #ffffff; | 101 | color: #ffffff; |
102 | } | 102 | } |
103 | nav ul li.action{ | 103 | nav ul li.action{ |
104 | color: #ffffff; | 104 | color: #ffffff; |
105 | background-color: #ed1d24; | 105 | background-color: #ed1d24; |
106 | } | 106 | } |
107 | /*ASIDE*/ | 107 | /*ASIDE*/ |
108 | aside{ | 108 | aside{ |
109 | margin: 10px 0; | 109 | margin: 10px 0; |
110 | } | 110 | } |
111 | 111 | ||
112 | aside .break-down{ | 112 | aside .break-down{ |
113 | padding: 0 0; | 113 | padding: 0 0; |
114 | } | 114 | } |
115 | aside .break-down i.fa{ | 115 | aside .break-down i.fa{ |
116 | font-size: 35px; | 116 | font-size: 35px; |
117 | color: #ff0000; | 117 | color: #ff0000; |
118 | } | 118 | } |
119 | aside .break-line{ | 119 | aside .break-line{ |
120 | height: 10px; | 120 | height: 10px; |
121 | } | 121 | } |
122 | aside .break-line hr{ | 122 | aside .break-line hr{ |
123 | border-top: 1px dotted #cccccc; | 123 | border-top: 1px dotted #cccccc; |
124 | } | 124 | } |
125 | aside .step{ | 125 | aside .step{ |
126 | margin: 0 0; | 126 | margin: 0 0; |
127 | } | 127 | } |
128 | aside .step .title{ | 128 | aside .step .title{ |
129 | font-size: 15px; | 129 | font-size: 15px; |
130 | line-height: 16px; | 130 | line-height: 16px; |
131 | font-weight: bold; | 131 | font-weight: bold; |
132 | margin-bottom: 3px; | 132 | margin-bottom: 3px; |
133 | } | 133 | } |
134 | aside .step .title-notice{ | 134 | aside .step .title-notice{ |
135 | font-size: 13px; | 135 | font-size: 13px; |
136 | line-height: 16px; | 136 | line-height: 16px; |
137 | margin-bottom: 3px; | 137 | margin-bottom: 3px; |
138 | } | 138 | } |
139 | aside .step .title-notice .require{ | 139 | aside .step .title-notice .require{ |
140 | font-size: 10px; | 140 | font-size: 10px; |
141 | } | 141 | } |
142 | aside .step .step-box{ | 142 | aside .step .step-box{ |
143 | border: 2px solid #dcdcdc; | 143 | border: 2px solid #dcdcdc; |
144 | font-size: 12px; | 144 | font-size: 12px; |
145 | 145 | ||
146 | } | 146 | } |
147 | /*Step 1*/ | 147 | /*Step 1*/ |
148 | aside .step .step-box .tshirt-design{ | 148 | aside .step .step-box .tshirt-design{ |
149 | border: 1px solid #cccccc; | 149 | border: 1px solid #cccccc; |
150 | background-color: #f5f5f5; | 150 | background-color: #f5f5f5; |
151 | margin: 10px 10px; | 151 | margin: 10px 10px; |
152 | } | 152 | } |
153 | aside .step .step-box .tshirt-design:hover{ | 153 | aside .step .step-box .tshirt-design:hover{ |
154 | border: 1px solid #ff0000; | 154 | border: 1px solid #ff0000; |
155 | } | 155 | } |
156 | aside .step .step-box .tshirt-design button:hover{ | 156 | aside .step .step-box .tshirt-design button:hover{ |
157 | background-color: #fa7b7b; | 157 | background-color: #fa7b7b; |
158 | border: 1px solid #fa7b7b; | 158 | border: 1px solid #fa7b7b; |
159 | } | 159 | } |
160 | aside .step .step-box .tshirt-design div{ | 160 | aside .step .step-box .tshirt-design div{ |
161 | float: left; | 161 | float: left; |
162 | } | 162 | } |
163 | aside .step .step-box .tshirt-design .icon{ | 163 | aside .step .step-box .tshirt-design .icon{ |
164 | padding: 4px 4px; | 164 | padding: 4px 4px; |
165 | border-right: 1px solid #cccccc; | 165 | border-right: 1px solid #cccccc; |
166 | 166 | ||
167 | } | 167 | } |
168 | aside .step .step-box .tshirt-design .icon img{ | 168 | aside .step .step-box .tshirt-design .icon img{ |
169 | height: 50px; | 169 | height: 50px; |
170 | } | 170 | } |
171 | aside .step .step-box .tshirt-design .name{ | 171 | aside .step .step-box .tshirt-design .name{ |
172 | padding: 10px 10px; | 172 | padding: 10px 10px; |
173 | 173 | ||
174 | } | 174 | } |
175 | aside .step .step-box .tshirt-design .action{ | 175 | aside .step .step-box .tshirt-design .action{ |
176 | padding: 10px 10px; | 176 | padding: 10px 10px; |
177 | float: right; | 177 | float: right; |
178 | 178 | ||
179 | } | 179 | } |
180 | aside .step .step-box .tshirt-design .action button{ | 180 | aside .step .step-box .tshirt-design .action button{ |
181 | padding: 8px 10px; | 181 | padding: 8px 10px; |
182 | } | 182 | } |
183 | /*Step 2*/ | 183 | /*Step 2*/ |
184 | aside .step .step-box .tshirt-color{ | 184 | aside .step .step-box .tshirt-color{ |
185 | padding: 6px 10px; | 185 | padding: 6px 10px; |
186 | position: relative; | 186 | position: relative; |
187 | } | 187 | } |
188 | aside .step .step-box .tshirt-color ul.choice-color{ | 188 | aside .step .step-box .tshirt-color ul.choice-color{ |
189 | float: left; | 189 | float: left; |
190 | list-style: none; | 190 | list-style: none; |
191 | padding-left: 0; | 191 | padding-left: 0; |
192 | width: 100%; | 192 | width: 100%; |
193 | margin-bottom: 3px; | 193 | margin-bottom: 3px; |
194 | } | 194 | } |
195 | aside .step .step-box .tshirt-color ul.choice-color li{ | 195 | aside .step .step-box .tshirt-color ul.choice-color li{ |
196 | margin: 0 10px 0 0; | 196 | margin: 0 10px 0 0; |
197 | border: 1px solid #cccccc; | 197 | border: 1px solid #cccccc; |
198 | padding: 2px 2px; | 198 | padding: 2px 2px; |
199 | float: left; | 199 | float: left; |
200 | cursor: pointer; | 200 | cursor: pointer; |
201 | } | 201 | } |
202 | aside .step .step-box .tshirt-color ul.choice-color li.action{ | 202 | aside .step .step-box .tshirt-color ul.choice-color li.action{ |
203 | border: 1px solid #ff0000; | 203 | border: 1px solid #ff0000; |
204 | } | 204 | } |
205 | aside .step .step-box .tshirt-color ul.choice-color li:hover{ | 205 | aside .step .step-box .tshirt-color ul.choice-color li:hover{ |
206 | border: 1px solid #ff0000; | 206 | border: 1px solid #ff0000; |
207 | } | 207 | } |
208 | aside .step .step-box .tshirt-color ul.choice-color li div{ | 208 | aside .step .step-box .tshirt-color ul.choice-color li div{ |
209 | height: 30px; | 209 | height: 30px; |
210 | width: 30px; | 210 | width: 30px; |
211 | } | 211 | } |
212 | 212 | ||
213 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ | 213 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ |
214 | background-color: #ece7e4; | 214 | background-color: #ece7e4; |
215 | } | 215 | } |
216 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ | 216 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ |
217 | background-color: #e7dfd0; | 217 | background-color: #e7dfd0; |
218 | } | 218 | } |
219 | aside .step .step-box .tshirt-color .color-name{ | 219 | aside .step .step-box .tshirt-color .color-name{ |
220 | width: 100%; | 220 | width: 100%; |
221 | font-size: 10px; | 221 | font-size: 10px; |
222 | } | 222 | } |
223 | aside .step .step-box .tshirt-color .view-more{ | 223 | aside .step .step-box .tshirt-color .view-more{ |
224 | position: absolute; | 224 | position: absolute; |
225 | bottom: 6px; | 225 | bottom: 6px; |
226 | right: 10px; | 226 | right: 10px; |
227 | } | 227 | } |
228 | /*Step 3*/ | 228 | /*Step 3*/ |
229 | aside .step .step-box .tshirt-saveorder{ | 229 | aside .step .step-box .tshirt-saveorder{ |
230 | padding: 10px 10px 6px 10px; | 230 | padding: 10px 10px 6px 10px; |
231 | } | 231 | } |
232 | aside .step .step-box .tshirt-saveorder .action{ | 232 | aside .step .step-box .tshirt-saveorder .action{ |
233 | width: 50%; | 233 | width: 50%; |
234 | float: left; | 234 | float: left; |
235 | } | 235 | } |
236 | aside .step .step-box .tshirt-saveorder .action:first-child{ | 236 | aside .step .step-box .tshirt-saveorder .action:first-child{ |
237 | padding-right: 5px; | 237 | padding-right: 5px; |
238 | } | 238 | } |
239 | aside .step .step-box .tshirt-saveorder .action:last-child{ | 239 | aside .step .step-box .tshirt-saveorder .action:last-child{ |
240 | padding-left: 5px; | 240 | padding-left: 5px; |
241 | } | 241 | } |
242 | aside .step .step-box .tshirt-saveorder .action button{ | 242 | aside .step .step-box .tshirt-saveorder .action button{ |
243 | padding: 8px 10px; | 243 | padding: 8px 10px; |
244 | 244 | ||
245 | } | 245 | } |
246 | aside .step .step-box .tshirt-saveorder .action button .text{ | 246 | aside .step .step-box .tshirt-saveorder .action button .text{ |
247 | float: left; | 247 | float: left; |
248 | width: 80%; | 248 | width: 80%; |
249 | text-align: center; | 249 | text-align: center; |
250 | padding-left: 10px; | 250 | padding-left: 10px; |
251 | vertical-align: bottom; | 251 | vertical-align: bottom; |
252 | } | 252 | } |
253 | aside .step .step-box .tshirt-saveorder .action button .arrow{ | 253 | aside .step .step-box .tshirt-saveorder .action button .arrow{ |
254 | float: left; | 254 | float: left; |
255 | width: 20%; | 255 | width: 20%; |
256 | height: 40px; | 256 | height: 40px; |
257 | position: relative; | 257 | position: relative; |
258 | } | 258 | } |
259 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ | 259 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ |
260 | position: absolute; | 260 | position: absolute; |
261 | top: 50%; | 261 | top: 50%; |
262 | right: -6px; | 262 | right: -6px; |
263 | transform: translateX(-50%) translateY(-50%); | 263 | transform: translateX(-50%) translateY(-50%); |
264 | -webkit-transform: translateX(-50%) translateY(-50%); | 264 | -webkit-transform: translateX(-50%) translateY(-50%); |
265 | } | 265 | } |
266 | aside .step .step-box .tshirt-saveorder .notice{ | 266 | aside .step .step-box .tshirt-saveorder .notice{ |
267 | padding: 5px 0 0 0; | 267 | padding: 5px 0 0 0; |
268 | } | 268 | } |
269 | /*Step 4*/ | 269 | /*Step 4*/ |
270 | aside .step .title-notice{ | 270 | aside .step .title-notice{ |
271 | 271 | ||
272 | } | 272 | } |
273 | aside .step .step-box .change-design{ | 273 | aside .step .step-box .change-design{ |
274 | padding: 4px 4px; | 274 | padding: 4px 4px; |
275 | } | 275 | } |
276 | aside .step .step-box .change-design table{ | 276 | aside .step .step-box .change-design table{ |
277 | 277 | ||
278 | } | 278 | } |
279 | aside .step .step-box .change-design table tr{ | 279 | aside .step .step-box .change-design table tr{ |
280 | border-bottom: 1px dotted #cccccc; | 280 | border-bottom: 1px dotted #cccccc; |
281 | } | 281 | } |
282 | aside .step .step-box .change-design table tr:last-child{ | 282 | aside .step .step-box .change-design table tr:last-child{ |
283 | border-bottom: 0; | 283 | border-bottom: 0; |
284 | } | 284 | } |
285 | 285 | ||
286 | /*Step 5- finish*/ | 286 | /*Step 5- finish*/ |
287 | aside .step .finish-design{ | 287 | aside .step .finish-design{ |
288 | padding: 20px 0; | 288 | padding: 20px 0; |
289 | } | 289 | } |
290 | aside .step .finish-design button{ | 290 | aside .step .finish-design button{ |
291 | width: 100%; | 291 | width: 100%; |
292 | padding: 8px 10px; | 292 | padding: 8px 10px; |
293 | } | 293 | } |
294 | 294 | ||
295 | /*DESIGN CONTENT*/ | 295 | /*DESIGN CONTENT*/ |
296 | #tshirt-content{ | 296 | #tshirt-content{ |
297 | position: relative; | 297 | position: relative; |
298 | } | 298 | } |
299 | #tshirt-content .switch-border-design{ | 299 | #tshirt-content .switch-border-design{ |
300 | position: absolute; | 300 | position: absolute; |
301 | top: 5px; | 301 | top: 5px; |
302 | right: 10px; | 302 | right: 10px; |
303 | color: red; | 303 | color: red; |
304 | font-size: 11px; | 304 | font-size: 11px; |
305 | } | 305 | } |
306 | #tshirt-content .tshirt-image{ | 306 | #tshirt-content .tshirt-image{ |
307 | padding: 20px 0 0 0; | 307 | padding: 20px 0 0 0; |
308 | } | 308 | } |
309 | #tshirt-content .tshirt-choice{ | 309 | #tshirt-content .tshirt-choice{ |
310 | 310 | ||
311 | } | 311 | } |
312 | #tshirt-content .tshirt-choice ul{ | 312 | #tshirt-content .tshirt-choice ul{ |
313 | list-style: none; | 313 | list-style: none; |
314 | padding-left: 0; | 314 | padding-left: 0; |
315 | display: table; | 315 | display: table; |
316 | margin: auto; | 316 | margin: auto; |
317 | } | 317 | } |
318 | #tshirt-content .tshirt-choice ul li{ | 318 | #tshirt-content .tshirt-choice ul li{ |
319 | float: left; | 319 | float: left; |
320 | margin: 10px 10px; | 320 | margin: 10px 10px; |
321 | cursor: pointer; | 321 | cursor: pointer; |
322 | } | 322 | } |
323 | #tshirt-content .tshirt-choice ul li .image{ | 323 | #tshirt-content .tshirt-choice ul li .image{ |
324 | border: 1px solid #cccccc; | 324 | border: 1px solid #cccccc; |
325 | padding: 3px 3px; | 325 | padding: 3px 3px; |
326 | } | 326 | } |
327 | #tshirt-content .tshirt-choice ul li.focus{ | 327 | #tshirt-content .tshirt-choice ul li.focus{ |
328 | 328 | ||
329 | } | 329 | } |
330 | #tshirt-content .tshirt-choice ul li.focus .image{ | 330 | #tshirt-content .tshirt-choice ul li.focus .image{ |
331 | border: 1px solid #ff0000; | 331 | border: 1px solid #ff0000; |
332 | } | 332 | } |
333 | #tshirt-content .tshirt-choice ul li .image img{ | 333 | #tshirt-content .tshirt-choice ul li .image img{ |
334 | width: 50px; | 334 | width: 50px; |
335 | height: auto; | 335 | height: auto; |
336 | } | 336 | } |
337 | /*MODAL Design*/ | 337 | /*MODAL Design*/ |
338 | #tshirt-design{ | 338 | #tshirt-design{ |
339 | background-color: #666666; | 339 | background-color: #666666; |
340 | } | 340 | } |
341 | #tshirt-design .modal-dialog{ | 341 | #tshirt-design .modal-dialog{ |
342 | width: 75%; | 342 | width: 75%; |
343 | margin: 0 auto; | 343 | margin: 0 auto; |
344 | } | 344 | } |
345 | #tshirt-design .modal-dialog .modal-content{ | 345 | #tshirt-design .modal-dialog .modal-content{ |
346 | background-color: transparent; | 346 | background-color: transparent; |
347 | border-radius: 0; | 347 | border-radius: 0; |
348 | border: 0; | 348 | border: 0; |
349 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; | 349 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; |
350 | box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; | 350 | box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; |
351 | } | 351 | } |
352 | #tshirt-design .modal-dialog .modal-content .modal-header{ | 352 | #tshirt-design .modal-dialog .modal-content .modal-header{ |
353 | padding: 0 0 10px 0; | 353 | padding: 0 0 10px 0; |
354 | border-bottom: 0; | 354 | border-bottom: 0; |
355 | border-shadow: none!important; | 355 | border-shadow: none!important; |
356 | } | 356 | } |
357 | #tshirt-design .modal-dialog .modal-content .modal-body{ | 357 | #tshirt-design .modal-dialog .modal-content .modal-body{ |
358 | background-color: #f5f5f5; | 358 | background-color: #f5f5f5; |
359 | padding: 0 0; | 359 | padding: 0 0; |
360 | } | 360 | } |
361 | #tshirt-design header{ | 361 | #tshirt-design header{ |
362 | border-bottom: 1px solid #cccccc; | 362 | border-bottom: 1px solid #cccccc; |
363 | background-color: #dddddd; | 363 | background-color: #dddddd; |
364 | } | 364 | } |
365 | #tshirt-design header ul.nav{ | 365 | #tshirt-design header ul.nav{ |
366 | padding-left: 0; | 366 | padding-left: 0; |
367 | list-style: none; | 367 | list-style: none; |
368 | } | 368 | } |
369 | #tshirt-design header ul.nav li{ | 369 | #tshirt-design header ul.nav li{ |
370 | float: left; | 370 | float: left; |
371 | padding: 8px 26px; | 371 | padding: 8px 26px; |
372 | border-right: 1px solid #cccccc; | 372 | border-right: 1px solid #cccccc; |
373 | font-size: 14px; | 373 | font-size: 14px; |
374 | cursor: pointer; | 374 | cursor: pointer; |
375 | } | 375 | } |
376 | #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ | 376 | #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ |
377 | background-color: red; | 377 | background-color: red; |
378 | color: #ffffff; | 378 | color: #ffffff; |
379 | } | 379 | } |
380 | #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ | 380 | #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ |
381 | color: #ffffff; | 381 | color: #ffffff; |
382 | } | 382 | } |
383 | #tshirt-design header ul.nav li i.fa{ | 383 | #tshirt-design header ul.nav li i.fa{ |
384 | color: #fe070f; | 384 | color: #fe070f; |
385 | font-size: 20px; | 385 | font-size: 20px; |
386 | margin-right: 10px; | 386 | margin-right: 10px; |
387 | } | 387 | } |
388 | #tshirt-design header .action{ | 388 | #tshirt-design header .action{ |
389 | 389 | ||
390 | } | 390 | } |
391 | #tshirt-design header .action button{ | 391 | #tshirt-design header .action button{ |
392 | padding: 2px 10px; | 392 | padding: 2px 10px; |
393 | margin: 6px 10px; | 393 | margin: 6px 10px; |
394 | } | 394 | } |
395 | #tshirt-design header .action button:hover{ | 395 | #tshirt-design header .action button:hover{ |
396 | background-color: red; | 396 | background-color: red; |
397 | color: #ffffff; | 397 | color: #ffffff; |
398 | } | 398 | } |
399 | 399 | ||
400 | /*Aside modal*/ | 400 | /*Aside modal*/ |
401 | .aside{ | 401 | .aside{ |
402 | } | 402 | } |
403 | 403 | ||
404 | .aside .box-design-option{ | 404 | .aside .box-design-option{ |
405 | list-style: none; | 405 | list-style: none; |
406 | padding-left: 0; | 406 | padding-left: 0; |
407 | margin-top: 10px; | 407 | margin-top: 10px; |
408 | } | 408 | } |
409 | 409 | ||
410 | .aside .box-design-option li{ | 410 | .aside .box-design-option li{ |
411 | border: 1px solid #cdcdcd; | 411 | border: 1px solid #cdcdcd; |
412 | position: relative; | 412 | position: relative; |
413 | /*cursor: pointer;*/ | 413 | /*cursor: pointer;*/ |
414 | margin-bottom: 10px; | 414 | margin-bottom: 10px; |
415 | } | 415 | } |
416 | .aside .box-design-option li .hover{ | 416 | .aside .box-design-option li .hover{ |
417 | background-color: #fddad4; | 417 | background-color: #fddad4; |
418 | opacity: 0.6; | 418 | opacity: 0.6; |
419 | position: absolute; | 419 | position: absolute; |
420 | width: 100%; | 420 | width: 100%; |
421 | height: 100%; | 421 | height: 100%; |
422 | display: none; | 422 | display: none; |
423 | } | 423 | } |
424 | .aside .box-design-option li:hover .hover{ | 424 | .aside .box-design-option li:hover .hover{ |
425 | display: block; | 425 | display: block; |
426 | } | 426 | } |
427 | 427 | ||
428 | .aside .box-design-option li .title{ | 428 | .aside .box-design-option li .title{ |
429 | background: url("../images/bg1.png") repeat #cdcdcd; | 429 | background: url("../images/bg1.png") repeat #cdcdcd; |
430 | padding: 3px 10px; | 430 | padding: 3px 10px; |
431 | } | 431 | } |
432 | .aside .box-design-option li .title i.fa{ | 432 | .aside .box-design-option li .title i.fa{ |
433 | color: #000000; | 433 | color: #000000; |
434 | } | 434 | } |
435 | 435 | ||
436 | .aside .box-design-option li .content{ | 436 | .aside .box-design-option li .content{ |
437 | 437 | ||
438 | } | 438 | } |
439 | .aside .box-design-option li .content i.fa{ | 439 | .aside .box-design-option li .content i.fa{ |
440 | font-size: 30px; | 440 | font-size: 30px; |
441 | color: #fe070f; | 441 | color: #fe070f; |
442 | margin: 8px 0; | 442 | margin: 8px 0; |
443 | } | 443 | } |
444 | .aside .box-design-option li .content .des{ | 444 | .aside .box-design-option li .content .des{ |
445 | padding: 3px 10px 3px 0; | 445 | padding: 3px 10px 3px 0; |
446 | } | 446 | } |
447 | .aside .box-design-option li .content .color-patterns { | 447 | .aside .box-design-option li .content .color-patterns { |
448 | width: 100%; | 448 | width: 100%; |
449 | border: #bbb solid 1px; | 449 | border: #bbb solid 1px; |
450 | background: #FFF; | 450 | background: #FFF; |
451 | margin-top: 5px; | 451 | margin-top: 5px; |
452 | min-height: 65px; | 452 | min-height: 65px; |
453 | } | 453 | } |
454 | 454 | ||
455 | .aside .box-design-option li .content .color-patterns .color-pattern-item{ | 455 | .aside .box-design-option li .content .color-patterns .color-pattern-item{ |
456 | height: 20px; | 456 | height: 20px; |
457 | float: left; | 457 | float: left; |
458 | margin-left: 4px; | 458 | margin-left: 4px; |
459 | margin-top: 2px; | 459 | margin-top: 2px; |
460 | width: 20px; | 460 | width: 20px; |
461 | cursor: pointer; | 461 | cursor: pointer; |
462 | border: 1px solid #ddd; | 462 | border: 1px solid #ddd; |
463 | } | 463 | } |
464 | 464 | ||
465 | .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { | 465 | .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { |
466 | outline: 1px solid #ed1d24; | 466 | outline: 1px solid #ed1d24; |
467 | } | 467 | } |
468 | .aside .box-design-option li .content .layer-item { | 468 | .aside .box-design-option li .content .layer-item { |
469 | text-align: center; | 469 | text-align: center; |
470 | border: 1px #ddd solid; | 470 | border: 1px #ddd solid; |
471 | background: #FFF; | 471 | background: #FFF; |
472 | padding: 5px; | 472 | padding: 5px; |
473 | font-size: 12px; | 473 | font-size: 12px; |
474 | cursor: pointer; | 474 | cursor: pointer; |
475 | } | 475 | } |
476 | 476 | ||
477 | .aside .box-design-option li .content .layer-item:hover { | 477 | .aside .box-design-option li .content .layer-item:hover { |
478 | background: #ffcccc; | 478 | background: #ffcccc; |
479 | } | 479 | } |
480 | 480 | ||
481 | 481 | ||
482 | /*Design Text*/ | 482 | /*Design Text*/ |
483 | .aside #choice-text{ | 483 | .aside #choice-text{ |
484 | 484 | ||
485 | } | 485 | } |
486 | .aside #choice-text .content{ | 486 | .aside #choice-text .content{ |
487 | padding: 10px 10px; | 487 | padding: 10px 10px; |
488 | } | 488 | } |
489 | .aside #choice-text .content ul.font-family-box{ | 489 | .aside #choice-text .content ul.font-family-box{ |
490 | list-style: none; | 490 | list-style: none; |
491 | margin: 10px 0; | 491 | margin: 10px 0; |
492 | padding-left: 0; | 492 | padding-left: 0; |
493 | height: 180px; | 493 | height: 180px; |
494 | width: 100%; | 494 | width: 100%; |
495 | overflow-y: scroll; | 495 | overflow-y: scroll; |
496 | border: 1px solid #c0c0c0; | 496 | border: 1px solid #c0c0c0; |
497 | } | 497 | } |
498 | 498 | ||
499 | .aside #choice-text .content .font-family-box li{ | 499 | .aside #choice-text .content .font-family-box li{ |
500 | cursor: pointer; | 500 | cursor: pointer; |
501 | padding: 4px 8px; | 501 | padding: 4px 8px; |
502 | border: 0; | 502 | border: 0; |
503 | border-bottom: 1px solid #c0c0c0; | 503 | border-bottom: 1px solid #c0c0c0; |
504 | border-right: 1px solid #c0c0c0; | 504 | border-right: 1px solid #c0c0c0; |
505 | font-size: 16px; | 505 | font-size: 16px; |
506 | } | 506 | } |
507 | .aside #choice-text .content .spacing-letter{ | 507 | .aside #choice-text .content .spacing-letter{ |
508 | 508 | ||
509 | } | 509 | } |
510 | .aside #choice-text .content .spacing-letter .text-label{ | 510 | .aside #choice-text .content .spacing-letter .text-label{ |
511 | font-size: 16px; | 511 | font-size: 16px; |
512 | padding: 4px 0; | 512 | padding: 4px 0; |
513 | } | 513 | } |
514 | .aside #choice-text .content .spacing-letter .box{ | 514 | .aside #choice-text .content .spacing-letter .box{ |
515 | border: 1px solid #8c8c8c; | 515 | border: 1px solid #8c8c8c; |
516 | box-shadow: 0 0 5px #888888; | 516 | box-shadow: 0 0 5px #888888; |
517 | background-color: #f0f0f0; | 517 | background-color: #f0f0f0; |
518 | } | 518 | } |
519 | .aside #choice-text .content .spacing-letter .item{ | 519 | .aside #choice-text .content .spacing-letter .item{ |
520 | float: left; | 520 | float: left; |
521 | } | 521 | } |
522 | 522 | ||
523 | .aside #choice-text .content .spacing-letter .item i.fa{ | 523 | .aside #choice-text .content .spacing-letter .item i.fa{ |
524 | font-size: 22px; | 524 | font-size: 22px; |
525 | margin: 0 0; | 525 | margin: 0 0; |
526 | color: #000000; | 526 | color: #000000; |
527 | } | 527 | } |
528 | .aside #choice-text .content .spacing-letter .item-text{ | 528 | .aside #choice-text .content .spacing-letter .item-text{ |
529 | padding: 6px 20px; | 529 | padding: 6px 20px; |
530 | font-size: 12px; | 530 | font-size: 12px; |
531 | } | 531 | } |
532 | .aside #choice-text .content .spacing-letter .item-plus{ | 532 | .aside #choice-text .content .spacing-letter .item-plus{ |
533 | border-right: 1px solid #8c8c8c; | 533 | border-right: 1px solid #8c8c8c; |
534 | } | 534 | } |
535 | .aside #choice-text .content .spacing-letter .item-minus{ | 535 | .aside #choice-text .content .spacing-letter .item-minus{ |
536 | border-left: 1px solid #8c8c8c; | 536 | border-left: 1px solid #8c8c8c; |
537 | } | 537 | } |
538 | .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { | 538 | .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { |
539 | padding: 5px 6px 1px 6px; | 539 | padding: 5px 6px 1px 6px; |
540 | cursor: pointer; | 540 | cursor: pointer; |
541 | } | 541 | } |
542 | /*Design Choice Illustration*/ | 542 | /*Design Choice Illustration*/ |
543 | .aside #choice-illustration li .content { | 543 | .aside #choice-illustration li .content { |
544 | padding: 10px 10px; | 544 | padding: 10px 10px; |
545 | } | 545 | } |
546 | 546 | ||
547 | .aside #choice-illustration li .content select{ | 547 | .aside #choice-illustration li .content select{ |
548 | width: 100%; | 548 | width: 100%; |
549 | } | 549 | } |
550 | 550 | ||
551 | .aside #choice-illustration li .content .illustration-list { | 551 | .aside #choice-illustration li .content .illustration-list { |
552 | width: 100%; | 552 | width: 100%; |
553 | border: #bbb solid 1px; | 553 | border: #bbb solid 1px; |
554 | background: #FFF; | 554 | background: #FFF; |
555 | margin-top: 5px; | 555 | margin-top: 5px; |
556 | min-height: 350px; | 556 | min-height: 310px; |
557 | padding-bottom: 20px; | ||
557 | } | 558 | } |
558 | 559 | ||
559 | .aside #choice-illustration li .content .illustration-list .illstration-item{ | 560 | .aside #choice-illustration li .content .illustration-list .illstration-item{ |
560 | height: 60px; | 561 | height: 60px; |
561 | overflow: hidden; | 562 | overflow: hidden; |
562 | float: left; | 563 | float: left; |
563 | margin-left: 6px; | 564 | margin-left: 6px; |
564 | margin-top: 5px; | 565 | margin-top: 5px; |
565 | margin-bottom: 5px; | 566 | margin-bottom: 5px; |
566 | padding: 2px; | 567 | padding: 2px; |
567 | background: #e2e2e2; | 568 | background: #e2e2e2; |
568 | border: solid 2px #d7d7d7; | 569 | border: solid 2px #d7d7d7; |
569 | cursor: pointer; | 570 | cursor: pointer; |
570 | } | 571 | } |
571 | 572 | ||
572 | .aside #choice-illustration li .content .illustration-list .illstration-item:hover { | 573 | .aside #choice-illustration li .content .illustration-list .illstration-item:hover { |
573 | outline: 2px solid #ed1d24; | 574 | outline: 2px solid #ed1d24; |
574 | } | 575 | } |
575 | 576 | ||
576 | .aside #choice-illustration li .content .illustration-list .illstration-item img { | 577 | .aside #choice-illustration li .content .illustration-list .illstration-item img { |
577 | width: 50px; | 578 | width: 50px; |
578 | cursor: pointer; | 579 | cursor: pointer; |
579 | } | 580 | } |
580 | 581 | ||
581 | .aside #choice-illustration li .content .illustration-list .footer-bar { | 582 | .aside #choice-illustration li .content .illustration-list .footer-bar { |
582 | text-align: center; | 583 | text-align: center; |
583 | margin-top: 5px; | 584 | margin-top: 5px; |
585 | bottom: 10px; | ||
586 | position: absolute; | ||
587 | width: 100%; | ||
588 | padding-right: 20px; | ||
584 | } | 589 | } |
585 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { | 590 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { |
586 | margin-right: 5px; | 591 | margin-right: 5px; |
587 | cursor: pointer; | 592 | cursor: pointer; |
588 | font-size: 9px; | 593 | font-size: 9px; |
589 | color: #FFF; | 594 | color: #FFF; |
590 | background: #666666; | 595 | background: #666666; |
591 | text-transform: uppercase; | 596 | text-transform: uppercase; |
592 | padding: 2px 5px; | 597 | padding: 2px 5px; |
593 | } | 598 | } |
594 | 599 | ||
595 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { | 600 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { |
596 | background: #999999; | 601 | background: #999999; |
597 | } | 602 | } |
598 | 603 | ||
599 | #btn-choose-image { | 604 | #btn-choose-image { |
600 | background: #ff0f00; | 605 | background: #ff0f00; |
601 | cursor: pointer; | 606 | cursor: pointer; |
602 | margin: 10px 0px; | 607 | margin: 10px 0px; |
603 | padding: 0 10px; | 608 | padding: 0 10px; |
604 | color: #FFF; | 609 | color: #FFF; |
605 | font-size: 12px; | 610 | font-size: 12px; |
606 | } | 611 | } |
607 | 612 | ||
608 | #btn-choose-image:hover { | 613 | #btn-choose-image:hover { |
609 | background: #f8aeae; | 614 | background: #f8aeae; |
610 | } | 615 | } |
611 | 616 | ||
612 | .aside #choice-image li .content { | 617 | .aside #choice-image li .content { |
613 | margin: 0 10px; | 618 | margin: 0 10px; |
614 | padding: 10px 0; | 619 | padding: 10px 0; |
615 | } | 620 | } |
616 | 621 | ||
617 | .aside #choice-image li .content .small-text { | 622 | .aside #choice-image li .content .small-text { |
618 | font-size:10px; | 623 | font-size:10px; |
619 | margin-bottom: 10px; | 624 | margin-bottom: 10px; |
620 | } | 625 | } |
621 | 626 | ||
622 | .aside #choice-image { | 627 | .aside #choice-image { |
623 | font-size: 13px; | 628 | font-size: 13px; |
624 | } | 629 | } |
625 | 630 | ||
626 | .aside #imgLoader{ | 631 | .aside #imgLoader{ |
627 | display: none; | 632 | display: none; |
628 | } | 633 | } |
629 | 634 | ||
630 | .aside #choice-image li .content .list-images { | 635 | .aside #choice-image li .content .list-images { |
631 | height: 300px; | 636 | height: 300px; |
632 | background: #FFF; | 637 | background: #FFF; |
633 | border: 1px solid #DDD; | 638 | border: 1px solid #DDD; |
634 | } | 639 | } |
635 | 640 | ||
636 | /*Design content*/ | 641 | /*Design content*/ |
637 | .tshirt-design-container{ | 642 | .tshirt-design-container{ |
638 | position: relative; | 643 | position: relative; |
639 | } | 644 | } |
640 | .tshirt-design-container .design-content{ | 645 | .tshirt-design-container .design-content{ |
641 | padding: 10px 30px 10px 15px; | 646 | padding: 10px 30px 10px 15px; |
642 | } | 647 | } |
643 | .tshirt-design-container .design-content .content{ | 648 | .tshirt-design-container .design-content .content{ |
644 | width: 100%; | 649 | width: 100%; |
645 | min-height: 650px; | 650 | min-height: 650px; |
646 | background-color: #f0efea; | 651 | background-color: #f0efea; |
647 | padding: 40px 40px; | 652 | padding: 40px 40px; |
648 | height: 100%; | 653 | height: 100%; |
649 | } | 654 | } |
650 | .tshirt-design-container .design-content .content .selection-design{ | 655 | .tshirt-design-container .design-content .content .selection-design{ |
651 | border: 1px solid #ff0000; | 656 | border: 1px solid #ff0000; |
652 | width: 100%; | 657 | width: 100%; |
653 | height: 620px; | 658 | height: 620px; |
654 | } | 659 | } |
655 | .tshirt-design-container .agree-design{ | 660 | .tshirt-design-container .agree-design{ |
656 | position: absolute; | 661 | position: absolute; |
657 | right: -16px; | 662 | right: -16px; |
658 | top: 40%; | 663 | top: 40%; |
659 | } | 664 | } |
660 | .tshirt-design-container .trash-design{ | 665 | .tshirt-design-container .trash-design{ |
661 | position: absolute; | 666 | position: absolute; |
662 | right: 5px; | 667 | right: 5px; |
663 | bottom: 0; | 668 | bottom: 0; |
664 | } | 669 | } |
665 | 670 | ||
666 | 671 | ||
667 | /*FOOTER*/ | 672 | /*FOOTER*/ |
668 | footer{ | 673 | footer{ |
669 | background-color: #333333; | 674 | background-color: #333333; |
670 | } | 675 | } |
671 | footer ul.nav-footer{ | 676 | footer ul.nav-footer{ |
672 | padding-left: 0; | 677 | padding-left: 0; |
673 | list-style: none; | 678 | list-style: none; |
674 | } | 679 | } |
675 | footer ul.nav-footer li{ | 680 | footer ul.nav-footer li{ |
676 | float: left; | 681 | float: left; |
677 | padding: 3px 10px; | 682 | padding: 3px 10px; |
678 | border-right: 1px dotted #ffffff; | 683 | border-right: 1px dotted #ffffff; |
679 | 684 | ||
680 | } | 685 | } |
681 | footer ul.nav-footer li a{ | 686 | footer ul.nav-footer li a{ |
682 | color: #ffffff; | 687 | color: #ffffff; |
683 | font-size: 11px; | 688 | font-size: 11px; |
684 | } | 689 | } |
685 | /* Customize container */ | 690 | /* Customize container */ |
686 | @media (min-width: 768px) { | 691 | @media (min-width: 768px) { |
687 | .container { | 692 | .container { |
688 | /*max-width: 730px;*/ | 693 | /*max-width: 730px;*/ |
689 | } | 694 | } |
690 | } | 695 | } |
691 | 696 | ||
692 | /* Responsive: Portrait tablets and up */ | 697 | /* Responsive: Portrait tablets and up */ |
693 | @media screen and (min-width: 768px) { | 698 | @media screen and (min-width: 768px) { |
694 | /* Remove the padding we set earlier */ | 699 | /* Remove the padding we set earlier */ |
695 | 700 | ||
696 | } | 701 | } |
697 | 702 |
dist/styles/598e506e.main.css
File was created | 1 | body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}import "../fonts/font_canvas/font-canvas.css";body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}::-webkit-scrollbar{-webkit-appearance:none;width:7px}::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(0,0,0,.5);-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}.padding-right-0{padding-right:0!important}.padding-left-0{padding-left:0!important}button.red{color:#fff;background-color:red;border:1px solid red}button.white{border:1px solid #ff8080;color:#ff8080;background-color:#fff}button.brown{background-color:#666;border:1px solid #666;color:#fff;border-radius:5px}button.black{border:1px solid #c9c9c9;background-color:#343434;color:#fff;padding:1px 6px}#tshirt-container{border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc}header{border-bottom:1px solid #dcdcdc}header .logo{color:#ed1d24;font-size:30px;text-transform:uppercase;font-weight:700}header .logo img{width:60px}nav{border-bottom:1px solid #dcdcdc;padding:10px 0}nav h2{font-size:27px;margin:0}nav ul{list-style:none;padding-left:0;margin-bottom:0}nav ul li{margin-left:2px;float:left;padding:6px 12px;background-color:#999;position:relative}nav ul li i.fa{position:absolute;color:#fff;font-size:18px;right:-4px;top:50%;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%)}nav ul li a{color:#fff}nav ul li:hover a{text-decoration:none;color:#fff}nav ul li.action{color:#fff;background-color:#ed1d24}aside{margin:10px 0}aside .break-down{padding:0}aside .break-down i.fa{font-size:35px;color:red}aside .break-line{height:10px}aside .break-line hr{border-top:1px dotted #ccc}aside .step{margin:0}aside .step .title{font-size:15px;line-height:16px;font-weight:700;margin-bottom:3px}aside .step .title-notice{font-size:13px;line-height:16px;margin-bottom:3px}aside .step .title-notice .require{font-size:10px}aside .step .step-box{border:2px solid #dcdcdc;font-size:12px}aside .step .step-box .tshirt-design{border:1px solid #ccc;background-color:#f5f5f5;margin:10px}aside .step .step-box .tshirt-design:hover{border:1px solid red}aside .step .step-box .tshirt-design button:hover{background-color:#fa7b7b;border:1px solid #fa7b7b}aside .step .step-box .tshirt-design div{float:left}aside .step .step-box .tshirt-design .icon{padding:4px;border-right:1px solid #ccc}aside .step .step-box .tshirt-design .icon img{height:50px}aside .step .step-box .tshirt-design .name{padding:10px}aside .step .step-box .tshirt-design .action{padding:10px;float:right}aside .step .step-box .tshirt-design .action button{padding:8px 10px}aside .step .step-box .tshirt-color{padding:6px 10px;position:relative}aside .step .step-box .tshirt-color ul.choice-color{float:left;list-style:none;padding-left:0;width:100%;margin-bottom:3px}aside .step .step-box .tshirt-color ul.choice-color li{margin:0 10px 0 0;border:1px solid #ccc;padding:2px;float:left;cursor:pointer}aside .step .step-box .tshirt-color ul.choice-color li.action,aside .step .step-box .tshirt-color ul.choice-color li:hover{border:1px solid red}aside .step .step-box .tshirt-color ul.choice-color li div{height:30px;width:30px}aside .step .step-box .tshirt-color ul.choice-color li.white div{background-color:#ece7e4}aside .step .step-box .tshirt-color ul.choice-color li.blue div{background-color:#e7dfd0}aside .step .step-box .tshirt-color .color-name{width:100%;font-size:10px}aside .step .step-box .tshirt-color .view-more{position:absolute;bottom:6px;right:10px}aside .step .step-box .tshirt-saveorder{padding:10px 10px 6px}aside .step .step-box .tshirt-saveorder .action{width:50%;float:left}aside .step .step-box .tshirt-saveorder .action:first-child{padding-right:5px}aside .step .step-box .tshirt-saveorder .action:last-child{padding-left:5px}aside .step .step-box .tshirt-saveorder .action button{padding:8px 10px}aside .step .step-box .tshirt-saveorder .action button .text{float:left;width:80%;text-align:center;padding-left:10px;vertical-align:bottom}aside .step .step-box .tshirt-saveorder .action button .arrow{float:left;width:20%;height:40px;position:relative}aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{position:absolute;top:50%;right:-6px;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%)}aside .step .step-box .tshirt-saveorder .notice{padding:5px 0 0}aside .step .step-box .change-design{padding:4px}aside .step .step-box .change-design table tr{border-bottom:1px dotted #ccc}aside .step .step-box .change-design table tr:last-child{border-bottom:0}aside .step .finish-design{padding:20px 0}aside .step .finish-design button{width:100%;padding:8px 10px}#tshirt-content{position:relative}#tshirt-content .switch-border-design{position:absolute;top:5px;right:10px;color:red;font-size:11px}#tshirt-content .tshirt-image{padding:20px 0 0}#tshirt-content .tshirt-choice ul{list-style:none;padding-left:0;display:table;margin:auto}#tshirt-content .tshirt-choice ul li{float:left;margin:10px;cursor:pointer}#tshirt-content .tshirt-choice ul li .image{border:1px solid #ccc;padding:3px}#tshirt-content .tshirt-choice ul li.focus .image{border:1px solid red}#tshirt-content .tshirt-choice ul li .image img{width:50px;height:auto}#tshirt-design{background-color:#666}#tshirt-design .modal-dialog{width:75%;margin:0 auto}#tshirt-design .modal-dialog .modal-content{background-color:transparent;border-radius:0;border:0;-webkit-box-shadow:0 0 0 rgba(0,0,0,.5)!important;box-shadow:0 0 0 rgba(0,0,0,.5)!important}#tshirt-design .modal-dialog .modal-content .modal-header{padding:0 0 10px;border-bottom:0;border-shadow:none!important}#tshirt-design .modal-dialog .modal-content .modal-body{background-color:#f5f5f5;padding:0}#tshirt-design header{border-bottom:1px solid #ccc;background-color:#ddd}#tshirt-design header ul.nav{padding-left:0;list-style:none}#tshirt-design header ul.nav li{float:left;padding:8px 26px;border-right:1px solid #ccc;font-size:14px;cursor:pointer}#tshirt-design header ul.nav li.active,#tshirt-design header ul.nav li:hover{background-color:red;color:#fff}#tshirt-design header ul.nav li.active i.fa,#tshirt-design header ul.nav li:hover i.fa{color:#fff}#tshirt-design header ul.nav li i.fa{color:#fe070f;font-size:20px;margin-right:10px}#tshirt-design header .action button{padding:2px 10px;margin:6px 10px}#tshirt-design header .action button:hover{background-color:red;color:#fff}.aside .box-design-option{list-style:none;padding-left:0;margin-top:10px}.aside .box-design-option li{border:1px solid #cdcdcd;position:relative;margin-bottom:10px}.aside .box-design-option li .hover{background-color:#fddad4;opacity:.6;position:absolute;width:100%;height:100%;display:none}.aside .box-design-option li:hover .hover{display:block}.aside .box-design-option li .title{background:url(../images/bg1.png) repeat #cdcdcd;padding:3px 10px}.aside .box-design-option li .title i.fa{color:#000}.aside .box-design-option li .content i.fa{font-size:30px;color:#fe070f;margin:8px 0}.aside .box-design-option li .content .des{padding:3px 10px 3px 0}.aside .box-design-option li .content .color-patterns{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px;min-height:65px}.aside .box-design-option li .content .color-patterns .color-pattern-item{height:20px;float:left;margin-left:4px;margin-top:2px;width:20px;cursor:pointer;border:1px solid #ddd}.aside .box-design-option li .content .color-patterns .color-pattern-item:hover{outline:1px solid #ed1d24}.aside .box-design-option li .content .layer-item{text-align:center;border:1px #ddd solid;background:#FFF;padding:5px;font-size:12px;cursor:pointer}.aside .box-design-option li .content .layer-item:hover{background:#fcc}.aside #choice-text .content{padding:10px}.aside #choice-text .content ul.font-family-box{list-style:none;margin:10px 0;padding-left:0;height:180px;width:100%;overflow-y:scroll;border:1px solid silver}.aside #choice-text .content .font-family-box li{cursor:pointer;padding:4px 8px;border:0;border-bottom:1px solid silver;border-right:1px solid silver;font-size:16px}.aside #choice-text .content .spacing-letter .text-label{font-size:16px;padding:4px 0}.aside #choice-text .content .spacing-letter .box{border:1px solid #8c8c8c;box-shadow:0 0 5px #888;background-color:#f0f0f0}.aside #choice-text .content .spacing-letter .item{float:left}.aside #choice-text .content .spacing-letter .item i.fa{font-size:22px;margin:0;color:#000}.aside #choice-text .content .spacing-letter .item-text{padding:6px 20px;font-size:12px}.aside #choice-text .content .spacing-letter .item-plus{border-right:1px solid #8c8c8c}.aside #choice-text .content .spacing-letter .item-minus{border-left:1px solid #8c8c8c}.aside #choice-text .content .spacing-letter .item-minus,.aside #choice-text .content .spacing-letter .item-plus{padding:5px 6px 1px;cursor:pointer}.aside #choice-illustration li .content{padding:10px}.aside #choice-illustration li .content select{width:100%}.aside #choice-illustration li .content .illustration-list{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px;min-height:350px}.aside #choice-illustration li .content .illustration-list .illstration-item{height:60px;overflow:hidden;float:left;margin-left:6px;margin-top:5px;margin-bottom:5px;padding:2px;background:#e2e2e2;border:solid 2px #d7d7d7;cursor:pointer}.aside #choice-illustration li .content .illustration-list .illstration-item:hover{outline:2px solid #ed1d24}.aside #choice-illustration li .content .illustration-list .illstration-item img{width:50px;cursor:pointer}.aside #choice-illustration li .content .illustration-list .footer-bar{text-align:center;margin-top:5px}.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination{margin-right:5px;cursor:pointer;font-size:9px;color:#FFF;background:#666;text-transform:uppercase;padding:2px 5px}.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover{background:#999}#btn-choose-image{background:#ff0f00;cursor:pointer;margin:10px 0;padding:0 10px;color:#FFF;font-size:12px}#btn-choose-image:hover{background:#f8aeae}.aside #choice-image li .content{margin:0 10px;padding:10px 0}.aside #choice-image li .content .small-text{font-size:10px;margin-bottom:10px}.aside #choice-image{font-size:13px}.aside #imgLoader{display:none}.aside #choice-image li .content .list-images{height:300px;background:#FFF;border:1px solid #DDD}.tshirt-design-container{position:relative}.tshirt-design-container .design-content{padding:10px 30px 10px 15px}.tshirt-design-container .design-content .content{width:100%;min-height:650px;background-color:#f0efea;padding:40px;height:100%}.tshirt-design-container .design-content .content .selection-design{border:1px solid red;width:100%;height:620px}.tshirt-design-container .agree-design{position:absolute;right:-16px;top:40%}.tshirt-design-container .trash-design{position:absolute;right:5px;bottom:0}footer{background-color:#333}footer ul.nav-footer{padding-left:0;list-style:none}footer ul.nav-footer li{float:left;padding:3px 10px;border-right:1px dotted #fff}footer ul.nav-footer li a{color:#fff;font-size:11px} |