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.

644 lines
14 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
  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 Defaults
  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. /*-------------------
  60. Accents
  61. --------------------*/
  62. /* 4px @ 14px */
  63. /* Used for differentiating neutrals */
  64. /* Used for differentiating layers */
  65. /*-------------------
  66. Grid
  67. --------------------*/
  68. /*-------------------
  69. Breakpoints
  70. --------------------*/
  71. /*******************************
  72. Power-User
  73. *******************************/
  74. /*-------------------
  75. Icons
  76. --------------------*/
  77. /* Maximum Glyph Width of Icon */
  78. /*-------------------
  79. Easing
  80. --------------------*/
  81. /*--- Neutrals ---*/
  82. /*--- Colored Backgrounds ---*/
  83. /*--- Colored Text ---*/
  84. /*--- Colored Headers ---*/
  85. /*-------------------
  86. Emotive Colors
  87. --------------------*/
  88. /* Mood */
  89. /* Status */
  90. /*-------------------
  91. Neutral Text
  92. --------------------*/
  93. /*-------------------
  94. Brand Colors
  95. --------------------*/
  96. /*-------------------
  97. Borders
  98. --------------------*/
  99. /*-------------------
  100. Sizes
  101. --------------------*/
  102. /*-------------------
  103. Transitions
  104. --------------------*/
  105. /*-------------------
  106. Derived Values
  107. --------------------*/
  108. /* Makes sure padded grid can fit at 320px */
  109. /* Used to match floats with text */
  110. /* Positive / Negative Dupes */
  111. /* Header Colors */
  112. /* Responsive */
  113. /* Columns */
  114. /*******************************
  115. States
  116. *******************************/
  117. /*-------------------
  118. Disabled
  119. --------------------*/
  120. /*-------------------
  121. Hover
  122. --------------------*/
  123. /*--- Colors ---*/
  124. /*--- Emotive ---*/
  125. /*--- Neutrals ---*/
  126. /*-------------------
  127. Down (:active)
  128. --------------------*/
  129. /*--- Colors ---*/
  130. /*--- Emotive ---*/
  131. /*--- Neutrals ---*/
  132. /*-------------------
  133. Active
  134. --------------------*/
  135. /*--- Standard ---*/
  136. /*--- Emotive ---*/
  137. /*--- Neutrals ---*/
  138. /*******************************
  139. Message
  140. *******************************/
  141. /*-------------------
  142. Elements
  143. --------------------*/
  144. /* Header */
  145. /* Paragraph */
  146. /* List */
  147. /* Icon */
  148. /* Close Icon */
  149. /*-------------------
  150. Types
  151. --------------------*/
  152. /* Icon Message */
  153. /* Attached */
  154. /* Floating */
  155. /*------------------
  156. Load Theme
  157. -------------------*/
  158. /*******************************
  159. Site Settings
  160. *******************************/
  161. /*-------------------
  162. Paths
  163. --------------------*/
  164. /*-------------------
  165. Fonts
  166. --------------------*/
  167. /*-------------------
  168. Site Colors
  169. --------------------*/
  170. /*--- Colors ---*/
  171. /*--- Light Colors ---*/
  172. /*-------------------
  173. Page
  174. --------------------*/
  175. /*-------------------
  176. Background Colors
  177. --------------------*/
  178. /*-------------------
  179. Accents
  180. --------------------*/
  181. /* 4px @ 14px */
  182. /* Used for differentiating neutrals */
  183. /* Used for differentiating layers */
  184. /*-------------------
  185. Grid
  186. --------------------*/
  187. /*-------------------
  188. Breakpoints
  189. --------------------*/
  190. /*******************************
  191. Power-User
  192. *******************************/
  193. /*-------------------
  194. Icons
  195. --------------------*/
  196. /* Maximum Glyph Width of Icon */
  197. /*-------------------
  198. Easing
  199. --------------------*/
  200. /*--- Neutrals ---*/
  201. /*--- Colored Backgrounds ---*/
  202. /*--- Colored Text ---*/
  203. /*--- Colored Headers ---*/
  204. /*-------------------
  205. Emotive Colors
  206. --------------------*/
  207. /* Mood */
  208. /* Status */
  209. /*-------------------
  210. Neutral Text
  211. --------------------*/
  212. /*-------------------
  213. Brand Colors
  214. --------------------*/
  215. /*-------------------
  216. Borders
  217. --------------------*/
  218. /*-------------------
  219. Sizes
  220. --------------------*/
  221. /*-------------------
  222. Transitions
  223. --------------------*/
  224. /*-------------------
  225. Derived Values
  226. --------------------*/
  227. /* Makes sure padded grid can fit at 320px */
  228. /* Used to match floats with text */
  229. /* Positive / Negative Dupes */
  230. /* Header Colors */
  231. /* Responsive */
  232. /* Columns */
  233. /*******************************
  234. States
  235. *******************************/
  236. /*-------------------
  237. Disabled
  238. --------------------*/
  239. /*-------------------
  240. Hover
  241. --------------------*/
  242. /*--- Colors ---*/
  243. /*--- Emotive ---*/
  244. /*--- Neutrals ---*/
  245. /*-------------------
  246. Down (:active)
  247. --------------------*/
  248. /*--- Colors ---*/
  249. /*--- Emotive ---*/
  250. /*--- Neutrals ---*/
  251. /*-------------------
  252. Active
  253. --------------------*/
  254. /*--- Standard ---*/
  255. /*--- Emotive ---*/
  256. /*--- Neutrals ---*/
  257. /*******************************
  258. Message
  259. *******************************/
  260. /*-------------------
  261. Elements
  262. --------------------*/
  263. /* Header */
  264. /* Paragraph */
  265. /* List */
  266. /* Icon */
  267. /* Close Icon */
  268. /*-------------------
  269. Types
  270. --------------------*/
  271. /* Icon Message */
  272. /* Attached */
  273. /* Floating */
  274. /*------------------
  275. Load Site
  276. -------------------*/
  277. /*******************************
  278. User Global Variables
  279. *******************************/
  280. /*******************************
  281. User Variable Overrides
  282. *******************************/
  283. /*------------------
  284. Override Loader
  285. -------------------*/
  286. /*******************************
  287. Message
  288. *******************************/
  289. .ui.message {
  290. position: relative;
  291. min-height: 1em;
  292. margin: 1em 0em;
  293. background: #efefef;
  294. padding: 1em 1.5em;
  295. line-height: 1.3;
  296. color: rgba(0, 0, 0, 0.8);
  297. -webkit-transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  298. transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  299. border-radius: 0.25em;
  300. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  301. }
  302. .ui.message:first-child {
  303. margin-top: 0em;
  304. }
  305. .ui.message:last-child {
  306. margin-bottom: 0em;
  307. }
  308. /*--------------
  309. Content
  310. ---------------*/
  311. /* Header */
  312. .ui.message .header {
  313. display: block;
  314. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  315. font-weight: bold;
  316. margin: 0em 0em 0em 0rem;
  317. }
  318. /* Default font size */
  319. .ui.message .header:not(.ui) {
  320. font-size: 1.1em;
  321. }
  322. /* Paragraph */
  323. .ui.message p {
  324. opacity: 0.85;
  325. margin: 0.75em 0em;
  326. }
  327. .ui.message p:first-child {
  328. margin-top: 0em;
  329. }
  330. .ui.message p:last-child {
  331. margin-bottom: 0em;
  332. }
  333. .ui.message .header + p {
  334. margin-top: 0.25em;
  335. }
  336. /* List */
  337. .ui.message ul.list {
  338. opacity: 0.85;
  339. list-style-position: inside;
  340. margin: 0.5em 0em 0em;
  341. padding: 0em;
  342. }
  343. .ui.message ul.list:first-child {
  344. margin-top: 0em;
  345. }
  346. .ui.message ul.list:last-child {
  347. margin-bottom: 0em;
  348. }
  349. .ui.message ul.list li {
  350. position: relative;
  351. list-style-type: none;
  352. margin: 0em 0em 0.3em 1em;
  353. padding: 0em;
  354. }
  355. .ui.message ul.list li:before {
  356. position: absolute;
  357. content: '•';
  358. left: -1em;
  359. height: 100%;
  360. vertical-align: baseline;
  361. }
  362. .ui.message ul.list li:last-child {
  363. margin-bottom: 0em;
  364. }
  365. /* Icon */
  366. .ui.message > .icon {
  367. margin-right: 0.6em;
  368. }
  369. /* Close Icon */
  370. .ui.message > .close.icon {
  371. cursor: pointer;
  372. position: absolute;
  373. margin: 0em;
  374. top: 1.15em;
  375. right: 0.5em;
  376. opacity: 0.7;
  377. -webkit-transition: opacity 0.1s linear
  378. ;
  379. transition: opacity 0.1s linear
  380. ;
  381. }
  382. .ui.message > .close.icon:hover {
  383. opacity: 1;
  384. }
  385. /* First / Last Element */
  386. .ui.message > :first-child {
  387. margin-top: 0em;
  388. }
  389. .ui.message > :last-child {
  390. margin-bottom: 0em;
  391. }
  392. /*******************************
  393. States
  394. *******************************/
  395. .ui.message.visible,
  396. .ui.header.visible {
  397. display: block !important;
  398. }
  399. .ui.message.hidden,
  400. .ui.header.hidden {
  401. display: none;
  402. }
  403. /*******************************
  404. Variations
  405. *******************************/
  406. /*--------------
  407. Compact
  408. ---------------*/
  409. .ui.compact.message {
  410. display: inline-block;
  411. }
  412. /*--------------
  413. Attached
  414. ---------------*/
  415. .ui.attached.message {
  416. margin-bottom: -1px;
  417. border-radius: 0.25em 0.25em 0em 0em;
  418. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
  419. margin-left: -1px;
  420. margin-right: -1px;
  421. }
  422. .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
  423. margin-top: -1px;
  424. border-radius: 0em;
  425. }
  426. .ui.bottom.attached.message {
  427. margin-top: -1px;
  428. border-radius: 0em 0em 0.25em 0.25em;
  429. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  430. }
  431. .ui.bottom.attached.message:not(:last-child) {
  432. margin-bottom: 1em;
  433. }
  434. .ui.attached.icon.message {
  435. display: block;
  436. width: auto;
  437. }
  438. /*--------------
  439. Icon
  440. ---------------*/
  441. .ui.icon.message {
  442. display: table;
  443. width: 100%;
  444. }
  445. .ui.icon.message > .icon:not(.close) {
  446. display: table-cell;
  447. vertical-align: middle;
  448. font-size: 3em;
  449. opacity: 0.8;
  450. width: 1em;
  451. }
  452. .ui.icon.message > .content {
  453. display: table-cell;
  454. vertical-align: middle;
  455. }
  456. .ui.icon.message .icon:not(.close) + .content {
  457. padding-left: 1.5rem;
  458. }
  459. .ui.icon.message .circular.icon + .content {
  460. padding-left: 2em;
  461. }
  462. /*--------------
  463. Floating
  464. ---------------*/
  465. .ui.floating.message {
  466. box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15), 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
  467. }
  468. /*--------------
  469. Colors
  470. ---------------*/
  471. .ui.black.message {
  472. background-color: #1b1c1d;
  473. color: #ffffff;
  474. }
  475. /*--------------
  476. Types
  477. ---------------*/
  478. /* Positive */
  479. .ui.positive.message {
  480. background-color: #e4f5dd;
  481. color: #3c763d;
  482. }
  483. .ui.positive.message,
  484. .ui.attached.positive.message {
  485. box-shadow: 0px 0px 0px 1px #b7caa7 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  486. }
  487. .ui.positive.message .header {
  488. color: #336534;
  489. }
  490. /* Negative */
  491. .ui.negative.message {
  492. background-color: #fae8e8;
  493. color: #a94442;
  494. }
  495. .ui.negative.message,
  496. .ui.attached.negative.message {
  497. box-shadow: 0px 0px 0px 1px #dbb1b1 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  498. }
  499. .ui.negative.message .header {
  500. color: #973d3b;
  501. }
  502. /* Info */
  503. .ui.info.message {
  504. background-color: #e5f6fb;
  505. color: #337b92;
  506. }
  507. .ui.info.message,
  508. .ui.attached.info.message {
  509. box-shadow: 0px 0px 0px 1px #aad6df inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  510. }
  511. .ui.info.message .header {
  512. color: #2c6b7f;
  513. }
  514. /* Warning */
  515. .ui.warning.message {
  516. background-color: #fcf8e3;
  517. color: #8a6d3b;
  518. }
  519. .ui.warning.message,
  520. .ui.attached.warning.message {
  521. box-shadow: 0px 0px 0px 1px #d3c4a5 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  522. }
  523. .ui.warning.message .header {
  524. color: #785f33;
  525. }
  526. /* Error */
  527. .ui.error.message {
  528. background-color: #fae8e8;
  529. color: #a94442;
  530. }
  531. .ui.error.message,
  532. .ui.attached.error.message {
  533. box-shadow: 0px 0px 0px 1px #dbb1b1 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  534. }
  535. .ui.error.message .header {
  536. color: #973d3b;
  537. }
  538. /* Success */
  539. .ui.success.message {
  540. background-color: #e4f5dd;
  541. color: #3c763d;
  542. }
  543. .ui.success.message,
  544. .ui.attached.success.message {
  545. box-shadow: 0px 0px 0px 1px #b7caa7 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  546. }
  547. .ui.success.message .header {
  548. color: #336534;
  549. }
  550. /* Colors */
  551. .ui.inverted.message,
  552. .ui.black.message {
  553. background-color: #1b1c1d;
  554. color: #ffffff;
  555. }
  556. .ui.blue.message {
  557. background-color: #d3e4f3;
  558. color: #3b83c0;
  559. }
  560. .ui.blue.message .header {
  561. color: #3576ac;
  562. }
  563. .ui.green.message {
  564. background-color: #def2e0;
  565. color: #1ebc30;
  566. }
  567. .ui.green.message .header {
  568. color: #1aa62a;
  569. }
  570. .ui.orange.message {
  571. background-color: #f7e5d6;
  572. color: #e07b53;
  573. }
  574. .ui.orange.message .header {
  575. color: #dc6a3d;
  576. }
  577. .ui.pink.message {
  578. background-color: #f9cee6;
  579. color: #d9499a;
  580. }
  581. .ui.pink.message .header {
  582. color: #d5348e;
  583. }
  584. .ui.purple.message {
  585. background-color: #e0ddf5;
  586. color: #564f8a;
  587. }
  588. .ui.purple.message .header {
  589. color: #4c467a;
  590. }
  591. .ui.red.message {
  592. background-color: #f8d5d3;
  593. color: #d95c5c;
  594. }
  595. .ui.red.message .header {
  596. color: #d44747;
  597. }
  598. .ui.teal.message {
  599. background-color: #d2f5f5;
  600. color: #10a3a3;
  601. }
  602. .ui.teal.message .header {
  603. color: #0e8c8c;
  604. }
  605. .ui.yellow.message {
  606. background-color: #fcf5d8;
  607. color: #b58105;
  608. }
  609. .ui.yellow.message .header {
  610. color: #9c6f04;
  611. }
  612. /*--------------
  613. Sizes
  614. ---------------*/
  615. .ui.small.message {
  616. font-size: 0.9285em;
  617. }
  618. .ui.message {
  619. font-size: 1em;
  620. }
  621. .ui.large.message {
  622. font-size: 1.1428em;
  623. }
  624. .ui.huge.message {
  625. font-size: 1.4285em;
  626. }
  627. .ui.massive.message {
  628. font-size: 1.7142em;
  629. }
  630. /*******************************
  631. Overrides
  632. *******************************/
  633. /*******************************
  634. User Variable Overrides
  635. *******************************/