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

Revision 22825, 9.5 KB checked in by Seasoft, 11 years ago (diff)

スマートフォンサイトの改善
#2140 (標準テンプレートのカスタマイズ性を高める)

  • jQuery 1.9.1
  • jquery.mobile-1.3.1
  • カテゴリーブロックのレイアウト調整を改善
  • jQuery の読み込みタイミングを早くした。
  • 当サイトについて画面 不可解な空間を生じるケースがあるのを回避

#2044 (無駄な処理を改善する for 2.13.0)

  • 不要ファイル削除
  • Google Map のスクリプト読み込みは必要時のみに
  • category.js の読み込みは必要時のみに
  • Google Map 読み込みのための冗長なプロトコル毎の分岐を改善

#2043 (typo修正・ソース整形・ソースコメントの改善 for 2.13.0)

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