/* Tagging a picture: the right-click menu, the dialog, and the pins. Its own stylesheet rather than more lines in the shell, because the pins are drawn over three different surfaces (a Storyboard card, the box on the Shot canvas, the drawing editor) and the rules have to be the same on all three. Splitting them across those files is how they would stop being the same. */ /* ---------- the little menu ---------- */ /* Parented to , so it needs its own stacking context above every sheet it can be opened from, including the drawing editor at z-index 96. */ .ctxMenu{position:fixed;z-index:130;min-width:172px;padding:5px; background:var(--surface,#15171b);border:1px solid var(--line,#2a2e35); border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.55); display:flex;flex-direction:column;gap:1px} .ctxMenu button{all:unset;display:block;padding:7px 10px;border-radius:6px; font:500 12px ui-sans-serif,system-ui,sans-serif;color:var(--text,#e7eaee);cursor:pointer} .ctxMenu button:hover:not(:disabled){background:var(--line,#2a2e35)} .ctxMenu button:disabled{color:var(--faint,#6b7280);cursor:default} .ctxMenu button.danger{color:var(--bad,#f2777a)} .ctxMenu hr{border:0;border-top:1px solid var(--line,#2a2e35);margin:4px 2px} /* ---------- the hash list under a prompt field ---------- */ .mentionMenu{min-width:240px;max-width:360px;z-index:140} .mentionMenu button{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:baseline} .mentionMenu button b{font-weight:600} .mentionMenu button span{grid-column:1;font-size:11px;color:var(--faint,#6b7280)} .mentionMenu button em{grid-column:2;grid-row:1/3;font-style:normal;font-size:10px;letter-spacing:.3px; text-transform:uppercase;color:var(--faint,#6b7280)} .mentionMenu button.active{background:var(--line,#2a2e35)} /* ---------- the dialog ---------- */ .modal.tagModal{z-index:118} /* under a confirmation, over every canvas */ .sheet.tagSheet{width:min(420px,100%);height:auto;max-height:80vh;min-width:0; grid-template-rows:auto minmax(0,1fr) auto} .tagBody{padding:16px 18px;display:grid;gap:12px;min-width:0} .tagField{display:grid;gap:5px;min-width:0} .tagField>span{font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--faint,#6b7280)} .tagField select{min-width:0;max-width:100%} .tagField[hidden]{display:none} .tagNote{margin:0;font-size:11.5px;color:var(--dim,#9aa6b4)} /* ---------- the pins ---------- */ /* Inert on purpose. The picture on a Storyboard card is what selects the card, and a pin that took the click would make part of every tagged panel unselectable. Everything a pin can do is on the right-click menu. */ .tagLayer{position:absolute;inset:0;pointer-events:none;overflow:hidden} /* THE DOT LANDS ON THE POINT, NOT THE PIN. A pin is a dot AND a name, and centring the whole thing on the tag put the dot half a name to the left of where you clicked: you aimed at a man's chest and the marker sat on the man beside him. Only the dot means anything, so only the dot is centred, and the name hangs off it. Half the dot's own width, which is why that 4.5px follows the 9px below and has to move with it. */ .tagPin{position:absolute;transform:translate(-4.5px,-50%);display:flex;align-items:center;gap:4px; white-space:nowrap;font:600 9.5px ui-sans-serif,system-ui,sans-serif;letter-spacing:.2px} /* Near the right edge the name hangs the other way instead, because the layer clips and half a name is worse than a name on the wrong side. The dot does not move: it is still the rightmost 9px, still centred on the point. */ .tagPin.flip{flex-direction:row-reverse;transform:translate(calc(-100% + 4.5px),-50%)} .tagPin i{width:9px;height:9px;border-radius:50%;flex:none; background:var(--pin,#d85b5b);box-shadow:0 0 0 1.5px rgba(6,7,9,.85)} .tagPin span{padding:1px 5px;border-radius:4px;background:rgba(8,9,11,.86); color:var(--pin,#d85b5b);text-shadow:0 1px 2px rgba(0,0,0,.6)} /* A tag whose character is no longer in the Cast. Still shown, because the panel really does have somebody named there and hiding it would make the deletion look like it never happened. */ .tagPin.gone{opacity:.55} .tagPin.gone span::after{content:" (not in Cast)";font-weight:400}