poanse_obsidian-taskmap/styles.css

/*

This CSS file will be included with your plugin, and
available in the app when your plugin is enabled.

If your plugin does not need CSS, delete this file.

*/
/*:global(canvas) {*/
/*	pointer-events: auto;*/
/*}*/
.pixi-container {
	width: 100%;
	height: 100%;
	overflow: visible;
	
	background-color: #1C1C1C;

	transform: translateZ(0);
	will-change: transform;
}

.task {
	/*background: #111;*/
	/*background-color: #1E1E1E;*/
	/*background: #0f0f0fff;*/
	border-style: solid;
	border-width: 2px;
	/*border-color: #7e7e7e;*/
	border-radius: 20px;
	/*padding: 35px;*/
	text-align: center;
	color: white;
	font-size: 20px;
	font-family: "Segoe UI";
	line-height: 1.5;
	width: 280px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	transition: background-color 0.3s, border-color 0.3s;
	transform: translateZ(0);
	will-change: transform;
}
.task.hovered {
	width: 284px;
	height: 84px;
	border-width: 4px;
	transform: translate3d(-2px,-2px,0);
}

.task-text-container {
	width: 160px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	padding: 0;
	gap: 0;
}

textarea:hover {
	background-color: transparent; 
}

textarea:focus {
	border: none;
	outline: none;
	box-shadow: none;
}

.tasktext {
	cursor: text;
	margin: 0;
	padding: 0;
	gap: 0;
	border: none;
	/*transform: translate3d(0,20px,0);*/
	width: 160px;
	/*height: 60px;*/
	/*width: 100%;*/
	/*height: 100%;*/
	background: transparent;
	resize: none;
	font-size: 20px;
	font-family: "Segoe UI";
	line-height: 1.5;
	/*border: 4px solid #707070;*/
	/*border-radius: 22px;*/
	outline: none;
	box-shadow: none;
	/*padding: 35px;*/
	position: absolute;
	text-align: center;
	justify-content: center;
	align-items: center;
	color: white;
	overflow: hidden;
}
.text-edit {
	display: flex;
	align-items: center;
	field-sizing: content;
}
div.text-preview p {
	top: 50%;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	gap: 0;
	border: none;
	text-align: center;
	justify-content: center;
	align-items: center;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow: visible;
}
/*.wrapper {*/
/*	width: 150px;*/
/*	margin: 20px auto;*/
/*	font-family: system-ui, sans-serif;*/
/*}*/

/*.toolbar .circle {*/
/*	stroke: white;*/
/*}*/

/* --- Trigger Styles --- */
.button {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0;
	/*background-color: #e0e0e0;*/
	cursor: pointer;
	border-radius: 4px;
	user-select: none;

	background: #0f0f0fff;
	/*background-color: #1E1E1E;*/

	/* This handles the smooth color change for the SVG and Text */
	transition: background-color 0.2s, color 0.2s;
}
.button:hover {
	background-color: #343434;
	/*border-color: red;*/
	border-width: 0;
	outline: none;
}
.button svg {
	transition: stroke 0.2s;
}

.button.is-pressed-down svg {
	/*background-color: #0056b3;*/
	/*color: white;*/
	stroke: white;
}

.button.is-pressed-up {
	background-color: #343434;
	color: white;
}
.button.is-pressed-up svg {
	/*background-color: #0056b3;*/
	stroke: white;
}

.toolbar {
	gap: 2px;
	padding: 2px 2px;
	/*background: #181818;*/
	background: #0f0f0fff;
	/*background-color: #1E1E1E;*/
	border-radius: 8px;
	border-color: #343434;
	border-style: solid;
	border-width: 2px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translate3d(-2px,-2px,0);
	will-change: transform,scale,translate;
	min-width: 98px;
	min-height: 22px;
	/*transform: translate(-50%, -50%);*/
}
.subtoolbar {
	/*margin-top: 10px;*/
	/*border: 1px solid #ccc;*/
	/*background: #181818;*/

	background: #0f0f0fff;
	/*background-color: #1E1E1E;*/
	overflow: hidden; /* Important for slide animations to look clean */
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 4px;
	border-radius: 8px 4px;
	justify-content: center;
	align-items: center;
	position: absolute;
}

.toolbar svg {
	width: 20px;
	height: 20px;
	stroke: #bbb;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	will-change: transform,scale,translate;
	/*align-content: center;*/
	/*dominant-baseline: central;*/
	/*padding: 2px;*/
}
.toolbar .button {
	transition: background-color 0.5s ease;
}

.subtoolbar svg {
	width: 20px;
	height: 20px;
	stroke: #bbb;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

svg.draft {
	stroke: #7E7E7E;
	fill: #1E1E1E;
}
svg.ready {
	stroke: #A1383D;
	fill: #2E2122;
}
svg.in-progress {
	stroke: #A6A45D;
	fill: #2C2C24;
}
svg.done {
	stroke: #3E9959;
	fill: #212B24;
}
.task.draft {
	border-color: #7E7E7E;
	background-color: #1E1E1E;
}
.task.ready {
	border-color: #A1383D;
	background-color: #2E2122;
}
.task.in-progress {
	border-color: #A6A45D;
	background-color: #2C2C24;
}
.task.done {
	border-color: #3E9959;
	background-color: #212B24;
}