Spaces:

ALV1
/

mini-whiteboard

Running

Awesome unltra minil whiteboard app like excalidraw that can be mebeeded on my site axctually its more like onenote or miro and can have imgs pasted in

3c9e18a verified 11 months ago

Raw History Blame Contribute Delete

1.37 kB

:root {
  --color-primary: #6366f1;
  --color-secondary: #14b8a6;
  --grid-color: rgba(0,0,0,0.05);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }

.btn {
  @apply inline-flex items-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition;
}
.btn-tool {
  @apply w-9 h-9 p-0 justify-center rounded-md border border-gray-200 bg-white hover:bg-gray-50 active:bg-gray-100 transition;
}
.btn-tool.active {
  @apply ring-2 ring-primary-500/50 border-primary-500/50 bg-primary-50;
}

#grid {
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: 24px 24px;
}

#viewport, #world, canvas, #selectionLayer {
  user-select: none;
  touch-action: none;
}

#textEditor {
  white-space: pre-wrap;
  min-height: 1.2em;
}

.handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border: 2px solid var(--color-primary, #6366f1);
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
}

	:root {
	--color-primary: #6366f1;
	--color-secondary: #14b8a6;
	--grid-color: rgba(0,0,0,0.05);
	}

	* { box-sizing: border-box; }
	html, body { height: 100%; }
	body { margin: 0; }

	.btn {
	@apply inline-flex items-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition;
	}
	.btn-tool {
	@apply w-9 h-9 p-0 justify-center rounded-md border border-gray-200 bg-white hover:bg-gray-50 active:bg-gray-100 transition;
	}
	.btn-tool.active {
	@apply ring-2 ring-primary-500/50 border-primary-500/50 bg-primary-50;
	}

	#grid {
	background-image:
	linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
	linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
	background-size: 24px 24px;
	}

	#viewport, #world, canvas, #selectionLayer {
	user-select: none;
	touch-action: none;
	}

	#textEditor {
	white-space: pre-wrap;
	min-height: 1.2em;
	}

	.handle {
	position: absolute;
	width: 8px;
	height: 8px;
	background: white;
	border: 2px solid var(--color-primary, #6366f1);
	border-radius: 50%;
	pointer-events: auto;
	touch-action: none;
	}

	.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px dashed rgba(0,0,0,0.2);
	background: rgba(255,255,255,0.8);
	backdrop-filter: blur(6px);
	}