mirror of
https://github.com/Matysh/houseplan-card
synced 2026-07-31 08:28:31 +00:00
refactor+fix v1.10.0: аудит — гонки записи (asyncio.Lock, атомарный rev), точечный layout/update вместо layout/set (анти last-writer-wins), layout/delete, safeUrl против XSS в link/pdfs, fetchWithAuth, KEY_HASS, стриминговый лимит upload, модульность (styles/types/devices), динамические пространства в GUI-редакторе, чистка мёртвого кода (file/set, GROUP_TITLES)
This commit is contained in:
Matysh
+727
@@ -0,0 +1,727 @@
|
||||
/** Стили карточки House Plan (вынесены из компонента). */
|
||||
import { css } from 'lit';
|
||||
|
||||
export const cardStyles = css`
|
||||
:host {
|
||||
--hp-bg: var(--card-background-color, #16212e);
|
||||
--hp-line: var(--divider-color, #2b3d4f);
|
||||
--hp-txt: var(--primary-text-color, #e6edf3);
|
||||
--hp-muted: var(--secondary-text-color, #8aa0b3);
|
||||
--hp-accent: var(--primary-color, #3ea6ff);
|
||||
--hp-on: #ffd45c;
|
||||
--hp-open: #ff9f43;
|
||||
}
|
||||
ha-card {
|
||||
overflow: visible; /* overflow:hidden ломает position:sticky у шапки */
|
||||
}
|
||||
.empty {
|
||||
padding: 40px 24px;
|
||||
color: var(--hp-txt);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.empty .big {
|
||||
--mdc-icon-size: 56px;
|
||||
color: var(--hp-accent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.empty .muted {
|
||||
color: var(--hp-muted);
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
.empty .btn {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.hdr {
|
||||
position: sticky;
|
||||
top: var(--header-height, 56px);
|
||||
z-index: 20;
|
||||
background: var(--card-background-color, var(--hp-bg));
|
||||
border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) 0 0;
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--hp-line);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.title ha-icon {
|
||||
color: var(--hp-accent);
|
||||
--mdc-icon-size: 18px;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background: rgba(127, 127, 127, 0.12);
|
||||
padding: 3px;
|
||||
border-radius: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.head { gap: 6px; padding: 8px 10px; }
|
||||
.head .count { display: none; }
|
||||
.head .title { font-size: 14px; }
|
||||
}
|
||||
.tab {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--hp-muted);
|
||||
padding: 6px 13px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.tab:hover {
|
||||
color: var(--hp-txt);
|
||||
}
|
||||
.tab.active {
|
||||
background: var(--hp-accent);
|
||||
color: var(--text-primary-color, #fff);
|
||||
}
|
||||
.count {
|
||||
font-size: 12px;
|
||||
color: var(--hp-muted);
|
||||
}
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: 1px solid var(--hp-line);
|
||||
background: transparent;
|
||||
color: var(--hp-txt);
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: 0.15s;
|
||||
font-family: inherit;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.btn ha-icon {
|
||||
--mdc-icon-size: 17px;
|
||||
}
|
||||
.btn:hover {
|
||||
border-color: var(--hp-accent);
|
||||
}
|
||||
.btn.on {
|
||||
background: var(--hp-accent);
|
||||
color: var(--text-primary-color, #fff);
|
||||
border-color: var(--hp-accent);
|
||||
}
|
||||
.btn.ghost {
|
||||
border: none;
|
||||
}
|
||||
.btn[disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
container-type: inline-size;
|
||||
overflow: hidden;
|
||||
touch-action: none; /* свои жесты pinch/pan */
|
||||
background: var(--ha-card-background, var(--card-background-color, #111));
|
||||
}
|
||||
.zoomwrap {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.zoomctl {
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
background: rgba(127, 127, 127, 0.12);
|
||||
border-radius: 8px;
|
||||
padding: 2px;
|
||||
}
|
||||
.zoomctl .zb {
|
||||
border: none;
|
||||
padding: 5px 7px;
|
||||
}
|
||||
.zoomctl .zb[disabled] {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
.zoombadge {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
bottom: 8px;
|
||||
background: rgba(4, 18, 31, 0.8);
|
||||
color: #dff1ff;
|
||||
border: 1px solid var(--hp-accent);
|
||||
border-radius: 8px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
}
|
||||
.stage svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.room {
|
||||
transition: 0.12s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.room.overlay {
|
||||
fill: transparent;
|
||||
stroke: transparent;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.room.overlay:hover {
|
||||
fill: rgba(62, 166, 255, 0.18);
|
||||
stroke: var(--hp-accent);
|
||||
}
|
||||
.room.yard {
|
||||
fill: rgba(75, 140, 90, 0.14);
|
||||
stroke: #4b8c5a;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.room.yard:hover {
|
||||
fill: rgba(75, 140, 90, 0.24);
|
||||
stroke: #6fbf86;
|
||||
}
|
||||
.rlabel {
|
||||
fill: var(--hp-muted);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
text-anchor: middle;
|
||||
}
|
||||
.stage.edit .room {
|
||||
pointer-events: none;
|
||||
}
|
||||
.stage.markup {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.stage.markup .room {
|
||||
pointer-events: none;
|
||||
}
|
||||
.stage.markup .devlayer {
|
||||
display: none; /* в разметке иконки не мешают */
|
||||
}
|
||||
.room.outlined {
|
||||
stroke: rgba(62, 166, 255, 0.55);
|
||||
fill: rgba(62, 166, 255, 0.06);
|
||||
}
|
||||
.griddot {
|
||||
fill: var(--hp-accent);
|
||||
opacity: 0.75;
|
||||
stroke: rgba(0, 0, 0, 0.35);
|
||||
stroke-width: 0.4;
|
||||
}
|
||||
.seg {
|
||||
stroke: var(--hp-accent);
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.pathline {
|
||||
stroke: #ffc14d;
|
||||
stroke-width: 3;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.preview {
|
||||
stroke: #ffc14d;
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 6 5;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.vertex {
|
||||
fill: #ffc14d;
|
||||
stroke: #4a2800;
|
||||
stroke-width: 1;
|
||||
}
|
||||
.vertex.first {
|
||||
fill: #4bd28f;
|
||||
stroke: #04121f;
|
||||
}
|
||||
.areasel,
|
||||
.namein {
|
||||
background: var(--hp-bg);
|
||||
border: 1px solid var(--hp-line);
|
||||
color: var(--hp-txt);
|
||||
border-radius: 6px;
|
||||
padding: 6px 8px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.namein {
|
||||
width: 130px;
|
||||
}
|
||||
.devlayer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dev {
|
||||
position: absolute;
|
||||
width: var(--icon-size, 2.5cqw);
|
||||
height: var(--icon-size, 2.5cqw);
|
||||
margin: calc(var(--icon-size, 2.5cqw) / -2) 0 0 calc(var(--icon-size, 2.5cqw) / -2);
|
||||
border-radius: 22%;
|
||||
background: var(--hp-bg);
|
||||
border: 1px solid var(--hp-line);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--hp-txt);
|
||||
cursor: grab;
|
||||
pointer-events: auto;
|
||||
transition: background 0.15s, border-color 0.15s, opacity 0.2s;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
|
||||
z-index: 2;
|
||||
}
|
||||
.dev ha-icon {
|
||||
--mdc-icon-size: calc(var(--icon-size, 2.5cqw) * 0.62);
|
||||
}
|
||||
.dev:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.dev:hover {
|
||||
background: var(--hp-accent);
|
||||
color: var(--text-primary-color, #fff);
|
||||
z-index: 5;
|
||||
}
|
||||
.dev.on {
|
||||
background: var(--hp-on);
|
||||
border-color: var(--hp-on);
|
||||
color: #503c00;
|
||||
box-shadow: 0 0 8px rgba(255, 212, 92, 0.7);
|
||||
}
|
||||
.dev.open {
|
||||
background: var(--hp-open);
|
||||
border-color: var(--hp-open);
|
||||
color: #4a2800;
|
||||
}
|
||||
.dev.unavail {
|
||||
opacity: 0.35;
|
||||
}
|
||||
.dev.virtual {
|
||||
border-style: dashed;
|
||||
}
|
||||
.dev.sel {
|
||||
border-color: #ffc14d;
|
||||
box-shadow: 0 0 0 3px rgba(255, 193, 77, 0.35);
|
||||
}
|
||||
|
||||
.dev .tval {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: calc(var(--icon-size, 2.5cqw) * 0.1);
|
||||
background: rgba(4, 18, 31, 0.9);
|
||||
border: 1px solid var(--hp-accent);
|
||||
border-radius: calc(var(--icon-size, 2.5cqw) * 0.18);
|
||||
padding: 0 calc(var(--icon-size, 2.5cqw) * 0.14);
|
||||
font-size: calc(var(--icon-size, 2.5cqw) * 0.45);
|
||||
font-weight: 700;
|
||||
line-height: calc(var(--icon-size, 2.5cqw) * 0.68);
|
||||
color: #dff1ff;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dev .lqi {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: calc(var(--icon-size, 2.5cqw) * 0.05);
|
||||
font-size: calc(var(--icon-size, 2.5cqw) * 0.38);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
.editbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 14px;
|
||||
border-bottom: 1px solid var(--hp-line);
|
||||
font-size: 13px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tab .tabedit {
|
||||
--mdc-icon-size: 13px;
|
||||
margin-left: 6px;
|
||||
opacity: 0.4;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tab:hover .tabedit {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.tab.tabadd {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
.tab.tabadd ha-icon {
|
||||
--mdc-icon-size: 15px;
|
||||
}
|
||||
.planrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.planprev {
|
||||
max-width: 120px;
|
||||
max-height: 70px;
|
||||
border: 1px solid var(--hp-line);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
}
|
||||
.planname {
|
||||
font-size: 12.5px;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.planname.muted {
|
||||
color: var(--hp-muted);
|
||||
}
|
||||
.filebtn {
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn.danger {
|
||||
border-color: #b3402a;
|
||||
color: #ff7a5c;
|
||||
}
|
||||
.dialog .row .spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.dialog.wide {
|
||||
width: min(440px, 94vw);
|
||||
}
|
||||
.dialog .body {
|
||||
max-height: 66vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.descin {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: var(--hp-bg);
|
||||
border: 1px solid var(--hp-line);
|
||||
color: var(--hp-txt);
|
||||
border-radius: 6px;
|
||||
padding: 6px 8px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
}
|
||||
.bindsel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border: 1px solid var(--hp-line);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
.bindsel .opt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: 1px solid var(--hp-line);
|
||||
background: transparent;
|
||||
color: var(--hp-txt);
|
||||
border-radius: 6px;
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12.5px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.bindsel .opt.on {
|
||||
background: var(--hp-accent);
|
||||
color: var(--text-primary-color, #fff);
|
||||
border-color: var(--hp-accent);
|
||||
}
|
||||
.curbind {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12.5px;
|
||||
color: var(--hp-txt);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.curbind .ref {
|
||||
color: var(--hp-muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
.candlist {
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid var(--hp-line);
|
||||
}
|
||||
.cand {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.cand:hover {
|
||||
background: rgba(127, 127, 127, 0.15);
|
||||
}
|
||||
.cand.sel {
|
||||
background: var(--hp-accent);
|
||||
color: var(--text-primary-color, #fff);
|
||||
}
|
||||
.cand .cs {
|
||||
color: var(--hp-muted);
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cand.sel .cs {
|
||||
color: var(--text-primary-color, #fff);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.cand.muted {
|
||||
color: var(--hp-muted);
|
||||
cursor: default;
|
||||
}
|
||||
.pdfedit {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.pdftag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border: 1px solid var(--hp-line);
|
||||
border-radius: 6px;
|
||||
padding: 3px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.pdftag a {
|
||||
color: var(--hp-txt);
|
||||
text-decoration: none;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pdftag .x {
|
||||
--mdc-icon-size: 15px;
|
||||
cursor: pointer;
|
||||
color: var(--hp-muted);
|
||||
}
|
||||
.pdftag .x:hover {
|
||||
color: #ff7a5c;
|
||||
}
|
||||
.inforow {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
.inforow .k {
|
||||
color: var(--hp-muted);
|
||||
min-width: 84px;
|
||||
}
|
||||
.inforow a {
|
||||
color: var(--hp-accent);
|
||||
word-break: break-all;
|
||||
}
|
||||
.infodesc {
|
||||
font-size: 13px;
|
||||
white-space: pre-wrap;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.infodesc.muted {
|
||||
color: var(--hp-muted);
|
||||
}
|
||||
.pdflist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.pdf {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--hp-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
ha-icon-picker {
|
||||
display: block;
|
||||
}
|
||||
.dialogwrap {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 90;
|
||||
}
|
||||
.dialog {
|
||||
background: var(--card-background-color, var(--hp-bg));
|
||||
border: 1px solid var(--hp-accent);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
|
||||
width: min(360px, 92vw);
|
||||
overflow: hidden;
|
||||
}
|
||||
.dialog .hd {
|
||||
padding: 12px 16px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--hp-line);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.dialog .hd ha-icon {
|
||||
color: var(--hp-accent);
|
||||
}
|
||||
.dialog .body {
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.dialog .body label {
|
||||
font-size: 12px;
|
||||
color: var(--hp-muted);
|
||||
margin-top: 6px;
|
||||
}
|
||||
.dialog .body .namein,
|
||||
.dialog .body .areasel {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dialog .row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--hp-line);
|
||||
}
|
||||
.editbar .warn {
|
||||
color: #ffc14d;
|
||||
}
|
||||
.editbar .sname {
|
||||
font-weight: 600;
|
||||
}
|
||||
.editbar input {
|
||||
width: 74px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--hp-line);
|
||||
color: var(--hp-txt);
|
||||
border-radius: 6px;
|
||||
padding: 5px 7px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.editbar label,
|
||||
.editbar .hint {
|
||||
color: var(--hp-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.menuwrap {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
}
|
||||
.menu {
|
||||
position: fixed;
|
||||
background: var(--hp-bg);
|
||||
border: 1px solid var(--hp-accent);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
|
||||
min-width: 210px;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
transform: translate(0, 8px);
|
||||
}
|
||||
.menu .hd {
|
||||
padding: 8px 12px;
|
||||
font-weight: 600;
|
||||
font-size: 12.5px;
|
||||
border-bottom: 1px solid var(--hp-line);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.menu .hd ha-icon,
|
||||
.menu .it.all ha-icon {
|
||||
color: var(--hp-accent);
|
||||
--mdc-icon-size: 16px;
|
||||
}
|
||||
.menu .it {
|
||||
padding: 8px 12px;
|
||||
font-size: 12.5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.menu .it ha-icon {
|
||||
--mdc-icon-size: 16px;
|
||||
color: var(--hp-muted);
|
||||
}
|
||||
.menu .it:hover {
|
||||
background: rgba(127, 127, 127, 0.15);
|
||||
}
|
||||
.menu .it.all {
|
||||
color: var(--hp-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.tip {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
background: var(--hp-bg);
|
||||
border: 1px solid var(--hp-accent);
|
||||
color: var(--hp-txt);
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 12.5px;
|
||||
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
|
||||
z-index: 99;
|
||||
max-width: 260px;
|
||||
}
|
||||
.tip .m {
|
||||
color: var(--hp-muted);
|
||||
font-size: 11px;
|
||||
display: block;
|
||||
}
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 22px;
|
||||
transform: translateX(-50%);
|
||||
background: var(--hp-bg);
|
||||
border: 1px solid var(--hp-accent);
|
||||
color: var(--hp-txt);
|
||||
padding: 9px 16px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
|
||||
z-index: 120;
|
||||
max-width: 90vw;
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user