diff.scss 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638
  1. // components.scss
  2. .compose-form {
  3. .compose-form__modifiers {
  4. .compose-form__upload {
  5. &-description {
  6. input {
  7. &::placeholder {
  8. opacity: 1;
  9. }
  10. }
  11. }
  12. }
  13. }
  14. }
  15. .reply-indicator__content,
  16. .reply-indicator__display-name {
  17. color: $white;
  18. }
  19. .rich-formatting a,
  20. .rich-formatting p a,
  21. .rich-formatting li a,
  22. .landing-page__short-description p a,
  23. .status__content a,
  24. .reply-indicator__content a {
  25. color: lighten($ui-highlight-color, 12%);
  26. text-decoration: underline;
  27. &.mention {
  28. text-decoration: none;
  29. }
  30. &.mention span {
  31. text-decoration: underline;
  32. &:hover,
  33. &:focus,
  34. &:active {
  35. text-decoration: none;
  36. }
  37. }
  38. &:hover,
  39. &:focus,
  40. &:active {
  41. text-decoration: none;
  42. }
  43. &.status__content__spoiler-link {
  44. color: $secondary-text-color;
  45. text-decoration: none;
  46. }
  47. }
  48. .status__content__read-more-button {
  49. text-decoration: underline;
  50. &:hover,
  51. &:focus,
  52. &:active {
  53. text-decoration: none;
  54. }
  55. }
  56. .getting-started__footer a {
  57. text-decoration: underline;
  58. &:hover,
  59. &:focus,
  60. &:active {
  61. text-decoration: none;
  62. }
  63. }
  64. .nothing-here {
  65. color: $darker-text-color;
  66. }
  67. .public-layout .public-account-header__tabs__tabs .counter.active::after {
  68. border-bottom: 4px solid $ui-highlight-color;
  69. }
  70. // FAIRY FLOSS CHANGES
  71. html {
  72. scrollbar-color: $purple3 rgba($purple3, 0.25);
  73. }
  74. ::-webkit-scrollbar-thumb {
  75. background: $purplescrollbar;
  76. border: 0 #f8f8f2;
  77. border-radius: 50px;
  78. }
  79. ::-webkit-scrollbar-thumb:hover {
  80. background: $purplescrollbar;
  81. border: 0;
  82. }
  83. ::-webkit-scrollbar-track:hover {
  84. background: darken($purple2, 6%);
  85. }
  86. .loading-bar {
  87. background-color: $mint;
  88. }
  89. // text
  90. .status__display-name,
  91. .column-header,
  92. .column-link,
  93. .navigation-bar strong {
  94. color: $purple4;
  95. }
  96. .ui,
  97. .notification__filter-bar button,
  98. .account__section-headline button,
  99. body,
  100. body.admin {
  101. background: $purple1;
  102. }
  103. .drawer__header {
  104. background: $purple3;
  105. a {
  106. &:hover,
  107. &:focus {
  108. background: darken($purple3, 8%);
  109. }
  110. }
  111. }
  112. .search__input {
  113. &:hover,
  114. &:focus {
  115. background: $purple2;
  116. color: $purple4;
  117. }
  118. background: $purple2;
  119. color: $purple4;
  120. }
  121. ::placeholder {
  122. color: $purple4;
  123. }
  124. .search-popout,
  125. .search-popout h4 {
  126. color: $purple1;
  127. background-color: $purple4;
  128. }
  129. .drawer__inner,
  130. .drawer__inner__mastodon {
  131. background: $purple3;
  132. }
  133. .compose-form .compose-form__buttons-wrapper {
  134. background: lighten($purple4, 8%);
  135. }
  136. .text-icon-button.active {
  137. color: darken($pink, 12%);
  138. }
  139. .column-header,
  140. .column-header__button,
  141. .column-header__back-button {
  142. background: $purple5;
  143. }
  144. .column-header__back-button,
  145. .column-header__button,
  146. .column-header__button.active,
  147. .column-header__button.active {
  148. background: $purple5;
  149. &:hover,
  150. &:active,
  151. &:focus {
  152. color: $ui-highlight-color;
  153. background: lighten($purple5, 4%);
  154. }
  155. }
  156. .notification__filter-bar button.active::after,
  157. .notification__filter-bar a.active::after,
  158. .account__section-headline button.active::after,
  159. .account__section-headline a.active::after {
  160. border-color: transparent transparent $purple2;
  161. }
  162. .column > .scrollable {
  163. background: $purple2;
  164. }
  165. .load-more:hover {
  166. background: darken($purple2, 4%);
  167. }
  168. .empty-column-indicator,
  169. .error-column {
  170. background: $purple2;
  171. }
  172. .column-link__badge,
  173. .column-subheading {
  174. background: $purple2;
  175. }
  176. // link previews
  177. .status-card {
  178. background: $purple5;
  179. &:hover,
  180. &:focus {
  181. background: darken($purple5, 4%);
  182. }
  183. }
  184. .status-card.compact {
  185. border-color: darken($purple5, 8%);
  186. background: $purple5;
  187. }
  188. .status-card__image {
  189. background: $purple3;
  190. }
  191. .notification__filter-bar button.active,
  192. .notification__filter-bar a.active,
  193. .account__section-headline button.active,
  194. .account__section-headline a.active,
  195. .column-header > .column-header__back-button {
  196. color: $mint;
  197. }
  198. .react-toggle--checked .react-toggle-track,
  199. .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  200. background: $pink;
  201. }
  202. .react-toggle-track,
  203. .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
  204. background: $purple2;
  205. }
  206. .column-header__collapsible-inner,
  207. .column-header__button.active,
  208. .column-header__button.active:hover,
  209. .column-header__button.active:focus {
  210. background: $purple3;
  211. color: $purpleicon;
  212. }
  213. .column-inline-form,
  214. .column-back-button {
  215. background: $purplescrollbar;
  216. }
  217. .flex-spacer,
  218. .getting-started,
  219. .getting-started__wrapper {
  220. background: $purple2;
  221. }
  222. .status {
  223. border-bottom: 1px solid lighten($purple2, 8%);
  224. }
  225. .status.status-direct {
  226. background: $purple1;
  227. border-right: 1px solid $purple2;
  228. border-left: 1px solid $purple2;
  229. }
  230. .detailed-status,
  231. .detailed-status__action-bar {
  232. background: $purplescrollbar;
  233. }
  234. .detailed-status__action-bar {
  235. border-top: 1px solid lighten($purple3, 8%);
  236. border-bottom: 1px solid lighten($purple3, 8%);
  237. }
  238. .focusable:focus {
  239. background: $purplescrollbar;
  240. }
  241. .focusable {
  242. &:focus {
  243. outline: 0;
  244. background: $purplescrollbar;
  245. .detailed-status,
  246. .detailed-status__action-bar {
  247. background: lighten($purplescrollbar, 2%);
  248. }
  249. }
  250. }
  251. .icon-button.active {
  252. color: $pink;
  253. }
  254. button.icon-button i.fa-retweet {
  255. background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23ADA6BF' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23c2ffdf' stroke-width='0'/></svg>");
  256. }
  257. button.icon-button i.fa-retweet:hover {
  258. background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23C0BBCE' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23c2ffdf' stroke-width='0'/></svg>");
  259. }
  260. .notification__favourite-icon-wrapper .star-icon,
  261. .star-icon.active,
  262. a.mention.hashtag {
  263. color: $lemon;
  264. }
  265. .reply-indicator__content a,
  266. .status__content a {
  267. color: $mint;
  268. }
  269. .reply-indicator {
  270. background: $purplescrollbar;
  271. }
  272. a.mention,
  273. .notification__message .fa {
  274. color: $pink;
  275. }
  276. .poll__link {
  277. color: $purple4;
  278. }
  279. .poll__chart {
  280. color: lighten($coral, 4%);
  281. }
  282. .poll__chart.leading {
  283. color: $coral;
  284. }
  285. .emoji-mart-bar:first-child {
  286. background: $purple4;
  287. }
  288. .emoji-mart-anchor-selected {
  289. color: $purple2;
  290. &:hover,
  291. &:focus {
  292. color: $purple1;
  293. }
  294. }
  295. .emoji-mart-anchor-bar {
  296. background: $purple1;
  297. }
  298. // profile in deck view
  299. .account__header__bar .avatar .account__avatar {
  300. border-color: $purple1;
  301. }
  302. .account__header__image {
  303. background: $purple1;
  304. }
  305. .notification__filter-bar,
  306. .account__section-headline {
  307. background: $purple1;
  308. }
  309. .button.logo-button.button--destructive:active,
  310. .button.logo-button.button--destructive:focus,
  311. .button.logo-button.button--destructive:hover {
  312. background: $pink;
  313. }
  314. // public profiles
  315. .public-layout .header {
  316. background: $purple3;
  317. }
  318. .public-layout .header .brand:active,
  319. .public-layout .header .brand:focus,
  320. .public-layout .header .brand:hover {
  321. background: darken($purple3, 4%);
  322. }
  323. .public-layout .public-account-header__bar .avatar img {
  324. background: $purple2;
  325. border: 4px solid $purple2;
  326. }
  327. .public-layout .public-account-header__image {
  328. background: $ui-base-color;
  329. }
  330. .public-layout .public-account-header__image .originalheader svg,
  331. .originalmascotimg svg {
  332. fill: $ui-primary-color;
  333. }
  334. .public-layout .public-account-header__image .originalheader h1 a.brand {
  335. color: $ui-primary-color;
  336. }
  337. .public-layout .header .nav-button {
  338. background: darken($purple3, 4%);
  339. &:hover,
  340. &:focus {
  341. background: darken($purple3, 8%);
  342. }
  343. }
  344. .public-layout .public-account-header__bar::before {
  345. background: $purplescrollbar;
  346. }
  347. .public-layout .public-account-header__tabs__tabs .counter.active::after {
  348. border-bottom: 4px solid $lemon;
  349. }
  350. .public-layout .public-account-bio {
  351. background: $purple3;
  352. }
  353. .hero-widget__text {
  354. background: $purple2;
  355. }
  356. .activity-stream .entry {
  357. background: $purple2;
  358. }
  359. .simple_form .hint a {
  360. color: $mint;
  361. }
  362. .oauth-prompt strong,
  363. .follow-prompt strong {
  364. color: $purple4;
  365. }
  366. .simple_form input[type="text"]:active,
  367. .simple_form input[type="text"]:focus,
  368. .simple_form input[type="number"]:active,
  369. .simple_form input[type="number"]:focus,
  370. .simple_form input[type="email"]:active,
  371. .simple_form input[type="email"]:focus,
  372. .simple_form input[type="password"]:active,
  373. .simple_form input[type="password"]:focus,
  374. .simple_form textarea:active,
  375. .simple_form textarea:focus {
  376. border-color: $mint;
  377. }
  378. .nothing-here {
  379. background: $purple2;
  380. }
  381. // admin zone
  382. .admin-wrapper .content h2 {
  383. color: $purple4;
  384. }
  385. .admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
  386. background: $purpleborder;
  387. &:hover,
  388. &:focus {
  389. background: lighten($purpleborder, 8%);
  390. }
  391. }
  392. .admin-wrapper .sidebar ul ul {
  393. background: $purple1;
  394. }
  395. .admin-wrapper .sidebar ul a:hover,
  396. .admin-wrapper .sidebar ul a:focus {
  397. background: $purpleborder;
  398. }
  399. .admin-wrapper .content .muted-hint a {
  400. color: $mint;
  401. }
  402. .card__bar {
  403. background: $purplescrollbar;
  404. }
  405. .simple_form input[type="text"],
  406. .simple_form input[type="number"],
  407. .simple_form input[type="email"],
  408. .simple_form input[type="password"],
  409. .simple_form textarea {
  410. background: darken($purple1, 6%);
  411. }
  412. .simple_form select {
  413. background: darken($purple1, 6%) 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='%23c2ffdf'/></svg>") no-repeat right 8px center/auto 16px;
  414. }
  415. .table th,
  416. .table td {
  417. background: darken($purple2, 6%);
  418. }
  419. .table > thead > tr > th {
  420. color: $lemon;
  421. }
  422. .table > tbody > tr:nth-child(odd) > td,
  423. .table > tbody > tr:nth-child(odd) > th {
  424. background: $purple3;
  425. }
  426. // directory
  427. .accounts-table tbody td {
  428. background: $purple3;
  429. }
  430. .page-header {
  431. background: $purpleborder;
  432. h1 {
  433. color: $purple4;
  434. }
  435. }
  436. .box-widget,
  437. .contact-widget,
  438. .landing-page__information.contact-widget {
  439. background: $purple2;
  440. }
  441. .notice-widget a {
  442. color: $mint;
  443. }
  444. .directory__tag a {
  445. background: $purple2;
  446. &:hover,
  447. &:focus {
  448. background: lighten($purple2, 4%);
  449. }
  450. }
  451. // about/more
  452. .landing-page__call-to-action {
  453. background: $purple3;
  454. }
  455. .rich-formatting h3,
  456. .rich-formatting h4,
  457. .rich-formatting h2,
  458. .rich-formatting h1 {
  459. color: lighten($purpleicon, 8%);
  460. }
  461. .landing-page__information strong {
  462. color: lighten($purpleicon, 10%);
  463. }
  464. // about
  465. .simple_form .input.boolean label a {
  466. color: $mint;
  467. }
  468. ::placeholder {
  469. color: $purpleicon;
  470. }
  471. .landing .hero-widget__footer {
  472. background: $purple3;
  473. }
  474. .status.status-direct:not(.read),
  475. .account {
  476. border-bottom: 1px solid lighten($purple2, 8%);
  477. }
  478. .drawer__inner__mastodon svg#hometownlogo {
  479. fill: $ui-primary-color;
  480. }
  481. .audio-player,
  482. .audio-player .video-player__controls {
  483. background: $ui-base-color;
  484. }
  485. .video-player__buttons button {
  486. color: $ui-primary-color;
  487. }
  488. .tabs-bar__wrapper {
  489. background: $purple1;
  490. }
  491. .navigation-panel,
  492. .compose-panel {
  493. hr {
  494. border-top: 1px solid $purple3;
  495. }
  496. }
  497. #navigation-panel__publish {
  498. i {
  499. color: $primary-text-color;
  500. }
  501. }
  502. #navigation-panel__publish.active {
  503. i {
  504. background-color: lighten($ui-highlight-color, 10%);
  505. color: $lighter-text-color;
  506. }
  507. }