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

Revision 21182, 12.1 KB checked in by Seasoft, 13 years ago (diff)

#1431 (用語の揺れ)

  • 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:0 10px 20px 10px;
288margin-bottom:15px;
289border-bottom:#CCC solid 1px;
290clear:both;
291}
292.subarea h3{
293margin-bottom:10px;
294padding:5px 0;
295border-bottom:#CCC solid 1px;
296clear:both;
297}
298.subphotoimg{
299margin-left:10px;
300float:right;
301clear:right;
302}
303#sub_area div:last-child{
304border-bottom:none;
305}
306/*商品詳細メイン画像スライド*/
307#detailphotoblock {
308width: 100%;
309background-color: #ffffff;
310text-align:center;
311-webkit-box-shadow: 1px 5px 5px #ccc;
312-moz-box-shadow: 1px 5px 5px #ccc;
313position:relative;
314}
315#detailphotoblock div.moveWrap {
316width:200px;
317height:220px;
318margin:0 auto;
319position:relative;
320overflow:hidden;
321-webkit-box-sizing:border-box;
322}
323#detailphotoblock ul.moveWrapBG {
324width:200px;
325height:auto;
326visibility:hidden;
327display:inline-block;
328position:relative;
329-webkit-box-sizing:border-box;
330margin:0 auto;
331padding:0;
332}
333#detailphotoblock li{
334width:200px;
335}
336#detailphotoblock div.slideMask {
337position:absolute;
338top:0;
339left:0;
340/*border:4px #FFF solid;*/
341-webkit-box-sizing:border-box;
342margin-right:0!important;
343}
344#detailphotoblock div.moveWrap>ul.move {
345margin:0;
346padding:0;
347position:relative;
348left:0;
349top:0;
350list-style:none;
351width:2000px;
352-webkit-transition:all 0.6s ease-in-out;
353-webkit-transform:translate3d(0,0,0);
354-webkit-transition-duration: 400ms;
355-webkit-transition-property: -webkit-transform;
356margin:0;
357padding:0;
358display:none;
359}
360#detailphotoblock div.moveWrap>ul.move li.slideUnit {
361margin:0px;
362padding:0;
363float:left;
364list-style:none;
365text-align:center;
366-webkit-box-sizing:border-box;
367}
368#detailphotoblock li.slideUnit>div {
369padding:0px;
370display:inline-block;
371vertical-align:middle;
372text-align:center;
373-webkit-box-sizing:border-box;
374}
375
376.flickSlideContainer {
377}
378
379#detailphotoblock div.flickSlideBottom {
380width:100%;
381}
382#detailphotoblock div.flickSlideBottom div.bottomLeft,#detailphotoblock div.flickSlideBottom div.bottomRight {
383padding:0 10px;
384display:table-cell;
385vertical-align:middle;
386}
387#detailphotoblock div.flickSlideBottom div.bottomRight {
388font-size:24px;
389font-weight: bold;
390color:#7F7F7F;
391background-color:transparent;
392right:5px;
393top:100px;
394position:absolute;
395}
396#detailphotoblock div.flickSlideBottom div.bottomLeft {
397font-size:24px;
398font-weight: bold;
399color:#7F7F7F;
400background-color:transparent;
401left:5px;
402top:100px;
403position:absolute;
404}
405#detailphotoblock div.flickSlideBottom div.bottomLeft:after {
406font-size:12px;
407padding:5px;
408text-align:left;
409display:table-cell;
410}
411#detailphotoblock div.flickSlideBottom div.bottomLeft:before {
412padding:5px;
413text-align:left;
414display:table-cell;
415}
416#detailphotoblock div.flickSlideBottom div.bottomRight:before {
417font-size:12px;
418padding:5px;
419text-align:right;
420display:table-cell;
421}
422#detailphotoblock div.flickSlideBottom div.bottomRight:after {
423padding:5px;
424text-align:right;
425display:table-cell;
426}
427#detailphotoblock div.flickSlideBottom ul.slidePager {
428display:block;
429width:auto;
430text-align:center;
431margin:0 auto;;
432padding:0;
433}
434#detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer {
435font-size:11px;
436width:6px;
437height:6px;
438margin:0 6px 10px 6px;
439display:inline-block;
440background-color:#CCC;
441border-radius: 6px;
442-webkit-border-radius: 6px;
443-moz-border-radius: 6px;
444}
445#detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer.active {
446background-color:#333;
447}
448
449/*その他オススメ商品スライド*/
450#product_detail .title_box_sub:last-child{
451margin-top:20px;
452}
453#whobought_area{
454width:100%;
455margin-top:15px;
456margin-bottom:15px;
457clear:both;
458position:relative;
459}
460#whobought_area h3{
461clear:both;
462line-height:1.2;
463}
464/*liの長さ追加*/
465#whobought_area li{
466width:80px;
467}
468#whobought_area li img{
469margin-bottom:5px;
470clear:both;
471}
472#whobought_area .sale_price{
473clear:both;
474float:right;
475text-align:right;
476}
477#whobought_area div.moveWrap {
478width:80%;
479height:auto;
480position:relative;
481margin:0 auto;
482overflow:hidden;
483-webkit-box-sizing:border-box;
484}
485#whobought_area ul.moveWrapBG {
486width:auto;
487height:auto;
488display:inline-block;
489position:relative;
490visibility:hidden;
491-webkit-box-sizing:border-box;
492margin:0;
493padding:0;
494}
495#whobought_area div.slideMask {
496position:absolute;
497top:0;
498left:0;
499border:4px #FFF solid;
500-webkit-box-sizing:border-box;
501margin-right:1px;
502}
503#whobought_area div.moveWrap>ul.move {
504width:600px;
505margin:0;
506padding:0;
507position:relative;
508left:0;
509top:0;
510list-style:none;
511-webkit-transition:all 0.6s ease-in-out;
512-webkit-transform:translate3d(0,0,0);
513/*-webkit-transition-duration: 400ms;
514-webkit-transition-property: -webkit-transform;
515*/
516margin:0;
517padding:0;
518display:none;
519}
520#whobought_area div.moveWrap>ul.move li.slideUnit {
521width:85px!important;
522float:left;
523display:inline;
524list-style:none;
525padding:4px 8px 4px 0;
526margin-right:0px;
527-webkit-box-sizing:border-box;
528}
529#whobought_area li.slideUnit>div {
530padding:4px;
531display:inline;
532vertical-align:middle;
533-webkit-box-sizing:border-box;
534}
535#whobought_area div.flickSlideBottom {
536width:100%;
537margin-top:5px;
538}
539#whobought_area div.flickSlideBottom div.bottomLeft,#whobought_area div.flickSlideBottom div.bottomRight {
540padding:0 10px;
541display:table-cell;
542vertical-align:middle;
543}
544#whobought_area div.flickSlideBottom div.bottomRight {
545font-size:16px;
546font-weight: bold;
547color:#7F7F7F;
548background-color:transparent;
549right:0;
550top:80px;
551position:absolute;
552}
553#whobought_area div.flickSlideBottom div.bottomLeft {
554font-size:16px;
555font-weight: bold;
556color:#7F7F7F;
557background-color:transparent;
558left:0;
559top:80px;
560position:absolute;
561}
562#whobought_area div.flickSlideBottom div.bottomLeft:after {
563font-size:10px;
564padding:0;
565text-align:left;
566display:table-cell;
567}
568#whobought_area div.flickSlideBottom div.bottomLeft:before {
569padding:0;
570text-align:left;
571display:table-cell;
572}
573#whobought_area div.flickSlideBottom div.bottomRight:before {
574font-size:10px;
575padding:0;
576text-align:right;
577display:table-cell;
578}
579#whobought_area div.flickSlideBottom div.bottomRight:after {
580padding:0;
581text-align:right;
582display:table-cell;
583}
584#whobought_area div.flickSlideBottom ul.slidePager {
585display:block;
586width:auto;
587text-align:center;
588margin:0 auto;
589padding:0;
590}
591#whobought_area div.flickSlideBottom ul.slidePager li.slidePagerPointer {
592display:none;
593}
594
Note: See TracBrowser for help on using the repository browser.