Doc compose: accent prefix labels for each field + Cc btn up 2px

- Each input now has a sibling .email-field-prefix span (To / Cc /
  Bcc / Subject) absolute-positioned at the left edge in the
  accent color. Inputs get padding-left:44px (64px for Subject)
  so typed text doesn't slide under the prefix.
- Placeholders shrink back to just the example so only the
  prefix gets the accent color, not the example text.
- Cc toggle moved another 2px up (calc(50% + 4px) → calc(50% + 2px)).
This commit is contained in:
pewdiepie-archdaemon
2026-06-13 09:35:21 +09:00
parent 77f00eeab1
commit 0889eb4e01
2 changed files with 23 additions and 9 deletions
+7 -4
View File
@@ -3851,21 +3851,24 @@ import * as Modals from './modalManager.js';
</button>
<div id="doc-email-fields" class="doc-email-fields">
<div class="email-field" style="position:relative">
<input type="text" id="doc-email-to" placeholder="To recipient@example.com" autocomplete="off" />
<span class="email-field-prefix">To</span>
<input type="text" id="doc-email-to" placeholder="recipient@example.com" autocomplete="off" />
<div id="doc-email-to-suggestions" class="email-autocomplete" style="display:none"></div>
<button type="button" id="doc-email-show-cc" class="email-cc-toggle" title="Show Cc/Bcc">Cc</button>
</div>
<div class="email-field" id="doc-email-cc-row" style="display:none;position:relative">
<input type="text" id="doc-email-cc" placeholder="Cc cc@example.com, example2" autocomplete="off" />
<span class="email-field-prefix">Cc</span>
<input type="text" id="doc-email-cc" placeholder="cc@example.com, example2" autocomplete="off" />
<div id="doc-email-cc-suggestions" class="email-autocomplete" style="display:none"></div>
<button type="button" class="email-cc-close" data-cc-close title="Hide Cc/Bcc" aria-label="Hide Cc/Bcc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
</div>
<div class="email-field" id="doc-email-bcc-row" style="display:none;position:relative">
<input type="text" id="doc-email-bcc" placeholder="Bcc bcc@example.com" autocomplete="off" />
<span class="email-field-prefix">Bcc</span>
<input type="text" id="doc-email-bcc" placeholder="bcc@example.com" autocomplete="off" />
<div id="doc-email-bcc-suggestions" class="email-autocomplete" style="display:none"></div>
<button type="button" class="email-cc-close" data-cc-close title="Hide Cc/Bcc" aria-label="Hide Cc/Bcc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
</div>
<div class="email-field"><input type="text" id="doc-email-subject" placeholder="Subject" /></div>
<div class="email-field" style="position:relative"><span class="email-field-prefix">Subject</span><input type="text" id="doc-email-subject" placeholder="" /></div>
<div id="doc-email-attachments" class="email-attachments" style="display:none"></div>
<div id="doc-email-compose-atts" class="email-compose-atts" style="display:none"></div>
</div>