Enhance UI layout and styles for LabelDesigner and MainPage components

web/src/components/LabelDesigner.svelte

@@ -436,17 +436,19 @@
 <svelte:window bind:innerWidth={windowWidth} onkeydown={onKeyDown} onpaste={onPaste} />
 
 <div class="image-editor">
-  <div class="row mb-3">
+  <div class="row mb-4">
     <div class="col d-flex {windowWidth === 0 || labelProps.size.width < windowWidth ? 'justify-content-center' : ''}">
+      <div class="canvas-panel">
         <div class="canvas-wrapper print-start-{labelProps.printDirection}">
           <canvas bind:this={htmlCanvas}></canvas>
         </div>
       </div>
     </div>
+  </div>
 
-  <div class="row mb-1">
+  <div class="row mb-2">
     <div class="col d-flex justify-content-center">
-      <div class="toolbar d-flex flex-wrap gap-1 justify-content-center align-items-center">
+      <div class="toolbar toolbar-bar d-flex flex-wrap gap-1 justify-content-center align-items-center">
         <LabelPropsEditor {labelProps} onChange={onUpdateLabelProps} />
 
         <button class="btn btn-sm btn-secondary" onclick={clearCanvas} title={$tr("editor.clear")}>
@@ -493,9 +495,10 @@
     </div>
   </div>
 
