☰

Mastodon Cyberpunk Neon

Cyberpunk Neon theme for Mastodon

  1. /* ==UserStyle==
  2. @name           Mastodon Cyberpunk Neon
  3. @name:es        Mastodon Cyberpunk Neon
  4. @description    Cyberpunk Neon theme for Mastodon
  5. @description:es Tema Cyberpunk Neon para Mastodon
  6. @namespace      github.com/Roboron3042/Cyberpunk-Neon
  7. @author         @Roboron3042 <robertoms258 at gmail dot com>
  8. @homepageURL    https://github.com/Roboron3042/Cyberpunk-Neon
  9. @supportURL     https://github.com/Roboron3042/Cyberpunk-Neon/issues
  10. @version        4.3
  11. @license        CC-BY-SA 4.0
  12. @preprocessor   stylus
  13. ==/UserStyle== */
  14. @-moz-document url-prefix("https://im-in.space/"), url-prefix("https://masto"), url-prefix("https://tkz.one") {
  15. /*
  16.     Autor: Roberto Michán Sánchez (Roboron)
  17.     Upstream URL / Report issues: https://github.com/Roboron3042/Cyberpunk-Neon
  18.     License: CC-BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/
  19. */
  20. /* 0. Colorscheme */
  21. :root {
  22.     --dark: #000b1e;
  23.     --blue-primary: #091833;
  24.     --blue-secondary: #133e7c;
  25.     --blue-terciary: #0b2956;
  26.     --blue-terciary-svg: invert(15%) sepia(81%) saturate(952%) hue-rotate(186deg) brightness(88%) contrast(102%);
  27.     --cyan-primary: #0abdc6;
  28.     --cyan-primary-svg: invert(50%) sepia(85%) saturate(1552%) hue-rotate(144deg) brightness(101%) contrast(92%);
  29.     --cyan-secondary: #057583;
  30.     --cyan-terciary: #012f3f;
  31.     --pink-primary: #ea00d9;
  32.     --pink-primary-svg: invert(17%) sepia(98%) saturate(7408%) hue-rotate(299deg) brightness(106%) contrast(108%);
  33.     --pink-secondary: #8c038e;
  34.     --purple-primary: #711c91;
  35.     --purple-secondary: #321959;
  36.     --green: #00ff00;
  37.     --orange: #f57800;
  38.     --red: #ff0000;
  39.     --yellow: #ffff00;
  40.     /* Overwrite default colorscheme */
  41.     --background-border-color: var(--cyan-terciary);
  42.     --dropdown-background-color: var(--blue-primary);
  43.     --dropdown-border-color: var(--cyan-terciary);
  44.     --surface-variant-active-background-color: var(--purple-secondary);
  45.     --surface-variant-background-color: var(--blue-terciary);
  46.     --modal-background-color: var(--blue-primary);
  47.     --modal-border-color: var(--cyan-secondary);
  48.     --surface-background-color: var(--blue-primary);
  49. }
  50. /* 1. Main elements*/
  51. :root {
  52.     scrollbar-color: var(--cyan-primary) transparent !important;
  53. }
  54. .ui {
  55.     background: var(--dark);
  56. }
  57. body {
  58.     color: var(--cyan-primary);
  59. }
  60. /* 1.1. Selection */
  61. ::selection {
  62.     background: var(--purple-secondary);
  63.     /* WebKit/Blink Browsers */
  64.     color: var(--cyan-primary);
  65. }
  66. ::-moz-selection {
  67.     background: var(--purple-secondary);
  68.     /* Gecko Browsers */
  69.     color: var(--cyan-primary);
  70. }
  71. .note-3kmerW textarea::-moz-selection {
  72.     background: var(--purple-secondary);
  73.     color: var(--cyan-primary)
  74. }
  75. .note-3kmerW textarea::selection {
  76.     background: var(--purple-secondary);
  77.     color: var(--cyan-primary)
  78. }
  79. .loading-bar {
  80.     background-color: var(--green);
  81. }
  82. /* Media pop-up */
  83. .picture-in-picture__footer, .picture-in-picture__header {
  84.     background: var(--dark);
  85. }
  86. .video-player__buttons .player-button {
  87.     color: var(--cyan-primary)
  88. }
  89. .video-player__buttons .player-button:active, .video-player__buttons .player-button:focus, .video-player__buttons .player-button:hover {
  90.     color: var(--pink-primary);
  91. }
  92. .video-player__seek__progress {
  93.     background: var(--pink-primary);
  94. }
  95. .video-player__seek__handle {
  96.     background: var(--pink-primary);
  97. }
  98. .video-player__seek__buffer {
  99.     background: var(--purple-secondary);
  100. }
  101. .video-player__volume__current {
  102.     background: var(--pink-primary);
  103. }
  104. .video-player__volume__handle {
  105.     background: var(--pink-primary);
  106. }
  107. .video-player__volume::before {
  108.     background: var(--purple-secondary);
  109. }
  110. .picture-in-picture__header .display-name {
  111.     color: var(--pink-primary);
  112. }
  113. .picture-in-picture__header .display-name span {
  114.     color: var(--pink-secondary);
  115. }
  116. /* Confirmation modal */
  117. .actions-modal, .block-modal, .boost-modal, .compare-history-modal, .confirmation-modal, .mute-modal, .report-modal {
  118.     color: var(--orange);
  119. }
  120. .actions-modal, .block-modal, .boost-modal, .compare-history-modal, .confirmation-modal, .mute-modal, .report-modal {
  121.     background: var(--blue-primary);
  122.     color: var(--orange);
  123. }
  124. .block-modal__action-bar, .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar {
  125.     background: var(--dark);
  126. }
  127. .block-modal .setting-toggle__label, .mute-modal .setting-toggle__label {
  128.     color: var(--cyan-primary);
  129. }
  130. .block-modal__container select, .confirmation-modal__container select, .mute-modal__container select, .report-modal__target select {
  131.     background: var(--blue-terciary) 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='%230abdc6'/></svg>") no-repeat right 8px center/auto 16px;
  132.     border: 1px solid var(--cyan-primary);
  133. }
  134. .block-modal__container select, .confirmation-modal__container select, .mute-modal__container select, .report-modal__target select {
  135.     color: var(--cyan-primary);
  136. }
  137. /* 2. Left colum */
  138. /* 2.1. Left header */
  139. .drawer__header {
  140.     background: var(--dark)
  141. }
  142. .drawer__header a:hover {
  143.     color: var(--pink-primary);
  144. }
  145. .drawer__tab {
  146.     color: var(--cyan-primary);
  147. }
  148. /* 2.2. Search bar */
  149. .search__input {
  150.     background: var(--blue-primary);
  151.     color: var(--cyan-primary);
  152. }
  153. .search__input:focus {
  154.     background: var(--blue-terciary);
  155. }
  156. .search__input::placeholder {
  157.     color: var(--cyan-secondary);
  158. }
  159. .search__icon .fa {
  160.     color: var(--cyan-primary);
  161. }
  162. .search__icon .icon {
  163.     color: var(--cyan-primary);
  164. }
  165. /* 2.2.1. Search results */
  166. .search-results__header {
  167.     color: var(--cyan-primary);
  168.     background: var(--blue-secondary);
  169. }
  170. .search-results__section h5 {
  171.     background: var(--blue-primary);
  172.     border-bottom: 1px solid var(--cyan-secondary);
  173.     color: var(--cyan-primary);
  174. }
  175. .search-results__info {
  176.     color: var(--cyan-primary);
  177. }
  178. .trends__item__current {
  179.     color: var(--pink-primary);
  180. }
  181. .drawer__inner.darker {
  182.     background: var(--blue-primary);
  183. }
  184. /* 2.3. Profile */
  185. .drawer__inner {
  186.     background: var(--dark);
  187. }
  188. .navigation-bar {
  189.     color: var(--pink-primary);
  190. }
  191. .navigation-bar strong {
  192.     color: var(--pink-primary);
  193. }
  194. .icon-button {
  195.     color: var(--cyan-primary);
  196. }
  197. .icon-button.active {
  198.     color: var(--pink-primary);
  199. }
  200. .icon-button:active, .icon-button:focus, .icon-button:hover {
  201.     color: var(--pink-primary);
  202. }
  203. /* 2.4. Dropdown Menu */
  204. .dropdown-menu {
  205.     background: var(--dark);
  206. }
  207. .dropdown-menu__arrow.bottom {
  208.     border-bottom-color: var(--dark);
  209. }
  210. .dropdown-menu__item a {
  211.     background: var(--dark);
  212.     color: var(--cyan-primary);
  213. }
  214. .dropdown-menu__separator {
  215.     border-bottom: 1px solid var(--blue-primary);
  216. }
  217. .dropdown-menu__item a:active, .dropdown-menu__item a:focus, .dropdown-menu__item a:hover {
  218.     background: var(--blue-terciary);
  219.     color: var(--cyan-primary);
  220. }
  221. .navigation-bar .icon-button {
  222.     color: var(--cyan-primary);
  223. }
  224. .navigation-bar .icon-button:hover {
  225.     color: var(--pink-primary);
  226. }
  227. /* 2.5. DM Warning */
  228. .compose-form .compose-form__warning {
  229.     color: var(--orange);
  230.     background: var(--purple-secondary);
  231. }
  232. .compose-form .compose-form__warning a {
  233.     color: var(--pink-primary);
  234. }
  235. /* 2.6. Text Area */
  236. .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
  237.     color: var(--cyan-primary);
  238.     background: var(--blue-primary);
  239. }
  240. .compose-form .compose-form__modifiers {
  241.     color: var(--cyan-primary);
  242.     background: var(--blue-terciary);
  243. }
  244. .compose-form .autosuggest-textarea__textarea::placeholder {
  245.     color: var(--cyan-secondary);
  246. }
  247. .compose-form .compose-form__buttons-wrapper {
  248.     background: var(--blue-terciary);
  249. }
  250. .icon-button.inverted {
  251.     color: var(--cyan-primary);
  252. }
  253. .icon-button.inverted:hover {
  254.     color: var(--pink-primary);
  255. }
  256. .text-icon-button {
  257.     color: var(--cyan-primary);
  258. }
  259. .text-icon-button:hover {
  260.     color: var(--pink-primary);
  261. }
  262. .compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter {
  263.     color: var(--cyan-primary);
  264. }
  265. .reply-indicator__display-name {
  266.     color: var(--pink-primary);
  267. }
  268. .icon-button.inverted:active, .icon-button.inverted:focus, .icon-button.inverted:hover {
  269.     color: var(--pink-primary);
  270.     background: none;
  271. }
  272. .text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover {
  273.     color: var(--pink-primary);
  274.     background: none;
  275. }
  276. .text-icon-button.active {
  277.     color: var(--green);
  278. }
  279. .icon-button.inverted.active {
  280.     color: var(--pink-cyan);
  281. }
  282. .compose-form .spoiler-input__input::placeholder {
  283.     color: var(--cyan-secondary);
  284. }
  285. .compose-form__highlightable {
  286.     background: var(--blue-primary);
  287.     border: 1px solid var(--background-border-color);
  288. }
  289. .dropdown-button {
  290.     border: 1px solid var(--cyan-primary);
  291.     color: var(--cyan-primary);
  292. }
  293. .dropdown-button.active {
  294.     background: var(--purple-secondary);
  295.     border-color: var(--purple-secondary);
  296.     color: var(--cyan-primary);
  297. }
  298. .character-counter {
  299.     color: var(--cyan-secondary);
  300. }
  301. .compose-form__actions .icon-button.disabled {
  302.     color: var(--blue-secondary);
  303. }
  304. /* 2.6.1. Polls */
  305. .poll__text input[type="text"] {
  306.     color: var(--cyan-primary);
  307.     background: var(--blue-secondary);
  308.     border: 1px solid var(--cyan-primary);
  309. }
  310. .poll__text input[type="text"]:hover {
  311.     border: 1px solid var(--pink-primary);
  312. }
  313. .poll__input {
  314.     border: 1px solid var(--cyan-primary);
  315. }
  316. .compose-form__poll-wrapper .icon-button.disabled {
  317.     color: #d7d7d5;
  318. }
  319. .compose-form__poll-wrapper {
  320.     border-top: 1px solid var(--cyan-secondary);
  321. }
  322. .compose-form__poll-wrapper .poll__footer {
  323.     border-top: 1px solid var(--cyan-secondary);
  324. }
  325. .compose-form__poll-wrapper .button.button-secondary {
  326.     color: var(--cyan-primary);
  327.     border-color: var(--cyan-primary);
  328. }
  329. .compose-form__poll-wrapper select {
  330.     color: var(--cyan-primary);
  331.     background: var(--blue-secondary) 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='%230abdc6'/></svg>") no-repeat right 8px center/auto 16px;
  332.     border: 1px solid var(--cyan-primary);
  333. }
  334. .compose-form__poll-wrapper .poll__footer button:focus, .compose-form__poll-wrapper .poll__footer select:focus {
  335.     border-color: var(--pink-primary);
  336. }
  337. .poll__option input[type="text"] {
  338.     color: var(--cyan-primary);
  339.     background: var(--blue-primary);
  340.     border: 1px solid var(--cyan-primary);
  341. }
  342. .poll__option input[type="text"]:focus {
  343.     border: 1px solid var(--pink-primary);
  344. }
  345. .compose-form__poll-wrapper .icon-button.disabled {
  346.     color: var(--cyan-primary);
  347. }
  348. .poll__input:active, .poll__input:focus, .poll__input:hover {
  349.     border-color: var(--pink-primary);
  350. }
  351. .compose-form__poll .poll__input {
  352.     border-color: var(--cyan-primary);
  353. }
  354. .compose-form__poll__select__label {
  355.     color: var(--cyan-primary);
  356. }
  357. .compose-form__poll__select__value {
  358.     color: var(--pink-primary);
  359. }
  360. .compose-form__actions .icon-button.active {
  361.     background: var(--purple-primary);
  362. }
  363. /* 2.6.2. Emoji Picker */
  364. .emoji-picker-dropdown__menu {
  365.     background: var(--blue-primary);
  366. }
  367. .emoji-mart-bar:first-child {
  368.     background: var(--blue-primary);
  369. }
  370. .emoji-mart-bar {
  371.     border: 0 solid var(--dark);
  372. }
  373. .emoji-mart-anchor {
  374.     color: var(--cyan-primary);
  375. }
  376. .emoji-mart-anchor:hover {
  377.     color: var(--pink-primary);
  378. }
  379. .emoji-mart-anchor-selected {
  380.     color: var(--pink-primary);
  381. }
  382. .emoji-mart-search {
  383.     background: var(--blue-primary);
  384. }
  385. .emoji-mart-search input {
  386.     background: var(--blue-secondary);
  387.     color: var(--cyan-primary);
  388.     border: 1px solid var(--cyan-primary);
  389. }
  390. .emoji-mart-scroll {
  391.     background: var(--blue-primary);
  392. }
  393. .emoji-mart {
  394.     color: var(--pink-primary);
  395. }
  396. .emoji-mart-category-label span {
  397.     background: var(--blue-primary)
  398. }
  399. .emoji-mart-category .emoji-mart-emoji:hover::before {
  400.     background-color: var(--purple-primary);
  401. }
  402. .emoji-mart-anchor-bar {
  403.     background-color: var(--pink-primary);
  404. }
  405. .emoji-mart-no-results {
  406.     color: var(--cyan-primary);
  407. }
  408. /* 2.6.3 Language selector */
  409. .language-dropdown__dropdown__results__item.active {
  410.     background: var(--purple-secondary);
  411.     color: var(--cyan-primary);
  412. }
  413. .language-dropdown__dropdown__results__item.active:hover {
  414.     background: var(--purple-primary);
  415.     color: var(--cyan-primary);
  416. }
  417. .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name {
  418.     color: var(--cyan-secondary);
  419. }
  420. .language-dropdown__dropdown__results__item {
  421.     color: var(--cyan-primary);
  422. }
  423. .language-dropdown__dropdown__results__item:active, .language-dropdown__dropdown__results__item:focus, .language-dropdown__dropdown__results__item:hover {
  424.     background: var(--blue-terciary);
  425. }
  426. .language-dropdown__dropdown__results__item__common-name {
  427.     color: var(--cyan-secondary);
  428. }
  429. .language-dropdown__dropdown .emoji-mart-search input {
  430.     background: var(--blue-secondary);
  431.     color: var(--cyan-primary);
  432. }
  433. .language-dropdown__dropdown .emoji-mart-search-icon {
  434.     color: var(--cyan-primary);
  435. }
  436. /* 2.6.4 Hashtag selector */
  437. .compose-form .autosuggest-textarea__suggestions {
  438.     background: var(--blue-secondary);
  439.     color: var(--cyan-primary);
  440. }
  441. .compose-form .autosuggest-textarea__suggestions__item.selected, .compose-form .autosuggest-textarea__suggestions__item:active, .compose-form .autosuggest-textarea__suggestions__item:focus {
  442.     background: var(--purple-secondary);
  443. }
  444. .compose-form .autosuggest-textarea__suggestions__item:hover {
  445.     background: var(--blue-terciary);
  446. }
  447. .autosuggest-textarea__suggestions__item.selected {
  448.     background: var(--purple-secondary);
  449.     color: var(--cyan-primary);
  450. }
  451. .autosuggest-textarea__suggestions {
  452.     background: var(--blue-primary);
  453.     color: var(--cyan-primary);
  454. }
  455. .autosuggest-textarea__suggestions__item:active, .autosuggest-textarea__suggestions__item:focus, .autosuggest-textarea__suggestions__item:hover {
  456.     background: var(--blue-terciary);
  457. }
  458. .autosuggest-textarea__suggestions__item {
  459.     color: var(--cyan-primary);
  460. }
  461. /* 2.6.5 Visibility selector */
  462. .privacy-dropdown__option.active, .privacy-dropdown__option:focus {
  463.     background: var(--purple-secondary);
  464.     color: var(--cyan-primary);
  465. }
  466. .privacy-dropdown__option.active .privacy-dropdown__option__additional, .privacy-dropdown__option.active .privacy-dropdown__option__content, .privacy-dropdown__option.active .privacy-dropdown__option__content strong, .privacy-dropdown__option:focus .privacy-dropdown__option__additional, .privacy-dropdown__option:focus .privacy-dropdown__option__content, .privacy-dropdown__option:focus .privacy-dropdown__option__content strong {
  467.     color: var(--cyan-primary);
  468. }
  469. .privacy-dropdown__option:active, .privacy-dropdown__option:hover {
  470.     background: var(--blue-terciary);
  471. }
  472. .privacy-dropdown__option {
  473.     color: var(--cyan-primary);
  474. }
  475. .privacy-dropdown__option__content {
  476.     color: var(--cyan-secondary);
  477. }
  478. .privacy-dropdown__option__content strong {
  479.     color: var(--cyan-primary);
  480. }
  481. .privacy-dropdown__option__additional {
  482.     color: var(--cyan-primary);
  483. }
  484. /* 2.7. Other */
  485. .button {
  486.     background-color: var(--blue-terciary);
  487.     color: var(--cyan-primary);
  488. }
  489. .button:hover {
  490.     background-color: var(--purple-secondary);
  491.     color: var(--cyan-primary);
  492. }
  493. .button:active, .button:focus {
  494.     background-color: var(--purple-primary);
  495. }
  496. .button:hover {
  497.     background-color: var(--purple-secondary);
  498. }
  499. .drawer__inner__mastodon {
  500.     background: var(--dark)
  501. }
  502. /* 3. Column Headers */
  503. .column-header__button {
  504.     color: var(--cyan-primary);
  505. }
  506. .column-header__button:hover {
  507.     color: var(--pink-primary);
  508. }
  509. .column-header__button.active {
  510.     color: var(--pink-primary);
  511. }
  512. .column-header__button.active:hover {
  513.     color: var(--pink-primary);
  514. }
  515. .column-header.active .column-header__icon {
  516.     color: var(--pink-primary);
  517.     text-shadow: 0 0 10px rgba(43, 144, 217, .4);
  518. }
  519. .column-header__collapsible {
  520.     color: var(--cyan-primary);
  521. }
  522. .setting-toggle__label {
  523.     color: var(--cyan-primary);
  524. }
  525. .react-toggle-track {
  526.     background-color: var(--dark);
  527. }
  528. .column-settings__section {
  529.     color: var(--cyan-primary);
  530. }
  531. .column-header__setting-btn:hover {
  532.     color: var(--pink-primary);
  533. }
  534. .column-header__wrapper.active::before {
  535.     background: radial-gradient(ellipse, rgba(234, 0, 217, 0.23) 0, rgba(234, 0, 217, 0) 60%);
  536. }
  537. .column-header__wrapper.active {
  538.     box-shadow: 0 1px 0 rgba(234, 0, 217, 0.3);
  539. }
  540. /* 3.0.1 Toggle buttons */
  541. .react-toggle--checked .react-toggle-track {
  542.     background-color: var(--purple-primary);
  543. }
  544. .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
  545.     background-color: var(--purple-secondary);
  546. }
  547. .react-toggle-track-check {
  548.     filter: var(--cyan-primary-svg);
  549. }
  550. .react-toggle--checked .react-toggle-thumb {
  551.     border-color: var(--cyan-primary);
  552.     filter: var(--cyan-primary-svg)
  553. }
  554. .react-toggle-thumb {
  555.     border: 1px solid var(--cyan-primary);
  556.     background-color: var(--cyan-primary);
  557. }
  558. .react-toggle-track {
  559.     background-color: var(--blue-secondary);
  560. }
  561. .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
  562.     background-color: var(--purple-secondary);
  563. }
  564. .react-toggle-track-x {
  565.     filter: var(--cyan-primary-svg)
  566. }
  567. /* 3.1. Announcements */
  568. .announcements {
  569.     background-color: var(--blue-terciary);
  570. }
  571. .announcements__item__unread {
  572.     background: var(--pink-primary);
  573. }
  574. .reactions-bar .emoji-button, .reactions-bar .emoji-button, .reactions-bar .emoji-button {
  575.     color: var(--cyan-primary);
  576. }
  577. .reactions-bar .emoji-button:active, .reactions-bar .emoji-button:focus, .reactions-bar .emoji-button:hover {
  578.     color: var(--pink-primary);
  579. }
  580. .reactions-bar__item.active {
  581.     background-color: rgba(113, 28, 145, .7);
  582. }
  583. .announcements__item__content a.unhandled-link {
  584.     color: var(--pink-primary);
  585. }
  586. .announcements__item__content a {
  587.     color: var(--pink-primary);
  588. }
  589. .announcements__pagination {
  590.     color: var(--cyan-primary);
  591. }
  592. /* 4. Main Timeline */
  593. .status {
  594.     border-bottom: 1px solid var(--cyan-terciary);
  595. }
  596. .notification__relative_time, .status__relative-time {
  597.     color: var(--pink-secondary);
  598. }
  599. .status__display-name {
  600.     color: var(--pink-secondary);
  601. }
  602. .account__display-name strong, .status__display-name strong {
  603.     color: var(--pink-primary);
  604. }
  605. .reply-indicator__content, .status__content {
  606.     color: var(--cyan-primary);
  607. }
  608. .reply-indicator__content a, .status__content a {
  609.     color: var(--pink-primary);
  610. }
  611. .status__content a.unhandled-link {
  612.     color: var(--pink-primary);
  613. }
  614. .icon-button.disabled {
  615.     color: var(--purple-primary);
  616. }
  617. button.icon-button.disabled:hover i.fa-retweet, button.icon-button.disabled i.fa-retweet {
  618.     filter: var(--blue-terciary-svg);
  619. }
  620. .star-icon.active {
  621.     color: yellow;
  622. }
  623. .icon-button.bookmark-icon.active {
  624.     color: var(--orange);
  625. }
  626. .status__content__read-more-button {
  627.     color: var(--pink-primary);
  628. }
  629. .status__action-bar__counter__label {
  630.     color: var(--cyan-primary);
  631. }
  632. .attachment-list.compact .fa {
  633.     color: var(--purple-primary);
  634. }
  635. .attachment-list__list a {
  636.     color: var(--purple-primary);
  637. }
  638. .status__prepend {
  639.     color: var(--cyan-secondary);
  640. }
  641. .status__prepend .status__display-name strong {
  642.     color: var(--pink-secondary);
  643. }
  644. .status-card.compact {
  645.     border-color: var(--cyan-secondary);
  646. }
  647. .status-card {
  648.     border: 1px solid var(--cyan-terciary);
  649.     color: var(--cyan-primary);
  650. }
  651. .status-card__image {
  652.     background: var(--blue-terciary);
  653. }
  654. .status-card__title {
  655.     color: var(--cyan-primary);
  656. }
  657. a.status-card .status-card__host, a.status-card .status-card__description {
  658.     color: var(--cyan-secondary);
  659. }
  660. a.status-card:active .status-card__author, a.status-card:active .status-card__description, a.status-card:active .status-card__host, a.status-card:active .status-card__title, a.status-card:focus .status-card__author, a.status-card:focus .status-card__description, a.status-card:focus .status-card__host, a.status-card:focus .status-card__title, a.status-card:hover .status-card__author, a.status-card:hover .status-card__description, a.status-card:hover .status-card__host, a.status-card:hover .status-card__title {
  661.     color: var(--pink-primary);
  662. }
  663. .status-card__author {
  664.     color: var(--cyan-primary);
  665. }
  666. .reply-indicator__content .status__content__spoiler-:hover, .status__content .status__content__spoiler-link:hover {
  667.     background: var(--purple-secondary);
  668. }
  669. .status__content__spoiler-link {
  670.     color: var(--cyan-primary);
  671. }
  672. .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link {
  673.     background: var(--blue-secondary);
  674. }
  675. .poll__chart.leading {
  676.     background: var(--blue-secondary);
  677. }
  678. .poll__chart {
  679.     background: var(--blue-terciary);
  680. }
  681. .poll__footer {
  682.     color: var(--cyan-secondary);
  683. }
  684. .poll__link {
  685.     color: var(--pink-secondary);
  686. }
  687. .poll__input.active {
  688.     border-color: var(--cyan-primary);
  689.     background: var(--purple-primary);
  690. }
  691. .button.button-secondary.disabled, .button.button-secondary:disabled {
  692.     border-color: var(--cyan-secondary);
  693.     color: var(--cyan-secondary);
  694. }
  695. .button.button-secondary {
  696.     border-color: var(--cyan-primary);
  697.     color: var(--cyan-primary);
  698. }
  699. .button.button-secondary:active, .button.button-secondary:focus, .button.button-secondary:hover {
  700.     border-color: var(--cyan-primary);
  701.     color: var(--cyan-primary);
  702. }
  703. .focusable:focus {
  704.     background: rgba(234, 0, 217, .1);
  705. }
  706. .icon-button:active, .icon-button:focus, .icon-button:hover {
  707.     background: none;
  708. }
  709. a.status-card.compact:hover {
  710.     background-color: var(--blue-terciary);
  711. }
  712. .reactions-bar__item {
  713.     background: var(--blue-primary);
  714. }
  715. .reactions-bar__item:hover {
  716.     background: var(--purple-primary);
  717. }
  718. .reactions-bar__item__count {
  719.     color: var(--cyan-primary);
  720. }
  721. .circular-progress {
  722.     color: var(--cyan-primary);
  723. }
  724. .hashtag-bar {
  725.     color: var(--cyan-primary);
  726. }
  727. .detailed-status__wrapper-direct .detailed-status, .detailed-status__wrapper-direct .detailed-status__action-bar {
  728.     background: var(--blue-primary);
  729. }
  730. .detailed-status__wrapper-direct .detailed-status__action-bar {
  731.     border-top-color: var(--cyan-terciary);
  732. }
  733. .notification-group--unread::before, .notification-ungrouped--unread::before {
  734.     border-inline-start: 4px solid var(--pink-primary);
  735. }
  736. .status__content__read-more-button, .status__content__translate-button {
  737.     color: var(--pink-primary);
  738. }
  739. .detailed-status__meta .animated-number {
  740.     color: var(--pink-primary);
  741. }
  742. /* 4.1. Edit pop-up */
  743. .dropdown-menu__arrow::before {
  744.     background-color: var(--cyan-primary);
  745. }
  746. .dropdown-menu__container__header {
  747.     border-bottom: 1px solid var(--cyan-secondary);
  748.     color: var(--cyan-primary);
  749. }
  750. .dropdown-menu__item.edited-timestamp__history__item {
  751.     border-bottom: 1px solid var(--cyan-secondary);
  752. }
  753. .dropdown-menu__item {
  754.     color: var(--cyan-primary);
  755. }
  756. .dropdown-menu__item a:active, .dropdown-menu__item a:focus, .dropdown-menu__item a:hover, .dropdown-menu__item button:active, .dropdown-menu__item button:focus, .dropdown-menu__item button:hover {
  757.     background: var(--blue-terciary);
  758.     color: var(--cyan-primary);
  759. }
  760. /* 5. Notifications */
  761. .status.status-direct:not(.read) {
  762.     border-bottom-color: var(--dark);
  763. }
  764. .account__section-headline, .notification__filter-bar {
  765.     background: var(--dark);
  766. }
  767. .account__section-headline button, .notification__filter-bar button {
  768.     background: var(--dark);
  769. }
  770. .account__section-headline a.active, .account__section-headline button.active, .notification__filter-bar a.active, .notification__filter-bar button.active {
  771.     color: var(--cyan-primary);
  772. }
  773. .account__section-headline a, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar button {
  774.     color: var(--cyan-secondary);
  775. }
  776. .account__section-headline a.active::after, .account__section-headline a.active::before, .account__section-headline button.active::after, .account__section-headline button.active::before, .notification__filter-bar a.active::after, .notification__filter-bar a.active::before, .notification__filter-bar button.active::after, .notification__filter-bar button.active::before {
  777.     border-color: transparent transparent var(--cyan-primary);
  778. }
  779. .notification-favourite .status.status-direct {
  780.     background: transparent;
  781. }
  782. .notification__message .fa {
  783.     color: #00ff00;
  784. }
  785. .icon-button.star-icon.active, .notification__favourite-icon-wrapper .star-icon {
  786.     color: yellow;
  787. }
  788. .notification__message {
  789.     color: rgba(10, 189, 198, .8);
  790. }
  791. .notification__display-name:hover {
  792.     color: var(--pink-primary);
  793. }
  794. .muted .status__content a, .muted .status__content p {
  795.     color: var(--cyan-secondary);
  796. }
  797. .notification__display-name {
  798.     color: rgba(234, 0, 217, .8)
  799. }
  800. .muted .status__display-name strong {
  801.     color: var(--pink-primary);
  802. }
  803. .account .account__display-name {
  804.     color: var(--pink-secondary);
  805. }
  806. .notification-favourite .status.status-direct .icon-button.disabled {
  807.     color: var(--purple-primary);
  808. }
  809. .muted .poll__chart.leading {
  810.     background: rgba(43, 144, 217, .3);
  811. }
  812. .muted .poll__chart {
  813.     background: rgba(43, 144, 217, .1);
  814. }
  815. .muted .poll {
  816.     color: var(--cyan-secondary);
  817. }
  818. .notification.unread::before, .status__wrapper.unread::before {
  819.     border-left: 2px solid var(--pink-primary);
  820. }
  821. .account__section-headline a.active::before, .account__section-headline button.active::before, .notification__filter-bar a.active::before, .notification__filter-bar button.active::before {
  822.     background: var(--pink-primary);
  823. }
  824. .notification-ungrouped__header {
  825.     color: var(--cyan-secondary);
  826. }
  827. .notification-group__main__header__label bdi {
  828.     color: var(--pink-primary);
  829. }
  830. .notification-group__main__header__label {
  831.     color: var(--pink-secondary);
  832. }
  833. .notification-group__main__header__label time {
  834.     color: var(--pink-secondary);
  835. }
  836. .notification-group__embedded-status__account bdi {
  837.     color: var(--pink-primary);
  838. }
  839. .notification-group__embedded-status__account {
  840.     color: var(--pink-secondary);
  841. }
  842. .notification-ungrouped--direct .notification-ungrouped__header, .notification-ungrouped--direct .status__prepend, .status__wrapper-direct .notification-ungrouped__header, .status__wrapper-direct .status__prepend {
  843.     color: var(--orange);
  844. }
  845. .notification-group--favourite .notification-group__icon {
  846.     color: var(--yellow);
  847. }
  848. .notification-group__embedded-status .reply-indicator__attachments {
  849.     color: var(--cyan-secondary);
  850. }
  851. .notification-group--reblog .notification-group__icon {
  852.     color: var(--green);
  853. }
  854. .notification-group--follow .notification-group__icon, .notification-group--follow-request .notification-group__icon {
  855.     color: var(--orange);
  856. }
  857. .button.button-secondary.button--destructive:active, .button.button-secondary.button--destructive:focus, .button.button-secondary.button--destructive:hover {
  858.     border-color: var(--red);
  859.     color: var(--red);
  860. }
  861. .notification-group__main__additional-content {
  862.     color: var(--cyan-secondary);
  863. }
  864. .filtered-notifications-banner {
  865.     color: var(--cyan-secondary);
  866. }
  867. .filtered-notifications-banner:active, .filtered-notifications-banner:focus, .filtered-notifications-banner:hover {
  868.     color: var(--cyan-primary);
  869. }
  870. .column-header .column-header__back-button.compact {
  871.     color: var(--cyan-primary);
  872. }
  873. .column-header .column-header__back-button.compact:hover {
  874.     color: var(--pink-primary);
  875. }
  876. .column-header__select-row__mode-button {
  877.     color: var(--pink-primary);
  878. }
  879. .notification-request__name__display-name {
  880.     color: var(--pink-primary);
  881. }
  882. .notification-request__name {
  883.     color: var(--pink-secondary);
  884. }
  885. .account__avatar__counter {
  886.     background-color: var(--purple-secondary);
  887.     color: var(--cyan-primary);
  888. }
  889. .column-settings h3 {
  890.     color: var(--cyan-primary);
  891. }
  892. .app-form__toggle__label strong {
  893.     color: var(--cyan-primary);
  894. }
  895. .app-form__toggle__label .hint {
  896.     color: var(--cyan-secondary);
  897. }
  898. /* 6. Right bar */
  899. .empty-column-indicator, .error-column, .follow_requests-unlocked_explanation {
  900.     color: var(--cyan-secondary);
  901. }
  902. .follow_requests-unlocked_explanation {
  903.     background: var(--dark);
  904. }
  905. /* 7. Detailed views */
  906. .detailed-status__display-name {
  907.     color: var(--pink-secondary);
  908. }
  909. .detailed-status__display-name strong {
  910.     color: var(--pink-primary);
  911. }
  912. .focusable:focus .detailed-status, .focusable:focus .detailed-status__action-bar {
  913.     background: rgba(113, 28, 145, .1);
  914. }
  915. .detailed-status__action-bar {
  916.     background: var(--dark);
  917. }
  918. .detailed-status__wrapper {
  919.     background: var(--dark);
  920. }
  921. .column-header > .column-header__back-button {
  922.     color: var(--pink-primary);
  923. }
  924. .detailed-status__meta {
  925.     color: var(--pink-secondary);
  926. }
  927. .column-subheading {
  928.     color: var(--cyan-primary);
  929. }
  930. .column-link__badge, .column-subheading {
  931.     background: var(--blue-primary);
  932. }
  933. .column-link {
  934.     color: var(--cyan-primary);
  935. }
  936. .getting-started {
  937.     color: var(--blue-primary);
  938. }
  939. .flex-spacer, .getting-started, .getting-started__wrapper {
  940.     background: var(--dark);
  941. }
  942. .link-footer p {
  943.     color: var(--pink-primary);
  944. }
  945. .link-footer p a {
  946.     color: var(--pink-primary);
  947. }
  948. .column-header__back-button {
  949.     color: var(--pink-primary);
  950. }
  951. /* 8. Profile */
  952. .column-back-button {
  953.     color: var(--pink-primary);
  954. }
  955. .account__header__image {
  956.     overflow: hidden;
  957.     height: 145px;
  958.     position: relative;
  959.     background: var(--dark);
  960. }
  961. .account__header__bar {
  962.     border-bottom: 1px solid var(--cyan-terciary);
  963. }
  964. .account__header__tabs__name h1 {
  965.     color: var(--pink-primary);
  966. }
  967. .account__header__tabs__name h1 small {
  968.     color: var(--pink-primary);
  969. }
  970. .account__header__bio .account__header__fields {
  971.     background: var(--dark);
  972. }
  973. .account__header__bio .account__header__fields dl {
  974.     border-bottom-color: var(--cyan-terciary);
  975. }
  976. .account__header__bio .account__header__fields dt {
  977.     color: var(--cyan-secondary);
  978. }
  979. .account__header__bio .account__header__fields dd {
  980.     color: var(--cyan-primary);
  981. }
  982. .account__header__bio .account__header__fields a {
  983.     color: var(--pink-primary);
  984. }
  985. .account__header__bio .account__header__fields .verified a, .account__header__bio .account__header__fields .verified dd, .account__header__bio .account__header__fields .verified dt {
  986.     color: var(--cyan-primary);
  987. }
  988. .account__header__fields .verified {
  989.     border: 1px solid rgba(0, 255, 0, .5);
  990.     background: rgba(0, 255, 0, .25);
  991. }
  992. .account__header__fields .verified__mark {
  993.     color: var(--green);
  994. }
  995. .account__header__bio .account__header__fields .verified a {
  996.     color: var(--green);
  997. }
  998. .account__header__bio .account__header__content {
  999.     color: var(--cyan-primary);
  1000. }
  1001. .account__header__extra__links {
  1002.     color: var(--cyan-primary);
  1003. }
  1004. .account__header__extra__links a strong {
  1005.     color: var(--cyan-primary);
  1006. }
  1007. .account__header__extra__links a {
  1008.     color: var(--cyan-secondary);
  1009. }
  1010. .account-role, .simple_form .recommended {
  1011.     color: var(--cyan-primary);
  1012.     background-color: var(--blue-secondary);
  1013.     border: 1px solid var(--cyan-primary);
  1014. }
  1015. .relationship-tag {
  1016.     color: var(--cyan-primary);
  1017.     background-color: var(--dark);
  1018. }
  1019. .empty-column-indicator, .error-column {
  1020.     color: var(--cyan-secondary);
  1021. }
  1022. .account__header__account-note label {
  1023.     color: var(--cyan-primary);
  1024. }
  1025. .account__header__account-note textarea:focus {
  1026.     background: var(--blue-primary);
  1027. }
  1028. .account__header__account-note textarea {
  1029.     color: var(--cyan-primary);
  1030.     background: transparent;
  1031. }
  1032. .account__header__account-note textarea::placeholder {
  1033.     color: var(--cyan-secondary);
  1034. }
  1035. .inline-alert {
  1036.     color: #00ff00;
  1037. }
  1038. .account__header__account-note {
  1039.     color: var(--cyan-primary);
  1040.     border-bottom: 1px solid var(--cyan-primary);
  1041. }
  1042. .timeline-hint {
  1043.     color: var(--cyan-primary);
  1044. }
  1045. .timeline-hint a:active, .timeline-hint a:focus, .timeline-hint a:hover {
  1046.     color: var(--pink-primary);
  1047. }
  1048. .empty-column-indicator a, .error-column a, .follow_requests-unlocked_explanation a {
  1049.     color: var(--pink);
  1050. }
  1051. .account__header__tabs__buttons .icon-button {
  1052.     border: none;
  1053. }
  1054. .timeline-hint a {
  1055.     color: var(--pink-primary);
  1056. }
  1057. .h-card, .mention.hashtag {
  1058.     color: var(--pink-primary)
  1059. }
  1060. .follow-request-banner, .moved-account-banner {
  1061.     background: var(--dark);
  1062. }
  1063. .follow-request-banner__message, .moved-account-banner__message {
  1064.     color: var(--cyan-primary);
  1065. }
  1066. .account__header__content a {
  1067.     color: var(--pink-primary);
  1068. }
  1069. .button.logo-button.button--destructive:active, .button.logo-button.button--destructive:focus, .button.logo-button.button--destructive:hover {
  1070.     background: var(--purple-secondary);
  1071.     color: var(--red);
  1072. }
  1073. .icon-button.active:active, .icon-button.active:focus, .icon-button.active:hover {
  1074.     color: var(--pink-primary);
  1075. }
  1076. .account__domain-pill {
  1077.     background: var(--blue-secondary);
  1078.     color: var(--cyan-primary);
  1079. }
  1080. .account__domain-pill.active {
  1081.     background: var(--purple-secondary);
  1082.     color: var(--pink-primary);
  1083. }
  1084. /* 8.1 Follow request */
  1085. .button.button-tertiary.button--confirmation {
  1086.     border-color: var(--green);
  1087.     background: var(--blue-terciary);
  1088.     color: var(--green);
  1089. }
  1090. .button.button-tertiary.button--confirmation:hover {
  1091.     border: 1px solid var(--green);
  1092.     background: var(--purple-secondary);
  1093.     color: var(--green);
  1094.     padding: 6px 17px;
  1095. }
  1096. .button.button-tertiary.button--destructive {
  1097.     border-color: var(--red);
  1098.     background: var(--blue-terciary);
  1099.     color: var(--red);
  1100. }
  1101. .button.button-tertiary.button--destructive:hover {
  1102.     border: 1px solid var(--red);
  1103.     background: var(--purple-secondary);
  1104.     color: var(--red);
  1105.     padding: 6px 17px;
  1106. }
  1107. /* 9. Hashtags / Explore */
  1108. .trends__item__name {
  1109.     color: var(--pink-secondary);
  1110. }
  1111. .trends__item__name a {
  1112.     color: var(--pink-primary);
  1113. }
  1114. .getting-started__trends .trends__item__current {
  1115.     color: var(--pink-primary);
  1116. }
  1117. .getting-started__trends h4 {
  1118.     color: var(--cyan-primary);
  1119. }
  1120. .getting-started__trends h4 a {
  1121.     color: var(--pink-primary);
  1122. }
  1123. .dismissable-banner {
  1124.     background: var(--purple-secondary);
  1125.     border: 1px solid var(--cyan-secondary);
  1126. }
  1127. .dismissable-banner__message {
  1128.     color: var(--green);
  1129. }
  1130. .dismissable-banner__action .icon-button, .warning-banner__action .icon-button {
  1131.     color: var(--cyan-primary);
  1132. }
  1133. .dismissable-banner__action .icon-button:hover {
  1134.     color: var(--pink-primary);
  1135. }
  1136. .explore__search-header {
  1137.     background: var(--blue-primary);
  1138. }
  1139. .explore__search-header .search__input {
  1140.     border: 1px solid var(--cyan-secondary);
  1141. }
  1142. .explore__search-header .search .fa {
  1143.     color: var(--cyan-primary);
  1144. }
  1145. .explore__search-header .search__popout {
  1146.     border: 1px solid var(--cyan-secondary);
  1147. }
  1148. /* 9.1 Search */
  1149. .search__popout {
  1150.     background: var(--dark);
  1151. }
  1152. .search__popout h4, .search__popout__menu__message {
  1153.     color: var(--cyan-primary);
  1154. }
  1155. .search__popout__menu__item {
  1156.     color: var(--cyan-primary);
  1157. }
  1158. .search__popout__menu__item.selected, .search__popout__menu__item:active, .search__popout__menu__item:focus, .search__popout__menu__item:hover {
  1159.     background: var(--purple-secondary);
  1160.     color: var(--cyan-primary);
  1161. }
  1162. .search__popout__menu__item mark {
  1163.     color: var(--pink-primary);
  1164. }
  1165. .account__display-name .display-name strong, .status__display-name .display-name strong {
  1166.     color: var(--pink-primary);
  1167. }
  1168. .verified-badge {
  1169.     color: var(--green);
  1170. }
  1171. .search-results__section__header {
  1172.     color: var(--cyan-primary);
  1173. }
  1174. .search-results__section__header button {
  1175.     color: var(--pink-primary);
  1176. }
  1177. /* 6.4. Lists */
  1178. .column-inline-form {
  1179.     background: var(--blue-primary);
  1180. }
  1181. .setting-text {
  1182.     color: var(--cyan-primary);
  1183.     background: var(--blue-terciary);
  1184.     border: 1px solid var(--blue-terciary);
  1185. }
  1186. .setting-text:focus {
  1187.     border-color: var(--cyan-primary);
  1188. }
  1189. .button.disabled, .button:disabled {
  1190.     background-color: var(--dark);
  1191. }
  1192. .radio-button__input.checked {
  1193.     border-color: var(--purple-primary);
  1194. }
  1195. .radio-button__input.checked::before {
  1196.     background: var(--purple-primary);
  1197. }
  1198. .check-box__input, .radio-button__input {
  1199.     border-color: var(--cyan-primary);
  1200. }
  1201. .column-link:active, .column-link:focus, .column-link:hover {
  1202.     color: var(--pink-primary);
  1203. }
  1204. /* 10. Direct Messages */
  1205. .conversation--unread {
  1206.     background: var(--blue-terciary);
  1207. }
  1208. .conversation {
  1209.     border-bottom: 1px solid var(--cyan-secondary);
  1210. }
  1211. .conversation__content__relative-time {
  1212.     color: var(--pink-secondary);
  1213. }
  1214. .conversation__content__names a {
  1215.     color: var(--pink-primary)
  1216. }
  1217. .conversation__content__names {
  1218.     color: var(--cyan-secondary);
  1219. }
  1220. .conversation--unread .conversation__content__relative-time {
  1221.     color: var(--pink-primary);
  1222. }
  1223. .conversation__unread {
  1224.     background: var(--pink-primary);
  1225. }
  1226. .conversation.unread::before, .notification.unread::before, .status__wrapper.unread::before {
  1227.     border-inline-start: 4px solid var(--pink-primary);
  1228. }
  1229. /* 11. Profile Directory */
  1230. .filter-form {
  1231.     background: var(--blue-primary);
  1232. }
  1233. .scrollable .account-card {
  1234.     background: var(--dark);
  1235. }
  1236. .account-card__title .display-name bdi {
  1237.     color: var(--pink-primary);
  1238. }
  1239. .account-card__title .display-name {
  1240.     color: var(--pink-secondary);
  1241. }
  1242. .scrollable .account-card__bio::after {
  1243.     background: none;
  1244. }
  1245. .account-card__counters__item {
  1246.     color: var(--pink-primary);
  1247. }
  1248. .account-card__counters__item small {
  1249.     color: var(--pink-secondary);
  1250. }
  1251. .button.logo-button {
  1252.     background: var(--blue-terciary);
  1253.     color: var(--cyan-primary);
  1254. }
  1255. .button.logo-button:active, .button.logo-button:focus, .button.logo-button:hover {
  1256.     background: var(--purple-secondary);
  1257. }
  1258. .load-more {
  1259.     color: var(--cyan-primary);
  1260.     background-color: var(--blue-terciary);
  1261. }
  1262. .load-more:hover {
  1263.     background: var(--purple-secondary);
  1264. }
  1265. .account-card__header img {
  1266.     background: var(--blue-terciary);
  1267. }
  1268. .account__header__content {
  1269.     color: var(--cyan-primary);
  1270. }
  1271. .limited-account-hint p {
  1272.     color: var(--orange);
  1273. }
  1274. .explore__suggestions__card__source {
  1275.     color: var(--cyan-secondary);
  1276. }
  1277. .explore__suggestions__card__body__main__name-button .display-name {
  1278.     color: var(--pink-primary);
  1279. }
  1280. .explore__suggestions__card__body__main__name-button .display-name__account {
  1281.     color: var(--pink-secondary);
  1282. }
  1283. /* 12. News */
  1284. .story__details__publisher {
  1285.     color: var(--cyan-secondary);
  1286. }
  1287. .story {
  1288.     color: var(--pink-primary);
  1289. }
  1290. .story__details__shared {
  1291.     color: var(--cyan-primary);
  1292. }
  1293. .story__details__title:active, .story__details__title:focus, .story__details__title:hover {
  1294.     color: var(--pink-primary);
  1295. }
  1296. .story__details__title {
  1297.     color: var(--cyan-primary);
  1298. }
  1299. /* 13. About */
  1300. .about__header p {
  1301.     color: var(--cyan-primary);
  1302. }
  1303. .about__mail {
  1304.     color: var(--pink-primary);
  1305. }
  1306. .about__meta {
  1307.     background: var(--dark);
  1308. }
  1309. .about__meta h4 {
  1310.     color: var(--cyan-secondary);
  1311. }
  1312. .about__meta__divider {
  1313.     border-color: var(--cyan-secondary);
  1314.     border-left: 1px var(--cyan-secondary);
  1315. }
  1316. .about__section__title {
  1317.     background: var(--blue-terciary);
  1318.     color: var(--cyan-primary);
  1319. }
  1320. .about__section__body {
  1321.     border: 1px solid var(--blue-terciary);
  1322. }
  1323. .prose {
  1324.     color: var(--cyan-primary);
  1325. }
  1326. .prose b, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6, .prose strong {
  1327.     color: var(--green);
  1328. }
  1329. .prose a {
  1330.     color: var(--pink-primary);
  1331. }
  1332. .rules-list li::before {
  1333.     background: var(--purple-secondary);
  1334.     color: var(--pink-primary);
  1335. }
  1336. .rules-list {
  1337.     color: var(--pink-primary);
  1338. }
  1339. .rules-list li {
  1340.     border-bottom: 1px solid var(--cyan-secondary);
  1341. }
  1342. .about__domain-blocks {
  1343.     background: var(--dark);
  1344.     border: 1px solid var(--cyan-secondary);
  1345. }
  1346. .about__domain-blocks__domain {
  1347.     border-bottom: 1px solid var(--cyan-secondary);
  1348.     color: var(--cyan-primary);
  1349. }
  1350. .about__domain-blocks__domain h6 {
  1351.     color: var(--pink-primary);
  1352. }
  1353. .about__footer {
  1354.     color: var(--pink-secondary);
  1355. }
  1356. /* 13.1. Privacy Policy */
  1357. .column-title p {
  1358.     color: var(--cyan-secondary);
  1359. }
  1360. .prose ul > li::before {
  1361.     background-color: var(--cyan-primary);
  1362. }
  1363. /* 14. Simple View */
  1364. .tabs-bar__wrapper {
  1365.     background: var(--dark);
  1366. }
  1367. /* 14.1. Statisitics */
  1368. .server-banner__introduction {
  1369.     color: var(--cyan-primary);
  1370. }
  1371. .server-banner h4 {
  1372.     color: var(--cyan-secondary);
  1373. }
  1374. .server-banner__number {
  1375.     color: var(--green);
  1376. }
  1377. .server-banner__number-label {
  1378.     color: var(--cyan-primary);
  1379. }
  1380. /* 14.2. Right column */
  1381. .logo {
  1382.     color: var(--pink-primary);
  1383. }
  1384. .column-link--transparent:active, .column-link--transparent:focus, .column-link--transparent:hover {
  1385.     color: var(--pink-primary);
  1386. }
  1387. .column-link--transparent.active {
  1388.     color: var(--pink-primary);
  1389. }
  1390. .icon-with-badge__badge {
  1391.     background: var(--purple-primary);
  1392.     color: var(--cyan-primary);
  1393. }
  1394. .sign-in-banner p {
  1395.     color: var(--cyan-primary);
  1396. }
  1397. .button.button-tertiary {
  1398.     color: var(--cyan-primary);
  1399.     border: 1px solid var(--cyan-primary);
  1400. }
  1401. .button.button-tertiary:active, .button.button-tertiary:focus, .button.button-tertiary:hover {
  1402.     background: var(--purple-secondary);
  1403.     color: var(--cyan-primary);
  1404. }
  1405. /* 15. Mobile View */
  1406. .ui__header {
  1407.     background: var(--blue-primary);
  1408.     border-bottom: 1px solid var(--cyan-terciary);
  1409. }
  1410. .layout-single-column .ui__header {
  1411.     background: var(--dark);
  1412.     border-bottom: 1px solid var(--cyan-secondary);
  1413. }
  1414. /* 16. Modals */
  1415. .safety-action-modal__confirmation h1 {
  1416.     color: var(--pink-primary);
  1417. }
  1418. .safety-action-modal__confirmation {
  1419.     color: var(--cyan-primary);
  1420. }
  1421. .safety-action-modal__confirmation strong {
  1422.     color: var(--pink-primary);
  1423. }
  1424. .link-button {
  1425.     color: var(--pink-primary);
  1426. }
  1427. .hover-card .display-name bdi {
  1428.     color: var(--pink-primary);
  1429. }
  1430. .hover-card .display-name__account {
  1431.     color: var(--pink-secondary);
  1432. }
  1433. .hover-card__bio {
  1434.     color: var(--cyan-primary);
  1435. }
  1436. .hover-card .account-fields dl dt {
  1437.     color: var(--pink-secondary);
  1438. }
  1439. .hover-card .account-fields {
  1440.     color: var(--pink-primary);
  1441. }
  1442. .hover-card__number {
  1443.     color: var(--cyan-primary);
  1444. }
  1445. .account__domain-pill__popout__header h3 {
  1446.     color: var(--cyan-primary);
  1447. }
  1448. .account__domain-pill__popout__header__icon {
  1449.     background: var(--blue-secondary);
  1450.     color: var(--cyan-primary);
  1451. }
  1452. .account__domain-pill__popout__handle {
  1453.     background: rgba(140, 141, 255, .1);
  1454.     border: 2px dashed var(--pink-primary);
  1455.     color: var(--pink-primary);
  1456. }
  1457. .account__domain-pill__popout__parts__icon {
  1458.     color: var(--pink-primary);
  1459. }
  1460. .account__domain-pill__popout__parts h6 {
  1461.     color: var(--cyan-primary);
  1462. }
  1463. .account__domain-pill__popout {
  1464.     color: var(--cyan-secondary);
  1465. }
  1466. /* 17. Settings */
  1467. /* TODO */
  1468. }