_components.css 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. /* stylelint-disable property-no-vendor-prefix */
  2. /* FUNCTIONS */
  3. /*=== COMPONENTS */
  4. /*===============*/
  5. /*=== Forms */
  6. /*=== Horizontal-list */
  7. .horizontal-list {
  8. padding: 0.1rem 0;
  9. }
  10. .horizontal-list > .item:first-child {
  11. padding-left: 0.5rem;
  12. }
  13. /*=== Dropdown */
  14. .dropdown .dropdown-target:target + .btn {
  15. background-color: #d5d8db;
  16. }
  17. .dropdown-menu {
  18. margin: 9px 0 0 0;
  19. padding: 0.5rem 0 1rem 0;
  20. background: #f9fafb;
  21. font-size: 1rem;
  22. border: none;
  23. border-radius: 3px;
  24. box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
  25. text-align: left;
  26. }
  27. .dropdown-menu::after {
  28. border: none;
  29. right: 18px;
  30. }
  31. .dropdown-menu .dropdown-header,
  32. .dropdown-menu .dropdown-section .dropdown-section-title {
  33. padding: 1rem 1.5rem;
  34. font-weight: bold;
  35. text-align: left;
  36. color: #5b6871;
  37. text-transform: uppercase;
  38. letter-spacing: 1px;
  39. }
  40. .dropdown-menu .item {
  41. transition: all 0.075s ease-in-out;
  42. }
  43. .dropdown-menu .item > a,
  44. .dropdown-menu .item > span,
  45. .dropdown-menu .item > .as-link {
  46. padding: 0 2rem;
  47. color: #303136;
  48. font-size: inherit;
  49. line-height: 2.5em;
  50. }
  51. .dropdown-menu .item > a span.icon,
  52. .dropdown-menu .item > span span.icon,
  53. .dropdown-menu .item > .as-link span.icon {
  54. padding: 0 0.25rem !important;
  55. }
  56. .dropdown-menu .item > a:not(.addItem):hover,
  57. .dropdown-menu .item > .as-link:not(.addItem):hover {
  58. background: #36c;
  59. color: #fff;
  60. }
  61. .dropdown-menu .item > a:not(.addItem):hover .icon,
  62. .dropdown-menu .item > .as-link:not(.addItem):hover .icon {
  63. filter: brightness(3);
  64. }
  65. .dropdown-menu .item.dropdown-section {
  66. margin-top: 0.75rem;
  67. }
  68. .dropdown-menu .item.dropdown-section ~ .dropdown-section {
  69. border-top-color: #eff0f2;
  70. }
  71. .dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
  72. padding-left: 2rem;
  73. }
  74. .dropdown-menu .item[aria-checked=true] a::before {
  75. margin: 0 0 0 -14px;
  76. font-weight: bold;
  77. }
  78. .dropdown-menu .item ~ .dropdown-header {
  79. margin-top: 0.75rem;
  80. padding-top: 1.75rem;
  81. border-top-color: #eff0f2;
  82. }
  83. .dropdown-menu .item.separator {
  84. margin-top: 0.75rem;
  85. border-top-color: #eff0f2;
  86. }
  87. .dropdown-menu .input select, .dropdown-menu .input input {
  88. margin: 0 auto 5px;
  89. padding: 2px 5px;
  90. border-radius: 3px;
  91. }
  92. .tree .tree-folder .tree-folder-items .dropdown-menu .item {
  93. padding: 0;
  94. }
  95. .tree .tree-folder .tree-folder-items .dropdown-menu .item a,
  96. .tree .tree-folder .tree-folder-items .dropdown-menu .item button {
  97. color: #303136;
  98. }
  99. .tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover,
  100. .tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover {
  101. color: #fff;
  102. }
  103. .tree .tree-folder .tree-folder-items .dropdown-menu .item:hover {
  104. background: #36c;
  105. }
  106. /*=== Alerts */
  107. .alert {
  108. background: #f9fafb;
  109. color: #5b6871;
  110. font-size: 1rem;
  111. border: 1px solid #c5ced3;
  112. border-radius: 3px;
  113. text-shadow: 0 0 1px #eff0f2;
  114. }
  115. .alert-head {
  116. font-size: 1.15em;
  117. }
  118. .alert > a {
  119. text-decoration: underline;
  120. color: inherit;
  121. }
  122. .alert-warn {
  123. background: #fdfde0;
  124. color: #73762f;
  125. border: 1px solid #73762f33;
  126. }
  127. .alert-success {
  128. background: #cffde7;
  129. color: #0c7540;
  130. border: 1px solid #0c754033;
  131. }
  132. .alert-error {
  133. background: #fde0d8;
  134. color: #73341f;
  135. border: 1px solid #73341f33;
  136. }
  137. /*=== Pagination */
  138. .pagination {
  139. background: #eff0f2;
  140. color: #303136;
  141. }
  142. .pagination .item a {
  143. color: #303136;
  144. }
  145. #load_more.loading,
  146. #load_more.loading:hover {
  147. background: url("loader.gif") center center no-repeat #34495e;
  148. }
  149. /*=== Boxes */
  150. .box {
  151. background: #fff;
  152. border: none;
  153. border-radius: 3px;
  154. box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  155. }
  156. .box .box-title {
  157. background: #eff0f2;
  158. color: #303136;
  159. border-radius: 2px 2px 0 0;
  160. }
  161. .box .box-title .configure {
  162. padding: 5px;
  163. }
  164. .box .box-title:hover .configure .icon {
  165. vertical-align: middle;
  166. }
  167. .box .box-title:hover .configure:hover {
  168. background-color: #36c;
  169. }
  170. .box .box-title:hover .configure:hover .icon {
  171. filter: brightness(3);
  172. }
  173. .box .box-title form input {
  174. width: 85%;
  175. }
  176. .box .box-title form .dropdown {
  177. float: right;
  178. }
  179. .box .box-title form .dropdown a.dropdown-toggle {
  180. padding: 0;
  181. border-radius: 0;
  182. background-image: url(icons/more.svg);
  183. background-repeat: no-repeat;
  184. background-position: right 8px;
  185. }
  186. .box .box-title form .dropdown a.dropdown-toggle img {
  187. display: none;
  188. }
  189. .box .box-content {
  190. padding-left: 30px;
  191. }
  192. .box .box-content .item {
  193. padding: 0.25rem 0;
  194. color: #303136;
  195. font-size: 1rem;
  196. border-bottom: 1px solid #eff0f2;
  197. line-height: 1.7em;
  198. }
  199. .box .box-content .item .configure {
  200. padding: 5px;
  201. }
  202. .box .box-content .item .configure .icon {
  203. vertical-align: middle;
  204. }
  205. .box .box-content .item .configure:hover {
  206. background-color: #36c;
  207. }
  208. .box .box-content .item .configure:hover .icon {
  209. filter: brightness(3);
  210. }
  211. .box .box-content .item:last-child {
  212. border-bottom: none;
  213. }
  214. /*=== "Load more" part */
  215. #bigMarkAsRead.big {
  216. text-align: center;
  217. text-decoration: none;
  218. background: #effcfd;
  219. color: #36c;
  220. transition: all 0.15s ease-in-out;
  221. }
  222. #bigMarkAsRead.big:hover {
  223. background: #36c;
  224. color: #fff;
  225. }
  226. #bigMarkAsRead.big:hover .bigTick {
  227. filter: brightness(5);
  228. }
  229. #bigMarkAsRead.big .bigTick {
  230. margin: 0.5rem 0;
  231. background: url(icons/tick-color.svg) center no-repeat;
  232. display: inline-block;
  233. width: 64px;
  234. height: 64px;
  235. text-indent: -9999px;
  236. white-space: nowrap;
  237. }