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