mirror of
https://github.com/esengine/DeepSeek-Reasonix.git
synced 2026-11-07 10:45:59 -10:00
fix(studio): the overlays aligned to the board draw its 500 as --w-reg, not --w-med
The board sets body text at 500; the default weight ladder is 500 / 600 / 700, so 500 is --w-reg. Rules written as --w-med drew every line one step heavier than the board, and on Windows 600 falls on the bold face. Side panel answers also take the board's 1.7 line height.
This commit is contained in:
yhh committed
1 parent
ca80fec2fc
commit
4d0794b8f0
8 files changed
+44
-44
No files matched your search
@@ -43,7 +43,7 @@
|
||||
.compose :is(.mode, .studio-branch, .model-picker):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
|
||||
.compose .compose-context { box-sizing: border-box; min-height: 34px; margin: 0; padding: 6px 0 0 12px; }
|
||||
.compose .compose-context > .studio-runstate { min-height: 0; padding: 0 12px 0 0; }
|
||||
.compose .mode.composition-trigger { height: 24px; min-height: 24px; border-radius: var(--r-sm); color: var(--text); font-weight: var(--w-med); }
|
||||
.compose .mode.composition-trigger { height: 24px; min-height: 24px; border-radius: var(--r-sm); color: var(--text); font-weight: var(--w-reg); }
|
||||
.compose .mode.composition-trigger:is(:hover, [aria-expanded="true"]):not(:disabled) { border-color: var(--border); }
|
||||
.compose .mode.composition-trigger.locked { color: var(--muted); }
|
||||
.compose .mode.composition-trigger.unavailable { border-color: var(--border); color: var(--warn); }
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
:root .composition-menu .mi[data-on] { background: var(--overlay); }
|
||||
:root .composer-menu.composition-menu .mi[data-on]::after { color: var(--net-ink); }
|
||||
:root .composition-menu .mi[data-on]:has(.rt)::after { display: none; }
|
||||
:root .composition-menu .studio-item-meta { padding: 0 5px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--muted); font: var(--w-med) var(--fs-micro)/1.5 var(--ui); }
|
||||
.composition-menu .mi:not([data-on]) .rt { color: var(--net-ink); font-family: var(--ui); font-weight: var(--w-med); }
|
||||
:root .composition-menu .studio-item-meta { padding: 0 5px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--muted); font: var(--w-reg) var(--fs-micro)/1.5 var(--ui); }
|
||||
.composition-menu .mi:not([data-on]) .rt { color: var(--net-ink); font-family: var(--ui); font-weight: var(--w-reg); }
|
||||
.composition-trigger .nm { max-width: 180px; }
|
||||
.composition-trigger > .studio-icon { width: 12px; height: 12px; flex: none; }
|
||||
.composition-picker [role="alert"] { overflow-wrap: anywhere; }
|
||||
@@ -15,13 +15,13 @@
|
||||
.tfind input::-webkit-search-decoration { -webkit-appearance: none; appearance: none }
|
||||
.tfind input {
|
||||
flex: 1; min-width: 0; border: 0; background: none; outline: 0; color: var(--text);
|
||||
font: var(--w-med) var(--fs-ui) var(--ui);
|
||||
font: var(--w-reg) var(--fs-ui) var(--ui);
|
||||
}
|
||||
.tfind input::placeholder { color: var(--ghost) }
|
||||
.tfind .n {
|
||||
flex: none; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--overlay);
|
||||
display: inline-grid; place-items: center; white-space: nowrap;
|
||||
font: var(--w-med) var(--fs-micro) var(--ui); color: var(--muted); font-variant-numeric: tabular-nums;
|
||||
font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--muted); font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.tfind .n:empty { display: none }
|
||||
.tfind .n[data-empty] { background: none; padding: 0; font-size: var(--fs-meta); color: var(--err-ink) }
|
||||
@@ -35,17 +35,17 @@
|
||||
.tfind .sep { flex: none; width: 1px; height: 18px; background: var(--hair) }
|
||||
.tfind .mode-toggle {
|
||||
flex: none; display: inline-grid; place-items: center; height: 24px; padding: 0 7px; border: 0; border-radius: var(--r-xs);
|
||||
background: none; cursor: pointer; color: var(--muted); font: var(--w-semi, 600) var(--fs-meta) var(--mono);
|
||||
background: none; cursor: pointer; color: var(--muted); font: var(--w-med) var(--fs-meta) var(--mono);
|
||||
}
|
||||
.tfind .mode-toggle:hover { color: var(--text) }
|
||||
.tfind .mode-toggle[aria-pressed="true"] { background: var(--overlay); color: var(--text) }
|
||||
.tfind-scope { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-sm); background: var(--overlay) }
|
||||
.tfind-scope button {
|
||||
height: 24px; padding: 0 10px; border: 0; border-radius: var(--r-xs); background: none; cursor: pointer;
|
||||
color: var(--muted); font: var(--w-med) var(--fs-meta) var(--ui); white-space: nowrap;
|
||||
color: var(--muted); font: var(--w-reg) var(--fs-meta) var(--ui); white-space: nowrap;
|
||||
}
|
||||
.tfind-scope button[aria-pressed="true"] { background: var(--raised); color: var(--text); font-weight: var(--w-semi, 600); box-shadow: 0 1px 2px rgb(0 0 0 / .08) }
|
||||
.tfind-hint { font: var(--w-med) var(--fs-meta) var(--ui); color: var(--faint); text-align: right }
|
||||
.tfind-scope button[aria-pressed="true"] { background: var(--raised); color: var(--text); font-weight: var(--w-med); box-shadow: 0 1px 2px rgb(0 0 0 / .08) }
|
||||
.tfind-hint { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint); text-align: right }
|
||||
@container conversation (max-width: 460px) {
|
||||
.tfindbox { right: 12px; left: 12px; width: auto }
|
||||
}
|
||||
@@ -30,17 +30,17 @@
|
||||
.studio-overview-card > header { padding: 12px 14px 8px; border-bottom: 0; align-items: baseline; }
|
||||
.studio-overview-card > header > span { display: flex; align-items: baseline; gap: 8px; width: 100%; }
|
||||
.studio-overview-card > header b { font: var(--w-semi) var(--fs-lead)/1.3 var(--ui); }
|
||||
.studio-overview-card > header small { margin-left: auto; color: var(--faint); font: var(--w-med) var(--fs-meta)/1.3 var(--ui); text-align: right; }
|
||||
.studio-overview-card > p { margin: 0; padding: 0 14px 12px; color: var(--muted); font: var(--w-med) var(--fs-meta)/1.5 var(--ui); }
|
||||
.studio-overview-card > header small { margin-left: auto; color: var(--faint); font: var(--w-reg) var(--fs-meta)/1.3 var(--ui); text-align: right; }
|
||||
.studio-overview-card > p { margin: 0; padding: 0 14px 12px; color: var(--muted); font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); }
|
||||
.studio-overview-card .studio-overview-grid { padding: 0 14px; gap: 6px; }
|
||||
.studio-overview-card .studio-overview-grid > div { gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--page); }
|
||||
.studio-overview-card .studio-overview-grid dt { color: var(--muted); font: var(--w-med) var(--fs-meta)/1.3 var(--ui); }
|
||||
.studio-overview-card .studio-overview-grid dt { color: var(--muted); font: var(--w-reg) var(--fs-meta)/1.3 var(--ui); }
|
||||
.studio-overview-card .studio-overview-grid dd { font: var(--w-semi) var(--fs-title)/1.2 var(--ui); font-variant-numeric: tabular-nums; }
|
||||
.studio-overview-card .studio-overview-grid small { color: var(--faint); font: var(--w-med) var(--fs-micro)/1.4 var(--ui); }
|
||||
.studio-overview-card .studio-overview-grid small { color: var(--faint); font: var(--w-reg) var(--fs-micro)/1.4 var(--ui); }
|
||||
.studio-overview-card > section { display: grid; gap: 0; padding: 10px 14px 4px; }
|
||||
.studio-overview-card > section > div:first-child { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font: var(--w-med) var(--fs-meta)/1.3 var(--ui); }
|
||||
.studio-overview-card > section > div:first-child { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font: var(--w-reg) var(--fs-meta)/1.3 var(--ui); }
|
||||
.studio-overview-card > section > div:first-child b { font-weight: var(--w-semi); }
|
||||
.studio-overview-card .studio-overview-row { min-height: 26px; padding: 4px 0; font: var(--w-med) var(--fs-meta)/1.3 var(--ui); }
|
||||
.studio-overview-card .studio-overview-row { min-height: 26px; padding: 4px 0; font: var(--w-reg) var(--fs-meta)/1.3 var(--ui); }
|
||||
.studio-overview-card .studio-overview-row > span { color: var(--text); }
|
||||
.studio-overview-card > section[aria-label] + section { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 10px; }
|
||||
.chrome-context-card:not(.studio-overview-card) { gap: 0; width: min(360px, calc(100vw - 32px)); padding: 0; overflow: hidden; background: var(--float); box-shadow: var(--shadow-float); }
|
||||
@@ -49,13 +49,13 @@
|
||||
.chrome-context-card:not(.studio-overview-card) > header small { display: none; }
|
||||
.chrome-context-card:not(.studio-overview-card) > header strong { font: var(--w-semi) var(--fs-title)/1 var(--ui); }
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-bar { order: 1; height: 8px; gap: 0; margin: 0 14px; border-radius: var(--r-xs); background: var(--overlay); }
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-total { order: 2; margin: 4px 14px 0; color: var(--faint); font: var(--w-med) var(--fs-micro)/1.4 var(--ui); }
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-total { order: 2; margin: 4px 14px 0; color: var(--faint); font: var(--w-reg) var(--fs-micro)/1.4 var(--ui); }
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-total b { color: inherit; font: inherit; }
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-parts { order: 3; grid-template-columns: 1fr; gap: 0; padding: 8px 14px 0; }
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-parts > div { grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; height: 28px; color: var(--text); font: var(--w-med) var(--fs-meta)/1 var(--ui); }
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-parts > div { grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; height: 28px; color: var(--text); font: var(--w-reg) var(--fs-meta)/1 var(--ui); }
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-parts > div > i { width: 8px; height: 8px; border-radius: 2px; }
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-parts b,
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-parts .chrome-context-more { color: var(--muted); font: var(--w-med) var(--fs-meta)/1 var(--ui); }
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-parts .chrome-context-more { color: var(--muted); font: var(--w-reg) var(--fs-meta)/1 var(--ui); }
|
||||
.chrome-context-card:not(.studio-overview-card) > * { order: 4; }
|
||||
.chrome-context-card:not(.studio-overview-card) > header { order: 0; }
|
||||
.chrome-context-card:not(.studio-overview-card) > .chrome-context-bar { order: 1; }
|
||||
@@ -70,15 +70,15 @@
|
||||
.compact-now .wsconfirm { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--float); box-shadow: var(--shadow-float); }
|
||||
.compact-now .wsconfirm-t { gap: 6px; padding: 14px 16px; }
|
||||
.compact-now .wsconfirm-t .q { font: var(--w-semi) var(--fs-lead)/1.3 var(--ui); }
|
||||
.compact-now .wsconfirm-t .h { color: var(--muted); font: var(--w-med) var(--fs-ui)/1.5 var(--ui); }
|
||||
.compact-now .wsconfirm-t .u { margin-top: 4px; color: var(--text); font: var(--w-med) var(--fs-meta)/1.4 var(--ui); }
|
||||
.compact-now .wsconfirm-t .h { color: var(--muted); font: var(--w-reg) var(--fs-ui)/1.5 var(--ui); }
|
||||
.compact-now .wsconfirm-t .u { margin-top: 4px; color: var(--text); font: var(--w-reg) var(--fs-meta)/1.4 var(--ui); }
|
||||
.compact-now .wsconfirm-t .u small { color: var(--faint); font: inherit; }
|
||||
.compact-now .wsconfirm-a { justify-content: flex-end; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--hair); }
|
||||
.compact-now .wsconfirm-a button { height: 24px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: var(--w-med) var(--fs-meta) var(--ui); }
|
||||
.compact-now .wsconfirm-a button { height: 24px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: var(--w-reg) var(--fs-meta) var(--ui); }
|
||||
.compact-now .wsconfirm-a button:last-child { height: 32px; padding: 0 14px; border-color: var(--accent); border-radius: var(--r-sm); background: var(--accent); color: var(--accent-fg); font-size: var(--fs-ui); }
|
||||
.errbar[data-cause="root-missing"] { align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: var(--text); font: var(--w-med) var(--fs-ui)/1.4 var(--ui); }
|
||||
.errbar[data-cause="root-missing"] { align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: var(--text); font: var(--w-reg) var(--fs-ui)/1.4 var(--ui); }
|
||||
.errbar[data-cause="root-missing"] > .studio-icon { width: 16px; height: 16px; flex: none; color: var(--warn-ink); }
|
||||
.errbar[data-cause="root-missing"] > span { display: grid; gap: 2px; }
|
||||
.errbar[data-cause="root-missing"] > span > b { font-weight: var(--w-med); }
|
||||
.errbar[data-cause="root-missing"] > span > small { color: var(--muted); font: var(--w-med) var(--fs-meta)/1.4 var(--ui); }
|
||||
.errbar[data-cause="root-missing"] > button { height: 32px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font: var(--w-med) var(--fs-ui) var(--ui); text-decoration: none; white-space: nowrap; }
|
||||
.errbar[data-cause="root-missing"] > span > b { font-weight: var(--w-reg); }
|
||||
.errbar[data-cause="root-missing"] > span > small { color: var(--muted); font: var(--w-reg) var(--fs-meta)/1.4 var(--ui); }
|
||||
.errbar[data-cause="root-missing"] > button { height: 32px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--ui); text-decoration: none; white-space: nowrap; }
|
||||
@@ -7,9 +7,9 @@
|
||||
border-radius: var(--r-md);
|
||||
background: var(--hair);
|
||||
}
|
||||
.refine-card header { display: flex; align-items: center; gap: 6px; color: var(--muted); font: var(--w-med) var(--fs-micro)/1.4 var(--ui); }
|
||||
.refine-card header { display: flex; align-items: center; gap: 6px; color: var(--muted); font: var(--w-reg) var(--fs-micro)/1.4 var(--ui); }
|
||||
.refine-card header .studio-icon { width: 13px; height: 13px; stroke-width: 1.6; }
|
||||
.refine-card header b { color: var(--text); font-weight: var(--w-med); }
|
||||
.refine-card header b { color: var(--text); font-weight: var(--w-reg); }
|
||||
.refine-card header small { color: var(--faint); font: var(--w-reg) var(--fs-meta)/1.4 var(--ui); }
|
||||
.refine-card header { font-size: var(--fs-ui); }
|
||||
.refine-card header b { color: var(--text); font-weight: var(--w-semi); }
|
||||
@@ -21,7 +21,7 @@
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--faint);
|
||||
font: var(--w-med) var(--fs-meta)/1.4 var(--ui);
|
||||
font: var(--w-reg) var(--fs-meta)/1.4 var(--ui);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -41,29 +41,29 @@
|
||||
.sidepanel > header { align-items: center; justify-content: flex-start; gap: 8px; border-bottom-color: var(--hair); }
|
||||
.sidepanel > header > .studio-icon { width: 16px; height: 16px; flex: none; color: var(--muted); }
|
||||
.sidepanel > header b { font: var(--w-semi) var(--fs-ui)/1.3 var(--ui); }
|
||||
.sidepanel > header .sidebadge { display: inline-grid; place-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--overlay); color: var(--muted); font: var(--w-med) var(--fs-micro) var(--ui); white-space: nowrap; }
|
||||
.sidepanel > header .sidebadge { display: inline-grid; place-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--overlay); color: var(--muted); font: var(--w-reg) var(--fs-micro) var(--ui); white-space: nowrap; }
|
||||
.sidepanel > header .sideactions { margin-left: auto; gap: 2px; }
|
||||
.sidepanel > header .sideactions button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: var(--r-sm); }
|
||||
.sidepanel > header .sideactions button:hover { background: var(--overlay); }
|
||||
.sidepanel > header .sideactions .studio-icon { width: 16px; height: 16px; }
|
||||
.sidebody { gap: 10px; padding: 12px; }
|
||||
.sidehint.sideempty { padding: 6px 4px; text-align: center; color: var(--muted); font: var(--w-med) var(--fs-ui)/1.6 var(--ui); }
|
||||
.sidehint.sideempty { padding: 6px 4px; text-align: center; color: var(--muted); font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); }
|
||||
.sideturn[data-role="me"] { justify-self: end; max-width: 80%; padding: 8px 12px; border-radius: var(--r-md); background: var(--overlay); }
|
||||
.sideturn[data-role="me"] p { color: var(--text); font: var(--w-med) var(--fs-ui)/1.5 var(--ui); }
|
||||
.sideturn[data-role="side"] { font: var(--w-med) var(--fs-ui)/1.6 var(--ui); }
|
||||
.sideturn blockquote { padding: 0; border-left: 0; color: var(--muted); font: var(--w-med) var(--fs-meta)/1.5 var(--mono); }
|
||||
.sidetomain { justify-self: start; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: var(--w-med) var(--fs-meta) var(--ui); cursor: pointer; }
|
||||
.sideturn[data-role="me"] p { color: var(--text); font: var(--w-reg) var(--fs-ui)/1.5 var(--ui); }
|
||||
.sideturn[data-role="side"] { font: var(--w-reg) var(--fs-ui)/1.7 var(--ui); }
|
||||
.sideturn blockquote { padding: 0; border-left: 0; color: var(--muted); font: var(--w-reg) var(--fs-meta)/1.5 var(--mono); }
|
||||
.sidetomain { justify-self: start; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: var(--w-reg) var(--fs-meta) var(--ui); cursor: pointer; }
|
||||
.sidetomain:hover { background: var(--overlay); color: var(--text); }
|
||||
.sidetomain .studio-icon { width: 14px; height: 14px; }
|
||||
.sidequotes { padding: 0 12px 8px; }
|
||||
.sidequotes li { align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; box-sizing: border-box; border-radius: var(--r-sm); background: var(--raised); font: var(--w-med) var(--fs-meta) var(--ui); }
|
||||
.sidequotes li { align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; box-sizing: border-box; border-radius: var(--r-sm); background: var(--raised); font: var(--w-reg) var(--fs-meta) var(--ui); }
|
||||
.sidequotes li em { flex: none; font-style: normal; color: var(--muted); }
|
||||
.sidequotes li span { max-height: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--w-med) var(--fs-meta) var(--mono); }
|
||||
.sidequotes li span { max-height: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--w-reg) var(--fs-meta) var(--mono); }
|
||||
.sidequotes li button { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; color: var(--faint); }
|
||||
.sidequotes li button .studio-icon { width: 12px; height: 12px; }
|
||||
.sidecontent > footer { grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-top-color: var(--hair); }
|
||||
.sidecontent > footer .sidenote { grid-column: 1 / -1; margin: 0; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--r-sm); color: var(--faint); font: var(--w-med) var(--fs-meta)/1.4 var(--ui); }
|
||||
.sidecontent > footer .sidenote { grid-column: 1 / -1; margin: 0; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--r-sm); color: var(--faint); font: var(--w-reg) var(--fs-meta)/1.4 var(--ui); }
|
||||
.sidecontent > footer .sidequote { padding: 0 10px; height: 24px; border-color: transparent; }
|
||||
.sidepanel textarea { height: 32px; min-height: 32px; padding: 5px 10px; border-radius: var(--r-sm); font: var(--w-med) var(--fs-ui)/1.5 var(--ui); }
|
||||
.sidesend { height: 32px; padding: 0 14px; border-color: var(--border); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font: var(--w-med) var(--fs-ui)/1 var(--ui); }
|
||||
.sidepanel textarea { height: 32px; min-height: 32px; padding: 5px 10px; border-radius: var(--r-sm); font: var(--w-reg) var(--fs-ui)/1.5 var(--ui); }
|
||||
.sidesend { height: 32px; padding: 0 14px; border-color: var(--border); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui)/1 var(--ui); }
|
||||
.sidesend:not(:disabled) { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
|
||||
@@ -1,13 +1,13 @@
|
||||
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 21; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; width: min(760px, calc(100vw - 32px)); pointer-events: none; }
|
||||
.toast { pointer-events: auto; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--raised); font: var(--w-med) var(--fs-ui)/1.5 var(--ui); color: var(--text); animation: m-card var(--t-card) var(--ease-out) both; }
|
||||
.toast { pointer-events: auto; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--raised); font: var(--w-reg) var(--fs-ui)/1.5 var(--ui); color: var(--text); animation: m-card var(--t-card) var(--ease-out) both; }
|
||||
.toast-icon { display: flex; flex: none; color: var(--muted); }
|
||||
.toast-icon[data-tone="ok"] { color: var(--ok-ink); }
|
||||
.toast-icon[data-tone="warn"] { color: var(--warn-ink); }
|
||||
.toast-icon[data-tone="net"] { color: var(--net-ink); }
|
||||
.toast-icon .studio-icon { width: 16px; height: 16px; }
|
||||
.toast-body { flex: 1; min-width: 0; word-break: break-word; font-weight: var(--w-med); }
|
||||
.toast-body { flex: 1; min-width: 0; word-break: break-word; font-weight: var(--w-reg); }
|
||||
.toast-actions { display: flex; flex: none; align-items: center; gap: 6px; }
|
||||
.toast-actions .act { height: 24px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: var(--w-med) var(--fs-meta) var(--ui); white-space: nowrap; cursor: pointer; }
|
||||
.toast-actions .act { height: 24px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: var(--w-reg) var(--fs-meta) var(--ui); white-space: nowrap; cursor: pointer; }
|
||||
.toast-actions .act:hover { background: var(--overlay); color: var(--text); }
|
||||
.toast[data-stacked] { flex-wrap: wrap; }
|
||||
.toast[data-stacked] .toast-body { flex-basis: calc(100% - 40px); }
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
background: rgb(20 22 20 / .82); color: #f4f2ea;
|
||||
-webkit-backdrop-filter: blur(14px) saturate(.92); backdrop-filter: blur(14px) saturate(.92);
|
||||
}
|
||||
.image-preview-bar { display: flex; align-items: center; gap: 8px; min-width: 0; font: var(--w-med) var(--fs-meta) var(--ui); }
|
||||
.image-preview-bar { display: flex; align-items: center; gap: 8px; min-width: 0; font: var(--w-reg) var(--fs-meta) var(--ui); }
|
||||
.image-preview-bar > button { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; cursor: pointer; }
|
||||
.image-preview-bar > button:hover { background: rgb(255 255 255 / .14); }
|
||||
.image-preview-bar > button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
|
||||
@@ -17,4 +17,4 @@
|
||||
.image-preview-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.image-preview-view { display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden }
|
||||
.image-preview-view img { max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; border-radius: var(--r-sm); cursor: grab; touch-action: none; }
|
||||
.image-preview-hint { text-align: center; color: rgb(244 242 234 / .7); font: var(--w-med) var(--fs-meta) var(--ui); }
|
||||
.image-preview-hint { text-align: center; color: rgb(244 242 234 / .7); font: var(--w-reg) var(--fs-meta) var(--ui); }
|
||||
Reference in new issue
Block a user