38 lines
3.0 KiB
CSS
38 lines
3.0 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
|
|
background: transparent;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; height: 100vh; display: grid; place-items: center; isolation: isolate; background: transparent; color: var(--dsw-alias-label-primary); color-scheme: light; }
|
|
body[data-ds-dark-theme] { color-scheme: dark; }
|
|
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--dsw-alias-bg-mask-1); }
|
|
main { width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 24px 24px; border-radius: 24px; background: var(--dsw-alias-bg-layer-1); box-shadow: none; }
|
|
body[data-ds-dark-theme] main { box-shadow: inset 0 0 0 1px var(--dsw-alias-border-l2); }
|
|
header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
|
|
main:focus { outline: none; }
|
|
h1 { margin: 0; min-height: 28px; font-size: 16px; font-weight: 500; line-height: 24px; overflow-wrap: anywhere; }
|
|
p { margin: 0; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
#actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; position: sticky; bottom: 0; background: var(--dsw-alias-bg-layer-1); }
|
|
button { min-height: 44px; padding: 9px 16px; border: 0; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 22px; color: inherit; cursor: pointer; }
|
|
.primary { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-inverted); }
|
|
|
|
.secondary { background: var(--dsw-alias-button-primary-dimmed); color: inherit; }
|
|
.close { display: grid; place-items: center; flex: none; width: 28px; min-height: 28px; padding: 7px; border-radius: 50%; background: transparent; }
|
|
.close::before { content: ""; width: 14px; height: 14px; background: currentColor; mask: url("update-close.svg") center / contain no-repeat; }
|
|
|
|
button:focus-visible, summary:focus-visible, pre:focus-visible { outline: 2px solid var(--dsw-alias-link); outline-offset: 3px; }
|
|
details { margin-top: 12px; font-size: 13px; line-height: 20px; }
|
|
summary { cursor: pointer; color: var(--dsw-alias-label-secondary); }
|
|
pre { margin: 8px 0 0; padding: 10px; max-height: min(180px, 30vh); overflow: auto; border-radius: 8px; background: var(--dsw-alias-markdown-code-block); font: 12px/18px monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
button:disabled { opacity: 0.5; cursor: default; }
|
|
[hidden] { display: none !important; }
|
|
body.update-dialog { opacity: 0; transition: opacity 150ms ease; }
|
|
body.update-dialog.visible { opacity: 1; }
|
|
@starting-style { body.update-dialog.visible { opacity: 0; } }
|
|
@media (prefers-reduced-motion: reduce) { body.update-dialog { transition: none; } }
|
|
@media (hover: hover) {
|
|
.primary:hover:not(:disabled) { background: var(--dsw-alias-button-primary-hover); }
|
|
.secondary:hover:not(:disabled), .close:hover { background: var(--dsw-alias-interactive-bg-hover); }
|
|
}
|