Ignore:
Timestamp:
2012/12/28 11:22:00 (11 years ago)
Author:
h_yoshimoto
Message:

#1996 テキストボタン画像のCSS化のCSSを一旦コミット

File:
1 edited

Legend:

Unmodified
Added
Removed

  • branches/version-2_12-multilang/html/user_data/packages/default_en/css/common.css

    r22157 r22176  
    66body { 
    77    color: #666; 
    8     font-family: Verdana,Arial,Helvetica,sans-serif; 
     8    font-family: Helvetica,Arial,sans-serif; 
     9    font-size: 75%; 
    910    background-color: #f5f5f5; 
    10     font-size: 72.5%; 
    11     line-height: 150%; 
    12     letter-spacing: 0.1em; 
    1311} 
    1412 
    … …  
    155153} 
    156154.normal_price { 
    157     font-size: 90%; 
     155    font-size: 0.917em; 
    158156} 
    159157.point { 
    … …  
    179177} 
    180178.mini { 
    181     font-size: 90%; 
     179    font-size: 0.917em; 
    182180} 
    183181 
    … …  
    279277    color: #f60; 
    280278    background: url("../img/background/line_01.gif") repeat-x left bottom; 
    281     font-size: 120%; 
     279    font-size: 1.05em; 
    282280} 
    283281 
    … …  
    325323----------------------------------------------- */ 
    326324#site_description { 
    327     font-size: 90%; 
     325    font-size: 0.917em; 
    328326} 
    329327#logo_area h1 { 
    … …  
    340338div#header_navi { 
    341339    float: right; 
    342     width: 409px; 
    343     height: 38px; 
     340} 
     341div#header_navi ul { 
     342    padding-top: 17px; 
    344343} 
    345344div#header_navi ul li { 
    346     display: block; 
    347345    float: left; 
    348 } 
    349 div#header_navi ul li.mypage, 
     346    margin-bottom: 4px; 
     347} 
     348div#header_navi ul li:hover { 
     349    opacity: 0.75; 
     350    filter:alpha(opacity=75); 
     351} 
     352div#header_navi ul li:active { 
     353    opacity: 1; 
     354    filter:alpha(opacity=100); 
     355} 
     356div#header_navi ul li a { 
     357    display: inline-block; 
     358    font-weight: bold; 
     359    color: #fff; 
     360    padding: 8px 20px 8px 40px; 
     361    text-decoration: none !important; 
     362} 
     363div#header_navi ul li.mypage { 
     364    border-right: 1px solid #e9efb6; 
     365    border-radius: 4px 0 0 0; 
     366background: #C5D709; /* Old browsers */ 
     367background: -moz-linear-gradient(top,  #C5D709 0%, #8CA710 100%); /* FF3.6+ */ 
     368background: -webkit-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* Chrome10+,Safari5.1+ */ 
     369background: -o-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* Opera 11.10+ */ 
     370background: -ms-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* IE10+ */ 
     371background: linear-gradient(to bottom,  #C5D709 0%,#8CA710 100%); /* W3C */ 
     372filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5D709', endColorstr='#8CA710',GradientType=0 ); /* IE6-9 */ 
     373} 
     374div#header_navi ul li.mypage:active { 
     375background: #8CA710; /* Old browsers */ 
     376background: -moz-linear-gradient(top,  #8CA710 0%, #87A010 100%); /* FF3.6+ */ 
     377background: -webkit-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* Chrome10+,Safari5.1+ */ 
     378background: -o-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* Opera 11.10+ */ 
     379background: -ms-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* IE10+ */ 
     380background: linear-gradient(to bottom,  #8CA710 0%,#87A010 100%); /* W3C */ 
     381filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8CA710', endColorstr='#87A010',GradientType=0 ); /* IE6-9 */ 
     382} 
     383div#header_navi ul li.mypage a { 
     384    background: url(../img/button/header_arrow02.png) 20px center no-repeat; 
     385    text-shadow: 1px 1px 1px #8c9f0c; 
     386} 
    350387div#header_navi ul li.entry { 
    351     margin-top: 6px; 
     388    border-right: 1px solid #e9efb6; 
     389    border-left: 1px solid #a3b610; 
     390background: #C5D709; /* Old browsers */ 
     391background: -moz-linear-gradient(top,  #C5D709 0%, #8CA710 100%); /* FF3.6+ */ 
     392background: -webkit-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* Chrome10+,Safari5.1+ */ 
     393background: -o-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* Opera 11.10+ */ 
     394background: -ms-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* IE10+ */ 
     395background: linear-gradient(to bottom,  #C5D709 0%,#8CA710 100%); /* W3C */ 
     396filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5D709', endColorstr='#8CA710',GradientType=0 ); /* IE6-9 */ 
     397} 
     398div#header_navi ul li.entry:active { 
     399    border-right: 1px solid #e9efb6; 
     400    border-left: 1px solid #a3b610; 
     401background: #8CA710; /* Old browsers */ 
     402background: -moz-linear-gradient(top,  #8CA710 0%, #87A010 100%); /* FF3.6+ */ 
     403background: -webkit-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* Chrome10+,Safari5.1+ */ 
     404background: -o-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* Opera 11.10+ */ 
     405background: -ms-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* IE10+ */ 
     406background: linear-gradient(to bottom,  #8CA710 0%,#87A010 100%); /* W3C */ 
     407filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8CA710', endColorstr='#87A010',GradientType=0 ); /* IE6-9 */ 
     408} 
     409div#header_navi ul li.entry a { 
     410    background: url(../img/button/header_arrow02.png) 20px center no-repeat; 
     411    text-shadow: 1px 1px 1px #8c9f0c; 
     412} 
     413 
     414div#header_navi ul li.view_basket { 
     415    border-left: 1px solid #D96700; 
     416    border-radius: 0 4px 0 0; 
     417background: #f90; /* Old browsers */ 
     418background: -moz-linear-gradient(top,  #f90 0%, #E86800 100%); /* FF3.6+ */ 
     419background: -webkit-linear-gradient(top,  #f90 0%,#E86800 100%); /* Chrome10+,Safari5.1+ */ 
     420background: -o-linear-gradient(top,  #f90 0%,#E86800 100%); /* Opera 11.10+ */ 
     421background: -ms-linear-gradient(top,  #f90 0%,#E86800 100%); /* IE10+ */ 
     422background: linear-gradient(to bottom,  #f90 0%,#E86800 100%); /* W3C */ 
     423filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f90', endColorstr='#E86800',GradientType=0 ); /* IE6-9 */ 
     424} 
     425div#header_navi ul li.view_basket:active { 
     426    border-left: 1px solid #D96700; 
     427    border-radius: 0 4px 0 0; 
     428background: #E86800; /* Old browsers */ 
     429background: -moz-linear-gradient(top,  #E86800 0%, ##E36600 100%); /* FF3.6+ */ 
     430background: -webkit-linear-gradient(top,  #E86800 0%,##E36600 100%); /* Chrome10+,Safari5.1+ */ 
     431background: -o-linear-gradient(top,  #E86800 0%,##E36600 100%); /* Opera 11.10+ */ 
     432background: -ms-linear-gradient(top,  #E86800 0%,##E36600 100%); /* IE10+ */ 
     433background: linear-gradient(to bottom,  #E86800 0%,##E36600 100%); /* W3C */ 
     434filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E86800', endColorstr='##E36600',GradientType=0 ); /* IE6-9 */ 
     435} 
     436div#header_navi ul li.view_basket a { 
     437    position: relative; 
     438    padding-left: 50px; 
     439    text-shadow: 1px 1px 1px #d96f00; 
     440} 
     441div#header_navi ul li.view_basket a img { 
     442    position: absolute; 
     443    left: 18px; top: -5px; 
    352444} 
    353445 
    … …  
    395487    padding-right: 10px; 
    396488    display: inline; 
    397 } 
    398  
     489    vertical-align: bottom; 
     490} 
    399491 
    400492/* 完了メッセージ 
    … …  
    408500    line-height: 150%; 
    409501    font-weight: bold; 
    410     font-size: 120%; 
     502    font-size: 1.05em; 
    411503} 
    412504div#complete_area .shop_information { 
    … …  
    492584    height: 9px; 
    493585} 
     586 
     587 
     588/* button CSS 
     589----------------------------------------------- */ 
     590 
     591/* ----- button size */ 
     592 
     593.side_column .btn button { 
     594    width: 85%; 
     595    padding: 5px; 
     596} 
     597 
     598.side_column .btn a { 
     599    width: 79%; 
     600    display: inline-block; 
     601    padding: 7px 5px; 
     602    margin: 0 auto; 
     603} 
     604 
     605.main_column .cart_area a, 
     606.main_column .review_btn a { 
     607    width: 150px; 
     608} 
     609 
     610.main_column .btn_area button, 
     611#window_area .btn_area button { 
     612    min-width: 140px; 
     613} 
     614.main_column a.bt01,.main_column a.bt02,.main_column a.bt03,.main_column a.bt04 { 
     615    display: inline-block; 
     616    padding: 7px 10px; 
     617    min-width: 130px; 
     618} 
     619.main_column .btn_area a.bt_wide, 
     620.main_column .btn_area button.bt_wide { 
     621    min-width: 220px; 
     622} 
     623 
     624/* ----- button white */ 
     625.bt01 { 
     626    text-align: center; 
     627    padding: 6px 10px; 
     628    color: #666 !important; 
     629    border: 1px solid #ccc; 
     630    border-radius: 4px; 
     631    box-shadow: 0 0 1px 1px #fff inset; 
     632    text-shadow: 1px 1px 1px #fff; 
     633    cursor: pointer; 
     634background: #fbfbfb; /* Old browsers */ 
     635background: -moz-linear-gradient(top,  #fbfbfb 0%, #e6e6e6 100%); /* FF3.6+ */ 
     636background: -webkit-linear-gradient(top,  #fbfbfb 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */ 
     637background: -o-linear-gradient(top,  #fbfbfb 0%,#e6e6e6 100%); /* Opera 11.10+ */ 
     638background: -ms-linear-gradient(top,  #fbfbfb 0%,#e6e6e6 100%); /* IE10+ */ 
     639background: linear-gradient(to bottom,  #fbfbfb 0%,#e6e6e6 100%); /* W3C */ 
     640filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */ 
     641} 
     642.bt01:not(:target){ 
     643    filter: none; 
     644}/* for IE9 gradient & border-radius */ 
     645 
     646.bt01:hover { 
     647    opacity: 0.75; 
     648    filter:alpha(opacity=75); 
     649    text-decoration: none !important; 
     650} 
     651.bt01:active { 
     652    opacity: 1; 
     653    filter:alpha(opacity=100); 
     654    text-decoration: none !important; 
     655background: #e6e6e6; /* Old browsers */ 
     656background: -moz-linear-gradient(top,  #e6e6e6 0%, #e0e0e0 100%); /* FF3.6+ */ 
     657background: -webkit-linear-gradient(top,  #e6e6e6 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */ 
     658background: -o-linear-gradient(top,  #e6e6e6 0%,#e0e0e0 100%); /* Opera 11.10+ */ 
     659background: -ms-linear-gradient(top,  #e6e6e6 0%,#e0e0e0 100%); /* IE10+ */ 
     660background: linear-gradient(to bottom,  #e6e6e6 0%,#e0e0e0 100%); /* W3C */ 
     661filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */ 
     662} 
     663.bt01:active:not(:target){ 
     664    filter: none; 
     665}/* for IE9 gradient & border-radius */ 
     666 
     667.bt01:disabled,.bt01:disabled:hover,.bt01:disabled:active { 
     668    opacity: 1; 
     669    filter:alpha(opacity=100); 
     670    cursor: default; 
     671background: #e9e9e9; /* Old browsers */ 
     672background: -moz-linear-gradient(top,  #e9e9e9 0%, #c4c4c4 100%); /* FF3.6+ */ 
     673background: -webkit-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */ 
     674background: -o-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* Opera 11.10+ */ 
     675background: -ms-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* IE10+ */ 
     676background: linear-gradient(to bottom,  #e9e9e9 0%,#c4c4c4 100%); /* W3C */ 
     677filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */ 
     678} 
     679.bt01:disabled:not(:target),.bt01:disabled:hover:not(:target),.bt01:disabled:active:not(:target){ 
     680    filter: none; 
     681}/* for IE9 gradient & border-radius */ 
     682 
     683.favorite_btn span.bt01,.favorite_btn span.bt01:hover,.favorite_btn span.bt01:active { 
     684    opacity: 1; 
     685    filter:alpha(opacity=100); 
     686    display: inline-block; 
     687    min-width: 150px; 
     688    cursor: default; 
     689background: #e9e9e9; /* Old browsers */ 
     690background: -moz-linear-gradient(top,  #e9e9e9 0%, #c4c4c4 100%); /* FF3.6+ */ 
     691background: -webkit-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */ 
     692background: -o-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* Opera 11.10+ */ 
     693background: -ms-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* IE10+ */ 
     694background: linear-gradient(to bottom,  #e9e9e9 0%,#c4c4c4 100%); /* W3C */ 
     695filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */ 
     696} 
     697 
     698.main_column .cart_area .favorite_btn .bt01, 
     699.main_column .review_btn .bt01, 
     700.main_column .addbtn .bt01, 
     701.main_column .add_multiple .bt01, 
     702.zipimg .bt01 { 
     703    padding: 4px 10px !important; 
     704} 
     705 
     706/* ----- button green */ 
     707.bt02 { 
     708    text-align: center; 
     709    padding: 6px 10px; 
     710    color: #fff !important; 
     711    border: none; 
     712    border-radius: 4px; 
     713    text-shadow: 1px 1px 1px #67770B; 
     714    cursor: pointer; 
     715background: #c0d209; /* Old browsers */ 
     716background: -moz-linear-gradient(top,  #c0d209 0%, #91ab10 100%); /* FF3.6+ */ 
     717background: -webkit-linear-gradient(top,  #c0d209 0%,#91ab10 100%); /* Chrome10+,Safari5.1+ */ 
     718background: -o-linear-gradient(top,  #c0d209 0%,#91ab10 100%); /* Opera 11.10+ */ 
     719background: -ms-linear-gradient(top,  #c0d209 0%,#91ab10 100%); /* IE10+ */ 
     720background: linear-gradient(to bottom,  #c0d209 0%,#91ab10 100%); /* W3C */ 
     721filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0d209', endColorstr='#91ab10',GradientType=0 ); /* IE6-9 */ 
     722} 
     723.bt02:not(:target){ 
     724    filter: none; 
     725}/* for IE9 gradient & border-radius */ 
     726 
     727.bt02:hover { 
     728    opacity: 0.75; 
     729    filter:alpha(opacity=75); 
     730    text-decoration: none !important; 
     731} 
     732.bt02:active { 
     733    opacity: 1; 
     734    filter:alpha(opacity=100); 
     735    text-decoration: none !important; 
     736background: #91ab10; /* Old browsers */ 
     737background: -moz-linear-gradient(top,  #91ab10 0%, #7B9210 100%); /* FF3.6+ */ 
     738background: -webkit-linear-gradient(top,  #91ab10 0%,#7B9210 100%); /* Chrome10+,Safari5.1+ */ 
     739background: -o-linear-gradient(top,  #91ab10 0%,#7B9210 100%); /* Opera 11.10+ */ 
     740background: -ms-linear-gradient(top,  #91ab10 0%,#7B9210 100%); /* IE10+ */ 
     741background: linear-gradient(to bottom,  #91ab10 0%,#7B9210 100%); /* W3C */ 
     742filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91ab10', endColorstr='#7B9210',GradientType=0 ); /* IE6-9 */ 
     743} 
     744.bt02:active:not(:target){ 
     745    filter: none; 
     746}/* for IE9 gradient & border-radius */ 
     747 
     748 
     749/* ----- button orange */ 
     750.bt03 { 
     751    text-align: center; 
     752    padding: 6px 10px; 
     753    color: #fff !important; 
     754    border: none; 
     755    border-radius: 4px; 
     756    text-shadow: 1px 1px 1px #A83D09; 
     757    cursor: pointer; 
     758background: #fd9748; /* Old browsers */ 
     759background: -moz-linear-gradient(top,  #fd9748 0%, #de4402 100%); /* FF3.6+ */ 
     760background: -webkit-linear-gradient(top,  #fd9748 0%,#de4402 100%); /* Chrome10+,Safari5.1+ */ 
     761background: -o-linear-gradient(top,  #fd9748 0%,#de4402 100%); /* Opera 11.10+ */ 
     762background: -ms-linear-gradient(top,  #fd9748 0%,#de4402 100%); /* IE10+ */ 
     763background: linear-gradient(to bottom,  #fd9748 0%,#de4402 100%); /* W3C */ 
     764filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd9748', endColorstr='#de4402',GradientType=0 ); /* IE6-9 */ 
     765} 
     766.bt03:not(:target){ 
     767    filter: none; 
     768}/* for IE9 gradient & border-radius */ 
     769 
     770 
     771.bt03:hover { 
     772    opacity: 0.75; 
     773    filter:alpha(opacity=75); 
     774    text-decoration: none !important; 
     775} 
     776.bt03:active { 
     777    opacity: 1; 
     778    filter:alpha(opacity=100); 
     779    text-decoration: none !important; 
     780background: #de4402; /* Old browsers */ 
     781background: -moz-linear-gradient(top,  #de4402 0%, #dd4200 100%); /* FF3.6+ */ 
     782background: -webkit-linear-gradient(top,  #de4402 0%,#dd4200 100%); /* Chrome10+,Safari5.1+ */ 
     783background: -o-linear-gradient(top,  #de4402 0%,#dd4200 100%); /* Opera 11.10+ */ 
     784background: -ms-linear-gradient(top,  #de4402 0%,#dd4200 100%); /* IE10+ */ 
     785background: linear-gradient(to bottom,  #de4402 0%,#dd4200 100%); /* W3C */ 
     786filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de4402', endColorstr='#dd4200',GradientType=0 ); /* IE6-9 */ 
     787} 
     788.bt03:active:not(:target){ 
     789    filter: none; 
     790}/* for IE9 gradient & border-radius */ 
     791 
     792 
     793/* ----- button gray */ 
     794.bt04 { 
     795    text-align: center; 
     796    padding: 6px 10px; 
     797    color: #fff !important; 
     798    border: none; 
     799    border-radius: 4px; 
     800    text-shadow: 1px 1px 1px #707070; 
     801    cursor: pointer; 
     802background: #a9a9a9; /* Old browsers */ 
     803background: -moz-linear-gradient(top,  #a9a9a9 0%, #767676 100%); /* FF3.6+ */ 
     804background: -webkit-linear-gradient(top,  #a9a9a9 0%,#767676 100%); /* Chrome10+,Safari5.1+ */ 
     805background: -o-linear-gradient(top,  #a9a9a9 0%,#767676 100%); /* Opera 11.10+ */ 
     806background: -ms-linear-gradient(top,  #a9a9a9 0%,#767676 100%); /* IE10+ */ 
     807background: linear-gradient(to bottom,  #a9a9a9 0%,#767676 100%); /* W3C */ 
     808filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a9a9', endColorstr='#767676',GradientType=0 ); /* IE6-9 */ 
     809} 
     810.bt04:not(:target){ 
     811    filter: none; 
     812}/* for IE9 gradient & border-radius */ 
     813 
     814.bt04:hover { 
     815    opacity: 0.75; 
     816    filter:alpha(opacity=75); 
     817    text-decoration: none !important; 
     818} 
     819.bt04:active { 
     820    opacity: 1; 
     821    filter:alpha(opacity=100); 
     822    text-decoration: none !important; 
     823background: #767676; /* Old browsers */ 
     824background: -moz-linear-gradient(top,  #767676 0%, #707070 100%); /* FF3.6+ */ 
     825background: -webkit-linear-gradient(top,  #767676 0%,#707070 100%); /* Chrome10+,Safari5.1+ */ 
     826background: -o-linear-gradient(top,  #767676 0%,#707070 100%); /* Opera 11.10+ */ 
     827background: -ms-linear-gradient(top,  #767676 0%,#707070 100%); /* IE10+ */ 
     828background: linear-gradient(to bottom,  #767676 0%,#707070 100%); /* W3C */ 
     829filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a9a9', endColorstr='#707070',GradientType=0 ); /* IE6-9 */ 
     830} 
     831.bt04:active:not(:target){ 
     832    filter: none; 
     833}/* for IE9 gradient & border-radius */ 
     834 
Note: See TracChangeset for help on using the changeset viewer.