userstyles/src/photopea.user.css

/* ==UserStyle==
@name           Gruvbox for Photopea
@namespace      git.m3.fyi/Marsn3
@version        1.0.1
@description    Gruvbox Theme for Photopea
@author         Marsn3
@homepageURL https://git.m3.fyi/Marsn3/custom-css
@updateURL https://git.m3.fyi/Marsn3/custom-css/~raw/main/src/photopea.user.css
@license MIT
@var select accentColor "Accent Color" {
    "Aqua":"var(--aqua)",
    "Green*":"var(--green)",
    "Orange":"var(--orange)",
    "Blue":"var(--blue)",
    "Purple":"var(--purple)",
    "Red":"var(--red)",
    "Yellow":"var(--yellow)"
}
==/UserStyle== */
@-moz-document domain("photopea.com") {
  /*~~~~~ Base Colors ~~~~~*/
  html {
    --bg_h: #1d2021;
    --bg: #282828;
    --bg_s: #32302f;
    --bg1: #3c3836;
    --bg2: #504945;
    --bg3: #665c54;
    --bg4: #7c6f64;

    --fg: #fbf1c7;
    --fg1: #ebdbb2;
    --fg2: #d5c4a1;
    --fg3: #bdae93;
    --fg4: #a89984;

    --red: #fb4934;
    --green: #b8bb26;
    --yellow: #fabd2f;
    --blue: #83a598;
    --purple: #d3869b;
    --aqua: #8ec07c;
    --gray: #928374;
    --orange: #fe8019;

    --red-dim: #cc2412;
    --green-dim: #98971a;
    --yellow-dim: #d79921;
    --blue-dim: #458588;
    --purple-dim: #b16286;
    --aqua-dim: #689d6a;
    --gray-dim: #a89984;
    --orange-dim: #d65d0e;
    --monospaceFontFamily: "ComicCodeLigatures Nerd Font", "Ubuntu Mono",
      monospace, emoji;

    --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;
  }
}