diff.scss 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711
  1. // Notes!
  2. // Sass color functions, "darken" and "lighten" are automatically replaced.
  3. html {
  4. scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
  5. }
  6. // Change the colors of button texts
  7. .button {
  8. color: $white;
  9. &.button-alternative-2 {
  10. color: $white;
  11. }
  12. }
  13. .status-card__actions button,
  14. .status-card__actions a {
  15. color: rgba($white, 0.8);
  16. &:hover,
  17. &:active,
  18. &:focus {
  19. color: $white;
  20. }
  21. }
  22. // Change default background colors of columns
  23. .column > .scrollable,
  24. .getting-started,
  25. .column-inline-form,
  26. .error-column,
  27. .regeneration-indicator {
  28. background: $white;
  29. border: 1px solid lighten($ui-base-color, 8%);
  30. border-top: 0;
  31. }
  32. .column > .scrollable.about {
  33. border-top: 1px solid lighten($ui-base-color, 8%);
  34. }
  35. .about__meta,
  36. .about__section__title,
  37. .interaction-modal {
  38. background: $white;
  39. border: 1px solid lighten($ui-base-color, 8%);
  40. }
  41. .rules-list li::before {
  42. background: $ui-highlight-color;
  43. }
  44. .directory__card__img {
  45. background: lighten($ui-base-color, 12%);
  46. }
  47. .filter-form {
  48. background: $white;
  49. border-bottom: 1px solid lighten($ui-base-color, 8%);
  50. }
  51. .column-back-button,
  52. .column-header {
  53. background: $white;
  54. border: 1px solid lighten($ui-base-color, 8%);
  55. @media screen and (max-width: $no-gap-breakpoint) {
  56. border-top: 0;
  57. }
  58. &--slim-button {
  59. top: -50px;
  60. right: 0;
  61. }
  62. }
  63. .column-header__back-button,
  64. .column-header__button,
  65. .column-header__button.active,
  66. .account__header {
  67. background: $white;
  68. }
  69. .column-header__button.active {
  70. color: $ui-highlight-color;
  71. &:hover,
  72. &:active,
  73. &:focus {
  74. color: $ui-highlight-color;
  75. background: $white;
  76. }
  77. }
  78. .account__header__bar .avatar .account__avatar {
  79. border-color: $white;
  80. }
  81. .getting-started__footer a {
  82. color: $ui-secondary-color;
  83. text-decoration: underline;
  84. }
  85. .confirmation-modal__secondary-button,
  86. .confirmation-modal__cancel-button,
  87. .mute-modal__cancel-button,
  88. .block-modal__cancel-button {
  89. color: lighten($ui-base-color, 26%);
  90. &:hover,
  91. &:focus,
  92. &:active {
  93. color: $primary-text-color;
  94. }
  95. }
  96. .column-subheading {
  97. background: darken($ui-base-color, 4%);
  98. border-bottom: 1px solid lighten($ui-base-color, 8%);
  99. }
  100. .getting-started,
  101. .scrollable {
  102. .column-link {
  103. background: $white;
  104. border-bottom: 1px solid lighten($ui-base-color, 8%);
  105. &:hover,
  106. &:active,
  107. &:focus {
  108. background: $ui-base-color;
  109. }
  110. }
  111. }
  112. .getting-started .navigation-bar {
  113. border-top: 1px solid lighten($ui-base-color, 8%);
  114. border-bottom: 1px solid lighten($ui-base-color, 8%);
  115. @media screen and (max-width: $no-gap-breakpoint) {
  116. border-top: 0;
  117. }
  118. }
  119. .compose-form__autosuggest-wrapper,
  120. .poll__option input[type="text"],
  121. .compose-form .spoiler-input__input,
  122. .compose-form__poll-wrapper select,
  123. .search__input,
  124. .setting-text,
  125. .report-dialog-modal__textarea,
  126. .audio-player {
  127. border: 1px solid lighten($ui-base-color, 8%);
  128. }
  129. .report-dialog-modal .dialog-option .poll__input {
  130. color: $white;
  131. }
  132. .search__input {
  133. @media screen and (max-width: $no-gap-breakpoint) {
  134. border-top: 0;
  135. border-bottom: 0;
  136. }
  137. }
  138. .list-editor .search .search__input {
  139. border-top: 0;
  140. border-bottom: 0;
  141. }
  142. .compose-form__poll-wrapper select {
  143. background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px;
  144. }
  145. .compose-form__poll-wrapper,
  146. .compose-form__poll-wrapper .poll__footer {
  147. border-top-color: lighten($ui-base-color, 8%);
  148. }
  149. .notification__filter-bar {
  150. border: 1px solid lighten($ui-base-color, 8%);
  151. border-top: 0;
  152. }
  153. .compose-form .compose-form__buttons-wrapper {
  154. background: $ui-base-color;
  155. border: 1px solid lighten($ui-base-color, 8%);
  156. border-top: 0;
  157. }
  158. .drawer__header,
  159. .drawer__inner {
  160. background: $white;
  161. border: 1px solid lighten($ui-base-color, 8%);
  162. }
  163. .drawer__inner__mastodon {
  164. background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
  165. }
  166. // Change the colors used in compose-form
  167. .compose-form {
  168. .compose-form__modifiers {
  169. .compose-form__upload__actions .icon-button,
  170. .compose-form__upload__warning .icon-button {
  171. color: lighten($white, 7%);
  172. &:active,
  173. &:focus,
  174. &:hover {
  175. color: $white;
  176. }
  177. }
  178. }
  179. .compose-form__buttons-wrapper {
  180. background: darken($ui-base-color, 6%);
  181. }
  182. .autosuggest-textarea__suggestions {
  183. background: darken($ui-base-color, 6%);
  184. }
  185. .autosuggest-textarea__suggestions__item {
  186. &:hover,
  187. &:focus,
  188. &:active,
  189. &.selected {
  190. background: lighten($ui-base-color, 4%);
  191. }
  192. }
  193. }
  194. .emoji-mart-bar {
  195. border-color: lighten($ui-base-color, 4%);
  196. &:first-child {
  197. background: darken($ui-base-color, 6%);
  198. }
  199. }
  200. .emoji-mart-search input {
  201. background: rgba($ui-base-color, 0.3);
  202. border-color: $ui-base-color;
  203. }
  204. // Change the background colors of statuses
  205. .focusable:focus {
  206. background: $ui-base-color;
  207. }
  208. .detailed-status,
  209. .detailed-status__action-bar {
  210. background: $white;
  211. }
  212. // Change the background colors of status__content__spoiler-link
  213. .reply-indicator__content .status__content__spoiler-link,
  214. .status__content .status__content__spoiler-link {
  215. background: $ui-base-color;
  216. &:hover,
  217. &:focus {
  218. background: lighten($ui-base-color, 4%);
  219. }
  220. }
  221. // Change the background colors of media and video spoilers
  222. .media-spoiler,
  223. .video-player__spoiler {
  224. background: $ui-base-color;
  225. }
  226. .privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
  227. color: $white;
  228. }
  229. .account-gallery__item a {
  230. background-color: $ui-base-color;
  231. }
  232. // Change the colors used in the dropdown menu
  233. .dropdown-menu {
  234. background: $white;
  235. &__arrow {
  236. &.left {
  237. border-left-color: $white;
  238. }
  239. &.top {
  240. border-top-color: $white;
  241. }
  242. &.bottom {
  243. border-bottom-color: $white;
  244. }
  245. &.right {
  246. border-right-color: $white;
  247. }
  248. }
  249. &__item {
  250. a,
  251. button {
  252. background: $white;
  253. color: $darker-text-color;
  254. }
  255. }
  256. }
  257. // Change the text colors on inverted background
  258. .privacy-dropdown__option.active,
  259. .privacy-dropdown__option:hover,
  260. .privacy-dropdown__option.active .privacy-dropdown__option__content,
  261. .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
  262. .privacy-dropdown__option:hover .privacy-dropdown__option__content,
  263. .privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
  264. .dropdown-menu__item a:active,
  265. .dropdown-menu__item a:focus,
  266. .dropdown-menu__item a:hover,
  267. .actions-modal ul li:not(:empty) a.active,
  268. .actions-modal ul li:not(:empty) a.active button,
  269. .actions-modal ul li:not(:empty) a:active,
  270. .actions-modal ul li:not(:empty) a:active button,
  271. .actions-modal ul li:not(:empty) a:focus,
  272. .actions-modal ul li:not(:empty) a:focus button,
  273. .actions-modal ul li:not(:empty) a:hover,
  274. .actions-modal ul li:not(:empty) a:hover button,
  275. .language-dropdown__dropdown__results__item.active,
  276. .admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
  277. .simple_form .block-button,
  278. .simple_form .button,
  279. .simple_form button {
  280. color: $white;
  281. }
  282. .language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item__common-name {
  283. color: lighten($ui-base-color, 8%);
  284. }
  285. .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name {
  286. color: darken($ui-base-color, 12%);
  287. }
  288. .dropdown-menu__separator,
  289. .dropdown-menu__item.edited-timestamp__history__item,
  290. .dropdown-menu__container__header,
  291. .compare-history-modal .report-modal__target,
  292. .report-dialog-modal .poll__option.dialog-option {
  293. border-bottom-color: lighten($ui-base-color, 4%);
  294. }
  295. .report-dialog-modal__container {
  296. border-top-color: lighten($ui-base-color, 4%);
  297. }
  298. // Change the background colors of modals
  299. .actions-modal,
  300. .boost-modal,
  301. .confirmation-modal,
  302. .mute-modal,
  303. .block-modal,
  304. .report-modal,
  305. .report-dialog-modal,
  306. .embed-modal,
  307. .error-modal,
  308. .onboarding-modal,
  309. .compare-history-modal,
  310. .report-modal__comment .setting-text__wrapper,
  311. .report-modal__comment .setting-text,
  312. .announcements,
  313. .picture-in-picture__header,
  314. .picture-in-picture__footer,
  315. .reactions-bar__item {
  316. background: $white;
  317. border: 1px solid lighten($ui-base-color, 8%);
  318. }
  319. .reactions-bar__item:hover,
  320. .reactions-bar__item:focus,
  321. .reactions-bar__item:active,
  322. .language-dropdown__dropdown__results__item:hover,
  323. .language-dropdown__dropdown__results__item:focus,
  324. .language-dropdown__dropdown__results__item:active {
  325. background-color: $ui-base-color;
  326. }
  327. .reactions-bar__item.active {
  328. background-color: mix($white, $ui-highlight-color, 80%);
  329. border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%);
  330. }
  331. .media-modal__overlay .picture-in-picture__footer {
  332. border: 0;
  333. }
  334. .picture-in-picture__header {
  335. border-bottom: 0;
  336. }
  337. .announcements,
  338. .picture-in-picture__footer {
  339. border-top: 0;
  340. }
  341. .icon-with-badge__badge {
  342. border-color: $white;
  343. color: $white;
  344. }
  345. .report-modal__comment {
  346. border-right-color: lighten($ui-base-color, 8%);
  347. }
  348. .report-modal__container {
  349. border-top-color: lighten($ui-base-color, 8%);
  350. }
  351. .column-header__collapsible-inner {
  352. background: darken($ui-base-color, 4%);
  353. border: 1px solid lighten($ui-base-color, 8%);
  354. border-top: 0;
  355. }
  356. .dashboard__quick-access,
  357. .focal-point__preview strong,
  358. .admin-wrapper .content__heading__tabs a.selected {
  359. color: $white;
  360. }
  361. .button.button-tertiary {
  362. &:hover,
  363. &:focus,
  364. &:active {
  365. color: $white;
  366. }
  367. }
  368. .button.button-secondary {
  369. border-color: $darker-text-color;
  370. color: $darker-text-color;
  371. &:hover,
  372. &:focus,
  373. &:active {
  374. border-color: darken($darker-text-color, 8%);
  375. color: darken($darker-text-color, 8%);
  376. }
  377. }
  378. .flash-message.warning {
  379. color: lighten($gold-star, 16%);
  380. }
  381. .boost-modal__action-bar,
  382. .confirmation-modal__action-bar,
  383. .mute-modal__action-bar,
  384. .block-modal__action-bar,
  385. .onboarding-modal__paginator,
  386. .error-modal__footer {
  387. background: darken($ui-base-color, 6%);
  388. .onboarding-modal__nav,
  389. .error-modal__nav {
  390. &:hover,
  391. &:focus,
  392. &:active {
  393. background-color: darken($ui-base-color, 12%);
  394. }
  395. }
  396. }
  397. .display-case__case {
  398. background: $white;
  399. }
  400. .embed-modal .embed-modal__container .embed-modal__html {
  401. background: $white;
  402. border: 1px solid lighten($ui-base-color, 8%);
  403. &:focus {
  404. border-color: lighten($ui-base-color, 12%);
  405. background: $white;
  406. }
  407. }
  408. .react-toggle-track {
  409. background: $ui-secondary-color;
  410. }
  411. .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
  412. background: darken($ui-secondary-color, 10%);
  413. }
  414. .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  415. background: lighten($ui-highlight-color, 10%);
  416. }
  417. // Change the default color used for the text in an empty column or on the error column
  418. .empty-column-indicator,
  419. .error-column {
  420. color: $primary-text-color;
  421. background: $white;
  422. }
  423. // Change the default colors used on some parts of the profile pages
  424. .activity-stream-tabs {
  425. background: $account-background-color;
  426. border-bottom-color: lighten($ui-base-color, 8%);
  427. }
  428. .nothing-here,
  429. .page-header,
  430. .directory__tag > a,
  431. .directory__tag > div {
  432. background: $white;
  433. border: 1px solid lighten($ui-base-color, 8%);
  434. @media screen and (max-width: $no-gap-breakpoint) {
  435. border-left: 0;
  436. border-right: 0;
  437. border-top: 0;
  438. }
  439. }
  440. .simple_form {
  441. input[type="text"],
  442. input[type="number"],
  443. input[type="email"],
  444. input[type="password"],
  445. textarea {
  446. &:hover {
  447. border-color: lighten($ui-base-color, 12%);
  448. }
  449. }
  450. }
  451. .picture-in-picture-placeholder {
  452. background: $white;
  453. border-color: lighten($ui-base-color, 8%);
  454. color: lighten($ui-base-color, 8%);
  455. }
  456. .directory__tag > a {
  457. &:hover,
  458. &:active,
  459. &:focus {
  460. background: $ui-base-color;
  461. }
  462. @media screen and (max-width: $no-gap-breakpoint) {
  463. border: 0;
  464. }
  465. }
  466. .directory__tag.active > a,
  467. .directory__tag.active > div {
  468. border-color: $ui-highlight-color;
  469. &,
  470. h4,
  471. h4 small,
  472. .fa,
  473. .trends__item__current {
  474. color: $white;
  475. }
  476. &:hover,
  477. &:active,
  478. &:focus {
  479. background: $ui-highlight-color;
  480. }
  481. }
  482. .batch-table {
  483. &__toolbar,
  484. &__row,
  485. .nothing-here {
  486. border-color: lighten($ui-base-color, 8%);
  487. }
  488. }
  489. .activity-stream {
  490. border: 1px solid lighten($ui-base-color, 8%);
  491. &--under-tabs {
  492. border-top: 0;
  493. }
  494. .entry {
  495. background: $account-background-color;
  496. .detailed-status.light,
  497. .more.light,
  498. .status.light {
  499. border-bottom-color: lighten($ui-base-color, 8%);
  500. }
  501. }
  502. .status.light {
  503. .status__content {
  504. color: $primary-text-color;
  505. }
  506. .display-name {
  507. strong {
  508. color: $primary-text-color;
  509. }
  510. }
  511. }
  512. }
  513. .accounts-grid {
  514. .account-grid-card {
  515. .controls {
  516. .icon-button {
  517. color: $darker-text-color;
  518. }
  519. }
  520. .name {
  521. a {
  522. color: $primary-text-color;
  523. }
  524. }
  525. .username {
  526. color: $darker-text-color;
  527. }
  528. .account__header__content {
  529. color: $primary-text-color;
  530. }
  531. }
  532. }
  533. .simple_form {
  534. .warning {
  535. box-shadow: none;
  536. background: rgba($error-red, 0.5);
  537. text-shadow: none;
  538. }
  539. .recommended {
  540. border-color: $ui-highlight-color;
  541. color: $ui-highlight-color;
  542. background-color: rgba($ui-highlight-color, 0.1);
  543. }
  544. }
  545. .compose-form .compose-form__warning {
  546. border-color: $ui-highlight-color;
  547. background-color: rgba($ui-highlight-color, 0.1);
  548. &,
  549. a {
  550. color: $ui-highlight-color;
  551. }
  552. }
  553. .reply-indicator {
  554. background: transparent;
  555. border: 1px solid lighten($ui-base-color, 8%);
  556. }
  557. .dismissable-banner {
  558. border-left: 1px solid lighten($ui-base-color, 8%);
  559. border-right: 1px solid lighten($ui-base-color, 8%);
  560. }
  561. .status__content,
  562. .reply-indicator__content {
  563. a {
  564. color: $highlight-text-color;
  565. }
  566. }
  567. .button.logo-button {
  568. color: $white;
  569. svg {
  570. fill: $white;
  571. }
  572. }
  573. .notification__filter-bar button.active::after,
  574. .account__section-headline a.active::after {
  575. border-color: transparent transparent $white;
  576. }
  577. .hero-widget,
  578. .moved-account-widget,
  579. .memoriam-widget,
  580. .activity-stream,
  581. .nothing-here,
  582. .directory__tag > a,
  583. .directory__tag > div,
  584. .card > a,
  585. .page-header,
  586. .compose-form .compose-form__warning {
  587. box-shadow: none;
  588. }
  589. .mute-modal select {
  590. border: 1px solid lighten($ui-base-color, 8%);
  591. background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px;
  592. }