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

Revision 20614, 13.0 KB checked in by nagano, 13 years ago (diff)

モバイル・スマートフォンのデザイン調整

  • Property svn:eol-style set to LF
  • Property svn:keywords set to Id
Line 
1@charset "utf-8";
2
3/* テーブル(リスト)
4----------------------------------------------- */
5ul {
6background: #fff;
7border: 1px solid #B4B4B4;
8font: bold 100% '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: 4px 6px;
19}
20
21ul#paymentP, ul#mypageT {
22background: #fff;
23border: 1px solid #B4B4B4;
24font:normal 100% 'Helvetica';
25padding: 0;   
26margin: 10px 0;
27text-align: left;
28-webkit-border-radius: 8px;
29}
30
31ul#paymentP li, ul#mypageT li {
32color: #000000;
33list-style-type: none;
34padding: 4px 6px;
35}
36
37li:first-child {
38border-top: 0;
39-webkit-border-top-left-radius: 8px;
40-webkit-border-top-right-radius: 8px;
41}
42li:last-child {
43-webkit-border-bottom-left-radius: 8px;
44-webkit-border-bottom-right-radius: 8px;
45}
46
47/* テーブル(リスト)上のリンク
48----------------------------------------------- */
49ul li a, li.img a + a {
50color: #000;
51text-decoration: none;
52text-overflow: ellipsis;
53white-space: nowrap;
54overflow: hidden;
55display: block;
56padding: 12px 10px 12px 10px;
57margin: -10px;
58}
59ul li.img a + a {
60margin: -10px 10px -20px -5px;
61font-size: 100%;
62font-weight: bold;
63}
64ul li.img a + a + a {
65font-size: 100%;
66font-weight: normal;
67margin-left: -10px;
68margin-bottom: -10px;
69margin-top: 0;
70}
71ul li.img a + small + a {
72margin-left: -5px;
73}
74ul li.img a + small + a + a {
75margin-left: -10px;
76margin-top: -20px;
77margin-bottom: -10px;
78font-size: 100%;
79font-weight: normal;
80}
81ul li.img a + small + a + a + a {
82margin-left: 0px !important;
83margin-bottom: 0;
84}
85ul li a + a {
86color: #000;
87font: 100% 'Helvetica';
88text-overflow: ellipsis;
89white-space: nowrap;
90overflow: hidden;
91display: block;
92margin: 0;
93padding: 0;
94}
95ul li a + a + a, ul li.img a + a + a + a, ul li.img a + small + a + a + a {
96color: #666;
97font: 100% 'Helvetica';
98margin: 0;
99text-overflow: ellipsis;
100white-space: nowrap;
101overflow: hidden;
102display: block;
103padding: 0;
104}
105
106/* table角丸(共通)
107----------------------------------------------- */
108table {
109width: 100%;
110max-width: 300px;
111margin: 10px 0 20px;
112text-align: center;
113vertical-align: middle;
114border-collapse: collapse;
115border-spacing: 0;
116-webkit-border-radius: 8px;
117-webkit-box-shadow: 0 0 4px #000000;
118}
119table tr {
120border-bottom: solid 1px #cccccc;
121-webkit-border-radius: 8px;
122}
123table > tr:last-child,
124table > tbody > tr:last-child {
125border-bottom: none;
126}
127table th,
128table td {
129margin: 0;
130max-width: 250px;
131height: 2em;
132background-color: #ffffff;
133border: none;
134-webkit-border-radius: 0;
135font-weight:normal;
136}
137table th {
138background-color: #f0f0f0;
139}
140table td {
141background-color: #ffffff;
142}
143table tr:first-of-type th:first-child,
144table tr:first-of-type td:first-child {
145-webkit-border-top-left-radius: inherit;
146}
147table tr:first-of-type th:last-child,
148table tr:first-of-type td:last-child {
149-webkit-border-top-right-radius: inherit;
150}
151table tr:last-of-type th:first-child,
152table tr:last-of-type td:first-child {
153-webkit-border-bottom-left-radius: inherit;
154}
155table tr:last-of-type th:last-child,
156table tr:last-of-type td:last-child {
157-webkit-border-bottom-right-radius: inherit;
158}
159table > thead tr:last-of-type th:first-child,
160table > thead tr:last-of-type td:first-child,
161table > thead tr:last-of-type th:last-child,
162table > thead tr:last-of-type td:last-child {
163-webkit-border-bottom-left-radius: 0;
164-webkit-border-bottom-right-radius: 0;
165}
166table > thead + tbody > tr:first-of-type th:first-child,
167table > thead + tbody > tr:first-of-type td:first-child,
168table > thead + tbody > tr:first-of-type th:last-child,
169table > thead + tbody > tr:first-of-type td:last-child {
170-webkit-border-top-left-radius: 0;
171-webkit-border-top-right-radius: 0;
172}
173
174/* テーブル(div)共通?
175----------------------------------------------- */
176#block {
177width: 100%;
178background-color: #ffffff;
179-webkit-border-radius: 8px;
180-webkit-box-shadow: 0px 0px 4px #000000;
181margin: 10px 0;
182}
183.box-wrap {
184display:inline-block;
185width: 100%;
186border-top: 1px solid #cccccc;
187}
188.box-wrap:first-child {
189border-top: none;
190-webkit-border-top-left-radius: 8px;
191-webkit-border-top-right-radius: 8px;
192}
193.box-wrap:last-child {
194-webkit-border-bottom-left-radius: 8px;
195-webkit-border-bottom-right-radius: 8px;
196}
197.box-photo {
198float:left;
199display:block;
200margin-left: 10px;
201margin-right: 10px;
202position: relative;
203}
204.box-data {
205display:block;
206margin: 0px 8px;
207text-align: left;
208}
209.box-data h3 {
210margin: 0px;
211white-space: nowrap;
212overflow: hidden;
213text-overflow: ellipsis;
214-webkit-text-overflow: ellipsis;
215}
216.box-data h3 a {
217font-size: 100%;
218text-decoration: none;
219}
220.description, .box-comment {
221font: bold 100% Osaka;
222line-height: 1.5em;
223white-space: nowrap;
224overflow: hidden;
225text-overflow: ellipsis;
226-webkit-text-overflow: ellipsis;
227}
228.box-price {
229color: #993333;
230font: bold 100% Osaka;
231line-height: 1.5em;
232}
233
234/* テーブル(div)(recomend、関連商品)
235----------------------------------------------- */
236
237.recomendblock,
238.whoboughtblock{
239margin-top: 0;
240margin-bottom: 0;
241}
242.recomendblock > div ,
243.whoboughtblock > div {
244margin-top: 0;
245margin-bottom: 0;
246-webkit-border-radius: 0;
247}
248.recomendblock > div,
249.whoboughtblock > div {
250width: 100%;
251display:inline-block;
252background-color: #eeeeee;
253border-bottom: 1px solid #ffffff;
254padding: 5px 0;
255}
256.recomendblock > div > a,
257.recomendblock > div > div ,
258.whoboughtblock > div > a,
259.whoboughtblock > div > div{
260float: left;
261}
262.recomendblock:first-of-type > div:first-of-type ,
263.whoboughtblock:first-of-type > div:first-of-type {
264-webkit-border-top-left-radius: 8px;
265-webkit-border-top-right-radius: 8px;
266}
267.recomendblock:last-of-type > div:last-of-type ,
268.whoboughtblock:last-of-type > div:last-of-type {
269border-bottom: none;
270-webkit-border-bottom-left-radius: 8px;
271-webkit-border-bottom-right-radius: 8px;
272}
273
274.recomendrightblock {
275display: block;
276width: 100%;
277height: 100%;
278}
279
280.recomendrightblock,
281.whoboughtrightblock{
282width: 63%;
283}
284.recomendrightblock > h3,
285.recomendrightblock > p,
286.whoboughtrightblock > h3,
287.whoboughtrightblock > p{
288    margin-top: 0;
289    margin-bottom: 0;
290    font-size:90%;
291}
292.recomendblock img,
293.whoboughtblock img,
294.listphoto {
295float:left;
296display:block;
297margin: 3px;
298position: relative;
299}
300.recommend-photo img,
301.listphoto img {
302width: 80px;
303}
304
305div.listrightblock {
306float:right;
307text-align:left;
308width:70%;
309}
310
311.recommend-box h3 {
312font-weight: bold;
313font-size: 100%;
314font-family: helvetica;
315margin: 0.4em 0 0;
316white-space: nowrap;
317overflow: hidden;
318text-overflow: ellipsis;
319-webkit-text-overflow: ellipsis;
320}
321.recommend-box h3 a {
322font-size: 100%;
323text-decoration: none;
324}
325.description,
326.recommend-comment {
327font-weight: normal;
328font-size: 100%;
329font-family: Osaka;
330line-height: 1.5em;
331white-space: nowrap;
332overflow: hidden;
333text-overflow: ellipsis;
334-webkit-text-overflow: ellipsis;
335margin: 0;
336}
337.price,
338.recommend-price {
339color: #ff0000;
340font-size: 90%;
341line-height: 1.5em;
342margin-bottom: 0.3em;
343}
344
345.paymentprice {
346color: #ff0000;
347line-height: 1.5em;
348margin-bottom: 0.3em;
349font-weight:bold;
350}
351
352/* アイテムリスト(div)の処理
353----------------------------------------------- */
354.listarea {
355width: 100%;
356background-color: #ffffff;
357border-bottom: solid 1px #CCC;
358margin: 0;
359margin-top: 0;
360margin-bottom: 0;
361padding:15px 0;
362-webkit-border-radius: 0;
363-webkit-box-shadow: none;
364}
365#page_navi_top + .listarea{
366margin-bottom: 0;
367-webkit-border-top-left-radius: 8px;
368-webkit-border-top-right-radius: 8px;
369}
370.listarea:last-of-type{
371border: none;
372-webkit-border-bottom-left-radius: 8px;
373-webkit-border-bottom-right-radius: 8px;
374}
375.listrightblock > ul {
376    border: none;
377    background-color: transparent;
378}
379.listrightblock > h3,
380.listrightblock > p,
381.listrightblock > ul {
382    margin-top: 0;
383    margin-bottom: 0.1em;
384}
385.listrightblock > h3:first-child,
386.listrightblock > p:first-child,
387.listrightblock > ul:first-child,
388margin-top: 0;
389}
390.listrightblock > ul > li {
391margin: 0;
392padding: 0 3px 0 0;
393}
394.listrightblock > h3:last-child,
395.listrightblock > p:last-child {
396margin-bottom: 0;
397}
398
399.newitem-line-list .newitem-box-wrap-end {
400border-bottom: 1px solid #cccccc;
401}
402
403div.listarea span.pricebox {
404font-size:90%;
405}
406
407/* 商品検索結果
408----------------------------------------------- */
409#page_navi_top,
410#page_navi_bottom {
411border: none;
412-webkit-box-shadow: none;
413clear: both;
414width: 100%;
415border-spacing: 0 0;
416border-collapse: collapse;
417margin-top:10px;
418}
419#page_navi_top tr,
420#page_navi_bottom tr {
421width: 100%;
422}
423#page_navi_top td,
424#page_navi_bottom td {
425text-align: left;
426background-color: transparent;
427}
428
429.change a,
430.change strong {
431display: block;
432float: left;
433margin: 5px 0px;
434padding: 0.3em 0;
435color: #ffffff;
436width: 49.6%;
437text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
438background-color: #666666;
439background-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)));
440text-align:center;
441vertical-align: middle;
442text-decoration: none;
443border-left: solid 1px #666666;
444}
445.change > a:first-child,
446.change > strong:first-child {
447border-left: none;
448-webkit-border-top-left-radius: 4px;
449-webkit-border-bottom-left-radius: 4px;
450}
451.change > a:last-child,
452.change > strong:last-child{
453margin-left: 1px;
454-webkit-border-top-right-radius: 4px;
455-webkit-border-bottom-right-radius: 4px;
456}
457.change select {
458margin-right: 0;
459}
460
461/* テーブル・カゴ
462----------------------------------------------- */
463
464table[summary="商品情報"]{
465font-size: 80%;
466}
467
468table[summary="商品情報"] tr:nth-child(even) td{
469background-color: #ffffff;
470}
471/*table[summary="商品情報"] tr:nth-child(odd) td{
472background-color: #f0f0f0;
473}*/
474
475table[summary="商品情報"] td{
476
477text-align: center;
478vertical-align: middle;
479max-width: 200px;
480}
481table[summary="商品情報"] tr:nth-child(even) td:last-child{
482width: 21%;
483overflow: visible;
484}
485table[summary="商品情報"] ul,
486table[summary="商品情報"] ul li,
487table[summary="商品情報"] ul li a {
488display: inline;
489margin: 0;
490padding: 0;
491border: none;
492}
493table[summary="商品情報"] ul li a{
494display: inline-block;
495margin: 1px;
496padding:0;
497}
498/*table[summary="商品情報"] tr:nth-last-of-type(1) td,
499table[summary="商品情報"] tr:nth-last-of-type(2) td,
500table[summary="商品情報"] tr:nth-last-of-type(3) td {
501background-color: #ffffff;
502text-align: center;
503min-width:30px;
504}*/
505
506table td.detailtdName {
507text-align:left;
508width:100px;
509}
510
511table td.detailtdPM {
512text-align:center;
513width:40px;
514}
515
516
517table td.detailtdYenT {
518text-align:right;
519width:80px;
520}
521
522table th.resulttd {
523text-align:left;
524}
525
526
527
528table td.product_td {
529font-size:80%;
530}
531
532table td p.no_margin {
533margin:0;
534}
535
536/* テーブル・商品詳細
537----------------------------------------------- */
538#detailrightblock table th {
539font-size: 80%;
540font-weight: normal;
541width: 100px;
542text-align:left;
543}
544
545#detailrightblock table h2 {
546font-size: 120%;
547}
548
549/* お客様情報入力
550----------------------------------------------- */
551table[summary="お客様情報入力"] td{
552padding-left:5px;
553text-align: left;
554vertical-align: middle;
555}
556
557/* 会員登録内容変更
558----------------------------------------------- */
559table[summary="会員登録内容変更"] td{
560padding-left:5px;
561text-align: left;
562vertical-align: middle;
563}
564
565/* お届け先登録
566----------------------------------------------- */
567table[summary="お届け先登録"] td{
568padding-left:5px;
569text-align: left;
570vertical-align: middle;
571}
572
573/* お問い合わせ
574----------------------------------------------- */
575#undercolumn_contact table td {
576text-align: left;
577}
578
579/*TOP商品カテゴリ内
580-----------------------------------------------*/
581ul#categorytree {
582font-size: 100%;
583margin: 0 0 15px;
584}
585
586/*会員登録(入力ページ)フォーム
587-----------------------------------------------*/
588table.entryform {
589font-size:80%;
590}
591table.entryform th {
592    min-width: 50px;
593    padding: 3px;
594    margin:3px;
595    text-align: left;
596    vertical-align: top;}
597
598table.entryform td {
599text-align:left;
600}
601
602table.entryform th.confirmtd {
603    width: 70px;
604    padding: 3px;
605    margin:3px;
606    text-align: left;
607    vertical-align: top;}
608
609table.entryform th.select {
610min-width:30px;
611}
612
613table.entryform th.change {
614min-width:30px;
615}
616
617table.entryform th.multi_ph {
618text-align:center;
619min-width:30px;
620}
621
622table.entryform th.multi_pr {
623text-align:center;
624}
625
626table.entryform th.multi_nu {
627text-align:center;
628}
629
630table.entryform td.multi_pr {
631text-align:left;
632}
633
634table.entryform td.multi_nu {
635text-align:center;
636min-width:30px;
637}
638
639table td.phototd {
640    width: 53px;
641    text-align: center;
642}
643
644table td.multi_send {
645    text-align: center;
646}
647
648table.payment th.select {
649width:30%;
650text-align:center;
651}
652
653table.payment td.right {
654width:200px;
655}
656
657table td.detailtdNumber {
658text-align:center;
659width:52px;
660}
661
662table td.alignR {
663text-align:right;
664}
665
666table td.pricetd {
667    text-align: right;
668}
669
670table.entryform th.alignC {
671text-align:center;
672}
673
674table.entryform th.confirm_ph {
675width:57px;
676}
677
678table.entryform th.trorder {
679width:80px;
680}
681
682table.entryform th.trpoint {
683width:215px;
684}
685
686table.entryform td.detailtd {
687    text-align: left;
688    min-width:180px;
689}
690
691table.entryform td.centertd {
692    text-align: center;
693}
694
695table.entryform th.valignM {
696vertical-align:middle;
697}
698
699table.entryform td.yentd {
700min-width: 60px;
701}
702
703span#point_default, span#point_dynamic {
704font-size:90%;
705}
706
707div.payarea, div.payarea02 {
708margin-bottom:30px;
709}
710
711div.delivdate {
712margin-bottom:15px;
713}
Note: See TracBrowser for help on using the repository browser.