@hybridlabor-api/aos 4.6.5 → 4.7.0

package/skills/global_config/editable-design/assets/editor/layer-editor.css

@@ -0,0 +1,262 @@
+/* ============================================================
+   layer-editor —— 海报图层微调编辑器外壳样式
+   全部以 hf- 前缀命名，与海报本身的样式完全隔离。
+   与 layer-editor.js 配套；移除这两个文件即还原为纯海报。
+   ============================================================ */
+
+body.hf-on{
+  display:block;padding:0;margin:0;
+  background:#15171a;
+  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
+}
+
+/* ---------- 舞台：承载缩放后的画布 ---------- */
+.hf-stage-wrap{
+  position:fixed;left:0;top:52px;right:300px;bottom:0;
+  overflow:auto;display:flex;align-items:flex-start;justify-content:center;
+  padding:28px;transition:background-color .24s ease;
+}
+.hf-stage{position:relative;flex:none;}
+.hf-canvas{transform-origin:top left;}
+
+/* ---------- 拆解视图：完整总览 + 背景 + 一级内容组件 ---------- */
+.hf-exploded-board{
+  position:absolute;left:0;top:0;overflow:hidden;transform-origin:top left;
+  background:var(--hf-exploded-bg,#0b0c0d);color:var(--hf-exploded-fg,#f4f1e8);isolation:isolate;
+}
+.hf-exploded-item{
+  position:absolute;overflow:hidden;transform-origin:top left;will-change:transform,opacity,filter;
+}
+.hf-exploded-scan{
+  position:absolute;z-index:40;overflow:hidden;pointer-events:none;opacity:0;
+  border-radius:18px;mix-blend-mode:screen;
+  box-shadow:inset 0 0 0 1px rgba(188,255,243,.36),inset 0 0 42px rgba(113,244,222,.09);
+}
+.hf-exploded-scan-grid{
+  position:absolute;inset:0;opacity:0;
+  background-image:
+    linear-gradient(rgba(151,255,237,.16) 1px,transparent 1px),
+    linear-gradient(90deg,rgba(151,255,237,.16) 1px,transparent 1px);
+  background-size:48px 48px;
+  mask-image:linear-gradient(180deg,transparent,black 12%,black 88%,transparent);
+}
+.hf-exploded-scan-beam{
+  position:absolute;left:-3%;top:0;width:106%;height:18%;opacity:0;
+  background:linear-gradient(180deg,transparent 0%,rgba(118,255,231,.08) 28%,
+    rgba(185,255,244,.25) 50%,rgba(255,255,255,.96) 55%,
+    rgba(104,255,230,.34) 58%,transparent 100%);
+  filter:drop-shadow(0 0 18px rgba(152,255,237,.9));
+}
+.hf-exploded-item{
+  cursor:pointer;filter:drop-shadow(0 16px 28px var(--hf-exploded-shadow,rgba(0,0,0,.28)));
+  transition:transform .22s cubic-bezier(.22,1,.36,1),filter .18s,opacity .18s;
+}
+.hf-exploded-item[data-exploded-group]{cursor:default;}
+.hf-exploded-item:is([data-exploded-overview],[data-exploded-background]){
+  cursor:default;border:1px solid var(--hf-exploded-border,rgba(244,241,232,.42));
+  border-radius:16px;box-sizing:border-box;
+}
+.hf-exploded-label{
+  position:absolute;left:18px;top:18px;z-index:8;max-width:calc(100% - 36px);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;
+  padding:12px 18px;border:1px solid var(--hf-exploded-border,rgba(255,255,255,.22));border-radius:999px;
+  background:var(--hf-exploded-label-bg,rgba(11,12,13,.78));backdrop-filter:blur(10px);
+  color:var(--hf-exploded-label-fg,#f4f1e8);
+  font:650 28px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
+  letter-spacing:.35px;opacity:0;transform:translateY(6px);
+  transition:opacity .16s ease,transform .22s cubic-bezier(.22,1,.36,1);
+}
+.hf-exploded-settled.hf-exploded-interacted .hf-exploded-item:is(:hover,:focus-visible) .hf-exploded-label{
+  opacity:1;transform:translateY(0);
+}
+.hf-exploded-settled .hf-exploded-item:hover{
+  transform:translateY(-8px) scale(1.015);
+  filter:drop-shadow(0 18px 34px rgba(0,0,0,.38)) brightness(1.08);
+}
+.hf-exploded-animating .hf-exploded-item{pointer-events:none;}
+.hf-exploded-crop{position:absolute;left:0;top:0;overflow:hidden;}
+.hf-exploded-source{
+  max-width:none!important;max-height:none!important;transform:none!important;
+  pointer-events:none!important;
+}
+.hf-exploded-on .hf-stage > .hf-canvas,
+.hf-exploded-on .hf-stage > .hf-guides{display:none;}
+.hf-exploded-on .hf-stage-wrap{background-color:var(--hf-exploded-bg,#0b0c0d);}
+
+@media (prefers-reduced-motion:reduce){
+  .hf-exploded-item{transition:none;}
+  .hf-exploded-scan{display:none;}
+}
+
+/* ---------- 顶部工具条 ---------- */
+.hf-bar{
+  position:fixed;left:0;right:0;top:0;height:52px;z-index:9000;
+  display:flex;align-items:center;gap:8px;padding:0 14px;
+  background:#1e2126;border-bottom:1px solid #32363d;color:#e6e8ea;
+  font-size:13px;
+}
+.hf-bar .hf-title{
+  font-weight:600;letter-spacing:.5px;margin-right:6px;
+  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+}
+.hf-bar .hf-sep{width:1px;height:22px;background:#3a3f47;margin:0 4px;}
+.hf-btn{
+  appearance:none;border:1px solid #3a3f47;background:#282c33;color:#e6e8ea;
+  padding:6px 12px;border-radius:6px;font-size:12.5px;cursor:pointer;
+  font-family:inherit;transition:background .12s,border-color .12s;white-space:nowrap;
+}
+.hf-btn:hover{background:#333840;border-color:#4a505a;}
+.hf-btn:active{background:#22262c;}
+.hf-btn.active{background:#4a3d20;border-color:#a78635;color:#ffe28a;}
+.hf-btn.primary{background:#2f6f4f;border-color:#3c8a63;}
+.hf-btn.primary:hover{background:#37805c;}
+.hf-btn.danger:hover{background:#5d2b2b;border-color:#7a3a3a;}
+.hf-btn[disabled]{opacity:.4;cursor:default;}
+.hf-btn[disabled]:hover{background:#282c33;border-color:#3a3f47;}
+.hf-zoom{margin-left:auto;display:flex;align-items:center;gap:8px;color:#9aa2ad;}
+.hf-zoom output{min-width:46px;text-align:right;font-variant-numeric:tabular-nums;color:#e6e8ea;}
+
+/* ---------- 右侧面板 ---------- */
+.hf-panel{
+  position:fixed;right:0;top:52px;bottom:0;width:300px;z-index:9000;
+  background:#1e2126;border-left:1px solid #32363d;color:#e6e8ea;
+  display:flex;flex-direction:column;
+}
+.hf-panel h4{
+  margin:0;padding:13px 14px 9px;font-size:11px;font-weight:600;
+  letter-spacing:1.4px;text-transform:uppercase;color:#7d8792;
+  display:flex;align-items:center;gap:8px;
+}
+.hf-layers{flex:1;overflow:auto;padding:0 8px 12px;min-height:80px;}
+.hf-layer{
+  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;
+  cursor:pointer;font-size:12.5px;color:#c3c9d1;
+}
+.hf-layer:hover{background:#282c33;}
+.hf-layer.sel{background:#2f6f4f;color:#fff;}
+.hf-layer .dot{width:7px;height:7px;border-radius:50%;background:#5c6470;flex:none;}
+.hf-layer.sel .dot{background:#9fe3c0;}
+.hf-layer .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.hf-layer .pos{
+  margin-left:auto;font-size:11px;color:#7d8792;font-variant-numeric:tabular-nums;flex:none;
+}
+.hf-layer.sel .pos{color:#c8ecd9;}
+
+/* ---------- 属性区 ---------- */
+.hf-props{border-top:1px solid #32363d;padding:4px 14px 12px;}
+.hf-props[hidden]{display:none;}
+.hf-field{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:12px;color:#9aa2ad;}
+.hf-field > label{width:38px;flex:none;}
+.hf-field select{
+  flex:1;appearance:none;background:#282c33;color:#e6e8ea;font-family:inherit;
+  border:1px solid #3a3f47;border-radius:6px;padding:5px 8px;font-size:12px;cursor:pointer;
+}
+.hf-step{display:flex;align-items:center;gap:6px;}
+.hf-step .hf-btn{padding:4px 10px;font-size:13px;line-height:1;}
+.hf-step .val{
+  min-width:52px;text-align:center;color:#e6e8ea;
+  font-variant-numeric:tabular-nums;font-size:12px;
+}
+.hf-props .hf-btn.danger{width:100%;margin-top:2px;}
+
+.hf-hint{
+  padding:12px 14px;border-top:1px solid #32363d;font-size:11.5px;
+  line-height:1.85;color:#7d8792;
+}
+.hf-hint kbd{
+  background:#282c33;border:1px solid #3a3f47;border-radius:4px;
+  padding:1px 5px;font-size:10.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
+  color:#c3c9d1;
+}
+.hf-hint b{color:#c3c9d1;font-weight:600;}
+
+/* ---------- 草稿条 ---------- */
+.hf-draft{
+  display:flex;align-items:center;gap:8px;padding:9px 14px;
+  background:#2a2f2a;border-bottom:1px solid #3a4a3a;
+  font-size:11.5px;color:#9fe3c0;
+}
+.hf-draft[hidden]{display:none;}
+.hf-draft .hf-btn{padding:3px 8px;font-size:11px;margin-left:auto;}
+
+/* ---------- 图层的可拖拽 / 选中态 ---------- */
+.hf-draggable{cursor:grab;}
+.hf-draggable:hover{outline:1px dashed rgba(159,227,192,.55);outline-offset:3px;}
+.hf-draggable.hf-sel{
+  outline:none;cursor:grab;
+}
+.hf-resize-overlay{
+  position:absolute;z-index:9999;border:1px dashed #38bdf8;
+  pointer-events:none;
+}
+.hf-resize-overlay[hidden]{display:none;}
+.hf-resize-handle{
+  position:absolute;width:32px;height:32px;border:0;background:transparent;
+  pointer-events:auto;touch-action:none;
+}
+.hf-resize-handle::after{
+  content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;
+  transform:translate(-50%,-50%);border:1px solid #11633d;border-radius:2px;
+  background:#4ade80;box-shadow:0 0 0 1px rgba(255,255,255,.8),0 1px 5px rgba(17,24,39,.24);
+}
+.hf-resize-handle:hover::after{width:14px;height:14px;background:#86efac;}
+.hf-resize-handle.active::after{width:14px;height:14px;background:#bbf7d0;}
+.hf-resize-handle.nw{left:0;top:0;transform:translate(-50%,-50%);cursor:nwse-resize;}
+.hf-resize-handle.n{left:50%;top:0;transform:translate(-50%,-50%);cursor:ns-resize;}
+.hf-resize-handle.ne{right:0;top:0;transform:translate(50%,-50%);cursor:nesw-resize;}
+.hf-resize-handle.e{right:0;top:50%;transform:translate(50%,-50%);cursor:ew-resize;}
+.hf-resize-handle.se{right:0;bottom:0;transform:translate(50%,50%);cursor:nwse-resize;}
+.hf-resize-handle.s{left:50%;bottom:0;transform:translate(-50%,50%);cursor:ns-resize;}
+.hf-resize-handle.sw{left:0;bottom:0;transform:translate(-50%,50%);cursor:nesw-resize;}
+.hf-resize-handle.w{left:0;top:50%;transform:translate(-50%,-50%);cursor:ew-resize;}
+.hf-resize-handle:is(.n,.e,.s,.w){z-index:2;}
+.hf-size-val{color:#e6e8ea;font-variant-numeric:tabular-nums;}
+
+/* ---------- 文本编辑态 ---------- */
+/* 选中图层后才提示哪些文字可编辑；否则整张海报都是文本光标，反而看不出能拖 */
+.hf-sel .hf-slot:hover,
+.hf-sel.hf-slot:hover{
+  outline:1px dashed #38bdf8;outline-offset:2px;cursor:text;
+}
+.hf-editing{
+  outline:2px solid #38bdf8;outline-offset:2px;
+  background:rgba(56,189,248,.10);
+  cursor:text;caret-color:#38bdf8;
+  -webkit-user-modify:read-write-plaintext-only;
+}
+/* 编辑中的图层让位给文本框，不再显示拖拽提示 */
+.hf-draggable:has(.hf-editing){outline:none !important;cursor:text;}
+
+/* ---------- 吸附辅助线 ---------- */
+.hf-guides{position:absolute;inset:0;pointer-events:none;z-index:9998;}
+.hf-guide{position:absolute;background:#ff2d8a;}
+.hf-guide.v{width:1px;top:0;bottom:0;}
+.hf-guide.h{height:1px;left:0;right:0;}
+
+/* ---------- 弹窗 ---------- */
+.hf-modal{
+  position:fixed;inset:0;z-index:9500;background:rgba(8,10,12,.72);
+  display:flex;align-items:center;justify-content:center;padding:40px;
+}
+.hf-modal[hidden]{display:none;}
+.hf-modal .box{
+  width:min(760px,100%);max-height:100%;background:#1e2126;border:1px solid #3a3f47;
+  border-radius:10px;display:flex;flex-direction:column;overflow:hidden;
+}
+.hf-modal .box header{
+  padding:14px 16px;border-bottom:1px solid #32363d;color:#e6e8ea;
+  font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;
+}
+.hf-modal .box header .hf-spacer{margin-left:auto;}
+.hf-modal textarea{
+  flex:1;min-height:340px;border:0;outline:0;resize:none;padding:14px 16px;
+  background:#15171a;color:#c3c9d1;line-height:1.65;
+  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
+}
+
+.hf-toast{
+  position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:9600;
+  background:#2f6f4f;color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;
+  box-shadow:0 8px 24px rgba(0,0,0,.4);
+}
+.hf-toast[hidden]{display:none;}