Add Photopea Theme

photopea.user.css

@@ -0,0 +1,178 @@
+/* ==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;
+  }
+}