123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790 |
- /*******************************
- Theme
- *******************************/
- .ui.slider:not(.vertical):not(.checkbox) {
- width: 100%;
- padding: 1em 0.5em;
- }
- .ui.slider:not(.checkbox) {
- position: relative;
- }
- .ui.slider:not(.checkbox):focus {
- outline: 0;
- }
- .ui.slider .inner {
- position: relative;
- z-index: 2;
- }
- .ui.slider:not(.vertical) .inner {
- height: 1.5em;
- }
- .ui.slider .inner:hover {
- cursor: auto;
- }
- .ui.slider .inner .track {
- position: absolute;
- border-radius: 4px;
- background-color: rgba(0, 0, 0, 0.05);
- }
- .ui.slider:not(.vertical) .inner .track {
- width: 100%;
- height: 0.4em;
- top: 0.55em;
- left: 0;
- }
- .ui.slider .inner .track-fill {
- position: absolute;
- border-radius: 4px;
- background-color: #1B1C1D;
- }
- .ui.slider:not(.vertical) .inner .track-fill {
- height: 0.4em;
- top: 0.55em;
- left: 0;
- }
- .ui.slider .inner .thumb {
- position: absolute;
- left: 0;
- top: 0;
- height: 1.5em;
- width: 1.5em;
- background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
- background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
- background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05));
- border-radius: 100%;
- -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
- -webkit-transition: background 0.3s ease;
- transition: background 0.3s ease;
- }
- .ui.slider:not(.disabled) .inner .thumb:hover {
- cursor: pointer;
- background: #f2f2f2 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
- background: #f2f2f2 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
- background: #f2f2f2 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
- }
- .ui.slider:not(.disabled):focus .inner .thumb {
- background: #f2f2f2 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
- background: #f2f2f2 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
- background: #f2f2f2 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
- }
- /*******************************
- States
- *******************************/
- /*--------------
- Disabled
- ---------------*/
- .ui.disabled.slider:not(.checkbox) {
- opacity: 0.5;
- }
- .ui.disabled.slider .inner:hover {
- cursor: auto;
- }
- .ui.disabled.slider .inner .track-fill {
- background: #ccc;
- }
- /*--------------
- Reversed
- ---------------*/
- .ui.reversed.slider .inner .track-fill {
- left: auto;
- right: 0;
- }
- .ui.reversed.slider:not(.vertical) .inner .thumb {
- left: auto;
- right: 0;
- }
- .ui.reversed.vertical.slider .inner .thumb {
- left: 0.03em;
- }
- .ui.labeled.reversed.slider > .labels .label {
- -webkit-transform: translate(-100%, -100%);
- transform: translate(-100%, -100%);
- }
- /*******************************
- Variations
- *******************************/
- /*--------------
- Vertical
- ---------------*/
- .ui.vertical.slider {
- height: 100%;
- width: 1.5em;
- padding: 0.5em 1em;
- }
- .ui.vertical.slider .inner {
- height: 100%;
- }
- .ui.vertical.slider .inner .track {
- height: 100%;
- width: 0.4em;
- left: 0.55em;
- top: 0;
- }
- .ui.vertical.slider .inner .track-fill {
- width: 0.4em;
- left: 0.55em;
- top: 0;
- }
- /* Vertical Reversed */
- .ui.vertical.reversed.slider .inner .thumb {
- top: auto;
- bottom: 0;
- }
- .ui.vertical.reversed.slider .inner .track-fill {
- top: auto;
- bottom: 0;
- }
- /*--------------
- Labeled
- ---------------*/
- .ui.labeled.slider > .labels {
- height: 1.5em;
- width: auto;
- margin: 0;
- padding: 0;
- position: absolute;
- top: 50%;
- left: 0;
- right: 0;
- }
- .ui.labeled.slider:not(.vertical) > .labels {
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- }
- .ui.labeled.slider > .labels .label {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- position: absolute;
- -webkit-transform: translate(-50%, -100%);
- transform: translate(-50%, -100%);
- }
- .ui.labeled.ticked.slider > .labels .label:after {
- content: ' ';
- height: 1.5em;
- width: 1px;
- background: #ccc;
- position: absolute;
- top: 100%;
- left: 50%;
- }
- .ui.labeled.ticked.slider > .labels .halftick.label:after {
- height: 0.75em;
- }
- /* Vertical Labels */
- .ui.labeled.vertical.slider > .labels {
- width: 1.5em;
- height: auto;
- left: 50%;
- top: 0;
- bottom: 0;
- -webkit-transform: translateX(-50%);
- transform: translateX(-50%);
- }
- .ui.labeled.vertical.slider > .labels .label {
- -webkit-transform: translate(-100%, -50%);
- transform: translate(-100%, -50%);
- }
- .ui.labeled.vertical.slider > .labels .label:after {
- width: 1.5em;
- height: 1px;
- left: 100%;
- top: 50%;
- }
- .ui.labeled.vertical.slider > .labels .halftick.label:after {
- width: 0.75em;
- height: 1px;
- }
- /* Vertical Reversed Labels */
- .ui.labeled.vertical.reversed.slider > .labels .label {
- -webkit-transform: translate(-100%, 50%);
- transform: translate(-100%, 50%);
- }
- /*--------------
- Hover
- ---------------*/
- .ui.hover.slider .inner .thumb {
- opacity: 0;
- -webkit-transition: opacity 0.2s linear;
- transition: opacity 0.2s linear;
- }
- .ui.hover.slider:not(.disabled):hover .inner .thumb,
- .ui.hover.slider:not(.disabled):focus .inner .thumb {
- opacity: 1;
- }
- /*--------------
- Inverted
- ---------------*/
- .ui.inverted.slider .inner .track-fill {
- background-color: #545454;
- }
- .ui.inverted.slider .inner .track {
- background-color: rgba(255, 255, 255, 0.08);
- }
- /*--------------
- Colors
- ---------------*/
- /* Standard */
- .ui.primary.slider .inner .track-fill {
- background-color: #2185D0;
- }
- .ui.primary.inverted.slider .inner .track-fill {
- background-color: #54C8FF;
- }
- /* Basic */
- .ui.primary.slider.basic .inner .thumb {
- background-color: #2185D0;
- }
- .ui.primary.slider.basic .inner .thumb:hover,
- .ui.primary.slider.basic:focus .inner .thumb {
- background-color: #1678c2;
- }
- /* Basic Inverted */
- .ui.primary.inverted.slider.basic .inner .thumb {
- background-color: #54C8FF;
- }
- .ui.primary.inverted.slider.basic .inner .thumb:hover,
- .ui.primary.inverted.slider.basic:focus .inner .thumb {
- background-color: #21b8ff;
- }
- /* Standard */
- .ui.secondary.slider .inner .track-fill {
- background-color: #1B1C1D;
- }
- .ui.secondary.inverted.slider .inner .track-fill {
- background-color: #545454;
- }
- /* Basic */
- .ui.secondary.slider.basic .inner .thumb {
- background-color: #1B1C1D;
- }
- .ui.secondary.slider.basic .inner .thumb:hover,
- .ui.secondary.slider.basic:focus .inner .thumb {
- background-color: #27292a;
- }
- /* Basic Inverted */
- .ui.secondary.inverted.slider.basic .inner .thumb {
- background-color: #545454;
- }
- .ui.secondary.inverted.slider.basic .inner .thumb:hover,
- .ui.secondary.inverted.slider.basic:focus .inner .thumb {
- background-color: #6e6e6e;
- }
- /* Standard */
- .ui.red.slider .inner .track-fill {
- background-color: #DB2828;
- }
- .ui.red.inverted.slider .inner .track-fill {
- background-color: #FF695E;
- }
- /* Basic */
- .ui.red.slider.basic .inner .thumb {
- background-color: #DB2828;
- }
- .ui.red.slider.basic .inner .thumb:hover,
- .ui.red.slider.basic:focus .inner .thumb {
- background-color: #d01919;
- }
- /* Basic Inverted */
- .ui.red.inverted.slider.basic .inner .thumb {
- background-color: #FF695E;
- }
- .ui.red.inverted.slider.basic .inner .thumb:hover,
- .ui.red.inverted.slider.basic:focus .inner .thumb {
- background-color: #ff392b;
- }
- /* Standard */
- .ui.orange.slider .inner .track-fill {
- background-color: #F2711C;
- }
- .ui.orange.inverted.slider .inner .track-fill {
- background-color: #FF851B;
- }
- /* Basic */
- .ui.orange.slider.basic .inner .thumb {
- background-color: #F2711C;
- }
- .ui.orange.slider.basic .inner .thumb:hover,
- .ui.orange.slider.basic:focus .inner .thumb {
- background-color: #f26202;
- }
- /* Basic Inverted */
- .ui.orange.inverted.slider.basic .inner .thumb {
- background-color: #FF851B;
- }
- .ui.orange.inverted.slider.basic .inner .thumb:hover,
- .ui.orange.inverted.slider.basic:focus .inner .thumb {
- background-color: #e76b00;
- }
- /* Standard */
- .ui.yellow.slider .inner .track-fill {
- background-color: #FBBD08;
- }
- .ui.yellow.inverted.slider .inner .track-fill {
- background-color: #FFE21F;
- }
- /* Basic */
- .ui.yellow.slider.basic .inner .thumb {
- background-color: #FBBD08;
- }
- .ui.yellow.slider.basic .inner .thumb:hover,
- .ui.yellow.slider.basic:focus .inner .thumb {
- background-color: #eaae00;
- }
- /* Basic Inverted */
- .ui.yellow.inverted.slider.basic .inner .thumb {
- background-color: #FFE21F;
- }
- .ui.yellow.inverted.slider.basic .inner .thumb:hover,
- .ui.yellow.inverted.slider.basic:focus .inner .thumb {
- background-color: #ebcd00;
- }
- /* Standard */
- .ui.olive.slider .inner .track-fill {
- background-color: #B5CC18;
- }
- .ui.olive.inverted.slider .inner .track-fill {
- background-color: #D9E778;
- }
- /* Basic */
- .ui.olive.slider.basic .inner .thumb {
- background-color: #B5CC18;
- }
- .ui.olive.slider.basic .inner .thumb:hover,
- .ui.olive.slider.basic:focus .inner .thumb {
- background-color: #a7bd0d;
- }
- /* Basic Inverted */
- .ui.olive.inverted.slider.basic .inner .thumb {
- background-color: #D9E778;
- }
- .ui.olive.inverted.slider.basic .inner .thumb:hover,
- .ui.olive.inverted.slider.basic:focus .inner .thumb {
- background-color: #d2e745;
- }
- /* Standard */
- .ui.green.slider .inner .track-fill {
- background-color: #21BA45;
- }
- .ui.green.inverted.slider .inner .track-fill {
- background-color: #2ECC40;
- }
- /* Basic */
- .ui.green.slider.basic .inner .thumb {
- background-color: #21BA45;
- }
- .ui.green.slider.basic .inner .thumb:hover,
- .ui.green.slider.basic:focus .inner .thumb {
- background-color: #16ab39;
- }
- /* Basic Inverted */
- .ui.green.inverted.slider.basic .inner .thumb {
- background-color: #2ECC40;
- }
- .ui.green.inverted.slider.basic .inner .thumb:hover,
- .ui.green.inverted.slider.basic:focus .inner .thumb {
- background-color: #1ea92e;
- }
- /* Standard */
- .ui.teal.slider .inner .track-fill {
- background-color: #00B5AD;
- }
- .ui.teal.inverted.slider .inner .track-fill {
- background-color: #6DFFFF;
- }
- /* Basic */
- .ui.teal.slider.basic .inner .thumb {
- background-color: #00B5AD;
- }
- .ui.teal.slider.basic .inner .thumb:hover,
- .ui.teal.slider.basic:focus .inner .thumb {
- background-color: #009c95;
- }
- /* Basic Inverted */
- .ui.teal.inverted.slider.basic .inner .thumb {
- background-color: #6DFFFF;
- }
- .ui.teal.inverted.slider.basic .inner .thumb:hover,
- .ui.teal.inverted.slider.basic:focus .inner .thumb {
- background-color: #3affff;
- }
- /* Standard */
- .ui.blue.slider .inner .track-fill {
- background-color: #2185D0;
- }
- .ui.blue.inverted.slider .inner .track-fill {
- background-color: #54C8FF;
- }
- /* Basic */
- .ui.blue.slider.basic .inner .thumb {
- background-color: #2185D0;
- }
- .ui.blue.slider.basic .inner .thumb:hover,
- .ui.blue.slider.basic:focus .inner .thumb {
- background-color: #1678c2;
- }
- /* Basic Inverted */
- .ui.blue.inverted.slider.basic .inner .thumb {
- background-color: #54C8FF;
- }
- .ui.blue.inverted.slider.basic .inner .thumb:hover,
- .ui.blue.inverted.slider.basic:focus .inner .thumb {
- background-color: #21b8ff;
- }
- /* Standard */
- .ui.violet.slider .inner .track-fill {
- background-color: #6435C9;
- }
- .ui.violet.inverted.slider .inner .track-fill {
- background-color: #A291FB;
- }
- /* Basic */
- .ui.violet.slider.basic .inner .thumb {
- background-color: #6435C9;
- }
- .ui.violet.slider.basic .inner .thumb:hover,
- .ui.violet.slider.basic:focus .inner .thumb {
- background-color: #5829bb;
- }
- /* Basic Inverted */
- .ui.violet.inverted.slider.basic .inner .thumb {
- background-color: #A291FB;
- }
- .ui.violet.inverted.slider.basic .inner .thumb:hover,
- .ui.violet.inverted.slider.basic:focus .inner .thumb {
- background-color: #745aff;
- }
- /* Standard */
- .ui.purple.slider .inner .track-fill {
- background-color: #A333C8;
- }
- .ui.purple.inverted.slider .inner .track-fill {
- background-color: #DC73FF;
- }
- /* Basic */
- .ui.purple.slider.basic .inner .thumb {
- background-color: #A333C8;
- }
- .ui.purple.slider.basic .inner .thumb:hover,
- .ui.purple.slider.basic:focus .inner .thumb {
- background-color: #9627ba;
- }
- /* Basic Inverted */
- .ui.purple.inverted.slider.basic .inner .thumb {
- background-color: #DC73FF;
- }
- .ui.purple.inverted.slider.basic .inner .thumb:hover,
- .ui.purple.inverted.slider.basic:focus .inner .thumb {
- background-color: #cf40ff;
- }
- /* Standard */
- .ui.pink.slider .inner .track-fill {
- background-color: #E03997;
- }
- .ui.pink.inverted.slider .inner .track-fill {
- background-color: #FF8EDF;
- }
- /* Basic */
- .ui.pink.slider.basic .inner .thumb {
- background-color: #E03997;
- }
- .ui.pink.slider.basic .inner .thumb:hover,
- .ui.pink.slider.basic:focus .inner .thumb {
- background-color: #e61a8d;
- }
- /* Basic Inverted */
- .ui.pink.inverted.slider.basic .inner .thumb {
- background-color: #FF8EDF;
- }
- .ui.pink.inverted.slider.basic .inner .thumb:hover,
- .ui.pink.inverted.slider.basic:focus .inner .thumb {
- background-color: #ff5bd1;
- }
- /* Standard */
- .ui.brown.slider .inner .track-fill {
- background-color: #A5673F;
- }
- .ui.brown.inverted.slider .inner .track-fill {
- background-color: #D67C1C;
- }
- /* Basic */
- .ui.brown.slider.basic .inner .thumb {
- background-color: #A5673F;
- }
- .ui.brown.slider.basic .inner .thumb:hover,
- .ui.brown.slider.basic:focus .inner .thumb {
- background-color: #975b33;
- }
- /* Basic Inverted */
- .ui.brown.inverted.slider.basic .inner .thumb {
- background-color: #D67C1C;
- }
- .ui.brown.inverted.slider.basic .inner .thumb:hover,
- .ui.brown.inverted.slider.basic:focus .inner .thumb {
- background-color: #b0620f;
- }
- /* Standard */
- .ui.grey.slider .inner .track-fill {
- background-color: #767676;
- }
- .ui.grey.inverted.slider .inner .track-fill {
- background-color: #DCDDDE;
- }
- /* Basic */
- .ui.grey.slider.basic .inner .thumb {
- background-color: #767676;
- }
- .ui.grey.slider.basic .inner .thumb:hover,
- .ui.grey.slider.basic:focus .inner .thumb {
- background-color: #838383;
- }
- /* Basic Inverted */
- .ui.grey.inverted.slider.basic .inner .thumb {
- background-color: #DCDDDE;
- }
- .ui.grey.inverted.slider.basic .inner .thumb:hover,
- .ui.grey.inverted.slider.basic:focus .inner .thumb {
- background-color: #c2c4c5;
- }
- /* Standard */
- .ui.black.slider .inner .track-fill {
- background-color: #1B1C1D;
- }
- .ui.black.inverted.slider .inner .track-fill {
- background-color: #545454;
- }
- /* Basic */
- .ui.black.slider.basic .inner .thumb {
- background-color: #1B1C1D;
- }
- .ui.black.slider.basic .inner .thumb:hover,
- .ui.black.slider.basic:focus .inner .thumb {
- background-color: #27292a;
- }
- /* Basic Inverted */
- .ui.black.inverted.slider.basic .inner .thumb {
- background-color: #545454;
- }
- .ui.black.inverted.slider.basic .inner .thumb:hover,
- .ui.black.inverted.slider.basic:focus .inner .thumb {
- background-color: #000000;
- }
- /*--------------
- Basic
- ---------------*/
- /* Standard */
- .ui.slider.basic .inner .thumb {
- background-color: #1B1C1D;
- }
- .ui.slider.basic .inner .thumb:hover,
- .ui.slider.basic:focus .inner .thumb {
- background-color: #27292a;
- }
- /*--------------
- Basic Inverted
- ---------------*/
- /* Standard */
- .ui.inverted.slider.basic .inner .thumb {
- background-color: #545454;
- }
- .ui.inverted.slider.basic .inner .thumb:hover,
- .ui.inverted.slider.basic:focus .inner .thumb {
- background-color: #000000;
- }
- /*--------------
- Sizing
- ---------------*/
- .ui.slider.small .inner .thumb {
- height: 1em;
- width: 1em;
- }
- .ui.slider.small:not(.vertical) .inner {
- height: 1em;
- }
- .ui.slider.small:not(.vertical) .inner .track,
- .ui.slider.small:not(.vertical) .inner .track-fill {
- height: 0.3em;
- top: 0.35em;
- }
- .ui.small.labeled.slider:not(.vertical) > .labels,
- .ui.small.labeled.slider:not(.vertical) > .labels .label:after {
- height: 1em;
- }
- .ui.small.labeled.slider:not(.vertical) > .labels .halftick.label:after {
- height: 0.5em;
- }
- /* Small Vertical */
- .ui.slider.small.vertical .inner {
- width: 1em;
- }
- .ui.slider.small.vertical .inner .track,
- .ui.slider.small.vertical .inner .track-fill {
- width: 0.3em;
- left: 0.35em;
- }
- .ui.small.labeled.vertical.slider > .labels,
- .ui.small.labeled.vertical.slider > .labels .label:after {
- width: 1em;
- }
- .ui.small.labeled.vertical.slider > .labels .halftick.label:after {
- width: 0.5em;
- }
- .ui.slider.large .inner .thumb {
- height: 2em;
- width: 2em;
- }
- .ui.slider.large:not(.vertical) .inner {
- height: 2em;
- }
- .ui.slider.large:not(.vertical) .inner .track,
- .ui.slider.large:not(.vertical) .inner .track-fill {
- height: 0.5em;
- top: 0.75em;
- }
- .ui.large.labeled.slider:not(.vertical) > .labels,
- .ui.large.labeled.slider:not(.vertical) > .labels .label:after {
- height: 2em;
- }
- .ui.large.labeled.slider:not(.vertical) > .labels .halftick.label:after {
- height: 1em;
- }
- /* Small Vertical */
- .ui.slider.large.vertical .inner {
- width: 2em;
- }
- .ui.slider.large.vertical .inner .track,
- .ui.slider.large.vertical .inner .track-fill {
- width: 0.5em;
- left: 0.75em;
- }
- .ui.large.labeled.vertical.slider > .labels,
- .ui.large.labeled.vertical.slider > .labels .label:after {
- width: 2em;
- }
- .ui.large.labeled.vertical.slider > .labels .halftick.label:after {
- width: 1em;
- }
- .ui.slider.big .inner .thumb {
- height: 2.5em;
- width: 2.5em;
- }
- .ui.slider.big:not(.vertical) .inner {
- height: 2.5em;
- }
- .ui.slider.big:not(.vertical) .inner .track,
- .ui.slider.big:not(.vertical) .inner .track-fill {
- height: 0.6em;
- top: 0.95em;
- }
- .ui.big.labeled.slider:not(.vertical) > .labels,
- .ui.big.labeled.slider:not(.vertical) > .labels .label:after {
- height: 2.5em;
- }
- .ui.big.labeled.slider:not(.vertical) > .labels .halftick.label:after {
- height: 1.25em;
- }
- /* Small Vertical */
- .ui.slider.big.vertical .inner {
- width: 2.5em;
- }
- .ui.slider.big.vertical .inner .track,
- .ui.slider.big.vertical .inner .track-fill {
- width: 0.6em;
- left: 0.95em;
- }
- .ui.big.labeled.vertical.slider > .labels,
- .ui.big.labeled.vertical.slider > .labels .label:after {
- width: 2.5em;
- }
- .ui.big.labeled.vertical.slider > .labels .halftick.label:after {
- width: 1.25em;
- }
- /*******************************
- Slider Overrides
- *******************************/
|