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

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