Dormitory_Management_System/src/main/webapp/css/nouislider.css

/*! nouislider - 10.0.0 - 2017-05-28 14:52:48 */
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 * 以下是功能性样式相关的注释，这些样式是nouiSlider能正常工作所必需的，通常不需要修改它们来适配设计，保持其默认设置即可 */

/* 针对.noUi-target类以及其内部所有元素设置一些交互相关的属性，禁止长按弹出菜单、去除点击高亮颜色、禁止用户选择文本等操作，同时设置盒模型为border-box，使得元素的尺寸计算包含边框和内边距 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 设置.noUi-target类元素（一般是滑块的外层容器）为相对定位，并且设置文本方向从左到右（ltr），这符合常规的页面布局习惯 */
.noUi-target {
  position: relative;
  direction: ltr;
}

/* 设置.noUi-base类元素（一般是滑块的基础部分，比如轨道等）宽度和高度都占满父容器，并且设置相对定位以及较高的z-index值，使其在堆叠顺序中处于较上层，方便后续元素基于它进行定位，注释中的“Fix 401”可能是针对某个特定问题的修复说明，具体需结合相关开发背景理解 */
.noUi-base {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  /* Fix 401 */
}

/* 设置.noUi-connect类元素（一般是滑块轨道上表示已选择范围的连接部分）为绝对定位，使其占满整个.noUi-target元素（即滑块外层容器）的内部空间，通过设置上下左右都为0来实现 */
.noUi-connect {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
}

/* 设置.noUi-origin类元素（可能与滑块的起始位置等相关概念对应）为绝对定位，并且初始高度和宽度都设置为0，后续可能会通过JavaScript等动态改变其尺寸和位置来实现滑块的功能逻辑 */
.noUi-origin {
  position: absolute;
  height: 0;
  width: 0;
}

/* 设置.noUi-handle类元素（即滑块的手柄部分）为相对定位，并且设置较高的z-index值，使其在堆叠顺序中处于较上层，能显示在轨道等元素之上 */
.noUi-handle {
  position: relative;
  z-index: 1;
}

/* 当.noUi-target元素处于点击状态（.noUi-state-tap类存在时），对其内部的.noUi-connect和.noUi-origin元素设置过渡效果，当它们的位置属性（top、right、bottom、left）改变时，会有平滑的过渡动画，过渡时间为0.3秒 */
.noUi-state-tap.noUi-connect,
.noUi-state-tap.noUi-origin {
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}

/* 当.noUi-target元素处于拖动状态（.noUi-state-drag类存在时），将其内部所有元素的鼠标指针样式强制设置为继承父元素的样式，这样可以确保在拖动过程中鼠标指针样式符合预期，不会出现异常 */
.noUi-state-drag * {
  cursor: inherit!important;
}

/* Painting and performance;
 * Browsers can paint handles in their own layer.
 * 以下样式与绘制和性能相关，浏览器可以将滑块手柄绘制在独立的图层中，通过使用3D变换来触发硬件加速，提升滑块操作的流畅度 */
.noUi-base,
.noUi-handle {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Slider size and handle placement;
 * 以下是关于滑块尺寸以及手柄位置相关的样式设置，区分水平和垂直两种布局情况 */

/* 当滑块为水平布局（.noUi-horizontal类存在时），设置滑块的高度为18px */
.noUi-horizontal {
  height: 18px;
}

/* 当滑块为水平布局时，对其内部的.noUi-handle类元素（滑块手柄）进行样式设置，设置宽度、高度、水平和垂直方向的偏移量，使其在滑块轨道上处于合适的位置 */
.noUi-horizontal.noUi-handle {
  width: 34px;
  height: 28px;
  left: -17px;
  top: -6px;
}

/* 当滑块为垂直布局（.noUi-vertical类存在时），设置滑块的宽度为18px */
.noUi-vertical {
  width: 18px;
}

/* 当滑块为垂直布局时，对其内部的.noUi-handle类元素（滑块手柄）进行样式设置，设置宽度、高度、水平和垂直方向的偏移量，使其在滑块轨道上处于合适的位置 */
.noUi-vertical.noUi-handle {
  width: 28px;
  height: 34px;
  left: -6px;
  top: -17px;
}

/* Styling;
 * 以下是滑块整体以及各部分的外观样式设置 */

/* 设置.noUi-target类元素（滑块外层容器）的背景颜色、边框圆角、边框样式以及内部阴影效果，使其呈现出一种特定的外观风格 */
.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}

