/* ==UserStyle==
@name           Dracula for Pocketbase
@namespace      git.m3.fyi/Marsn3
@version        1.0.0
@description    A dark Theme for Pocketbase
@author         Marsn3
@homepageURL https://git.m3.fyi/Marsn3/custom-css
@updateURL https://git.m3.fyi/projects/22/raw/main/pocketbase.user.css
@license MIT
==/UserStyle== */

@-moz-document domain("api.m3.fyi") {
  /*~~~~~ Base Colors ~~~~~*/
  :root {
    --monospaceFontFamily: "ComicCodeLigatures Nerd Font", "Ubuntu Mono",
      monospace, emoji;
    --txtPrimaryColor: #f8f8f2;
    --txtHintColor: #7b81a6;
    --txtDisabledColor: #9599b7;
    --primaryColor: #969dca;
    --bodyColor: #282a36;
    --baseColor: #282a36;
    --baseAlt1Color: #585b74;
    --baseAlt2Color: #4d5166;
    --baseAlt3Color: #424457;
    --baseAlt4Color: #373949;
    --infoColor: #8be9fd;
    --infoAltColor: #8be9fd;
    --successColor: #50fa7b;
    --successAltColor: #50fa7b;
    --dangerColor: #ff5555;
    --dangerAltColor: #ff5555;
    --warningColor: #f1fa8c;
    --warningAltColor: #ffffa5;
    --overlayColor: rgba(65, 82, 105, 0.25);
    --tooltipColor: rgba(255, 255, 255, 0.85);
    --shadowColor: rgba(0, 0, 0, 0.05);
    accent-color: var(--primaryColor);
  }

  /*~~~~~ Buttoms ~~~~~*/
  .btn.btn-secondary,
  .btn.btn-outline {
    color: var(--txtHintColor);
    background: var(--baseAlt4Color);
  }

  /*~~~~~ Labels ~~~~~*/
  .label.label-warning,
  .label.label-info,
  .label.label-success,
  .alert {
    color: var(--baseColor);
  }
  .alert.alert-warning .icon {
    color: var(--baseColor);
  }

  /*~~~~~ Syntax Highlighting for Code fields ~~~~~*/
  .prism-light,
  code {
    background: var(--baseAlt4Color) !important;
  }
  .prism-light .token.punctuation {
    color: var(--txtPrimaryColor);
  }
  .prism-light .token.property {
    color: var(--infoColor);
  }
  .prism-light .token.operator {
    color: var(--dangerColor);
  }
  .prism-light .token.keyword {
    color: var(--dangerColor);
  }
  .prism-light .token.string {
    color: var(--successColor);
  }
  .prism-light .token.boolean {
    color: var(--warningColor);
  }
  .prism-light .token.number {
    color: #ffb86c;
  }
  .prism-light .token.class-name {
    color: #8be9fd;
  }
  .prism-light .token.comment {
    color: #9599b7;
  }
  .prism-light .token.function {
    color: #bd93f9;
  }

  /*~~~~~ Colored Delete Icon ~~~~~*/
  .ri-delete-bin-7-line {
    color: var(--dangerColor);
  }

  /*~~~~~ Syntax Highlighting for Regex Fields ~~~~~*/
  .ͼb {
    color: #bd93f9;
  }
  .ͼe {
    color: var(--dangerColor);
  }
}