/**
 * https://submelon.dev/external/community.frame.work.css
 * CSS Override script for https://community.frame.work/
 *
 * Provides the following features:
 *  - a differing color for visited topics, so unread topics have better visibility
 *  - better dark mode/light mode interoperability if relying on system/"auto" mode
 *
 * Most of this is borrowed from Framework's official themes and tweaked slightly.
 * This is to be used with the "Framework" theme as opposed to "Framework (Dark)"
 * for the overrides to work properly.
 *
 * You can use a browser extension like "Custom Style Script" to link this stylesheet.
 */

tr.topic-list-item.visited > td.main-link > span.link-top-line > a {
  color: var(--primary-medium) !important;
}

@media (prefers-color-scheme: dark) {
  .topic-list .main-link a.title {
    color: var(--primary) !important;
  }

  .nav-pills > li a.active {
    color: var(--primary) !important;
  }

  :root {
    --scheme-type: dark;
    --primary: #f5f5f5;
    --secondary: #101011;
    --tertiary: #f45a27;
    --quaternary: #f45a27;
    --header_background: #f45a27;
    --header_primary: #f5f5f5;
    --highlight: #ffcc15;
    --danger: #ff2b24;
    --success: #00ff8f;
    --love: #ff7360;
    --always-black-rgb: 0, 0, 0;
    --primary-rgb: 245, 245, 245;
    --primary-low-rgb: 53.9, 53.9, 53.9;
    --primary-very-low-rgb: 44.1, 44.1, 44.1;
    --secondary-rgb: 16, 16, 17;
    --header_background-rgb: 244, 90, 39;
    --tertiary-rgb: 244, 90, 39;
    --primary-very-low: #2c2c2c;
    --primary-low: #363636;
    --primary-low-mid: #878787;
    --primary-medium: #9f9f9f;
    --primary-high: #b8b8b8;
    --primary-very-high: #ddd;
    --primary-50: #2c2c2c;
    --primary-100: #313131;
    --primary-200: #363636;
    --primary-300: #626262;
    --primary-400: #878787;
    --primary-500: #939393;
    --primary-600: #9f9f9f;
    --primary-700: #acacac;
    --primary-800: #b8b8b8;
    --primary-900: #ddd;
    --header_primary-low: #f47356;
    --header_primary-low-mid: #f4a294;
    --header_primary-medium: #f5bfb8;
    --header_primary-high: #f5d3ce;
    --header_primary-very-high: #f5eae9;
    --secondary-low: #b5b5ba;
    --secondary-medium: #84848b;
    --secondary-high: #55555b;
    --secondary-very-high: #202022;
    --tertiary-very-low: #431303;
    --tertiary-low: #5e1b05;
    --tertiary-medium: #942b08;
    --tertiary-high: #ca3a0a;
    --tertiary-hover: #f67b52;
    --tertiary-50: #431303;
    --tertiary-100: #4b1604;
    --tertiary-200: #531804;
    --tertiary-300: #5e1b05;
    --tertiary-400: #712006;
    --tertiary-500: #812507;
    --tertiary-600: #942b08;
    --tertiary-700: #a73009;
    --tertiary-800: #ba3509;
    --tertiary-900: #ca3a0a;
    --quaternary-low: #511704;
    --highlight-low: #372b00;
    --highlight-medium: #7c6100;
    --highlight-high: #f8c200;
    --danger-low: #690300;
    --danger-low-mid: rgba(116, 4, 0, 0.7);
    --danger-medium: #bd0600;
    --danger-hover: #e90700;
    --success-low: #006639;
    --success-medium: #009956;
    --success-hover: #00cc72;
    --love-low: #8c1100;
    --wiki: green;
    --blend-primary-secondary-5: #393939;
    --primary-med-or-secondary-med: #84848b;
    --primary-med-or-secondary-high: #55555b;
    --primary-high-or-secondary-low: #b5b5ba;
    --primary-low-mid-or-secondary-high: #55555b;
    --primary-low-mid-or-secondary-low: #b5b5ba;
    --primary-or-primary-low-mid: #878787;
    --highlight-low-or-medium: #7c6100;
    --tertiary-or-tertiary-low: #5e1b05;
    --tertiary-low-or-tertiary-high: #ca3a0a;
    --tertiary-med-or-tertiary: #f45a27;
    --secondary-or-primary: #f5f5f5;
    --tertiary-or-white: #fff;
    --facebook-or-white: #fff;
    --twitter-or-white: #fff;
    --hljs-comment: #bba;
    --hljs-number: #aff;
    --hljs-string: #f99;
    --hljs-literal: #9ae;
    --hljs-tag: #99f;
    --hljs-attribute: #0ee;
    --hljs-symbol: #fbe;
    --hljs-bg: #333;
    --hljs-builtin-name: #f67b52;
    --google: #fff;
    --google-hover: #f2f2f2;
    --instagram: #e1306c;
    --instagram-hover: #ac194b;
    --facebook: #1877f2;
    --facebook-hover: #0a54b3;
    --cas: #70ba61;
    --twitter: #1da1f2;
    --twitter-hover: #0c85d0;
    --github: #100e0f;
    --github-hover: #463e42;
    --discord: #7289da;
    --discord-hover: #4a67cf;
    --gold: #e7c300;
    --silver: silver;
    --bronze: #cd7f32;
  }

  .custom-header-links .headerLink a {
    color: var(--primary) !important;
  }

  .nav-pills > li a.active {
    color: var(--primary);
    background-color: transparent;
    border-bottom: 3px solid var(--tertiary);
  }

  .btn.d-icon {
    color: var(--primary);
  }

  .btn-primary,
  #create-topic {
    background: var(--tertiary);
    color: var(--primary);
  }

  .btn-primary:hover,
  #create-topic:hover {
    background-color: darkorange;
    color: var(--secondary) !important;
  }

  .btn-primary:hover .d-icon,
  #create-topic:hover .d-icon {
    color: var(--secondary) !important;
  }

  .latest-topic-list-item .main-link a.title {
    color: var(--primary) !important;
  }

  .topic-list .main-link a.title {
    color: var(--primary) !important;
  }

  .category-list .category {
    border-color: transparent !important;
  }

  .d-header .title a,
  .d-header .title a:visited,
  .list-cell,
  .table-heading,
  .category-list td,
  .category-list th,
  .category-list .featured-topic a.last-posted-at,
  .category-list .featured-topic a.last-posted-at:visited {
    color: var(--primary-high-or-secondary-low);
  }

  .custom-footer {
    background: var(--primary-very-low);
  }

  .custom-footer .flexbox,
  .custom-footer .third-box .social .social-link .d-icon {
    color: var(--primary);
  }

  .custom-footer .footer-section-link-wrapper a,
  .custom-footer .third-box .small-link {
    color: var(--tertiary);
  }

  .d-header-icons .d-icon {
    color: var(--blend-primary-secondary-5);
  }

  .categories-list .category-list td {
    color: var(--primary);
  }

  .d-header .title a,
  .d-header .title a:visited,
  .list-cell,
  .table-heading,
  .category-list td,
  .category-list th,
  .category-list .featured-topic a.last-posted-at,
  .category-list .featured-topic a.last-posted-at:visited,
  .extra-info-wrapper .topic-link {
    color: var(--blend-primary-secondary-5) !important;
  }

  tr.topic-list-item.visited > td.main-link > span.link-top-line > a {
    color: var(--primary-700) !important;
  }
}