bongzilla

Untitled

Jul 12th, 2021
987
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* тайтл над комментариями - "N ответов на".
  2.  * также применяется для заголовка "Написать комментарий" над формой
  3.  */
  4. .commts-tittle {
  5.     font-size: 28px;
  6.     margin-bottom: 35px;
  7. }
  8.  
  9. .commts-comment {
  10.     margin-top: 15px;
  11. }
  12.  
  13. /* стили для дочерних комментариев - сбрасывает
  14.  * отступ и диск стандартного ul, плюс выравнивание margin'ов
  15.  */
  16. .commts-comment .children {
  17.     list-style-type: none;
  18.     padding-left: 0;
  19.     margin-bottom: 0;
  20.     margin-top: 15px;
  21. }
  22.  
  23. /* ul в котором лежат ВСЕ комментарии */
  24. .commts-list {
  25.     list-style-type: none;
  26.     padding: 0;
  27. }
  28.  
  29. /* враппер div всего отдельного комментария
  30.  * (применяется также на комментариях дочерних)
  31.  */
  32. .commts-content {
  33.     display: flex;
  34.     flex-direction: column;
  35.     background: #f5f8fd;
  36.     padding: 30px 30px 25px 30px;
  37.     border-top-left-radius: 55px;
  38.     border-bottom-right-radius: 20px;
  39. }
  40.  
  41. /* враппер div всей меты комментария: аватар, автор, дата и
  42.  * кнопка Ответить. нужен чтобы раскидать флексами всё
  43.  */
  44. .commts-meta-wrap {
  45.     display: flex;
  46.     flex-direction: row;
  47.     margin-bottom: 15px;
  48. }
  49.  
  50. /* враппер div мета-данных комментария: автор и дата; */
  51. .commts-meta {
  52.     display: flex;
  53.     flex-direction: column;
  54. }
  55.  
  56. /* враппер span автора комментария */
  57. .commts-author {
  58.     font-weight: bold;
  59.     margin-bottom: 10px;
  60. }
  61.  
  62. /* враппер span даты комментария */
  63. .commts-date {
  64.     font-style: italic;
  65.     color: gray;
  66. }
  67.  
  68. /* враппер div кнопки "Ответить" в комментарии */
  69. .commts-reply {
  70.     margin-left: auto;
  71. }
  72.  
  73.  
  74. /* стили кнопки "Ответить" в комментарии */
  75. .commts-reply-link {
  76.     background: transparent;
  77.     color: #222;
  78.     text-decoration: underline;
  79. }
  80.  
  81. /* враппер поля комментариев */
  82. .commts-comment-form {
  83.     margin-bottom: 25px;
  84. }
  85.  
  86. /* стили поля комментария */
  87. .commts-comment-field {
  88.     border: none;
  89.     width: 100%;
  90.     padding: 15px 20px;
  91.     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  92.     transition: box-shadow 0.3s ease;
  93. }
  94.  
  95. /* стили поля комментария в момент курсора в нем */
  96. .commts-comment-field:focus {
  97.     border: none;
  98.     outline: none;
  99.     box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  100.     transition: box-shadow 0.3s ease;
  101. }
  102.  
  103. /* враппер кнопки Отправить */
  104. .commts-submit-form {
  105.  
  106. }
  107.  
  108. /* кнопка отправки комментария */
  109. .commts-submit-button {
  110.     display: block;
  111.     margin-left: auto;
  112.     border: none;
  113.     border-radius: 35px;
  114.     padding: 15px 50px;
  115.     color: #fff;
  116.     background: #353a3d;
  117.     font-size: 16px;
  118.     cursor: pointer;
  119. }
  120.  
  121. /* текст перед полем комментариев для незарегистрированных юзеров:
  122.  * по умолчанию: Ваш адрес email не будет опубликован. Обязательные поля помечены */
  123. .commts-note-before {
  124.  
  125. }
  126.  
  127. /* поле Автор - внешний враппер в теге p */
  128. .commts-form-author {
  129.  
  130. }
  131.  
  132. /* поле Автор - сам input text */
  133. .commts-form-author-field {
  134.     width: 100%;
  135.     border: none;
  136.     padding: 15px 20px;
  137.     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  138. }
  139.  
  140. /* поле Email - внешний враппер в теге p */
  141. .commts-form-email {
  142.  
  143. }
  144.  
  145. /* поле Email - сам input text */
  146. .commts-form-email-field {
  147.     width: 100%;
  148.     border: none;
  149.     padding: 15px 20px;
  150.     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  151. }
  152.  
  153. /* поле URL - внешний враппер в теге p */
  154. .commts-form-url {
  155.  
  156. }
  157.  
  158. /* поле URL - сам input text */
  159. .commts-form-url-field {
  160.     width: 100%;
  161.     border: none;
  162.     padding: 15px 20px;
  163.     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  164. }
  165.  
  166. /* поле Соглашение с сохранением данным - внешний враппер в теге p */
  167. .commts-form-cookies {
  168.     display: flex;
  169.     align-items: center;
  170.     height: 3rem;
  171. }
  172.  
  173. /* поле Соглашение с сохранением данных - сам input checkbox */
  174. .commts-form-cookies-checkbox {
  175.     height: 20px;
  176.     width: 20px;
  177.     margin-right: 10px;
  178. }
  179.  
  180. /* label сообщения про сохранениям данных - сброс стандартного margin-bottom */
  181. .commts-form-cookies-label {
  182.     margin-bottom: 0;
  183. }
RAW Paste Data