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.

520 lines
12 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
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
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
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
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
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 2014 Contributor
  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 Settings
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Fonts
  47. --------------------*/
  48. /*-------------------
  49. Site Colors
  50. --------------------*/
  51. /*--- Colors ---*/
  52. /*--- Light Colors ---*/
  53. /*-------------------
  54. Page
  55. --------------------*/
  56. /*-------------------
  57. Background Colors
  58. --------------------*/
  59. /* Used for differentiating neutrals */
  60. /* Used for differentiating layers */
  61. /*-------------------
  62. Grid
  63. --------------------*/
  64. /*-------------------
  65. Breakpoints
  66. --------------------*/
  67. /*******************************
  68. Power-User
  69. *******************************/
  70. /*-------------------
  71. Icons
  72. --------------------*/
  73. /* Max Width of Icon */
  74. /*-------------------
  75. Easing
  76. --------------------*/
  77. /*--- Neutrals ---*/
  78. /*--- Colored Backgrounds ---*/
  79. /*--- Colored Text ---*/
  80. /*--- Colored Headers ---*/
  81. /*-------------------
  82. Emotive Colors
  83. --------------------*/
  84. /* Mood */
  85. /* Solid Background Color */
  86. /* Status */
  87. /* Darkened Headers */
  88. /*-------------------
  89. Neutral Text
  90. --------------------*/
  91. /*-------------------
  92. Brand Colors
  93. --------------------*/
  94. /*-------------------
  95. Grid Columns
  96. --------------------*/
  97. /*-------------------
  98. Borders
  99. --------------------*/
  100. /*-------------------
  101. Sizes
  102. --------------------*/
  103. /*-------------------
  104. Transitions
  105. --------------------*/
  106. /*******************************
  107. States
  108. *******************************/
  109. /*-------------------
  110. Disabled
  111. --------------------*/
  112. /*-------------------
  113. Hover
  114. --------------------*/
  115. /*--- Colors ---*/
  116. /*--- Emotive ---*/
  117. /*--- Neutrals ---*/
  118. /*-------------------
  119. Down (:active)
  120. --------------------*/
  121. /*--- Colors ---*/
  122. /*--- Emotive ---*/
  123. /*--- Neutrals ---*/
  124. /*-------------------
  125. Active
  126. --------------------*/
  127. /*--- Standard ---*/
  128. /*--- Emotive ---*/
  129. /*--- Neutrals ---*/
  130. /*******************************
  131. Message
  132. *******************************/
  133. /*-------------------
  134. Elements
  135. --------------------*/
  136. /* Header */
  137. /* Paragraph */
  138. /* List */
  139. /* Icon */
  140. /* Close Icon */
  141. /*-------------------
  142. Types
  143. --------------------*/
  144. /* Icon Message */
  145. /* Attached */
  146. /* Floating */
  147. /*-------------------
  148. Variations
  149. --------------------*/
  150. /*------------------
  151. Load Theme
  152. -------------------*/
  153. /*------------------
  154. Load Site
  155. -------------------*/
  156. /*******************************
  157. User Global Variables
  158. *******************************/
  159. /*******************************
  160. User Variable Overrides
  161. *******************************/
  162. /*------------------
  163. Override Mix-in
  164. -------------------*/
  165. /*******************************
  166. Message
  167. *******************************/
  168. .ui.message {
  169. position: relative;
  170. min-height: 1em;
  171. margin: 1em 0em;
  172. background: #efefef;
  173. padding: 1em 1.5em;
  174. line-height: 1.3;
  175. color: rgba(0, 0, 0, 0.8);
  176. -webkit-transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  177. transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  178. border-radius: 0.25em;
  179. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  180. }
  181. .ui.message:first-child {
  182. margin-top: 0em;
  183. }
  184. .ui.message:last-child {
  185. margin-bottom: 0em;
  186. }
  187. /*--------------
  188. Content
  189. ---------------*/
  190. /* Header */
  191. .ui.message .header {
  192. display: block;
  193. font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  194. font-size: 1.2rem;
  195. font-weight: bold;
  196. margin: 0em 0em 0em 0em;
  197. }
  198. /* Paragraph */
  199. .ui.message p {
  200. opacity: 0.85;
  201. margin: 0.75em 0em;
  202. }
  203. .ui.message p:first-child {
  204. margin-top: 0em;
  205. }
  206. .ui.message p:last-child {
  207. margin-bottom: 0em;
  208. }
  209. .ui.message .header + p {
  210. margin-top: 0em;
  211. }
  212. /* List */
  213. .ui.message ul.list {
  214. opacity: 0.85;
  215. list-style-position: inside;
  216. margin: 0.5em 0em 0em;
  217. padding: 0em;
  218. }
  219. .ui.message ul.list:first-child {
  220. margin-top: 0em;
  221. }
  222. .ui.message ul.list:last-child {
  223. margin-bottom: 0em;
  224. }
  225. .ui.message ul.list li {
  226. position: relative;
  227. list-style-type: none;
  228. margin: 0em 0em 0.3em 1em;
  229. padding: 0em;
  230. }
  231. .ui.message ul.list li:before {
  232. position: absolute;
  233. content: '•';
  234. left: -1em;
  235. height: 100%;
  236. vertical-align: baseline;
  237. }
  238. .ui.message ul.list li:last-child {
  239. margin-bottom: 0em;
  240. }
  241. /* Icon */
  242. .ui.message > .icon {
  243. margin-right: 0.6em;
  244. }
  245. /* Close Icon */
  246. .ui.message > .close.icon {
  247. cursor: pointer;
  248. position: absolute;
  249. margin: 0em;
  250. top: 1em;
  251. right: 0.5em;
  252. opacity: 0.7;
  253. -webkit-transition: opacity 0.1s linear
  254. ;
  255. transition: opacity 0.1s linear
  256. ;
  257. }
  258. .ui.message > .close.icon:hover {
  259. opacity: 1;
  260. }
  261. /* First / Last Element */
  262. .ui.message > :first-child {
  263. margin-top: 0em;
  264. }
  265. .ui.message > :last-child {
  266. margin-bottom: 0em;
  267. }
  268. /*******************************
  269. States
  270. *******************************/
  271. .ui.message.visible,
  272. .ui.header.visible {
  273. display: block !important;
  274. }
  275. .ui.message.hidden,
  276. .ui.header.hidden {
  277. display: none;
  278. }
  279. /*******************************
  280. Variations
  281. *******************************/
  282. /*--------------
  283. Compact
  284. ---------------*/
  285. .ui.compact.message {
  286. display: inline-block;
  287. }
  288. /*--------------
  289. Attached
  290. ---------------*/
  291. .ui.attached.message {
  292. margin-bottom: 0px;
  293. border-radius: 0.25em 0.25em 0em 0em;
  294. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
  295. margin-left: -1px;
  296. margin-right: -1px;
  297. }
  298. .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
  299. margin-top: 0px;
  300. border-radius: 0em;
  301. }
  302. .ui.bottom.attached.message {
  303. margin-top: 0px;
  304. border-radius: 0em 0em 0.25em 0.25em;
  305. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  306. }
  307. .ui.bottom.attached.message:not(:last-child) {
  308. margin-bottom: 1em;
  309. }
  310. .ui.attached.icon.message {
  311. display: block;
  312. width: auto;
  313. }
  314. /*--------------
  315. Icon
  316. ---------------*/
  317. .ui.icon.message {
  318. display: table;
  319. width: 100%;
  320. }
  321. .ui.icon.message > .icon:not(.close) {
  322. display: table-cell;
  323. vertical-align: middle;
  324. font-size: 3em;
  325. opacity: 0.8;
  326. width: auto;
  327. }
  328. .ui.icon.message > .content {
  329. display: table-cell;
  330. vertical-align: middle;
  331. }
  332. .ui.icon.message .icon:not(.close) + .content {
  333. padding-left: 1.5rem;
  334. }
  335. .ui.icon.message .circular.icon + .content {
  336. padding-left: 2em;
  337. }
  338. /*--------------
  339. Floating
  340. ---------------*/
  341. .ui.floating.message {
  342. box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15), 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
  343. }
  344. /*--------------
  345. Colors
  346. ---------------*/
  347. .ui.black.message {
  348. background-color: #191919;
  349. color: #ffffff;
  350. }
  351. /*--------------
  352. Types
  353. ---------------*/
  354. /* Positive */
  355. .ui.positive.message {
  356. background-color: #e4f5dd;
  357. color: #3c763d;
  358. }
  359. .ui.positive.message,
  360. .ui.attached.positive.message {
  361. box-shadow: 0px 0px 0px 1px #b7caa7 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  362. }
  363. .ui.positive.message .header {
  364. color: #336534;
  365. }
  366. /* Negative */
  367. .ui.negative.message {
  368. background-color: #fae8e8;
  369. color: #a94442;
  370. }
  371. .ui.negative.message,
  372. .ui.attached.negative.message {
  373. box-shadow: 0px 0px 0px 1px #dbb1b1 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  374. }
  375. .ui.negative.message .header {
  376. color: #973d3b;
  377. }
  378. /* Info */
  379. .ui.info.message {
  380. background-color: #e5f6fb;
  381. color: #337b92;
  382. }
  383. .ui.info.message,
  384. .ui.attached.info.message {
  385. box-shadow: 0px 0px 0px 1px #aad6df inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  386. }
  387. .ui.info.message .header {
  388. color: #2c6b7f;
  389. }
  390. /* Warning */
  391. .ui.warning.message {
  392. background-color: #fcf8e3;
  393. color: #8a6d3b;
  394. }
  395. .ui.warning.message,
  396. .ui.attached.warning.message {
  397. box-shadow: 0px 0px 0px 1px #d3c4a5 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  398. }
  399. .ui.warning.message .header {
  400. color: #785f33;
  401. }
  402. /* Error */
  403. .ui.error.message {
  404. background-color: #fae8e8;
  405. color: #a94442;
  406. }
  407. .ui.error.message,
  408. .ui.attached.error.message {
  409. box-shadow: 0px 0px 0px 1px #dbb1b1 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  410. }
  411. .ui.error.message .header {
  412. color: #973d3b;
  413. }
  414. /* Success */
  415. .ui.success.message {
  416. background-color: #e4f5dd;
  417. color: #3c763d;
  418. }
  419. .ui.success.message,
  420. .ui.attached.success.message {
  421. box-shadow: 0px 0px 0px 1px #b7caa7 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  422. }
  423. .ui.success.message .header {
  424. color: #336534;
  425. }
  426. /* Colors */
  427. .ui.inverted.message,
  428. .ui.black.message {
  429. background-color: #191919;
  430. color: #ffffff;
  431. }
  432. .ui.blue.message {
  433. background-color: #d3e4f3;
  434. color: #0074d9;
  435. }
  436. .ui.blue.message .header {
  437. color: #0066c0;
  438. }
  439. .ui.green.message {
  440. background-color: #def2e0;
  441. color: #1ebc30;
  442. }
  443. .ui.green.message .header {
  444. color: #1aa62a;
  445. }
  446. .ui.orange.message {
  447. background-color: #f7e5d6;
  448. color: #ff851b;
  449. }
  450. .ui.orange.message .header {
  451. color: #ff7701;
  452. }
  453. .ui.pink.message {
  454. background-color: #f9cee6;
  455. color: #d9499a;
  456. }
  457. .ui.pink.message .header {
  458. color: #d5348e;
  459. }
  460. .ui.purple.message {
  461. background-color: #e0ddf5;
  462. color: #a24096;
  463. }
  464. .ui.purple.message .header {
  465. color: #903985;
  466. }
  467. .ui.red.message {
  468. background-color: #f8d5d3;
  469. color: #ff4136;
  470. }
  471. .ui.red.message .header {
  472. color: #ff291c;
  473. }
  474. .ui.teal.message {
  475. background-color: #d2f5f5;
  476. color: #10a3a3;
  477. }
  478. .ui.teal.message .header {
  479. color: #0e8c8c;
  480. }
  481. .ui.yellow.message {
  482. background-color: #fcf5d8;
  483. color: #b58105;
  484. }
  485. .ui.yellow.message .header {
  486. color: #9c6f04;
  487. }
  488. /*--------------
  489. Sizes
  490. ---------------*/
  491. .ui.small.message {
  492. font-size: 0.875em;
  493. }
  494. .ui.message {
  495. font-size: 1em;
  496. }
  497. .ui.large.message {
  498. font-size: 1.125em;
  499. }
  500. .ui.huge.message {
  501. font-size: 1.5em;
  502. }
  503. .ui.massive.message {
  504. font-size: 2em;
  505. }
  506. /*******************************
  507. Overrides
  508. *******************************/
  509. /*******************************
  510. User Variable Overrides
  511. *******************************/