/* 设置.noUi-connect类元素（滑块轨道上表示已选择范围的连接部分）的背景颜色、边框圆角以及内部阴影效果，并且设置其背景颜色改变时有过渡动画，过渡时间为450毫秒，用于实现一些交互时的视觉效果 */
.noUi-connect {
  background: #3FB8AF;
  border-radius: 4px;
  box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
  -webkit-transition: background 450ms;
  transition: background 450ms;
}

/* Handles and cursors;
 * 以下是关于滑块手柄以及鼠标指针样式相关的设置 */

/* 当滑块可拖动（.noUi-draggable类存在时，一般是水平滑块的情况），设置鼠标指针样式为左右拉伸的样式，符合水平拖动操作的视觉提示 */
.noUi-draggable {
  cursor: ew-resize;
}

/* 当滑块为垂直可拖动（.noUi-vertical类且.noUi-draggable类存在时，即垂直滑块情况），设置鼠标指针样式为上下拉伸的样式，符合垂直拖动操作的视觉提示 */
.noUi-vertical.noUi-draggable {
  cursor: ns-resize;
}

/* 设置.noUi-handle类元素（滑块手柄）的边框样式、边框圆角、背景颜色以及多种阴影效果，使其呈现出立体、有质感的外观，并且将默认鼠标指针样式设置为默认样式（default） */
.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}

/* 当.noUi-handle类元素处于激活状态（.noUi-active类存在时，比如正在被点击或拖动时），改变其阴影效果，呈现出一种不同的视觉反馈，用于提示用户当前正在操作滑块手柄 */
.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}

/* Handle stripes;
 * 以下是在滑块手柄上添加条纹样式的设置，通过伪元素:before和:after来实现 */

/* 在.noUi-handle类元素（滑块手柄）的:before伪元素上设置样式，创建一个竖条样式，用于模拟手柄上的条纹装饰效果，设置其内容为空（因为只是用于装饰）、显示为块状元素、设置高度、宽度、背景颜色以及位置等属性 */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px;
}

/* 同样在.noUi-handle类元素（滑块手柄）的:after伪元素上设置样式，创建另一个竖条样式，位置与:before略有不同，共同构成手柄上的条纹装饰效果 */
.noUi-handle:after {
  left: 17px;
}

/* 当滑块为垂直布局时，对.noUi-handle类元素（滑块手柄）的:before和:after伪元素重新设置样式，将竖条变为横条，通过改变宽度和高度属性以及位置来实现，以适配垂直方向的手柄外观 */
.noUi-vertical.noUi-handle:before,
.noUi-vertical.noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}

/* 针对垂直布局下的.noUi-handle类元素（滑块手柄）的:after伪元素，进一步调整其位置，使其与:before伪元素配合形成合适的横条装饰效果 */
.noUi-vertical.noUi-handle:after {
  top: 17px;
}

/* Disabled state;
 * 以下是滑块处于禁用状态时的样式设置 */

/* 当元素处于禁用状态（[disabled]选择器匹配时），对.noUi-connect类元素（滑块轨道上表示已选择范围的连接部分）设置背景颜色，使其呈现出一种表示不可用的视觉效果 */
[disabled].noUi-connect {
  background: #B8B8B8;
}

/* 当元素处于禁用状态时，对.noUi-target、.noUi-handle以及.noUi-handle类元素（分别对应滑块外层容器、滑块手柄等）设置鼠标指针样式为不允许操作的样式（not-allowed），提示用户当前滑块不可用 */
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled].noUi-handle {
  cursor: not-allowed;
}

/* Base;
 *
 * 以下是与滑块上的刻度标记、数值显示等相关的基础样式设置，首先对.noUi-pips以及其内部所有元素设置盒模型为border-box，确保尺寸计算符合预期 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 设置.noUi-pips类元素（一般是用于放置刻度标记、数值显示等内容的容器）为绝对定位，并且设置文字颜色 */
