/* * # Semantic - Button * 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 ---*/ /*------------------- Video --------------------*/ /*------------------ Load Theme -------------------*/ /*------------------ Load Site -------------------*/ /******************************* User Global Variables *******************************/ /*------------------ Override Mix-in -------------------*/ /******************************* Video *******************************/ .ui.video { background-color: #dddddd; position: relative; max-width: 100%; padding-bottom: 56.25%; height: 0px; overflow: hidden; } /*-------------- Content ---------------*/ /* Placeholder Image */ .ui.video .placeholder { background-color: #333333; } /* Play Icon Overlay */ .ui.video .play { cursor: pointer; position: absolute; top: 0px; left: 0px; z-index: 10; width: 100%; height: 100%; opacity: 0.8; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .ui.video .play.icon:before { position: absolute; top: 50%; left: 50%; z-index: 11; background: rgba(0, 0, 0, 0.3); width: 8rem; height: 8rem; line-height: 8rem; border-radius: 500rem; color: #ffffff; font-size: 8rem; text-shadow: none; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .ui.video .placeholder { position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; } /* IFrame Embed */ .ui.video .embed iframe, .ui.video .embed embed, .ui.video .embed object { position: absolute; border: none; width: 100%; height: 100%; top: 0px; left: 0px; margin: 0em; padding: 0em; } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.video .play:hover { opacity: 1; } /*-------------- Active ---------------*/ .ui.video.active .play, .ui.video.active .placeholder { display: none; } .ui.video.active .embed { display: inline; } /******************************* Overrides *******************************/ /******************************* Overrides *******************************/