/* * # Semantic - Progress Bar * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ ██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ ███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ ╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ ███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ ╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Themes *******************************/ /* To override a theme for an individual element specify theme name below Be sure to update the user folder name (see README) */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Import Directives *******************************/ /*------------------ Load Defaults -------------------*/ /******************************* Site Settings *******************************/ /*------------------- Paths --------------------*/ /*------------------- Fonts --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*------------------- Page --------------------*/ /* Used to match floats with text */ /*------------------- Background Colors --------------------*/ /* Used for differentiating neutrals */ /* Used for differentiating layers */ /*------------------- Grid --------------------*/ /*------------------- Breakpoints --------------------*/ /******************************* Power-User *******************************/ /*------------------- Icons --------------------*/ /* Max Width of Icon */ /*------------------- Easing --------------------*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Text ---*/ /*--- Colored Headers ---*/ /*------------------- Emotive Colors --------------------*/ /* Mood */ /* Status */ /* Darkened Headers */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Grid Columns --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Sizes --------------------*/ /*------------------- Transitions --------------------*/ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Active --------------------*/ /*--- Standard ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /******************************* Progress *******************************/ /*------------------- Element --------------------*/ /* Bar */ /* Progress Bar Label */ /* Label */ /*------------------- States --------------------*/ /* Active */ /*------------------- Types --------------------*/ /* Attached */ /* Inverted */ /*------------------ Load Theme -------------------*/ /*------------------ Load Site -------------------*/ /******************************* User Global Variables *******************************/ /******************************* User Variable Overrides *******************************/ /*------------------ Override Loader -------------------*/ .ui.progress { position: relative; display: block; max-width: 100%; border: 1px solid rgba(0, 0, 0, 0.05); margin: 1em 0em 2.5em; box-shadow: none; background: rgba(0, 0, 0, 0.03); padding: 0.325em; border-radius: 0.325em; } .ui.progress:first-child { margin: 0em 0em 2.5em; } .ui.progress:last-child { margin: 0em 0em 1.5em; } /* Indicating */ .ui.indicating.progress .bar[style^="width: 3"] { background-color: #D9A65C; } .ui.indicating.progress .bar[style^="width: 4"], .ui.indicating.progress .bar[style^="width: 5"] { background-color: #E6BB48; } .ui.indicating.progress .bar[style^="width: 6"] { background-color: #DDC928; } .ui.indicating.progress .bar[style^="width: 7"], .ui.indicating.progress .bar[style^="width: 8"] { background-color: #B4D95C; } .ui.indicating.progress .bar[style^="width: 9"], .ui.indicating.progress .bar[style^="width: 100"] { background-color: #66DA81; } /* Single Digits Last */ .ui.indicating.progress .bar[style^="width: 1%"], .ui.indicating.progress .bar[style^="width: 2%"], .ui.indicating.progress .bar[style^="width: 3%"], .ui.indicating.progress .bar[style^="width: 4%"], .ui.indicating.progress .bar[style^="width: 5%"], .ui.indicating.progress .bar[style^="width: 6%"], .ui.indicating.progress .bar[style^="width: 7%"], .ui.indicating.progress .bar[style^="width: 8%"], .ui.indicating.progress .bar[style^="width: 9%"], .ui.indicating.progress .bar[style^="width: 1"], .ui.indicating.progress .bar[style^="width: 2"] { background-color: #D95C5C; } /******************************* Content *******************************/ /* Activity Bar */ .ui.progress .bar { display: block; line-height: 1; position: relative; width: 0%; min-width: 0.25em; height: 1.75em; background: #888888; border-radius: 0.325em; -webkit-transition: width 0.5s ease, background-color 1s ease; transition: width 0.5s ease, background-color 1s ease; } /* Percent Complete */ .ui.progress .bar > .progress { white-space: nowrap; position: absolute; width: auto; font-size: 0.9em; top: 50%; right: 0.5em; left: auto; bottom: auto; color: rgba(255, 255, 255, 0.8); text-shadow: none; margin-top: -0.5em; font-weight: bold; text-align: left; } /* Label */ .ui.progress > .label { position: absolute; width: 100%; font-size: 1em; top: 100%; right: auto; left: 0%; bottom: auto; color: rgba(0, 0, 0, 0.8); font-weight: bold; text-shadow: none; margin-top: 0.2em; text-align: center; -webkit-transition: color 1s ease; transition: color 1s ease; } /******************************* States *******************************/ /*-------------- Success ---------------*/ .ui.progress.success .bar { background-color: #5bbd72 !important; } .ui.progress.success .bar, .ui.progress.success .bar::after { -webkit-animation: none !important; animation: none !important; } .ui.progress.success > .label { color: #336534; } /*-------------- Warning ---------------*/ .ui.progress.warning .bar { background-color: #f2c037 !important; } .ui.progress.warning .bar, .ui.progress.warning .bar::after { -webkit-animation: none !important; animation: none !important; } .ui.progress.warning > .label { color: #785f33; } /*-------------- Error ---------------*/ .ui.progress.error .bar { background-color: #d95c5c !important; } .ui.progress.error .bar, .ui.progress.error .bar::after { -webkit-animation: none !important; animation: none !important; } .ui.progress.error > .label { color: #973d3b; } /*-------------- Active ---------------*/ .ui.active.progress .bar { position: relative; } .ui.active.progress .bar::after { content: ''; opacity: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: #ffffff; border-radius: 0.325em; -webkit-animation: progress-active 2s ease infinite; animation: progress-active 2s ease infinite; } @-webkit-keyframes progress-active { 0% { opacity: 0.3; width: 0; } 100% { opacity: 0; width: 100%; } } @keyframes progress-active { 0% { opacity: 0.3; width: 0; } 100% { opacity: 0; width: 100%; } } /*-------------- Disabled ---------------*/ .ui.disabled.progress { opacity: 0.35; } .ui.disabled.progress .bar, .ui.disabled.progress .bar::after { -webkit-animation: none !important; animation: none !important; } /******************************* Variations *******************************/ /*-------------- Inverted ---------------*/ /* bottom attached */ .ui.inverted.progress { background: rgba(255, 255, 255, 0.05); border: none; } .ui.inverted.progress .bar { background: #888888; } .ui.inverted.progress .bar > .progress { color: #fafafa; } .ui.inverted.progress > .label { color: #ffffff; } .ui.inverted.progress.success > .label { color: #5bbd72; } .ui.inverted.progress.warning > .label { color: #f2c037; } .ui.inverted.progress.error > .label { color: #d95c5c; } /*-------------- Attached ---------------*/ /* bottom attached */ .ui.progress.attached { background: none transparent; position: relative; border: none; margin: 0em; } .ui.progress.attached, .ui.progress.attached .bar { display: block; height: 0.25em; padding: 0px; overflow: hidden; border-radius: 0em 0em 0.325em 0.325em; } .ui.progress.attached .bar { border-radius: 0em; } /* top attached */ .ui.progress.top.attached, .ui.progress.top.attached .bar { top: 0px; border-radius: 0.325em 0.325em 0em 0em; } .ui.progress.top.attached .bar { border-radius: 0em; } /*-------------- Colors ---------------*/ .ui.black.progress .bar { background-color: #1b1c1d; } .ui.blue.progress .bar { background-color: #3b83c0; } .ui.green.progress .bar { background-color: #5bbd72; } .ui.orange.progress .bar { background-color: #e07b53; } .ui.pink.progress .bar { background-color: #d9499a; } .ui.purple.progress .bar { background-color: #564f8a; } .ui.red.progress .bar { background-color: #d95c5c; } .ui.teal.progress .bar { background-color: #00b5ad; } .ui.yellow.progress .bar { background-color: #f2c61f; } .ui.black.inverted.progress .bar { background-color: #333333; } .ui.blue.inverted.progress .bar { background-color: #54c8ff; } .ui.green.inverted.progress .bar { background-color: #2ecc40; } .ui.orange.inverted.progress .bar { background-color: #ff851b; } .ui.pink.inverted.progress .bar { background-color: #ff8edf; } .ui.purple.inverted.progress .bar { background-color: #cdc6ff; } .ui.red.inverted.progress .bar { background-color: #ff695e; } .ui.teal.inverted.progress .bar { background-color: #6dffff; } .ui.yellow.inverted.progress .bar { background-color: #ffe21f; } /*-------------- Sizes ---------------*/ .ui.small.progress .bar { height: 14px; }