/*
 * Dracula Theme for Miniflux
 *
 * Set Appearance to "System", then paste this file into Settings → Custom CSS.
 * Optional tweaks are available in mf-drc-opt.css.
 */

:root {
  --body-color: #f8f8f2;
  --body-background: #282a36;
  --hr-border-color: #44475a;
  --title-color: #bd93f9;
  --link-color: #f8f8f2;
  --link-focus-color: #8be9fd;
  --link-hover-color: #ff79c6;
  --link-visited-color: #6272a4;

  --header-list-border-color: #44475a;
  --header-link-color: #f8f8f2;
  --header-link-focus-color: #8be9fd;
  --header-link-hover-color: #ff79c6;
  --header-active-link-color: #ffb86c;

  --table-border-color: #44475a;
  --table-th-background: #282a36;
  --table-th-color: #f8f8f2;
  --table-tr-hover-background-color: #44475a;
  --table-tr-hover-color: #f8f8f2;

  --input-background: #44475a;
  --input-color: #f8f8f2;
  --input-placeholder-color: #6272a4;
  --input-focus-color: #f8f8f2;
  --input-focus-border-color: #8be9fd;
  --input-focus-box-shadow: 0 0 0 2px #44475a;

  --logo-color: #50fa7b;
  --logo-hover-color-span: #8be9fd;
  --pagination-link-color: #f8f8f2;
  --pagination-border-color: #44475a;

  --category-color: #f8f8f2;
  --category-background-color: #44475a;
  --category-border-color: #6272a4;
  --category-link-color: #f8f8f2;
  --category-link-hover-color: #ffb86c;
  --category-has-unread-background-color: #44475a;
  --category-has-unread-border-color: #6272a4;

  --alert-color: #f8f8f2;
  --alert-background-color: #282a36;
  --alert-border-color: #44475a;
  --alert-success-color: #282a36;
  --alert-success-background-color: #50fa7b;
  --alert-success-border-color: #44475a;
  --alert-error-color: #f8f8f2;
  --alert-error-background-color: #ff5555;
  --alert-error-border-color: #44475a;
  --alert-info-color: #f8f8f2;
  --alert-info-background-color: #44475a;
  --alert-info-border-color: #44475a;

  --page-header-title-border-color: #44475a;
  --panel-background: #282a36;
  --panel-border-color: #44475a;
  --panel-color: #f8f8f2;

  --current-item-border-color: #8be9fd;
  --entry-header-border-color: #44475a;
  --entry-header-title-link-color: #f8f8f2;
  --entry-content-color: #f8f8f2;
  --entry-content-code-color: #50fa7b;
  --entry-content-code-background: #282a36;
  --entry-content-code-border-color: #44475a;
  --entry-content-quote-color: #44475a;
  --entry-content-abbr-border-color: #44475a;
  --entry-enclosure-border-color: #44475a;

  --feed-parsing-error-background-color: #ff5555;
  --feed-parsing-error-border-color: #44475a;
  --feed-has-unread-background-color: #6272a4;
  --feed-has-unread-border-color: #44475a;

  --item-border-color: #44475a;
  --item-status-read-title-link-color: #8be9fd;
  --item-status-read-title-focus-color: #f1fa8c;

  --button-primary-border-color: #ffb86c;
  --button-primary-background: #ffb86c;
  --button-primary-color: #282a36;
  --button-primary-focus-border-color: #ff79c6;
  --button-primary-focus-background: #ff79c6;

  --keyboard-shortcuts-li-color: #f8f8f2;
  --counter-color: #ffb86c;
}

/* Keyboard shortcuts panel ("?") */

#keyboard-shortcuts-modal {
  background-color: #44475a;
}

#page-header-title a:hover {
  color: #6272a4;
}

.item-meta > ul > li {
  color: #f8f8f2;
}

.item-meta > ul > li > a {
  color: #8be9fd;
  &:hover {
    color: #ffb86c;
  }
}

.item-meta-icons li > :is(a, button) {
  color: #8be9fd;
  &:hover {
    color: #ffb86c;
  }
}