@lucidcms/admin/assets/index.css

The admin SolidJS SPA for Lucid CMS.

@import "tailwindcss";
@config './tailwind.config.js';

@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentColor);
	}

	* {
		scrollbar-color: #4d4d4d #070707;
		scrollbar-width: thin;
	}

	/* Typography */
	h1 {
		@apply text-2xl tracking-wider font-bold text-title font-display;
	}
	h2 {
		@apply text-xl font-bold text-title font-display;
	}
	h3 {
		@apply text-base font-medium text-title font-display;
	}
	h4 {
		@apply text-base font-medium text-title font-body;
	}
	h5 {
		@apply text-base font-medium text-title font-body;
	}
	h6 {
		@apply text-base font-medium text-title font-body;
	}
	p,
	li,
	a {
		@apply text-base font-normal tracking-wide leading-relaxed text-body font-body;
	}
	a {
		@apply hover:text-primary-hover duration-200 transition-colors ease-in-out focus:outline-hidden focus:ring-1 focus:ring-primary-base;
	}

	/* Other */
	body {
		@apply bg-container-3 text-body font-body;
	}
	::-moz-selection {
		@apply bg-primary-base text-primary-contrast;
	}
	::selection {
		@apply bg-primary-base text-primary-contrast;
	}

	.scrollbar {
		scrollbar-color: #4d4d4d #070707;
		scrollbar-width: thin;
	}

	[data-overflowing="true"] .row-actions-td {
		filter: drop-shadow(-5px 0px 5px rgba(0, 0, 0, 0.1));
	}

	.dropdown-trigger {
		@apply duration-200 transition-colors outline-primary-base focus:outline-1;
	}
	.skeleton {
		@apply bg-container-4 rounded-md animate-pulse;
	}

	.hide-scrollbar::-webkit-scrollbar {
		display: none;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	/* Wysiwyg */
	.ql-toolbar {
		@apply border-border-input! rounded-t-md!;
	}
	.ql-container.ql-snow {
		@apply border-border-input! rounded-b-md!;
	}
	.ql-container-1 {
		@apply border-border-input! rounded-b-md!;
	}
	.ql-toolbar .ql-stroke {
		@apply stroke-body! duration-200 transition-colors;
	}
	.ql-toolbar .ql-fill {
		@apply fill-body! duration-200 transition-colors;
	}
	.ql-picker-label {
		@apply text-body hover:text-primary-hover! duration-200 transition-colors;
	}
	.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
		@apply border-border-input!;
	}
	.ql-picker-label.ql-active {
		@apply text-primary-base!;
	}
	.ql-toolbar .ql-picker:hover .ql-stroke,
	.ql-toolbar button:hover .ql-stroke {
		@apply stroke-primary-hover!;
	}
	.ql-toolbar .ql-picker:hover .ql-fill,
	.ql-toolbar button:hover .ql-fill {
		@apply fill-primary-hover!;
	}
	.ql-active .ql-stroke {
		@apply stroke-primary-base!;
	}
	.ql-active .ql-fill {
		@apply fill-primary-base!;
	}
	.ql-tooltip {
		@apply left-1/2! -translate-x-1/2! shadow-none! bg-container-1! rounded-md border-border-input! border! text-body!;
	}
	.ql-tooltip input {
		@apply bg-container-1! rounded-md border-border-input! border! text-body! focus:outline-hidden focus:ring-1 ring-primary-base;
	}
	.ql-tooltip .ql-action,
	.ql-tooltip .ql-remove {
		@apply text-primary-contrast! bg-primary-base hover:bg-primary-hover ml-2.5 px-2.5 rounded-md;
	}
	.ql-tooltip .ql-action:after,
	.ql-tooltip .ql-remove:before {
		@apply ml-0! text-sm! px-0!;
	}
	.ql-tooltip .ql-action:hover,
	.ql-tooltip .ql-remove:hover {
		@apply text-primary-contrast! bg-primary-hover!;
	}
	.ql-preview {
		@apply text-primary-base!;
	}
	.ql-snow a {
		@apply text-primary-base! hover:text-primary-hover! duration-200 transition-colors;
	}

	.ql-picker-options {
		@apply bg-container-1! rounded-md border-border-input! border! text-body!;
	}
	.ql-picker-item:hover {
		@apply text-primary-hover!;
	}
	.ql-picker-item.ql-selected {
		@apply text-primary-base!;
	}

	::view-transition-group(document-builder-header) {
		z-index: 100;
	}
	::view-transition-group(*) {
		animation-duration: 200ms;
	}

	/* Animations */
	@keyframes animation-enter {
		0% {
			opacity: 0;
			transform: translateY(10px);
		}
		100% {
			opacity: 1;
			transform: translateY(0px);
		}
	}
	@keyframes animation-leave {
		0% {
			opacity: 1;
			transform: translateY(0px);
		}
		100% {
			opacity: 0;
			transform: translateY(10px);
		}
	}
	@keyframes animation-dropdown {
		0% {
			transform: translateY(-5px);
			opacity: 0;
		}
		100% {
			transform: translateY(0px);
			opacity: 1;
		}
	}
	@keyframes animation-from-left {
		0% {
			transform: translateX(-5px);
			opacity: 0;
		}
		100% {
			transform: translateX(0px);
			opacity: 1;
		}
	}

	@keyframes animation-fade-in {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes animation-fade-out {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@keyframes animate-slide-from-right-in {
		0% {
			transform: translateX(100%);
			opacity: 0;
		}
		100% {
			transform: translateX(0%);
			opacity: 1;
		}
	}
	@keyframes animate-slide-from-right-out {
		0% {
			transform: translateX(0%);
			opacity: 1;
		}
		100% {
			transform: translateX(100%);
			opacity: 0;
		}
	}

	@keyframes animate-overlay-show {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	@keyframes animate-overlay-hide {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
	@keyframes animate-modal-show {
		from {
			opacity: 0;
			transform: scale(0.96);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}
	@keyframes animate-modal-hide {
		from {
			opacity: 1;
			transform: scale(1);
		}
		to {
			opacity: 0;
			transform: scale(0.96);
		}
	}
}