zipEditor.css

:root {
	--zedMain: #aaa;
	--zedDark: #ddd;
	--zedDarker: #ccc;
	--zedDarkest: #bbb;
	--zedFont: #000;
	--zedLightFont: #555;
	--zedDanger: #f00;
	--zedInvert: 1;
}
:root[theme="dark"] {
	--zedMain: #202020;
	--zedDark: #181818;
	--zedDarker: #080808;
	--zedDarkest: #000000;
	--zedFont: #fff;
	--zedLightFont: #999;
	--zedDanger: #f00;
	--zedInvert: 0;
}
::-webkit-scrollbar {
	width: 7px;
}
::-webkit-scrollbar-track {
	background-color: var(--zedMain);
}
::-webkit-scrollbar-thumb {
	background-color: var(--zedFont);
}
::-webkit-scrollbar-thumb:hover {
	background-color: var(--zedLightFont);
}
html {
	scrollbar-color: var(--zedFont) var(--zedMain);
  	scrollbar-width: thin;
}
@font-face {
	font-family: "Montserrat";
	src: url("Montserrat-VF.woff2");
	font-variation-settings: "wght" 600;
}
.ze {
	width: 100vw;
	height: 100vh;
	background-color: var(--zedMain);
	position: fixed;
	top: 0;
	left: 0;
	transition: top 0.5s ease-out;
}
.ze * {
	font-family: "Montserrat";
	color: var(--zedFont);
	user-select: none;
}
.ze .loading {
	background-color: #000B;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	text-align: center;
}
.ze .loading h1 {
	font-size: 60px;
	margin: 0;
	margin-top: calc(30vh);
	color: white;
	animation: backandforth 1s ease-in-out alternate-reverse infinite;
}
.ze .loading h2 {
	font-size: 30px;
	margin: 0;
	color: white;
	animation: backandforth 1s ease-in-out alternate infinite;
}
@keyframes backandforth {
	from {
		transform: translateX(20px);
	}
	to {
		transform: translateX(-20px);
	}
}
.ze .effects {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background-color: #000B;
}
.ze .effects .window {
	position: absolute;
	left: calc(50vw - 250px);
	top: calc(50vh - 250px);
	width: 500px;
	height: 500px;
	z-index: 1000;
	background-color: #000B;
	text-align: center;
}
.ze .effects .window {
	position: absolute;
	left: calc(50vw - 250px);
	top: calc(50vh - 250px);
	width: 500px;
	height: 500px;
	z-index: 1000;
	background-color: var(--zedDarkest);
	text-align: center;
}
.ze .effects .title {
	margin: 5px;
}
.ze .effects .inputs {
	margin: 2px;
	padding: 20px;
	text-align: center;
}
.ze .effects .inputs p {
	font-size: 18px;
	margin: 2px;
}
.ze .effects canvas {
	max-width: 200px;
	max-height: 200px;
	display: inline-block;
	border: 1px solid var(--zedFont);
}
.ze .effects .apply {
	font-size: 30px;
	background-color: transparent;
	color: var(--zedFont);
	border: 1px solid var(--zedFont);
	cursor: pointer;
}
.ze .effects .apply:active {
	background-color: var(--zedMain);
}
.ze .topbar {
	width: 100vw;
	height: 50px;
	background-color: var(--zedDarker);
}
.ze .topbar .button {
	background-color: var(--zedDark);
	height: 50px;
	cursor: pointer;
	border: none;
	font-size: 30px;
}
.ze .topbar .button:hover {
	background-color: var(--zedMain);
	height: 50px;
	cursor: pointer;
}
.ze .closebutton {
	background-color: var(--zedDark);
	position: absolute;
	right: 0;
	top: 0;
	width: 50px;
	height: 50px;

	cursor: pointer;}
