/* * # Semantic - Popup * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributor * 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 -------------------*/ /******************************* Site Settings *******************************/ /*------------------- Paths --------------------*/ /*------------------- Fonts --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*------------------- Page --------------------*/ /*------------------- Background Colors --------------------*/ /* Used for differentiating neutrals */ /* Used for differentiating layers */ /*------------------- Grid --------------------*/ /*------------------- Breakpoints --------------------*/ /******************************* Power-User *******************************/ /*------------------- Icons --------------------*/ /* Max Width of Icon */ /*------------------- Easing --------------------*/ /*--- Light Variations ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Text ---*/ /*--- Colored Headers ---*/ /*------------------- Emotive Colors --------------------*/ /* Mood */ /* Solid Background Color */ /* 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 ---*/ /******************************* Popup *******************************/ /*------------------- Element --------------------*/ /*------------------- Parts --------------------*/ /* Placement */ /* Header */ /* Arrow */ /*------------------- Coupling --------------------*/ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Wide */ /* Inverted */ /* Sizes */ /*------------------ Load Theme -------------------*/ /*------------------ Load Site -------------------*/ /******************************* User Global Variables *******************************/ /******************************* User Variable Overrides *******************************/ /*------------------ Override Mix-in -------------------*/ /******************************* Popup *******************************/ .ui.popup { display: none; position: absolute; top: 0px; right: 0px; z-index: 900; border: 1px solid rgba(0, 0, 0, 0.1); max-width: 250px; background-color: #ffffff; padding: 0.8em 1.2em; font-weight: normal; font-style: normal; color: rgba(0, 0, 0, 0.8); border-radius: 0.2em; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); } .ui.popup > .header { padding: 0em; font-family: 'Open Sans', "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 1.125em; line-height: 1.2; font-weight: bold; } .ui.popup > .header + .content { padding-top: 0.5em; } .ui.popup:before { position: absolute; content: ''; width: 0.75em; height: 0.75em; background: #ffffff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); z-index: 2; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } /******************************* Types *******************************/ /*-------------- Spacing ---------------*/ .ui.popup { margin: 0em; } .ui.popup.bottom { margin: 0.75em 0em 0em; } .ui.popup.top { margin: 0em 0em 0.75em; } .ui.popup.left.center { margin: 0em 0.75em 0em 0em; } .ui.popup.right.center { margin: 0em 0em 0em 0.75em; } .ui.popup.center { margin-left: -1.25em; } /*-------------- Pointer ---------------*/ /*--- Below ---*/ .ui.bottom.center.popup:before { margin-left: -0.375em; top: -0.375em; left: 50%; right: auto; bottom: auto; box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); } .ui.bottom.left.popup { margin-left: 0em; } .ui.bottom.left.popup:before { top: -0.375em; left: 1em; right: auto; bottom: auto; margin-left: 0em; box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); } .ui.bottom.right.popup { margin-right: 0em; } .ui.bottom.right.popup:before { top: -0.375em; right: 1em; bottom: auto; left: auto; margin-left: 0em; box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); } /*--- Above ---*/ .ui.top.center.popup:before { top: auto; right: auto; bottom: -0.375em; left: 50%; margin-left: -0.375em; } .ui.top.left.popup { margin-left: 0em; } .ui.top.left.popup:before { bottom: -0.375em; left: 1em; top: auto; right: auto; margin-left: 0em; } .ui.top.right.popup { margin-right: 0em; } .ui.top.right.popup:before { bottom: -0.375em; right: 1em; top: auto; left: auto; margin-left: 0em; } /*--- Left Center ---*/ .ui.left.center.popup:before { top: 50%; right: -0.375em; bottom: auto; left: auto; margin-top: -0.375em; box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); } /*--- Right Center ---*/ .ui.right.center.popup:before { top: 50%; left: -0.375em; bottom: auto; right: auto; margin-top: -0.375em; box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); } /******************************* States *******************************/ .ui.loading.popup { display: block; visibility: hidden; z-index: -1; } .ui.animating.popup, .ui.visible.popup { display: block; } /******************************* Variations *******************************/ /*-------------- Wide ---------------*/ .ui.wide.popup { width: 350px; max-width: 350px; } .ui.very.wide.popup { width: 550px; max-width: 550px; } /*-------------- Fluid ---------------*/ .ui.fluid.popup { width: 100%; max-width: 99999px; } /*-------------- Colors ---------------*/ /* Inverted colors */ .ui.inverted.popup { background: #191919; color: #ffffff; border: none; box-shadow: none; } .ui.inverted.popup .header { background-color: none; color: #ffffff; } .ui.inverted.popup:before { background-color: #191919; box-shadow: none; } /*-------------- Sizes ---------------*/ .ui.small.popup { font-size: 0.8rem; } .ui.popup { font-size: 0.875rem; } .ui.large.popup { font-size: 1rem; } .ui.huge.popup { font-size: 1.1rem; } /******************************* Overrides *******************************/ /******************************* User Overrides *******************************/