-  <div class="row mb-1">
+  {#if selectedCount > 0 || selectedObject}
+  <div class="row mb-2">
     <div class="col d-flex justify-content-center">
-      <div class="toolbar d-flex flex-wrap gap-1 justify-content-center align-items-center">
+      <div class="toolbar toolbar-bar d-flex flex-wrap gap-1 justify-content-center align-items-center">
         {#if selectedCount > 0}
           <button class="btn btn-sm btn-danger me-1" onclick={deleteSelected} title={$tr("editor.delete")}>
             <MdIcon icon="delete" />
@@ -534,6 +537,7 @@
       </div>
     </div>
   </div>
+  {/if}
 
   {#if previewOpened}
     <PrintPreview
@@ -548,16 +552,16 @@
 
 <style>
   .canvas-wrapper {
-    border: 1px solid var(--border-standard);
     background-color: var(--surface-1);
   }
   .canvas-wrapper.print-start-left {
-    border-left: 2px solid var(--mark-feed);
+    border-left: 3px solid var(--mark-feed);
   }
   .canvas-wrapper.print-start-top {
-    border-top: 2px solid var(--mark-feed);
+    border-top: 3px solid var(--mark-feed);
   }
   .canvas-wrapper canvas {
     image-rendering: pixelated;
+    display: block;
   }
 </style>

web/src/components/MainPage.svelte

@@ -14,78 +14,79 @@
   let debugStuffShow = $state<boolean>(false);
 </script>
 
-<div class="container my-2">
+<header class="app-header">
-  <div class="row align-items-center mb-3">
+  <div class="container-fluid px-3">
-    <div class="col">
+    <div class="d-flex align-items-center gap-2">
-      <h1 class="title">
-        <img src="{import.meta.env.BASE_URL}logo.png" alt="Fichero" class="logo" />
-      </h1>
-    </div>
-    <div class="col-md-3">
-      <PrinterConnector />
-    </div>
-  </div>
-  <div class="row">
-    <div class="col">
-      <BrowserWarning />
-    </div>
-  </div>
 
-  <div class="row">
+      <a class="app-brand" href=".">
-    <div class="col">
+        <img src="{import.meta.env.BASE_URL}logo.png" alt="Fichero" class="app-brand-logo" />
-      <LabelDesigner />
+        <span class="app-brand-name d-none d-sm-inline">Fichero<em>Printer</em></span>
-    </div>
+      </a>
-  </div>
-</div>
 
-<div class="footer text-end text-secondary p-3">
+      <div class="ms-auto d-flex align-items-center gap-2 flex-wrap justify-content-end">
-  <div>
+        <select
-    <select class="form-select form-select-sm text-secondary d-inline-block w-auto" bind:value={$locale}>
+          class="form-select form-select-sm lang-select"
+          bind:value={$locale}>
           {#each Object.entries(locales) as [key, name] (key)}
             <option value={key}>{name}</option>
           {/each}
         </select>
-  </div>
+
-  <div>
+        <PrinterConnector />
-    {#if appCommit}
+
-      <a class="text-secondary" href="https://github.com/mohamedha/fichero-printer/commit/{appCommit}">
+        <button
-        {appCommit.slice(0, 6)}
+          class="btn btn-sm btn-secondary"
-      </a>
+          onclick={() => (debugStuffShow = true)}
-    {/if}
+          title="Debug">
-    {$tr("main.built")}
-    {buildDate}
-  </div>
-  <div>
-    <a class="text-secondary" href="https://github.com/mohamedha/fichero-printer">{$tr("main.code")}</a>
-    <button class="text-secondary btn btn-link p-0" onclick={() => debugStuffShow = true}>
           <MdIcon icon="bug_report" />
         </button>
       </div>
+
+    </div>
+  </div>
+</header>
+
+<div class="container-fluid px-3 mt-3">
+  <BrowserWarning />
+  <LabelDesigner />
 </div>
 
+<footer class="text-secondary text-end p-3 footer-meta">
+  {#if appCommit}
+    <a
+      class="text-secondary"
+      href="https://github.com/mohamedha/fichero-printer/commit/{appCommit}">
+      {appCommit.slice(0, 6)}
+    </a>
+    ·
+  {/if}
+  {$tr("main.built")} {buildDate} ·
+  <a class="text-secondary" href="https://github.com/mohamedha/fichero-printer">{$tr("main.code")}</a>
+</footer>
+
 {#if debugStuffShow}
   <DebugStuff bind:show={debugStuffShow} />
 {/if}
 
 <style>
-  .logo {
+  .lang-select {
-    height: 1.4em;
+    width: auto;
-    vertical-align: middle;
+    min-width: 65px;
-    margin-right: 0.2em;
+    font-size: 0.8rem;
-    border-radius: 4px;
   }
 
-  .footer {
+  .footer-meta {
     position: absolute;
     bottom: 0;
     right: 0;
+    font-size: 0.72rem;
     z-index: -1;
   }
 
   @media only screen and (max-device-width: 540px) {
-    .footer {
+    .footer-meta {
-      position: relative !important;
+      position: relative;
-      z-index: 0 !important;
+      z-index: 0;
     }
   }
 </style>

web/src/styles/theme.scss

@@ -209,3 +209,105 @@
   --bs-progress-bg: var(--surface-1);
   --bs-progress-bar-bg: var(--fichero);
 }
+
+// ── Body background ────────────────────────────────────────────
+
+body {
+  min-height: 100dvh;
+  background-image:
+    radial-gradient(ellipse at 15% 85%, rgba(var(--fichero-rgb), 0.06) 0%, transparent 55%),
+    radial-gradient(ellipse at 85% 8%,  rgba(var(--fichero-rgb), 0.04) 0%, transparent 55%);
+  background-attachment: fixed;
+}
+
+// ── App header ─────────────────────────────────────────────────
+
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 1030;
+  padding: 7px 0;
+  background: rgba(22, 24, 25, 0.82);
+  backdrop-filter: blur(16px) saturate(1.5);
+  -webkit-backdrop-filter: blur(16px) saturate(1.5);
+  border-bottom: 1px solid var(--border-standard);
+  box-shadow: 0 1px 0 0 var(--border-soft);
+}
+
+.app-brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    color: inherit;
+  }
+}
+
+.app-brand-logo {
+  height: 1.75em;
+  border-radius: 5px;
+  box-shadow: 0 0 0 1px var(--border-soft);
+}
+
+.app-brand-name {
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: var(--ink-primary);
+
+  em {
+    color: var(--fichero);
+    font-style: normal;
+  }
+}
+
+// ── Toolbar bar ────────────────────────────────────────────────
+
+.toolbar-bar {
+  background: var(--surface-1);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-lg);
+  padding: 7px 12px;
+
+  .btn-sm {
+    border-radius: var(--radius-sm) !important;
+  }
+}
+
+// ── Canvas panel ───────────────────────────────────────────────
+
+.canvas-panel {
+  display: inline-flex;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px var(--border-standard),
+    0 16px 48px rgba(0, 0, 0, 0.40),
+    0 4px 12px  rgba(0, 0, 0, 0.25);
+}
+
+// ── Scrollbar ─────────────────────────────────────────────────
+
+::-webkit-scrollbar        { width: 6px; height: 6px; }
+::-webkit-scrollbar-track  { background: var(--surface-0); }
+::-webkit-scrollbar-thumb  {
+  background: var(--surface-3);
+  border-radius: 3px;
+
+  &:hover { background: var(--ink-muted); }
+}
+
+// ── Transition helpers ─────────────────────────────────────────
+
+.btn { transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s; }
+
+.btn-primary:not(:disabled):hover {
+  box-shadow: 0 0 0 3px rgba(var(--fichero-rgb), 0.25);
+}
+
+.btn-danger:not(:disabled):hover {
+  box-shadow: 0 0 0 3px rgba(var(--status-danger-rgb), 0.25);
+}