www.gusucode.com > ShopEx481 & PHPWind 整合版码程序 > shopadmin/css/style.css
/*--------------------------------------------------------------------------------------------------------------- style.css:主要是控制页面上常用元素的样式 1、提示信息 2、定义头部的链接,把头部的链接定义为白色 3、路径导航栏 4、操作区域的图标按钮 5、日历 6、下拉菜单 7、html编辑器 8、颜色拾取器的样式 9、数据等待(loading)样式 10、翻页的样式 11、某些菜单的操作说明以及基本功能的简单解释 ---------------------------------------------------------------------------------------------------------------*/ body { background: url(../images/bodybg.gif) repeat-x 0 -23px; } /*--------------------------------------------------------------------------------------------------------------- 1、提示信息 ---------------------------------------------------------------------------------------------------------------*/ #InfoWindow { position: absolute; top: 0; left: 45%; background: #FAD163; padding: 2px 5px; } .x-tip{ font-size:12px; font-family:Verdana; border:1px solid #666; width:220px; background:#ebece4; z-index:56635; } .x-tip .tip-top{ display:none; } .x-tip .tip{ padding:2px; border:2px #fff solid; } .x-tip .tip-title{ border-color:#ffa53d #ffa73d #ffa93d; border-style:solid; border-width:1px; color:#fff; padding:1px 11px; font-weight:bold; background:#ff7c00; } .x-tip .tip-text{ padding:5px; color:#333; line-height:16px; position:relative; word-wrap:break-word; overflow:hidden; } .x-tip .tip-text img{ border:1px solid #ccc; } /*--------------------------------------------------------------------------------------------------------------- 2、定义头部的链接,把头部的链接定义为白色 ---------------------------------------------------------------------------------------------------------------*/ .header a{ color:#fff; text-decoration:none; _hide-focus: expression(this.hideFocus=true); } .header a:hover{ color:#fff; } /*--------------------------------------------------------------------------------------------------------------- 3、路径导航栏 ---------------------------------------------------------------------------------------------------------------*/ .navBar { padding: 5px 0; color: #ccc; text-align: left; height:16px; } .navBar span,.navBar a,.navBar a:hover{ color:#ccc; text-decoration: none; } /*--------------------------------------------------------------------------------------------------------------- 4、操作区域的图标按钮 ---------------------------------------------------------------------------------------------------------------*/ /* 有图标的按钮样式 */ .sysiconBtn { background:#E2E8EB url(../images/sysicon.gif) no-repeat; margin:0; padding:0; margin:1px 3px 0 0; padding:4px 4px 2px 20px; line-height:24px; cursor: pointer; color: #000; text-decoration: none; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 2px solid #bec6ce; border-bottom: 2px solid #bec6ce; outline:none; display:inline; font-weight: normal; cursor:pointer; } /* 无图标的按钮样式 */ .sysiconBtnNoIcon { margin:0; padding:0; background: #E2E8EB; margin-left: 3px; padding:4px 4px 2px 4px; cursor: pointer; color: #000; text-decoration: none; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 2px solid #bec6ce; border-bottom: 2px solid #bec6ce; display:inline; font-weight: normal; } /* 按钮被按下以后处于编辑状态,无图标样式。具体效果参看在“会员>信息发送管理” */ .sysiconBtnNoIcon.editing{ background:#fff; border-top: 1px solid #bec6ce; border-left: 1px solid #bec6ce; border-right: 2px solid #ccc; border-bottom: 2px solid #ccc; } /* 按钮被按下以后处于编辑状态,有图标样式。具体效果参看“finder”列表中的“列表编辑按钮” */ .edit.editing{ background:#fff url(../images/sysicon.gif) no-repeat 2px -41px; border-top: 1px solid #bec6ce; border-left: 1px solid #bec6ce; border-right: 1px solid #fff; border-bottom: 1px solid #fff; } .sysiconBtn:active { border-top: 1px solid #bec6ce; border-left: 1px solid #bec6ce; border-right: 2px solid #fff; border-bottom: 2px solid #fff; } .edit { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -41px; } .orderlistedit { background: #E2E8EB url(../images/sysicon.gif) no-repeat 5px -523px; } .delete { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -83px; } .recyclebin { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -786px; } .print { background:#E2E8EB url(../images/sysicon.gif) no-repeat scroll 2px -124px } .addorder { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px 0px; } .printtyle { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -164px; } .cal { background: #E2E8EB url(../images/sysicon.gif) no-repeat 2px -200px; padding-left: 20px; } .disabled { background: #E2E8EB url(../images/sysicon.gif) no-repeat 2px -235px; text-indent: -99999px; padding: 0 5px; display: block; } .enable { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -262px; text-indent: -99999px; padding: 0 5px; display: block; } .viewRefresh { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -285px; display: block; float: right; margin: 2px 0 0 8px; height: 16px; padding-left: 20px; } .BtnviewRefresh { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -285px; } .useorder { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -319px; } .bacthedit { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -355px; } .buttonsave { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -619px; } .sms { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -877px; } .msgbox { background:#E2E8EB url(../images/sysicon.gif) no-repeat 1px -939px; } .email { background:#E2E8EB url(../images/sysicon.gif) no-repeat 3px -991px; } input.email { background:none; } .gridedit { background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -1040px; } .gridedit.editing{ background:#fff url(../images/sysicon.gif) no-repeat 2px -1040px; border-top: 1px solid #bec6ce; border-left: 1px solid #bec6ce; border-right: 1px solid #fff; border-bottom: 1px solid #fff; } .searchico{ background:#E2E8EB url(../images/sysicon.gif) no-repeat 2px -1091px; } .addwgt{ background:#E2E8EB url(../images/sysicon.gif) no-repeat 5px -1141px; padding-left:25px; } .arrow-up,.arrow-down,.arrow-left,.arrow-right{ padding-right:20px; background-position: 95% 50%; background-repeat: no-repeat; } .arrow-up{ background-image:url(../images/arrow-up.gif) } .arrow-down{ background-image:url(../images/arrow-down.gif) } .arrow-left{ background-image:url(../images/arrow-left.gif) } .arrow-right{ background-image:url(../images/arrow-right.gif) } /* */ .headContent .selectModeBar{ display:none; } .headContent .x-ready,.headContent .x-all{ display:block; } .headContent .mode{ text-align:center; border-bottom:1px solid #ccc; } .headContent .selectAll{ background:#ffc; display:none; } .headContent .deSelectAll{ background:#ffff80; display:none; } .headContent .x-ready .selectAll{ display:block; } .headContent .x-all .deSelectAll{ display:block; } .x-colbody label{ cursor:move; } /* 订单区 打印按钮 */ .p_prt, .p_prted{ background:url(../images/p_prt.gif) no-repeat; cursor:pointer; width:17px; height:18px; display:inline-block; display:-moz-inline-stack; *display:inline; *zoom:1; *width:15px; *height:16px; *padding:2px 0 0 2px; line-height:18px; vertical-align:top; text-align:center; margin:2px 0 0 0; color:#000000; } .p_prt:hover, .p_prted:hover{ background-position:0 -60px; } .p_prted{ background-position:0 -30px; } /*--------------------------------------------------------------------------------------------------------------- 商品详细页 ---------------------------------------------------------------------------------------------------------------*/ #gEditor-GType-section .alert{ display:none; } #gEditor-GType-section.alert{ color:#FF0000; } #gEditor-GType-section.alert .alert{ display:inline; color:#f00; } .GoodsEditSection{ margin:8px; padding:5px 15px; } .GoodsDetails{ } .GoodsDetails td{ vertical-align:top; } .GoodsDetails .GoodsPicArea{ 1background:#f2f2f2; padding:5px 5px; } .GoodsDetails .GoodsPicArea table.current{ border:1px solid #333; } .GoodsDetails #x-main-pic{ border:1px solid #ddd; background:#fff; padding:10px; width:246px; height:200px; margin:2px; overflow:hidden; } .GoodsDetails #x-main-pic img{ background:#fff; border:1px solid #efefef; } .GoodsDetails .division table th{ width:100px; } .GoodsDetails .infoPanel .addon{ left:20px; } .GoodsDetails .infoPanel .ActionBar{ background:#fff; } .info-text{height:500px;width:100%} .gpic-box{ width:50px; _width:46px; float:left; margin:5px 2px; _margin:5px 1px; cursor: pointer; background:#fff; } .t-handle-current{ cursor:default; color:#000; font-weight:bold; padding:2px 5px; } .t-handle{ cursor:pointer; color:#999; font-weight:bold; padding:2px 5px; } .mx-tabber .t-handle-current{ border:1px solid #666; border-bottom-color:#fff; } .mx-tabber .t-handle{ background:#666; color:#fff; border:1px solid #666; } .gpic-box .picdelete{ border:1px solid #ccc; border-top:0; text-align:center; width:50px; background:#f2f2f2; } .gpic-box table{ border:1px solid #ccc; padding:0; } .gpic-box table td{ padding:0; } .gpic-box .current{ border:1px solid #333; } #all-pics{ margin:5px 0; } .idata td,.idata th{ background:#ffd; } .page-header{ background:url(../images/tablethbg.gif) repeat-x scroll; width:100%; line-height:24px; } .page-header td{ padding:0; } #page-body{ } #page-body .main{ padding:0 10px; } #goods-spec-cell input{ width:50px; } /*日期 calendar*/ .calendar {border: 1px #e8d093 solid;line-height:18px;background: #fff url(../images/calbg.gif) repeat-x;width:170px;font-size:11px;font-family: Verdana,Arial, Helvetica, sans-serif;} .calendar table {text-align: center; width:170px;} .calendar table th{font-weight:bold;} .calendar table th, .calendar table td {padding: 0px;text-align:center;} .calendar a {line-height:15px;width:17px;color: #000000;display: block;font-size:9px;text-decoration:none;} .calendar .closeCalBtn {text-align: right;cursor: pointer;padding:2px 0 2px 0;display:block;} .calendar a:hover {background:#333;color:#fff;} .calendar .today {background:#ff9900;} .calendar .selected {background:#333;color:#fff;} /*end calendar*/ /*--------------------------------------------------------------------------------------------------------------- 快捷记事本 ---------------------------------------------------------------------------------------------------------------*/ #shopkits-pannel{ display:none; background:#4E6A81; position: absolute; left:250px; border:1px solid #8698A6; top:0; z-index:65500; width:400px; height:250px; } #shopkits-pannel .ctlTools{ cursor: pointer; position: absolute; bottom:0; text-align:center; width:100%; } #shopkits-pannel.close{ top:-230px; } #sidetools{ background:#6F777A;padding:0 2px;width:160px;height:100%; position: absolute; right:0; z-index:65500; } .selectbox{ border:1px solid #ccc; } /*--------------------------------------------------------------------------------------------------------------- 6、下拉菜单 ---------------------------------------------------------------------------------------------------------------*/ .dropMenu{ width:200px; white-space:nowrap; border:1px solid #BEC6CE; position: absolute; background:#E7EFF5 url(../images/sysrightbackgroud.gif) repeat-x; z-index:10000; } .dropMenu .menuitem{ display:block; white-space:nowrap; _width:100%; cursor: pointer; padding:0 5px; line-height:22px; border:1px solid #fff; border-bottom:1px solid #ccc; border-top:1px solid #fff; } .dropMenu td{ border-bottom:1px solid #ccc; border-top:1px solid #fff; } .dropMenu .menuitem:hover{ background:#f90; color:#fff; } .dropMenu .highlight{ background:#fff; border-left:2px solid #f90; color:#000; } .dropMenu .catelevel_1{ font-size:14px; font-weight:700; border-bottom:1px solid #6D9DC2; color:#000; } .dropMenu .catelevel_2{ padding-left:20px; font-weight:700; color:#000; } .dropMenu .catelevel_3{ padding-left:40px; color:#000; } .dropMenu .catelevel_4{ padding-left:60px; color:#666; } .dropMenu .catelevel_5{ padding-left:80px; color:#4E6A81 } /*--------------------------------------------------------------------------------------------------------------- 7、html编辑器 ---------------------------------------------------------------------------------------------------------------*/ .mce_style_1{ background:#E6EAEF url(../images/inputactionbg.gif) repeat-x 0px -30px; border-color:#B0BEC7 #B0BEC7 #93A6B4; border-style:solid; border-width:1px; } .mce_style_1 table{ width:0px; } .mce_style_1 table td{ border:none; padding:5px 5px 3px 5px; vertical-align:middle; line-height:noraml; white-space:nowrap } .mce_style_1 img{ cursor: pointer; border:1px #e6eaef solid; } .mce_style_1 img.in{ background-color:#fff; border:1px solid #999; } .mce_style_1 select{ *border:1px #e9e9e9 solid; color:#333; font-size:12px; font-family:Verdana; padding:1px; clear:none; } .mce_style_1 select option{ background:#f2fafc; } /*.mce_style_1 .styleSelector{ width:100%; height:56px; overflow:hidden; position:relative; } .mce_style_1 .x-section{ height:100%; width:100px; overflow:hidden; margin-right:3px; position: relative; float:left; background-color:#fff; } .mce_style_1 .styleSelector img{ position: absolute; z-index:9; width:100%; height:100%; } .mce_style_1 .styleSelector label{ position: absolute; text-align:center; width:100%; bottom:0; } .mce_style_1 .styleSelector .x-style{ line-height:40px; margin:0; padding:0 0 0 5px; }*/ /*--------------------------------------------------------------------------------------------------------------- 8、颜色拾取器的样式 ---------------------------------------------------------------------------------------------------------------*/ .goog-palette-panel{ background-color:#FFFFFF; border-collapse:collapse; border-color:#CCCCCC #676767 #676767 #CCCCCC; border-style:solid; border-width:1px; color:#333333; cursor:default; margin:0; outline-color:-moz-use-text-color; outline-style:none; outline-width:medium; padding:0.5ex 0 0; position:absolute; white-space:nowrap; z-index:65535; visibility:hidden; } .goog-palette{ outline:none; cursor:default } .goog-palette-table td,th{ padding:0; } .goog-palette-table{ margin:5px; border:1px solid #666; border-collapse:collapse; width:auto; } .goog-palette-cell{ height:18px; width:18px; margin:0; border:0; text-align:center; vertical-align:middle; border-right:1px solid #666; cursor:pointer } .goog-palette-cell .goog-palette-colorswatch{ position:relative; height:18px; width:18px; border:none; font-size:x-small; } .goog-palette-cell-hover .goog-palette-colorswatch{ height:16px; width:16px; border:1px solid #fff } /*.goog-palette-cell-selected .goog-palette-colorswatch{ height:16px; width:16px; border:1px solid #333; color:#fff; font-weight:bold; background: url(../images/toolbar7.png) no-repeat -368px }/* /*--------------------------------------------------------------------------------------------------------------- 9、loading样式 ---------------------------------------------------------------------------------------------------------------*/ #loadMask {background:transparent url(../images/loading_panel_bg.png) no-repeat 0 0;width:122px;height:70px;} #loadMask p{margin:0;padding:0;background:transparent url(../images/shopex_loading.gif) no-repeat 50% 18px;width:122px;height:20px;padding-top:40px;font-size:12px;color:#ccc;text-align:center;} /*--------------------------------------------------------------------------------------------------------------- 10、翻页的样式 ---------------------------------------------------------------------------------------------------------------*/ .pager a{ padding:2px 5px; text-decoration:none; color:#000; } .pager a:hover{ background:#fff; } /*--------------------------------------------------------------------------------------------------------------- 11、某些菜单的操作说明以及基本功能的简单解释 ---------------------------------------------------------------------------------------------------------------*/ .guidestep{ } .guidestep h2{ margin-bottom:25px; font-size:14px; color:#000; margin-left:50px; } .guidestep ul li{ border:1px solid #ddd; position:relative; height:35px; width:650px; margin-left:100px; background:#fff; padding:15px 10px 0 40px; margin-bottom:10px; z-index:0; font-size:12px; line-height:18px; } .guidestep ul li a{ text-decoration:none; color:#f90; font-weight:700; } .guidestep ul li span.num{ position:absolute; top:5px; left:-20px; width:40px; height:40px; } .guidestep ul li span.num1{ background:url(../images/helpstepnum.gif) no-repeat; } .guidestep ul li span.num2{ background:url(../images/helpstepnum.gif) no-repeat 0 -44px; } .guidestep ul li span.num3{ background:url(../images/helpstepnum.gif) no-repeat 0 -88px; } .guidestep ul li span.num4{ background:url(../images/helpstepnum.gif) no-repeat 0 -132px; } .guidestep ul li span.num5{ background:url(../images/helpstepnum.gif) no-repeat 0 -176px; } .guidestep ul li span.num6{ background:url(../images/helpstepnum.gif) no-repeat 0 -220px; } .guidestep ul li .apply{ position:absolute; } /* 从前台移过来的片段 .如果需要删掉此段css,办法有两个: 1.更改后台下单方式,将后台html独立出来。 2.更改前台下单html,减少对样式的依赖 .section{ clear:both; line-height:1.8em; } .section em{ font-stretch:normal; color:#FF6600; margin:0 2px; } .section .row{ text-align:left; clear:both; } .section label{ color:#000000; display:block; float:left; font-weight:700; padding:2px 0; text-align:right; width:100px; } .section .nof{ float:none; width:auto; text-align:left; } .section .kef{ font-weight:normal; color:#FF0000; } .section .sinput{ width:160px; } .section .btnBar{ text-align:right; padding:10px 10% 8px 0; } .section .btnBar input,.section input.btn{ } */ .tagEditor{ background: #E7EFF5 url(../images/sysrightbackgroud.gif) repeat-x; white-space:normal; height:150px; border:1px solid #ccc ; overflow:auto; margin-bottom:10px; padding:4px; } .tagEditor span{ background: url(../images/functionareabg.gif) 0 -23px; padding:2px 4px; margin:2px 2px 0 0; cursor: pointer; color: #000; text-decoration: none; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #bec6ce; border-bottom: 1px solid #bec6ce; outline:none; float:left; height:20px; line-height:20px; white-space:nowrap; } .tagEditor span:hover{ background:#FFFFFF; color:#000; } .tagEditor span.checked{ background:#FFFFFF; border-color:#BEC6CE rgb(255, 255, 255) rgb(255, 255, 255) rgb(190, 198, 206); border-style:solid; border-width:1px; color:#000; } b.tag{ padding:0 2px; border:1px solid #ccc; color:#060; background:#fff; margin-right:3px; } .helperBox{ position: absolute; z-index:9999; background:#ffc; border:1px solid #999; } /*--------------------------------------------------------*/ /* 购物车 /*--------------------------------------------------------*/ .CartWrap{ clear:both; } .CartWrap .CartNav{ width:100%; border-bottom:2px dotted #ccc; padding:4px 0 0 0; margin:0 0 15px 0; } .CartWrap h3{ font-size:1em; color:#ff6600; margin:3px 10px; padding:0; border:none; background:none; } .CartWrap h3.t{ background:#f9f9f9; margin:0 0 8px 0; padding:3px 8px; } .CartWrap h4{ margin:0 0 2px 0; } .CartWrap .totalprice{ font-size:1.2em; font-weight:bold; color:#FF3300; } .CartWrap .recommend .gofavor{ text-align:right; padding:0 10px; } .CartWrap .CartBtn{ margin:20px; margin-bottom:60px; text-align:center; } .CartWrap .field{ border:2px dotted #CCCCCC; margin:0 10px 20px 10px; padding:10px; } .CartWrap .fieldin{ padding:5px; } .CartWrap .row{ margin:10px 0; } .CartWrap .note{ margin:0 0 0 5px; color:#999999; } .CartWrap #receiver, .CartWrap #payment, .CartWrap #shipping{ padding-left:110px; margin:0 5px; } .CartWrap #receiver{ background:url(recievertitle.gif) no-repeat; } .CartWrap #payment{ background:url(paytitle.gif) no-repeat; } .CartWrap #shipping{ background:url(delivertitle.gif) no-repeat; } /*图片查看按钮*/ .viewIMG{ line-height:15px; background:transparent url(../images/viewIMG.gif) no-repeat 0 0!important; border:none!important; cursor:pointer; } .viewIMG:hover{ background-position:0 -24px!important; } .viewIMG_Loading,.viewIMG_Loading:hover{ background-position:0 -48px!important; } .valierror{ padding:3px 5px 3px 21px; margin-left:10px; display:inline; height:25px; border: 1px solid #E6594E; white-space:nowrap;text-align: left;color: #E6594E; background:#FCEAE8 url(../images/warning.gif) no-repeat 3px; }