Initial P-Touch web editor

app/static/style.css

@@ -0,0 +1,311 @@
+:root {
+  color-scheme: dark;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #202020;
+  color: #e8e8e8;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button,
+.file-button {
+  border: 1px solid #555;
+  border-radius: 6px;
+  background: #3a3a3a;
+  color: #f2f2f2;
+  padding: 8px 10px;
+  cursor: pointer;
+}
+
+button:hover,
+.file-button:hover {
+  background: #454545;
+}
+
+button.primary {
+  background: #2374e1;
+  border-color: #2374e1;
+}
+
+button.danger {
+  background: #5a2d2d;
+  border-color: #7d3a3a;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  border: 1px solid #565656;
+  border-radius: 5px;
+  background: #303030;
+  color: #f3f3f3;
+  padding: 7px 8px;
+}
+
+textarea {
+  resize: vertical;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr) 320px;
+  grid-template-rows: 78px minmax(0, 1fr);
+  height: 100vh;
+}
+
+.topbar {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: 180px minmax(0, 1fr) 160px 230px;
+  gap: 16px;
+  align-items: center;
+  border-bottom: 1px solid #111;
+  background: #2d2d2d;
+  padding: 10px 14px;
+}
+
+.brand {
+  display: grid;
+  gap: 2px;
+}
+
+.brand span {
+  color: #aaa;
+  font-size: 13px;
+}
+
+.brand a {
+  color: #9fc5ff;
+  text-decoration: none;
+}
+
+.toolbar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  overflow-x: auto;
+}
+
+.toolbar button,
+.file-button {
+  min-width: 64px;
+  text-align: center;
+}
+
+.file-button input {
+  display: none;
+}
+
+.zoom-group,
+.print-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.zoom-group span {
+  min-width: 56px;
+  text-align: center;
+  color: #cfcfcf;
+}
+
+.sidebar {
+  overflow: auto;
+  background: #282828;
+  border-right: 1px solid #111;
+  padding: 16px;
+}
+
+.right-panel {
+  border-right: 0;
+  border-left: 1px solid #111;
+}
+
+.sidebar section {
+  display: grid;
+  gap: 12px;
+  padding-bottom: 18px;
+  margin-bottom: 18px;
+  border-bottom: 1px solid #3a3a3a;
+}
+
+.sidebar h2 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.sidebar p {
+  margin: 0;
+  color: #a8a8a8;
+  line-height: 1.4;
+}
+
+.sidebar label {
+  display: grid;
+  gap: 6px;
+  color: #d7d7d7;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.radio-row,
+.check-row {
+  display: grid;
+  gap: 9px;
+}
+
+.radio-row label,
+.check-row label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+}
+
+.radio-row input,
+.check-row input {
+  width: auto;
+}
+
+.grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.input-action {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+}
+
+.input-action button {
+  min-width: 92px;
+  padding-inline: 9px;
+}
+
+.workspace {
+  position: relative;
+  overflow: hidden;
+  background: #303030;
+}
+
+.stage-wrap {
+  position: absolute;
+  inset: 24px 0 34px 28px;
+  overflow: auto;
+  display: grid;
+  align-items: start;
+  justify-items: start;
+  padding: 72px;
+}
+
+#labelCanvas {
+  background: #fff;
+  box-shadow: 0 0 0 1px #bdbdbd, 0 18px 50px rgba(0, 0, 0, 0.35);
+  image-rendering: crisp-edges;
+}
+
+.ruler {
+  position: absolute;
+  color: #aaa;
+  font-size: 11px;
+  background: #262626;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.ruler-x {
+  top: 0;
+  left: 28px;
+  right: 0;
+  height: 24px;
+  border-bottom: 1px solid #171717;
+}
+
+.ruler-y {
+  top: 24px;
+  left: 0;
+  bottom: 34px;
+  width: 28px;
+  border-right: 1px solid #171717;
+}
+
+.message-line {
+  position: absolute;
+  left: 46px;
+  right: 18px;
+  bottom: 8px;
+  min-height: 20px;
+  color: #d7d7d7;
+  font-size: 14px;
+}
+
+.message-line.error {
+  color: #ffb1b1;
+}
+
+.message-line.success {
+  color: #a8e6b0;
+}
+
+.preview-box {
+  min-height: 120px;
+  display: grid;
+  place-items: center;
+  border: 1px dashed #555;
+  background: #222;
+  padding: 12px;
+}
+
+.preview-box img {
+  max-width: 100%;
+  image-rendering: crisp-edges;
+}
+
+code {
+  overflow-wrap: anywhere;
+  color: #b9d5ff;
+}
+
+@media (max-width: 980px) {
+  body {
+    overflow: auto;
+  }
+
+  .app-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto minmax(420px, 1fr) auto;
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .topbar {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    border: 0;
+  }
+
+  .stage-wrap {
+    min-height: 420px;
+  }
+}