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.

427 lines
9.9 KiB

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