post.less 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. //
  2. // Posts List Post
  3. // --------------------------------------------------
  4. // Post unread border
  5. .post-new .panel-default {
  6. border-color: @brand-warning;
  7. }
  8. // Post header
  9. .post-heading {
  10. overflow: visible;
  11. height: 42px;
  12. &>* {
  13. float: left;
  14. margin-left: 0px;
  15. margin-right: 8px;
  16. &.pull-right {
  17. float: right;
  18. margin-left: 8px;
  19. margin-right: 0px;
  20. }
  21. }
  22. }
  23. .post-heading .btn-sm {
  24. margin-top: -3px;
  25. margin-bottom: 0px;
  26. padding: 4px @padding-small-horizontal;
  27. }
  28. .post-heading .btn-icon {
  29. margin: -6px 0px;
  30. margin-left: 8px;
  31. padding: 0px 3px;
  32. .material-icon {
  33. position: static;
  34. width: 28px;
  35. height: 28px;
  36. font-size: 28px;
  37. line-height: 28px;
  38. }
  39. }
  40. // Post status flags
  41. .post-status-message {
  42. padding: @padding-base-vertical @padding-base-horizontal;
  43. overflow: auto;
  44. .material-icon {
  45. float: left;
  46. font-size: 28px;
  47. }
  48. p {
  49. margin: 0px;
  50. margin-top: (28px - @line-height-computed) / 2;
  51. margin-left: 36px;
  52. }
  53. }
  54. .post-status-hidden {
  55. background-color: @brand-danger;
  56. color: #fff;
  57. }
  58. .post-status-unapproved {
  59. background-color: @brand-primary;
  60. color: #fff;
  61. }
  62. // Hidden post message
  63. .posts-list .panel-body-hidden {
  64. .lead, .text-muted {
  65. margin: 0px;
  66. }
  67. }
  68. // Invalid post message
  69. .posts-list .panel-body-invalid {
  70. .lead, .text-muted {
  71. margin: 0px;
  72. }
  73. }
  74. // Post attachments
  75. .post-attachments {
  76. @post-preview-width: 40px;
  77. td {
  78. position: @padding-base-vertical @padding-base-horizontal;
  79. }
  80. .post-attachment-preview {
  81. float: left;
  82. height: @post-preview-width;
  83. width: @post-preview-width;
  84. text-align: center;
  85. }
  86. .post-attachment {
  87. margin-left: @post-preview-width + 12px;
  88. }
  89. .post-thumbnail {
  90. display: block;
  91. background-size: cover;
  92. background-position: center;
  93. border-radius: @border-radius-small;
  94. width: @post-preview-width;
  95. height: @post-preview-width;
  96. }
  97. .material-icon {
  98. width: 28px;
  99. height: 28px;
  100. position: relative;
  101. top: 5px;
  102. font-size: 28px;
  103. line-height: 28px;
  104. &:link, &:active, &:visited, &:hover, &:focus {
  105. color: @gray-darker;
  106. text-decoration: none;
  107. }
  108. }
  109. .post-attachment-description {
  110. margin: 0px;
  111. padding: 0px;
  112. color: @text-muted;
  113. font-size: @font-size-small;
  114. }
  115. }
  116. // Post footer
  117. .post-footer {
  118. overflow: auto;
  119. .btn.pull-right {
  120. margin-left: @line-height-computed / 2;
  121. }
  122. p.pull-left {
  123. margin: 0px;
  124. margin-left: @line-height-computed / 2;
  125. padding: (@padding-base-vertical + 1px) 0px;
  126. }
  127. }
  128. // UI Preview
  129. .posts-list.ui-preview {
  130. .post-heading .ui-preview-text {
  131. position: relative;
  132. top: 0px;
  133. }
  134. }