source: branches/version-2_11-dev/html/user_data/packages/sphone/css/products.css @ 21159

Revision 21159, 12.1 KB checked in by nanasess, 13 years ago (diff)

#1413 不要なマークアップ削除

  • 郵便番号検索が動作していないのを修正
  • 再発行したパスワードがコピーできないのを修正
  • Property svn:mime-type set to text/plain
Line 
1@charset "utf-8";
2/* ===================================================================
3CSS information
4
5file name  :contents.css
6style info :コンテンツ用(商品一覧/検索結果/商品詳細)
7
8=================================================================== */
9/* -----------------------------------------------
10商品一覧・商品詳細・商品検索結果共通
11----------------------------------------------- */
12.pagenumberarea{
13margin-top:10px;
14padding:10px 0;
15box-shadow:0 1px 1px 1px rgba(255,255,255,1) inset;
16-webkit-box-shadow:0 1px 1px 0 rgba(255,255,255,1) inset;
17-moz-box-shadow: 0 1px 1px rgba(255,255,255,1) inset;
18border-top: 1px solid #CCC;
19border-bottom: 1px solid #CCC;
20background:#EEE;
21display:block;
22}
23.pagenumberarea ul{
24width:95%;
25margin:0 auto;
26border:#A9ABAD solid 1px;
27border-radius: 5px;
28-webkit-border-radius: 5px;
29-moz-border-radius: 5px;
30display:block;
31}
32.pagenumberarea li {
33color: #000;
34font-size:16px;
35font-weight:bold;
36margin:0;
37padding:0;
38display:inline;
39float: left;
40width: 50%;
41text-align:center;
42color:#FFF;
43background:#5393c5;
44background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%);
45background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2));
46text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
47}
48.pagenumberarea li a:link,.pagenumberarea li a:visited{
49color:#000;
50}
51.pagenumberarea li a {
52color: #FFF;
53display: block;
54padding:5px 0;
55text-decoration: none;
56text-shadow: 1px 1px 1px rgba(255,255,255,1);
57}
58.pagenumberarea li.on_number{
59color: #FFF;
60display: block;
61padding:5px 0;
62text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
63}
64.pagenumberarea li:first-child{
65border-radius: 5px 0 0 5px;
66-moz-border-radius: 5px 0 0 5px;
67-webkit-border-radius: 5px 0 0 5px;
68}
69.pagenumberarea li:last-child{
70border-radius: 0 5px 5px 0;
71-moz-border-radius: 0 5px 5px 0;
72-webkit-border-radius: 0 5px 5px 0;
73}
74.pagenumberarea li:first-child a{
75border-radius: 5px 0 0 5px;
76-moz-border-radius: 5px 0 0 5px;
77-webkit-border-radius: 5px 0 0 5px;
78border-right:#A9ABAD solid 1px;
79text-shadow: 1px 1px 1px rgba(255,255,255,1);
80background:#FDFDfD;
81background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%);
82background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3));
83}
84.pagenumberarea li:last-child a{
85border-radius: 0 5px 5px 0;
86-moz-border-radius: 0 5px 5px 0;
87-webkit-border-radius: 0 5px 5px 0;
88border-left:#FFF solid 1px;
89text-shadow: 1px 1px 1px rgba(255,255,255,1);
90background:#FDFDfD;
91background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%);
92background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3));
93box-shadow:  1px 0px 1px 1px rgba(255,255,255,1) inset;
94-webkit-box-shadow: 1px 0px 1px 0px rgba(255,255,255,1) inset;
95-moz-box-shadow: 1px 1px 1px 0px rgba(255,255,255,1) inset;
96}
97.pagenumberarea li.on_number{
98color:#FFF;
99text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
100background:#5393c5;
101background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%);
102background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2));
103}
104ul.status_icon {
105clear:both;
106}
107ul.status_icon li{
108color:#FFF;
109background:#9AAABD;
110display:inline;
111float:left;
112margin-right :5px;
113margin-bottom:2px;
114padding:2px 5px;
115font-size:11px;
116text-shadow:none;
117}
118/* -----------------------------------------------
119商品一覧
120----------------------------------------------- */
121#product_list{
122padding-bottom:35px;
123}
124
125/* アイテムリスト(div)の処理
126----------------------------------------------- */
127.list_area {
128margin: 0;
129padding:10px 5px 15px 10px;
130background-color:#FEFEFE;
131background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE));
132background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE));
133border-top:#FFF solid 1px;
134border-bottom:#CCC solid 1px;
135display:block;
136clear:both;
137position:relative;
138cursor:pointer;
139}
140.list_area ul.status_icon{
141margin-bottom:5px;
142}
143.listphoto{
144margin:0 10px 10px 0;
145float:left;
146clear:left;
147}
148.listrightblock {
149width:67%;
150float:right;
151padding-right:10px;
152}
153.listrightblock h3{
154font-size:15px;
155clear:both;
156}
157.listrightblock .listcomment{
158line-height:1.4;
159}
160
161/* -----------------------------------------------
162商品詳細
163----------------------------------------------- */
164#product_detail{
165padding-bottom:35px;
166}
167/*商品情報*/
168#detailarea {
169background:#F0F0F1;
170padding:20px 10px 35px 10px;
171}
172#detailrightblock{
173margin-top:25px;
174padding:0;
175background:#FFF;
176border:#CCC solid 1px;
177border-radius:7px;
178-moz-border-radius:7px;
179-webkit-border-radius:7px;
180}
181#detailrightblock div:after {
182content: "."; 
183display: block;
184clear: both;
185height: 0;
186visibility: hidden;
187}
188#detailrightblock div{
189border-bottom:#CCC solid 1px;
190}
191#detailrightblock div#cartbtn_default {
192border-bottom:none;
193}
194#detailrightblock div:last-child{
195border-bottom:none;
196border-radius:0 0 7px 7px;
197-moz-border-radius: 0 0 7px 7px;
198-webkit-border-radius: 0 0 7px 7px;
199}
200/*ステータスアイコン*/
201#detailrightblock .status_icon{
202padding:10px 12px;
203border-bottom:#CCC solid 1px;
204}
205/*商品情報(テキストなど)*/
206#detailrightblock .product_detail{
207padding:12px;
208border-bottom:#CCC solid 1px;
209}
210#detailrightblock h3{
211font-size:14px;
212clear:both;
213}
214#detailrightblock .price{
215font-size:14px;
216}
217#detailrightblock .normal_price{
218font-size:11px;
219}
220.relative_cat{
221font-size:12px;
222margin-bottom:10px;
223}
224
225/*商品情報(規格部分)*/
226.cart_area{
227padding:12px;
228}
229.cart_area dl {
230margin: 0;
231padding:0;
232}
233.cart_area dt {
234margin: 0;
235font-weight: bold;
236line-height: 1.3;
237}
238.cart_area dd {
239padding:0;
240clear:both;
241padding-bottom:5px;
242}
243.cart_area dd:last-child {
244padding-bottom:0;
245}
246
247/*商品情報(数量)*/
248.cartin_btn{
249padding:15px 15px 15px 8px;
250background:#F1F0E7;
251border-top:#FFF solid 1px;
252}
253.cartin_btn dl{
254width:40%;
255float:left;
256clear:left;
257}
258.cartin_btn dt{
259width:2em;
260float:left;
261padding:15px 5px 0 5px;
262line-height:1.1;
263font-weight:bold;
264}
265.cartin_btn dd{
266width:3.2em;
267display:inline;
268float:left;
269padding-top:5px;
270}
271.detail_quantity dd .quantitybox{
272width:3em;
273}
274.cartbtn_default{
275width:54%;
276float:right;
277clear:right;
278}
279
280/*お気に入り*/
281.btn_favorite{
282padding:10px 15px;
283background:#F1F0E7;
284}
285/*サブエリア*/
286.subarea{
287padding:10px;
288border-bottom:#CCC solid 1px;
289clear:both;
290}
291.subarea h3{
292margin-bottom:10px;
293padding:5px 0;
294border-bottom:#CCC solid 1px;
295clear:both;
296}
297.subphotoimg{
298margin-left:10px;
299float:right;
300clear:right;
301}
302#sub_area div:last-child{
303border-bottom:none;
304}
305/*商品詳細メイン画像スライド*/
306#detailphotoblock {
307width: 100%;
308background-color: #ffffff;
309text-align:center;
310-webkit-box-shadow: 1px 5px 5px #ccc;
311-moz-box-shadow: 1px 5px 5px #ccc;
312position:relative;
313}
314#detailphotoblock div.moveWrap {
315width:200px;
316height:220px;
317margin:0 auto;
318position:relative;
319overflow:hidden;
320-webkit-box-sizing:border-box;
321}
322#detailphotoblock ul.moveWrapBG {
323width:200px;
324height:auto;
325visibility:hidden;
326display:inline-block;
327position:relative;
328-webkit-box-sizing:border-box;
329margin:0 auto;
330padding:0;
331}
332#detailphotoblock li{
333width:200px;
334}
335#detailphotoblock div.slideMask {
336position:absolute;
337top:0;
338left:0;
339/*border:4px #FFF solid;*/
340-webkit-box-sizing:border-box;
341margin-right:0!important;
342}
343#detailphotoblock div.moveWrap>ul.move {
344margin:0;
345padding:0;
346position:relative;
347left:0;
348top:0;
349list-style:none;
350width:2000px;
351-webkit-transition:all 0.6s ease-in-out;
352-webkit-transform:translate3d(0,0,0);
353-webkit-transition-duration: 400ms;
354-webkit-transition-property: -webkit-transform;
355margin:0;
356padding:0;
357display:none;
358}
359#detailphotoblock div.moveWrap>ul.move li.slideUnit {
360margin:0px;
361padding:0;
362float:left;
363list-style:none;
364text-align:center;
365-webkit-box-sizing:border-box;
366}
367#detailphotoblock li.slideUnit>div {
368padding:0px;
369display:inline-block;
370vertical-align:middle;
371text-align:center;
372-webkit-box-sizing:border-box;
373}
374
375.flickSlideContainer {
376}
377
378#detailphotoblock div.flickSlideBottom {
379width:100%;
380}
381#detailphotoblock div.flickSlideBottom div.bottomLeft,#detailphotoblock div.flickSlideBottom div.bottomRight {
382padding:0 10px;
383display:table-cell;
384vertical-align:middle;
385}
386#detailphotoblock div.flickSlideBottom div.bottomRight {
387font-size:24px;
388font-weight: bold;
389color:#7F7F7F;
390background-color:transparent;
391right:5px;
392top:100px;
393position:absolute;
394}
395#detailphotoblock div.flickSlideBottom div.bottomLeft {
396font-size:24px;
397font-weight: bold;
398color:#7F7F7F;
399background-color:transparent;
400left:5px;
401top:100px;
402position:absolute;
403}
404#detailphotoblock div.flickSlideBottom div.bottomLeft:after {
405font-size:12px;
406padding:5px;
407text-align:left;
408display:table-cell;
409}
410#detailphotoblock div.flickSlideBottom div.bottomLeft:before {
411padding:5px;
412text-align:left;
413display:table-cell;
414}
415#detailphotoblock div.flickSlideBottom div.bottomRight:before {
416font-size:12px;
417padding:5px;
418text-align:right;
419display:table-cell;
420}
421#detailphotoblock div.flickSlideBottom div.bottomRight:after {
422padding:5px;
423text-align:right;
424display:table-cell;
425}
426#detailphotoblock div.flickSlideBottom ul.slidePager {
427display:block;
428width:auto;
429text-align:center;
430margin:0 auto;;
431padding:0;
432}
433#detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer {
434font-size:11px;
435width:6px;
436height:6px;
437margin:0 6px 10px 6px;
438display:inline-block;
439background-color:#CCC;
440border-radius: 6px;
441-webkit-border-radius: 6px;
442-moz-border-radius: 6px;
443}
444#detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer.active {
445background-color:#333;
446}
447
448/*その他オススメ商品スライド*/
449#product_detail .title_box_sub:last-child{
450margin-top:20px;
451}
452#whobought_area{
453width:100%;
454margin-top:30px;
455margin-bottom:15px;
456clear:both;
457position:relative;
458}
459#whobought_area h3{
460clear:both;
461line-height:1.2;
462}
463/*liの長さ追加*/
464#whobought_area li{
465width:80px;
466}
467#whobought_area li img{
468margin-bottom:5px;
469clear:both;
470}
471#whobought_area .sale_price{
472clear:both;
473float:right;
474text-align:right;
475}
476#whobought_area div.moveWrap {
477width:80%;
478height:auto;
479position:relative;
480margin:0 auto;
481overflow:hidden;
482-webkit-box-sizing:border-box;
483}
484#whobought_area ul.moveWrapBG {
485width:auto;
486height:auto;
487display:inline-block;
488position:relative;
489visibility:hidden;
490-webkit-box-sizing:border-box;
491margin:0;
492padding:0;
493}
494#whobought_area div.slideMask {
495position:absolute;
496top:0;
497left:0;
498border:4px #FFF solid;
499-webkit-box-sizing:border-box;
500margin-right:1px;
501}
502#whobought_area div.moveWrap>ul.move {
503width:600px;
504margin:0;
505padding:0;
506position:relative;
507left:0;
508top:0;
509list-style:none;
510-webkit-transition:all 0.6s ease-in-out;
511-webkit-transform:translate3d(0,0,0);
512/*-webkit-transition-duration: 400ms;
513-webkit-transition-property: -webkit-transform;
514*/
515margin:0;
516padding:0;
517display:none;
518}
519#whobought_area div.moveWrap>ul.move li.slideUnit {
520width:85px!important;
521float:left;
522display:inline;
523list-style:none;
524padding:4px 8px 4px 0;
525margin-right:0px;
526-webkit-box-sizing:border-box;
527}
528#whobought_area li.slideUnit>div {
529padding:4px;
530display:inline;
531vertical-align:middle;
532-webkit-box-sizing:border-box;
533}
534#whobought_area div.flickSlideBottom {
535width:100%;
536margin-top:5px;
537}
538#whobought_area div.flickSlideBottom div.bottomLeft,#whobought_area div.flickSlideBottom div.bottomRight {
539padding:0 10px;
540display:table-cell;
541vertical-align:middle;
542}
543#whobought_area div.flickSlideBottom div.bottomRight {
544font-size:16px;
545font-weight: bold;
546color:#7F7F7F;
547background-color:transparent;
548right:0;
549top:80px;
550position:absolute;
551}
552#whobought_area div.flickSlideBottom div.bottomLeft {
553font-size:16px;
554font-weight: bold;
555color:#7F7F7F;
556background-color:transparent;
557left:0;
558top:80px;
559position:absolute;
560}
561#whobought_area div.flickSlideBottom div.bottomLeft:after {
562font-size:10px;
563padding:0;
564text-align:left;
565display:table-cell;
566}
567#whobought_area div.flickSlideBottom div.bottomLeft:before {
568padding:0;
569text-align:left;
570display:table-cell;
571}
572#whobought_area div.flickSlideBottom div.bottomRight:before {
573font-size:10px;
574padding:0;
575text-align:right;
576display:table-cell;
577}
578#whobought_area div.flickSlideBottom div.bottomRight:after {
579padding:0;
580text-align:right;
581display:table-cell;
582}
583#whobought_area div.flickSlideBottom ul.slidePager {
584display:block;
585width:auto;
586text-align:center;
587margin:0 auto;
588padding:0;
589}
590#whobought_area div.flickSlideBottom ul.slidePager li.slidePagerPointer {
591display:none;
592}
593
Note: See TracBrowser for help on using the repository browser.