Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-16 09:45:24 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+16 -5
View File
@@ -30107,15 +30107,26 @@ body.doc-find-active mark.doc-find-mark.current {
from the To input. Anchored to the input's vertical center + 4px
nudge so the label sits where the user expects it. */
.email-field .email-cc-toggle {
position: absolute; right: 6px; top: calc(50% + 4px); transform: translateY(-50%);
position: absolute; right: 6px; top: calc(50% + 2px); transform: translateY(-50%);
z-index: 2;
}
/* Tint the placeholder hint (To / Cc / Bcc + example) accent so
the field names read as a label even without the <label> tag. */
.email-field input::placeholder {
/* Accent-tinted prefix label (To / Cc / Bcc / Subject) sitting at
the left edge of each input. Replaces both the old <label> tag
and the all-placeholder accent. */
.email-field .email-field-prefix {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
font-weight: 600;
color: var(--accent-primary, var(--red));
opacity: 0.65;
pointer-events: none;
z-index: 1;
line-height: 1;
}
.email-field input { padding-left: 44px; }
.email-field #doc-email-subject { padding-left: 64px; }
/* X close button inside Cc / Bcc fields. */
.email-field .email-cc-close {
position: absolute; right: 6px; top: calc(50% + 2px); transform: translateY(-50%);