/* style — section headers, your account, the settings drawer. One section of the old style.css. The pieces load in filename order and that order is the cascade, so do not rearrange them. */ /* ---------- section headers ---------- */ .section { padding: 8px 0 2px; border: none; } .field-label, .sec-title { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-dim); margin-bottom: 6px; } .section-head { display: flex; align-items: center; justify-content: space-between; } .ae-context { display: none; } /* minimal: hide the green comp/layer context text */ /* ---------- your account ---------- The whole drawer, now. Picture, who you are, what you have spent, the way out — and the picture itself is the button that changes it, because that is where everyone clicks first anyway. */ #profile-box.hidden, #settings-signedout.hidden, #settings-rest { display: none; } .prof-top { display: flex; align-items: center; gap: 11px; } #avatar-prev { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--bg); border: 1px solid var(--border); padding: 0; cursor: pointer; color: var(--text-dim); font-size: 16px; font-weight: 800; font-family: inherit; display: flex; align-items: center; justify-content: center; } #avatar-prev:hover { border-color: var(--accent); color: var(--text); } #avatar-prev img { width: 100%; height: 100%; object-fit: cover; display: block; } .prof-who { min-width: 0; } .prof-name { font-size: 12.5px; font-weight: 700; color: var(--text); } .prof-mail { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prof-acts { gap: 5px; margin-top: 10px; } #profile-box .acct-row { margin-top: 12px; } #profile-box #btn-signout { margin-top: 10px; } .prof-foot { margin-top: 8px; } /* ---------- settings / profile modal ---------- Simon: "When pressing the profile button, it should open the profile on a modal window." This used to be a plain block sitting in the normal flow of the panel (position:relative) — toggling .hidden just made a card appear inline wherever #settings happened to sit in the document, with nothing dimming or centring it. #settings (.drawer) is now the fixed, dimmed backdrop — same shape as #spend-modal, the one other true modal in the panel — and .settings-box, a new wrapper one level in (see index.html), carries the actual card look .drawer used to have itself. z-index is --z-modal rather than --z-drawer: the token's own description ("trim window, image editor, full preview") is exactly this now. */ .drawer { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); padding: 18px; } .settings-box { width: 100%; max-width: 360px; max-height: 100%; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); /* Above the sign-in gate (#authgate, --z-sticky = 40) the same way every child of a fixed --z-modal backdrop is: .drawer's own z-index already settles it, nothing local needed here. The drawer holds the sign-in form the gate points at, so this order matters — if the gate ever drew over it the panel would be unusable, told to sign in with the form hidden underneath the thing telling you. */ } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 9px; padding-bottom: 7px; border-bottom: 1px solid var(--border); } #settings-who { font-size: 10.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hidden { display: none !important; } .hint { color: var(--text-faint); font-size: 10px; margin-top: 5px; line-height: 1.45; } .hint a, .token { color: var(--blue); text-decoration: none; font-family: "Geist Mono", Consolas, monospace; } .check-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; cursor: pointer; color: var(--text-dim); } /* Two prompt settings on one line — Realism and Enhance, both checkboxes, both the same kind of thing. The pair carries the top margin so the rows inside it do not stack their own on top. */ .check-pair { display: flex; align-items: center; gap: 18px; } .check-pair .check-row { margin-top: 0; } .check-pair .check-row.dim { opacity: .4; pointer-events: none; } /* Enhance, as a button in the same row (Simon, 23 Sep). */ .enhance-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-sm, 6px); border: 1px solid var(--border); background: var(--surface-2, rgba(255,255,255,.04)); color: #d1d1d1; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; } .enhance-btn svg { width: 13px; height: 13px; color: var(--accent); } .enhance-btn:hover { border-color: var(--accent); color: #fff; } .enhance-btn.busy { opacity: .7; cursor: progress; } .enhance-btn.busy svg { animation: enh-spin 1.1s linear infinite; } .enhance-btn:disabled:not(.busy) { opacity: .4; pointer-events: none; } @keyframes enh-spin { to { transform: rotate(360deg); } } /* On the right of its row, ringed in white so it reads as a button (Simon, 27 Sep: "move enhance prompt button over to the right, add white border round button to make more obvious"). `order` rather than moving the node: Auto Reformat is appended into this row (07-media-utils.js) and keeps its place before it. */ /* Pink outline, not white (Simon, 28 Sep: "have the branded pink outline rather than white"). */ .check-pair #enhance-row { order: 99; margin-left: auto; border-color: var(--accent); color: #fff; } .check-pair #enhance-row:hover { border-color: var(--accent); background: rgba(229, 10, 78, .12); } /* Show Enhanced / Show Original: the brand colour, so it reads as the switch between the two prompts rather than another Enhance (Simon, 27 Sep). */ .check-pair #enhance-row.versions { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .check-pair #enhance-row.versions:hover { background: rgba(229, 10, 78, .12); } /* "Downscale" (index.html) sits outside #fields on purpose (see the comment there), so it does not pick up #fields .slider-row's own box for free — same look, copied here rather than widening that selector for one control outside its container. */ .downscale-slider { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; } .downscale-slider .slider-label { font-weight: 600; font-size: 11px; white-space: nowrap; color: var(--text); } .downscale-slider .slider-val { font-weight: 700; min-width: 30px; text-align: right; color: var(--text); } /* ---- HUGGING FACE: THE ONE SETTING THAT IS STILL YOURS ---- Every other provider key moved to the team gateway and this drawer was stripped back to the profile — see the note in index.html. A Space lives at your own account's URL under your own token, so the gateway cannot supply either, and this pair stayed behind. It stayed behind INSIDE the hidden block, wired to a Save button that is also in there, which made it a setting that existed and could not be reached: Simon made a token, came looking for the box, and there was no box. Given its own card here so it reads as a thing that belongs to you rather than as leftovers at the foot of somebody else's panel. */ .hf-box { margin-top: 12px; padding: 10px 11px 9px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); } .hf-head { font-size: 10.5px; font-weight: 700; color: var(--text); display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .hf-head .hint { margin-top: 0; } .hf-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; } /* A fixed label column, so the two fields line up with each other rather than each starting wherever its own word happens to end. */ .hf-lab { flex: none; width: 72px; font-size: 10px; color: var(--text-dim); } /* background-COLOR, not the shorthand: `background:` wiped the chevron every