/* * # Semantic - Loader * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2013 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 Default -------------------*/ /******************************* Global Variables *******************************/ /*------------------- Paths --------------------*/ /*------------------- Page --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Fonts --------------------*/ /*------------------- Icons --------------------*/ /* Max Width of Icon */ /*------------------- Easing --------------------*/ /******************************* BG Colors *******************************/ /******************************* Colors *******************************/ /*--- Colors ---*/ /*--- Neutrals ---*/ /*--- Text Colors ---*/ /* Preserve */ /* Adjust for Legibility */ /*--- Backgrounds ---*/ /*------------------- Emotive Colors --------------------*/ /* Positive / Negative */ /* Messages */ /*------------------- Text Colors --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Sizes --------------------*/ /*------------------- Transitions --------------------*/ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Active --------------------*/ /*--- Standard ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Globals Used --------------------*/ /*------------------- Standard --------------------*/ /*------------------- Types --------------------*/ /* Image */ /* Text */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /*------------------ Load Theme -------------------*/ /*------------------ Load Site -------------------*/ /******************************* User Global Variables *******************************/ /******************************* User Variable Overrides *******************************/ /*------------------ Override Mix-in -------------------*/ /******************************* Loader *******************************/ /* Standard Size */ .ui.loader { display: none; position: absolute; top: 50%; left: 50%; margin: 0px; text-align: center; z-index: 1000; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .ui.dimmer .loader { display: block; } .ui.dimmer .ui.loader, .ui.inverted.loader { color: #ffffff; } /******************************* Types *******************************/ /*-------------- CSS ---------------*/ /* Flipping */ .ui.flipping.loader { width: auto; height: auto; background-image: none !important; } .ui.flipping.loader .shape { position: relative; margin: 0em auto 1em; color: transparent; -webkit-box-shadow: 0px 0px 0px 1px; box-shadow: 0px 0px 0px 1px; -webkit-animation: loaderFlipping 1s infinite ease; animation: loaderFlipping 1s infinite ease; margin-bottom: 1em; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .ui.flipping.loader .shape:before, .ui.flipping.loader .shape:after { position: absolute; content: ''; top: 0px; left: 0px; -webkit-box-shadow: 0px 0px 0px 1px; box-shadow: 0px 0px 0px 1px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .ui.flipping.loader .shape:before { background-color: #39cccc; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 2; } .ui.flipping.loader .shape:after { background-color: #333333; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } /* Circular */ .ui.flipping.circular.loader .shape, .ui.flipping.circular.loader .shape:before, .ui.flipping.circular.loader .shape:after { border-radius: 500rem; } /* Sizes */ .ui.mini.flipping.loader .shape, .ui.mini.flipping.loader .shape:before, .ui.mini.flipping.loader .shape:after { width: 16px; height: 16px; } .ui.flipping.loader .shape, .ui.flipping.loader .shape:before, .ui.flipping.loader .shape:after { width: 32px; height: 32px; } @-webkit-keyframes loaderFlipping { 0% { -webkit-transform: perspective(6em) rotateX(0deg) rotateY(0deg); transform: perspective(6em) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(6em) rotateX(0deg) rotateY(-180deg); transform: perspective(6em) rotateX(0deg) rotateY(-180deg); } 100% { -webkit-transform: perspective(6em) rotateX(0deg) rotateY(-360deg); transform: perspective(6em) rotateX(0deg) rotateY(-360deg); } } @keyframes loaderFlipping { 0% { -webkit-transform: perspective(6em) rotateX(0deg) rotateY(0deg); transform: perspective(6em) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(6em) rotateX(0deg) rotateY(-180deg); transform: perspective(6em) rotateX(0deg) rotateY(-180deg); } 100% { -webkit-transform: perspective(6em) rotateX(0deg) rotateY(-360deg); transform: perspective(6em) rotateX(0deg) rotateY(-360deg); } } /*------------------- Text --------------------*/ .ui.text.loader { width: auto !important; height: auto !important; text-align: center; font-style: normal; } .ui.mini.text.loader { min-width: 16px; padding-top: 31px; } .ui.small.text.loader { min-width: 24px; padding-top: 39px; } .ui.text.loader { min-width: 32px; padding-top: 47px; } .ui.large.text.loader { min-width: 64px; padding-top: 79px; } /******************************* States *******************************/ .ui.loader.active, .ui.loader.visible { display: block; } .ui.loader.disabled, .ui.loader.hidden { display: none; } /******************************* Variations *******************************/ /*------------------- Sizes --------------------*/ /* Tiny Size */ .ui.inverted.dimmer .ui.mini.loader, .ui.mini.loader { width: 16px; height: 16px; font-size: 0.8em; background-image: url("../../themes/packages/default/assets/images/loader-mini.gif"); } /* Small Size */ .ui.inverted.dimmer .ui.small.loader, .ui.small.loader { width: 24px; height: 24px; font-size: 0.875em; background-image: url("../../themes/packages/default/assets/images/loader-small.gif"); } .ui.inverted.dimmer .ui.loader, .ui.loader { width: 32px; height: 32px; font-size: 1em; background: url("../../themes/packages/default/assets/images/loader-medium.gif") no-repeat; background-position: 50% 0px; } /* Large Size */ .ui.inverted.dimmer .ui.loader.large, .ui.loader.large { width: 64px; height: 64px; font-size: 1.2em; background-image: url("../../themes/packages/default/assets/images/loader-large.gif"); } /*------------------- Inverted --------------------*/ .ui.inverted.dimmer .ui.loader { color: rgba(0, 0, 0, 0.8); } /* Tiny Size */ .ui.dimmer .mini.ui.loader, .ui.inverted .mini.ui.loader { background-image: url("../../themes/packages/default/assets/images/loader-mini-inverted.gif"); } /* Small Size */ .ui.dimmer .small.ui.loader, .ui.inverted .small.ui.loader { background-image: url("../../themes/packages/default/assets/images/loader-small-inverted.gif"); } /* Standard Size */ .ui.dimmer .ui.loader, .ui.inverted.loader { background-image: url("../../themes/packages/default/assets/images/loader-medium-inverted.gif"); } /* Large Size */ .ui.dimmer .large.ui.loader, .ui.inverted .large.ui.loader { background-image: url("../../themes/packages/default/assets/images/loader-large-inverted.gif"); } /*------------------- Inline --------------------*/ .ui.inline.loader { position: static; vertical-align: middle; margin: 0em; -webkit-transform: none; -ms-transform: none; transform: none; } .ui.inline.loader.active, .ui.inline.loader.visible { display: inline-block; } /******************************* Overrides *******************************/ /******************************* Overrides *******************************/