/* ---------------------------------- Main CSS file for Discuz! X (C) Comsenz Inc. https://www.discuz.vip Created & Modified by Lushnis, Pony, Alice, Dfox & DragonLee. ---------------------------------- 结构目录： 1. 重定义浏览器默认样式 2. 全局常用 CSS 样式 3. 表单及表单元素 4. 页面布局以及通用的区块样式 5. 列表样式vwmy 6. 其他特定功能块 1. 个人中心面板 2. 简易编辑器 3. 弹出菜单、弹出层及弹出窗口 4. 联系人列表、短消息窗口 5. 登录和注册 6. 其他 7. 拖拽及页面 DIY * 其他页面专用样式参见 module.css ---------------------------------- 常用变量说明： 通用边框颜色： {COMMONBORDER} #CDCDCD 通用背景填充色： {COMMONBG} #F2F2F2 特殊边框颜色： {SPECIALBORDER} #D1D9DF 特殊背景填充色： {SPECIALBG} #E9F2F9 ---------------------------------- CSS 样式模块的格式示例： Name: 模块名称 Level: 级别（Global, Channel, Function） Dependent: 依赖关系，该模块必须依赖于何种模块 Sample: 用法示例，或指出改模块所作用的直接页面 Explain: 附加说明 Author: 创建者 日期(两位数年月日时) Last Modify: 最终修改者 日期(两位数年月日时) ---------------------------------- CSS 写作注意事项： 1. 属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间须有空格，例如：.class { width: 400px; height: 300px; } 2. 属性的书写顺序： 2.1. 按照元素模型由外及内，由整体到细节书写，大致分为五组： 位置：position,left,right,float 盒模型属性：display,margin,padding,width,height 边框与背景：border,background 段落与文本：line-height,text-indent,font,color,text-decoration,... 其他属性：overflow,cursor,visibility,... 2.2. 针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:; 3. 谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式 4. 选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl -> Clearfix 5. 避免使用各种 CSS Hack，如需对 IE 进行特殊定义，请参阅下节“关于 CSS Hack 的说明” 6. 勿使用冗余低效的 CSS 写法，例如： ul li a span { ... } 7. 慎用 !important 8. 建议使用在 class/id 名称中的词语 6.1. 表示状态：a->active 6.2. 表示结构：h->header,c->content,f->footer 6.3. 表示区域：mn->main,sd->side,nv-navigation,mu->menu 6.4. 表示样式：l-list,tab,p_pop 9. 开发过程中的未定事项，须用 [!] 标出，以便于后续讨论整理 ---------------------------------- 关于 CSS Hack 的说明： 所有 IE浏览器适用： .ie_all .foo { ... } IE6 专用： .ie6 .foo { ... } IE7 专用： .ie7 .foo { ... } IE8 专用： .ie8 .foo { ... } ---------------------------------- */ /* Name: mod_reset Level: Global Explain: 重定义浏览器默认样式 Last Modify: Pony */ * { word-wrap: break-word; } body { {BGCODE}; min-width: 1200px; } body, input, button, select, textarea { font: {FONTSIZE} {FONT}; color: {TABLETEXT}; } textarea { resize: none; } body, ul, ol, li, dl, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset, .pr, .pc { margin: 0; padding: 0; } table { empty-cells: show; border-collapse: collapse; } caption, th { text-align: left; font-weight: 400; } ul li, .xl li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-size: 1em; } em, cite, i { font-style: normal; } a { color: {LINK}; text-decoration: none; } a:hover { text-decoration: underline; } a img { border: none; } :focus { outline-color: {MENUBGCOLOR}; } label { cursor: pointer; } /* 消除修改DOCTYPE为HTML5以后造成的img基线问题 */ img.boardlogo, img.user_avatar, .slideimage img { vertical-align: middle; } /* Name: mod_float Level: Global Sample: class="z/y" Explain: .z/.y 浮动 left/right Last Modify: lushnis */ .z { float: left; } .y { float: right; } /* Name: mod_iconfont Level: Global Explain: 提前引入iconfont，便于后续css调用 */ @font-face { font-family: "dzicon"; src: url('{IMGDIR}/dzicon.eot'); src: url('{IMGDIR}/dzicon.eot?#iefix') format('eot'), url('{IMGDIR}/dzicon.woff2') format('woff2'), url('{IMGDIR}/dzicon.woff') format('woff'); font-weight: normal; font-style: normal; } [class^="fico-"]:before, [class*=" fico-"]:before { font-family: "dzicon"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; font-size: 120%; } /* font icon size */ .fic4 { font-size: 14px; }.fic6 { font-size: 16px; }.fic8 { font-size: 18px; } /* flip x */ .fifx::before { transform: scale(-1,1); } /* font rotate */ @keyframes dzrotate{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}} .ficr { margin-right: .2em; }.ficr:before { margin-right: 0; animation: dzrotate 2s infinite linear; } .loadicon { background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23999' d='M12.2 12.2L14 14H9V9l1.8 1.8c.7-.7 1.2-1.7 1.2-2.8 0-1.9-1.3-3.4-3-3.9v-2c2.8.4 5 2.9 5 5.9 0 1.6-.7 3.1-1.8 4.2zM3.8 3.8C2.7 4.8 2 6.3 2 8c0 3 2.2 5.4 5 5.9v-2.1c-1.7-.4-3-2-3-3.9 0-1.1.5-2.1 1.2-2.8L7 7V2H2l1.8 1.8z'/%3e%3c/svg%3e"); display: inline-block; width: 16px; height: 16px; animation: dzrotate 1.2s infinite linear; } /* font color primary/secondary/notice/light/alarm/valid/invalid */ .fc-p { color: {MENUBGCOLOR}; } .fc-s { color: #999; } .fc-n { color: #7DA0CC; } .fc-l { color: #FF9C00; } .fc-a { color: #F26C4F; } .fc-v { color: #7CBE00; } .fc-i { color: #FF512C; } .fc-t { color: transparent; } /* no margin right */ .fnmr:before { margin-right: 0; } /* Name: mod_clearfix Level: Global Sample: class="cl" Explain: Clearfix,避免因子元素浮动而导致的父元素高度缺失能问题 Last Modify: lushnis */ .cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; } /* 元素获取焦点时隐藏外边框 */ .hidefocus { outline: none; } /* Name: mod_hr Level: Global Sample:
Explain: 重定义
元素的样式，去除默认边距 Last Modify: lushnis */ hr { display: block; clear: both; } .mn hr, .sd hr { margin: 0 10px; } .area hr { margin-left: 0 !important; margin-right: 0 !important; } /* Name: mod_hr_solid Level: Global Dependent: mod_hr Sample:
Explain: 定义 1px 高度实线样式的
元素，具有两个个扩展样式，.l2 和 .l3，分别实现 2px 和 3px 的实线分割线 Last Modify: lushnis */ hr.l { height: 1px; border: none; background: {COMMONBORDER}; color: {COMMONBORDER}; } hr.l2 { height: 2px; } hr.l3 { height: 3px; } /* Name: mod_hr_dashed Level: Global Dependent: mod_hr Sample:
Explain: 定义 1px 高度虚线样式的
元素 Last Modify: lushnis */ hr.da { height: 0; border: none; border-top: 1px dashed {COMMONBORDER}; background: transparent; color: transparent; } /* [!]使用注意 */ hr.bk { margin-bottom: 10px !important; height: 0; border: none; border-top: 1px solid {WRAPBG}; background: transparent; color: transparent; } .n .sd hr.bk { border-top-color: #F9F9F9; } /* 清除Margin */ hr.m0 { margin-left: 0; margin-right: 0; } /* Name: mod_page_header Level: Global Sample:

Text

Explain: 页面中标题级别的文字 [!]此处须整合为一个单独 class Last Modify: lushnis */ /* .wx --> weight text 粗体字，通常用于大标题 */ .wx, .ph { font-family: 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti', Tahoma, 'SimHei', sans-serif; font-weight: 100; } /* Page header */ .ph { font-size: 20px; } /* Main title */ .mt { padding: 10px 0; font-size: 16px; } /* 行内分割竖线 */ .pipe { margin: 0 5px; color: #CCC; } /* 文本属性：字号、颜色、粗细 */ /* Name: mod_text_size Level: Global Sample: class="xs*" Explain: 文字字号，分为四个级别 Last Modify: lushnis */ .xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; } .xs1 { font-size: 12px !important; } .xs2 { font-size: 14px !important; } .xs3 { font-size: 16px !important; } /* Name: mod_text_gray_level Level: Global Dependent: - Sample: class="xs[*]" Explain: 文字字号，分为四个级别 Last Modify: lushnis */ .xg1, .xg1 a { color: {LIGHTTEXT} !important; } .xg1 .xi2 { color: {HIGHLIGHTLINK} !important; } .xg2 { color: {MIDTEXT}; } /* Name: mod_text_importance_level Level: Global Sample: class="xs[*]" Explain: 文字提亮级别，分为两级，默认模板中，1为橙色，2为蓝色 Last Modify: lushnis */ .xi1, .onerror { color: {NOTICETEXT}; } .xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK} ; } /* Name: mod_text_weight_level Level: Global Sample: class="xs[*]" Explain: 文字字号，分为四个级别 Last Modify: lushnis */ .xw0 { font-weight: 400; } .xw1 { font-weight: 700; } /* Name: mod_border Level: Global Dependent: - Sample: class="bbda/bbs" Explain: 边框样式，该模块仅作用于元素的下边框，分为虚线和实线两种，宽度均为 1px Last Modify: lushnis */ .bbda { border-bottom: 1px dashed {COMMONBORDER}; } .btda { border-top: 1px dashed {COMMONBORDER}; } .bbs { border-bottom: 1px solid {COMMONBORDER} !important; } .bts { border-top: 1px dashed {COMMONBORDER} !important; } /* Name: mod_border_reset Level: Global Sample: class="bw0/bw0_all" Explain: 去除边框 Last Modify: lushnis */ .bw0 { border: none !important; } .bw0_all, .bw0_all th, .bw0_all td { border: none !important; } /* Name: mod_background_reset Level: Global Sample: class="bg0_c/bg0_i/bg0_all" Explain: 去除背景，bg0_c、bg0_i 和 bg0_all 分别为去除背景颜色、去除背景图片和去除所有背景元素 Last Modify: Pony */ .bg0_c { background-color: transparent !important; } .bg0_i { background-image: none !important; } .bg0_all { background: none !important; } /* Name: mod_notice_line Level: Global Sample:
Explain: 黄色背景的提示条，一般用在单行醒目提示，不可用于多行块级区域 Last Modify: lushnis */ .ntc_l { padding: 5px 10px; background: #FEFEE9; } .ntc_l .d { width: 14px; height: 14px; background: #CCC; border-radius: 7px; text-align: center; text-decoration: none; line-height: 14px; overflow: hidden; } .ntc_l .d:before { content: "\d7"; font-weight: 700; color: #FFF; } .ntc_l .d:hover { background: #F99; } /* 圆角 [!]此处考虑弃用 */ .brs, .avt img, .oshr { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .brm { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .brw { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } /* Name: mod_margin Level: Global Sample: class="mtn/mtm/mtw/..." Explain: 外边距样式，作用于元素的上下外边距，上下各具有 n, m, w 三个级别 Last Modify: lushnis */ .mtn { margin-top: 5px !important; } .mbn { margin-bottom: 5px !important; } .mtm { margin-top: 10px !important; } .mbm { margin-bottom: 10px !important; } .mtw { margin-top: 20px !important; } .mbw { margin-bottom: 20px !important; } /* Name: mod_padding Level: Global Sample: class="ptn/ptm/ptw/..." Explain: 内边距样式，作用于元素的上下内边距，上下各具有 n, m, w 三个级别 Last Modify: lushnis */ .ptn { padding-top: 5px !important; } .pbn { padding-bottom: 5px !important; } .ptm { padding-top: 10px !important; } .pbm { padding-bottom: 10px !important; } .ptw { padding-top: 20px !important; } .pbw { padding-bottom: 20px !important; } /* Name: mod_avatar Level: Global Sample:
username
Explain: 标准尺寸头像样式，默认为 48px*48px，带边框 Last Modify: lushnis */ .avt img { padding: 2px; width: 48px; height: 48px; background: {WRAPBG}; border: 1px solid; border-color: {COMMONBG} {COMMONBORDER} {COMMONBORDER} {COMMONBG}; } /* Name: mod_avatar_middle, mod_avatar_small Level: Global Sample:
username
Explain: 中等尺寸和小尺寸头像样式，中等尺寸为宽度 120px，高度按比例；小尺寸为 24px*24px Last Modify: lushnis */ .avtm img { width: 120px; height: auto; } .avts img { width: 24px; height: 24px; vertical-align: middle; } /* Name: mod_emp Level: Global Sample:

暂无数据

Explain: 页面中无数据输出时，用此样式显示相关提示，如无特殊必要，建议使用

而不是

Last Modify: lushnis */ .emp { padding: 20px 10px; } .emp a { color: {HIGHLIGHTLINK}; text-decoration: underline !important; } /* Name: mod_align Level: Global Sample: class="vm/hm" Explain: 纵向及横向对齐方式 Last Modify: lushnis */ .vm { vertical-align: middle; } .vm * { vertical-align: middle; } .hm { text-align: center; } /* Name: mod_alt Level: Global Sample: class="{echo swapclass('alt');}" Explain: 隔行换色时深色背景 Last Modify: lushnis */ .alt, .alt th, .alt td { background-color: {COMMONBG}; } /* Name: mod_notice Level: Global Sample: class="notice" Explain: 类似统计中需注意的文字样式 [!]此处须考虑名称简写为 ntc Last Modify: lushnis */ .notice { clear: both; margin: 5px 0; padding: 3px 0; } .notice:before { content: "\f145"; font-family: dzicon; font-size: 16px; line-height: 14px; margin-right: 4px; color: #F26C4F; } /* Name: mod_ajax_wait_info Level: Global Sample: id="ajaxwaitid" Explain: 相应页面中 AJAX 请求时的状态显示 Last Modify: lushnis */ #ajaxwaitid { display: none; position: absolute; right: 0; top: 0; z-index: 1; padding: 0 5px; background: #D00; color: {LIGHTLINK}; } /* Name: mod_showmenu Level: Global Sample: class="showmenu" Explain: 下拉菜单 Last Modify: lushnis */ .showmenu { padding-right: 6px; cursor: pointer; white-space: nowrap; } #um .showmenu { margin-right: -5px; } .showmenu::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } /* Name: mod_cursor Level: Global Sample: class="cur1" Explain: 鼠标样式，可以根据需要按序添加 Last Modify: Pony */ .cur1 { cursor: pointer; } /* 如果验证码有错乱，可添加此样式.sec（全局，修改时要小心，会涉及分享、快速回复和 feed日志相册中的评论等地方） by Pony */ /* ------------------------------------------------------------------------ 表单及表单元素 */ /* .pn button .pnc button with light color .pnp post button .px input[text] .pt textarea .pf input[file] .pc input[checkbox] .pr input[radio] .ps select .oshr share button .ofav fav button with oshr .oivt invite button with oshr */ /* 必填项 */ .rq { color: red; } /* Name: mod_input[text]_textarea_select Level: Global Sample: class="px/pt/ps" Explain: 单行输入框（px）、多行文本框（pt）和选择框(ps/select) Last Modify: Pony */ .px, .pt, .ps, select { border: 1px solid; border-color: {INPUTBORDERDARKCOLOR} {INPUTBORDER} {INPUTBORDER} {INPUTBORDERDARKCOLOR}; background: {INPUTBG}; } .px:focus, .ps:focus, select:focus, .ftid a:focus { outline: 0; border-color: {MENUBGCOLOR}; box-shadow: 0 0 2px {MENUBGCOLOR}; } .pt:focus { outline: 0; border-color: {MENUBGCOLOR}; } .px, .pt { padding: 2px 4px; line-height: 17px; } .px { height: 17px; } .pxs { width: 30px !important; } .fdiy .tfm .px, .fdiy .tfm .pt { width: auto; } .p_fre { width: auto !important; } .er { border-color: #F66 #FFBDB9 #FFBDB9 #F66; background-color: #FDF4F4; } .er:focus { border-color: {MENUBGCOLOR}; box-shadow: 0 0 2px {MENUBGCOLOR}; background-color: #FFF; } .pt { overflow-y: auto; } div.pt { height: 100px; line-height: 100px; } .ps, select { padding: 2px 2px 2px 1px; } /* 自动调整高度的 textarea by Pony */ .pts { vertical-align: top; overflow: hidden; } .cmt .pts { width: 60%; } /* Name: mod_button Level: Global Sample: Explain: 按钮样式 Last Modify: Pony */ button::-moz-focus-inner { border: 0; padding: 0; } .pn { vertical-align: middle; overflow: hidden; margin-right: 3px; padding: 0; height: 23px; border: 1px solid #999; background: #EEE; cursor: pointer; -moz-box-shadow: 0 1px 0 #E5E5E5; -webkit-box-shadow: 0 1px 0 #E5E5E5; box-shadow: 0 1px 0 #E5E5E5; border-radius: 3px; } .pn:active { background: #dbdbdb; } .pn:focus { box-shadow: 0 0 0 2px rgba(153, 153, 153, 0.25); outline: 0; } .pn em, .pn span, .pn strong { padding: 0 10px; line-height: 21px; } .pn em, .pn strong { font-weight: 700; } a.pn { height: 21px; line-height: 21px; color: {TABLETEXT} !important; } a.pn:hover { text-decoration: none; } .pnc, a.pnc { border-color: #06C; background-color: #06C; color: #FFF !important; } .pnc:active { background: #0059b3; } .pnc:focus { box-shadow: 0 0 0 2px rgba(36, 88, 167, 0.25); } .pnpost .pn { height: 26px; } /* Name: mod_input[radio]_input[checkbox]_label Level: Global Sample: class="pr/pc/lb" Explain: 单选按钮(pr)、多选框(pc)和