v0.8.13
This commit is contained in:
Mateusz Gruszczyński
+343
-12
@@ -203,8 +203,21 @@ input:focus, select:focus { border-color: var(--accent); outline: 2px solid colo
|
||||
.influx-fields[hidden] { display: none; }
|
||||
.influx-fields label:last-child:nth-child(odd) { grid-column: 1/-1; }
|
||||
.backup-actions { align-items: center; }
|
||||
.system-panel { margin-top: 14px; color: var(--muted); line-height: 1.7; }
|
||||
.system-panel strong { color: var(--text); }
|
||||
.system-panel { display:grid; gap:16px; margin-top:14px; padding:18px; }
|
||||
.system-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
|
||||
.system-panel-head h3 { margin:4px 0 5px; font-size:20px; }
|
||||
.system-panel-head p { max-width:700px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
|
||||
.system-health { display:inline-flex; align-items:center; min-height:30px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface-muted); font-size:10px; font-weight:800; white-space:nowrap; }
|
||||
.system-health.ok { border-color:var(--accent-border); color:var(--accent); background:var(--accent-soft); }
|
||||
.system-health.warn { border-color:color-mix(in srgb,var(--warning) 35%,var(--line)); color:var(--warning); background:var(--warning-soft); }
|
||||
.system-status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:9px; }
|
||||
.system-status-item { min-width:0; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-muted); }
|
||||
.system-status-item small,.system-status-item strong { display:block; }
|
||||
.system-status-item small { margin-bottom:5px; color:var(--muted); font-size:10px; }
|
||||
.system-status-item strong { overflow:hidden; color:var(--text); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.system-status-item.ok { border-color:color-mix(in srgb,var(--accent) 25%,var(--line)); }
|
||||
.system-status-item.warn { border-color:color-mix(in srgb,var(--warning) 28%,var(--line)); background:color-mix(in srgb,var(--warning-soft) 52%,var(--surface-muted)); }
|
||||
.system-status-item.mono strong { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:11px; }
|
||||
.gree-frame-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
|
||||
.gree-frame-stat { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
|
||||
.gree-frame-stat small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
|
||||
@@ -464,22 +477,38 @@ legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
|
||||
|
||||
.debug-overlay { position: fixed; z-index: 110; right: 18px; bottom: 92px; width: min(680px, calc(100vw - 36px)); max-height: min(46vh, 440px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 18px 60px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
|
||||
.debug-overlay[hidden] { display: none; }
|
||||
.debug-overlay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
|
||||
.debug-overlay-head > div { display: grid; gap: 2px; }
|
||||
.debug-overlay-head strong { font-size: 12px; }
|
||||
.debug-overlay-head small { color: var(--muted); font-size: 10px; }
|
||||
.debug-overlay-head button { padding: 6px 9px; color: var(--muted); background: var(--surface-muted); font-size: 10px; }
|
||||
.debug-overlay-lines { max-height: min(38vh, 360px); overflow: auto; padding: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
|
||||
.debug-line { display: grid; grid-template-columns: 70px 46px 1fr; gap: 8px; padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); font-size: 10px; line-height: 1.35; }
|
||||
.debug-line time, .debug-line b { color: var(--muted); font-weight: 600; }
|
||||
.debug-line span { overflow-wrap: anywhere; white-space: pre-wrap; }
|
||||
.debug-overlay-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line); }
|
||||
.debug-overlay-title { display:grid; flex:0 1 auto; gap:2px; min-width:90px; }
|
||||
.debug-overlay-head strong { font-size:12px; }
|
||||
.debug-overlay-head small { color:var(--muted); font-size:10px; }
|
||||
.debug-overlay-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:0; }
|
||||
.debug-source-tabs { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface-muted); }
|
||||
.debug-source-tabs button,.debug-overlay-head .debug-clear { min-height:28px; padding:5px 8px; border-radius:7px; color:var(--muted); background:transparent; font-size:9px; font-weight:750; }
|
||||
.debug-source-tabs button.active { color:var(--accent); background:var(--accent-soft); }
|
||||
.debug-overlay-head .debug-clear { border:1px solid var(--line); background:var(--surface-muted); }
|
||||
.debug-overlay-lines { max-height:min(38vh,360px); overflow:auto; padding:7px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }
|
||||
.debug-line { display:grid; grid-template-columns:70px 48px 1fr; gap:8px; margin:3px 0; padding:7px 8px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--surface-muted) 76%,transparent); font-size:10px; line-height:1.35; }
|
||||
.debug-line.source-gree { border-color:color-mix(in srgb,var(--accent) 25%,var(--line)); }
|
||||
.debug-line.source-request { border-color:color-mix(in srgb,var(--info) 24%,var(--line)); }
|
||||
.debug-line time,.debug-line b { color:var(--muted); font-weight:650; }
|
||||
.debug-line.source-gree b { color:var(--accent); }
|
||||
.debug-line.source-request b { color:var(--info); }
|
||||
.debug-line span { overflow-wrap:anywhere; white-space:pre-wrap; }
|
||||
.debug-empty { padding: 18px; color: var(--muted); text-align: center; font-size: 11px; }
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.custom-chart-add, .custom-chart-save { align-items: stretch; flex-direction: column; }
|
||||
.toast-stack { right: 12px; bottom: 88px; width: calc(100vw - 24px); }
|
||||
.debug-overlay { right: 12px; bottom: 88px; width: calc(100vw - 24px); }
|
||||
.debug-line { grid-template-columns: 58px 38px 1fr; }
|
||||
.debug-overlay-head { align-items:stretch; flex-direction:column; }
|
||||
.debug-overlay-actions { justify-content:space-between; }
|
||||
.debug-source-tabs { flex:1 1 auto; }
|
||||
.debug-source-tabs button { flex:1 1 auto; }
|
||||
.debug-line { grid-template-columns: 58px 42px 1fr; }
|
||||
.system-panel-head { align-items:stretch; flex-direction:column; }
|
||||
.system-health { align-self:flex-start; }
|
||||
.simulation-mode-banner { align-items:stretch; flex-direction:column; gap:3px; }
|
||||
.simulation-mode-banner strong { white-space:normal; }
|
||||
.influx-fields { grid-template-columns: 1fr; }
|
||||
.influx-fields label:last-child:nth-child(odd) { grid-column: auto; }
|
||||
}
|
||||
@@ -549,6 +578,11 @@ html[data-theme='light'] .simulation-metrics > div, html[data-theme='light'] .si
|
||||
.history-refresh-button { min-height:45px; align-self:end; }
|
||||
|
||||
.settings-form { display:grid; gap:14px; }
|
||||
.settings-mode-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:0 0 14px; padding:6px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }
|
||||
.settings-mode-tabs button { min-height:42px; border:1px solid transparent; border-radius:12px; color:var(--muted); background:transparent; font-size:12px; font-weight:800; }
|
||||
.settings-mode-tabs button.active { border-color:var(--accent-border); color:var(--accent); background:var(--accent-soft); }
|
||||
.settings-pane { display:grid; gap:14px; }
|
||||
.settings-pane[hidden] { display:none; }
|
||||
.settings-block { display:grid; gap:18px; }
|
||||
.settings-block-head { display:flex; align-items:flex-start; gap:13px; }
|
||||
.settings-block-head h3 { margin:1px 0 4px; font-size:18px; }
|
||||
@@ -971,3 +1005,300 @@ body.simulation-standalone [data-view="simulation"] { min-height:calc(100vh - 36
|
||||
}
|
||||
|
||||
/* 0.7.1+: quick thermostats and quick manual control use the shared quick-control classes above. */
|
||||
|
||||
/* 0.8.11 mobile toolbar and chart inspection UX */
|
||||
.topbar { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; }
|
||||
.top-actions { min-width: 0; }
|
||||
.language-picker {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 58px;
|
||||
height: 40px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 11px;
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-soft);
|
||||
transition: border-color .15s ease, background .15s ease, transform .15s ease;
|
||||
}
|
||||
.language-picker:hover { background: var(--surface-2); }
|
||||
.language-picker:active { transform: scale(.97); }
|
||||
.language-label { font-size: 11px; font-weight: 850; letter-spacing: .06em; line-height: 1; }
|
||||
.language-chevron { margin-top: -2px; color: var(--muted); font-size: 13px; line-height: 1; }
|
||||
.language-select {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toolbar-icon-control {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
flex: 0 0 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 11px;
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-soft);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
.toolbar-icon-control:hover { background: var(--surface-2); }
|
||||
#refreshButton.toolbar-icon-control { font-size: 21px; }
|
||||
button:focus-visible,
|
||||
.language-picker:focus-within {
|
||||
outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.chart-hover-line {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 1px;
|
||||
background: color-mix(in srgb, var(--text) 40%, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
.chart-tooltip {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
min-width: 175px;
|
||||
max-width: min(290px, calc(100vw - 32px));
|
||||
padding: 10px 11px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: color-mix(in srgb, var(--surface) 96%, transparent);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
|
||||
color: var(--text);
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.chart-tooltip-time { display: block; margin-bottom: 7px; color: var(--text-soft); font-weight: 800; font-variant-numeric: tabular-nums; }
|
||||
.chart-tooltip-values { display: grid; gap: 5px; }
|
||||
.chart-tooltip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
|
||||
.chart-tooltip-label { display: inline-flex; min-width: 0; align-items: center; gap: 6px; color: var(--muted); }
|
||||
.chart-tooltip-label i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--tooltip-color); }
|
||||
.chart-tooltip-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.chart-tooltip-value { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||||
.chart-tooltip-sample-time { color: var(--muted); font-size: 9px; font-weight: 600; }
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.topbar { min-height: 64px; gap: 6px; padding: 9px 10px; }
|
||||
.brand strong { font-size: 13px; }
|
||||
.toolbar-runtime-status { padding: 6px 8px; font-size: 10px; }
|
||||
.top-actions { gap: 5px; }
|
||||
.language-picker { width: 50px; height: 38px; border-radius: 10px; }
|
||||
.toolbar-icon-control { flex-basis: 38px; width: 38px; height: 38px; min-height: 38px; border-radius: 10px; }
|
||||
.language-chevron { font-size: 11px; }
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
|
||||
.brand { grid-column: 1; grid-row: 1; }
|
||||
.top-actions { grid-column: 2; grid-row: 1; }
|
||||
.toolbar-runtime-status {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
justify-self: stretch;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.chart-tooltip-sample-time { display:block; margin-top:1px; }
|
||||
@media (max-width: 700px) { .top-actions { width: auto; } }
|
||||
.chart-hover-hint { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
|
||||
.chart-tooltip-value { text-align:right; }
|
||||
.chart-wrap canvas:focus-visible { outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:-2px; }
|
||||
.toolbar-runtime-status { min-width:max-content; }
|
||||
|
||||
/* 0.8.13 settings separation, simulation warning, system status and debug filters */
|
||||
.toolbar-picker {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
flex: 0 0 54px;
|
||||
width: 54px;
|
||||
height: 40px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 11px;
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-soft);
|
||||
transition: border-color .15s ease, background .15s ease, transform .15s ease;
|
||||
}
|
||||
.toolbar-picker:hover { background: var(--surface-2); }
|
||||
.toolbar-picker:active { transform: scale(.97); }
|
||||
.toolbar-picker:focus-within {
|
||||
outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.toolbar-picker-value {
|
||||
min-width: 18px;
|
||||
color: var(--text-soft);
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
letter-spacing: .06em;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.theme-picker-value { font-size: 16px; letter-spacing: 0; }
|
||||
.toolbar-picker-chevron { margin-top: -2px; color: var(--muted); font-size: 12px; line-height: 1; }
|
||||
.toolbar-picker-select {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.connection-banner {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 9px 11px;
|
||||
border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--line));
|
||||
border-radius: 13px;
|
||||
background: color-mix(in srgb, var(--danger-soft) 78%, var(--surface));
|
||||
}
|
||||
.connection-banner[hidden] { display: none; }
|
||||
.simulation-mode-banner { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:14px; width:100%; padding:13px 16px; border:2px solid color-mix(in srgb,var(--warning) 62%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--warning-soft) 90%,var(--surface)); text-align:center; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warning) 10%,transparent),0 5px 18px color-mix(in srgb,var(--warning) 10%,transparent); }
|
||||
.simulation-mode-banner[hidden] { display:none; }
|
||||
.simulation-mode-banner strong { color:var(--warning); font-size:clamp(18px,2.6vw,26px); font-weight:950; letter-spacing:.09em; line-height:1; white-space:nowrap; }
|
||||
.simulation-mode-banner span { max-width:720px; color:var(--text-soft); font-size:12px; font-weight:700; line-height:1.35; }
|
||||
.connection-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 13%, transparent); }
|
||||
.connection-banner > div { min-width: 0; }
|
||||
.connection-banner strong, .connection-banner span { display: block; }
|
||||
.connection-banner strong { margin-bottom: 1px; font-size: 11px; }
|
||||
.connection-banner > div span { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.connection-banner button { min-height: 32px; padding: 6px 10px; border-radius: 9px; font-size: 10px; }
|
||||
body.connection-lost .connection-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 13%, transparent); }
|
||||
|
||||
.field-error {
|
||||
display: block;
|
||||
margin-top: -2px;
|
||||
color: var(--danger);
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.has-error > input,
|
||||
.has-error > select,
|
||||
.has-error > textarea,
|
||||
input[aria-invalid="true"],
|
||||
select[aria-invalid="true"],
|
||||
textarea[aria-invalid="true"] {
|
||||
border-color: color-mix(in srgb, var(--danger) 68%, var(--line));
|
||||
outline: 2px solid color-mix(in srgb, var(--danger) 13%, transparent);
|
||||
}
|
||||
.form-error-summary {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--line));
|
||||
border-radius: 12px;
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.settings-form > .form-error-summary { margin: 0 0 12px; }
|
||||
.dialog-form > .form-error-summary { margin-top: -2px; }
|
||||
.settings-form.is-saving,
|
||||
.dialog-form.is-saving { cursor: progress; }
|
||||
.button-spinner {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 7px;
|
||||
border: 2px solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
vertical-align: -2px;
|
||||
animation: button-spin .7s linear infinite;
|
||||
}
|
||||
@keyframes button-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.chart-title-row { align-items: flex-start; }
|
||||
.chart-zoom-controls {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 32px minmax(52px, auto) 32px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
.chart-zoom-controls button {
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
padding: 0 7px;
|
||||
border-radius: 0;
|
||||
border-right: 1px solid var(--line);
|
||||
background: transparent;
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
.chart-zoom-controls button:last-child { border-right: 0; }
|
||||
.chart-zoom-controls button:hover:not(:disabled) { background: var(--surface-2); }
|
||||
.chart-zoom-controls button:disabled { cursor: default; opacity: .34; }
|
||||
.chart-zoom-reset { color: var(--muted) !important; font-size: 10px !important; font-variant-numeric: tabular-nums; }
|
||||
.chart-wrap { overscroll-behavior-inline: contain; scroll-behavior: smooth; }
|
||||
.chart-wrap canvas { touch-action: pan-x pan-y; }
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.toolbar-picker { flex-basis: 38px; width: 38px; height: 38px; border-radius: 10px; gap: 2px; }
|
||||
.toolbar-picker-value { min-width: 15px; font-size: 10px; }
|
||||
.theme-picker-value { font-size: 14px; }
|
||||
.toolbar-picker-chevron { font-size: 9px; }
|
||||
.connection-banner { grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 9px; }
|
||||
.connection-banner > div span { white-space: normal; }
|
||||
.chart-title-row { align-items: stretch; flex-direction: column; }
|
||||
.chart-zoom-controls { align-self: flex-end; }
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.connection-banner { grid-column: 1 / -1; }
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
.topbar {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
.brand { grid-column: 1; grid-row: 1; }
|
||||
.top-actions { grid-column: 2; grid-row: 1; }
|
||||
.toolbar-runtime-status {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
justify-self: stretch;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.connection-banner { grid-column: 1 / -1; grid-row: auto; }
|
||||
}
|
||||
.settings-form.has-unsaved-changes .settings-save-bar {
|
||||
border-color: color-mix(in srgb, var(--accent) 48%, var(--line-strong));
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user