github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/views/comment.less (about)

     1  /*!
     2   * # Semantic UI - Comment
     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              Theme
    15  *******************************/
    16  
    17  @type    : 'view';
    18  @element : 'comment';
    19  
    20  @import (multiple) '../../theme.config';
    21  
    22  /*******************************
    23              Standard
    24  *******************************/
    25  
    26  
    27  /*--------------
    28      Comments
    29  ---------------*/
    30  
    31  .ui.comments {
    32    margin: @margin;
    33    max-width: @maxWidth;
    34  }
    35  
    36  .ui.comments:first-child {
    37    margin-top: 0em;
    38  }
    39  .ui.comments:last-child {
    40    margin-bottom: 0em;
    41  }
    42  
    43  /*--------------
    44       Comment
    45  ---------------*/
    46  
    47  .ui.comments .comment {
    48    position: relative;
    49    background: @commentBackground;
    50    margin: @commentMargin;
    51    padding: @commentPadding;
    52    border: @commentBorder;
    53    border-top: @commentDivider;
    54    line-height: @commentLineHeight;
    55  }
    56  .ui.comments .comment:first-child {
    57    margin-top: @firstCommentMargin;
    58    padding-top: @firstCommentPadding;
    59  }
    60  
    61  
    62  /*--------------------
    63      Nested Comments
    64  ---------------------*/
    65  
    66  .ui.comments .comment .comments {
    67    margin: @nestedCommentsMargin;
    68    padding: @nestedCommentsPadding;
    69  }
    70  .ui.comments .comment .comments:before{
    71    position: absolute;
    72    top: 0px;
    73    left: 0px;
    74  }
    75  .ui.comments .comment .comments .comment {
    76    border: @nestedCommentBorder;
    77    border-top: @nestedCommentDivider;
    78    background: @nestedCommentBackground;
    79  }
    80  
    81  /*--------------
    82       Avatar
    83  ---------------*/
    84  
    85  .ui.comments .comment .avatar {
    86    display: @avatarDisplay;
    87    width: @avatarWidth;
    88    height: @avatarHeight;
    89    float: @avatarFloat;
    90    margin: @avatarMargin;
    91  }
    92  .ui.comments .comment img.avatar,
    93  .ui.comments .comment .avatar img {
    94    display: block;
    95    margin: 0em auto;
    96    width: 100%;
    97    height: 100%;
    98    border-radius: @avatarBorderRadius;
    99  }
   100  
   101  /*--------------
   102       Content
   103  ---------------*/
   104  
   105  .ui.comments .comment > .content {
   106    display: block;
   107  }
   108  /* If there is an avatar move content over */
   109  .ui.comments .comment > .avatar ~ .content {
   110    margin-left: @contentMargin;
   111  }
   112  
   113  /*--------------
   114       Author
   115  ---------------*/
   116  
   117  .ui.comments .comment .author {
   118    font-size: @authorFontSize;
   119    color: @authorColor;
   120    font-weight: @authorFontWeight;
   121  }
   122  .ui.comments .comment a.author {
   123    cursor: pointer;
   124  }
   125  .ui.comments .comment a.author:hover {
   126    color: @authorHoverColor;
   127  }
   128  
   129  /*--------------
   130       Metadata
   131  ---------------*/
   132  
   133  .ui.comments .comment .metadata {
   134    display: @metadataDisplay;
   135    margin-left: @metadataSpacing;
   136    color: @metadataColor;
   137    font-size: @metadataFontSize;
   138  }
   139  .ui.comments .comment .metadata > * {
   140    display: inline-block;
   141    margin: 0em @metadataContentSpacing 0em 0em;
   142  }
   143  .ui.comments .comment .metadata > :last-child {
   144    margin-right: 0em;
   145  }
   146  
   147  /*--------------------
   148       Comment Text
   149  ---------------------*/
   150  
   151  .ui.comments .comment .text {
   152    margin: @textMargin;
   153    font-size: @textFontSize;
   154    word-wrap: @textWordWrap;
   155    color: @textColor;
   156    line-height: @textLineHeight;
   157  }
   158  
   159  
   160  /*--------------------
   161       User Actions
   162  ---------------------*/
   163  
   164  .ui.comments .comment .actions {
   165    font-size: @actionFontSize;
   166  }
   167  .ui.comments .comment .actions a {
   168    cursor: pointer;
   169    display: inline-block;
   170    margin: 0em @actionContentDistance 0em 0em;
   171    color: @actionLinkColor;
   172  }
   173  .ui.comments .comment .actions a:last-child {
   174    margin-right: 0em;
   175  }
   176  .ui.comments .comment .actions a.active,
   177  .ui.comments .comment .actions a:hover {
   178    color: @actionLinkHoverColor;
   179  }
   180  
   181  /*--------------------
   182        Reply Form
   183  ---------------------*/
   184  
   185  .ui.comments > .reply.form {
   186    margin-top: @replyDistance;
   187  }
   188  .ui.comments .comment .reply.form {
   189    width: 100%;
   190    margin-top: @commentReplyDistance;
   191  }
   192  .ui.comments .reply.form textarea {
   193    font-size: @replyFontSize;
   194    height: @replyHeight;
   195  }
   196  
   197  /*******************************
   198              State
   199  *******************************/
   200  
   201  .ui.collapsed.comments,
   202  .ui.comments .collapsed.comments,
   203  .ui.comments .collapsed.comment {
   204    display: none;
   205  }
   206  
   207  
   208  /*******************************
   209             Variations
   210  *******************************/
   211  
   212  /*--------------------
   213          Threaded
   214  ---------------------*/
   215  
   216  .ui.threaded.comments .comment .comments {
   217    margin: @threadedCommentMargin;
   218    padding: @threadedCommentPadding;
   219    box-shadow: @threadedCommentBoxShadow;
   220  }
   221  
   222  /*--------------------
   223          Minimal
   224  ---------------------*/
   225  
   226  .ui.minimal.comments .comment .actions {
   227    opacity: 0;
   228    position: @minimalActionPosition;
   229    top: @minimalActionTop;
   230    right: @minimalActionRight;
   231    left: @minimalActionLeft;
   232    transition: @minimalTransition;
   233    transition-delay: @minimalTransitionDelay;
   234  }
   235  .ui.minimal.comments .comment > .content:hover > .actions {
   236    opacity: 1;
   237  }
   238  
   239  /*--------------------
   240         Sizes
   241  ---------------------*/
   242  
   243  .ui.small.comments {
   244    font-size: @small;
   245  }
   246  .ui.comments {
   247    font-size: @medium;
   248  }
   249  .ui.large.comments {
   250    font-size: @large;
   251  }
   252  .ui.huge.comments {
   253    font-size: @huge;
   254  }
   255  
   256  .loadUIOverrides();