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

Revision 21093, 12.6 KB checked in by 468, 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:last-child{
192border-bottom:none;
193border-radius:0 0 7px 7px;
194-moz-border-radius: 0 0 7px 7px;
195-webkit-border-radius: 0 0 7px 7px;
196}
197/*ステータスアイコン*/
198#detailrightblock .status_icon{
199padding:10px 12px;
200border-bottom:#CCC solid 1px;
201}
202/*商品情報(テキストなど)*/
203#detailrightblock .product_detail{
204padding:12px;
205border-bottom:#CCC solid 1px;
206}
207#detailrightblock h3{
208font-size:14px;
209clear:both;
210}
211#detailrightblock .price{
212font-size:14px;
213}
214#detailrightblock .normal_price{
215font-size:11px;
216}
217.relative_cat{
218font-size:12px;
219margin-bottom:10px;
220}
221
222/*商品情報(規格部分)*/
223.cart_area{
224padding:12px;
225}
226.cart_area dl {
227margin: 0;
228padding:0;
229}
230.cart_area dt {
231margin: 0;
232font-weight: bold;
233line-height: 1.3;
234}
235.cart_area dd {
236padding:0;
237clear:both;
238padding-bottom:5px;
239}
240.cart_area dd:last-child {
241padding-bottom:0;
242}
243
244/*商品情報(数量)*/
245.cartin_btn{
246padding:15px;
247background:#F1F0E7;
248border-top:#FFF solid 1px;
249}
250.cartin_btn dl{
251width:40%;
252float:left;
253clear:left;
254}
255.cartin_btn dt{
256width:2em;
257float:left;
258padding:15px 5px 5px;
259vertical-align:bottom;
260line-height:1.1;
261font-weight:bold;
262}
263.cartin_btn dd{
264width:3.2em;
265display:inline;
266float:left;
267}
268.detail_quantity dd .quantitybox{
269width:3em;
270}
271.cartbtn_default{
272width:54%;
273float:right;
274clear:right;
275}
276
277/*お気に入り*/
278.btn_favorite{
279padding:10px 15px;
280background:#F1F0E7;
281}
282/*サブエリア*/
283.subarea{
284padding:10px;
285border-bottom:#CCC solid 1px;
286clear:both;
287}
288.subarea h3{
289margin-bottom:10px;
290padding:5px 0;
291border-bottom:#CCC solid 1px;
292clear:both;
293}
294.subphotoimg{
295margin-left:10px;
296float:right;
297clear:right;
298}
299#sub_area div:last-child{
300border-bottom:none;
301}
302/*商品詳細メイン画像スライド*/
303#detailphotoblock {
304width: 100%;
305background-color: #ffffff;
306text-align:center;
307-webkit-box-shadow: 1px 5px 5px #ccc;
308-moz-box-shadow: 1px 5px 5px #ccc;
309position:relative;
310}
311#detailphotoblock div.moveWrap {
312width:200px;
313height:auto;
314margin:0 auto;
315position:relative;
316overflow:hidden;
317-webkit-box-sizing:border-box;
318}
319#detailphotoblock ul.moveWrapBG {
320width:200px;
321height:auto;
322visibility:hidden;
323display:inline-block;
324position:relative;
325-webkit-box-sizing:border-box;
326margin:0 auto;
327padding:0;
328}
329#detailphotoblock li{
330width:200px;
331}
332#detailphotoblock div.slideMask {
333position:absolute;
334top:0;
335left:0;
336/*border:4px #FFF solid;*/
337-webkit-box-sizing:border-box;
338margin-right:0!important;
339}
340#detailphotoblock div.moveWrap>ul.move {
341margin:0;
342padding:0;
343position:relative;
344left:0;
345top:0;
346list-style:none;
347width:2000px;
348-webkit-transition:all 0.6s ease-in-out;
349-webkit-transform:translate3d(0,0,0);
350-webkit-transition-duration: 400ms;
351-webkit-transition-property: -webkit-transform;
352margin:0;
353padding:0;
354display:none;
355}
356#detailphotoblock div.moveWrap>ul.move li.slideUnit {
357margin:0px;
358padding:0;
359float:left;
360list-style:none;
361text-align:center;
362-webkit-box-sizing:border-box;
363}
364#detailphotoblock li.slideUnit>div {
365padding:0px;
366display:inline-block;
367vertical-align:middle;
368text-align:center;
369-webkit-box-sizing:border-box;
370}
371#detailphotoblock div.flickSlideBottom {
372width:100%;
373margin-top:5px;
374}
375#detailphotoblock div.flickSlideBottom div.bottomLeft,#detailphotoblock div.flickSlideBottom div.bottomRight {
376padding:0 10px;
377display:table-cell;
378vertical-align:middle;
379}
380#detailphotoblock div.flickSlideBottom div.bottomRight {
381font-size:24px;
382font-weight: bold;
383color:#7F7F7F;
384background-color:transparent;
385right:5px;
386top:100px;
387position:absolute;
388}
389#detailphotoblock div.flickSlideBottom div.bottomLeft {
390font-size:24px;
391font-weight: bold;
392color:#7F7F7F;
393background-color:transparent;
394left:5px;
395top:100px;
396position:absolute;
397}
398#detailphotoblock div.flickSlideBottom div.bottomLeft:after {
399font-size:12px;
400padding:5px;
401text-align:left;
402display:table-cell;
403}
404#detailphotoblock div.flickSlideBottom div.bottomLeft:before {
405padding:5px;
406text-align:left;
407display:table-cell;
408}
409#detailphotoblock div.flickSlideBottom div.bottomRight:before {
410font-size:12px;
411padding:5px;
412text-align:right;
413display:table-cell;
414}
415#detailphotoblock div.flickSlideBottom div.bottomRight:after {
416padding:5px;
417text-align:right;
418display:table-cell;
419}
420#detailphotoblock div.flickSlideBottom ul.slidePager {
421display:block;
422width:auto;
423text-align:center;
424margin:0 auto;;
425padding:0;
426}
427#detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer {
428font-size:11px;
429width:6px;
430height:6px;
431margin:12px 6px 6px 6px;
432display:inline-block;
433background-color:#CCC;
434border-radius: 6px;
435-webkit-border-radius: 6px;
436-moz-border-radius: 6px;
437}
438#detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer.active {
439background-color:#333;
440}
441
442/*その他オススメ商品スライド*/
443#product_detail .title_box_sub:last-child{
444margin-top:20px;
445}
446#whobought_area{
447width:100%;
448margin-top:30px;
449margin-bottom:15px;
450clear:both;
451position:relative;
452}
453#whobought_area h3{
454clear:both;
455line-height:1.2;
456}
457/*liの長さ追加*/
458#whobought_area li{
459width:80px;
460}
461#whobought_area li img{
462margin-bottom:5px;
463clear:both;
464}
465#whobought_area .sale_price{
466clear:both;
467float:right;
468text-align:right;
469}
470#whobought_area div.moveWrap {
471width:80%;
472height:auto;
473position:relative;
474margin:0 auto;
475overflow:hidden;
476-webkit-box-sizing:border-box;
477}
478#whobought_area ul.moveWrapBG {
479width:auto;
480height:auto;
481display:inline-block;
482position:relative;
483visibility:hidden;
484-webkit-box-sizing:border-box;
485margin:0;
486padding:0;
487}
488#whobought_area div.slideMask {
489position:absolute;
490top:0;
491left:0;
492border:4px #FFF solid;
493-webkit-box-sizing:border-box;
494margin-right:1px;
495}
496#whobought_area div.moveWrap>ul.move {
497width:600px;
498margin:0;
499padding:0;
500position:relative;
501left:0;
502top:0;
503list-style:none;
504-webkit-transition:all 0.6s ease-in-out;
505-webkit-transform:translate3d(0,0,0);
506/*-webkit-transition-duration: 400ms;
507-webkit-transition-property: -webkit-transform;
508*/
509margin:0;
510padding:0;
511display:none;
512}
513#whobought_area div.moveWrap>ul.move li.slideUnit {
514width:85px!important;
515float:left;
516display:inline;
517list-style:none;
518padding:4px 8px 4px 0;
519margin-right:0px;
520-webkit-box-sizing:border-box;
521}
522#whobought_area li.slideUnit>div {
523padding:4px;
524display:inline;
525vertical-align:middle;
526-webkit-box-sizing:border-box;
527}
528#whobought_area div.flickSlideBottom {
529width:100%;
530margin-top:5px;
531}
532#whobought_area div.flickSlideBottom div.bottomLeft,#whobought_area div.flickSlideBottom div.bottomRight {
533padding:0 10px;
534display:table-cell;
535vertical-align:middle;
536}
537#whobought_area div.flickSlideBottom div.bottomRight {
538font-size:16px;
539font-weight: bold;
540color:#7F7F7F;
541background-color:transparent;
542right:0;
543top:80px;
544position:absolute;
545}
546#whobought_area div.flickSlideBottom div.bottomLeft {
547font-size:16px;
548font-weight: bold;
549color:#7F7F7F;
550background-color:transparent;
551left:0;
552top:80px;
553position:absolute;
554}
555#whobought_area div.flickSlideBottom div.bottomLeft:after {
556font-size:10px;
557padding:0;
558text-align:left;
559display:table-cell;
560}
561#whobought_area div.flickSlideBottom div.bottomLeft:before {
562padding:0;
563text-align:left;
564display:table-cell;
565}
566#whobought_area div.flickSlideBottom div.bottomRight:before {
567font-size:10px;
568padding:0;
569text-align:right;
570display:table-cell;
571}
572#whobought_area div.flickSlideBottom div.bottomRight:after {
573padding:0;
574text-align:right;
575display:table-cell;
576}
577#whobought_area div.flickSlideBottom ul.slidePager {
578display:block;
579width:auto;
580text-align:center;
581margin:0 auto;
582padding:0;
583}
584#whobought_area div.flickSlideBottom ul.slidePager li.slidePagerPointer {
585display:none;
586}
587
Note: See TracBrowser for help on using the repository browser.