github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/message.css (about)

     1  /*!
     2   * # Semantic UI x.x - Message
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributors
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  
    13  /*******************************
    14              Message
    15  *******************************/
    16  
    17  .ui.message {
    18    position: relative;
    19    min-height: 1em;
    20    margin: 1em 0em;
    21    background: #efefef;
    22    padding: 1em 1.5em;
    23    line-height: 1.3;
    24    color: rgba(0, 0, 0, 0.8);
    25    -webkit-transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    26            transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    27    border-radius: 0.2857rem;
    28    box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px transparent;
    29  }
    30  .ui.message:first-child {
    31    margin-top: 0em;
    32  }
    33  .ui.message:last-child {
    34    margin-bottom: 0em;
    35  }
    36  
    37  /*--------------
    38       Content
    39  ---------------*/
    40  
    41  
    42  /* Header */
    43  .ui.message .header {
    44    display: block;
    45    font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    46    font-weight: bold;
    47    margin: 0em 0em 0.5rem 0em;
    48  }
    49  
    50  /* Default font size */
    51  .ui.message .header:not(.ui) {
    52    font-size: 1.1em;
    53  }
    54  
    55  /* Paragraph */
    56  .ui.message p {
    57    opacity: 0.85;
    58    margin: 0.75em 0em;
    59  }
    60  .ui.message p:first-child {
    61    margin-top: 0em;
    62  }
    63  .ui.message p:last-child {
    64    margin-bottom: 0em;
    65  }
    66  .ui.message .header + p {
    67    margin-top: 0.25em;
    68  }
    69  
    70  /* List */
    71  .ui.message ul.list {
    72    opacity: 0.85;
    73    list-style-position: inside;
    74    margin: 0.5em 0em 0em;
    75    padding: 0em;
    76  }
    77  .ui.message ul.list:first-child {
    78    margin-top: 0em;
    79  }
    80  .ui.message ul.list:last-child {
    81    margin-bottom: 0em;
    82  }
    83  .ui.message ul.list li {
    84    position: relative;
    85    list-style-type: none;
    86    margin: 0em 0em 0.3em 1em;
    87    padding: 0em;
    88  }
    89  .ui.message ul.list li:before {
    90    position: absolute;
    91    content: '•';
    92    left: -1em;
    93    height: 100%;
    94    vertical-align: baseline;
    95  }
    96  .ui.message ul.list li:last-child {
    97    margin-bottom: 0em;
    98  }
    99  
   100  /* Icon */
   101  .ui.message > .icon {
   102    margin-right: 0.6em;
   103  }
   104  
   105  /* Close Icon */
   106  .ui.message > .close.icon {
   107    cursor: pointer;
   108    position: absolute;
   109    margin: 0em;
   110    top: 1.15em;
   111    right: 0.5em;
   112    opacity: 0.7;
   113    -webkit-transition: opacity 0.1s linear
   114    ;
   115            transition: opacity 0.1s linear
   116    ;
   117  }
   118  .ui.message > .close.icon:hover {
   119    opacity: 1;
   120  }
   121  
   122  /* First / Last Element */
   123  .ui.message > :first-child {
   124    margin-top: 0em;
   125  }
   126  .ui.message > :last-child {
   127    margin-bottom: 0em;
   128  }
   129  
   130  
   131  /*******************************
   132              States
   133  *******************************/
   134  
   135  
   136  /*--------------
   137      Visible
   138  ---------------*/
   139  
   140  .ui.visible.visible.visible.visible.message {
   141    display: block;
   142  }
   143  .ui.icon.visible.visible.visible.visible.message {
   144    display: table;
   145  }
   146  
   147  /*--------------
   148       Hidden
   149  ---------------*/
   150  
   151  .ui.hidden.hidden.hidden.hidden.message {
   152    display: none;
   153  }
   154  
   155  
   156  /*******************************
   157              Variations
   158  *******************************/
   159  
   160  
   161  /*--------------
   162      Compact
   163  ---------------*/
   164  
   165  .ui.compact.message {
   166    display: inline-block;
   167  }
   168  
   169  /*--------------
   170      Attached
   171  ---------------*/
   172  
   173  .ui.attached.message {
   174    margin-bottom: -1px;
   175    border-radius: 0.2857rem 0.2857rem 0em 0em;
   176    box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
   177    margin-left: -1px;
   178    margin-right: -1px;
   179  }
   180  .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
   181    margin-top: -1px;
   182    border-radius: 0em;
   183  }
   184  .ui.bottom.attached.message {
   185    margin-top: -1px;
   186    border-radius: 0em 0em 0.2857rem 0.2857rem;
   187    box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
   188  }
   189  .ui.bottom.attached.message:not(:last-child) {
   190    margin-bottom: 1em;
   191  }
   192  .ui.attached.icon.message {
   193    display: block;
   194    width: auto;
   195  }
   196  
   197  /*--------------
   198        Icon
   199  ---------------*/
   200  
   201  .ui.icon.message {
   202    display: table;
   203    width: 100%;
   204  }
   205  .ui.icon.message > .icon:not(.close) {
   206    display: table-cell;
   207    width: auto;
   208    vertical-align: middle;
   209    font-size: 3em;
   210    opacity: 0.8;
   211  }
   212  .ui.icon.message > .content {
   213    display: table-cell;
   214    width: 100%;
   215    vertical-align: middle;
   216  }
   217  .ui.icon.message .icon:not(.close) + .content {
   218    padding-left: 1.5rem;
   219  }
   220  .ui.icon.message .circular.icon {
   221    width: 1em;
   222  }
   223  .ui.icon.message .circular.icon + .content {
   224    width: auto;
   225    padding-left: 2em;
   226  }
   227  
   228  /*--------------
   229      Floating
   230  ---------------*/
   231  
   232  .ui.floating.message {
   233    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15), 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset;
   234  }
   235  
   236  /*--------------
   237       Colors
   238  ---------------*/
   239  
   240  .ui.black.message {
   241    background-color: #1b1c1d;
   242    color: #ffffff;
   243  }
   244  
   245  /*--------------
   246       Types
   247  ---------------*/
   248  
   249  
   250  /* Positive */
   251  .ui.positive.message {
   252    background-color: #eeffe7;
   253    color: #3c763d;
   254  }
   255  .ui.positive.message,
   256  .ui.attached.positive.message {
   257    box-shadow: 0px 0px 0px 1px #b7caa7 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
   258  }
   259  .ui.positive.message .header {
   260    color: #356e36;
   261  }
   262  
   263  /* Negative */
   264  .ui.negative.message {
   265    background-color: #fff0f0;
   266    color: #a94442;
   267  }
   268  .ui.negative.message,
   269  .ui.attached.negative.message {
   270    box-shadow: 0px 0px 0px 1px #dbb1b1 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
   271  }
   272  .ui.negative.message .header {
   273    color: #912d2b;
   274  }
   275  
   276  /* Info */
   277  .ui.info.message {
   278    background-color: #e9faff;
   279    color: #337b92;
   280  }
   281  .ui.info.message,
   282  .ui.attached.info.message {
   283    box-shadow: 0px 0px 0px 1px #aad6df inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
   284  }
   285  .ui.info.message .header {
   286    color: #297187;
   287  }
   288  
   289  /* Warning */
   290  .ui.warning.message {
   291    background-color: #fffbe6;
   292    color: #876a38;
   293  }
   294  .ui.warning.message,
   295  .ui.attached.warning.message {
   296    box-shadow: 0px 0px 0px 1px #d9caab inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
   297  }
   298  .ui.warning.message .header {
   299    color: #825c01;
   300  }
   301  
   302  /* Error */
   303  .ui.error.message {
   304    background-color: #fff0f0;
   305    color: #a94442;
   306  }
   307  .ui.error.message,
   308  .ui.attached.error.message {
   309    box-shadow: 0px 0px 0px 1px #dbb1b1 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
   310  }
   311  .ui.error.message .header {
   312    color: #912d2b;
   313  }
   314  
   315  /* Success */
   316  .ui.success.message {
   317    background-color: #eeffe7;
   318    color: #3c763d;
   319  }
   320  .ui.success.message,
   321  .ui.attached.success.message {
   322    box-shadow: 0px 0px 0px 1px #b7caa7 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
   323  }
   324  .ui.success.message .header {
   325    color: #356e36;
   326  }
   327  
   328  /* Colors */
   329  .ui.inverted.message,
   330  .ui.black.message {
   331    background-color: #1b1c1d;
   332    color: #ffffff;
   333  }
   334  .ui.blue.message {
   335    background-color: #dff0ff;
   336    color: #006e93;
   337  }
   338  .ui.blue.message .header {
   339    color: #005b7a;
   340  }
   341  .ui.green.message {
   342    background-color: #ebffed;
   343    color: #1ebc30;
   344  }
   345  .ui.green.message .header {
   346    color: #1aa62a;
   347  }
   348  .ui.orange.message {
   349    background-color: #ffedde;
   350    color: #e07b53;
   351  }
   352  .ui.orange.message .header {
   353    color: #dc6a3d;
   354  }
   355  .ui.pink.message {
   356    background-color: #ffe3fb;
   357    color: #d9499a;
   358  }
   359  .ui.pink.message .header {
   360    color: #d5348e;
   361  }
   362  .ui.purple.message {
   363    background-color: #eae7ff;
   364    color: #564f8a;
   365  }
   366  .ui.purple.message .header {
   367    color: #4c467a;
   368  }
   369  .ui.red.message {
   370    background-color: #ffe8e6;
   371    color: #d95c5c;
   372  }
   373  .ui.red.message .header {
   374    color: #d44747;
   375  }
   376  .ui.teal.message {
   377    background-color: #e9ffff;
   378    color: #10a3a3;
   379  }
   380  .ui.teal.message .header {
   381    color: #0e8c8c;
   382  }
   383  .ui.yellow.message {
   384    background-color: #fff8db;
   385    color: #b58105;
   386  }
   387  .ui.yellow.message .header {
   388    color: #9c6f04;
   389  }
   390  
   391  /*--------------
   392       Sizes
   393  ---------------*/
   394  
   395  .ui.small.message {
   396    font-size: 0.92857143em;
   397  }
   398  .ui.message {
   399    font-size: 1em;
   400  }
   401  .ui.large.message {
   402    font-size: 1.14285714em;
   403  }
   404  .ui.huge.message {
   405    font-size: 1.42857143em;
   406  }
   407  .ui.massive.message {
   408    font-size: 1.71428571em;
   409  }
   410  
   411  
   412  /*******************************
   413           Theme Overrides
   414  *******************************/
   415  
   416  
   417  
   418  /*******************************
   419      User Variable Overrides
   420  *******************************/
   421