You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

424 lines
9.8 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Message
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Theme
  13. *******************************/
  14. /*
  15. */
  16. /*******************************
  17. Folders
  18. *******************************/
  19. /* Path to theme packages */
  20. /* Path to site override folder */
  21. /*******************************
  22. Themes
  23. *******************************/
  24. /* To override a theme for an individual element
  25. specify theme name below
  26. Be sure to update the user folder name (see README)
  27. */
  28. /* Global */
  29. /* Elements */
  30. /* Collections */
  31. /* Modules */
  32. /* Views */
  33. /*******************************
  34. Import Directives
  35. *******************************/
  36. /*------------------
  37. Load Default
  38. -------------------*/
  39. /*******************************
  40. Global Variables
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Page
  47. --------------------*/
  48. /*-------------------
  49. Breakpoints
  50. --------------------*/
  51. /*-------------------
  52. Fonts
  53. --------------------*/
  54. /*-------------------
  55. Icons
  56. --------------------*/
  57. /* Max Width of Icon */
  58. /*-------------------
  59. Easing
  60. --------------------*/
  61. /*******************************
  62. BG Colors
  63. *******************************/
  64. /*******************************
  65. Colors
  66. *******************************/
  67. /*--- Colors ---*/
  68. /*--- Neutrals ---*/
  69. /*--- Text Colors ---*/
  70. /* Preserve */
  71. /* Adjust for Legibility */
  72. /*--- Backgrounds ---*/
  73. /*-------------------
  74. Emotive Colors
  75. --------------------*/
  76. /* Positive / Negative */
  77. /* Messages */
  78. /*-------------------
  79. Text Colors
  80. --------------------*/
  81. /*-------------------
  82. Brand Colors
  83. --------------------*/
  84. /*-------------------
  85. Borders
  86. --------------------*/
  87. /*-------------------
  88. Sizes
  89. --------------------*/
  90. /*-------------------
  91. Transitions
  92. --------------------*/
  93. /*******************************
  94. States
  95. *******************************/
  96. /*-------------------
  97. Disabled
  98. --------------------*/
  99. /*-------------------
  100. Hover
  101. --------------------*/
  102. /*--- Colors ---*/
  103. /*--- Emotive ---*/
  104. /*--- Neutrals ---*/
  105. /*-------------------
  106. Down (:active)
  107. --------------------*/
  108. /*--- Colors ---*/
  109. /*--- Emotive ---*/
  110. /*--- Neutrals ---*/
  111. /*-------------------
  112. Active
  113. --------------------*/
  114. /*--- Standard ---*/
  115. /*--- Emotive ---*/
  116. /*--- Neutrals ---*/
  117. /*******************************
  118. Message
  119. *******************************/
  120. /*-------------------
  121. Elements
  122. --------------------*/
  123. /* Header */
  124. /* Paragraph */
  125. /* List */
  126. /* Close Icon */
  127. /*-------------------
  128. Types
  129. --------------------*/
  130. /* Icon Message */
  131. /* Attached */
  132. /* Floating */
  133. /*-------------------
  134. Variations
  135. --------------------*/
  136. /*------------------
  137. Load Theme
  138. -------------------*/
  139. /*------------------
  140. Load Site
  141. -------------------*/
  142. /*******************************
  143. User Global Variables
  144. *******************************/
  145. /*******************************
  146. User Variable Overrides
  147. *******************************/
  148. /*------------------
  149. Override Mix-in
  150. -------------------*/
  151. /*******************************
  152. Message
  153. *******************************/
  154. .ui.message {
  155. position: relative;
  156. min-height: 1em;
  157. margin: 1em 0em;
  158. background: #efefef;
  159. padding: 1em 1.5em;
  160. line-height: 1.3;
  161. color: rgba(0, 0, 0, 0.8);
  162. -webkit-transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, -webkit-box-shadow 0.2s ease;
  163. transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  164. border-radius: 0.25em;
  165. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.075) inset;
  166. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.075) inset;
  167. }
  168. .ui.message:first-child {
  169. margin-top: 0em;
  170. }
  171. .ui.message:last-child {
  172. margin-bottom: 0em;
  173. }
  174. /*--------------
  175. Content
  176. ---------------*/
  177. /* block with headers */
  178. .ui.message .header {
  179. display: block;
  180. font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  181. font-size: 1.3em;
  182. font-weight: bold;
  183. margin: 0em 0em 0em 0em;
  184. }
  185. /* block with paragraphs */
  186. .ui.message p {
  187. opacity: 0.85;
  188. margin: 0.75em 0em;
  189. }
  190. .ui.message p:first-child {
  191. margin-top: 0em;
  192. }
  193. .ui.message p:last-child {
  194. margin-bottom: 0em;
  195. }
  196. .ui.message .header + p {
  197. margin-top: 0.25em;
  198. }
  199. /* Block with list */
  200. .ui.message ul.list {
  201. opacity: 0.85;
  202. list-style-position: inside;
  203. margin: 0.5em 0em 0em;
  204. padding: 0em;
  205. }
  206. .ui.message ul.list li {
  207. position: relative;
  208. list-style-type: none;
  209. margin: 0em 0em 0.3em 1em;
  210. padding: 0em;
  211. }
  212. .ui.message ul.list li:before {
  213. position: absolute;
  214. content: '•';
  215. left: -1em;
  216. height: 100%;
  217. vertical-align: baseline;
  218. }
  219. .ui.message ul.list li:first-child {
  220. margin-top: 0em;
  221. }
  222. /* Close Icon */
  223. .ui.message > .close.icon {
  224. cursor: pointer;
  225. position: absolute;
  226. top: 1em;
  227. right: 0.5em;
  228. opacity: 0.7;
  229. -webkit-transition: opacity 0.1s linear
  230. ;
  231. transition: opacity 0.1s linear
  232. ;
  233. }
  234. .ui.message > .close.icon:hover {
  235. opacity: 1;
  236. }
  237. /* First / Last Element */
  238. .ui.message > :first-child {
  239. margin-top: 0em;
  240. }
  241. .ui.message > :last-child {
  242. margin-bottom: 0em;
  243. }
  244. /*******************************
  245. States
  246. *******************************/
  247. .ui.message.visible,
  248. .ui.header.visible {
  249. display: block !important;
  250. }
  251. .ui.message.hidden,
  252. .ui.header.hidden {
  253. display: none;
  254. }
  255. /*******************************
  256. Variations
  257. *******************************/
  258. /*--------------
  259. Compact
  260. ---------------*/
  261. .ui.compact.message {
  262. display: inline-block;
  263. }
  264. /*--------------
  265. Attached
  266. ---------------*/
  267. .ui.attached.message {
  268. margin-left: -1px;
  269. margin-right: -1px;
  270. margin-bottom: -1px;
  271. border-radius: 0.25em 0.25em 0em 0em;
  272. -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
  273. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
  274. }
  275. .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
  276. margin-top: -1px;
  277. border-radius: 0em;
  278. }
  279. .ui.bottom.attached.message {
  280. margin-top: -1px;
  281. border-radius: 0em 0em 0.25em 0.25em;
  282. }
  283. .ui.bottom.attached.message:not(:last-child) {
  284. margin-bottom: 1em;
  285. }
  286. .ui.attached.icon.message {
  287. display: block;
  288. width: auto;
  289. }
  290. /*--------------
  291. Icon
  292. ---------------*/
  293. .ui.icon.message {
  294. display: table;
  295. width: 100%;
  296. }
  297. .ui.icon.message > .icon:not(.close) {
  298. display: table-cell;
  299. vertical-align: middle;
  300. font-size: 2em;
  301. opacity: 0.8;
  302. }
  303. .ui.icon.message > .icon + .content {
  304. padding-left: 1.5em;
  305. }
  306. .ui.icon.message > .content {
  307. display: table-cell;
  308. vertical-align: middle;
  309. }
  310. /*--------------
  311. Floating
  312. ---------------*/
  313. .ui.floating.message {
  314. -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
  315. box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
  316. }
  317. /*--------------
  318. Colors
  319. ---------------*/
  320. .ui.black.message {
  321. background-color: #555555;
  322. color: #ffffff;
  323. }
  324. /*--------------
  325. Types
  326. ---------------*/
  327. /* Inverted */
  328. .ui.inverted.message,
  329. .ui.black.message {
  330. background-color: #555555;
  331. color: #ffffff;
  332. }
  333. /* Positive / Negative */
  334. .ui.positive.message {
  335. background-color: #dff0d8;
  336. color: #3c763d;
  337. }
  338. .ui.negative.message {
  339. background-color: #f2dede;
  340. color: #a94442;
  341. }
  342. /* User Action */
  343. .ui.info.message {
  344. background-color: #d9edf7;
  345. color: #31708f;
  346. }
  347. .ui.warning.message {
  348. background-color: #fcf8e3;
  349. color: #8a6d3b;
  350. }
  351. .ui.error.message {
  352. background-color: #f2dede;
  353. color: #a94442;
  354. }
  355. .ui.success.message {
  356. background-color: #dff0d8;
  357. color: #3c763d;
  358. }
  359. /* Colors */
  360. .ui.blue.message {
  361. background-color: #d3e4f3;
  362. color: #0074d9;
  363. }
  364. .ui.green.message {
  365. background-color: #def2e0;
  366. color: #2ecc40;
  367. }
  368. .ui.orange.message {
  369. background-color: #f7e5d6;
  370. color: #ff851b;
  371. }
  372. .ui.pink.message {
  373. background-color: #f9cee6;
  374. color: #d9499a;
  375. }
  376. .ui.purple.message {
  377. background-color: #e0ddf5;
  378. color: #564f8a;
  379. }
  380. .ui.red.message {
  381. background-color: #f8d5d3;
  382. color: #ff4136;
  383. }
  384. .ui.teal.message {
  385. background-color: #d2f5f5;
  386. color: #39cccc;
  387. }
  388. .ui.yellow.message {
  389. background-color: #fcf5d8;
  390. color: #eab600;
  391. }
  392. /*--------------
  393. Sizes
  394. ---------------*/
  395. .ui.small.message {
  396. font-size: 0.875em;
  397. }
  398. .ui.message {
  399. font-size: 1em;
  400. }
  401. .ui.large.message {
  402. font-size: 1.125em;
  403. }
  404. .ui.huge.message {
  405. font-size: 1.5em;
  406. }
  407. .ui.massive.message {
  408. font-size: 2em;
  409. }
  410. /*******************************
  411. Overrides
  412. *******************************/
  413. /*******************************
  414. User Variable Overrides
  415. *******************************/