.noUi-pips {
  position: absolute;
  color: #999;
}

/* Values;
 *
 * 以下是关于滑块上数值显示相关的样式设置 */

/* 设置.noUi-value类元素（一般用于显示具体的数值）为绝对定位，并且设置文本不换行、文本水平居中对齐，确保数值能正确显示在相应位置 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}

/* 设置.noUi-value-sub类元素（可能是用于显示数值的副标题、辅助信息等，比如小数部分等）的文字颜色和字体大小，使其与主数值有一定的视觉区分 */
.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}

/* Markings;
 *
 * 以下是关于滑块上各种标记（如刻度线等）相关的样式设置 */

/* 设置.noUi-marker类元素（一般是滑块上的刻度线等标记）为绝对定位，并且设置背景颜色，用于呈现出刻度线的外观 */
.noUi-marker {
  position: absolute;
  background: #CCC;
}

/* 设置.noUi-marker-sub类元素（可能是细分刻度线等更小的标记）的背景颜色，使其与普通刻度线有一定视觉区分 */
.noUi-marker-sub {
  background: #AAA;
}

/* 设置.noUi-marker-large类元素（可能是较大的重要刻度线等标记）的背景颜色，同样用于视觉区分，突出显示重要刻度 */
.noUi-marker-large {
  background: #AAA;
}

/* Horizontal layout;
 *
 * 以下是滑块为水平布局时，与刻度标记、数值显示等相关的具体样式设置 */

/* 设置.noUi-pips-horizontal类元素（水平布局下的刻度标记等容器）的内边距、高度、垂直位置以及宽度，使其在水平滑块下方合适的位置显示 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}

/* 当滑块为水平布局时，对.noUi-value类元素（数值显示部分）进行位置调整，通过3D变换将其在水平和垂直方向上移动到合适位置，使其能准确显示在对应的刻度位置上方 */
.noUi-value-horizontal {
  -webkit-transform: translate3d(-50%, 50%, 0);
  transform: translate3d(-50%, 50%, 0);
}

/* 当滑块为水平布局时，对.noUi-marker-horizontal类元素（水平布局下的刻度线等标记）进行样式设置，设置其宽度、高度以及左右外边距等，使其呈现出水平方向的刻度线外观 */
.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}

/* 当滑块为水平布局时，对.noUi-marker-horizontal类元素（水平布局下的细分刻度线等标记）进行样式设置，调整其高度，使其与普通刻度线有一定视觉区分 */
.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}

/* 当滑块为水平布局时，对.noUi-marker-horizontal类元素（水平布局下的较大刻度线等标记）进行样式设置，调整其高度，使其更加突出显示，与其他刻度线区分开来 */
.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}

/* Vertical layout;
 *
 * 以下是滑块为垂直布局时，与刻度标记、数值显示等相关的具体样式设置 */

/* 设置.noUi-pips-vertical类元素（垂直布局下的刻度标记等容器）的内边距、高度、垂直和水平位置，使其在垂直滑块右侧合适的位置显示 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}

/* 当滑块为垂直布局时，对.noUi-value类元素（数值显示部分）进行位置调整，通过3D变换将其在水平和垂直方向上移动到合适位置，使其能准确显示在对应的刻度位置右侧，并且设置左边距，使其与刻度线等有合适的间距 */
.noUi-value-vertical {
  -webkit-transform: translate3d(0, 50%, 0);
  transform: translate3d(0, 50%, 0);
  padding-left: 25px;
}

/* 当滑块为垂直布局时，对.noUi-marker-vertical类元素（垂直布局下的刻度线等标记）进行样式设置，设置其宽度、高度以及上下外边距等，使其呈现出垂直方向的刻度线外观 */
.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}

/* 当滑块为垂直布局时，对.noUi-marker-vertical类元素（垂直布局下的细分刻度线等标记）进行样式设置，调整其宽度，使其与普通刻度线有一定视觉区分 */
.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}

/* 当滑块为垂直布局时，对.noUi-marker-vertical类元素（垂直布局下的较大刻度线等标记）进行样式设置，调整其宽度，使其更加突出显示，与其他刻度线区分开来 */
.noUi-marker-vertical.noUi-marker-large {
  width: 15px;}