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

Revision 21122, 8.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
4file name  :block.css
5style info :ブロック用
6=================================================================== */
7/*-----------------------------------------------
8ブロック共通
9----------------------------------------------- */
10.title_block{
11color: #FFF;
12font-size:16px;
13font-weight:bold;
14text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
15line-height:20px;
16margin:0;
17padding:5px 10px 3px 10px;
18background-color:#787E8A;
19background: -moz-linear-gradient(center top, #787E8A 0%,#CBCDD0 100%);
20background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #787E8A),color-stop(1, #CBCDD0));
21border-top:#E1DCDA solid 1px;
22border-bottom:#B5B5B5 solid 2px;
23-webkit-box-shadow: 0 1px #FFF;
24-moz-box-shadow: 0 1px #FFF;
25text-align:left;
26vertical-align: middle;
27text-overflow: ellipsis;
28clear:both;
29}
30
31/*-----------------------------------------------
32オススメ商品
33----------------------------------------------- */
34#recomend_area{
35margin:15px 10px;
36padding-top:10px;
37border:#CCC solid 1px;
38border-radius: 8px;
39-webkit-border-radius: 8px;
40-moz-border-radius: 8px;
41}
42#recomend_area h2{
43font-size:12px;
44margin-left:10px;
45}
46#recomend_area li{
47width:290px;
48}
49.recomendblock{
50width:270px;
51padding:5px 10px 5px 8px;
52margin:0 auto;
53clear:both;
54}
55.recomendblock img{
56width:80px;
57float:left;
58}
59.recomendblock .productContents{
60width:68%;
61float:right;
62text-align:left;
63}
64.recomendblock .productContents p{
65clear:both;
66}
67.recomendblock .productContents p.comment{
68width:17em;
69height:3.7em;
70overflow:hidden;
71white-space:nowrap;
72text-overflow: ellipsis;
73-webkit-text-overflow: ellipsis;
74clear:both;
75}
76.recomendblock .sale_price{
77clear:both;
78float:right;
79text-align:right;
80}
81#recomend_area div.moveWrap {
82width:290px;
83height:auto;
84margin:0 auto;
85position:relative;
86overflow:hidden;
87-webkit-box-sizing:border-box;
88}
89
90#recomend_area ul.moveWrapBG {
91margin:0;
92padding:0;
93display:inline-block;
94position:relative;
95width:100%;
96height:auto;
97visibility:hidden;
98-webkit-box-sizing:border-box;
99}
100#recomend_area div.slideMask {
101margin:0 auto;
102padding:0;
103margin-right:1px;
104position:absolute;
105top:0;
106left:0;
107border:4px #FFF solid;
108-webkit-box-sizing:border-box;
109}
110#recomend_area div.moveWrap>ul.move {
111width:10000px;
112margin:0;
113padding:0;
114position:relative;
115left:0;
116top:0;
117list-style:none;
118-webkit-transition:all 0.6s ease-in-out;
119-webkit-transform:translate3d(0,0,0);
120margin:0;
121padding:0;
122display:none;
123}
124#recomend_area div.moveWrap>ul.move li.slideUnit {
125width:290px!important;
126margin:0;
127padding:0;
128float:left;
129list-style:none;
130text-align:center;
131-webkit-box-sizing:border-box;
132}
133#recomend_area li.slideUnit>div {
134padding:4px;
135display:inline-block;
136vertical-align:middle;
137text-align:center;
138-webkit-box-sizing:border-box;
139}
140#recomend_area div.flickSlideBottom {
141width:100%;
142margin-top:5px;
143border-top:#DBDBDB solid 1px;   
144background: -moz-linear-gradient(center top, #FFFFFF 0%,#DEE4EA 95%,#FFFFFF 100%);
145background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF),color-stop(0.95, #DEE4EA),color-stop(0, #FFFFFF));
146border-bottom-right-radius:8px;
147-webkit-border-bottom-right-radius: 8px;
148-moz-border-bottom-right-radius: 8px;
149border-bottom-left-radius:8px;
150-webkit-border-bottom-left-radius:8px;
151moz-border-bottom-left-radius:8px;
152}
153#recomend_area div.flickSlideBottom div.bottomLeft,#recomend_area div.flickSlideBottom div.bottomRight {
154display:table-cell;
155-webkit-box-sizing:border-box;
156-webkit-box-shadow: rgba(0, 0, 0, 0.0976562) 0px 1px 3px, rgba(255, 255, 255, 1) 0px 0px 0px inset;
157vertical-align:middle;
158padding:0 10px;
159}
160#recomend_area div.flickSlideBottom div.bottomRight {
161font-size:16px;
162font-weight: bold;
163color:#7F7F7F;
164background-color:transparent;
165border-bottom-right-radius: 8px;
166-webkit-border-bottom-right-radius: 8px;
167-moz-border-bottom-right-radius: 8px;
168border-left:#DBDBDB solid 1px;
169}
170#recomend_area div.flickSlideBottom div.bottomLeft {
171font-size:16px;
172font-weight: bold;
173color:#7F7F7F;
174background-color:transparent;
175border-bottom-left-radius: 8px;
176-webkit-border-bottom-left-radius: 8px;
177-moz-border-bottom-left-radius:8px;
178border-right:#DBDBDB solid 1px;
179}
180#recomend_area div.flickSlideBottom div.bottomLeft:after {
181font-size:10px;
182padding:5px;
183text-align:left;
184display:table-cell;
185}
186#recomend_area div.flickSlideBottom div.bottomLeft:before {
187margin-top:2px;
188padding:5px;
189text-align:left;
190display:table-cell;
191}
192#recomend_area div.flickSlideBottom div.bottomRight:before {
193font-size:10px;
194padding:5px;
195text-align:right;
196display:table-cell;
197}
198#recomend_area div.flickSlideBottom div.bottomRight:after {
199margin-top:2px;
200padding:5px;
201text-align:right;
202display:table-cell;
203}
204#recomend_area div.flickSlideBottom ul.slidePager {
205width:100%;
206margin:0;
207padding:0;
208display:table-cell;
209text-align:center;
210}
211#recomend_area div.flickSlideBottom ul.slidePager li.slidePagerPointer {
212font-size:10px;
213width:6px;
214height:6px;
215margin:12px 6px 6px 6px;
216display:inline-block;
217background-color:#CCC;
218border-radius: 6px;
219-webkit-border-radius: 6px;
220-moz-border-radius: 6px;
221}
222#recomend_area div.flickSlideBottom ul.slidePager li.slidePagerPointer.active {
223background-color:#333;
224}
225
226/*-----------------------------------------------
227カテゴリリスト(アコーディオン)
228----------------------------------------------- */
229#category_area{
230}
231#categorytree ul{
232margin:10px;
233border:#A9ACAB solid 1px;
234border-radius: 8px;
235-webkit-border-radius: 8px;
236-moz-border-radius: 8px;
237background:#f4F6F8;
238}
239#categorytree li{
240font-size:16px;
241font-weight:bold;
242-webkit-transition: opacity 0.3s ease-in;
243-webkit-transition-delay: 0.2s;
244clear: both;
245border-bottom:#CCC solid 1px;
246border-top:#FFF solid 1px;
247line-height:1.3em;
248vertical-align:middle;
249}
250
251#categorytree li:first-child{
252border-top:none;
253}
254#categorytree li li:first-child{
255border-top:#CCC solid 1px;
256}
257#categorytree li:last-child,#categorytree li li:last-child{
258border-bottom:none;
259}
260#categorytree ul li a,.categorytree > ul > li > ul > li a{
261padding:0.6em 0;
262}
263.category_body {
264display: inline-block;
265}
266.category_body a {
267width: 100%;
268display: inline-block;
269white-space:nowrap;
270overflow:hidden;
271text-overflow: ellipsis;
272cursor:pointer;
273}
274#categorytree ul li li{
275padding-bottom:0.6em;
276}
277.category_header {
278width: 1.5em;
279margin:0 6px 0 8px;
280display:inline-block;
281background: transparent;
282text-align:right;
283}
284.category_header.plus, .category_header.minus{
285color:#FFF;
286margin:0 6px 0 8px;
287padding-bottom:4px;
288display: inline-block;
289text-align: center;
290line-height:0.4;
291width: 1.5em;
292height:1.3em;
293-webkit-border-radius: 8px;
294background:#515866;
295background: -moz-linear-gradient(center top, #6D7481 0%,#515866 100%);
296background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D7481),color-stop(1, #515866));
297-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.7);
298-webkit-border-radius: 3px;
299}
300
301.category_header.plus > a, .category_header.minus > a{
302width: 1.5em;
303color:#FFF;
304display: inline-block;
305margin:0;
306padding: 0;
307text-decoration: none;
308}
309
310/*レベル調整*/
311#categorytree .level1 .category_header{
312width:1.5em;
313}
314#categorytree .level1 .category_body{
315width:86.5%;
316}
317#categorytree .level2 .category_header{
318width: 1.5em;
319margin-left:2em;
320}
321#categorytree .level2 .category_body{
322width:79%;
323}
324#categorytree .level3 .category_header{
325width: 1.5em;
326margin-left:3.4em;
327}
328#categorytree .level3 .category_body{
329width:71.5%;
330}
331#categorytree .level4 .category_header{
332width: 1.5em;
333margin-left:4.8em;
334}
335#categorytree .level4 .category_body{
336width:64%;
337}
338
339#categorytree .level5 .category_header{
340margin-left:6.2em;
341}
342#categorytree .level5 .category_body{
343width:56%;
344}
345
346
347/*リンクカラー*/
348.category_body a:link,.category_body a:visited{
349color:#000;
350text-decoration:none;
351cursor:pointer;
352}
353.category_header.plus a, .category_header.minus a{
354color:#FFF;
355}
356
357
358/*-----------------------------------------------
359news
360----------------------------------------------- */
361#news_area{
362}
363#news_area ul{
364margin-bottom:10px;
365}
366#news_area li{
367display:block;
368clear:both;
369padding:10px;
370line-height:1.3;
371background-color:#FEFEFE;
372background: -moz-linear-gradient(center top, #FEFEFE 0%,#EEEEEE 100%);
373background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE));
374border-top:#FFF solid 1px;
375border-bottom:#CCC solid 1px;
376}
377#news_area .news_date{
378clear:both;
379font-size:12px;
380letter-spacing:0.1em;
381}
Note: See TracBrowser for help on using the repository browser.