/* ==UserStyle==
@name           Photopea Dracula
@namespace      git.m3.fyi/Marsn3
@version        1.0.0
@description    Dracula Theme for Photopea
@author         Marsn3
@homepageURL https://git.m3.fyi/Marsn3/custom-css
@updateURL https://git.m3.fyi/projects/22/raw/main/photopea.user.css
@license MIT
@var select accentColor "Accent Color" {
    "Cyan":"#8be9fd",
    "Green":"#50fa7b",
    "Orange":"#ffb86c",
    "Pink":"#ff79c6",
    "Purple*":"#bd93f9",
    "Red":"#ff5555",
    "Yellow":"#f1fa8c"
}
==/UserStyle== */
@-moz-document domain("photopea.com") {
  /*~~~~~ Base Colors ~~~~~*/
  html {
    --base: #282a36 !important;
    --bg-panel: #373949 !important;
    --bg-canvas: #44475a !important;
    --bg-input: #373949 !important;
    --bg-bbtn: #4d5166 !important;
    --bg-bbtnOver: #424457 !important;
    --brdr: #282a36 !important;
    --text-color: #f8f8f2 !important;
    --alphaDark: 0.25 !important;
    --gs-invert: 1 !important;
    --accent: var(--accentColor) !important;
  }

  /*~~~~~ Style Alert Panel ~~~~~*/
  .alertpanel {
    background-color: var(--base);
    color: var(--text-color);
  }

  /*~~~~~ Style Input Elements ~~~~~*/
  input[type="checkbox"] {
    accent-color: var(--accent);
  }

  input[type="range"] {
    accent-color: var(--accent);
  }

  /*~~~~~ Style Storage Panel ~~~~~*/
  .storage {
    background-color: var(--base);
    color: var(--text-color);
  }
  .storage .btn {
    background-color: var(--accent);
  }

  .storage img {
    filter: invert(var(--gs-invert));
  }

  /*~~~~~ Style Context Panel ~~~~~*/
  .cp_light {
    background-color: var(--bg-bbtn) !important;
    color: var(--text-color) !important;
  }

  .enab:hover {
    background-color: var(--accent) !important;
  }
  .contextpanel hr {
    background: var(--text-color) !important;
  }

  /*~~~~~ Style Template Browser ~~~~~*/
  #cats {
    color: var(--text-color);
  }
  body {
    background: var(--bg-canvas);
    color: #9699aa;
  }
  #cont {
    background-color: var(--base);
  }
  .order {
    color: var(--text-color);
  }

  #kwds {
    color: var(--text-color);
    background-color: var(--bg-input);
  }
  .blue,
  .clc:hover,
  .clickable:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .back {
    background-color: transparent;
  }
  .scrollable {
    scrollbar-color: var(--bg-input) var(--base);
  }

  /*~~~~~ Style Gallery Plugin ~~~~~*/
  button[onclick="msg()"] {
    background: var(--base);
    color: var(--text-color);
    border: none;
  }
  input#keyws {
    background: var(--bg-input);
    color: var(--text-color);
  }

  /*~~~~~ Hide Account Button ~~~~~*/
  button[style*="background-color:#bb0000"] {
    display: none !important;
  }

  /*~~~~~ Hide Social Icons ~~~~~*/
  .fitem[style*="cursor:pointer"] {
    display: none;
  }

  /*~~~~~ Hide Outgoing Links ~~~~~*/
  .fitem[style*="cursor: pointer"] {
    display: none;
  }

  /*~~~~~ Hide Ads ~~~~~*/
  #cap,
  body > .app > div[style*="z-index: 1"] {
    display: none !important;
  }

  .mainblock > .block > div,
  body > .app > div > div[style*="width"] {
    width: unset !important;
    max-width: unset !important;
  }

  body > .app > div > div[style*="width"] > div[style*="left"] {
    left: 0 !important;
    right: 0 !important;
  }

  body > .app > div {
    flex-basis: 100% !important;
  }

  body > .app > div > .cmanager .contextpanel[style*="top: 163"] {
    left: unset !important;
    right: 32px !important;
  }

  .mainblock {
    flex-grow: 1 !important;
  }

  .mainblock > .block > div > div.pbody {
    width: max-content;
    margin: auto !important;
  }

  .intro {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
  }
}