Просмотр файла public/assets/css/main.css

Размер файла: 4.81Kb
  1. .section {
  2. background: #fff;
  3. padding: 15px;
  4. overflow: hidden;
  5. }
  6.  
  7. .section-body {
  8. padding: 0.25rem 0;
  9. margin: 0.25rem 0;
  10. overflow: hidden;
  11. }
  12.  
  13. .section-header {
  14. padding-bottom: 0.5rem;
  15. }
  16.  
  17. .section-content {
  18.  
  19. }
  20.  
  21. .section-message {
  22. overflow-wrap: break-word;
  23. }
  24.  
  25. .section-title {
  26. font-size: 1.1rem;
  27. font-weight: 600;
  28. z-index: 2;
  29. }
  30.  
  31. .section-form {
  32. background: #fff;
  33. padding: 15px;
  34. }
  35.  
  36. .section-media {
  37. padding: .6rem;
  38. margin-top: 1.25rem;
  39. margin-bottom: 1.25rem;
  40. border: 1px solid #eee;
  41. border-left: .25rem solid #d9534f;
  42. }
  43.  
  44. .avatar-default {
  45. height: 64px;
  46. width: 64px;
  47. text-align: center;
  48. font-size: 42px;
  49. display: inline-block;
  50. font-weight: bold;
  51. text-decoration: none;
  52. color: #fff;
  53. }
  54.  
  55. .avatar-mini > .avatar-default {
  56. height: 32px;
  57. width: 32px;
  58. font-size: 21px;
  59. }
  60.  
  61. .user-avatar {
  62. width: 64px;
  63. height: 64px;
  64. float: left;
  65. margin-right: 14px;
  66. }
  67.  
  68. .user-status {
  69. width: 18px;
  70. height: 18px;
  71. position: relative;
  72. border-radius: 50%;
  73. z-index: 1;
  74. border: 1px solid #fff;
  75. left: 44px;
  76. bottom: 18px;
  77. }
  78.  
  79. @media (max-width: 768px) {
  80. .section, .section-form {
  81. padding: 10px;
  82. }
  83.  
  84. .user-avatar {
  85. width: 48px;
  86. height: 48px;
  87. margin-right: 10px;
  88. }
  89.  
  90. .user-status {
  91. width: 14px;
  92. height: 14px;
  93. left: 32px;
  94. bottom: 14px;
  95. }
  96.  
  97. .avatar-default {
  98. height: 48px;
  99. width: 48px;
  100. font-size: 32px;
  101. }
  102.  
  103. .section-user {
  104. min-height: 48px;
  105. }
  106. }
  107.  
  108. .cursor-pointer {
  109. cursor: pointer;
  110. }
  111.  
  112. textarea.form-control {
  113. resize: vertical;
  114. }
  115.  
  116. .media-file {
  117. max-width: 600px;
  118. margin-bottom: 1rem;
  119. }
  120.  
  121. .blockquote:before {
  122. content: "\f10d";
  123. line-height: 1.0em;
  124. font-size: 130%;
  125. font-family: "Font Awesome 5 Free";
  126. font-weight: 900;
  127. float: left;
  128. margin-right: 10px;
  129. color: #c73401;
  130. }
  131.  
  132. .blockquote {
  133. padding: 8px 15px;
  134. font-size: 95%;
  135. background:#f7f7f9;
  136. border-left: 5px solid #ddd;
  137. font-style:italic;
  138. }
  139.  
  140. .blockquote-footer {
  141. margin: 0;
  142. }
  143.  
  144. .is-invalid .form-control {
  145. border-color: #dc3545;
  146. }
  147.  
  148. .is-invalid .form-control:focus {
  149. border-color: #dc3545;
  150. box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  151. }
  152.  
  153. .is-invalid .invalid-feedback {
  154. display: block;
  155. }
  156.  
  157. .is-valid .form-control {
  158. border-color: #28a745;
  159. }
  160.  
  161. .is-valid .form-control:focus {
  162. border-color: #28a745;
  163. box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  164. }
  165.  
  166. .spoiler {
  167. margin-bottom: 5px;
  168. }
  169.  
  170. .spoiler:before {
  171. content: "\f0da";
  172. font-family: "Font Awesome 5 Free";
  173. font-weight: 900;
  174. font-size: 17px;
  175. color: #bbb;
  176. margin: 0 5px 0 2px;
  177. }
  178.  
  179. .spoiler.spoiler-open:before {
  180. content: "\f0d7";
  181. font-family: "Font Awesome 5 Free";
  182. font-weight: 900;
  183. font-size: 17px;
  184. color: #bbb;
  185. margin: 0 5px 0 2px;
  186. }
  187.  
  188. .spoiler-title {
  189. border-bottom: 1px dashed;
  190. color: #6da3bd;
  191. cursor: pointer;
  192. font-weight: normal;
  193. }
  194.  
  195. .spoiler-text {
  196. padding: 10px 15px;
  197. margin: 5px 0;
  198. background-color: #f7f7f9;
  199. }
  200.  
  201. .hidden-text {
  202. padding: 10px 15px;
  203. margin: 5px 0;
  204. background-color: #f7f7f9;
  205. }
  206.  
  207. .post-rating-up.active {
  208. color: #fff;
  209. background-color: #78c062;
  210. padding: 0 3px;
  211. display: inline-block;
  212. border-radius: 3px;
  213. }
  214.  
  215. .post-rating-down.active {
  216. color: #fff;
  217. background-color: #f75c48;
  218. padding: 0 3px;
  219. display: inline-block;
  220. border-radius: 3px;
  221. }
  222.  
  223. .carousel-control-prev-icon,
  224. .carousel-control-next-icon {
  225. background-image: none;
  226. font-family: "Font Awesome 5 Free";
  227. font-weight: 900;
  228. font-size: 25px;
  229. height: 35px;
  230. width: 35px;
  231. background-color: rgba(0, 0, 0, 0.5);
  232. border-radius: 50%;
  233. display: flex;
  234. align-items: center;
  235. justify-content: center;
  236. }
  237.  
  238. .carousel-control-next-icon:after {
  239. content: "\f138";
  240. }
  241.  
  242. .carousel-control-prev-icon:after {
  243. content: "\f137";
  244. }
  245.  
  246. .scrollup {
  247. position: fixed;
  248. bottom: 20px;
  249. right: 20px;
  250. display: none;
  251. cursor: pointer;
  252. opacity: .2;
  253. }
  254.  
  255. .scrollup:before {
  256. content: "\f139";
  257. font-family: "Font Awesome 5 Free";
  258. font-weight: 900;
  259. font-size: 30px;
  260. }
  261.  
  262. .scrollup:hover {
  263. opacity: .5;
  264. }
  265.  
  266. .message-block {
  267. overflow: hidden;
  268. cursor: pointer;
  269. }
  270.  
  271. .message-block:hover,
  272. .message-block:focus {
  273. background-color: #eee;
  274. }
  275.  
  276. .pagination {
  277. overflow-y: hidden;
  278. }
  279.  
  280. @media (max-width: 768px) {
  281. .pagination .page-item:first-child .page-link {
  282. border-top-left-radius: 0.2rem;
  283. border-bottom-left-radius: 0.2rem;
  284. }
  285. .pagination .page-link {
  286. padding: 0.25rem 0.5rem;
  287. font-size: 0.7875rem;
  288. line-height: 1.5;
  289. }
  290. }
  291.  
  292. .performance {
  293. cursor: pointer;
  294. background-color: #f8f9fa;
  295. border: 1px solid #e1e1e8;
  296. margin: 10px 0;
  297. padding: 10px;
  298. }
  299.  
  300. .performance .list-inline {
  301. margin-bottom: 0;
  302. }
  303.  
  304. @media (max-width: 767px) {
  305. .performance {
  306. font-size: 0.75rem;
  307. }
  308. }
  309.  
  310. .stretched-link[aria-expanded=true] .treeview-indicator {
  311. transform: rotate(180deg);
  312. }
  313.  
  314. .progress {
  315. position: relative;
  316. max-width: 500px;
  317. height: 15px;
  318. margin-bottom: 10px;
  319. }
  320.  
  321. .pre-scrollable {
  322. max-height: 340px;
  323. overflow-y: scroll;
  324. }