9 lines
No EOL
15 KiB
CSS
9 lines
No EOL
15 KiB
CSS
/*!
|
|
* # Fomantic-UI 2.9.3 - Progress
|
|
* https://github.com/fomantic/Fomantic-UI/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* https://opensource.org/licenses/MIT
|
|
*
|
|
*/.ui.progress{position:relative;display:flex;max-width:100%;border:none;margin:1em 0 2.5em;box-shadow:none;background:rgba(0,0,0,.1);padding:0;border-radius:.28571429rem}.ui.progress:first-child{margin:0 0 2.5em}.ui.progress:last-child{margin:0 0 1.5em}.ui.progress .bar{display:block;line-height:1;position:relative;width:0;min-width:2em;background:#888;border-radius:.28571429rem;transition:width .1s ease,background-color .1s ease;overflow:hidden}.ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar,.ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar{background:0 0}.ui.progress[data-percent="0"] .bar .progress{color:rgba(0,0,0,.87)}.ui.inverted.progress[data-percent="0"] .bar .progress{color:rgba(255,255,255,.9)}.ui.progress .bar>.progress{white-space:nowrap;position:absolute;width:auto;font-size:.92857143em;top:50%;right:.5em;left:auto;bottom:auto;color:rgba(255,255,255,.7);text-shadow:none;margin-top:-.5em;font-weight:700;text-align:left}.ui.right.aligned.progress{justify-content:flex-end}.ui.right.aligned.progress .bar>.progress{left:.5em;right:auto}.ui.progress>.label{position:absolute;width:100%;font-size:1em;top:100%;right:auto;left:0;bottom:auto;color:rgba(0,0,0,.87);font-weight:700;text-shadow:none;margin-top:.2em;text-align:center;transition:color .4s ease}.ui.indicating.progress[data-percent^="1"] .bar,.ui.indicating.progress[data-percent^="2"] .bar{background-color:#d95c5c}.ui.indicating.progress[data-percent^="3"] .bar{background-color:#efbc72}.ui.indicating.progress[data-percent^="4"] .bar,.ui.indicating.progress[data-percent^="5"] .bar{background-color:#e6bb48}.ui.indicating.progress[data-percent^="6"] .bar{background-color:#ddc928}.ui.indicating.progress[data-percent^="7"] .bar,.ui.indicating.progress[data-percent^="8"] .bar{background-color:#b4d95c}.ui.indicating.progress[data-percent^="100"] .bar,.ui.indicating.progress[data-percent^="9"] .bar{background-color:#66da81}.ui.indicating.progress[data-percent^="1"] .label,.ui.indicating.progress[data-percent^="2"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress[data-percent^="3"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress[data-percent^="4"] .label,.ui.indicating.progress[data-percent^="5"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress[data-percent^="6"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress[data-percent^="7"] .label,.ui.indicating.progress[data-percent^="8"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress[data-percent^="100"] .label,.ui.indicating.progress[data-percent^="9"] .label{color:rgba(0,0,0,.87)}.ui.inverted.indicating.progress[data-percent^="1"] .label,.ui.inverted.indicating.progress[data-percent^="2"] .label{color:rgba(255,255,255,.9)}.ui.inverted.indicating.progress[data-percent^="3"] .label{color:rgba(255,255,255,.9)}.ui.inverted.indicating.progress[data-percent^="4"] .label,.ui.inverted.indicating.progress[data-percent^="5"] .label{color:rgba(255,255,255,.9)}.ui.inverted.indicating.progress[data-percent^="6"] .label{color:rgba(255,255,255,.9)}.ui.inverted.indicating.progress[data-percent^="7"] .label,.ui.inverted.indicating.progress[data-percent^="8"] .label{color:rgba(255,255,255,.9)}.ui.inverted.indicating.progress[data-percent^="100"] .label,.ui.inverted.indicating.progress[data-percent^="9"] .label{color:rgba(255,255,255,.9)}.ui.indicating.progress[data-percent="1"] .bar,.ui.indicating.progress[data-percent="2"] .bar,.ui.indicating.progress[data-percent="3"] .bar,.ui.indicating.progress[data-percent="4"] .bar,.ui.indicating.progress[data-percent="5"] .bar,.ui.indicating.progress[data-percent="6"] .bar,.ui.indicating.progress[data-percent="7"] .bar,.ui.indicating.progress[data-percent="8"] .bar,.ui.indicating.progress[data-percent="9"] .bar,.ui.indicating.progress[data-percent^="1."] .bar,.ui.indicating.progress[data-percent^="2."] .bar,.ui.indicating.progress[data-percent^="3."] .bar,.ui.indicating.progress[data-percent^="4."] .bar,.ui.indicating.progress[data-percent^="5."] .bar,.ui.indicating.progress[data-percent^="6."] .bar,.ui.indicating.progress[data-percent^="7."] .bar,.ui.indicating.progress[data-percent^="8."] .bar,.ui.indicating.progress[data-percent^="9."] .bar{background-color:#d95c5c}.ui.indicating.progress[data-percent="0"] .label,.ui.indicating.progress[data-percent="1"] .label,.ui.indicating.progress[data-percent="2"] .label,.ui.indicating.progress[data-percent="3"] .label,.ui.indicating.progress[data-percent="4"] .label,.ui.indicating.progress[data-percent="5"] .label,.ui.indicating.progress[data-percent="6"] .label,.ui.indicating.progress[data-percent="7"] .label,.ui.indicating.progress[data-percent="8"] .label,.ui.indicating.progress[data-percent="9"] .label,.ui.indicating.progress[data-percent^="0."] .label,.ui.indicating.progress[data-percent^="1."] .label,.ui.indicating.progress[data-percent^="2."] .label,.ui.indicating.progress[data-percent^="3."] .label,.ui.indicating.progress[data-percent^="4."] .label,.ui.indicating.progress[data-percent^="5."] .label,.ui.indicating.progress[data-percent^="6."] .label,.ui.indicating.progress[data-percent^="7."] .label,.ui.indicating.progress[data-percent^="8."] .label,.ui.indicating.progress[data-percent^="9."] .label{color:rgba(0,0,0,.87)}.ui.inverted.indicating.progress[data-percent="0"] .label,.ui.inverted.indicating.progress[data-percent="1"] .label,.ui.inverted.indicating.progress[data-percent="2"] .label,.ui.inverted.indicating.progress[data-percent="3"] .label,.ui.inverted.indicating.progress[data-percent="4"] .label,.ui.inverted.indicating.progress[data-percent="5"] .label,.ui.inverted.indicating.progress[data-percent="6"] .label,.ui.inverted.indicating.progress[data-percent="7"] .label,.ui.inverted.indicating.progress[data-percent="8"] .label,.ui.inverted.indicating.progress[data-percent="9"] .label,.ui.inverted.indicating.progress[data-percent^="0."] .label,.ui.inverted.indicating.progress[data-percent^="1."] .label,.ui.inverted.indicating.progress[data-percent^="2."] .label,.ui.inverted.indicating.progress[data-percent^="3."] .label,.ui.inverted.indicating.progress[data-percent^="4."] .label,.ui.inverted.indicating.progress[data-percent^="5."] .label,.ui.inverted.indicating.progress[data-percent^="6."] .label,.ui.inverted.indicating.progress[data-percent^="7."] .label,.ui.inverted.indicating.progress[data-percent^="8."] .label,.ui.inverted.indicating.progress[data-percent^="9."] .label{color:rgba(255,255,255,.9)}.ui.ui.indicating.progress.success .label{color:#1a531b}.ui.ui.progress.success .bar{background-color:#21ba45}.ui.ui.progress.success .bar,.ui.ui.progress.success .bar::after{animation:none}.ui.progress.success>.label{color:#1a531b}.ui.ui.progress.warning .bar{background-color:#f2c037}.ui.ui.progress.warning .bar,.ui.ui.progress.warning .bar::after{animation:none}.ui.progress.warning>.label{color:#794b02}.ui.ui.progress.error .bar{background-color:#db2828}.ui.ui.progress.error .bar,.ui.ui.progress.error .bar::after{animation:none}.ui.progress.error>.label{color:#912d2b}.ui.active.progress .bar{position:relative;min-width:2em}.ui.active.progress .bar::after{content:"";opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border-radius:.28571429rem;animation:progress-active 2s ease infinite;transform-origin:left}.ui.active.right.aligned.progress .bar::after{transform-origin:right}@keyframes progress-active{0%{opacity:.3;transform:scale(0,1)}100%{opacity:0;transform:scale(1)}}.ui.disabled.progress{opacity:.35}.ui.ui.disabled.progress .bar,.ui.ui.disabled.progress .bar::after{animation:none}.ui.inverted.progress{background:rgba(255,255,255,.08);border:none}.ui.inverted.progress .bar{background:#888}.ui.inverted.progress .bar>.progress{color:#1b1c1d}.ui.inverted.progress>.label{color:#fff}.ui.inverted.progress.success>.label{color:#21ba45}.ui.inverted.progress.warning>.label{color:#f2c037}.ui.inverted.progress.error>.label{color:#db2828}.ui.progress.attached{background:0 0;position:relative;border:none;margin:0}.ui.progress.attached,.ui.progress.attached .bar{height:.2rem;padding:0;overflow:hidden;border-radius:0 0 .28571429rem .28571429rem}.ui.progress.attached .bar{border-radius:0}.ui.progress.top.attached,.ui.progress.top.attached .bar{top:0;border-radius:.28571429rem .28571429rem 0 0}.ui.progress.top.attached .bar{border-radius:0}.ui.card>.ui.attached.progress,.ui.segment>.ui.attached.progress{position:absolute;top:auto;left:0;bottom:100%;width:100%}.ui.card>.ui.bottom.attached.progress,.ui.segment>.ui.bottom.attached.progress{top:100%;bottom:auto}.ui.indeterminate.primary.progress .bar::before,.ui.primary.progress .bar,.ui.progress .primary.bar{background-color:#2185d0}.ui.inverted.indeterminate.primary.progress .bar::before,.ui.inverted.progress .primary.bar,.ui.primary.inverted.progress .bar{background-color:#54c8ff}.ui.indeterminate.secondary.progress .bar::before,.ui.progress .secondary.bar,.ui.secondary.progress .bar{background-color:#1b1c1d}.ui.inverted.indeterminate.secondary.progress .bar::before,.ui.inverted.progress .secondary.bar,.ui.secondary.inverted.progress .bar{background-color:#545454}.ui.indeterminate.red.progress .bar::before,.ui.progress .red.bar,.ui.red.progress .bar{background-color:#db2828}.ui.inverted.indeterminate.red.progress .bar::before,.ui.inverted.progress .red.bar,.ui.red.inverted.progress .bar{background-color:#ff695e}.ui.indeterminate.orange.progress .bar::before,.ui.orange.progress .bar,.ui.progress .orange.bar{background-color:#f2711c}.ui.inverted.indeterminate.orange.progress .bar::before,.ui.inverted.progress .orange.bar,.ui.orange.inverted.progress .bar{background-color:#ff851b}.ui.indeterminate.yellow.progress .bar::before,.ui.progress .yellow.bar,.ui.yellow.progress .bar{background-color:#fbbd08}.ui.inverted.indeterminate.yellow.progress .bar::before,.ui.inverted.progress .yellow.bar,.ui.yellow.inverted.progress .bar{background-color:#ffe21f}.ui.indeterminate.olive.progress .bar::before,.ui.olive.progress .bar,.ui.progress .olive.bar{background-color:#b5cc18}.ui.inverted.indeterminate.olive.progress .bar::before,.ui.inverted.progress .olive.bar,.ui.olive.inverted.progress .bar{background-color:#d9e778}.ui.green.progress .bar,.ui.indeterminate.green.progress .bar::before,.ui.progress .green.bar{background-color:#21ba45}.ui.green.inverted.progress .bar,.ui.inverted.indeterminate.green.progress .bar::before,.ui.inverted.progress .green.bar{background-color:#2ecc40}.ui.indeterminate.teal.progress .bar::before,.ui.progress .teal.bar,.ui.teal.progress .bar{background-color:#00b5ad}.ui.inverted.indeterminate.teal.progress .bar::before,.ui.inverted.progress .teal.bar,.ui.teal.inverted.progress .bar{background-color:#6dffff}.ui.blue.progress .bar,.ui.indeterminate.blue.progress .bar::before,.ui.progress .blue.bar{background-color:#2185d0}.ui.blue.inverted.progress .bar,.ui.inverted.indeterminate.blue.progress .bar::before,.ui.inverted.progress .blue.bar{background-color:#54c8ff}.ui.indeterminate.violet.progress .bar::before,.ui.progress .violet.bar,.ui.violet.progress .bar{background-color:#6435c9}.ui.inverted.indeterminate.violet.progress .bar::before,.ui.inverted.progress .violet.bar,.ui.violet.inverted.progress .bar{background-color:#a291fb}.ui.indeterminate.purple.progress .bar::before,.ui.progress .purple.bar,.ui.purple.progress .bar{background-color:#a333c8}.ui.inverted.indeterminate.purple.progress .bar::before,.ui.inverted.progress .purple.bar,.ui.purple.inverted.progress .bar{background-color:#dc73ff}.ui.indeterminate.pink.progress .bar::before,.ui.pink.progress .bar,.ui.progress .pink.bar{background-color:#e03997}.ui.inverted.indeterminate.pink.progress .bar::before,.ui.inverted.progress .pink.bar,.ui.pink.inverted.progress .bar{background-color:#ff8edf}.ui.brown.progress .bar,.ui.indeterminate.brown.progress .bar::before,.ui.progress .brown.bar{background-color:#a5673f}.ui.brown.inverted.progress .bar,.ui.inverted.indeterminate.brown.progress .bar::before,.ui.inverted.progress .brown.bar{background-color:#d67c1c}.ui.grey.progress .bar,.ui.indeterminate.grey.progress .bar::before,.ui.progress .grey.bar{background-color:#767676}.ui.grey.inverted.progress .bar,.ui.inverted.indeterminate.grey.progress .bar::before,.ui.inverted.progress .grey.bar{background-color:#dcddde}.ui.black.progress .bar,.ui.indeterminate.black.progress .bar::before,.ui.progress .black.bar{background-color:#1b1c1d}.ui.black.inverted.progress .bar,.ui.inverted.indeterminate.black.progress .bar::before,.ui.inverted.progress .black.bar{background-color:#545454}.ui.progress{font-size:1rem}.ui.progress .bar{height:1.75em}.ui.mini.progress{font-size:.78571429rem}.ui.mini.progress .bar{height:.3em}.ui.tiny.progress{font-size:.85714286rem}.ui.tiny.progress .bar{height:.5em}.ui.small.progress{font-size:.92857143rem}.ui.small.progress .bar{height:1em}.ui.large.progress{font-size:1.14285714rem}.ui.large.progress .bar{height:2.5em}.ui.big.progress{font-size:1.28571429rem}.ui.big.progress .bar{height:3.5em}.ui.huge.progress{font-size:1.42857143rem}.ui.huge.progress .bar{height:4em}.ui.massive.progress{font-size:1.71428571rem}.ui.massive.progress .bar{height:5em}.ui.indeterminate.progress .bar{width:100%}.ui.indeterminate.progress .bar .progress,.ui.progress .bar .centered.progress{text-align:center;position:relative;right:0}.ui.indeterminate.progress .bar::before{content:"";position:absolute;top:0;bottom:0;border-radius:.28571429rem;animation:progress-pulsating 2s ease infinite;transform-origin:center;width:100%}.ui.slow.indeterminate.progress .bar::before{animation-duration:4s}.ui.fast.indeterminate.progress .bar::before{animation-duration:1s}.ui.swinging.indeterminate.progress .bar::before{transform-origin:left;animation-name:progress-swinging}.ui.sliding.indeterminate.progress .bar::before{transform-origin:left;animation-name:progress-sliding}.ui.filling.indeterminate.progress .bar::before{animation-name:progress-filling}.ui.indeterminate.progress:not(.sliding):not(.filling):not(.swinging) .bar::before{background:#fff}.ui.filling.indeterminate.progress .bar,.ui.sliding.indeterminate.progress .bar,.ui.swinging.indeterminate.progress .bar{background:rgba(0,0,0,.1)}.ui.sliding.indeterminate.progress .bar .progress,.ui.swinging.indeterminate.progress .bar .progress{color:#1b1c1d}.ui.inverted.filling.indeterminate.progress .bar,.ui.inverted.sliding.indeterminate.progress .bar,.ui.inverted.swinging.indeterminate.progress .bar{background:rgba(255,255,255,.08)}.ui.inverted.sliding.indeterminate.progress .bar .progress,.ui.inverted.swinging.indeterminate.progress .bar .progress{color:rgba(255,255,255,.7)}@keyframes progress-swinging{0%,100%{width:10%;left:-25%}25%,65%{width:70%}50%{width:10%;left:100%}}@keyframes progress-sliding{0%{width:10%;left:-25%}50%{width:70%}100%{width:10%;left:100%}}@keyframes progress-filling{0%{transform:scale(0,1)}80%{transform:scale(1);opacity:1}100%{opacity:0}}@keyframes progress-pulsating{0%{transform:scale(0,1);opacity:.7}100%{transform:scale(1);opacity:0}} |