You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

551 lines
9.0 KiB

  1. .admin-wrapper {
  2. display: flex;
  3. justify-content: center;
  4. height: 100%;
  5. .sidebar-wrapper {
  6. flex: 1;
  7. height: 100%;
  8. background: $ui-base-color;
  9. display: flex;
  10. justify-content: flex-end;
  11. }
  12. .sidebar {
  13. width: 240px;
  14. height: 100%;
  15. padding: 0;
  16. overflow-y: auto;
  17. .logo {
  18. display: block;
  19. margin: 40px auto;
  20. width: 100px;
  21. height: 100px;
  22. }
  23. ul {
  24. list-style: none;
  25. border-radius: 4px 0 0 4px;
  26. overflow: hidden;
  27. margin-bottom: 20px;
  28. a {
  29. display: block;
  30. padding: 15px;
  31. color: $darker-text-color;
  32. text-decoration: none;
  33. transition: all 200ms linear;
  34. border-radius: 4px 0 0 4px;
  35. i.fa {
  36. margin-right: 5px;
  37. }
  38. &:hover {
  39. color: $primary-text-color;
  40. background-color: darken($ui-base-color, 5%);
  41. transition: all 100ms linear;
  42. }
  43. &.selected {
  44. background: darken($ui-base-color, 2%);
  45. border-radius: 4px 0 0;
  46. }
  47. }
  48. ul {
  49. background: darken($ui-base-color, 4%);
  50. border-radius: 0 0 0 4px;
  51. margin: 0;
  52. a {
  53. border: 0;
  54. padding: 15px 35px;
  55. &.selected {
  56. color: $primary-text-color;
  57. background-color: $ui-highlight-color;
  58. border-bottom: 0;
  59. border-radius: 0;
  60. &:hover {
  61. background-color: lighten($ui-highlight-color, 5%);
  62. }
  63. }
  64. }
  65. }
  66. }
  67. }
  68. .content-wrapper {
  69. flex: 2;
  70. overflow: auto;
  71. }
  72. .content {
  73. max-width: 700px;
  74. padding: 20px 15px;
  75. padding-top: 60px;
  76. padding-left: 25px;
  77. h2 {
  78. color: $secondary-text-color;
  79. font-size: 24px;
  80. line-height: 28px;
  81. font-weight: 400;
  82. margin-bottom: 40px;
  83. }
  84. h3 {
  85. color: $secondary-text-color;
  86. font-size: 20px;
  87. line-height: 28px;
  88. font-weight: 400;
  89. margin-bottom: 30px;
  90. }
  91. h4 {
  92. text-transform: uppercase;
  93. font-size: 13px;
  94. font-weight: 500;
  95. color: $darker-text-color;
  96. padding-bottom: 8px;
  97. margin-bottom: 8px;
  98. border-bottom: 1px solid lighten($ui-base-color, 8%);
  99. }
  100. h6 {
  101. font-size: 16px;
  102. color: $secondary-text-color;
  103. line-height: 28px;
  104. font-weight: 400;
  105. }
  106. & > p {
  107. font-size: 14px;
  108. line-height: 18px;
  109. color: $secondary-text-color;
  110. margin-bottom: 20px;
  111. strong {
  112. color: $primary-text-color;
  113. font-weight: 500;
  114. @each $lang in $cjk-langs {
  115. &:lang(#{$lang}) {
  116. font-weight: 700;
  117. }
  118. }
  119. }
  120. }
  121. hr {
  122. width: 100%;
  123. height: 0;
  124. border: 0;
  125. border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
  126. margin: 20px 0;
  127. &.spacer {
  128. height: 1px;
  129. border: 0;
  130. }
  131. }
  132. .muted-hint {
  133. color: $darker-text-color;
  134. a {
  135. color: $highlight-text-color;
  136. }
  137. }
  138. .positive-hint {
  139. color: $valid-value-color;
  140. font-weight: 500;
  141. }
  142. }
  143. .simple_form {
  144. max-width: 400px;
  145. &.edit_user,
  146. &.new_form_admin_settings,
  147. &.new_form_two_factor_confirmation,
  148. &.new_form_delete_confirmation,
  149. &.new_import,
  150. &.new_domain_block,
  151. &.edit_domain_block {
  152. max-width: none;
  153. }
  154. .form_two_factor_confirmation_code,
  155. .form_delete_confirmation_password {
  156. max-width: 400px;
  157. }
  158. .actions {
  159. max-width: 400px;
  160. }
  161. }
  162. @media screen and (max-width: 600px) {
  163. display: block;
  164. overflow-y: auto;
  165. -webkit-overflow-scrolling: touch;
  166. .sidebar-wrapper,
  167. .content-wrapper {
  168. flex: 0 0 auto;
  169. height: auto;
  170. overflow: initial;
  171. }
  172. .sidebar {
  173. width: 100%;
  174. padding: 10px 0;
  175. height: auto;
  176. .logo {
  177. margin: 20px auto;
  178. }
  179. }
  180. .content {
  181. padding-top: 20px;
  182. }
  183. }
  184. }
  185. .filters {
  186. display: flex;
  187. flex-wrap: wrap;
  188. .filter-subset {
  189. flex: 0 0 auto;
  190. margin: 0 40px 10px 0;
  191. &:last-child {
  192. margin-bottom: 20px;
  193. }
  194. ul {
  195. margin-top: 5px;
  196. list-style: none;
  197. li {
  198. display: inline-block;
  199. margin-right: 5px;
  200. }
  201. }
  202. strong {
  203. font-weight: 500;
  204. text-transform: uppercase;
  205. font-size: 12px;
  206. @each $lang in $cjk-langs {
  207. &:lang(#{$lang}) {
  208. font-weight: 700;
  209. }
  210. }
  211. }
  212. a {
  213. display: inline-block;
  214. color: $darker-text-color;
  215. text-decoration: none;
  216. text-transform: uppercase;
  217. font-size: 12px;
  218. font-weight: 500;
  219. border-bottom: 2px solid $ui-base-color;
  220. &:hover {
  221. color: $primary-text-color;
  222. border-bottom: 2px solid lighten($ui-base-color, 5%);
  223. }
  224. &.selected {
  225. color: $highlight-text-color;
  226. border-bottom: 2px solid $ui-highlight-color;
  227. }
  228. }
  229. }
  230. }
  231. .report-accounts {
  232. display: flex;
  233. flex-wrap: wrap;
  234. margin-bottom: 20px;
  235. }
  236. .report-accounts__item {
  237. display: flex;
  238. flex: 250px;
  239. flex-direction: column;
  240. margin: 0 5px;
  241. & > strong {
  242. display: block;
  243. margin: 0 0 10px -5px;
  244. font-weight: 500;
  245. font-size: 14px;
  246. line-height: 18px;
  247. color: $secondary-text-color;
  248. @each $lang in $cjk-langs {
  249. &:lang(#{$lang}) {
  250. font-weight: 700;
  251. }
  252. }
  253. }
  254. .account-card {
  255. flex: 1 1 auto;
  256. }
  257. }
  258. .report-status,
  259. .account-status {
  260. display: flex;
  261. margin-bottom: 10px;
  262. .activity-stream {
  263. flex: 2 0 0;
  264. margin-right: 20px;
  265. max-width: calc(100% - 60px);
  266. .entry {
  267. border-radius: 4px;
  268. }
  269. }
  270. }
  271. .report-status__actions,
  272. .account-status__actions {
  273. flex: 0 0 auto;
  274. display: flex;
  275. flex-direction: column;
  276. .icon-button {
  277. font-size: 24px;
  278. width: 24px;
  279. text-align: center;
  280. margin-bottom: 10px;
  281. }
  282. }
  283. .simple_form.new_report_note,
  284. .simple_form.new_account_moderation_note {
  285. max-width: 100%;
  286. }
  287. .batch-form-box {
  288. display: flex;
  289. flex-wrap: wrap;
  290. margin-bottom: 5px;
  291. #form_status_batch_action {
  292. margin: 0 5px 5px 0;
  293. font-size: 14px;
  294. }
  295. input.button {
  296. margin: 0 5px 5px 0;
  297. }
  298. .media-spoiler-toggle-buttons {
  299. margin-left: auto;
  300. .button {
  301. overflow: visible;
  302. margin: 0 0 5px 5px;
  303. float: right;
  304. }
  305. }
  306. }
  307. .back-link {
  308. margin-bottom: 10px;
  309. font-size: 14px;
  310. a {
  311. color: $highlight-text-color;
  312. text-decoration: none;
  313. &:hover {
  314. text-decoration: underline;
  315. }
  316. }
  317. }
  318. .spacer {
  319. flex: 1 1 auto;
  320. }
  321. .log-entry {
  322. margin-bottom: 20px;
  323. line-height: 20px;
  324. &__header {
  325. display: flex;
  326. justify-content: flex-start;
  327. align-items: center;
  328. padding: 10px;
  329. background: $ui-base-color;
  330. color: $darker-text-color;
  331. border-radius: 4px 4px 0 0;
  332. font-size: 14px;
  333. position: relative;
  334. }
  335. &__avatar {
  336. margin-right: 10px;
  337. .avatar {
  338. display: block;
  339. margin: 0;
  340. border-radius: 50%;
  341. width: 40px;
  342. height: 40px;
  343. }
  344. }
  345. &__content {
  346. max-width: calc(100% - 90px);
  347. }
  348. &__title {
  349. word-wrap: break-word;
  350. }
  351. &__timestamp {
  352. color: $dark-text-color;
  353. }
  354. &__extras {
  355. background: lighten($ui-base-color, 6%);
  356. border-radius: 0 0 4px 4px;
  357. padding: 10px;
  358. color: $darker-text-color;
  359. font-family: 'mastodon-font-monospace', monospace;
  360. font-size: 12px;
  361. word-wrap: break-word;
  362. min-height: 20px;
  363. }
  364. &__icon {
  365. font-size: 28px;
  366. margin-right: 10px;
  367. color: $dark-text-color;
  368. }
  369. &__icon__overlay {
  370. position: absolute;
  371. top: 10px;
  372. right: 10px;
  373. width: 10px;
  374. height: 10px;
  375. border-radius: 50%;
  376. &.positive {
  377. background: $success-green;
  378. }
  379. &.negative {
  380. background: lighten($error-red, 12%);
  381. }
  382. &.neutral {
  383. background: $ui-highlight-color;
  384. }
  385. }
  386. a,
  387. .username,
  388. .target {
  389. color: $secondary-text-color;
  390. text-decoration: none;
  391. font-weight: 500;
  392. }
  393. .diff-old {
  394. color: lighten($error-red, 12%);
  395. }
  396. .diff-neutral {
  397. color: $secondary-text-color;
  398. }
  399. .diff-new {
  400. color: $success-green;
  401. }
  402. }
  403. a.name-tag,
  404. .name-tag {
  405. display: flex;
  406. align-items: center;
  407. text-decoration: none;
  408. color: $secondary-text-color;
  409. .avatar {
  410. display: block;
  411. margin: 0;
  412. margin-right: 5px;
  413. border-radius: 50%;
  414. }
  415. .username {
  416. font-weight: 500;
  417. }
  418. &.suspended {
  419. .username {
  420. text-decoration: line-through;
  421. color: lighten($error-red, 12%);
  422. }
  423. .avatar {
  424. filter: grayscale(100%);
  425. opacity: 0.8;
  426. }
  427. }
  428. }
  429. .speech-bubble {
  430. margin-bottom: 20px;
  431. border-left: 4px solid $ui-highlight-color;
  432. &.positive {
  433. border-left-color: $success-green;
  434. }
  435. &.negative {
  436. border-left-color: lighten($error-red, 12%);
  437. }
  438. &__bubble {
  439. padding: 16px;
  440. padding-left: 14px;
  441. font-size: 15px;
  442. line-height: 20px;
  443. border-radius: 4px 4px 4px 0;
  444. position: relative;
  445. font-weight: 500;
  446. a {
  447. color: $darker-text-color;
  448. }
  449. }
  450. &__owner {
  451. padding: 8px;
  452. padding-left: 12px;
  453. }
  454. time {
  455. color: $dark-text-color;
  456. }
  457. }