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

Revision 21052, 8.6 KB checked in by 468, 13 years ago (diff)

#1413 スマートフォン版スタイルシートファイル変更(HTML5対応)

  • Property svn:eol-style set to LF
  • Property svn:keywords set to Id
Line 
1@charset "utf-8";
2/* ===================================================================
3CSS information
4
5file name  :button.css
6style info :ボタン用
7
8=================================================================== */
9.btn_area{
10padding:10px;
11clear:both;
12}
13ul.btn_btm{
14clear:both;
15}
16.btn_area li,ul.btn_btm li{
17margin-bottom:12px;
18}
19.btn_area_top{
20box-shadow:0 1px 1px 1px rgba(255,255,255,1) inset;
21-webkit-box-shadow:0 1px 1px 0 rgba(255,255,255,1) inset;
22-moz-box-shadow: 0 1px 1px rgba(255,255,255,1) inset;
23border-top: 1px solid #CCC;
24border-bottom: 1px solid #CCC;
25background:#EEE;
26display:block;
27clear:both;
28margin-bottom:10px;
29padding:10px 0;
30}
31/*-----------------------------------------------
32ボタン(進む系ボタン:グリーン)
33----------------------------------------------- */
34a.btn,a.btn:link,a.btn:visited,a.btn:hover{
35color:#FFF;
36font-size: 16px;
37font-weight:bold;
38text-decoration: none;
39text-align:center;
40padding: 10px;
41text-shadow: 0 -1px 1px rgba(0,0,0,1);
42border: 1px solid #A9ABAD;
43border-radius: 5px;
44-moz-border-radius: 5px;
45-webkit-border-radius: 5px;
46display:block;
47background:#B4DF34;
48background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%);
49background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222));
50cursor:pointer;
51-webkit-transition:opacity 0.5s ease-in;
52-moz-transition:opacity 0.5s ease-in;
53}
54input[type="submit"].btn{
55width:100%;
56color:#FFF;
57font-size: 16px;
58font-weight:bold;
59text-decoration: none;
60text-align:center;
61padding: 10px;
62text-shadow: 0 -1px 1px rgba(0,0,0,1);
63border: 1px solid #A9ABAD;
64border-radius: 5px;
65-moz-border-radius: 5px;
66-webkit-border-radius: 5px;
67display:block;
68background:#B4DF34;
69background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%);
70background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222));
71cursor:pointer;
72-webkit-transition:opacity 0.5s ease-in;
73-moz-transition:opacity 0.5s ease-in;
74}
75/*-----------------------------------------------
76ボタン(戻る系ボタン:グレー)
77----------------------------------------------- */
78a.btn_back,a.btn_back:link,a.btn_back:visited,a.btn_back:hover {
79color:#FFF;
80font-size: 16px;
81font-weight:bold;
82text-decoration: none;
83text-align:center;
84text-shadow: 0 -1px 1px rgba(0,0,0,1);
85border: 1px solid #A9ABAD;
86border-radius: 5px;
87-moz-border-radius: 5px;
88-webkit-border-radius: 5px;
89display:block;
90padding:5px 0;
91background:#999999;
92background: -moz-linear-gradient(center top, #C5C5C5 0%,#999999 100%);
93background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C5C5C5),color-stop(1, #999999));
94}
95input[type="submit"].btn_back{
96color:#FFF;
97font-size: 16px;
98font-weight:bold;
99text-decoration: none;
100text-align:center;
101text-shadow: 0 -1px 1px rgba(0,0,0,1);
102border: 1px solid #A9ABAD;
103border-radius: 5px;
104-moz-border-radius: 5px;
105-webkit-border-radius: 5px;
106display:block;
107padding:5px 0;
108background:#999999;
109background: -moz-linear-gradient(center top, #C5C5C5 0%,#999999 100%);
110background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C5C5C5),color-stop(1, #999999));
111}
112/*-----------------------------------------------
113ボタン(サブ系ボタン:ライトグレー)
114----------------------------------------------- */
115.btn_sub,a.btn_sub,a.btn_sub:link,a.btn_sub:visited,a.btn_sub:hover {
116color:#000;
117font-size: 16px;
118padding:5px 0;
119font-weight:bold;
120text-decoration: none;
121text-align:center;
122text-shadow: 0 -1px 1px rgba(0,0,0,0.3);
123border: 1px solid #A9ABAD;
124border-radius: 5px;
125-moz-border-radius: 5px;
126-webkit-border-radius: 5px;
127display:block;
128background:#FDFDfD;
129background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%);
130background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3));
131}
132input[type="submit"].btn_sub{
133color:#000;
134font-size: 16px;
135padding:5px 0;
136font-weight:bold;
137text-decoration: none;
138text-align:center;
139text-shadow: 0 -1px 1px rgba(0,0,0,0.3);
140border: 1px solid #A9ABAD;
141border-radius: 5px;
142-moz-border-radius: 5px;
143-webkit-border-radius: 5px;
144display:block;
145background:#FDFDfD;
146background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%);
147background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3));
148}
149/*-----------------------------------------------
150ボタン(追加系ボタン:ホワイト)
151----------------------------------------------- */
152a.btn_more,a.btn_more:link,a.btn_more:visited,a.btn_more:hover{
153color:#000;
154font-size: 16px;
155padding:5px 0;
156font-weight:bold;
157text-decoration: none;
158text-align:center;
159border: 1px solid #A9ABAD;
160border-radius: 5px;
161-moz-border-radius: 5px;
162-webkit-border-radius: 5px;
163display:block;
164background: #FFF;
165clear:both;
166margin:10px;
167}
168input[type="submit"].btn_more{
169color:#000;
170font-size: 16px;
171padding:5px 0;
172font-weight:bold;
173text-decoration: none;
174text-align:center;
175border: 1px solid #A9ABAD;
176border-radius: 5px;
177-moz-border-radius: 5px;
178-webkit-border-radius: 5px;
179display:block;
180background: #FFF;
181clear:both;
182}
183/*-----------------------------------------------
184ボタン(フッター)
185----------------------------------------------- */
186a.btn_btm{
187width:150px;
188text-align: center;
189color: #FFF;
190background-color: #000;
191background: -moz-linear-gradient(center top, #5E5E5E 0%,#232323 48%);
192background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5E5E5E),color-stop(0.48, #232323));
193border:#303030 solid 1px;
194text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
195-moz-border-radius: 5px;
196-webkit-border-radius: 5px;
197padding: 5px;
198margin:10px auto;
199transition: background-color 1s ease-in;
200-webkit-transition: background-color 1s ease-in;
201-moz-transition: opacity 1s ease-int;
202}
203.btn_btm,a.btn_btm:link,a.btn_btm:hover,a.btn_btm:visited{
204color:#FFF;
205text-decoration:none;
206}
207input[type="submit"].btn_btm{
208width:150px;
209text-align: center;
210color: #FFF;
211background-color: #000;
212background: -moz-linear-gradient(center top, #5E5E5E 0%,#232323 48%);
213background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5E5E5E),color-stop(0.48, #232323));
214border:#303030 solid 1px;
215text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
216-moz-border-radius: 5px;
217-webkit-border-radius: 5px;
218padding: 5px;
219margin:10px auto;
220transition: background-color 1s ease-in;
221-webkit-transition: background-color 1s ease-in;
222-moz-transition: opacity 1s ease-int;
223cursor:pointer;
224}
225/*-----------------------------------------------
226ボタン小(編集/削除)
227----------------------------------------------- */
228ul.edit{
229float:right;
230clear:right;
231display:inline;
232vertical-align:top;
233line-height:1;
234position:absolute;
235right:10px;
236top:15px;
237}
238ul.edit li{
239display:inline;
240float:left;
241line-height:1;
242vertical-align:middle;
243}
244ul.edit li:first-child{
245margin-right:0.8em;
246}
247a.b_edit:link,a.b_edit:visited,a.b_edit:hover{
248color:#000;
249font-size:11px;
250padding:4px 5px;
251border:#CCC solid 1px;
252border-radius: 12px;
253-moz-border-radius: 12px;
254-webkit-border-radius: 12px;
255background:#D7DDE3;
256background: -moz-linear-gradient(center top, #FFFFFF 0%,#D7DDE3 100%);
257background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF),color-stop(1, #D7DDE3));
258display:inline;
259text-align:center;
260cursor:pointer;
261vertical-align:middle;
262}
263a.b_delete:link,a.b_delete:visited,a.b_delete:hover{
264vertical-align:top;
265cursor:pointer;
266}
267/*-----------------------------------------------
268ボタン(商品詳細:カゴに入れる)
269----------------------------------------------- */
270.cartbtn_default{
271width:50%!important;
272font-size:15px;
273padding:10px 0;
274background:#669222;
275background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%);
276background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222));
277}
278
279/*-----------------------------------------------
280ボタン(商品詳細:お気に入り)
281----------------------------------------------- */
282.btn_favorite .btn_sub{
283width:auto;
284display:block;
285}
286/*-----------------------------------------------
287ボタン(新しいお届け先を追加する)
288----------------------------------------------- */
289.addbtn{
290margin:0 30px;
291padding:5px 0;
292}
293/*-----------------------------------------------
294ボタン(トップページへ)
295----------------------------------------------- */
296.btn_s{
297width:12em;
298padding:10px 0!important;
299margin:10px auto;
300clear:both;
301}
302/*-----------------------------------------------
303ボタン(住所自動入力)
304----------------------------------------------- */
305.btn_inputzip{
306margin:12px 0 5px 0;
307}
308/*-----------------------------------------------
309ボタン(ログイン/ウィンドウ)
310----------------------------------------------- */
311.btn_login,.btn_close{
312width:70%;
313margin:10px auto;
314}
Note: See TracBrowser for help on using the repository browser.