178 lines
3.7 KiB
CSS
178 lines
3.7 KiB
CSS
/* ==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;
|
|
}
|
|
}
|