|
|
@charset "utf-8";
|
|
|
/* 定义字符编码为UTF - 8，确保样式表中的特殊字符能够正确解析，避免出现乱码问题 */
|
|
|
|
|
|
/* dialog样式 */
|
|
|
.wrapper {
|
|
|
zoom: 1;
|
|
|
width: 630px;
|
|
|
/* 针对IE6及以下版本浏览器进行宽度调整，使其宽度为626px（此hack方式在现代浏览器中已逐渐不再使用，但在处理旧浏览器兼容性时可能会遇到） */
|
|
|
*width: 626px;
|
|
|
height: 380px;
|
|
|
margin: 0 auto;
|
|
|
padding: 10px;
|
|
|
position: relative;
|
|
|
font-family: sans-serif;
|
|
|
}
|
|
|
|
|
|
/* tab样式框大小 */
|
|
|
.tabhead {
|
|
|
float: left;
|
|
|
/* 将元素向左浮动，使其在水平方向上排列，常用于创建横向导航栏或选项卡头部等布局 */
|
|
|
}
|
|
|
|
|
|
.tabbody {
|
|
|
width: 100%;
|
|
|
height: 346px;
|
|
|
position: relative;
|
|
|
clear: both;
|
|
|
/* 清除左右两侧的浮动元素影响，确保该元素在垂直方向上独占一行，避免受到其他浮动元素的干扰 */
|
|
|
}
|
|
|
|
|
|
.tabbody.panel {
|
|
|
position: absolute;
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
background: #fff;
|
|
|
overflow: hidden;
|
|
|
display: none;
|
|
|
/* 初始状态下，面板隐藏且宽度和高度为0，不占据页面空间，用于在切换选项卡时动态显示对应的面板内容 */
|
|
|
}
|
|
|
|
|
|
.tabbody.panel.focus {
|
|
|
width: 100%;
|
|
|
height: 346px;
|
|
|
display: block;
|
|
|
/* 当面板具有.focus类时，显示该面板，使其宽度和高度恢复正常，占据整个.tabbody区域，用于展示选中选项卡对应的内容 */
|
|
|
}
|
|
|
|
|
|
/* 上传附件相关样式 */
|
|
|
|
|
|
/* 初始状态下上传附件的面板样式 */
|
|
|
.tabbody #upload.panel {
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
overflow: hidden;
|
|
|
position: absolute!important;
|
|
|
/* 使用!important 确保此定位属性具有最高优先级，使其绝对定位，脱离文档流，不占据页面空间 */
|
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
|
/* 通过裁剪元素，使其在页面上不可见，只保留一个1像素的小区域，常用于隐藏元素但仍保留其在文档中的位置 */
|
|
|
background: #fff;
|
|
|
display: block;
|
|
|
/* 虽然显示为块级元素，但由于宽度和高度为0且被裁剪，实际上在初始状态下不可见 */
|
|
|
}
|
|
|
|
|
|
/* 当上传附件面板获得焦点（被选中）时的样式 */
|
|
|
.tabbody #upload.panel.focus {
|
|
|
width: 100%;
|
|
|
height: 346px;
|
|
|
display: block;
|
|
|
clip: auto;
|
|
|
/* 恢复裁剪属性为自动，使面板在获得焦点时完全显示，占据整个.tabbody区域，用于展示上传附件相关的内容 */
|
|
|
}
|
|
|
|
|
|
/* 上传附件的队列列表样式 */
|
|
|
#upload.queueList {
|
|
|
margin: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
overflow: hidden;
|
|
|
/* 绝对定位，宽度和高度均为100%，使其占据父容器的整个空间，并且超出部分隐藏，用于展示上传文件的队列信息 */
|
|
|
}
|
|
|
|
|
|
/* 上传附件区域内段落样式 */
|
|
|
#upload p {
|
|
|
margin: 0;
|
|
|
/* 去除段落的默认外边距，使段落排版更紧凑，适用于特定的布局需求，比如在上传附件区域内的提示文字等 */
|
|
|
}
|
|
|
|
|
|
/* 元素不可见样式类 */
|
|
|
.element-invisible {
|
|
|
width: 0!important;
|
|
|
height: 0!important;
|
|
|
border: 0;
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
overflow: hidden;
|
|
|
position: absolute!important;
|
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
|
/* 与前面 #upload.panel 初始状态类似，通过设置为绝对定位、裁剪和宽度高度为0等方式，使元素完全不可见，但仍保留在文档结构中，常用于隐藏一些辅助性元素，如屏幕阅读器可识别但用户不可见的内容 */
|
|
|
}
|
|
|
|
|
|
#upload.placeholder {
|
|
|
margin: 10px;
|
|
|
border: 2px dashed #e6e6e6;
|
|
|
/* 针对IE6及以下版本浏览器设置边框为0（此hack方式在现代浏览器中已逐渐不再使用，但在处理旧浏览器兼容性时可能会遇到） */
|
|
|
*border: 0px dashed #e6e6e6;
|
|
|
height: 172px;
|
|
|
padding-top: 150px;
|
|
|
text-align: center;
|
|
|
background: url(./images/image.png) center 70px no-repeat;
|
|
|
/* 设置背景图片，使其在水平和垂直方向都居中显示，并且在垂直方向上距离顶部70px处开始重复（这里是不重复显示，因为只有一张图片），用于提示用户上传文件的位置或功能相关的图片展示 */
|
|
|
color: #cccccc;
|
|
|
font-size: 18px;
|
|
|
position: relative;
|
|
|
top: 0;
|
|
|
/* 针对IE6及以下版本浏览器调整元素的垂直位置（此hack方式在现代浏览器中已逐渐不再使用，但在处理旧浏览器兼容性时可能会遇到） */
|
|
|
*top: 10px;
|
|
|
}
|
|
|
|
|
|
#upload.placeholder.webuploader-pick {
|
|
|
font-size: 18px;
|
|
|
background: #00b7ee;
|
|
|
border-radius: 3px;
|
|
|
line-height: 44px;
|
|
|
padding: 0 30px;
|
|
|
/* 针对IE6及以下版本浏览器设置宽度（此hack方式在现代浏览器中已逐渐不再使用，但在处理旧浏览器兼容性时可能会遇到） */
|
|
|
*width: 120px;
|
|
|
color: #fff;
|
|
|
display: inline-block;
|
|
|
margin: 0 auto 20px auto;
|
|
|
cursor: pointer;
|
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
#upload.placeholder.webuploader-pick-hover {
|
|
|
background: #00a2d4;
|
|
|
/* 当鼠标悬停在具有webuploader-pick类的元素上时，改变其背景颜色，用于提供交互反馈，提示用户可以进行点击操作 */
|
|
|
}
|
|
|
|
|
|
#filePickerContainer {
|
|
|
text-align: center;
|
|
|
/* 使内部元素水平居中对齐，常用于包含上传按钮等需要居中显示的元素容器 */
|
|
|
}
|
|
|
|
|
|
#upload.placeholder.flashTip {
|
|
|
color: #666666;
|
|
|
font-size: 12px;
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
bottom: 20px;
|
|
|
/* 绝对定位元素，使其在父元素底部向上20px处显示，用于显示与上传相关的提示信息，如Flash插件相关提示 */
|
|
|
}
|
|
|
#upload.placeholder.flashTip a {
|
|
|
color: #0785d1;
|
|
|
text-decoration: none;
|
|
|
/* 设置链接的颜色为特定蓝色，并去除默认的下划线，使链接在初始状态下看起来更简洁，可能用于与整体页面风格相匹配 */
|
|
|
}
|
|
|
|
|
|
#upload.placeholder.flashTip a:hover {
|
|
|
text-decoration: underline;
|
|
|
/* 当鼠标悬停在链接上时，添加下划线，这是一种常见的交互提示，让用户知道该元素是可点击的链接 */
|
|
|
}
|
|
|
|
|
|
#upload.placeholder.webuploader-dnd-over {
|
|
|
border-color: #999999;
|
|
|
/* 当元素处于可拖放（drag and drop）状态且有文件正在被拖放到该元素上时，改变其边框颜色，用于提供视觉反馈，告知用户当前操作的状态 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist {
|
|
|
list-style: none;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
position: relative;
|
|
|
height: 300px;
|
|
|
/* 去除列表的默认样式（如项目符号等），设置外边距和内边距为0，使列表更紧凑。同时，设置水平方向溢出隐藏，垂直方向自动出现滚动条，并且相对定位，高度为300px，用于显示上传文件的列表，当文件数量超过容器高度时可以滚动查看 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist:after {
|
|
|
content: '';
|
|
|
display: block;
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
overflow: hidden;
|
|
|
clear: both;
|
|
|
/* 这是一个清除浮动的技巧，通过创建一个伪元素并设置为块级元素，使其在文档流中占据空间，清除之前浮动元素对布局的影响，确保父元素（.filelist）能够正确包含其内部的浮动子元素 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist li {
|
|
|
width: 113px;
|
|
|
height: 113px;
|
|
|
background: url(./images/bg.png);
|
|
|
/* 为每个列表项（li元素）设置宽度和高度均为113px，并指定背景图片，该背景图片可能用于提供一个统一的视觉背景样式，让每个文件展示区域有相似的外观效果 */
|
|
|
text-align: center;
|
|
|
margin: 9px 0 0 9px;
|
|
|
/* 针对IE6及以下版本浏览器调整外边距（此hack方式在现代浏览器中已逐渐不再使用，但在处理旧浏览器兼容性时可能会遇到） */
|
|
|
*margin: 6px 0 0 6px;
|
|
|
position: relative;
|
|
|
display: block;
|
|
|
float: left;
|
|
|
/* 将列表项设置为块级元素，使其可以设置宽高、内外边距等样式属性，并且向左浮动，使多个列表项能够在一行内从左到右依次排列，常用于实现类似图片列表、文件列表等横向布局的展示效果 */
|
|
|
overflow: hidden;
|
|
|
font-size: 12px;
|
|
|
/* 隐藏超出列表项区域的内容，防止内容溢出造成布局混乱，同时设置文本的字体大小为12px，用于显示文件相关的一些文字信息 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist li p.log {
|
|
|
position: relative;
|
|
|
top: -45px;
|
|
|
/* 相对自身原本的位置，向上移动45px，用于调整.log段落元素在列表项中的垂直位置，使其显示在更合适的地方，具体显示效果取决于整个列表项内的布局和其他元素的位置关系 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist li p.title {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
top: 5px;
|
|
|
text-indent: 5px;
|
|
|
text-align: left;
|
|
|
/* 将.title段落元素设置为绝对定位，使其可以脱离文档流，根据设置的 top、left 值精确定位在列表项的左上角（top: 0，left: 0），宽度占满整个列表项宽度（width: 100%）。同时，设置超出内容隐藏（overflow: hidden）、文本不换行（white-space: nowrap）以及当文本超出容器宽度时显示省略号（text-overflow: ellipsis），并且设置首行缩进5px（text-indent: 5px），文本左对齐（text-align: left），用于展示文件的标题信息，确保标题在有限的空间内合理显示，过长时显示省略号提示还有更多内容 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist li p.progress {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
height: 8px;
|
|
|
overflow: hidden;
|
|
|
z-index: 50;
|
|
|
margin: 0;
|
|
|
border-radius: 0;
|
|
|
background: none;
|
|
|
-webkit-box-shadow: 0 0 0;
|
|
|
/* 将.progress段落元素设置为绝对定位，位于列表项底部（bottom: 0），宽度占满整个列表项宽度（width: 100%），高度为8px，用于展示文件上传的进度条相关信息。设置溢出隐藏（overflow: hidden）防止进度条内容超出其容器范围，设置较高的z-index值（z-index: 50）确保进度条在需要时能显示在其他元素之上（比如覆盖在文件图标或其他内容上）。将外边距设置为0，边框圆角设置为0，背景设置为无（background: none），并且清除webkit浏览器下的盒阴影（-webkit-box-shadow: 0 0 0），用于自定义进度条的外观样式，使其符合特定的设计需求 */
|
|
|
}
|
|
|
#upload.filelist li p.progress span {
|
|
|
display: none;
|
|
|
/* 初始状态下将该 span 元素隐藏，不显示在页面上，可能后续会通过 JavaScript 等方式根据文件上传进度等情况来控制其显示 */
|
|
|
overflow: hidden;
|
|
|
width: 0;
|
|
|
height: 100%;
|
|
|
background: #1483d8 url(./images/progress.png) repeat-x;
|
|
|
/* 设置背景颜色为特定蓝色（#1483d8），并添加一个重复平铺的背景图片（progress.png），使其在水平方向重复排列，用于模拟进度条的背景样式，同时设置宽度为 0（初始状态下进度条无进度），高度占满父元素（p.progress）的高度，并且隐藏超出部分内容，防止布局混乱 */
|
|
|
|
|
|
-webkit-transition: width 200ms linear;
|
|
|
-moz-transition: width 200ms linear;
|
|
|
-o-transition: width 200ms linear;
|
|
|
-ms-transition: width 200ms linear;
|
|
|
transition: width 200ms linear;
|
|
|
/* 分别针对不同浏览器引擎（WebKit、Mozilla、Opera、IE（部分支持））设置过渡效果，当元素的宽度属性发生变化时，会以线性（linear）的方式在 200 毫秒（200ms）内进行过渡动画展示，使得进度条宽度变化时能有平滑的视觉效果，例如从无进度（宽度为 0）到有进度（宽度逐渐增加）的过程看起来更自然 */
|
|
|
|
|
|
-webkit-animation: progressmove 2s linear infinite;
|
|
|
-moz-animation: progressmove 2s linear infinite;
|
|
|
-o-animation: progressmove 2s linear infinite;
|
|
|
-ms-animation: progressmove 2s linear infinite;
|
|
|
animation: progressmove 2s linear infinite;
|
|
|
/* 同样针对不同浏览器引擎设置动画效果，名为 "progressmove" 的动画会以线性（linear）方式持续运行，并且无限循环（infinite），动画时长为 2 秒（2s）。这个动画可能用于实现进度条背景图片的动态移动等效果，模拟进度的动态变化视觉感受 */
|
|
|
|
|
|
-webkit-transform: translateZ(0);
|
|
|
/* 在 WebKit 浏览器（如 Safari、Chrome 等）中，使用 3D 变换的 translateZ(0) 来触发硬件加速，有助于提升动画的性能和流畅度，特别是对于一些复杂的动画效果或者页面滚动等场景下，让元素的渲染和动画表现更流畅 */
|
|
|
}
|
|
|
|
|
|
@-webkit-keyframes progressmove {
|
|
|
0% {
|
|
|
background-position: 0 0;
|
|
|
}
|
|
|
100% {
|
|
|
background-position: 17px 0;
|
|
|
}
|
|
|
}
|
|
|
@-moz-keyframes progressmove {
|
|
|
0% {
|
|
|
background-position: 0 0;
|
|
|
}
|
|
|
100% {
|
|
|
background-position: 17px 0;
|
|
|
}
|
|
|
}
|
|
|
@keyframes progressmove {
|
|
|
0% {
|
|
|
background-position: 0 0;
|
|
|
}
|
|
|
100% {
|
|
|
background-position: 17px 0;
|
|
|
}
|
|
|
}
|
|
|
// 以上三段代码分别定义了名为 "progressmove" 的关键帧动画在不同浏览器引擎（WebKit、Mozilla 和通用的浏览器标准下）下的动画规则。
|
|
|
// 在动画的起始（0%）阶段，背景图片的位置为水平方向 0 像素、垂直方向 0 像素（background-position: 0 0），意味着从初始位置开始展示背景图片。
|
|
|
// 在动画的结束（100%）阶段，背景图片的位置变为水平方向 17 像素、垂直方向 0 像素（background-position: 17px 0），通过这种位置的变化，使得背景图片在水平方向上产生移动效果，结合前面设置的无限循环（infinite）属性，就能营造出进度条背景持续动态变化的视觉感受，模拟文件上传进度不断推进的样子。
|
|
|
|
|
|
#upload.filelist li p.imgWrap {
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
line-height: 113px;
|
|
|
vertical-align: middle;
|
|
|
overflow: hidden;
|
|
|
width: 113px;
|
|
|
height: 113px;
|
|
|
/* 将该元素设置为相对定位，使其可以作为内部绝对定位元素的参照容器。设置较高的 z-index 值（z-index: 2），以便在堆叠顺序上使其能够显示在合适的层级（可能会覆盖部分其他元素或者被更高 z-index 的元素覆盖）。设置行高为 113px，垂直对齐方式为 middle，让内部的行内元素在垂直方向上居中对齐，同时隐藏超出该元素范围的内容，并且设置固定的宽度和高度均为 113px，用于包裹图片等相关元素，确定其展示区域的大小和位置关系 */
|
|
|
|
|
|
-webkit-transform-origin: 50% 50%;
|
|
|
-moz-transform-origin: 50% 50%;
|
|
|
-o-transform-origin: 50% 50%;
|
|
|
-ms-transform-origin: 50% 50%;
|
|
|
transform-origin: 50% 50%;
|
|
|
/* 针对不同浏览器引擎（WebKit、Mozilla、Opera、IE（部分支持））设置变换原点，这里将变换原点设置在元素的中心位置（水平和垂直方向均为 50%），意味着后续如果应用旋转、缩放等变换操作，会以元素的中心为基准进行，例如进行旋转时会围绕元素中心旋转，使动画效果更加自然、对称 */
|
|
|
|
|
|
-webit-transition: 200ms ease-out;
|
|
|
-moz-transition: 200ms ease-out;
|
|
|
-o-transition: 200ms ease-out;
|
|
|
-ms-transition: 200ms ease-out;
|
|
|
transition: 200ms ease-out;
|
|
|
/* 分别针对不同浏览器引擎设置过渡效果，当该元素的样式属性发生变化时（如尺寸、位置、透明度等），会以缓出（ease-out）的方式在 200 毫秒（200ms）内进行过渡动画展示，使得样式变化过程更加平滑自然，例如元素的显示隐藏、缩放等操作时能有流畅的视觉效果 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist li p.imgWrap.notimage {
|
|
|
margin-top: 0;
|
|
|
width: 111px;
|
|
|
height: 111px;
|
|
|
border: 1px #eeeeee solid;
|
|
|
/* 针对具有 "notimage" 类的 imgWrap 元素（可能用于表示不是图片类型的文件展示情况）进行特定样式设置，将其上边距设置为 0，宽度和高度分别调整为 111px（相较于父类的 113px 略有缩小），并添加一个 1px 宽的浅灰色（#eeeeee）实线边框，用于区分不同类型文件的展示样式，使其具有独特的外观效果 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist li p.imgWrap.notimage i.file-preview {
|
|
|
margin-top: 15px;
|
|
|
/* 对于在具有 "notimage" 类的 imgWrap 元素内部的 file-preview 元素（可能是用于展示非图片文件预览相关的图标等元素），设置其上边距为 15px，调整其在父元素中的垂直位置，使其显示在合适的地方，符合整体的布局设计要求 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist li img {
|
|
|
width: 100%;
|
|
|
/* 设置列表项（li）内的图片元素宽度为其所在父元素的 100%，即让图片能够自适应父元素的宽度，保证图片在该区域内合理展示，通常用于使图片能够等比例缩放并完整显示在指定的文件列表项展示区域内 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist li p.error {
|
|
|
background: #f43838;
|
|
|
color: #fff;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
height: 28px;
|
|
|
line-height: 28px;
|
|
|
width: 100%;
|
|
|
z-index: 100;
|
|
|
display: none;
|
|
|
/* 用于展示错误信息的段落元素样式设置，将背景颜色设置为红色（#f43838），文本颜色设置为白色（#fff），通过绝对定位将其放置在列表项的底部（bottom: 0，left: 0），设置固定的高度为 28px 和行高为 28px，使其在垂直方向上文本能合理显示，宽度占满整个列表项宽度（width: 100%），并设置较高的 z-index 值（z-index: 100）确保其在需要显示时能覆盖在其他元素之上。初始状态下将其隐藏（display: none），可能后续会根据文件上传出现错误等情况通过 JavaScript 等方式控制其显示，用于向用户提示错误相关信息 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist li.success {
|
|
|
display: block;
|
|
|
/* 将元素设置为块级元素并显示出来，使其在页面中占据空间并可见，与 display:none 相反，这里用于展示特定的成功状态相关元素 */
|
|
|
position: absolute;
|
|
|
/* 将元素设置为绝对定位，使其脱离文档流，可以根据 left、bottom 等属性精确定位在父元素（li）内的具体位置 */
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
/* 定位元素，使其位于父元素（li）的左下角，left: 0 表示距离父元素左侧边界为 0，bottom: 0 表示距离父元素底部边界为 0 */
|
|
|
height: 40px;
|
|
|
width: 100%;
|
|
|
/* 设置元素的高度为 40px，宽度占满父元素（li）的整个宽度，用于控制该元素在水平和垂直方向上的尺寸大小，以适应相应的布局和显示需求 */
|
|
|
z-index: 200;
|
|
|
/* 设置元素的堆叠顺序（z-index）为 200，较高的 z-index 值意味着该元素会覆盖在 z-index 值比它小的其他元素之上，确保在需要显示时能处于合适的显示层级 */
|
|
|
background: url(./images/success.png) no-repeat right bottom;
|
|
|
/* 设置背景图片，图片路径为相对路径下的 success.png，并且设置图片不重复（no-repeat），定位在元素的右下角（right bottom），用于展示表示成功的图标或背景样式等 */
|
|
|
background-image: url(./images/success.gif) \9;
|
|
|
/* 这是一个针对 IE8 及以下版本浏览器（通过 \9 这个 hack 来识别）的特殊样式设置，为这些旧版本浏览器单独设置背景图片为 success.gif，可能是为了兼容旧浏览器对特定图片格式的支持差异或动画效果等需求，在现代浏览器中会优先使用上面的 background 属性设置的 success.png */
|
|
|
}
|
|
|
|
|
|
#upload.filelist li.filePickerBlock {
|
|
|
width: 113px;
|
|
|
height: 113px;
|
|
|
/* 设置元素的宽度和高度均为 113px，用于确定该元素在页面中的尺寸大小，使其呈现出特定的方块形状，符合相应的布局设计要求 */
|
|
|
background: url(./images/image.png) no-repeat center 12px;
|
|
|
/* 设置背景图片，使用相对路径下的 image.png 文件，使其不重复显示（no-repeat），并定位在元素的垂直方向距离顶部 12px 的中心位置（center 12px），用于展示特定的图片样式，可能是用于提示用户可进行文件选择等相关功能的视觉提示 */
|
|
|
border: 1px solid #eeeeee;
|
|
|
/* 为元素添加一个 1px 宽的浅灰色（#eeeeee）实线边框，用于在视觉上区分该元素与其他元素，使其具有一定的边界效果，增强外观的辨识度 */
|
|
|
border-radius: 0;
|
|
|
/* 将元素的边框圆角设置为 0，即保持边框为直角，不呈现出圆角效果，符合特定的设计风格或布局要求 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist li.filePickerBlock div.webuploader-pick {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
/* 设置元素的宽度和高度都占满其父元素（filePickerBlock）的整个宽度和高度，使其完全填充父元素空间，用于覆盖相应区域等功能需求 */
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
/* 将元素的外边距和内边距都设置为 0，使其在父元素内紧密贴合，去除默认的间距，使布局更加紧凑 */
|
|
|
opacity: 0;
|
|
|
/* 设置元素的透明度为 0，使其完全透明不可见，但仍然占据页面空间，可能后续会通过 JavaScript 等方式根据特定条件改变其透明度来实现淡入淡出等交互效果 */
|
|
|
background: none;
|
|
|
/* 清除元素的背景，不显示任何背景颜色或图片，使其背景透明，配合整体的透明设置和布局需求 */
|
|
|
font-size: 0;
|
|
|
/* 将字体大小设置为 0，隐藏元素内的文本内容，可能该元素不需要显示文字或者通过其他方式来呈现相关信息，避免文字对布局或视觉效果产生影响 */
|
|
|
}
|
|
|
|
|
|
#upload.filelist div.file-panel {
|
|
|
position: absolute;
|
|
|
/* 将元素设置为绝对定位，使其脱离文档流，可以根据 top、left 等属性精确定位在父元素（filelist）内的具体位置 */
|
|
|
height: 0;
|
|
|
/* 初始设置元素的高度为 0，可能后续会通过 JavaScript 等方式动态改变其高度来实现展开、收起等效果，例如作为一个隐藏的面板，需要时再显示出来 */
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endColorstr='#80000000') \0;
|
|
|
/* 这是一个针对 IE 浏览器（通过 \0 这个 hack 来识别）的特殊样式设置，使用 IE 的滤镜（filter）来创建一个半透明的渐变效果，这里虽然起始颜色（startColorstr）和结束颜色（endColorstr）都设置为相同的半透明黑色（#80000000），但可能在旧版本 IE 中用于实现特定的透明背景等效果，以兼容 IE 浏览器下的视觉呈现需求，在现代浏览器中通常会忽略此样式 */
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
/* 设置元素的背景颜色为半透明黑色（透明度为 0.5 的黑色），用于创建一个覆盖在其他元素之上的半透明遮罩效果，可能用于弹出面板、提示框等组件中，起到突出显示内容或遮挡底层部分元素的作用 */
|
|
|
width: 100%;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
/* 设置元素的宽度占满父元素（filelist）的整个宽度，并且定位在父元素的左上角（top: 0，left: 0），使其覆盖整个父元素区域，符合遮罩或面板类元素的布局需求 */
|
|
|
overflow: hidden;
|
|
|
/* 隐藏超出该元素范围的内容，防止内部元素溢出导致布局混乱，确保遮罩或面板内的内容按照设定的尺寸和布局进行显示 */
|
|
|
z-index: 300;
|
|
|
/* 设置元素的堆叠顺序（z-index）为 300，较高的 z-index 值保证该元素能够覆盖在其他层级较低的元素之上，在页面中处于合适的显示层级，比如覆盖在文件列表等元素之上，起到遮罩或弹出面板的作用 */
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.filelist 类元素内部的 div 元素下的.file-panel 类元素内部的 span 元素，
|
|
|
* 并为这些 span 元素设置样式规则。
|
|
|
*/
|
|
|
#upload.filelist div.file-panel span {
|
|
|
/*
|
|
|
* 设置元素的宽度为24像素，用于控制元素在水平方向上的尺寸大小。
|
|
|
*/
|
|
|
width: 24px;
|
|
|
/*
|
|
|
* 设置元素的高度为24像素，用于控制元素在垂直方向上的尺寸大小。
|
|
|
*/
|
|
|
height: 24px;
|
|
|
/*
|
|
|
* 将元素设置为行内元素显示方式，使其在文档流中按照行内元素的规则排列，与其他行内元素处于同一行。
|
|
|
*/
|
|
|
display: inline;
|
|
|
/*
|
|
|
* 让元素向右浮动，使其脱离文档流并靠右侧排列，常用于实现多元素的横向布局效果。
|
|
|
*/
|
|
|
float: right;
|
|
|
/*
|
|
|
* 将文本缩进设置为 -9999px，这样文本内容会在水平方向上向左移动很大距离，从而实现隐藏文本的效果，
|
|
|
* 常用于一些使用背景图片替代文字显示的场景，避免文本在视觉上出现干扰。
|
|
|
*/
|
|
|
text-indent: -9999px;
|
|
|
/*
|
|
|
* 当元素内容超出其设定的宽度和高度范围时，隐藏超出部分的内容，防止内容溢出显示造成布局混乱。
|
|
|
*/
|
|
|
overflow: hidden;
|
|
|
/*
|
|
|
* 设置元素的背景图片，使用相对路径指定图片文件为./images/icons.png，
|
|
|
* 并且设置背景图片不重复显示，使其只出现一次作为元素的背景。
|
|
|
*/
|
|
|
background: url(./images/icons.png) no-repeat;
|
|
|
/*
|
|
|
* 针对IE浏览器（IE9及以下版本，\9 是IE浏览器的hack写法），重新设置背景图片为./images/icons.gif，
|
|
|
* 同样设置不重复显示，用于在IE浏览器下显示不同的背景图片，可能是为了兼容IE浏览器对某些图片格式的支持情况。
|
|
|
*/
|
|
|
background: url(./images/icons.gif) no-repeat \9;
|
|
|
/*
|
|
|
* 设置元素的外边距，分别在上、右、下方向上设置外边距值。
|
|
|
* 这里表示上方外边距为5像素，右侧外边距为1像素，下方外边距为1像素，左侧外边距未设置，会使用默认值（通常为0），
|
|
|
* 用于控制元素与周围元素之间的间隔距离。
|
|
|
*/
|
|
|
margin: 5px 1px 1px;
|
|
|
/*
|
|
|
* 将鼠标指针样式设置为指针形状，当鼠标悬停在该元素上时，提示用户该元素可点击操作。
|
|
|
*/
|
|
|
cursor: pointer;
|
|
|
/*
|
|
|
* 在WebKit内核浏览器（如Chrome、Safari等）中，设置点击时元素的高亮颜色为完全透明，
|
|
|
* 即去除点击元素时默认出现的高亮背景效果，使视觉上更加简洁。
|
|
|
*/
|
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
|
/*
|
|
|
* 在WebKit内核浏览器中，禁止用户通过鼠标或触摸操作选中元素内的文本内容，
|
|
|
* 常用于一些特定的交互场景，避免用户误选文本造成不必要的影响。
|
|
|
*/
|
|
|
-webkit-user-select: none;
|
|
|
/*
|
|
|
* 在Firefox浏览器中，禁止用户通过鼠标或触摸操作选中元素内的文本内容，
|
|
|
* 与上面的 -webkit-user-select 类似，是为了跨浏览器统一交互行为。
|
|
|
*/
|
|
|
-moz-user-select: none;
|
|
|
/*
|
|
|
* 在IE浏览器（IE10及以上版本）中，禁止用户通过鼠标或触摸操作选中元素内的文本内容，
|
|
|
* 同样是为了保持各浏览器在该交互方面的一致性。
|
|
|
*/
|
|
|
-ms-user-select: none;
|
|
|
/*
|
|
|
* 通用的设置，禁止用户通过鼠标或触摸操作选中元素内的文本内容，覆盖各种浏览器情况，确保统一效果。
|
|
|
*/
|
|
|
user-select: none;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.filelist 类元素内部的 div 元素下的.file-panel 类元素内部的 span 元素，
|
|
|
* 并且这些 span 元素具有 rotateLeft 类名，为它们设置样式规则。
|
|
|
*/
|
|
|
#upload.filelist div.file-panel span.rotateLeft {
|
|
|
/*
|
|
|
* 将元素设置为不显示，隐藏该元素，可能在某些条件下（比如通过JavaScript控制等）再使其显示出来，
|
|
|
* 常用于元素的初始隐藏状态设置。
|
|
|
*/
|
|
|
display:none;
|
|
|
/*
|
|
|
* 设置背景图片的位置，水平方向位置为0，垂直方向位置为 -24px，
|
|
|
* 这样背景图片会按照设定的偏移量进行显示，展示出特定的图标或图像部分。
|
|
|
*/
|
|
|
background-position: 0 -24px;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.filelist 类元素内部的 div 元素下的.file-panel 类元素内部的 span 元素，
|
|
|
* 并且这些 span 元素具有 rotateLeft 类名且处于鼠标悬停状态时，为它们设置样式规则。
|
|
|
*/
|
|
|
#upload.filelist div.file-panel span.rotateLeft:hover {
|
|
|
/*
|
|
|
* 当鼠标悬停在该元素上时，重新设置背景图片的位置，水平方向位置为0，垂直方向位置为0，
|
|
|
* 使背景图片切换显示的部分，通常用于实现鼠标悬停时的图标变化等交互效果。
|
|
|
*/
|
|
|
background-position: 0 0;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.filelist 类元素内部的 div 元素下的.file-panel 类元素内部的 span 元素，
|
|
|
* 并且这些 span 元素具有 rotateRight 类名，为它们设置样式规则。
|
|
|
*/
|
|
|
#upload.filelist div.file-panel span.rotateRight {
|
|
|
/*
|
|
|
* 将元素设置为不显示，隐藏该元素，与上面的 rotateLeft 类似，可能在特定条件下再显示出来。
|
|
|
*/
|
|
|
display:none;
|
|
|
/*
|
|
|
* 设置背景图片的位置，水平方向位置为 -24px，垂直方向位置为 -24px，
|
|
|
* 用于展示特定的图标或图像部分，与其他元素的背景位置区分开来。
|
|
|
*/
|
|
|
background-position: -24px -24px;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.filelist 类元素内部的 div 元素下的.file-panel 类元素内部的 span 元素，
|
|
|
* 并且这些 span 元素具有 rotateRight 类名且处于鼠标悬停状态时，为它们设置样式规则。
|
|
|
*/
|
|
|
#upload.filelist div.file-panel span.rotateRight:hover {
|
|
|
/*
|
|
|
* 当鼠标悬停在该元素上时，重新设置背景图片的位置，水平方向位置为 -24px，垂直方向位置为0，
|
|
|
* 实现鼠标悬停时背景图片展示部分的切换，营造交互效果。
|
|
|
*/
|
|
|
background-position: -24px 0;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.filelist 类元素内部的 div 元素下的.file-panel 类元素内部的 span 元素，
|
|
|
* 并且这些 span 元素具有 cancel 类名，为它们设置样式规则。
|
|
|
*/
|
|
|
#upload.filelist div.file-panel span.cancel {
|
|
|
/*
|
|
|
* 设置背景图片的位置，水平方向位置为 -48px，垂直方向位置为 -24px，
|
|
|
* 以显示对应的特定图标或图像部分，可能用于表示取消操作的图标等含义。
|
|
|
*/
|
|
|
background-position: -48px -24px;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.filelist 类元素内部的 div 元素下的.file-panel 类元素内部的 span 元素，
|
|
|
* 并且这些 span 元素具有 cancel 类名且处于鼠标悬停状态时，为它们设置样式规则。
|
|
|
*/
|
|
|
#upload.filelist div.file-panel span.cancel:hover {
|
|
|
/*
|
|
|
* 当鼠标悬停在该元素上时，重新设置背景图片的位置，水平方向位置为 -48px，垂直方向位置为0，
|
|
|
* 使背景图片切换显示的部分，通常用于实现鼠标悬停时的图标变化等交互效果，比如此处可能是让取消按钮的图标在悬停时有不同显示样式。
|
|
|
*/
|
|
|
background-position: -48px 0;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.statusBar 类元素，为其设置样式规则。
|
|
|
*/
|
|
|
#upload.statusBar {
|
|
|
/*
|
|
|
* 设置元素的高度为45像素，用于控制该元素在垂直方向上的尺寸大小，使其具有特定的高度外观。
|
|
|
*/
|
|
|
height: 45px;
|
|
|
/*
|
|
|
* 设置元素底部边框的样式，这里是设置1像素宽的实线边框，颜色为#dadada（一种浅灰色），用于在视觉上区分该元素与下方元素的边界。
|
|
|
*/
|
|
|
border-bottom: 1px solid #dadada;
|
|
|
/*
|
|
|
* 设置元素的外边距，分别在水平方向（左右两侧）上设置外边距值为10像素，垂直方向（上下两侧）外边距为0，
|
|
|
* 以此控制该元素与周围元素在水平方向上的间隔距离。
|
|
|
*/
|
|
|
margin: 0 10px;
|
|
|
/*
|
|
|
* 将元素内部的内边距设置为0，使元素内部内容贴合元素边框，没有额外的空白间隔。
|
|
|
*/
|
|
|
padding: 0;
|
|
|
/*
|
|
|
* 设置元素内部文本的行高为45像素，使文本在垂直方向上处于元素的中间位置，实现垂直居中的视觉效果（当元素高度确定时）。
|
|
|
*/
|
|
|
line-height: 45px;
|
|
|
/*
|
|
|
* 设置元素内部文本或子元素在垂直方向上的对齐方式为居中对齐，与 line-height 配合可更好地实现垂直居中效果。
|
|
|
*/
|
|
|
vertical-align: middle;
|
|
|
/*
|
|
|
* 将元素的定位方式设置为相对定位，相对定位的元素会相对于其原本在文档流中的位置进行偏移等操作，
|
|
|
* 常用于作为子元素绝对定位的参考基准，方便进行更精细的布局调整。
|
|
|
*/
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.statusBar 类元素内部的.progress 类元素，为其设置样式规则。
|
|
|
*/
|
|
|
#upload.statusBar.progress {
|
|
|
/*
|
|
|
* 设置元素的边框样式，为1像素宽的实线边框，颜色为#1483d8（一种蓝色），用于突出显示该元素的边界范围。
|
|
|
*/
|
|
|
border: 1px solid #1483d8;
|
|
|
/*
|
|
|
* 设置元素的宽度为198像素，用于控制该元素在水平方向上的尺寸大小，确定其占用的水平空间范围。
|
|
|
*/
|
|
|
width: 198px;
|
|
|
/*
|
|
|
* 设置元素的背景颜色为白色（#fff），使其具有清晰的背景视觉效果，与边框等样式配合呈现出特定外观。
|
|
|
*/
|
|
|
background: #fff;
|
|
|
/*
|
|
|
* 设置元素的高度为18像素，用于控制该元素在垂直方向上的尺寸大小，比如可能用于显示进度条等内容的高度。
|
|
|
*/
|
|
|
height: 18px;
|
|
|
/*
|
|
|
* 将元素的定位方式设置为绝对定位，绝对定位的元素会脱离文档流，并相对于其最近的已定位祖先元素（如果有）进行定位，
|
|
|
* 此处会相对于具有相对定位的.statusBar 元素进行定位（因为.statusBar 设置了 position: relative）。
|
|
|
*/
|
|
|
position: absolute;
|
|
|
/*
|
|
|
* 设置元素在垂直方向上的偏移量，使其距离顶部12像素的位置，用于调整元素在其父元素（.statusBar）中的垂直位置。
|
|
|
*/
|
|
|
top: 12px;
|
|
|
/*
|
|
|
* 将元素初始设置为不显示，可能在满足某些条件（比如文件上传开始后等情况）时再通过JavaScript等方式使其显示出来，
|
|
|
* 常用于根据业务逻辑动态控制元素的可见性。
|
|
|
*/
|
|
|
display: none;
|
|
|
/*
|
|
|
* 设置元素内部文本的水平对齐方式为居中对齐，使文本在元素内部水平方向上处于中间位置，看起来更加整齐美观。
|
|
|
*/
|
|
|
text-align: center;
|
|
|
/*
|
|
|
* 设置元素内部文本的行高为18像素，与元素自身高度一致，可使文本在垂直方向上也处于较好的居中状态（如果文本只有一行）。
|
|
|
*/
|
|
|
line-height: 18px;
|
|
|
/*
|
|
|
* 设置元素内部文本的颜色为#6dbfff（一种浅蓝色），用于指定文本显示的颜色，使其与整体的样式风格相匹配。
|
|
|
*/
|
|
|
color: #6dbfff;
|
|
|
/*
|
|
|
* 设置元素的外边距，右侧外边距为10像素，上下外边距为0，左侧外边距未设置（默认通常为0），
|
|
|
* 用于控制该元素与周围元素在水平方向上的间隔距离。
|
|
|
*/
|
|
|
margin: 0 10px 0 0;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.statusBar 类元素内部的.progress 类元素内部的.percentage 类元素，为其设置样式规则。
|
|
|
*/
|
|
|
#upload.statusBar.progress span.percentage {
|
|
|
/*
|
|
|
* 将元素的宽度初始设置为0，可能后续会通过JavaScript等动态改变宽度来表示进度情况（比如文件上传进度等），
|
|
|
* 以占满整个父元素（.progress）的宽度比例来展示进度百分比。
|
|
|
*/
|
|
|
width: 0;
|
|
|
/*
|
|
|
* 设置元素的高度为其父元素（.progress）高度的100%，使其在垂直方向上完全填充父元素，方便用于展示进度的填充效果。
|
|
|
*/
|
|
|
height: 100%;
|
|
|
/*
|
|
|
* 设置元素在水平方向上的偏移量为0，使其紧贴父元素的左侧，从左侧开始填充来表示进度。
|
|
|
*/
|
|
|
left: 0;
|
|
|
/*
|
|
|
* 设置元素在垂直方向上的偏移量为0，使其位于父元素的顶部，用于确保进度填充的起始位置正确。
|
|
|
*/
|
|
|
top: 0;
|
|
|
/*
|
|
|
* 设置元素的背景颜色为#1483d8（一种蓝色），用于表示已完成的进度部分的颜色，与整体进度条的样式相匹配。
|
|
|
*/
|
|
|
background: #1483d8;
|
|
|
/*
|
|
|
* 将元素的定位方式设置为绝对定位，使其可以根据设定的偏移量等在父元素（.progress）内精确布局，实现进度填充的视觉效果。
|
|
|
*/
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.statusBar 类元素内部的.progress 类元素内部的.text 类元素，为其设置样式规则。
|
|
|
*/
|
|
|
#upload.statusBar.progress span.text {
|
|
|
/*
|
|
|
* 将元素的定位方式设置为相对定位，相对定位的元素会相对于其原本在文档流中的位置进行偏移等操作，
|
|
|
* 此处设置相对定位可能是为了在与其他具有绝对定位的兄弟元素（如.percentage）配合时，控制其显示的层级顺序等。
|
|
|
*/
|
|
|
position: relative;
|
|
|
/*
|
|
|
* 设置元素的堆叠顺序（z-index）为10，用于控制该元素在重叠情况下的显示层级，数值越大越在上面显示，
|
|
|
* 确保文本内容能正常显示在进度条填充等元素之上，避免被覆盖。
|
|
|
*/
|
|
|
z-index: 10;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.statusBar 类元素内部的.info 类元素，为其设置样式规则。
|
|
|
*/
|
|
|
#upload.statusBar.info {
|
|
|
/*
|
|
|
* 将元素的显示方式设置为行内块元素，使其既具有行内元素的同行排列特性，又能像块元素一样设置宽度、高度等尺寸属性，
|
|
|
* 方便在一行内进行布局并控制元素大小。
|
|
|
*/
|
|
|
display: inline-block;
|
|
|
/*
|
|
|
* 设置元素内部文本的字体大小为14像素，用于控制文本显示的大小，使其符合整体的视觉风格和可读性要求。
|
|
|
*/
|
|
|
font-size: 14px;
|
|
|
/*
|
|
|
* 设置元素内部文本的颜色为#666666（一种深灰色），用于指定文本显示的颜色，使其与整体的样式风格相匹配。
|
|
|
*/
|
|
|
color: #666666;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.statusBar 类元素内部的.btns 类元素，为其设置样式规则。
|
|
|
*/
|
|
|
#upload.statusBar.btns {
|
|
|
/*
|
|
|
* 将元素的定位方式设置为绝对定位，使其脱离文档流，并相对于其最近的已定位祖先元素（这里是.statusBar）进行定位，
|
|
|
* 方便将按钮组等元素精确放置在.statusBar 元素内的特定位置。
|
|
|
*/
|
|
|
position: absolute;
|
|
|
/*
|
|
|
* 设置元素在垂直方向上的偏移量，使其距离顶部7像素的位置，用于调整元素在其父元素（.statusBar）中的垂直位置。
|
|
|
*/
|
|
|
top: 7px;
|
|
|
/*
|
|
|
* 设置元素在水平方向上的偏移量，使其紧贴父元素的右侧（right: 0表示距离右侧边界为0），常用于将按钮等元素放置在右侧对齐的位置。
|
|
|
*/
|
|
|
right: 0;
|
|
|
/*
|
|
|
* 设置元素内部文本的行高为30像素，可用于调整按钮等元素内部文本在垂直方向上的位置，使其看起来更加整齐美观，
|
|
|
* 或者在一定程度上影响元素的高度等视觉效果。
|
|
|
*/
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
/*
|
|
|
* 选择器定位到 id 为 filePickerBtn 的元素，为其设置样式规则。
|
|
|
*/
|
|
|
#filePickerBtn {
|
|
|
/*
|
|
|
* 将元素的显示方式设置为行内块元素，使其既具有行内元素可与其他行内元素同行排列的特性，
|
|
|
* 又能像块元素一样设置宽度、高度等尺寸属性，方便在布局中进行灵活定位和大小控制。
|
|
|
*/
|
|
|
display: inline-block;
|
|
|
/*
|
|
|
* 让元素向左浮动，使其脱离文档流并靠左侧排列，常用于实现多元素的横向布局效果，
|
|
|
* 使该元素在父元素中向左浮动显示。
|
|
|
*/
|
|
|
float: left;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.statusBar 类元素内部的.btns 类元素下的.webuploader-pick 类元素、
|
|
|
*.uploadBtn 类元素、.uploadBtn 元素且具有 state-uploading 类名的元素、.uploadBtn 元素且具有 state-paused 类名的元素，
|
|
|
* 为它们设置公共的样式规则。
|
|
|
*/
|
|
|
#upload.statusBar.btns.webuploader-pick,
|
|
|
#upload.statusBar.btns.uploadBtn,
|
|
|
#upload.statusBar.btns.uploadBtn.state-uploading,
|
|
|
#upload.statusBar.btns.uploadBtn.state-paused {
|
|
|
/*
|
|
|
* 设置元素的背景颜色为白色（#ffffff），使其具有清晰、简洁的背景视觉效果，符合常见的按钮等元素的背景颜色风格。
|
|
|
*/
|
|
|
background: #ffffff;
|
|
|
/*
|
|
|
* 设置元素的边框样式，为1像素宽的实线边框，颜色为#cfcfcf（一种浅灰色），用于突出显示元素的边界范围，
|
|
|
* 使按钮等元素在页面上有明显的轮廓显示。
|
|
|
*/
|
|
|
border: 1px solid #cfcfcf;
|
|
|
/*
|
|
|
* 设置元素内部文本的颜色为#565656（一种深灰色），用于指定文本显示的颜色，使其与背景颜色等整体的样式风格相协调，
|
|
|
* 便于清晰地展示文本内容。
|
|
|
*/
|
|
|
color: #565656;
|
|
|
/*
|
|
|
* 设置元素内部的内边距，水平方向（左右两侧）内边距为18像素，垂直方向（上下两侧）内边距为0，
|
|
|
* 这样可以控制元素内部文本或子元素与元素边框之间的间隔距离，使内容在元素内合理分布。
|
|
|
*/
|
|
|
padding: 0 18px;
|
|
|
/*
|
|
|
* 将元素的显示方式设置为行内块元素，使其能在一行内按照行内元素的排列规则进行布局，同时又可设置自身尺寸等属性，
|
|
|
* 方便多个按钮等元素在一行内整齐排列展示。
|
|
|
*/
|
|
|
display: inline-block;
|
|
|
/*
|
|
|
* 设置元素的边框圆角效果，这里将四个角都设置为半径为3像素的圆角，使元素外观更加圆润，符合现代的UI设计风格，
|
|
|
* 常用于按钮等元素的样式美化。
|
|
|
*/
|
|
|
border-radius: 3px;
|
|
|
/*
|
|
|
* 设置元素左侧的外边距为10像素，用于控制该元素与左侧相邻元素之间的间隔距离，使多个按钮等元素之间有合适的间距，
|
|
|
* 避免显得过于拥挤。
|
|
|
*/
|
|
|
margin-left: 10px;
|
|
|
/*
|
|
|
* 将鼠标指针样式设置为指针形状，当鼠标悬停在该元素上时，提示用户该元素可点击操作，符合按钮等可交互元素的常见样式设定。
|
|
|
*/
|
|
|
cursor: pointer;
|
|
|
/*
|
|
|
* 设置元素内部文本的字体大小为14像素，用于控制文本显示的大小，使其在元素内有合适的视觉比例，便于用户阅读和识别。
|
|
|
*/
|
|
|
font-size: 14px;
|
|
|
/*
|
|
|
* 让元素向左浮动，使其脱离文档流并靠左侧排列，方便与其他按钮等元素在同一行内按照浮动规则依次排列，实现横向布局效果。
|
|
|
*/
|
|
|
float: left;
|
|
|
/*
|
|
|
* 在WebKit内核浏览器（如Chrome、Safari等）中，禁止用户通过鼠标或触摸操作选中元素内的文本内容，
|
|
|
* 常用于一些特定的交互场景，避免用户误选文本造成不必要的影响，确保交互行为符合预期。
|
|
|
*/
|
|
|
-webkit-user-select: none;
|
|
|
/*
|
|
|
* 在Firefox浏览器中，禁止用户通过鼠标或触摸操作选中元素内的文本内容，
|
|
|
* 与上面的 -webkit-user-select 类似，是为了跨浏览器统一交互行为，保证在不同浏览器下用户操作的一致性。
|
|
|
*/
|
|
|
-moz-user-select: none;
|
|
|
/*
|
|
|
* 在IE浏览器（IE10及以上版本）中，禁止用户通过鼠标或触摸操作选中元素内的文本内容，
|
|
|
* 同样是为了在各种主流浏览器中保持交互方面的一致性，避免因浏览器差异导致用户体验不一致的情况。
|
|
|
*/
|
|
|
-ms-user-select: none;
|
|
|
/*
|
|
|
* 通用的设置，禁止用户通过鼠标或触摸操作选中元素内的文本内容，覆盖各种浏览器情况，确保统一的禁止选中文本的效果。
|
|
|
*/
|
|
|
user-select: none;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.statusBar 类元素内部的.btns 类元素下的.webuploader-pick-hover 类元素、
|
|
|
*.uploadBtn 类元素且处于鼠标悬停状态的元素、.uploadBtn 元素且具有 state-uploading 类名且处于鼠标悬停状态的元素、
|
|
|
*.uploadBtn 元素且具有 state-paused 类名且处于鼠标悬停状态的元素，
|
|
|
* 为它们设置当鼠标悬停时的公共样式规则。
|
|
|
*/
|
|
|
#upload.statusBar.btns.webuploader-pick-hover,
|
|
|
#upload.statusBar.btns.uploadBtn:hover,
|
|
|
#upload.statusBar.btns.uploadBtn.state-uploading:hover,
|
|
|
#upload.statusBar.btns.uploadBtn.state-paused:hover {
|
|
|
/*
|
|
|
* 当鼠标悬停在这些元素上时，重新设置元素的背景颜色为#f0f0f0（一种更浅的灰色），
|
|
|
* 通过改变背景颜色来实现鼠标悬停时的交互反馈效果，提示用户当前元素可进行操作，增强用户交互体验。
|
|
|
*/
|
|
|
background: #f0f0f0;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.statusBar 类元素内部的.btns 类元素下的.uploadBtn 类元素、
|
|
|
*.uploadBtn 元素且具有 state-paused 类名的元素，为它们设置公共的样式规则。
|
|
|
*/
|
|
|
#upload.statusBar.btns.uploadBtn,
|
|
|
#upload.statusBar.btns.uploadBtn.state-paused {
|
|
|
/*
|
|
|
* 设置元素的背景颜色为#00b7ee（一种蓝色），用于区分不同状态下的按钮样式，使其在视觉上更加突出，
|
|
|
* 可能表示处于特定操作状态（如可上传、暂停等）时的按钮背景颜色。
|
|
|
*/
|
|
|
background: #00b7ee;
|
|
|
/*
|
|
|
* 设置元素内部文本的颜色为白色（#fff），与蓝色背景形成鲜明对比，便于清晰地展示文本内容，
|
|
|
* 同时使按钮整体的视觉风格更加统一、醒目。
|
|
|
*/
|
|
|
color: #fff;
|
|
|
/*
|
|
|
* 将元素的边框颜色设置为透明（transparent），去除边框的显示效果，使按钮在视觉上更加简洁、整体感更强，
|
|
|
* 常用于一些需要强调按钮主体颜色的设计场景。
|
|
|
*/
|
|
|
border-color: transparent;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.statusBar 类元素内部的.btns 类元素下的.uploadBtn 类元素且处于鼠标悬停状态的元素、
|
|
|
*.uploadBtn 元素且具有 state-paused 类名且处于鼠标悬停状态的元素，
|
|
|
* 为它们设置当鼠标悬停时的公共样式规则。
|
|
|
*/
|
|
|
#upload.statusBar.btns.uploadBtn:hover,
|
|
|
#upload.statusBar.btns.uploadBtn.state-paused:hover {
|
|
|
/*
|
|
|
* 当鼠标悬停在这些元素上时，重新设置元素的背景颜色为#00a2d4（一种稍深一点的蓝色），
|
|
|
* 通过改变背景颜色来实现鼠标悬停时的交互反馈效果，进一步提示用户当前按钮处于可操作状态，
|
|
|
* 并且视觉上有一定的变化以增强交互体验。
|
|
|
*/
|
|
|
background: #00a2d4;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到 #upload 元素下的.statusBar 类元素内部的.btns 类元素下的.uploadBtn 类元素且具有 disabled 类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示不可用（禁用）状态的按钮样式。
|
|
|
*/
|
|
|
#upload.statusBar.btns.uploadBtn.disabled {
|
|
|
/*
|
|
|
* 将元素的指针事件设置为 none，意味着该元素将不再响应鼠标的点击、悬停等交互操作，
|
|
|
* 用于体现按钮处于禁用状态，用户无法对其进行操作的效果。
|
|
|
*/
|
|
|
pointer-events: none;
|
|
|
/*
|
|
|
* 在IE浏览器（IE8及以下版本）中，通过设置元素的透明度滤镜（filter）来实现元素的半透明效果，
|
|
|
* 这里将透明度设置为60%（alpha值为60），使元素看起来呈现出半透明的禁用状态视觉效果。
|
|
|
*/
|
|
|
filter:alpha(opacity=60);
|
|
|
/*
|
|
|
* 在Firefox浏览器中，设置元素的不透明度为0.6（即60%），用于实现元素的半透明效果，
|
|
|
* 使其在该浏览器下也呈现出符合预期的禁用状态外观。
|
|
|
*/
|
|
|
-moz-opacity:0.6;
|
|
|
/*
|
|
|
* 在Konqueror浏览器等支持 -khtml- 前缀的浏览器中，设置元素的不透明度为0.6（即60%），
|
|
|
* 同样是为了实现元素的半透明效果，确保在不同浏览器下禁用状态的视觉一致性。
|
|
|
*/
|
|
|
-khtml-opacity: 0.6;
|
|
|
/*
|
|
|
* 通用的设置元素不透明度为0.6（即60%），使元素呈现出半透明状态，用于直观地表示该按钮处于不可用（禁用）状态，
|
|
|
* 让用户能够清晰地识别按钮当前的操作状态。
|
|
|
*/
|
|
|
opacity: 0.6;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 图片管理样式 */
|
|
|
/* 这是一段CSS注释，用于说明下面的样式代码是针对图片管理相关的样式设置 */
|
|
|
|
|
|
/* 选择器定位到id为online的元素，为其设置样式规则 */
|
|
|
#online {
|
|
|
/* 设置元素的宽度为100%，使其能够自适应父元素的宽度，通常用于占满整个可用的水平空间 */
|
|
|
width: 100%;
|
|
|
/* 设置元素的高度为336像素，明确该元素在垂直方向上的尺寸大小 */
|
|
|
height: 336px;
|
|
|
/* 设置元素内部的内边距，上侧内边距为10像素，左右下侧内边距为0，
|
|
|
用于控制元素内部内容与元素边框在垂直方向顶部的间隔距离 */
|
|
|
padding: 10px 0 0 0;
|
|
|
}
|
|
|
|
|
|
/* 选择器定位到id为online的元素内部id为fileList的元素，为其设置样式规则 */
|
|
|
#online #fileList {
|
|
|
/* 设置元素的宽度为100%，使其能和父元素（#online）一样在水平方向上占满整个可用空间 */
|
|
|
width: 100%;
|
|
|
/* 设置元素的高度为100%，使其在垂直方向上也能和父元素（#online）一样高，
|
|
|
常用于让子元素完全填充父元素的布局场景 */
|
|
|
height: 100%;
|
|
|
/* 当元素内容在水平方向上超出其宽度范围时，隐藏超出部分的内容，防止出现水平滚动条，保持布局的整洁 */
|
|
|
overflow-x: hidden;
|
|
|
/* 当元素内容在垂直方向上超出其高度范围时，显示垂直滚动条，允许用户通过滚动查看超出部分的内容 */
|
|
|
overflow-y: auto;
|
|
|
/* 将元素的定位方式设置为相对定位，相对定位的元素会相对于其原本在文档流中的位置进行偏移等操作，
|
|
|
常用于作为子元素绝对定位的参考基准，方便后续更精细的布局调整 */
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 选择器定位到id为online的元素内部的ul元素，为其设置样式规则 */
|
|
|
#online ul {
|
|
|
/* 将元素的显示方式设置为块级元素，使其独占一行，在垂直方向上依次排列，常用于列表等布局结构 */
|
|
|
display: block;
|
|
|
/* 去除ul元素默认的列表样式（如项目符号等），使列表呈现更简洁的外观，方便自定义样式 */
|
|
|
list-style: none;
|
|
|
/* 将元素的外边距设置为0，消除ul元素默认可能存在的外边距，使其与周围元素布局更紧密贴合 */
|
|
|
margin: 0;
|
|
|
/* 将元素的内边距设置为0，使ul元素内部的内容（如li元素）能直接贴合元素边框，没有额外空白间隔 */
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
/* 选择器定位到id为online的元素内部的li元素，为其设置样式规则 */
|
|
|
#online li {
|
|
|
/* 让元素向左浮动，使其脱离文档流并靠左侧排列，常用于实现多个li元素在同一行内横向排列的布局效果 */
|
|
|
float: left;
|
|
|
/* 将元素的显示方式设置为块级元素，使其能独立占一行（虽然已经浮动了，但在一些场景下明确显示方式还是有必要的），
|
|
|
方便设置宽度、高度等尺寸属性以及进行其他样式设置 */
|
|
|
display: block;
|
|
|
/* 再次强调去除li元素默认的列表样式（虽然ul已经设置了，但这里也明确一下，确保在不同浏览器等情况下都生效） */
|
|
|
list-style: none;
|
|
|
/* 将元素内部的内边距设置为0，使li元素内部内容能紧密贴合元素边框，没有额外的空白间隔 */
|
|
|
padding: 0;
|
|
|
/* 设置元素的宽度为113像素，用于控制li元素在水平方向上的尺寸大小，决定每个列表项的宽度范围 */
|
|
|
width: 113px;
|
|
|
/* 设置元素的高度为113像素，用于控制li元素在垂直方向上的尺寸大小，决定每个列表项的高度范围 */
|
|
|
height: 113px;
|
|
|
/* 设置元素的外边距，下侧外边距为9像素，左侧外边距为9像素，上侧和右侧外边距为0，
|
|
|
用于控制各个li元素之间在垂直和水平方向上的间隔距离，实现列表项之间的合理布局 */
|
|
|
margin: 0 0 9px 9px;
|
|
|
/* 针对IE浏览器（IE6及IE7等低版本，使用 * 前缀作为hack写法），重新设置外边距，下侧外边距为6像素，左侧外边距为6像素，
|
|
|
这是为了在这些低版本IE浏览器中修正可能出现的布局差异问题，实现更兼容的布局效果 */
|
|
|
*margin: 0 0 6px 6px;
|
|
|
/* 设置元素的背景颜色为#eee（一种浅灰色），用于给每个列表项设置一个背景颜色，使其有明显的视觉区分效果 */
|
|
|
background-color: #eee;
|
|
|
/* 当元素内容超出其设定的宽度和高度范围时，隐藏超出部分的内容，防止内容溢出显示造成布局混乱 */
|
|
|
overflow: hidden;
|
|
|
/* 将鼠标指针样式设置为指针形状，当鼠标悬停在该元素上时，提示用户该元素可点击操作，
|
|
|
通常意味着该列表项有交互功能，比如点击查看图片详情等 */
|
|
|
cursor: pointer;
|
|
|
/* 将元素的定位方式设置为相对定位，相对定位的元素会相对于其原本在文档流中的位置进行偏移等操作，
|
|
|
为后续可能在li元素内部的绝对定位子元素提供定位参考基准 */
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 选择器定位到id为online的元素内部的li元素且具有clearFloat类名的元素，为其设置样式规则 */
|
|
|
#online li.clearFloat {
|
|
|
/* 取消元素的浮动效果，使其回归文档流，按照正常的块级元素排列方式显示，常用于清除之前元素浮动带来的影响 */
|
|
|
float: none;
|
|
|
/* 清除元素两侧的浮动，确保该元素后面的元素不会受到之前浮动元素的影响，能正常在新的一行开始布局 */
|
|
|
clear: both;
|
|
|
/* 将元素的显示方式设置为块级元素，使其独占一行，便于控制其在文档流中的布局位置和样式呈现 */
|
|
|
display: block;
|
|
|
/* 将元素的宽度设置为0，高度也设置为0，常用于一些特殊的布局场景，比如单纯为了起到清除浮动的占位作用等，
|
|
|
不占用实际的页面空间但能影响布局结构 */
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
/* 将元素的外边距设置为0，使其与周围元素之间没有间隔距离，紧密贴合在布局中发挥其特定作用 */
|
|
|
margin: 0;
|
|
|
/* 将元素的内边距设置为0，确保元素内部没有额外的空白空间影响布局 */
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
/* 选择器定位到id为online的元素内部的li元素内部的img元素，为其设置样式规则 */
|
|
|
#online li img {
|
|
|
/* 将鼠标指针样式设置为指针形状，当鼠标悬停在图片上时提示用户该图片可点击操作，
|
|
|
可能表示点击图片有放大查看、编辑等交互功能 */
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
/* 选择器定位到id为online的元素内部的li元素内部的div元素且具有file-wrapper类名的元素，为其设置样式规则 */
|
|
|
#online li div.file-wrapper {
|
|
|
/* 将鼠标指针样式设置为指针形状，当鼠标悬停在该元素上时提示用户该元素可点击操作，
|
|
|
表明这个包裹文件相关内容的元素具有交互功能 */
|
|
|
cursor: pointer;
|
|
|
/* 将元素的定位方式设置为绝对定位，绝对定位的元素会脱离文档流，并相对于其最近的已定位祖先元素（这里就是相对定位的li元素）进行定位，
|
|
|
方便精确地将该元素放置在li元素内的特定位置，实现更灵活的布局效果 */
|
|
|
position: absolute;
|
|
|
/* 将元素的显示方式设置为块级元素，使其能独立占一行（在绝对定位的情况下更多是为了方便设置尺寸等属性），
|
|
|
便于对其宽度、高度等样式进行设置 */
|
|
|
display: block;
|
|
|
/* 设置元素的宽度为111像素，用于控制该元素在水平方向上的尺寸大小，确定其在li元素内占用的水平空间范围 */
|
|
|
width: 111px;
|
|
|
/* 设置元素的高度为111像素，用于控制该元素在垂直方向上的尺寸大小，确定其在li元素内占用的垂直空间范围 */
|
|
|
height: 111px;
|
|
|
/* 设置元素的边框样式，为1像素宽的实线边框，颜色为#eee（和背景色相同，可能是为了营造某种视觉效果，比如突出一点层次感等） */
|
|
|
border: 1px solid #eee;
|
|
|
/* 设置元素的背景，使用相对路径指定图片文件为"./images/bg.png"，并且设置背景图片重复平铺显示，
|
|
|
用于给该元素添加一个特定的背景图案效果 */
|
|
|
background: url("./images/bg.png") repeat;
|
|
|
}
|
|
|
/*
|
|
|
* 选择器定位到id为online的元素内部的li元素内部的div元素内部的span元素，
|
|
|
* 且该span元素具有file-title类名，为其设置样式规则。
|
|
|
*/
|
|
|
#online li div span.file-title {
|
|
|
/*
|
|
|
* 将元素的显示方式设置为块级元素，使其独占一行，方便对其进行宽度、高度等样式设置以及整体布局控制。
|
|
|
*/
|
|
|
display: block;
|
|
|
/*
|
|
|
* 设置元素内部的内边距，水平方向（左右两侧）内边距为3像素，垂直方向（上下两侧）内边距为0，
|
|
|
* 用于控制元素内部文本与元素边框之间的间隔距离，使文本在元素内合理分布。
|
|
|
*/
|
|
|
padding: 0 3px;
|
|
|
/*
|
|
|
* 设置元素的外边距，上侧外边距为3像素，左右下侧外边距为0，用于控制该元素与周围元素在垂直方向上的间隔距离。
|
|
|
*/
|
|
|
margin: 3px 0 0 0;
|
|
|
/*
|
|
|
* 设置元素内部文本的字体大小为12像素，用于控制文本显示的大小，使其符合整体的视觉风格和可读性要求。
|
|
|
*/
|
|
|
font-size: 12px;
|
|
|
/*
|
|
|
* 设置元素的高度为15像素，用于控制该元素在垂直方向上的尺寸大小，确定其占用的垂直空间范围，
|
|
|
* 以便文本在限定的高度内进行合理显示，如出现多行文本超出高度则会按后续设置进行处理。
|
|
|
*/
|
|
|
height: 15px;
|
|
|
/*
|
|
|
* 设置元素内部文本的颜色为#555555（一种深灰色），用于指定文本显示的颜色，使其与整体的样式风格相匹配，便于清晰地展示文本内容。
|
|
|
*/
|
|
|
color: #555555;
|
|
|
/*
|
|
|
* 设置元素内部文本的水平对齐方式为居中对齐，使文本在元素内部水平方向上处于中间位置，看起来更加整齐美观。
|
|
|
*/
|
|
|
text-align: center;
|
|
|
/*
|
|
|
* 设置元素的宽度为107像素，用于控制该元素在水平方向上的尺寸大小，确定其占用的水平空间范围，
|
|
|
* 结合其他样式设置可以让文本在限定宽度内进行合理排版展示。
|
|
|
*/
|
|
|
width: 107px;
|
|
|
/*
|
|
|
* 设置元素内部文本的空白处理方式为不换行，即文本内容会在一行内显示，直到遇到换行符或者超出元素宽度等情况，
|
|
|
* 常用于一些需要保持文本完整性不被随意换行的场景，比如标题等内容展示。
|
|
|
*/
|
|
|
white-space: nowrap;
|
|
|
/*
|
|
|
* 设置当文本超出元素宽度时的断词方式，这里设置为允许在任意字符处断开换行，
|
|
|
* 这样即使文本很长超出宽度限制也能通过合理断词来尽量完整显示文本内容（结合后续的溢出处理效果）。
|
|
|
*/
|
|
|
word-break: break-all;
|
|
|
/*
|
|
|
* 当元素内部文本内容超出其设定的宽度和高度范围时，隐藏超出部分的内容，防止内容溢出显示造成布局混乱，
|
|
|
* 并结合text-overflow样式实现更友好的文本截断显示效果（如显示省略号等）。
|
|
|
*/
|
|
|
overflow: hidden;
|
|
|
/*
|
|
|
* 设置当文本内容超出元素宽度时，在文本末尾显示省略号来表示文本被截断了，
|
|
|
* 与overflow: hidden配合使用，提供一种简洁的文本溢出处理方式，常用于有限空间内展示较长文本的情况。
|
|
|
*/
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到id为online的元素内部的li元素下的.icon类元素，为其设置样式规则。
|
|
|
*/
|
|
|
#online li.icon {
|
|
|
/*
|
|
|
* 将鼠标指针样式设置为指针形状，当鼠标悬停在该元素上时，提示用户该元素可点击操作，
|
|
|
* 通常意味着该元素具有交互功能，比如点击后可能有放大查看、操作相关图标等交互行为。
|
|
|
*/
|
|
|
cursor: pointer;
|
|
|
/*
|
|
|
* 设置元素的宽度为113像素，用于控制该元素在水平方向上的尺寸大小，确定其占用的水平空间范围。
|
|
|
*/
|
|
|
width: 113px;
|
|
|
/*
|
|
|
* 设置元素的高度为113像素，用于控制该元素在垂直方向上的尺寸大小，确定其占用的垂直空间范围。
|
|
|
*/
|
|
|
height: 113px;
|
|
|
/*
|
|
|
* 将元素的定位方式设置为绝对定位，绝对定位的元素会脱离文档流，并相对于其最近的已定位祖先元素（这里就是相对定位的li元素）进行定位，
|
|
|
* 方便精确地将该元素放置在li元素内的特定位置，实现更灵活的布局效果，例如可以覆盖在其他元素之上等操作。
|
|
|
*/
|
|
|
position: absolute;
|
|
|
/*
|
|
|
* 设置元素在垂直方向上的偏移量，使其紧贴父元素（li元素）的顶部，用于调整元素在li元素内的垂直位置。
|
|
|
*/
|
|
|
top: 0;
|
|
|
/*
|
|
|
* 设置元素在水平方向上的偏移量，使其紧贴父元素（li元素）的左侧，用于调整元素在li元素内的水平位置。
|
|
|
*/
|
|
|
left: 0;
|
|
|
/*
|
|
|
* 设置元素的堆叠顺序（z-index）为2，用于控制该元素在重叠情况下的显示层级，数值越大越在上面显示，
|
|
|
* 确保该图标元素能在合适的层级展示，可能会覆盖其他一些元素或者被更高层级元素覆盖等情况。
|
|
|
*/
|
|
|
z-index: 2;
|
|
|
/*
|
|
|
* 将元素的边框宽度设置为0，即去除元素的边框显示，使图标元素看起来更加简洁，没有边框干扰视觉效果。
|
|
|
*/
|
|
|
border: 0;
|
|
|
/*
|
|
|
* 设置元素的背景图片重复显示方式为不重复，即背景图片只出现一次，避免在元素范围内平铺重复显示背景图片，
|
|
|
* 常用于展示单个图标等情况，确保背景图片按预期展示。
|
|
|
*/
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到id为online的元素内部的li元素下的.icon类元素且处于鼠标悬停状态时，为其设置样式规则。
|
|
|
*/
|
|
|
#online li.icon:hover {
|
|
|
/*
|
|
|
* 当鼠标悬停在该元素上时，重新设置元素的宽度为107像素，改变其水平方向上的尺寸大小，
|
|
|
* 可能用于实现鼠标悬停时图标有一定的缩放等交互视觉效果，使其看起来有变化，增强交互体验。
|
|
|
*/
|
|
|
width: 107px;
|
|
|
/*
|
|
|
* 当鼠标悬停在该元素上时，重新设置元素的高度为107像素，改变其垂直方向上的尺寸大小，
|
|
|
* 同样是为了配合实现鼠标悬停时的交互视觉效果，使图标在悬停时有收缩变化等反馈。
|
|
|
*/
|
|
|
height: 107px;
|
|
|
/*
|
|
|
* 当鼠标悬停在该元素上时，设置元素的边框样式，为3像素宽的实线边框，颜色为#1094fa（一种蓝色），
|
|
|
* 通过添加边框来突出显示图标在悬停时的状态变化，提示用户当前元素处于可操作的交互状态。
|
|
|
*/
|
|
|
border: 3px solid #1094fa;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到id为online的元素内部的li元素且具有selected类名的情况下，其内部的.icon类元素，为其设置样式规则。
|
|
|
*/
|
|
|
#online li.selected.icon {
|
|
|
/*
|
|
|
* 设置元素的背景图片，使用相对路径指定图片文件为images/success.png，
|
|
|
* 用于展示特定的图标图片作为元素的背景，通常表示该元素处于被选中状态时对应的图标样式。
|
|
|
*/
|
|
|
background-image: url(images/success.png);
|
|
|
/*
|
|
|
* 针对IE浏览器（IE9及以下版本，\9 是IE浏览器的hack写法），重新设置背景图片为images/success.gif，
|
|
|
* 用于在IE浏览器下显示不同的背景图片，可能是为了兼容IE浏览器对某些图片格式的支持情况，确保在IE中也能正确显示图标。
|
|
|
*/
|
|
|
background-image: url(images/success.gif) \9;
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为75像素，垂直方向位置为75像素，
|
|
|
* 这样背景图片会按照设定的偏移量进行显示，展示出特定的图标或图像部分，使其处于合适的展示位置。
|
|
|
*/
|
|
|
background-position: 75px 75px;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到id为online的元素内部的li元素且具有selected类名的情况下，其内部的.icon类元素且处于鼠标悬停状态时，为其设置样式规则。
|
|
|
*/
|
|
|
#online li.selected.icon:hover {
|
|
|
/*
|
|
|
* 当鼠标悬停在该元素上时，重新设置元素的宽度为107像素，改变其水平方向上的尺寸大小，
|
|
|
* 实现鼠标悬停时图标有一定的缩放等交互视觉效果，使其看起来有变化，增强交互体验。
|
|
|
*/
|
|
|
width: 107px;
|
|
|
/*
|
|
|
* 当鼠标悬停在该元素上时，重新设置元素的高度为107像素，改变其垂直方向上的尺寸大小，
|
|
|
* 同样是为了配合实现鼠标悬停时的交互视觉效果，使图标在悬停时有收缩变化等反馈。
|
|
|
*/
|
|
|
height: 107px;
|
|
|
/*
|
|
|
* 当鼠标悬停在该元素上时，设置元素的边框样式，为3像素宽的实线边框，颜色为#1094fa（一种蓝色），
|
|
|
* 通过添加边框来突出显示图标在悬停时的状态变化，提示用户当前元素处于可操作的交互状态。
|
|
|
*/
|
|
|
border: 3px solid #1094fa;
|
|
|
/*
|
|
|
* 当鼠标悬停在该元素上时，重新设置背景图片在元素内的位置，水平方向位置为72像素，垂直方向位置为72像素，
|
|
|
* 使背景图片在悬停时切换展示的部分或者位置稍有变化，营造出交互反馈效果，让图标展示更符合选中且悬停的状态。
|
|
|
*/
|
|
|
background-position: 72px 72px;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 以下是针对在线文件的文件预览图标相关的样式设置，选择器定位到i元素且具有file-preview类名的元素，为其设置样式规则。
|
|
|
*/
|
|
|
/* 在线文件的文件预览图标 */
|
|
|
i.file-preview {
|
|
|
/*
|
|
|
* 将元素的显示方式设置为块级元素，使其独占一行，方便对其进行宽度、高度等样式设置以及整体布局控制，
|
|
|
* 使文件预览图标能独立展示，便于排版和样式调整。
|
|
|
*/
|
|
|
display: block;
|
|
|
/*
|
|
|
* 设置元素的外边距，上下外边距为10像素，左右外边距为auto，这样可以让元素在水平方向上自动居中显示，
|
|
|
* 常用于将元素在父元素内水平居中对齐的布局场景，使文件预览图标在合适的位置展示。
|
|
|
*/
|
|
|
margin: 10px auto;
|
|
|
/*
|
|
|
* 设置元素的宽度为70像素，用于控制该元素在水平方向上的尺寸大小，确定其占用的水平空间范围，
|
|
|
* 符合一般文件预览图标合适的尺寸大小设定，使其在页面上有合适的视觉比例。
|
|
|
*/
|
|
|
width: 70px;
|
|
|
/*
|
|
|
* 设置元素的高度为70像素，用于控制该元素在垂直方向上的尺寸大小，确定其占用的垂直空间范围，
|
|
|
* 同样是为了让文件预览图标呈现出合适的视觉大小效果，便于用户查看识别。
|
|
|
*/
|
|
|
height: 70px;
|
|
|
/*
|
|
|
* 设置元素的背景图片，使用相对路径指定图片文件为"./images/file-icons.png"，
|
|
|
* 用于展示特定的文件类型对应的图标图片作为元素的背景，实现不同文件类型有不同的预览图标展示效果。
|
|
|
*/
|
|
|
background-image: url("./images/file-icons.png");
|
|
|
/*
|
|
|
* 针对IE浏览器（IE9及以下版本，\9 是IE浏览器的hack写法），重新设置背景图片为"./images/file-icons.gif"，
|
|
|
* 用于在IE浏览器下显示不同的背景图片，可能是为了兼容IE浏览器对某些图片格式的支持情况，确保在IE中也能正确显示文件预览图标。
|
|
|
*/
|
|
|
background-image: url("./images/file-icons.gif") \9;
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -140px，垂直方向位置为center（垂直居中），
|
|
|
* 这样背景图片会按照设定的偏移量进行显示，展示出特定的文件类型对应的图标或图像部分，使其处于合适的展示位置。
|
|
|
*/
|
|
|
background-position: -140px center;
|
|
|
/*
|
|
|
* 设置元素的背景图片重复显示方式为不重复，即背景图片只出现一次，避免在元素范围内平铺重复显示背景图片，
|
|
|
* 确保每个文件预览图标都能正确展示对应的唯一图标样式，不会出现重复平铺的混乱情况。
|
|
|
*/
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-dir类名的元素，为其设置样式规则，
|
|
|
* 通常用于表示目录类型文件的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-dir {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为0，垂直方向位置为center（垂直居中），
|
|
|
* 改变背景图片的显示位置，使该元素展示出目录类型文件对应的特定图标样式，与其他文件类型的图标区分开来。
|
|
|
*/
|
|
|
background-position: 0 center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-file类名的元素，为其设置样式规则，
|
|
|
* 通常用于表示普通文件类型的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-file {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -140px，垂直方向位置为center（垂直居中），
|
|
|
* 保持该文件类型对应的背景图片显示位置，展示出普通文件类型对应的特定图标样式，使其与其他文件类型图标有所区别。
|
|
|
*/
|
|
|
background-position: -140px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-filelist类名的元素，为其设置样式规则，
|
|
|
* 通常用于表示文件列表类型文件的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-filelist {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -210px，垂直方向位置为center（垂直居中），
|
|
|
* 改变背景图片的显示位置，使该元素展示出文件列表类型文件对应的特定图标样式，便于用户识别该文件类型。
|
|
|
*/
|
|
|
background-position: -210px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-zip类名、file-type-rar类名、
|
|
|
* file-type-7z类名、file-type-tar类名、file-type-gz类名、file-type-bz2类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示各类压缩文件类型的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-zip,
|
|
|
i.file-preview.file-type-rar,
|
|
|
i.file-preview.file-type-7z,
|
|
|
i.file-preview.file-type-tar,
|
|
|
i.file-preview.file-type-gz,
|
|
|
i.file-preview.file-type-bz2 {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -280px，垂直方向位置为center（垂直居中），
|
|
|
* 统一设置这些压缩文件类型对应的背景图片显示位置，使它们展示出对应的特定图标样式，方便用户识别是压缩文件类型。
|
|
|
*/
|
|
|
background-position: -280px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-xls类名、file-type-xlsx类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示Excel文件类型的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-xls,
|
|
|
i.file-preview.file-type-xlsx {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -350px，垂直方向位置为center（垂直居中），
|
|
|
* 改变背景图片的显示位置，使该元素展示出Excel文件类型对应的特定图标样式，便于用户直观识别文件类型为Excel文件。
|
|
|
*/
|
|
|
background-position: -350px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-doc类名、file-type-docx类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示Word文件类型的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-doc,
|
|
|
i.file-preview.file-type-docx {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -420px，垂直方向位置为center（垂直居中），
|
|
|
* 改变背景图片的显示位置，使该元素展示出Word文件类型对应的特定图标样式，方便用户快速识别文件类型为Word文件。
|
|
|
*/
|
|
|
background-position: -420px center;
|
|
|
}
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-ppt类名、file-type-pptx类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示PowerPoint文件类型（.ppt和.pptx格式）的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-ppt,
|
|
|
i.file-preview.file-type-pptx {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -490px，垂直方向位置为center（垂直居中），
|
|
|
* 通过调整背景图片的偏移量，使该元素展示出PowerPoint文件类型对应的特定图标样式，便于用户直观识别文件类型为PowerPoint文件。
|
|
|
*/
|
|
|
background-position: -490px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-vsd类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示Visio文件类型（.vsd格式）的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-vsd {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -560px，垂直方向位置为center（垂直居中），
|
|
|
* 改变背景图片的显示位置，使该元素展示出Visio文件类型对应的特定图标样式，方便用户识别文件类型为Visio文件。
|
|
|
*/
|
|
|
background-position: -560px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-pdf类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示PDF文件类型（.pdf格式）的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-pdf {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -630px，垂直方向位置为center（垂直居中），
|
|
|
* 调整背景图片的偏移量，使该元素展示出PDF文件类型对应的特定图标样式，便于用户快速分辨出文件类型为PDF文件。
|
|
|
*/
|
|
|
background-position: -630px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-txt类名、file-type-md类名、file-type-json类名、
|
|
|
* file-type-htm类名、file-type-xml类名、file-type-html类名、file-type-js类名、file-type-css类名、
|
|
|
* file-type-php类名、file-type-jsp类名、file-type-asp类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示这些文本或代码相关文件类型（如.txt、.md、.json等格式）的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-txt,
|
|
|
i.file-preview.file-type-md,
|
|
|
i.file-preview.file-type-json,
|
|
|
i.file-preview.file-type-htm,
|
|
|
i.file-preview.file-type-xml,
|
|
|
i.file-preview.file-type-html,
|
|
|
i.file-preview.file-type-js,
|
|
|
i.file-preview.file-type-css,
|
|
|
i.file-preview.file-type-php,
|
|
|
i.file-preview.file-type-jsp,
|
|
|
i.file-preview.file-type-asp {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -700px，垂直方向位置为center（垂直居中），
|
|
|
* 统一设置这些文本或代码文件类型对应的背景图片显示位置，使它们展示出对应的特定图标样式，方便用户识别这些类型的文件。
|
|
|
*/
|
|
|
background-position: -700px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-apk类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示安卓应用安装包文件类型（.apk格式）的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-apk {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -770px，垂直方向位置为center（垂直居中），
|
|
|
* 改变背景图片的显示位置，使该元素展示出安卓应用安装包文件类型对应的特定图标样式，便于用户识别文件类型为APK文件。
|
|
|
*/
|
|
|
background-position: -770px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-exe类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示Windows可执行文件类型（.exe格式）的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-exe {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -840px，垂直方向位置为center（垂直居中），
|
|
|
* 调整背景图片的偏移量，使该元素展示出Windows可执行文件类型对应的特定图标样式，方便用户分辨出文件类型为EXE文件。
|
|
|
*/
|
|
|
background-position: -840px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-ipa类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示iOS应用安装包文件类型（.ipa格式）的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-ipa {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -910px，垂直方向位置为center（垂直居中），
|
|
|
* 改变背景图片的显示位置，使该元素展示出iOS应用安装包文件类型对应的特定图标样式，便于用户识别文件类型为IPA文件。
|
|
|
*/
|
|
|
background-position: -910px center;
|
|
|
}
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-mp4类名、file-type-swf类名、file-type-mkv类名、
|
|
|
* file-type-avi类名、file-type-flv类名、file-type-mov类名、file-type-mpg类名、file-type-mpeg类名、
|
|
|
* file-type-ogv类名、file-type-webm类名、file-type-rm类名、file-type-rmvb类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示这些视频文件类型（如.mp4、.swf、.mkv等格式）的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-mp4,
|
|
|
i.file-preview.file-type-swf,
|
|
|
i.file-preview.file-type-mkv,
|
|
|
i.file-preview.file-type-avi,
|
|
|
i.file-preview.file-type-flv,
|
|
|
i.file-preview.file-type-mov,
|
|
|
i.file-preview.file-type-mpg,
|
|
|
i.file-preview.file-type-mpeg,
|
|
|
i.file-preview.file-type-ogv,
|
|
|
i.file-preview.file-type-webm,
|
|
|
i.file-preview.file-type-rm,
|
|
|
i.file-preview.file-type-rmvb {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -980px，垂直方向位置为center（垂直居中），
|
|
|
* 通过统一设定背景图片的偏移量，使这些视频文件类型对应的元素展示出特定的视频文件类型图标样式，方便用户识别它们属于视频文件类别。
|
|
|
*/
|
|
|
background-position: -980px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-ogg类名、file-type-wav类名、file-type-wmv类名、
|
|
|
* file-type-mid类名、file-type-mp3类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示这些音频文件类型（如.ogg、.wav、.wmv等格式）的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-ogg,
|
|
|
i.file-preview.file-type-wav,
|
|
|
i.file-preview.file-type-wmv,
|
|
|
i.file-preview.file-type-mid,
|
|
|
i.file-preview.file-type-mp3 {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -1050px，垂直方向位置为center（垂直居中），
|
|
|
* 调整背景图片的偏移量，使这些音频文件类型对应的元素展示出相应的音频文件类型图标样式，便于用户区分出它们是音频文件类型。
|
|
|
*/
|
|
|
background-position: -1050px center;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 选择器定位到i元素且具有file-preview类名以及file-type-jpg类名、file-type-jpeg类名、file-type-gif类名、
|
|
|
* file-type-bmp类名、file-type-png类名、file-type-psd类名的元素，
|
|
|
* 为其设置样式规则，通常用于表示这些图像文件类型（如.jpg、.jpeg、.gif等格式）的预览图标样式设置。
|
|
|
*/
|
|
|
i.file-preview.file-type-jpg,
|
|
|
i.file-preview.file-type-jpeg,
|
|
|
i.file-preview.file-type-gif,
|
|
|
i.file-preview.file-type-bmp,
|
|
|
i.file-preview.file-type-png,
|
|
|
i.file-preview.file-type-psd {
|
|
|
/*
|
|
|
* 设置背景图片在元素内的位置，水平方向位置为 -140px，垂直方向位置为center（垂直居中），
|
|
|
* 改变背景图片的显示位置，使这些图像文件类型对应的元素展示出对应的图像文件类型图标样式，让用户能够直观地识别它们属于图像文件类型。
|
|
|
*/
|
|
|
background-position: -140px center;
|
|
|
} |
