/* * # Semantic - Message * 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 Defaults -------------------*/ /******************************* Site Settings *******************************/ /*------------------- Paths --------------------*/ /*------------------- Fonts --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*------------------- Page --------------------*/ /*------------------- 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 */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Sizes --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Derived Values --------------------*/ /* Makes sure padded grid can fit at 320px */ /* Used to match floats with text */ /* Positive / Negative Dupes */ /* Header Colors */ /* Responsive */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Active --------------------*/ /*--- Standard ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /******************************* Message *******************************/ /*------------------- Elements --------------------*/ /* Header */ /* Paragraph */ /* List */ /* Icon */ /* Close Icon */ /*------------------- Types --------------------*/ /* Icon Message */ /* Attached */ /* Floating */ /*------------------- Variations --------------------*/ /*------------------ Load Theme -------------------*/ /******************************* Site Settings *******************************/ /*------------------- Paths --------------------*/ /*------------------- Fonts --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*------------------- Page --------------------*/ /*------------------- 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 */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Sizes --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Derived Values --------------------*/ /* Makes sure padded grid can fit at 320px */ /* Used to match floats with text */ /* Positive / Negative Dupes */ /* Header Colors */ /* Responsive */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Active --------------------*/ /*--- Standard ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /******************************* Message *******************************/ /*------------------- Elements --------------------*/ /* Header */ /* Paragraph */ /* List */ /* Icon */ /* Close Icon */ /*------------------- Types --------------------*/ /* Icon Message */ /* Attached */ /* Floating */ /*------------------- Variations --------------------*/ /*------------------ Load Site -------------------*/ /******************************* User Global Variables *******************************/ /******************************* User Variable Overrides *******************************/ /*------------------ Override Loader -------------------*/ /******************************* 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, 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; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); } .ui.message:first-child { margin-top: 0em; } .ui.message:last-child { margin-bottom: 0em; } /*-------------- Content ---------------*/ /* Header */ .ui.message .header { display: block; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; margin: 0em 0em 0em 0rem; } /* Default font size */ .ui.message .header:not(.ui) { font-size: 1.1rem; } /* Paragraph */ .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; } /* List */ .ui.message ul.list { opacity: 0.85; list-style-position: inside; margin: 0.5em 0em 0em; padding: 0em; } .ui.message ul.list:first-child { margin-top: 0em; } .ui.message ul.list:last-child { margin-bottom: 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:last-child { margin-bottom: 0em; } /* Icon */ .ui.message > .icon { margin-right: 0.6em; } /* Close Icon */ .ui.message > .close.icon { cursor: pointer; position: absolute; margin: 0em; top: 1.15em; 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-bottom: -1px; border-radius: 0.25em 0.25em 0em 0em; box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; margin-left: -1px; margin-right: -1px; } .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; box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); } .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: 3em; opacity: 0.8; width: 1em; } .ui.icon.message > .content { display: table-cell; vertical-align: middle; } .ui.icon.message .icon:not(.close) + .content { padding-left: 1.5rem; } .ui.icon.message .circular.icon + .content { padding-left: 2em; } /*-------------- Floating ---------------*/ .ui.floating.message { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15), 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset; } /*-------------- Colors ---------------*/ .ui.black.message { background-color: #1b1c1d; color: #ffffff; } /*-------------- Types ---------------*/ /* Positive */ .ui.positive.message { background-color: #e4f5dd; color: #3c763d; } .ui.positive.message, .ui.attached.positive.message { box-shadow: 0px 0px 0px 1px #b7caa7 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); } .ui.positive.message .header { color: #336534; } /* Negative */ .ui.negative.message { background-color: #fae8e8; color: #a94442; } .ui.negative.message, .ui.attached.negative.message { box-shadow: 0px 0px 0px 1px #dbb1b1 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); } .ui.negative.message .header { color: #973d3b; } /* Info */ .ui.info.message { background-color: #e5f6fb; color: #337b92; } .ui.info.message, .ui.attached.info.message { box-shadow: 0px 0px 0px 1px #aad6df inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); } .ui.info.message .header { color: #2c6b7f; } /* Warning */ .ui.warning.message { background-color: #fcf8e3; color: #8a6d3b; } .ui.warning.message, .ui.attached.warning.message { box-shadow: 0px 0px 0px 1px #d3c4a5 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); } .ui.warning.message .header { color: #785f33; } /* Error */ .ui.error.message { background-color: #fae8e8; color: #a94442; } .ui.error.message, .ui.attached.error.message { box-shadow: 0px 0px 0px 1px #dbb1b1 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); } .ui.error.message .header { color: #973d3b; } /* Success */ .ui.success.message { background-color: #e4f5dd; color: #3c763d; } .ui.success.message, .ui.attached.success.message { box-shadow: 0px 0px 0px 1px #b7caa7 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); } .ui.success.message .header { color: #336534; } /* Colors */ .ui.inverted.message, .ui.black.message { background-color: #1b1c1d; color: #ffffff; } .ui.blue.message { background-color: #d3e4f3; color: #3b83c0; } .ui.blue.message .header { color: #3576ac; } .ui.green.message { background-color: #def2e0; color: #1ebc30; } .ui.green.message .header { color: #1aa62a; } .ui.orange.message { background-color: #f7e5d6; color: #e07b53; } .ui.orange.message .header { color: #dc6a3d; } .ui.pink.message { background-color: #f9cee6; color: #d9499a; } .ui.pink.message .header { color: #d5348e; } .ui.purple.message { background-color: #e0ddf5; color: #564f8a; } .ui.purple.message .header { color: #4c467a; } .ui.red.message { background-color: #f8d5d3; color: #d95c5c; } .ui.red.message .header { color: #d44747; } .ui.teal.message { background-color: #d2f5f5; color: #10a3a3; } .ui.teal.message .header { color: #0e8c8c; } .ui.yellow.message { background-color: #fcf5d8; color: #b58105; } .ui.yellow.message .header { color: #9c6f04; } /*-------------- 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 *******************************/