|
|
/* * # 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 Default -------------------*/ /******************************* 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 */ /* 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 ---*/ /******************************* Message *******************************/ /*------------------- Elements --------------------*/ /* Header */ /* Paragraph */ /* List */ /* Icon */ /* 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, 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: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 1.2rem; font-weight: bold; margin: 0em 0em 0em 0em; } /* 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: 0em; } /* 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: 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-bottom: 0px; 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: 0px; border-radius: 0em; } .ui.bottom.attached.message { margin-top: 0px; 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: auto; } .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: #191919; 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: #191919; color: #ffffff; } .ui.blue.message { background-color: #d3e4f3; color: #0074d9; } .ui.blue.message .header { color: #0066c0; } .ui.green.message { background-color: #def2e0; color: #1ebc30; } .ui.green.message .header { color: #1aa62a; } .ui.orange.message { background-color: #f7e5d6; color: #ff851b; } .ui.orange.message .header { color: #ff7701; } .ui.pink.message { background-color: #f9cee6; color: #d9499a; } .ui.pink.message .header { color: #d5348e; } .ui.purple.message { background-color: #e0ddf5; color: #a24096; } .ui.purple.message .header { color: #903985; } .ui.red.message { background-color: #f8d5d3; color: #ff4136; } .ui.red.message .header { color: #ff291c; } .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 *******************************/
|