Refresh sidebar layout with Tailwind
This commit is contained in:
+9
-7
@@ -42,25 +42,27 @@
|
||||
|
||||
@layer components {
|
||||
.catalog-screen { @apply grid min-h-screen grid-cols-[172px_292px_minmax(720px,1fr)] bg-catalog-surface; }
|
||||
.control-panel { @apply flex min-h-screen flex-col gap-1.5 overflow-y-auto bg-catalog-panel p-1.5 text-[11px]; }
|
||||
.app-status { @apply order-[98] mt-auto rounded border border-slate-600 bg-catalog-panel-soft p-1 text-[10px] leading-tight text-slate-100; }
|
||||
.control-panel { @apply flex min-h-screen flex-col gap-1.5 overflow-y-auto bg-slate-900 p-1.5 text-[11px] text-slate-200; }
|
||||
.sidebar-section { @apply border-t border-slate-700 pt-1; }
|
||||
.sidebar-footer { @apply mt-auto grid gap-1 border-t border-slate-700 pt-2; }
|
||||
.app-status { @apply rounded border border-slate-700 bg-slate-950 p-1 text-[10px] leading-tight text-slate-100; }
|
||||
.safe-mode, #modePill { @apply inline-block rounded bg-slate-100 px-1 py-0.5 text-[10px] font-semibold text-slate-800; }
|
||||
#databaseStatus.database-error { @apply bg-red-100 text-red-700; }
|
||||
.record-id { @apply flex h-10 items-center justify-center rounded border border-lime-700 bg-catalog-accent text-[26px] font-bold leading-none text-catalog-accent-text; }
|
||||
.arrow-row { @apply grid grid-cols-2 gap-1; }
|
||||
.arrow-button, .action-button, .input-like { @apply w-full rounded border border-slate-300 bg-slate-50 text-center text-slate-900 shadow-sm transition; }
|
||||
.arrow-button, .action-button, .input-like { @apply w-full rounded border border-slate-700 bg-slate-800 text-center text-slate-200 shadow-sm transition; }
|
||||
.arrow-button, .action-button { @apply min-h-7 px-1 text-[11px]; }
|
||||
.arrow-button { @apply relative text-transparent; }
|
||||
.arrow-button::before { @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xl leading-none text-slate-900; content: ""; }
|
||||
.arrow-button::before { @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xl leading-none text-slate-100; content: ""; }
|
||||
.arrow-button-prev::before { content: "‹"; }
|
||||
.arrow-button-next::before { content: "›"; }
|
||||
.parser-actions { @apply grid gap-1; }
|
||||
.parser-actions .action-button { @apply min-h-7; }
|
||||
.action-button.primary { @apply min-h-8 font-semibold; }
|
||||
.arrow-button:hover:not(:disabled), .action-button:hover:not(:disabled) { @apply border-slate-500 bg-white; }
|
||||
.arrow-button:hover:not(:disabled), .action-button:hover:not(:disabled) { @apply border-slate-500 bg-slate-700 text-white; }
|
||||
.arrow-button:disabled, .action-button:disabled { @apply cursor-not-allowed opacity-50; }
|
||||
.input-like { @apply h-7 px-1 text-[11px]; }
|
||||
#scanInput { @apply bg-slate-200 placeholder:text-slate-500; }
|
||||
#scanInput { @apply bg-slate-700 placeholder:text-slate-400; }
|
||||
.input-like:focus { @apply border-catalog-focus outline-none ring-2 ring-catalog-focus/25; }
|
||||
.picture-slot { @apply aspect-square w-full overflow-hidden rounded border border-dashed border-slate-500 bg-catalog-panel-soft p-1 text-center text-[11px] text-slate-200; }
|
||||
.picture-slot img { @apply h-full w-full object-contain; }
|
||||
@@ -142,7 +144,7 @@
|
||||
.catalog-screen { @apply block; }
|
||||
.control-panel { @apply min-h-0 grid grid-cols-2; }
|
||||
.control-panel > * { @apply min-w-0; }
|
||||
.app-status, #settingsButton { @apply col-span-2; }
|
||||
.sidebar-footer { @apply col-span-2; }
|
||||
.product-panel { @apply pt-0; }
|
||||
.table-wrap { @apply max-h-[70vh]; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user