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

Revision 21081, 8.8 KB checked in by Seasoft, 13 years ago (diff)

#1294 (ソースを読みやすくする)

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