:root {
/* Light Theme Colors */
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--bg-tertiary: #f1f3f5;
--bg-hover: #e9ecef;
--bg-active: #dee2e6;
--text-primary: #212529;
--text-secondary: #495057;
--text-tertiary: #868e96;
--text-disabled: #adb5bd;
--border-light: #e9ecef;
--border-medium: #dee2e6;
--border-dark: #ced4da;
--accent-primary: #4c6ef5;
--accent-hover: #4263eb;
--accent-light: #748ffc;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 24px;
}
/* Dark Theme */
:root.dark-theme,
body.dark-theme {
--bg-primary: #1a1b1e;
--bg-secondary: #25262b;
--bg-tertiary: #2c2e33;
--bg-hover: #373a40;
--bg-active: #424549;
--text-primary: #e9ecef;
--text-secondary: #c1c2c5;
--text-tertiary: #909296;
--text-disabled: #5c5f66;
--border-light: #2c2e33;
--border-medium: #373a40;
--border-dark: #424549;
--accent-primary: #5c7cfa;
--accent-hover: #748ffc;
--accent-light: #4c6ef5;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}
body,
html {
overflow: hidden;
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
background-color: var(--bg-secondary);
color: var(--text-primary);
transition: background-color 0.2s ease, color 0.2s ease;
}
#paperCanvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--bg-secondary);
}
body,
input,
button,
textarea,
label {
font-size: 13px;
line-height: 1.5;
font-weight: 400;
}
input,
select {
border: 1px solid var(--border-medium);
outline: none;
padding: 0 var(--spacing-sm);
height: 28px;
box-shadow: none;
background-color: var(--bg-primary);
color: var(--text-primary);
border-radius: var(--radius-sm);
transition: all 0.15s ease;
}
input:hover,
select:hover {
border-color: var(--border-dark);
}
input:focus,
select:focus {
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.1);
}
.hidden {
display: none;
}
.loadingScreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--bg-primary);
opacity: 1;
z-index: 200;
transition: opacity 0.4s ease;
}
.loadingScreen.disabled {
opacity: 0;
}
.loadingScreen .panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
color: var(--text-secondary);
display: flex;
align-items: center;
font-weight: 500;
letter-spacing: 0.01em;
gap: 8px;
}
.loading-text {
font-size: 16px;
}
.loading-dots {
display: inline-flex;
gap: 4px;
align-items: center;
}
.loading-dots .dot {
width: 6px;
height: 6px;
background-color: var(--text-secondary);
border-radius: 50%;
animation: dotPulse 1.4s infinite ease-in-out;
}
.loading-dots .dot:nth-child(1) {
animation-delay: 0s;
}
.loading-dots .dot:nth-child(2) {
animation-delay: 0.2s;
}
.loading-dots .dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes dotPulse {
0%,
60%,
100% {
opacity: 0.3;
transform: scale(0.8);
}
30% {
opacity: 1;
transform: scale(1.2);
}
}
.zoom-in {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
.zoom-out {
cursor: -webkit-zoom-out;
cursor: zoom-out;
}
.grab {
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
}
.grabbing {
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.cursor-select {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-bezier {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-bezier-add {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-bezier-close {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-bezier-remove {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-detailselect {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-eyedropper {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-eyedropper-filled {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-draw {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-brush {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-cloud {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-broadbrush {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-spraypaint {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-eraser {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-scalpel {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-spiro {
cursor: url('data:image/svg+xml;utf8,') 0 0, crosshair;
}
.cursor-circle,
.cursor-circle2points,
.cursor-circle3points,
.cursor-concentricCircles,
.cursor-concentricCirclesTool,
.cursor-rectangle,
.cursor-exportrect,
.cursor-line,
.cursor-arc,
.cursor-arc3points,
.cursor-dubins,
.cursor-star,
.cursor-polygon,
.cursor-graph,
.cursor-triangulator {
cursor: crosshair;
}
.cursor-triangular {
cursor: crosshair;
}
.colorInputBlocker,
.menuInputBlocker {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
z-index: 300;
}
.menuInputBlocker {
z-index: 99;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
select,
.comboSelect {
height: 28px;
margin: 0;
outline: none;
cursor: pointer;
}
.comboSelect {
position: absolute;
right: 0;
width: 28px;
padding: 0;
top: 0;
background-color: transparent;
border: 0;
}
select,
.comboSelect,
select::-ms-expand {
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('../assets/selectButton.png');
background-repeat: no-repeat;
background-position: right center;
}
select::-ms-expand {
display: none;
}
button {
cursor: pointer;
background-color: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border-medium);
border-radius: var(--radius-sm);
padding: var(--spacing-xs) var(--spacing-md);
transition: all 0.15s ease;
font-weight: 500;
}
button:hover {
background-color: var(--bg-hover);
border-color: var(--border-dark);
}
button:active {
background-color: var(--bg-active);
transform: translateY(1px);
}
/* Resize Cursors */
body.resize-n,
body.resize-n #paperCanvas,
body.resize-n * {
cursor: n-resize !important;
}
body.resize-s,
body.resize-s #paperCanvas,
body.resize-s * {
cursor: s-resize !important;
}
body.resize-e,
body.resize-e #paperCanvas,
body.resize-e * {
cursor: e-resize !important;
}
body.resize-w,
body.resize-w #paperCanvas,
body.resize-w * {
cursor: w-resize !important;
}
body.resize-ne,
body.resize-ne #paperCanvas,
body.resize-ne * {
cursor: ne-resize !important;
}
body.resize-nw,
body.resize-nw #paperCanvas,
body.resize-nw * {
cursor: nw-resize !important;
}
body.resize-ew,
body.resize-ew #paperCanvas,
body.resize-ew * {
cursor: ew-resize !important;
}
body.resize-row,
body.resize-row #paperCanvas,
body.resize-row * {
cursor: row-resize !important;
}
body.resize-col,
body.resize-col #paperCanvas,
body.resize-col * {
cursor: col-resize !important;
}
#paperCanvas.resize-ne {
cursor: ne-resize !important;
}
#paperCanvas.resize-ew {
cursor: ew-resize !important;
}
#paperCanvas.resize-row {
cursor: row-resize !important;
}
#paperCanvas.resize-col {
cursor: col-resize !important;
}
body.resize-se,
body.resize-se #paperCanvas,
body.resize-se * {
cursor: se-resize !important;
}
body.resize-sw,
body.resize-sw #paperCanvas,
body.resize-sw * {
cursor: sw-resize !important;
}
/* Canvas Text Input - Inline editing */
.canvasTextInput {
position: absolute;
background: rgba(255, 255, 255, 0.95);
border: 2px solid #4A90E2;
outline: none;
padding: 4px;
resize: none;
overflow: hidden;
z-index: 10000;
line-height: 1.2;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 2px;
}
.dark-theme .canvasTextInput {
background: rgba(37, 38, 43, 0.95);
color: #e9ecef;
border-color: #4c6ef5;
}
.canvasTextInput:focus {
border-color: #2b7de9;
box-shadow: 0 2px 12px rgba(74, 144, 226, 0.3);
}