Blame view
app/styles/main.css
21.1 KB
|
c87bc1f33
|
1 |
/* Space out content a bit */ |
|
87c93a029
|
2 |
@import "../fonts/font.css"; |
|
97d46dae2
|
3 4 |
/*@import "../fonts/font_canvas/font-canvas.css";*/
@import url('https://fonts.googleapis.com/css?family=Abel|Amatic+SC|Anton|Aref+Ruqaa|Bitter|Bree+Serif|Bungee|Bungee+Inline|Cabin|Crimson+Text|Dancing+Script|Dosis|Fjalla+One|Gloria+Hallelujah|Hind|Inconsolata|Indie+Flower|Josefin+Sans|Lato|Lobster|Lora|Maitree|Merriweather|Merriweather+Sans|Montserrat|Muli|Noto+Sans|Nunito|Open+Sans|Open+Sans+Condensed:300|Orbitron|Oswald|Oxygen|PT+Sans+Narrow|Permanent+Marker|Playfair+Display|Raleway|Reem+Kufi|Roboto|Shadows+Into+Light|Slabo+27px|Source+Code+Pro|Source+Sans+Pro|Tillana|Titillium+Web|Yanone+Kaffeesatz|Yrsa');
|
|
0136530e3
|
5 |
@import "placedesign.css"; |
|
2f4c31749
|
6 7 8 9 |
html{
height:100%;
width:100%;
}
|
|
c87bc1f33
|
10 |
body {
|
|
836a597e5
|
11 |
font-family: 'Hiragino Kaku Gothic Pro', sans-serif; |
|
2f4c31749
|
12 13 |
height:100%;
width:100%;
|
|
862daa8a4
|
14 |
} |
|
04cbb68af
|
15 16 17 18 19 |
/*Scroll bar style*/
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
|
|
2f4c31749
|
20 21 22 |
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
|
|
04cbb68af
|
23 24 25 26 27 28 |
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
/*End scroll bar style*/
|
|
862daa8a4
|
29 30 31 32 33 |
.padding-right-0{
padding-right: 0!important;
}
.padding-left-0{
padding-left: 0!important;
|
|
e7c9c7707
|
34 35 36 37 38 |
}
button.red{
color: #ffffff;
background-color: #ff0000;
border: 1px solid #ff0000;
|
|
236cbc7b4
|
39 40 41 42 43 44 45 46 47 48 |
}
button.yellow1{
background:url("../images/bgbutton1.png") repeat #ff801d;
color: #ffffff;
border: 1px solid #ff801d;
}
button.yellow2{
background:url("../images/bgbutton2.png") repeat #ff801d;
color: #ffffff;
border: 1px solid #ff801d;
|
|
c87bc1f33
|
49 |
} |
|
e7c9c7707
|
50 |
button.white{
|
|
236cbc7b4
|
51 52 |
border: 1px solid #ff801d;
color: #ff801d;
|
|
e7c9c7707
|
53 54 55 56 57 58 59 60 |
background-color: #ffffff;
}
button.brown{
background-color: #666666;
border: 1px solid #666666;
color: #ffffff;
border-radius: 5px;
}
|
|
862daa8a4
|
61 62 63 64 65 66 |
button.black{
border: 1px solid #c9c9c9;
background-color: #343434;
color: #ffffff;
padding: 1px 6px;
}
|
|
236cbc7b4
|
67 68 69 70 |
button.none{
border: 0;
background-color: transparent;
}
|
|
e7c9c7707
|
71 |
#tshirt-container{
|
|
8f087d204
|
72 73 |
border-left: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
|
|
c87bc1f33
|
74 |
} |
|
8f087d204
|
75 76 77 |
/*HEADER*/
header{
border-bottom: 1px solid #dcdcdc;
|
|
c87bc1f33
|
78 |
} |
|
8f087d204
|
79 |
header .logo{
|
|
5c778530c
|
80 |
padding-left: 0!important; |
|
c87bc1f33
|
81 |
} |
|
8f087d204
|
82 |
header .logo img{
|
|
5c778530c
|
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 |
height: 60px;
}
header .social-share{
list-style: none;
background-color: #eeeeee;
display: table;
padding-left: 0;
margin-bottom: 0;
}
header .social-share li{
float: left;
margin: 15px 15px;
background-color: #c5c5c5;
width: 30px;
height: 30px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
text-align: center;
padding: 6px 0;
}
header .social-share li i{
font-size: 20px;
color: #ffffff;
}
header .top-menu{
list-style: none;
padding-left: 0;
|
|
c55955c06
|
111 |
margin-bottom: 5px; |
|
5c778530c
|
112 113 114 |
}
header .top-menu li{
float: left;
|
|
c55955c06
|
115 116 117 118 119 120 121 122 123 124 125 |
padding: 6px 0;
}
header .top-menu li a{
color: #000000;
padding: 0 10px;
border-right: 1px solid #000000;
font-size: 12px;
}
header .top-menu li:last-child a{
border-right: 0;
|
|
5c778530c
|
126 127 128 129 130 131 132 133 134 135 136 137 138 |
}
header .top-control{
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
header .top-control li{
float: left;
margin: 0 10px;
}
header .top-control li .bt-yellow{
background-color: #fe6a00;
color: #ffffff;
|
|
c55955c06
|
139 |
padding: 3px 10px; |
|
5c778530c
|
140 141 142 143 144 |
font-size: 12px;
}
header .user-control{
background-color: #888888;
text-align: center;
|
|
c87bc1f33
|
145 |
} |
|
c55955c06
|
146 147 148 149 150 151 152 153 154 155 156 |
header .user-control div{
font-size: 12px;
color: #ffffff;
}
header .user-control div:first-child{
padding: 10px 10px;
}
header .user-control div:last-child{
background-color: #fe6a00;
padding: 3px 10px;
}
|
|
8f087d204
|
157 158 159 |
/*NAVIGATION*/
nav{
border-bottom: 1px solid #dcdcdc;
|
|
c55955c06
|
160 |
padding: 5px 0; |
|
c87bc1f33
|
161 |
} |
|
8f087d204
|
162 |
nav h2{
|
|
862daa8a4
|
163 |
font-size: 27px; |
|
c55955c06
|
164 |
margin: 20px 0; |
|
c87bc1f33
|
165 |
} |
|
8f087d204
|
166 167 168 |
nav ul{
list-style: none;
padding-left: 0;
|
|
862daa8a4
|
169 |
margin-bottom: 0; |
|
a56541cf9
|
170 |
|
|
c87bc1f33
|
171 |
} |
|
8f087d204
|
172 |
nav ul li{
|
|
8f087d204
|
173 |
float: left; |
|
c55955c06
|
174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 |
}
nav ul li.line{
border-bottom: 2px dashed #000000;
width: 34px;
height: 34px;
}
nav ul li.line-action{
border-bottom: 2px dashed #fe6a00;
}
nav ul li.circle{
width: 70px;
height: 70px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
text-align: center;
font-size: 12px;
/*margin-left: 26px;*/
|
|
8f087d204
|
192 |
background-color: #999999; |
|
a56541cf9
|
193 |
position: relative; |
|
c55955c06
|
194 195 |
display: inline;
cursor: pointer;
|
|
a56541cf9
|
196 |
} |
|
c55955c06
|
197 198 |
nav ul li.circle a{
|
|
a56541cf9
|
199 |
color: #ffffff; |
|
c55955c06
|
200 |
position: absolute; |
|
a56541cf9
|
201 |
top: 50%; |
|
c55955c06
|
202 |
left: 50%; |
|
a56541cf9
|
203 204 |
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
c87bc1f33
|
205 |
} |
|
a56541cf9
|
206 207 208 209 |
nav ul li:hover a{
text-decoration: none;
color: #ffffff;
}
|
|
8f087d204
|
210 |
nav ul li.action{
|
|
c55955c06
|
211 |
background-color: #fe6a00; |
|
8f087d204
|
212 |
} |
|
e7c9c7707
|
213 214 |
/*ASIDE*/
aside{
|
|
862daa8a4
|
215 |
margin: 10px 0; |
|
e7c9c7707
|
216 |
} |
|
c55955c06
|
217 218 219 220 221 222 223 |
aside .break-left{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
|
|
e7c9c7707
|
224 225 226 227 228 229 230 231 |
aside .break-down{
padding: 0 0;
}
aside .break-down i.fa{
font-size: 35px;
color: #ff0000;
}
aside .break-line{
|
|
19a110aef
|
232 |
height: 10px; |
|
e7c9c7707
|
233 234 235 236 237 238 239 240 |
}
aside .break-line hr{
border-top: 1px dotted #cccccc;
}
aside .step{
margin: 0 0;
}
aside .step .title{
|
|
862daa8a4
|
241 |
font-size: 15px; |
|
e7c9c7707
|
242 243 |
line-height: 16px;
font-weight: bold;
|
|
862daa8a4
|
244 |
margin-bottom: 3px; |
|
e7c9c7707
|
245 |
} |
|
236cbc7b4
|
246 247 248 249 250 251 252 253 254 255 256 257 258 |
aside .step .title span:first-child {
float: left;
width: 28%
}
aside .step .title span:last-child{
float: left;
width: 72%;
padding: 6px 0;
}
aside .step .title span:last-child {
}
|
|
e7c9c7707
|
259 260 261 |
aside .step .title-notice{
font-size: 13px;
line-height: 16px;
|
|
236cbc7b4
|
262 |
margin-bottom: 5px; |
|
e7c9c7707
|
263 264 265 266 267 268 269 |
}
aside .step .title-notice .require{
font-size: 10px;
}
aside .step .step-box{
border: 2px solid #dcdcdc;
font-size: 12px;
|
|
236cbc7b4
|
270 |
position: relative; |
|
e7c9c7707
|
271 272 273 |
}
/*Step 1*/
aside .step .step-box .tshirt-design{
|
|
c55955c06
|
274 |
margin: 4px 4px; |
|
e7c9c7707
|
275 |
} |
|
990a1e38d
|
276 |
aside .step .step-box .tshirt-design:hover{
|
|
c55955c06
|
277 |
/*border: 1px solid #ff0000;*/ |
|
990a1e38d
|
278 279 280 281 282 |
}
aside .step .step-box .tshirt-design button:hover{
background-color: #fa7b7b;
border: 1px solid #fa7b7b;
}
|
|
e7c9c7707
|
283 |
aside .step .step-box .tshirt-design div{
|
|
c55955c06
|
284 |
/*float: left;*/ |
|
e7c9c7707
|
285 286 287 |
}
aside .step .step-box .tshirt-design .icon{
padding: 4px 4px;
|
|
c55955c06
|
288 289 |
text-align: center;
width: 100%;
|
|
e7c9c7707
|
290 291 |
}
aside .step .step-box .tshirt-design .icon img{
|
|
c55955c06
|
292 |
max-width: 100%; |
|
e7c9c7707
|
293 |
} |
|
236cbc7b4
|
294 |
|
|
e7c9c7707
|
295 |
aside .step .step-box .tshirt-design .name{
|
|
c55955c06
|
296 297 |
padding: 2px 4px;
text-align: center;
|
|
e7c9c7707
|
298 299 300 |
}
aside .step .step-box .tshirt-design .action{
|
|
c55955c06
|
301 302 |
/*padding: 10px 10px;*/
/*float: right;*/
|
|
e7c9c7707
|
303 304 305 |
}
aside .step .step-box .tshirt-design .action button{
|
|
c55955c06
|
306 307 |
padding: 6px 8px;
width: 100%;
|
|
e7c9c7707
|
308 309 310 |
}
/*Step 2*/
aside .step .step-box .tshirt-color{
|
|
236cbc7b4
|
311 312 |
padding: 6px 6px;
height: 100%;
|
|
e7c9c7707
|
313 314 |
position: relative; } |
|
236cbc7b4
|
315 |
|
|
e7c9c7707
|
316 317 318 319 320 |
aside .step .step-box .tshirt-color ul.choice-color{
float: left;
list-style: none;
padding-left: 0;
width: 100%;
|
|
862daa8a4
|
321 |
margin-bottom: 3px; |
|
e7c9c7707
|
322 323 |
}
aside .step .step-box .tshirt-color ul.choice-color li{
|
|
236cbc7b4
|
324 |
margin: 0 6px 6px 0; |
|
e7c9c7707
|
325 326 327 |
border: 1px solid #cccccc;
padding: 2px 2px;
float: left;
|
|
990a1e38d
|
328 329 330 331 332 333 334 |
cursor: pointer;
}
aside .step .step-box .tshirt-color ul.choice-color li.action{
border: 1px solid #ff0000;
}
aside .step .step-box .tshirt-color ul.choice-color li:hover{
border: 1px solid #ff0000;
|
|
e7c9c7707
|
335 336 |
}
aside .step .step-box .tshirt-color ul.choice-color li div{
|
|
236cbc7b4
|
337 338 339 |
height: 26px;
width: 26px;
margin: 0;
|
|
e7c9c7707
|
340 341 342 343 344 345 346 347 |
}
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;
}
|
|
236cbc7b4
|
348 349 350 351 352 353 354 355 |
aside .step .step-box .choice-color-bottom{
position: absolute;
bottom: 0;
left: 0;
width: 80%;
margin: 0 10%;
}
aside .step .step-box .choice-color-bottom .color-name{
|
|
e7c9c7707
|
356 |
width: 100%; |
|
236cbc7b4
|
357 358 359 |
font-size: 12px;
text-align: center;
padding: 4px 0;
|
|
e7c9c7707
|
360 |
} |
|
236cbc7b4
|
361 362 |
aside .step .step-box .choice-color-bottom .view-more{
text-align: right;
|
|
e7c9c7707
|
363 364 365 |
}
/*Step 3*/
aside .step .step-box .tshirt-saveorder{
|
|
236cbc7b4
|
366 |
padding: 10px 10px 10px 10px; |
|
e7c9c7707
|
367 368 369 370 371 372 373 374 375 376 377 378 |
}
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{
|
|
236cbc7b4
|
379 380 |
padding: 4px 10px;
width: 100%;
|
|
e7c9c7707
|
381 |
} |
|
c55955c06
|
382 |
|
|
236cbc7b4
|
383 |
|
|
e7c9c7707
|
384 |
/*Step 4*/ |
|
e7c9c7707
|
385 |
|
|
e7c9c7707
|
386 |
aside .step .step-box .change-design{
|
|
236cbc7b4
|
387 |
/*padding: 4px 4px;*/ |
|
e7c9c7707
|
388 389 |
}
aside .step .step-box .change-design table{
|
|
236cbc7b4
|
390 |
width: 100%; |
|
e7c9c7707
|
391 392 393 394 |
}
aside .step .step-box .change-design table tr{
border-bottom: 1px dotted #cccccc;
}
|
|
236cbc7b4
|
395 396 397 398 399 400 401 402 403 404 405 |
aside .step .step-box .change-design table tr td{
padding: 4px 3px;
}
aside .step .step-box .change-design table tr td:first-child{
background-color: #ededed;
}
aside .step .step-box .change-design table tr td:last-child{
background: url("../images/bgbutton2.png");
color: #ffffff;
font-size: 15px;
}
|
|
e7c9c7707
|
406 407 408 409 410 411 |
aside .step .step-box .change-design table tr:last-child{
border-bottom: 0;
}
/*Step 5- finish*/
aside .step .finish-design{
|
|
862daa8a4
|
412 |
padding: 20px 0; |
|
e7c9c7707
|
413 414 415 |
}
aside .step .finish-design button{
width: 100%;
|
|
862daa8a4
|
416 |
padding: 8px 10px; |
|
e7c9c7707
|
417 418 419 420 |
}
/*DESIGN CONTENT*/
#tshirt-content{
|
|
862daa8a4
|
421 422 423 424 425 426 427 428 |
position: relative;
}
#tshirt-content .switch-border-design{
position: absolute;
top: 5px;
right: 10px;
color: red;
font-size: 11px;
|
|
236cbc7b4
|
429 |
cursor: pointer; |
|
2f1fcd7ad
|
430 |
z-index: 99; |
|
e7c9c7707
|
431 432 |
}
#tshirt-content .tshirt-image{
|
|
19a110aef
|
433 |
padding: 20px 0 0 0; |
|
2f4c31749
|
434 435 436 |
position: relative;
height: 100%;
width: 100%;
|
|
e7c9c7707
|
437 |
} |
|
80ff9bbd4
|
438 |
|
|
010854c35
|
439 440 441 |
#tshirt-content .tshirt-image img{
width: 100%;
}
|
|
e7c9c7707
|
442 443 444 445 446 447 448 449 450 451 452 |
#tshirt-content .tshirt-choice{
}
#tshirt-content .tshirt-choice ul{
list-style: none;
padding-left: 0;
display: table;
margin: auto;
}
#tshirt-content .tshirt-choice ul li{
float: left;
|
|
e7c9c7707
|
453 |
margin: 10px 10px; |
|
422e7837d
|
454 |
cursor: pointer; |
|
e7c9c7707
|
455 456 457 458 459 460 461 462 463 464 465 |
}
#tshirt-content .tshirt-choice ul li .image{
border: 1px solid #cccccc;
padding: 3px 3px;
}
#tshirt-content .tshirt-choice ul li.focus{
}
#tshirt-content .tshirt-choice ul li.focus .image{
border: 1px solid #ff0000;
}
|
|
422e7837d
|
466 467 468 469 |
#tshirt-content .tshirt-choice ul li .image img{
width: 50px;
height: auto;
}
|
|
5fe93ca88
|
470 471 |
/*MODAL Design*/
#tshirt-design{
|
|
862daa8a4
|
472 |
background-color: #666666; |
|
5fe93ca88
|
473 474 |
}
#tshirt-design .modal-dialog{
|
|
2f4c31749
|
475 |
/*width: 800px!important;*/ |
|
5fe93ca88
|
476 477 478 479 480 481 |
margin: 0 auto;
}
#tshirt-design .modal-dialog .modal-content{
background-color: transparent;
border-radius: 0;
border: 0;
|
|
a56541cf9
|
482 483 |
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
|
|
5fe93ca88
|
484 485 486 487 |
}
#tshirt-design .modal-dialog .modal-content .modal-header{
padding: 0 0 10px 0;
border-bottom: 0;
|
|
862daa8a4
|
488 |
border-shadow: none!important; |
|
5fe93ca88
|
489 490 |
}
#tshirt-design .modal-dialog .modal-content .modal-body{
|
|
862daa8a4
|
491 |
background-color: #f5f5f5; |
|
5fe93ca88
|
492 493 494 |
padding: 0 0;
}
#tshirt-design header{
|
|
862daa8a4
|
495 496 |
border-bottom: 1px solid #cccccc;
background-color: #dddddd;
|
|
5fe93ca88
|
497 498 499 500 501 502 503 |
}
#tshirt-design header ul.nav{
padding-left: 0;
list-style: none;
}
#tshirt-design header ul.nav li{
float: left;
|
|
862daa8a4
|
504 505 506 507 508 |
padding: 8px 26px;
border-right: 1px solid #cccccc;
font-size: 14px;
cursor: pointer;
}
|
|
6f105dbd5
|
509 |
#tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
|
|
236cbc7b4
|
510 |
background-color: #ff7200; |
|
862daa8a4
|
511 512 |
color: #ffffff; } |
|
6f105dbd5
|
513 |
#tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
|
|
862daa8a4
|
514 515 516 |
color: #ffffff;
}
#tshirt-design header ul.nav li i.fa{
|
|
236cbc7b4
|
517 |
color: #fc7500; |
|
862daa8a4
|
518 519 520 521 522 523 524 |
font-size: 20px;
margin-right: 10px;
}
#tshirt-design header .action{
}
#tshirt-design header .action button{
|
|
19a110aef
|
525 526 |
padding: 2px 10px;
margin: 6px 10px;
|
|
862daa8a4
|
527 528 529 530 |
}
#tshirt-design header .action button:hover{
background-color: red;
color: #ffffff;
|
|
5fe93ca88
|
531 |
} |
|
e7c9c7707
|
532 |
|
|
5fe93ca88
|
533 534 |
/*Aside modal*/
.aside{
|
|
5fe93ca88
|
535 |
} |
|
c8bfdfd96
|
536 537 |
.aside .box-design-option{
|
|
5fe93ca88
|
538 539 |
list-style: none;
padding-left: 0;
|
|
862daa8a4
|
540 |
margin-top: 10px; |
|
c8bfdfd96
|
541 |
} |
|
862daa8a4
|
542 |
|
|
c8bfdfd96
|
543 |
.aside .box-design-option li{
|
|
862daa8a4
|
544 |
border: 1px solid #cdcdcd; |
|
a56541cf9
|
545 |
position: relative; |
|
682a3b12d
|
546 |
/*cursor: pointer;*/ |
|
e5669639a
|
547 |
margin-bottom: 10px; |
|
862daa8a4
|
548 |
} |
|
c8bfdfd96
|
549 |
.aside .box-design-option li .hover{
|
|
862daa8a4
|
550 |
background-color: #fddad4; |
|
a56541cf9
|
551 552 553 554 |
opacity: 0.6;
position: absolute;
width: 100%;
height: 100%;
|
|
862daa8a4
|
555 556 |
display: none; } |
|
c8bfdfd96
|
557 |
.aside .box-design-option li:hover .hover{
|
|
862daa8a4
|
558 559 |
display: block; } |
|
c8bfdfd96
|
560 |
.aside .box-design-option li .title{
|
|
862daa8a4
|
561 562 563 |
background: url("../images/bg1.png") repeat #cdcdcd;
padding: 3px 10px;
}
|
|
c8bfdfd96
|
564 |
.aside .box-design-option li .title i.fa{
|
|
862daa8a4
|
565 566 |
color: #000000; } |
|
c8bfdfd96
|
567 |
.aside .box-design-option li .content{
|
|
862daa8a4
|
568 569 |
} |
|
c8bfdfd96
|
570 |
.aside .box-design-option li .content i.fa{
|
|
862daa8a4
|
571 |
font-size: 30px; |
|
236cbc7b4
|
572 |
color: #ff7200; |
|
862daa8a4
|
573 574 |
margin: 8px 0; } |
|
c8bfdfd96
|
575 |
.aside .box-design-option li .content .des{
|
|
862daa8a4
|
576 577 |
padding: 3px 10px 3px 0; } |
|
04cbb68af
|
578 579 580 581 582 |
.aside .box-design-option li .content .color-patterns {
width: 100%;
border: #bbb solid 1px;
background: #FFF;
margin-top: 5px;
|
|
e5669639a
|
583 |
min-height: 65px; |
|
04cbb68af
|
584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 |
}
.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;
}
|
|
80ff9bbd4
|
599 600 601 602 603 604 605 606 |
.aside .box-design-option li .title .reset-color-patterns {
cursor: pointer;
}
.aside .box-design-option li .title .reset-color-patterns:hover {
opacity: 0.6;
}
|
|
04cbb68af
|
607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 |
.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: #ffcccc;
}
/*Design Text*/
.aside #choice-text{
}
.aside #choice-text .content{
padding: 10px 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 #c0c0c0;
}
|
|
862daa8a4
|
637 |
|
|
04cbb68af
|
638 639 640 641 642 643 644 |
.aside #choice-text .content .font-family-box li{
cursor: pointer;
padding: 4px 8px;
border: 0;
border-bottom: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
font-size: 16px;
|
|
2f4c31749
|
645 646 647 648 |
margin-bottom: 0;
}
.aside #choice-text .content .font-family-box li.active{
border: 1px solid #fe070f;
|
|
04cbb68af
|
649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 |
}
.aside #choice-text .content .spacing-letter{
}
.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 #888888;
background-color: #f0f0f0;
}
.aside #choice-text .content .spacing-letter .item{
float: left;
}
|
|
2f4c31749
|
665 666 667 |
.aside #choice-text .content .spacing-letter .item:hover{
background-color: #fddad4;
}
|
|
04cbb68af
|
668 669 670 671 672 673 674 675 |
.aside #choice-text .content .spacing-letter .item i.fa{
font-size: 22px;
margin: 0 0;
color: #000000;
}
.aside #choice-text .content .spacing-letter .item-text{
padding: 6px 20px;
|
|
2f4c31749
|
676 |
font-size: 13px; |
|
04cbb68af
|
677 678 679 680 681 682 683 684 685 686 687 |
}
.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-plus, .aside #choice-text .content .spacing-letter .item-minus {
padding: 5px 6px 1px 6px;
cursor: pointer;
}
|
|
c8bfdfd96
|
688 |
/*Design Choice Illustration*/ |
|
6f105dbd5
|
689 690 691 692 693 694 695 696 697 698 699 700 701 |
.aside #choice-illustration li .content {
padding: 10px 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;
|
|
e32d6b2cb
|
702 703 |
min-height: 310px;
padding-bottom: 20px;
|
|
6f105dbd5
|
704 705 706 |
}
.aside #choice-illustration li .content .illustration-list .illstration-item{
|
|
19a541686
|
707 |
height: 60px; |
|
6f105dbd5
|
708 709 |
overflow: hidden;
float: left;
|
|
19a541686
|
710 711 712 713 714 715 |
margin-left: 6px;
margin-top: 5px;
margin-bottom: 5px;
padding: 2px;
background: #e2e2e2;
border: solid 2px #d7d7d7;
|
|
1de5c616d
|
716 |
cursor: pointer; |
|
6f105dbd5
|
717 718 719 720 721 722 723 |
}
.aside #choice-illustration li .content .illustration-list .illstration-item:hover {
outline: 2px solid #ed1d24;
}
.aside #choice-illustration li .content .illustration-list .illstration-item img {
|
|
19a541686
|
724 |
width: 50px; |
|
6f105dbd5
|
725 726 |
cursor: pointer; } |
|
2681003ca
|
727 |
.illustration-list .footer-bar, .saved-list .footer-bar {
|
|
e32d6b2cb
|
728 729 730 731 732 733 |
text-align: center;
margin-top: 5px;
bottom: 10px;
position: absolute;
width: 100%;
padding-right: 20px;
|
|
682a3b12d
|
734 |
} |
|
53828b4e7
|
735 |
.footer-bar .footer-pagination {
|
|
682a3b12d
|
736 737 738 739 740 741 742 743 |
margin-right: 5px;
cursor: pointer;
font-size: 9px;
color: #FFF;
background: #666666;
text-transform: uppercase;
padding: 2px 5px;
}
|
|
53828b4e7
|
744 |
.footer-bar .footer-pagination:hover {
|
|
682a3b12d
|
745 746 |
background: #999999; } |
|
e0ee74c15
|
747 748 749 750 751 752 |
.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {
background-color: #FFF;
margin:0;
padding:0;
}
|
|
682a3b12d
|
753 |
|
|
e0ee74c15
|
754 |
/* Insert image*/ |
|
e5669639a
|
755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 |
#btn-choose-image {
background: #ff0f00;
cursor: pointer;
margin: 10px 0px;
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;
}
|
|
6f105dbd5
|
772 |
|
|
e5669639a
|
773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 |
.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;
}
|
|
6f105dbd5
|
791 |
|
|
bd0414901
|
792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 |
.aside #choice-image li .content .list-images .recent-img{
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-image li .content .list-images .recent-img:hover {
outline: 2px solid #ed1d24;
}
.aside #choice-image li .content .list-images .recent-img img {
width: 50px;
cursor: pointer;
}
|
|
862daa8a4
|
813 814 |
/*Design content*/
.tshirt-design-container{
|
|
4ae9cc634
|
815 |
|
|
862daa8a4
|
816 817 |
}
.tshirt-design-container .design-content{
|
|
2f4c31749
|
818 |
padding: 10px 0; |
|
862daa8a4
|
819 820 821 |
}
.tshirt-design-container .design-content .content{
width: 100%;
|
|
2f4c31749
|
822 |
height: 100%; |
|
4ae9cc634
|
823 824 |
min-height: 600px;
position: relative;
|
|
422e7837d
|
825 |
padding: 40px 40px; |
|
862daa8a4
|
826 827 828 |
}
.tshirt-design-container .design-content .content .selection-design{
border: 1px solid #ff0000;
|
|
862daa8a4
|
829 830 831 832 833 |
}
.tshirt-design-container .agree-design{
position: absolute;
right: -16px;
top: 40%;
|
|
80ff9bbd4
|
834 835 836 837 |
cursor: pointer;
}
.tshirt-design-container .agree-design:hover{
opacity: 0.8;
|
|
862daa8a4
|
838 839 840 841 842 |
}
.tshirt-design-container .trash-design{
position: absolute;
right: 5px;
bottom: 0;
|
|
5fe93ca88
|
843 |
} |
|
e0ee74c15
|
844 845 846 |
.tshirt-design-container .trash-design:hover{
opacity: 0.5;
}
|
|
d7aae10e2
|
847 848 849 850 851 |
.object-border{
position: absolute;
background-color: rgb(0, 108, 255);
border: 0;
display:none;
|
|
c674a3608
|
852 |
transform-origin: 0% 0%; |
|
d7aae10e2
|
853 854 855 856 857 858 859 |
}
#object-border-top, #object-border-bottom{
height: 2px;
}
#object-border-right, #object-border-left{
width: 2px;
}
|
|
a56541cf9
|
860 861 862 863 864 865 866 867 868 |
/*FOOTER*/
footer{
background-color: #333333;
}
footer ul.nav-footer{
padding-left: 0;
list-style: none;
|
|
236cbc7b4
|
869 870 871 |
float: left;
width: 80%;
margin-bottom: 0
|
|
a56541cf9
|
872 873 874 875 876 877 878 879 880 881 882 |
}
footer ul.nav-footer li{
float: left;
padding: 3px 10px;
border-right: 1px dotted #ffffff;
}
footer ul.nav-footer li a{
color: #ffffff;
font-size: 11px;
}
|
|
236cbc7b4
|
883 884 885 886 887 888 889 890 891 892 893 894 895 896 |
footer .logo-bottom{
float: left;
width: 20%;
margin-bottom: 0;
text-align: right;
}
footer .logo-bottom img{
height: 25px;
max-width: 100%;
}
.footer{
padding: 15px 0;
text-align: center;
}
|
|
8f087d204
|
897 898 899 900 901 |
/* Customize container */
@media (min-width: 768px) {
.container {
/*max-width: 730px;*/
}
|
|
c87bc1f33
|
902 903 904 905 906 |
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
|
|
8f087d204
|
907 |
|
|
c87bc1f33
|
908 |
} |
|
e0ee74c15
|
909 910 911 912 |
@media (min-width: 1024px) {
#tshirt-design .modal-dialog{
min-width: 1000px;
|
|
2f4c31749
|
913 |
width: 1000px; |
|
e0ee74c15
|
914 |
} |
|
a3d420e25
|
915 |
} |
|
236cbc7b4
|
916 |
/*Mobile responsive*/ |
|
2f4c31749
|
917 918 |
@media (max-width: 762px) {
.modal-dialog{
|
|
2f4c31749
|
919 920 921 922 923 924 925 926 927 928 |
margin: 0 0!important;
}
#tshirt-design header .menu-nav{
overflow-x: scroll!important;
-webkit-overflow-scrolling: touch;
}
#tshirt-design header ul.nav {
text-align: justify;
width: 680px;
|
|
2f4c31749
|
929 930 931 932 933 934 935 936 937 938 939 |
}
#tshirt-design header ul.nav li {
display: inline-block; /* 6 */
}
.tshirt-design-container .design-content .content{
padding: 14px 14px;
}
.tshirt-design-container .design-content{
padding: 0 0;
|
|
a3d420e25
|
940 |
} |
|
236cbc7b4
|
941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 |
/*Header*/
header .logo{
text-align: left;
}
header .top-control li{
margin: 0 4px;
}
header .top-menu{
display: table;
margin: auto;
}
header .social-share{
display: none;
}
header .col-sm-6{
padding: 0!important;
}
header .user-control{
position: absolute;
right: 0;
top: -120%;
}
/*Footer*/
footer ul.nav-footer{
width: 100%;
}
footer .logo-bottom{
display: none;
}
|
|
faf1542f8
|
970 971 972 973 974 975 976 |
}
#tshirt-design-saved .subframe-design {
width: 80%;
margin: auto;
|
|
53828b4e7
|
977 |
margin-top: 100px; |
|
faf1542f8
|
978 979 980 981 |
border: 10px solid rgb(0, 0, 0);
border: 20px solid rgba(0, 0, 0, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
|
|
53828b4e7
|
982 |
background: #FFF; |
|
faf1542f8
|
983 984 985 |
}
#tshirt-design-saved .modal-content button.close {
|
|
53828b4e7
|
986 |
margin-right: 103px; |
|
faf1542f8
|
987 |
font-size: 41px; |
|
53828b4e7
|
988 |
margin-top: -8px; |
|
faf1542f8
|
989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 |
}
#tshirt-design-saved .subframe-design .nav-tabs {
background: rgba(0, 0, 0, .5);
border-bottom: 1px solid #F5F5F5;
}
#tshirt-design-saved .subframe-design .nav-tabs li a {
text-decoration: none;
background-color: #CCC;
cursor: pointer;
margin-right: 10px;
padding: 2px 30px;
color: #000;
font-weight: 600;
border-bottom: 1px solid #F5F5F5
}
#tshirt-design-saved .subframe-design .nav-tabs li.active a {
background: #F5F5F5;
color: #fe070f;
}
#tshirt-design-saved .subframe-design .tab-content {
background: #F5F5F5;
width: 100%;
min-height: 400px;
|
|
53828b4e7
|
1016 1017 1018 1019 1020 1021 |
}
#tshirt-design-saved .saved-list {
width: 100%;
border: #bbb solid 1px;
background: #FFF;
|
|
2681003ca
|
1022 |
margin-top: 0px; |
|
53828b4e7
|
1023 |
min-height: 400px; |
|
2681003ca
|
1024 |
padding: 10px; |
|
53828b4e7
|
1025 1026 1027 |
}
#tshirt-design-saved .saved-list .saved-item{
|
|
2681003ca
|
1028 |
width: 100px; |
|
53828b4e7
|
1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 |
height: 100px;
overflow: hidden;
float: left;
margin-left: 6px;
margin-top: 5px;
margin-bottom: 5px;
padding: 2px;
background: #e2e2e2;
border: solid 2px #d7d7d7;
cursor: pointer;
}
#tshirt-design-saved .saved-list .saved-item:hover {
outline: 2px solid #ed1d24;
}
#tshirt-design-saved .saved-list .saved-item img {
width: 100px;
cursor: pointer;
}
|
|
2681003ca
|
1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 |
#tshirt-design-saved .saved-list .saved-item button {
background: #ff0f00;
color: #FFF;
border: 0;
position: absolute;
margin-left: -5px;
margin-top: -5px;
padding: 0 5px;
}
#tshirt-design-saved .saved-list .saved-item button:hover {
background: #ffcccc;
}
|
|
53828b4e7
|
1061 1062 1063 |
#tshirt-design-saved .saved-list .footer-bar {
bottom: 20px;
|
|
2681003ca
|
1064 |
width: 75%; |
|
e0ee74c15
|
1065 |
} |