@nitrogenbuilder/client/nitrogen-client.css

Nitrogen Builder JS Client

#nitrogen-bob,
#nitrogen-curr-bob,
#nitrogen-curr-bob-border,
.nitrogen-curr-bob-border {
	--bob-border: rgba(0, 0, 0, 0.5);
	--bob-action-bg: var(--bob-border);
	--bob-action-border: #4e5965;
	--bob-action-text: #e2e5e9;
	--bob-action-bg-hover: #21252c;
	--bob-action-border-hover: #647382;
	--bob-action-text-hover: #fff;
}

#nitrogen-bob,
#nitrogen-curr-bob-border,
.nitrogen-curr-bob-border {
	pointer-events: none;
	position: absolute;
	z-index: 99999999;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
		Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

#nitrogen-curr-bob,
#nitrogen-curr-bob-border,
.nitrogen-curr-bob-border {
	transition: all 100ms ease-out;
}

#nitrogen-bob > div,
#nitrogen-curr-bob-border > div,
.nitrogen-curr-bob-border > .nitrogen-curr-bob-border-border {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px dashed var(--bob-border, #000);
}

.nitrogen-curr-bob-border-user {
	opacity: 0.7;
}

.nitrogen-curr-bob-border-user > .nitrogen-curr-bob-border-content {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	background: #000;
	height: calc(1em + 0.5rem);
	line-height: 1;
	color: #fff;

	z-index: 99999999;
	padding: 0.25rem 0.375rem;
	padding-bottom: 0;
	backdrop-filter: blur(2px);
	background: var(--bob-border, #000);
	border: 1px solid var(--bob-border, #000);
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	border-bottom-width: 0;
}

#nitrogen-curr-bob-border > div,
.nitrogen-curr-bob-border > .nitrogen-curr-bob-border-border {
	border-style: solid;
}

#nitrogen-curr-bob {
	width: 0;
	position: absolute;
	z-index: 100000000;
}

#nitrogen-curr-bob-actions {
	z-index: 99999999;
	display: flex;
	position: absolute;
	bottom: 100%;
	left: 100%;
	padding: 0.25rem;
	padding-bottom: 0;
	justify-content: space-between;
	backdrop-filter: blur(2px);
	background: var(--bob-action-bg, #fff);
	border: 1px solid var(--bob-action-border, #000);
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	border-bottom-width: 0;
}
#nitrogen-curr-bob-actions:hover {
	z-index: 100000000;
	border-color: var(--bob-action-border-hover, #000);
}

#nitrogen-curr-bob-move-module-up,
#nitrogen-curr-bob-move-module-down,
#nitrogen-curr-bob-clone-module,
#nitrogen-curr-bob-delete-module {
	align-items: center;
	border: 1px solid var(--bob-action-border, #000);
	border-bottom-width: 0;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	background: var(--bob-action-bg, #000);
	cursor: pointer;
	display: flex;
	height: 1.5rem;
	justify-content: center;
	line-height: 1;
	overflow: hidden;
	padding: 0.25rem;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	width: 2rem;
	font-size: 14px;
	color: var(--bob-action-text, #fff);
}

#nitrogen-curr-bob-clone-module {
	font-size: 12px;
}

#nitrogen-curr-bob-move-module-up:hover,
#nitrogen-curr-bob-move-module-down:hover,
#nitrogen-curr-bob-clone-module:hover,
#nitrogen-curr-bob-delete-module:hover {
	background: var(--bob-action-bg-hover, #000);
	color: var(--bob-action-text-hover, #fff);
	border-color: var(--bob-action-border-hover, #000);
}