source: branches/version-2_5-dev/html/sphone/user_data/packages/sphone/css/table.css @ 19720

Revision 19720, 9.8 KB checked in by nanasess, 13 years ago (diff)

#787(スマートフォン対応)

  • TPL_DIR を html/user_data 以下から html/sphone/user_data 以下へ移動
Line 
1@charset "utf-8";
2
3/* テーブル(リスト)
4----------------------------------------------- */
5ul {
6background: #fff;
7border: 1px solid #B4B4B4;
8font: bold 17px 'Helvetica-Bold';
9padding: 0;   
10margin: 10px 0;
11text-align: left;
12-webkit-border-radius: 8px;
13}
14ul li {
15color: #999999;
16border-top: 1px solid #B4B4B4;
17list-style-type: none;
18padding: 7px 10px 7px 10px;
19}
20li:first-child {
21border-top: 0;
22-webkit-border-top-left-radius: 8px;
23-webkit-border-top-right-radius: 8px;
24}
25li:last-child {
26-webkit-border-bottom-left-radius: 8px;
27-webkit-border-bottom-right-radius: 8px;
28}
29
30/* テーブル(リスト)上のリンク
31----------------------------------------------- */
32ul li a, li.img a + a {
33color: #000;
34text-decoration: none;
35text-overflow: ellipsis;
36white-space: nowrap;
37overflow: hidden;
38display: block;
39padding: 12px 10px 12px 10px;
40margin: -10px;
41}
42ul li.img a + a {
43margin: -10px 10px -20px -5px;
44font-size: 17px;
45font-weight: bold;
46}
47ul li.img a + a + a {
48font-size: 14px;
49font-weight: normal;
50margin-left: -10px;
51margin-bottom: -10px;
52margin-top: 0;
53}
54ul li.img a + small + a {
55margin-left: -5px;
56}
57ul li.img a + small + a + a {
58margin-left: -10px;
59margin-top: -20px;
60margin-bottom: -10px;
61font-size: 14px;
62font-weight: normal;
63}
64ul li.img a + small + a + a + a {
65margin-left: 0px !important;
66margin-bottom: 0;
67}
68ul li a + a {
69color: #000;
70font: 14px 'Helvetica';
71text-overflow: ellipsis;
72white-space: nowrap;
73overflow: hidden;
74display: block;
75margin: 0;
76padding: 0;
77}
78ul li a + a + a, ul li.img a + a + a + a, ul li.img a + small + a + a + a {
79color: #666;
80font: 13px 'Helvetica';
81margin: 0;
82text-overflow: ellipsis;
83white-space: nowrap;
84overflow: hidden;
85display: block;
86padding: 0;
87}
88
89/* table角丸(共通)
90----------------------------------------------- */
91table {
92width: 100%;
93max-width: 280px;
94margin: 10px 0;
95text-align: center;
96vertical-align: middle;
97border-collapse: collapse;
98border-spacing: 0;
99-webkit-border-radius: 8px;
100-webkit-box-shadow: 0 0 4px #000000;
101}
102table tr {
103border-bottom: solid 1px #cccccc;
104-webkit-border-radius: 8px;
105}
106table > tr:last-child,
107table > tbody > tr:last-child {
108border-bottom: none;
109}
110table th,
111table td {
112margin: 0;
113max-width: 200px;
114height: 2em;
115background-color: #ffffff;
116border: none;
117-webkit-border-radius: 0;
118}
119table th {
120background-color: #f0f0f0;
121}
122table td {
123background-color: #ffffff;
124}
125table tr:first-of-type th:first-child,
126table tr:first-of-type td:first-child {
127-webkit-border-top-left-radius: inherit;
128}
129table tr:first-of-type th:last-child,
130table tr:first-of-type td:last-child {
131-webkit-border-top-right-radius: inherit;
132}
133table tr:last-of-type th:first-child,
134table tr:last-of-type td:first-child {
135-webkit-border-bottom-left-radius: inherit;
136}
137table tr:last-of-type th:last-child,
138table tr:last-of-type td:last-child {
139-webkit-border-bottom-right-radius: inherit;
140}
141table > thead tr:last-of-type th:first-child,
142table > thead tr:last-of-type td:first-child,
143table > thead tr:last-of-type th:last-child,
144table > thead tr:last-of-type td:last-child {
145-webkit-border-bottom-left-radius: 0;
146-webkit-border-bottom-right-radius: 0;
147}
148table > thead + tbody > tr:first-of-type th:first-child,
149table > thead + tbody > tr:first-of-type td:first-child,
150table > thead + tbody > tr:first-of-type th:last-child,
151table > thead + tbody > tr:first-of-type td:last-child {
152-webkit-border-top-left-radius: 0;
153-webkit-border-top-right-radius: 0;
154}
155
156/* テーブル(div)共通?
157----------------------------------------------- */
158#block {
159width: 100%;
160background-color: #ffffff;
161-webkit-border-radius: 8px;
162-webkit-box-shadow: 0px 0px 4px #000000;
163margin: 10px 0;
164}
165.box-wrap {
166display:inline-block;
167width: 100%;
168border-top: 1px solid #cccccc;
169}
170.box-wrap:first-child {
171border-top: none;
172-webkit-border-top-left-radius: 8px;
173-webkit-border-top-right-radius: 8px;
174}
175.box-wrap:last-child {
176-webkit-border-bottom-left-radius: 8px;
177-webkit-border-bottom-right-radius: 8px;
178}
179.box-photo {
180float:left;
181display:block;
182margin-left: 10px;
183margin-right: 10px;
184position: relative;
185}
186.box-data {
187display:block;
188margin: 0px 8px;
189text-align: left;
190}
191.box-data h3 {
192margin: 0px;
193white-space: nowrap;
194overflow: hidden;
195text-overflow: ellipsis;
196-webkit-text-overflow: ellipsis;
197}
198.box-data h3 a {
199font-size: 18px;
200text-decoration: none;
201}
202.description, .box-comment {
203font: bold 14px Osaka;
204line-height: 1.5em;
205white-space: nowrap;
206overflow: hidden;
207text-overflow: ellipsis;
208-webkit-text-overflow: ellipsis;
209}
210.price, .box-price {
211color: #993333;
212font: bold 14px Osaka;
213line-height: 1.5em;
214}
215
216/* テーブル(div)(recomend、関連商品)
217----------------------------------------------- */
218.recomendblock,
219.whoboughtblock{
220margin-top: 0;
221margin-bottom: 0;
222}
223.recomendblock > div ,
224.whoboughtblock > div {
225margin-top: 0;
226margin-bottom: 0;
227-webkit-border-radius: 0;
228}
229.recomendblock > div,
230.whoboughtblock > div {
231width: 100%;
232display:inline-block;
233background-color: #ffffff;
234border-bottom: 1px solid #cccccc;
235padding: 0.1em 0;
236}
237.recomendblock > div > a,
238.recomendblock > div > div ,
239.whoboughtblock > div > a,
240.whoboughtblock > div > div{
241float: left;
242}
243.recomendblock:first-of-type > div:first-of-type ,
244.whoboughtblock:first-of-type > div:first-of-type {
245-webkit-border-top-left-radius: 8px;
246-webkit-border-top-right-radius: 8px;
247}
248.recomendblock:last-of-type > div:last-of-type ,
249.whoboughtblock:last-of-type > div:last-of-type {
250border-bottom: none;
251-webkit-border-bottom-left-radius: 8px;
252-webkit-border-bottom-right-radius: 8px;
253}
254.recomendrightblock,
255.whoboughtrightblock{
256width: 63%;
257}
258.recomendrightblock > h3,
259.recomendrightblock > p,
260.whoboughtrightblock > h3,
261.whoboughtrightblock > p{
262    margin-top: 0;
263    margin-bottom: 0;
264}
265.recomendblock img,
266.whoboughtblock img,
267.listphoto {
268float:left;
269display:block;
270margin: 3px 10px;
271position: relative;
272}
273.recommend-photo img,
274.listphoto img {
275width: 80px;
276}
277.recommend-box h3 {
278font-weight: bold;
279font-size: 15px;
280font-family: helvetica;
281margin: 0.4em 0 0;
282white-space: nowrap;
283overflow: hidden;
284text-overflow: ellipsis;
285-webkit-text-overflow: ellipsis;
286}
287.recommend-box h3 a {
288font-size: 18px;
289text-decoration: none;
290}
291.description,
292.recommend-comment {
293font-weight: normal;
294font-size: 14px;
295font-family: Osaka;
296line-height: 1.5em;
297white-space: nowrap;
298overflow: hidden;
299text-overflow: ellipsis;
300-webkit-text-overflow: ellipsis;
301margin: 0;
302}
303.price,
304.recommend-price {
305color: #993333;
306font-weight: bold;
307font-size: 17px;
308font-family: Osaka;
309line-height: 1.5em;
310margin-bottom: 0.3em;
311}
312
313/* アイテムリスト(div)の処理
314----------------------------------------------- */
315.listarea {
316width: 100%;
317background-color: #ffffff;
318border-bottom: solid 1px #CCC;
319margin: 0;
320margin-top: 0;
321margin-bottom: 0;
322-webkit-border-radius: 0;
323-webkit-box-shadow: none;
324}
325#page_navi_top + .listarea{
326margin-bottom: 0;
327-webkit-border-top-left-radius: 8px;
328-webkit-border-top-right-radius: 8px;
329}
330.listarea:last-of-type{
331border: none;
332-webkit-border-bottom-left-radius: 8px;
333-webkit-border-bottom-right-radius: 8px;
334}
335.listrightblock > ul {
336    border: none;
337    background-color: transparent;
338}
339.listrightblock > h3,
340.listrightblock > p,
341.listrightblock > ul {
342    margin-top: 0;
343    margin-bottom: 0.1em;
344}
345.listrightblock > h3:first-child,
346.listrightblock > p:first-child,
347.listrightblock > ul:first-child,
348margin-top: 0;
349}
350.listrightblock > ul > li {
351margin: 0;
352padding: 0 3px 0 0;
353}
354.listrightblock > h3:last-child,
355.listrightblock > p:last-child {
356margin-bottom: 0;
357}
358
359.newitem-line-list .newitem-box-wrap-end {
360border-bottom: 1px solid #cccccc;
361}
362
363/* 商品検索結果
364----------------------------------------------- */
365#page_navi_top,
366#page_navi_bottom {
367border: none;
368-webkit-box-shadow: none;
369clear: both;
370width: 100%;
371border-spacing: 0 0;
372border-collapse: collapse;
373}
374#page_navi_top tr,
375#page_navi_bottom tr {
376width: 100%;
377}
378#page_navi_top td,
379#page_navi_bottom td {
380text-align: left;
381background-color: transparent;
382}
383
384.change a,
385.change strong {
386display: block;
387float: left;
388margin: 5px 0px;
389padding: 0.3em 0;
390color: #ffffff;
391width: 49.6%;
392text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
393background-color: #666666;
394background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
395text-align:center;
396vertical-align: middle;
397text-decoration: none;
398border-left: solid 1px #666666;
399}
400.change > a:first-child,
401.change > strong:first-child {
402border-left: none;
403-webkit-border-top-left-radius: 4px;
404-webkit-border-bottom-left-radius: 4px;
405}
406.change > a:last-child,
407.change > strong:last-child{
408margin-left: 1px;
409-webkit-border-top-right-radius: 4px;
410-webkit-border-bottom-right-radius: 4px;
411}
412.change select {
413margin-right: 0;
414}
415
416/* テーブル・カゴ
417----------------------------------------------- */
418table[summary="商品情報"] tr:nth-child(even) td{
419background-color: #ffffff;
420}
421table[summary="商品情報"] tr:nth-child(odd) td{
422background-color: #f0f0f0;
423text-align: left;
424}
425
426table[summary="商品情報"] td{
427
428text-align: center;
429vertical-align: middle;
430max-width: 200px;
431}
432table[summary="商品情報"] tr:nth-child(even) td:first-child{
433width: 38%;
434font-size: 13px;
435}
436table[summary="商品情報"] tr:nth-child(even) td:last-child{
437width: 38%;
438overflow: visible;
439}
440table[summary="商品情報"] ul,
441table[summary="商品情報"] ul li,
442table[summary="商品情報"] ul li a {
443display: inline;
444margin: 0;
445padding: 0;
446border: none;
447}
448table[summary="商品情報"] ul li a{
449display: inline-block;
450margin: 7px;
451}
452table[summary="商品情報"] tr:nth-last-of-type(1) td,
453table[summary="商品情報"] tr:nth-last-of-type(2) td,
454table[summary="商品情報"] tr:nth-last-of-type(3) td {
455background-color: #ffffff;
456text-align: center;
457}
458
459/* テーブル・商品詳細
460----------------------------------------------- */
461#detailrightblock table th {
462font-size: 15px;
463font-weight: normal;
464}
465
466/* お問い合わせ
467----------------------------------------------- */
468#undercolumn_contact table td {
469text-align: left;
470}
Note: See TracBrowser for help on using the repository browser.