.ze .closebutton:hover {
	background-color: var(--zedDanger);
}
.ze .topbar .darkbutton {
	position: absolute;
	right: 5px;
	top: 5px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	mask-composite:exclude;
	filter: invert(var(--zedInvert));
}
.ze .sidebar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 400px;
	height: calc(100vh - 50px);
	background-color: var(--zedDark);
	overflow-y: scroll;
	transition: transform 0.2s ease-out;
}
.ze .sidebarbutton {
	position: absolute;
	left: 0px;
	top: calc(50vh - 20px);
	cursor: pointer;
	transition: transform 0.2s ease-out;
}
.ze .main {
	position: absolute;
	right: 0;
	bottom: 0;
	height: calc(100vh - 50px);
	width: 100vw;
}
.ze .main .textedit {
	width: 100%;
	height: 100%;
}
.ze .main .info {
	text-align: right;
}
.ze .main .info .filepathname {
	font-size: 15px;
	margin: 0;
	color: var(--zedLightFont);
	pointer-events: none;
	display: inline;
}
.ze .main .info .unsavedchanges {
	font-size: 15px;
	margin: 0;
	color: var(--zedDanger);
	pointer-events: none;
	display: none;
}
.ze .main .textedit textarea {
	width: calc(100% - 400px);
	margin-left: 400px;
	height: calc(100% - 30px);
	color: var(--zedFont);
	font-size: 18px;
	background-color: var(--zedDarker);
	font-family: "Consolas";
	user-select: text;
	border: none;
	outline: none;
}
.ze .main .savechangesbutton {
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 30px;
	background-color: var(--zedDark);
	border: 2px solid var(--zedDarker);
	border: none;
}
.ze .main .imageedit {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.ze .main .imageedit .window {
	width: 200px;
	position: fixed;
	background-color: var(--zedDarker);
	padding: 5px;
	z-index: 999;
}
.ze .main .imageedit .window p {
	font-size: 25px;
	margin: 0;
}
.ze .main .imageedit .window .squarebutton {
	width: 34px;
	height: 34px;
	background-color: transparent;
	border-radius: 0;
	outline: 0;
}
.ze .main .imageedit .window .selectedtool {
	background-color: var(--zedLightFont);
}
.ze .main .imageedit .window .pencil {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAG1SURBVEhL7Zcxa8JAGIavaaiNggQMBERcnC10cZDOYodUhyrYoQ52E1zEoaMU/4SzkxZEO9V/UAwdnQodBKGUdohgIF68fl+0pYKllHAptD7wet53p493ES+Sv4i8aj0lDaGQE6fnEUeiKM6SyeQcntsQ/BDccaSFQoH5/X6maZolCMIU68thPqxJa7Ua63a7rFqtmpvku6vWLSgd5HI5qdfrkXK5TGCrnYFoNCqqqroYDodnjLE7KD1iXcAHl3wpRUajEWm1WvvZbHYPugOIinW34m+ljUaDpFIp0u/38YtWgjw5gy7YeE3fA0KnjuM4D+afLl/mjq10K91Kf8T/kaY9lyqKcggNy+fzi1AoxFW6dizG4/GSLMsHuq5LlUqFJBKJndXQxw9+JpMhnU7HpJSeQ/l6OeqSWCx222w2p+12exEMBnGFNrft/UwgEDAmkwmFA5uhHPq0Xq9T3HZuUuAK3nhumqYjRkBOJUmyisWizUuKPEBwldZ4PH4xDMOCw/01EoncYx1ygZN4gDdkKMDYPp9vFg6Hdbi2l9A/hnBBhOCtyTPkBoKrw5on/MpfDo8h5A05DcH2ntANhQAAAABJRU5ErkJggg==);
}
.ze .main .imageedit .window .eraser {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFVSURBVEhL7ZUxioNAFIZ12WKLLTyAhQdIaWXtBYQEPIStILideIItPYILHkJvINha7AFMpYXF5D3zBrLZMDqzycBCPnjMG+F/XyA6Y/wHXmmVQSXzAwuKKdY7lDKfSZIwGaIo4mJldlDfwzDQyHXatmW2bf9N7Ps+K4qCRm6DZyCuLN67rsvmeaaR65RlyXgG8kriN6i+rmsauc40TcxxHMYzkFcSf4RhuAzYSpZl7DIDM6TF+AnwoFT1fU9asdik9RaU3Y5pmhii3XmPy7K54oVW7TzF2niKtfEwcdM01C13uRR4gEjBM3hWW5YlPLlELENkwAyXxnGsVww1oLSqKqFY+B/jWStTCEgtz/OWXoTwkoBfTe02giAwLjO4B/ReEl3XUXf7rX6IGKV5nmN7gDpic83dxVw6jiNKv85Pf3N3cZqmxzXpGvxzkK09lHY2Ho+GcQJ6EFU+PIYXewAAAABJRU5ErkJggg==);
}
.ze .main .imageedit .window .eyedropper {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAALqSURBVEhL1ZZfSFNRHMfvTef+qM3p/rDplpOQ6dpDGBRTJqaNiojeNiqoSIIhAwd7HTFw7KWexnovBJ09jL0FvbhBT+Kr9CKErTA0iNTN/Tn39j27Z4JmL907ow/8OOf3O2d89zt/fvdw/wqetUqhgV2UutxHWF3qthC73X4HDenu7t6FfeF5vtLR0RGVRltANpvle3t7p1UqVXl+fr4Cvwqrp9PpQ5vN9qOnp+cd/HY2/QjZSz06OhrY3Nx8Ew6H+fHxcRULNyCEcNFotFSv118Ui8XnLNxArrAF9jUYDIqBQKBNCh0HgkIkEqlA3Ax3X4py3DnW/i3f3G53PJfL8RsbGyKLHWNgYIA3GAw/0XVJEQm5wtzCwkLS5/O9TCaT4s7OjtDW9lviImJ0ZY/ts2zhubk53/r6ejiVSvHYT35ra4sgfJQ9VoJsb2+b0P0sRRTAYrFcV6vVpZWVFSKCeDxOcI3EWCwm4CSLiUSCYLyC0x1iP5EPFcU9PVhaWjqAplAoFEhnZ2e1v7//tUajqc3OzlapqMlkesx+Ih+n03mDZgrRfSqaz+crWq32sK+v7wEd7+rqomJ11iqDw+GYQUbl5eXlMhM9pKKoXI/YlCYXWCsfFIubVBSZliBKVldX96h/iqhyTE5O3qN7mMlkqkz0gC437uh9NkV5PB7PLSqK0ytAVKTL2/JMvV7vXZ1OV0GmNSZabe4pXKU/qxKnZFqmmZrN5odsivLQg0QzbRYH3FOB/omhoaEnbIryjI2N6VGByOLiIj1IjeKAO1mbmpqKwJddZv8IlnhmZGRkj4nWaObDw8NP4bdmT5vga/IKJXFtYmLiOzIXBgcHn7GhlqKF7UMwazQaA7indinceq7CdmHTDe+MaLdarR9CoVBJr9evwXdIYeU5eUIvY3kv+f1+rcvlom/k21JYeU4Ke/AyfI+W4ECdR6trRM8Aur8FvIXfokJ9Qv9aI3pG0H0NwK7ATn2y/sdw3C803DV/JXnKZgAAAABJRU5ErkJggg==);
}
.ze .main .imageedit .window .selection {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsEAAA7BAbiRa+0AAACJSURBVEhL7ZdLDoAwCAWLx9a1Xhv7GvoJ7poALpiEtpAmIy6IligICzOfLXOCiJ52EDH3QK5rOnbvSD47rk9x1/1CbkV3fDqW3QTtOLCAWjDtFqyOIfZmiPH+5WjG6ojv2JsUuxEvzgFiQQ6QEFLsxhDnALFgdfzj87YHcl3TsXtH8uBfGH9KeQHvSadR/qL2hwAAAABJRU5ErkJggg==)
}
.ze .main .imageedit .window .fill {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAUhSURBVEhL7VZZSGRHFK1eXLrt1ta4rxgX3FAxiggRFyI6LpMBDZqgiaPO6BjJh34MirsEFYVIEvMRmY9goh+BiDAwJBDFIAbjh+KKIDEx4mjHvd3GrXPu69c99hqZJH85cKh699V7p+6tW7eK/Q8TeAv8FlwCn4HtoDNoDjK+/Ue4B/4BFoMhYAb4CfgcrAAJYhcXlzKFQjEtFArPBQLBC7S/wO6nef1qmALf1HT1EAguWVlZfWdra7vh7++/XV1dfTgwMHA2NDSkjIqK+hnvj0F3GmwKIr41BfroIfiYe7qBgICAK+Du+fl5WmJiolVjY6Pcz8/PBhMR47Ud7IqFhYUDjFHj+SfuIwMI+dYUyKtNTfclvLy8EjY2Npbj4uKienp6BFNTU5KVlRUB/5rD1taWLDo6+gphf4RHmowRLAnTB5eargZubm6529vb35eVlcmqqqocvL29hUVFRay3t5fBOxqipnZsbIzl5uY6Yd3PrK2tc7mPDWBJmKCbrZOT0/uHh4dP6uvrhampqXa8maWlpTGRSMRGRkYorJyou7s7LYe0oKBAKBaLq7iBBrAkTGFWUAee3j87O/uss7NTFBERoRPVoqSkhCGxBEqlUtDf38+Ki2kTMEFSUpIHIvCGj49PNDfwBiwJH4EKT0/Pe/v7+70dHR1i/MDkHg0LC2OYEGtvb2exsbEsMJDSgzGE2To9Pf0a26sR2a6XB5aE18HXdnZ2vqmrqxNCVKoxm0ZQUBBbW1tjhYWFvEWDzMxMKSKRNTs768ubOJgVzsrKskcjp7BFRkbaaKymsby8zOARw1IwBwcH3qoBlkkQGhoqHB0d/RhjdDljVnh6evrLhIQEVUZGhoQ3mcT6+jrr6upiFRUVuhAbAk6IMLm76LpqLGaEMcOkg4ODtysrKymR9NbmJki0oaGB5eXlsfj4eN5qjJiYGAGSTDI4OPgObzIWRjhE2KtfIMRCmUxmNiKrq6usubmZ5efnM0SFt5oHkuxqfHz8Pf7RWLipqSnh5OTk9ZSUFGvsQcpMJpVKGYoBQ3ZyYyYmJlhrayu3jW4jSkCxOUbFi0XXi56NajVC8lFycnIAstMe5ZG5uroyX19frigcHR2xvr4+Njw8zGpraxkOA/4ry1hcXLzAVrOyt7d/hHowRjYjj1GdPMrLy6ny0CypNjNHR0eGsLPJyUm2ubnJuru7zSaSAdTz8/MHWJIrZ2fnD/f29p7wdmPhi4uL5/DsisKKIs/ZlpaWuHp8enqqrqmpYZg5Z78BrlwaYm5ubqelpcUKS/UAYdaJEoyEsZafIhzcOhCw3mxmZoYLN6qTqQwn0QtN9yXgqQp5IMVRWYYd8jVv1sFojeGVTUhISBoKvwc97+7uXhPRNZokDxKmd7pJ4Sw+hajIzs7uIaI3wJv1oCesVqvp43Rk832E2RpUowz+WVpaKkKrDA4OvkaWUxW76Tn1dc/kKcJLW7HclKdaGHpBBYOKrRzkfhYeHv5DdnZ2HI67Z7R9sNbzKpWK7lwUBT1A9BCiYolE8gAHSz9v/nvA4xDwN1CLS7AW1EbGHWv2OSKyc+fOnRUcgRcoOGpiW1ubCvYTiL7Lj709IJAAKkEtjkC63hrCXS6X9+Gip8rJydlAps9B9BgHhP7RdFtAhDz+ETwHX4BPQbPXVNTnAIh9he4l1pQ7/V8JELEDH4O/g7+CH4CWbqJauPHtrXEzO7VZTdsoBzwAnyKz6Sby34PEQVvQ5LX03wFjfwFN3BXgrcXMcgAAAABJRU5ErkJggg==);
}
.ze .main .imageedit .window .contents {
	background-color: var(--zedMain);
}
.ze .main .imageedit .window .contents input[type="range"] {
	vertical-align: top;
	height: 30px;
}
.ze .main .imageedit .window .contents input[type="color"] {
	height: 30px;
	width: 95px;
	padding: 0;
	border: 0;
	background-color: transparent;
}
.ze .main .imageedit .window .contents .effectsbutton {
	font-size: 20px;
	background-color: var(--zedDark);
	color: var(--zedFont);
	border: 1px solid var(--zedLightFont);
	cursor: pointer;
}
.ze .main .imageedit .window .contents .effectsbutton:active {
	font-size: 20px;
	background-color: var(--zedLightFont);
	color: var(--zedFont);
}
.ze .main .imageedit .window .contents svg #toolsize {
	filter: invert(var(--zedInvert));
}
.ze .main .imageedit .window .contents .brushalpha {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURd/f3////zMjcGAAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAUSURBVBjTYwABQSCglEENMxgYGAAynwRB8BEAgQAAAABJRU5ErkJggg==);
}
.ze .main .imageedit .canvascontainer {
	position: absolute;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURd/f3////zMjcGAAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAUSURBVBjTYwABQSCglEENMxgYGAAynwRB8BEAgQAAAABJRU5ErkJggg==);
	cursor: crosshair;
	transform-origin: center;
	image-rendering: pixelated;
}
.ze .main .imageedit .canvascontainer canvas {
	position: absolute;
	left: 0;
	top: 0;
}
.ze .main .imageedit .canvascontainer .cursor {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: #00000020;
}
.ze .main .imageedit .canvascontainer .selection {
	position: absolute;
	left: 0;
	top: 0;
	background-color: #0090FF40;
}
.zipEditorFolder {
	padding-left: 25px;
	font-size: 25px;
	overflow: hidden;
	height: 30px;
	cursor: pointer;
	position: relative;
}
.zipEditorFolderText {
	color: var(--zedLightFont);
	margin: 0;
}
.zipEditorFolder .images {
	margin-left: 25px;
	background-color: var(--zedDarker);
}
.zipEditorFileName {
	color: var(--zedLightFont);
	margin: 0;
	margin-left: 25px;
}
.zipEditorFolder img {
	display: inline-block;
	border: 1px solid #888;
	background-color: white;
	vertical-align: top;
	margin: 2px;
	max-height: 60px;
	max-width: 60px;
	image-rendering: -webkit-optimize-contrast;
}
.zipEditorFolder svg {
	position: absolute;
}