Laclic
/
ActesCitoyens
關註 4
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
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.
14 Commit
3 分支
目錄樹: 785c411f98
分支列表 標籤列表
${ item.name }
Create branch ${ searchTerm }
from '785c411f98'
${ noResults }
ActesCitoyens/public/assets/semantic/components/message.css

506 line
12KB
原始文件 Blame 文件歷史 

  1. /*!

  2.  * # Semantic UI 2.4.1 - Message

  3.  * http://github.com/semantic-org/semantic-ui/

  4.  *

  5.  *

  6.  * Released under the MIT license

  7.  * http://opensource.org/licenses/MIT

  8.  *

  9.  */

  10. 

  11. 

  12. /*******************************

  13.             Message

  14. *******************************/

  15. 

  16. .ui.message {

  17.   position: relative;

  18.   min-height: 1em;

  19.   margin: 1em 0em;

  20.   background: #F8F8F9;

  21.   padding: 1em 1.5em;

  22.   line-height: 1.4285em;

  23.   color: rgba(0, 0, 0, 0.87);

  24.   -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;

  25.   transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;

  26.   transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;

  27.   transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;

  28.   border-radius: 0.28571429rem;

  29.   -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  30.           box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  31. }

  32. .ui.message:first-child {

  33.   margin-top: 0em;

  34. }

  35. .ui.message:last-child {

  36.   margin-bottom: 0em;

  37. }

  38. 

  39. /*--------------

  40.      Content

  41. ---------------*/

  42. 

  43. 

  44. /* Header */

  45. .ui.message .header {

  46.   display: block;

  47.   font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;

  48.   font-weight: bold;

  49.   margin: -0.14285714em 0em 0rem 0em;

  50. }

  51. 

  52. /* Default font size */

  53. .ui.message .header:not(.ui) {

  54.   font-size: 1.14285714em;

  55. }

  56. 

  57. /* Paragraph */

  58. .ui.message p {

  59.   opacity: 0.85;

  60.   margin: 0.75em 0em;

  61. }

  62. .ui.message p:first-child {

  63.   margin-top: 0em;

  64. }

  65. .ui.message p:last-child {

  66.   margin-bottom: 0em;

  67. }

  68. .ui.message .header + p {

  69.   margin-top: 0.25em;

  70. }

  71. 

  72. /* List */

  73. .ui.message .list:not(.ui) {

  74.   text-align: left;

  75.   padding: 0em;

  76.   opacity: 0.85;

  77.   list-style-position: inside;

  78.   margin: 0.5em 0em 0em;

  79. }

  80. .ui.message .list:not(.ui):first-child {

  81.   margin-top: 0em;

  82. }

  83. .ui.message .list:not(.ui):last-child {

  84.   margin-bottom: 0em;

  85. }

  86. .ui.message .list:not(.ui) li {

  87.   position: relative;

  88.   list-style-type: none;

  89.   margin: 0em 0em 0.3em 1em;

  90.   padding: 0em;

  91. }

  92. .ui.message .list:not(.ui) li:before {

  93.   position: absolute;

  94.   content: '•';

  95.   left: -1em;

  96.   height: 100%;

  97.   vertical-align: baseline;

  98. }

  99. .ui.message .list:not(.ui) li:last-child {

  100.   margin-bottom: 0em;

  101. }

  102. 

  103. /* Icon */

  104. .ui.message > .icon {

  105.   margin-right: 0.6em;

  106. }

  107. 

  108. /* Close Icon */

  109. .ui.message > .close.icon {

  110.   cursor: pointer;

  111.   position: absolute;

  112.   margin: 0em;

  113.   top: 0.78575em;

  114.   right: 0.5em;

  115.   opacity: 0.7;

  116.   -webkit-transition: opacity 0.1s ease;

  117.   transition: opacity 0.1s ease;

  118. }

  119. .ui.message > .close.icon:hover {

  120.   opacity: 1;

  121. }

  122. 

  123. /* First / Last Element */

  124. .ui.message > :first-child {

  125.   margin-top: 0em;

  126. }

  127. .ui.message > :last-child {

  128.   margin-bottom: 0em;

  129. }

  130. 

  131. 

  132. /*******************************

  133.             Coupling

  134. *******************************/

  135. 

  136. .ui.dropdown .menu > .message {

  137.   margin: 0px -1px;

  138. }

  139. 

  140. 

  141. /*******************************

  142.             States

  143. *******************************/

  144. 

  145. 

  146. /*--------------

  147.     Visible

  148. ---------------*/

  149. 

  150. .ui.visible.visible.visible.visible.message {

  151.   display: block;

  152. }

  153. .ui.icon.visible.visible.visible.visible.message {

  154.   display: -webkit-box;

  155.   display: -ms-flexbox;

  156.   display: flex;

  157. }

  158. 

  159. /*--------------

  160.      Hidden

  161. ---------------*/

  162. 

  163. .ui.hidden.hidden.hidden.hidden.message {

  164.   display: none;

  165. }

  166. 

  167. 

  168. /*******************************

  169.             Variations

  170. *******************************/

  171. 

  172. 

  173. /*--------------

  174.     Compact

  175. ---------------*/

  176. 

  177. .ui.compact.message {

  178.   display: inline-block;

  179. }

  180. .ui.compact.icon.message {

  181.   display: -webkit-inline-box;

  182.   display: -ms-inline-flexbox;

  183.   display: inline-flex;

  184. }

  185. 

  186. /*--------------

  187.     Attached

  188. ---------------*/

  189. 

  190. .ui.attached.message {

  191.   margin-bottom: -1px;

  192.   border-radius: 0.28571429rem 0.28571429rem 0em 0em;

  193.   -webkit-box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset;

  194.           box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset;

  195.   margin-left: -1px;

  196.   margin-right: -1px;

  197. }

  198. .ui.attached + .ui.attached.message:not(.top):not(.bottom) {

  199.   margin-top: -1px;

  200.   border-radius: 0em;

  201. }

  202. .ui.bottom.attached.message {

  203.   margin-top: -1px;

  204.   border-radius: 0em 0em 0.28571429rem 0.28571429rem;

  205.   -webkit-box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 1px 2px 0 rgba(34, 36, 38, 0.15);

  206.           box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 1px 2px 0 rgba(34, 36, 38, 0.15);

  207. }

  208. .ui.bottom.attached.message:not(:last-child) {

  209.   margin-bottom: 1em;

  210. }

  211. .ui.attached.icon.message {

  212.   width: auto;

  213. }

  214. 

  215. /*--------------

  216.       Icon

  217. ---------------*/

  218. 

  219. .ui.icon.message {

  220.   display: -webkit-box;

  221.   display: -ms-flexbox;

  222.   display: flex;

  223.   width: 100%;

  224.   -webkit-box-align: center;

  225.       -ms-flex-align: center;

  226.           align-items: center;

  227. }

  228. .ui.icon.message > .icon:not(.close) {

  229.   display: block;

  230.   -webkit-box-flex: 0;

  231.       -ms-flex: 0 0 auto;

  232.           flex: 0 0 auto;

  233.   width: auto;

  234.   line-height: 1;

  235.   vertical-align: middle;

  236.   font-size: 3em;

  237.   opacity: 0.8;

  238. }

  239. .ui.icon.message > .content {

  240.   display: block;

  241.   -webkit-box-flex: 1;

  242.       -ms-flex: 1 1 auto;

  243.           flex: 1 1 auto;

  244.   vertical-align: middle;

  245. }

  246. .ui.icon.message .icon:not(.close) + .content {

  247.   padding-left: 0rem;

  248. }

  249. .ui.icon.message .circular.icon {

  250.   width: 1em;

  251. }

  252. 

  253. /*--------------

  254.     Floating

  255. ---------------*/

  256. 

  257. .ui.floating.message {

  258.   -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);

  259.           box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);

  260. }

  261. 

  262. /*--------------

  263.      Colors

  264. ---------------*/

  265. 

  266. .ui.black.message {

  267.   background-color: #1B1C1D;

  268.   color: rgba(255, 255, 255, 0.9);

  269. }

  270. 

  271. /*--------------

  272.      Types

  273. ---------------*/

  274. 

  275. 

  276. /* Positive */

  277. .ui.positive.message {

  278.   background-color: #FCFFF5;

  279.   color: #2C662D;

  280. }

  281. .ui.positive.message,

  282. .ui.attached.positive.message {

  283.   -webkit-box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  284.           box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  285. }

  286. .ui.positive.message .header {

  287.   color: #1A531B;

  288. }

  289. 

  290. /* Negative */

  291. .ui.negative.message {

  292.   background-color: #FFF6F6;

  293.   color: #9F3A38;

  294. }

  295. .ui.negative.message,

  296. .ui.attached.negative.message {

  297.   -webkit-box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  298.           box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  299. }

  300. .ui.negative.message .header {

  301.   color: #912D2B;

  302. }

  303. 

  304. /* Info */

  305. .ui.info.message {

  306.   background-color: #F8FFFF;

  307.   color: #276F86;

  308. }

  309. .ui.info.message,

  310. .ui.attached.info.message {

  311.   -webkit-box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  312.           box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  313. }

  314. .ui.info.message .header {

  315.   color: #0E566C;

  316. }

  317. 

  318. /* Warning */

  319. .ui.warning.message {

  320.   background-color: #FFFAF3;

  321.   color: #573A08;

  322. }

  323. .ui.warning.message,

  324. .ui.attached.warning.message {

  325.   -webkit-box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  326.           box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  327. }

  328. .ui.warning.message .header {

  329.   color: #794B02;

  330. }

  331. 

  332. /* Error */

  333. .ui.error.message {

  334.   background-color: #FFF6F6;

  335.   color: #9F3A38;

  336. }

  337. .ui.error.message,

  338. .ui.attached.error.message {

  339.   -webkit-box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  340.           box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  341. }

  342. .ui.error.message .header {

  343.   color: #912D2B;

  344. }

  345. 

  346. /* Success */

  347. .ui.success.message {

  348.   background-color: #FCFFF5;

  349.   color: #2C662D;

  350. }

  351. .ui.success.message,

  352. .ui.attached.success.message {

  353.   -webkit-box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  354.           box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  355. }

  356. .ui.success.message .header {

  357.   color: #1A531B;

  358. }

  359. 

  360. /* Colors */

  361. .ui.inverted.message,

  362. .ui.black.message {

  363.   background-color: #1B1C1D;

  364.   color: rgba(255, 255, 255, 0.9);

  365. }

  366. .ui.red.message {

  367.   background-color: #FFE8E6;

  368.   color: #DB2828;

  369.   -webkit-box-shadow: 0px 0px 0px 1px #DB2828 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  370.           box-shadow: 0px 0px 0px 1px #DB2828 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  371. }

  372. .ui.red.message .header {

  373.   color: #c82121;

  374. }

  375. .ui.orange.message {

  376.   background-color: #FFEDDE;

  377.   color: #F2711C;

  378.   -webkit-box-shadow: 0px 0px 0px 1px #F2711C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  379.           box-shadow: 0px 0px 0px 1px #F2711C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  380. }

  381. .ui.orange.message .header {

  382.   color: #e7640d;

  383. }

  384. .ui.yellow.message {

  385.   background-color: #FFF8DB;

  386.   color: #B58105;

  387.   -webkit-box-shadow: 0px 0px 0px 1px #B58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  388.           box-shadow: 0px 0px 0px 1px #B58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  389. }

  390. .ui.yellow.message .header {

  391.   color: #9c6f04;

  392. }

  393. .ui.olive.message {

  394.   background-color: #FBFDEF;

  395.   color: #8ABC1E;

  396.   -webkit-box-shadow: 0px 0px 0px 1px #8ABC1E inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  397.           box-shadow: 0px 0px 0px 1px #8ABC1E inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  398. }

  399. .ui.olive.message .header {

  400.   color: #7aa61a;

  401. }

  402. .ui.green.message {

  403.   background-color: #E5F9E7;

  404.   color: #1EBC30;

  405.   -webkit-box-shadow: 0px 0px 0px 1px #1EBC30 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  406.           box-shadow: 0px 0px 0px 1px #1EBC30 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  407. }

  408. .ui.green.message .header {

  409.   color: #1aa62a;

  410. }

  411. .ui.teal.message {

  412.   background-color: #E1F7F7;

  413.   color: #10A3A3;

  414.   -webkit-box-shadow: 0px 0px 0px 1px #10A3A3 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  415.           box-shadow: 0px 0px 0px 1px #10A3A3 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  416. }

  417. .ui.teal.message .header {

  418.   color: #0e8c8c;

  419. }

  420. .ui.blue.message {

  421.   background-color: #DFF0FF;

  422.   color: #2185D0;

  423.   -webkit-box-shadow: 0px 0px 0px 1px #2185D0 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  424.           box-shadow: 0px 0px 0px 1px #2185D0 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  425. }

  426. .ui.blue.message .header {

  427.   color: #1e77ba;

  428. }

  429. .ui.violet.message {

  430.   background-color: #EAE7FF;

  431.   color: #6435C9;

  432.   -webkit-box-shadow: 0px 0px 0px 1px #6435C9 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  433.           box-shadow: 0px 0px 0px 1px #6435C9 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  434. }

  435. .ui.violet.message .header {

  436.   color: #5a30b5;

  437. }

  438. .ui.purple.message {

  439.   background-color: #F6E7FF;

  440.   color: #A333C8;

  441.   -webkit-box-shadow: 0px 0px 0px 1px #A333C8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  442.           box-shadow: 0px 0px 0px 1px #A333C8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  443. }

  444. .ui.purple.message .header {

  445.   color: #922eb4;

  446. }

  447. .ui.pink.message {

  448.   background-color: #FFE3FB;

  449.   color: #E03997;

  450.   -webkit-box-shadow: 0px 0px 0px 1px #E03997 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  451.           box-shadow: 0px 0px 0px 1px #E03997 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  452. }

  453. .ui.pink.message .header {

  454.   color: #dd238b;

  455. }

  456. .ui.brown.message {

  457.   background-color: #F1E2D3;

  458.   color: #A5673F;

  459.   -webkit-box-shadow: 0px 0px 0px 1px #A5673F inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  460.           box-shadow: 0px 0px 0px 1px #A5673F inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);

  461. }

  462. .ui.brown.message .header {

  463.   color: #935b38;

  464. }

  465. 

  466. /*--------------

  467.      Sizes

  468. ---------------*/

  469. 

  470. .ui.mini.message {

  471.   font-size: 0.78571429em;

  472. }

  473. .ui.tiny.message {

  474.   font-size: 0.85714286em;

  475. }

  476. .ui.small.message {

  477.   font-size: 0.92857143em;

  478. }

  479. .ui.message {

  480.   font-size: 1em;

  481. }

  482. .ui.large.message {

  483.   font-size: 1.14285714em;

  484. }

  485. .ui.big.message {

  486.   font-size: 1.28571429em;

  487. }

  488. .ui.huge.message {

  489.   font-size: 1.42857143em;

  490. }

  491. .ui.massive.message {

  492.   font-size: 1.71428571em;

  493. }

  494. 

  495. 

  496. /*******************************

  497.          Theme Overrides

  498. *******************************/

  499. 

  500. 

  501. 

  502. /*******************************

  503.         Site Overrides

  504. *******************************/