staticman.css 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. /* ==========================================================================
  2. Forms
  3. ========================================================================== */
  4. .staticman-comments form {
  5. margin: 0 0 5px 0;
  6. padding: 1em;
  7. background-color: #f2f3f3;
  8. }
  9. .staticman-comments form p {
  10. margin-bottom: 2.5px;
  11. }
  12. .staticman-comments form br {
  13. display: none;
  14. }
  15. .staticman-comments label, .staticman-comments input, .staticman-comments button, .staticman-comments textarea {
  16. vertical-align: baseline;
  17. vertical-align: middle;
  18. }
  19. .staticman-comments input, .staticman-comments button, .staticman-comments textarea {
  20. box-sizing: border-box;
  21. }
  22. .staticman-comments label {
  23. display: block;
  24. margin-bottom: 0.25em;
  25. color: #494e52;
  26. cursor: pointer;
  27. }
  28. .staticman-comments label small {
  29. font-size: 0.75em;
  30. }
  31. .staticman-comments label input, .staticman-comments label textarea {
  32. display: block;
  33. }
  34. .staticman-comments input, .staticman-comments textarea {
  35. display: inline-block;
  36. width: 100%;
  37. padding: 0.25em;
  38. margin-bottom: 0.5em;
  39. color: #494e52;
  40. background-color: #fff;
  41. border: #f2f3f3;
  42. border-radius: 4px;
  43. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
  44. }
  45. .staticman-comments .input-mini {
  46. width: 60px;
  47. }
  48. .staticman-comments .input-small {
  49. width: 90px;
  50. }
  51. .staticman-comments input[type="button"], .staticman-comments input[type="reset"], .staticman-comments input[type="submit"] {
  52. width: auto;
  53. height: auto;
  54. cursor: pointer;
  55. overflow: visible;
  56. }
  57. .staticman-comments textarea {
  58. resize: vertical;
  59. height: auto;
  60. overflow: auto;
  61. vertical-align: top;
  62. }
  63. .staticman-comments input[type="hidden"] {
  64. display: none;
  65. }
  66. .staticman-comments .form {
  67. position: relative;
  68. }
  69. /*
  70. Focus & active state
  71. ========================================================================== */
  72. .staticman-comments input:focus, .staticman-comments textarea:focus {
  73. border-color: #7a8288;
  74. outline: 0;
  75. outline: thin dotted \9;
  76. box-shadow: inset 0 1px 3px rgba(73, 78, 82, 0.06), 0 0 5px rgba(122, 130, 136, 0.7);
  77. }
  78. .staticman-comments input[type="file"]:focus, .staticman-comments input[type="radio"]:focus, .staticman-comments input[type="checkbox"]:focus:focus {
  79. box-shadow: none;
  80. }
  81. /*
  82. Help text
  83. ========================================================================== */
  84. .staticman-comments .form-text {
  85. color: #898c8e;
  86. }
  87. .staticman-comments .form-text {
  88. display: block;
  89. margin-bottom: 1em;
  90. line-height: 1em;
  91. }
  92. /*
  93. .form-group
  94. ========================================================================== */
  95. .staticman-comments .form-group {
  96. margin-bottom: 5px;
  97. padding: 0;
  98. border-width: 0;
  99. }
  100. /*
  101. Comments
  102. ========================================================================== */
  103. .staticman-comments .page__comments {
  104. float: left;
  105. margin-left: 0;
  106. margin-right: 0;
  107. width: 100%;
  108. clear: both;
  109. }
  110. .staticman-comments .page__comments-title {
  111. margin-top: 2rem;
  112. margin-bottom: 10px;
  113. padding-top: 2rem;
  114. border-top: 1px solid #f2f3f3;
  115. }
  116. .staticman-comments .page__comments-form {
  117. -webkit-transition: all 0.2s ease-in-out;
  118. transition: all 0.2s ease-in-out;
  119. }
  120. .staticman-comments .page__comments-form.disabled input, .staticman-comments .page__comments-form.disabled button, .staticman-comments .page__comments-form.disabled textarea, .staticman-comments .page__comments-form.disabled label {
  121. pointer-events: none;
  122. cursor: not-allowed;
  123. filter: alpha(opacity=65);
  124. box-shadow: none;
  125. opacity: 0.65;
  126. }
  127. .staticman-comments .comment {
  128. margin: 1em 0;
  129. }
  130. .staticman-comments .comment:not(:last-child) {
  131. border-bottom: 1px solid #f2f3f3;
  132. }
  133. .staticman-comments .comment__avatar-wrapper {
  134. float: left;
  135. width: 60px;
  136. height: 60px;
  137. }
  138. .staticman-comments .comment__avatar {
  139. width: 40px;
  140. height: 40px;
  141. border-radius: 50%;
  142. }
  143. .staticman-comments .comment__content-wrapper {
  144. width: calc(100% - 60px);
  145. }
  146. .staticman-comments .comment__author {
  147. margin: 0;
  148. }
  149. .staticman-comments .comment__author a {
  150. text-decoration: none;
  151. }
  152. .staticman-comments .comment__date {
  153. margin: 0;
  154. }
  155. .staticman-comments .comment__date a {
  156. text-decoration: none;
  157. }
  158. /* ==========================================================================
  159. PRINT STYLES
  160. ========================================================================== */
  161. .staticman-comments @media print {
  162. /*
  163. Hide the following elements on print
  164. ========================================================================== */
  165. .staticman-comments [hidden] {
  166. display: none;
  167. }
  168. .staticman-comments .masthead, .staticman-comments .toc, .staticman-comments .page__share, .staticman-comments .page__related, .staticman-comments .pagination, .staticman-comments .ads, .staticman-comments .page__footer, .staticman-comments .page__comments-form, .staticman-comments .author__avatar, .staticman-comments .author__content, .staticman-comments .author__urls-wrapper, .staticman-comments .nav__list, .staticman-comments .sidebar, .staticman-comments .adsbygoogle {
  169. display: none !important;
  170. height: 1px !important;
  171. }
  172. }
  173. /*
  174. Post pagination navigation links
  175. ========================================================================== */
  176. .staticman-comments .page__comments + .staticman-comments .pagination {
  177. margin-top: 2em;
  178. padding-top: 2em;
  179. border-top: 1px solid #f2f3f3;
  180. }