style.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. #admin-main .admin-block .admin-addon-user-manager h2 {
  2. text-align: center;
  3. font-size: 2rem;
  4. }
  5. /**
  6. * Style chooser
  7. */
  8. .admin-addon-user-manager-style {
  9. float: right;
  10. overflow: hidden;
  11. font-size: 1.5em;
  12. margin: 0 16px;
  13. }
  14. .admin-addon-user-manager-style i {
  15. padding-left: 8px;
  16. }
  17. .admin-addon-user-manager .cell--header {
  18. font-weight: bold;
  19. }
  20. /**
  21. * Pagination
  22. */
  23. .admin-addon-user-manager-pagination {
  24. margin: 16px auto;
  25. padding: 0;
  26. text-align: center;
  27. }
  28. .admin-addon-user-manager-pagination ul {
  29. list-style: none;
  30. margin: 0 auto;
  31. overflow: hidden;
  32. clear: both;
  33. display: inline-block;
  34. padding: 0;
  35. }
  36. .admin-addon-user-manager-pagination li {
  37. padding: 4px 8px;
  38. border: 1px solid rgba(0, 0, 0, .24);
  39. float: left;
  40. }
  41. .admin-addon-user-manager-pagination li.current {
  42. background: #0082ba;
  43. color: white;
  44. }
  45. .admin-addon-user-manager-pagination li + li {
  46. border-left: 0;
  47. }
  48. /**
  49. * Grid style
  50. */
  51. .admin-addon-user-manager--grid {
  52. width: 100%;
  53. display: flex;
  54. flex-direction: row;
  55. flex-wrap: wrap;
  56. }
  57. .admin-addon-user-manager--grid .cell {
  58. flex: 0 0 100%;
  59. }
  60. .admin-addon-user-manager--grid .user {
  61. margin: 16px;
  62. border-radius: 2px;
  63. box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  64. }
  65. .admin-addon-user-manager--grid .user__avatar {
  66. display: block;
  67. width: 100%;
  68. height: 0;
  69. position: relative;
  70. padding-top: 100%;
  71. overflow: hidden;
  72. }
  73. .admin-addon-user-manager--grid .user__avatar img {
  74. position: absolute;
  75. left: 0;
  76. top: 0;
  77. width: 100%;
  78. height: auto;
  79. max-width: 100%;
  80. display: block;
  81. border-radius: 2px 2px 0 0;
  82. object-fit: cover;
  83. }
  84. .admin-addon-user-manager--grid .user__username {
  85. padding: 8px;
  86. }
  87. .admin-addon-user-manager--grid .user__email {
  88. padding: 0 8px 8px 8px;
  89. }
  90. .admin-addon-user-manager--grid .user__actions {
  91. padding: 8px;
  92. border-top: 1px solid rgba(0, 0, 0, .14);
  93. overflow: hidden;
  94. display: flex;
  95. justify-content: flex-end;
  96. }
  97. .admin-addon-user-manager--grid .user__actions > a {
  98. text-transform: uppercase;
  99. }
  100. .admin-addon-user-manager--grid .user__actions > a + a {
  101. padding-left: 8px;
  102. }
  103. #admin-main .admin-addon-user-manager--grid .user__actions > a.delete {
  104. color: #f44336;
  105. }
  106. #admin-main .admin-addon-user-manager--grid .user__actions > a.delete:hover {
  107. color: #f6685e;
  108. }
  109. @media only screen and (min-width: 480px) {
  110. .admin-addon-user-manager--grid .cell {
  111. flex: 0 0 50%;
  112. }
  113. }
  114. @media only screen and (min-width: 768px) {
  115. .admin-addon-user-manager--grid .cell {
  116. flex: 0 0 33.333%;
  117. }
  118. }
  119. @media only screen and (min-width: 1400px) {
  120. .admin-addon-user-manager--grid .cell {
  121. flex: 0 0 20%;
  122. }
  123. }
  124. /**
  125. * List style
  126. */
  127. .admin-addon-user-manager--list {
  128. width: 100%;
  129. display: flex;
  130. flex-direction: column;
  131. padding: 16px;
  132. }
  133. .admin-addon-user-manager--list .cell + .cell {
  134. border-top: 1px solid rgba(0, 0, 0, .24);
  135. padding-top: 8px;
  136. margin-top: 8px;
  137. }
  138. .admin-addon-user-manager--list .user {
  139. display: flex;
  140. flex-direction: row;
  141. }
  142. .admin-addon-user-manager--list .user > * {
  143. padding: 0 8px;
  144. }
  145. .admin-addon-user-manager--list .user__checkbox {
  146. flex: 0 0 auto;
  147. }
  148. .admin-addon-user-manager--list .user__username {
  149. flex: 0 0 25%;
  150. }
  151. .admin-addon-user-manager--list .user__email {
  152. flex: 1 0 auto;
  153. }
  154. .admin-addon-user-manager--list .user__actions {
  155. flex: 0 0 20%;
  156. }
  157. /**
  158. * Filter
  159. */
  160. .admin-addon-user-manager-filter {
  161. display: flex;
  162. }
  163. .admin-addon-user-manager-filter__input {
  164. flex: 1 0 auto;
  165. }
  166. .admin-addon-user-manager-filter__input .form-data {
  167. padding-right: 1rem;
  168. }
  169. .admin-addon-user-manager-filter__help {
  170. flex: 0 0 auto;
  171. padding-right: 2rem;
  172. }
  173. #admin-main .admin-block .admin-addon-user-manager-filter__help .button {
  174. padding-top: .425rem;
  175. padding-bottom: .425rem;
  176. }
  177. /**
  178. * Bulk
  179. */
  180. .admin-addon-user-manager-bulk-action {
  181. margin-left: 16px;
  182. }
  183. .button.warning:hover {
  184. background: red;
  185. }
  186. .remodal[data-remodal-id="modal-admin-addon-user-manager-bulk"] input[type="checkbox"] {
  187. display: none;
  188. }