204 lines
3.4 KiB
CSS
204 lines
3.4 KiB
CSS
/*========================================================
|
|
DARK LAYOUT
|
|
=========================================================*/
|
|
.noUi-background {
|
|
background : #F0F0F0;
|
|
}
|
|
|
|
.noUi-target {
|
|
background-color : #EBEBEB;
|
|
border : none;
|
|
box-shadow : none;
|
|
border-radius : 1rem;
|
|
}
|
|
.noUi-target.noUi-connect {
|
|
box-shadow : none;
|
|
}
|
|
|
|
.noUi-horizontal {
|
|
height : 10px;
|
|
padding-right : 17px;
|
|
}
|
|
.noUi-horizontal .noUi-handle {
|
|
width : 20px;
|
|
height : 20px;
|
|
top : -5px;
|
|
left : -1px;
|
|
cursor : pointer;
|
|
}
|
|
.noUi-horizontal .noUi-origin {
|
|
left : 17px;
|
|
right : -17px;
|
|
}
|
|
.noUi-horizontal.slider-xl {
|
|
height : 14px;
|
|
}
|
|
.noUi-horizontal.slider-xl .noUi-handle {
|
|
width : 28px;
|
|
height : 28px;
|
|
top : -7px;
|
|
}
|
|
.noUi-horizontal.slider-lg {
|
|
height : 12px;
|
|
}
|
|
.noUi-horizontal.slider-lg .noUi-handle {
|
|
width : 24px;
|
|
height : 24px;
|
|
top : -6px;
|
|
}
|
|
.noUi-horizontal.slider-sm {
|
|
height : 6px;
|
|
}
|
|
.noUi-horizontal.slider-sm .noUi-handle {
|
|
height : 15px;
|
|
width : 15px;
|
|
right : -2px !important;
|
|
}
|
|
.noUi-horizontal.slider-xs {
|
|
height : 3px;
|
|
}
|
|
.noUi-horizontal.slider-xs .noUi-handle {
|
|
height : 10px;
|
|
width : 10px;
|
|
top : -4px;
|
|
right : -2px !important;
|
|
}
|
|
|
|
.noUi-handle {
|
|
box-shadow : none;
|
|
border : none;
|
|
border-radius : 50%;
|
|
background : #FFFFFF;
|
|
border : 5px solid #7367F0;
|
|
}
|
|
.noUi-handle:after, .noUi-handle:before {
|
|
display : none;
|
|
}
|
|
|
|
.circle-filled .noUi-handle {
|
|
background : #7367F0;
|
|
border-radius : 50%;
|
|
}
|
|
.circle-filled .noUi-handle:after, .circle-filled .noUi-handle:before {
|
|
display : none;
|
|
}
|
|
|
|
.square .noUi-handle {
|
|
background : #7367F0;
|
|
border-radius : 3px;
|
|
}
|
|
.square .noUi-handle:before {
|
|
display : block;
|
|
width : 2px;
|
|
height : 10px;
|
|
left : 2px;
|
|
top : 0;
|
|
}
|
|
.square .noUi-handle:after {
|
|
display : block;
|
|
width : 2px;
|
|
height : 10px;
|
|
left : 7px;
|
|
top : 0;
|
|
}
|
|
|
|
.square.slider-xl .noUi-handle:before {
|
|
left : 5px;
|
|
top : 4px;
|
|
}
|
|
|
|
.square.slider-xl .noUi-handle:after {
|
|
left : 10px;
|
|
top : 4px;
|
|
}
|
|
|
|
.square.slider-lg .noUi-handle:before {
|
|
left : 3px;
|
|
top : 2px;
|
|
}
|
|
|
|
.square.slider-lg .noUi-handle:after {
|
|
left : 8px;
|
|
top : 2px;
|
|
}
|
|
|
|
.square.slider-sm .noUi-handle:before {
|
|
left : -1px;
|
|
top : -1px;
|
|
height : 7px;
|
|
}
|
|
|
|
.square.slider-sm .noUi-handle:after {
|
|
left : 4px;
|
|
top : -1px;
|
|
height : 7px;
|
|
}
|
|
|
|
.square.slider-xs .noUi-handle:before {
|
|
left : -3px;
|
|
top : -3px;
|
|
height : 5px;
|
|
}
|
|
|
|
.square.slider-xs .noUi-handle:after {
|
|
left : 1px;
|
|
top : -3px;
|
|
height : 5px;
|
|
}
|
|
|
|
.noUi-connect {
|
|
background : #7367F0;
|
|
box-shadow : none;
|
|
}
|
|
|
|
.noUi-vertical {
|
|
display : inline-block;
|
|
width : 8px;
|
|
height : 150px;
|
|
}
|
|
.noUi-vertical .noUi-handle {
|
|
width : 20px;
|
|
height : 20px;
|
|
top : -5px;
|
|
left : -6px;
|
|
}
|
|
.noUi-vertical.square .noUi-handle {
|
|
background : #7367F0;
|
|
border-radius : 3px;
|
|
}
|
|
.noUi-vertical.square .noUi-handle:before {
|
|
display : block;
|
|
width : 12px;
|
|
height : 2px;
|
|
left : -1px;
|
|
top : 2px;
|
|
}
|
|
.noUi-vertical.square .noUi-handle:after {
|
|
display : block;
|
|
width : 12px;
|
|
height : 2px;
|
|
left : -1px;
|
|
top : 7px;
|
|
}
|
|
.noUi-vertical .noUi-tooltip {
|
|
-webkit-transform : translate(-10%, -50%);
|
|
-ms-transform : translate(-10%, -50%);
|
|
transform : translate(-10%, -50%);
|
|
}
|
|
|
|
.example-val {
|
|
font : 400 12px Arial;
|
|
color : #888888;
|
|
display : block;
|
|
margin : 15px 0;
|
|
}
|
|
|
|
.noUi-handle:focus {
|
|
outline : 0;
|
|
}
|
|
|
|
_:-ms-lang(x), .slider-select {
|
|
-ms-flex : 0 0 10%;
|
|
flex : 0 0 10%;
|
|
max-width : 10%;
|
|
} |