miniPaint/src/css/reset.css

:root {
	/* original - default */
	--background: #666d6f;
	--text-color: #f4f3f3;
	--text-color-muted: #c1c1c1;
	--text-color-red: #e38282;
	--text-color-green: #8bdb8b;
	--text-color-blue: #a4a4ff;
	--link-color: #9ffda5;
	--section-background-color: #323a3c;
	--area-background-color: #464d4f;
	--block-background-color: #464d4f;
	--header-background-color: #373d3f;
	--button-background-color: #2f3739;
	--button-background-color-hover: #575f62;
	--button-background-color-active: #4d5153;
	--button-shadow-color: rgba(0, 0, 0, 0.3);
	--button-text-color-active: #adecab;
	--button-border-radius: .4rem;
	--button-toggle-background-color: #575f62;
	--input-background-color: #2f3739;
	--input-text-color: #f4f3f3;
	--input-border-color: #0f0f0f;
	--input-border-color-active: #70996e;
	--input-border-radius: .4rem;
	--input-group-border-color:  #323a3c;
	--menu-background-color: #222;
	--menu-icons-filter: invert(1);
	--menu-icons-filter-active: none;
	--menu-text-color: #cccccc;
	--number-input-arrow-width: 2rem;
	--background-color-active: #adecab;
	--background-color-hover: #575f62;
	--text-color-active: #215b2a;
	--border-color: #727677;
	--scrollbar-track-color: #464d4f;
	--scrollbar-thumb-color: #2f3739;
	--mobile-menu-toggle-filter: invert(1);
}
body.theme-light{
	/* light */
	--background: #f9f9fa;
	--text-color: #0c0c0d;
	--text-color-muted: #444444;
	--text-color-red: #bb2424;
	--text-color-green: #2b882b;
	--text-color-blue: #5454ca;
	--link-color: #000080;
	--section-background-color: #eaeaea;
	--area-background-color: #d9d9d9;
	--block-background-color: #eaeaea;
	--header-background-color: #dbdbdb;
	--button-background-color: #f9f9fa;
	--button-background-color-hover: #ddd;
	--button-background-color-active: #f3f3f3;
	--button-text-color-active: #59aed8;
	--button-shadow-color: rgba(0, 0, 0, 0.1);
	--button-toggle-background-color: #b7b7b7;
	--input-background-color: #ffffff;
	--input-text-color: #0c0c0d;
	--input-border-color: #ccc;
	--input-border-color-active: #59aed8;
	--input-group-border-color: #c4c4c4;
	--menu-background-color: #eaeaea;
	--menu-icons-filter: none;
	--menu-icons-filter-active: invert(1);
	--menu-text-color: #333333;
	--menu-dropdown-hover-background-color: #a3dbf7;
	--menu-dropdown-border-color: #15439b;
	--background-color-active: #a3dbf7;
	--background-color-hover: #c4c4c4;
	--text-color-active: #15439b;
	--border-color: #c1c1c1;
	--scrollbar-track-color: #f9f9fa;
	--scrollbar-thumb-color: #919090;
	--mobile-menu-toggle-filter: none;
}
body.theme-green{
	/* green */
	--background: #050702;
	--text-color: #acc3a9;
	--text-color-muted: #80937d;
	--link-color: #9ffda5;
	--section-background-color: #1c2e04;
	--area-background-color: #3b5f11;
	--block-background-color: #3b5f11;
	--header-background-color: #2b460f;
	--button-background-color: #2e4a0d;
	--button-background-color-hover: #58960e;
	--button-background-color-active:#2b460f;
	--button-text-color-active: #ccc;
	--button-toggle-background-color: #243e05;
	--input-background-color: #ffffff;
	--input-text-color: #0c0c0d;
	--input-border-color: #ccc;
	--menu-background-color: #1c2e04;
	--menu-icons-filter: invert(1);
	--menu-icons-filter-active: none;
	--menu-text-color: #acc3a9;
	--background-color-active: #58960e;
	--background-color-hover: #58960e;
	--text-color-active: #acc3a9;
	--border-color: #4d6b1e;
	--scrollbar-track-color: #050702;
	--scrollbar-thumb-color: #80937d;
	--mobile-menu-toggle-filter: invert(1);
}

*{
	box-sizing: border-box;
	background-repeat: no-repeat;
}
html {
	font-size: 10px; /* Base is 10px for easy REM calculation */
}
body{
	margin: 0px;
	padding: 0px;
	padding-top: 30px;
	background-color: #424F5A;
	background: var(--background);
	font-size: 1.3rem;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	color: var(--text-color);
	line-height: 1.4;
	font-weight: normal;
	overflow: hidden;
}
canvas{
	outline: none;
	/* disable select canvas */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	/* disable antialiasing */
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -o-crisp-edges;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}
img{
	border: none;
}
td, th{
	vertical-align:top;
}
table{
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	border-collapse: collapse;
	border-spacing: 0;
	width:100%;
}
hr{
	border-color: rgba(0,0,0,0.3);
	border-bottom: 0;
}
input[type="text"], select, input[type="number"], textarea{
	background: var(--input-background-color);
	border: 1px solid var(--input-border-color);
	border-radius: var(--input-border-radius);
	color: var(--input-text-color);
	padding: 3px 5px;
	font-size: 13px;
}
input:disabled {
	opacity: 0.3;
}
select{
	padding: 2px 4px;
}
input[type="range"]{
	margin-left:0px;
	width:100%;
}
button, input[type="button"]{
	border-radius: var(--button-border-radius);
	box-shadow: 0 1px 2px 0 var(--button-shadow-color), 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
	cursor: pointer;
	border: 1px solid var(--border-color);
	background-color: var(--button-background-color);
	color: var(--color-text);
}
button:hover, input[type="button"]:hover{
	background-color: var(--button-background-color-hover);
}
button:disabled, input[type="button"]:disabled{
	visibility:hidden;
}
button[aria-pressed="true"], input[type="button"][aria-pressed="true"]{
	background-color: var(--button-background-color-active);
	color: var(--button-text-color-active);
	box-shadow: 0 1px 2px 0 var(--button-shadow-color), 0 1px 1px 1.5px rgba(58, 40, 40, 0.1) inset, 0 -1px 0 0 var(--button-text-color-active) inset;
}
button[aria-pressed="true"]:hover, input[type="button"][aria-pressed="true"]:hover{
	background-color: var(--button-background-color-hover);
}
label{
	display: inline-block;
	vertical-align: top;
	margin-top: 7px;
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track-piece {
    background: rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.6);
}
@supports (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
		zoom: 1.5;
	}
}
@supports not (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
		transform: scale(1.5);
		transform-origin: left center;
		margin: 8px 12px 8px 0;
	}
}