/* * # Semantic - Message * 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 --------------------*/ /*------------------- 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 ---*/ /******************************* Message *******************************/ /*------------------- Elements --------------------*/ /* Header */ /* Paragraph */ /* List */ /* Close Icon */ /*------------------- Types --------------------*/ /* Icon Message */ /* Attached */ /* Floating */ /*------------------- Variations --------------------*/ /*------------------ Load Theme -------------------*/ /*------------------ Load Site -------------------*/ /******************************* User Global Variables *******************************/ /******************************* User Variable Overrides *******************************/ /*------------------ Override Mix-in -------------------*/ /******************************* Message *******************************/ .ui.message { position: relative; min-height: 1em; margin: 1em 0em; background: #efefef; padding: 1em 1.5em; line-height: 1.3; color: rgba(0, 0, 0, 0.8); -webkit-transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, -webkit-box-shadow 0.2s ease; transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; border-radius: 0.25em; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.075) inset; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.075) inset; } .ui.message:first-child { margin-top: 0em; } .ui.message:last-child { margin-bottom: 0em; } /*-------------- Content ---------------*/ /* block with headers */ .ui.message .header { display: block; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 1.3em; font-weight: bold; margin: 0em 0em 0em 0em; } /* block with paragraphs */ .ui.message p { opacity: 0.85; margin: 0.75em 0em; } .ui.message p:first-child { margin-top: 0em; } .ui.message p:last-child { margin-bottom: 0em; } .ui.message .header + p { margin-top: 0.25em; } /* Block with list */ .ui.message ul.list { opacity: 0.85; list-style-position: inside; margin: 0.5em 0em 0em; padding: 0em; } .ui.message ul.list li { position: relative; list-style-type: none; margin: 0em 0em 0.3em 1em; padding: 0em; } .ui.message ul.list li:before { position: absolute; content: '•'; left: -1em; height: 100%; vertical-align: baseline; } .ui.message ul.list li:first-child { margin-top: 0em; } /* Close Icon */ .ui.message > .close.icon { cursor: pointer; position: absolute; top: 1em; right: 0.5em; opacity: 0.7; -webkit-transition: opacity 0.1s linear ; transition: opacity 0.1s linear ; } .ui.message > .close.icon:hover { opacity: 1; } /* First / Last Element */ .ui.message > :first-child { margin-top: 0em; } .ui.message > :last-child { margin-bottom: 0em; } /******************************* States *******************************/ .ui.message.visible, .ui.header.visible { display: block !important; } .ui.message.hidden, .ui.header.hidden { display: none; } /******************************* Variations *******************************/ /*-------------- Compact ---------------*/ .ui.compact.message { display: inline-block; } /*-------------- Attached ---------------*/ .ui.attached.message { margin-left: -1px; margin-right: -1px; margin-bottom: -1px; border-radius: 0.25em 0.25em 0em 0em; -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; } .ui.attached + .ui.attached.message:not(.top):not(.bottom) { margin-top: -1px; border-radius: 0em; } .ui.bottom.attached.message { margin-top: -1px; border-radius: 0em 0em 0.25em 0.25em; } .ui.bottom.attached.message:not(:last-child) { margin-bottom: 1em; } .ui.attached.icon.message { display: block; width: auto; } /*-------------- Icon ---------------*/ .ui.icon.message { display: table; width: 100%; } .ui.icon.message > .icon:not(.close) { display: table-cell; vertical-align: middle; font-size: 2em; opacity: 0.8; } .ui.icon.message > .icon + .content { padding-left: 1.5em; } .ui.icon.message > .content { display: table-cell; vertical-align: middle; } /*-------------- Floating ---------------*/ .ui.floating.message { -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; } /*-------------- Colors ---------------*/ .ui.black.message { background-color: #555555; color: #ffffff; } /*-------------- Types ---------------*/ /* Inverted */ .ui.inverted.message, .ui.black.message { background-color: #555555; color: #ffffff; } /* Positive / Negative */ .ui.positive.message { background-color: #dff0d8; color: #3c763d; } .ui.negative.message { background-color: #f2dede; color: #a94442; } /* User Action */ .ui.info.message { background-color: #d9edf7; color: #31708f; } .ui.warning.message { background-color: #fcf8e3; color: #8a6d3b; } .ui.error.message { background-color: #f2dede; color: #a94442; } .ui.success.message { background-color: #dff0d8; color: #3c763d; } /* Colors */ .ui.blue.message { background-color: #d3e4f3; color: #0074d9; } .ui.green.message { background-color: #def2e0; color: #2ecc40; } .ui.orange.message { background-color: #f7e5d6; color: #ff851b; } .ui.pink.message { background-color: #f9cee6; color: #d9499a; } .ui.purple.message { background-color: #e0ddf5; color: #564f8a; } .ui.red.message { background-color: #f8d5d3; color: #ff4136; } .ui.teal.message { background-color: #d2f5f5; color: #39cccc; } .ui.yellow.message { background-color: #fcf5d8; color: #eab600; } /*-------------- Sizes ---------------*/ .ui.small.message { font-size: 0.875em; } .ui.message { font-size: 1em; } .ui.large.message { font-size: 1.125em; } .ui.huge.message { font-size: 1.5em; } .ui.massive.message { font-size: 2em; } /******************************* Overrides *******************************/ /******************************* User Variable Overrides *******************************/