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

     1  /*!
     2   * # Semantic UI x.x - Feed
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributorss
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  
    13  /*******************************
    14           Activity Feed
    15  *******************************/
    16  
    17  .ui.feed {
    18    margin: 1em 0em;
    19  }
    20  .ui.feed:first-child {
    21    margin-top: 0em;
    22  }
    23  .ui.feed:last-child {
    24    margin-top: 0em;
    25  }
    26  
    27  
    28  /*******************************
    29              Content
    30  *******************************/
    31  
    32  
    33  /* Event */
    34  .ui.feed > .event {
    35    display: table;
    36    width: 100%;
    37    padding: 0.5rem 0em;
    38    margin: 0em;
    39    background: none;
    40    border-top: none;
    41  }
    42  .ui.feed > .event:first-child {
    43    border-top: 0px;
    44    padding-top: 0em;
    45  }
    46  .ui.feed > .event:last-child {
    47    padding-bottom: 0em;
    48  }
    49  
    50  /* Event Label */
    51  .ui.feed > .event > .label {
    52    display: table-cell;
    53    width: 2.5em;
    54    height: 2.5em;
    55    vertical-align: top;
    56    text-align: left;
    57  }
    58  .ui.feed > .event > .label .icon {
    59    opacity: 1;
    60    font-size: 1.5em;
    61    width: 100%;
    62    padding: 0.25em;
    63    background: none;
    64    border: none;
    65    border-radius: none;
    66    color: rgba(0, 0, 0, 0.6);
    67  }
    68  .ui.feed > .event > .label img {
    69    width: 100%;
    70    height: auto;
    71    border-radius: 500rem;
    72  }
    73  .ui.feed > .event > .label + .content {
    74    padding: 0.5em 0em 0.5em 1.25em;
    75  }
    76  
    77  /* Content */
    78  .ui.feed > .event > .content {
    79    display: table-cell;
    80    vertical-align: top;
    81    text-align: left;
    82    word-wrap: break-word;
    83  }
    84  .ui.feed > .event:last-child > .content {
    85    padding-bottom: 0em;
    86  }
    87  
    88  /* Link */
    89  .ui.feed > .event > .content a {
    90    cursor: pointer;
    91  }
    92  
    93  /*--------------
    94        Date
    95  ---------------*/
    96  
    97  .ui.feed > .event > .content .date {
    98    margin: -0.5rem 0em 0em;
    99    padding: 0em;
   100    font-weight: normal;
   101    font-size: 1em;
   102    font-style: normal;
   103    color: rgba(0, 0, 0, 0.4);
   104  }
   105  
   106  /*--------------
   107       Summary
   108  ---------------*/
   109  
   110  .ui.feed > .event > .content .summary {
   111    margin: 0em;
   112    font-size: 1em;
   113    font-weight: bold;
   114    color: rgba(0, 0, 0, 0.8);
   115  }
   116  
   117  /* Summary Image */
   118  .ui.feed > .event > .content .summary img {
   119    display: inline-block;
   120    width: auto;
   121    height: 2em;
   122    margin: -0.25em 0.25em 0em 0em;
   123    border-radius: 0.25em;
   124    vertical-align: middle;
   125  }
   126  
   127  /*--------------
   128        User
   129  ---------------*/
   130  
   131  .ui.feed > .event > .content .user {
   132    display: inline-block;
   133    font-weight: bold;
   134    margin-right: 0em;
   135    vertical-align: baseline;
   136  }
   137  .ui.feed > .event > .content .user img {
   138    margin: -0.25em 0.25em 0em 0em;
   139    width: auto;
   140    height: 2em;
   141    vertical-align: middle;
   142  }
   143  
   144  /*--------------
   145     Inline Date
   146  ---------------*/
   147  
   148  
   149  /* Date inside Summary */
   150  .ui.feed > .event > .content .summary > .date {
   151    display: inline-block;
   152    float: none;
   153    font-weight: normal;
   154    font-size: 0.875em;
   155    font-style: normal;
   156    margin: 0em 0em 0em 0.5em;
   157    padding: 0em;
   158    color: rgba(0, 0, 0, 0.4);
   159  }
   160  
   161  /*--------------
   162    Extra Summary
   163  ---------------*/
   164  
   165  .ui.feed > .event > .content .extra {
   166    margin: 0.5em 0em 0em;
   167    background: none;
   168    padding: 0em;
   169    color: rgba(0, 0, 0, 0.8);
   170  }
   171  
   172  /* Images */
   173  .ui.feed > .event > .content .extra.images img {
   174    display: inline-block;
   175    margin: 0em 0.25em 0em 0em;
   176    width: 6em;
   177  }
   178  
   179  /* Text */
   180  .ui.feed > .event > .content .extra.text {
   181    padding: 0.5em 1em;
   182    border-left: 3px solid rgba(0, 0, 0, 0.2);
   183    font-size: 1em;
   184    max-width: 500px;
   185    line-height: 1.33;
   186  }
   187  
   188  /*--------------
   189        Meta
   190  ---------------*/
   191  
   192  .ui.feed > .event > .content .meta {
   193    display: inline-block;
   194    font-size: 0.875em;
   195    margin: 0.5em 0em 0em;
   196    background: none;
   197    border: none;
   198    border-radius: 0;
   199    box-shadow: none;
   200    padding: 0em;
   201    color: rgba(0, 0, 0, 0.6);
   202  }
   203  .ui.feed > .event > .content .meta > * {
   204    position: relative;
   205    margin-left: 0.75em;
   206  }
   207  .ui.feed > .event > .content .meta > *:after {
   208    content: '';
   209    color: rgba(0, 0, 0, 0.2);
   210    top: 0em;
   211    left: -1em;
   212    opacity: 1;
   213    position: absolute;
   214    vertical-align: top;
   215  }
   216  .ui.feed > .event > .content .meta .like {
   217    color: '';
   218    -webkit-transition: 0.2s color ease;
   219            transition: 0.2s color ease;
   220  }
   221  .ui.feed > .event > .content .meta .like:hover .icon {
   222    color: #ff2733;
   223  }
   224  .ui.feed > .event > .content .meta .active.like .icon {
   225    color: #ef404a;
   226  }
   227  
   228  /* First element */
   229  .ui.feed > .event > .content .meta > :first-child {
   230    margin-left: 0em;
   231  }
   232  .ui.feed > .event > .content .meta > :first-child::after {
   233    display: none;
   234  }
   235  
   236  /* Action */
   237  .ui.feed > .event > .content .meta a,
   238  .ui.feed > .event > .content .meta > .icon {
   239    cursor: pointer;
   240    opacity: 1;
   241    color: rgba(0, 0, 0, 0.5);
   242    -webkit-transition: color 0.2s ease;
   243            transition: color 0.2s ease;
   244  }
   245  .ui.feed > .event > .content .meta a:hover,
   246  .ui.feed > .event > .content .meta a:hover .icon,
   247  .ui.feed > .event > .content .meta > .icon:hover {
   248    color: rgba(0, 0, 0, 0.8);
   249  }
   250  
   251  
   252  /*******************************
   253              Variations
   254  *******************************/
   255  
   256  .ui.small.feed {
   257    font-size: 0.9em;
   258  }
   259  .ui.feed {
   260    font-size: 1em;
   261  }
   262  .ui.large.feed {
   263    font-size: 1.1em;
   264  }
   265  
   266  
   267  /*******************************
   268           Theme Overrides
   269  *******************************/
   270  
   271  
   272  
   273  /*******************************
   274      User Variable Overrides
   275  *******************************/
   276