Add remote browser pages and website sync
Enable managed remote browser custom pages with login autofill and add website sync workflows so external admin surfaces can be handled inside SmartUp. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
liumangmang
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
a13a0070a5
commit
7adc7c00ab
+579
-50
@@ -1,66 +1,595 @@
|
||||
/* SmartUp — Global CSS */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@500;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-base: #0d1117;
|
||||
--bg-surface: #161b22;
|
||||
--bg-card: #1c2128;
|
||||
--bg-elevated: #22272e;
|
||||
--border-color: #30363d;
|
||||
--text-primary: #e6edf3;
|
||||
--text-secondary: #8b949e;
|
||||
--text-muted: #6e7681;
|
||||
--color-primary: #6366f1;
|
||||
--color-primary-hover: #818cf8;
|
||||
--color-success: #22c55e;
|
||||
--color-danger: #ef4444;
|
||||
--color-warning: #f59e0b;
|
||||
--color-info: #38bdf8;
|
||||
--sidebar-width: 220px;
|
||||
--topbar-height: 56px;
|
||||
color-scheme: dark;
|
||||
|
||||
--bg-base: #120f0d;
|
||||
--bg-canvas: #17120f;
|
||||
--bg-surface: rgba(31, 24, 20, 0.92);
|
||||
--bg-surface-strong: rgba(38, 29, 24, 0.96);
|
||||
--bg-panel: rgba(44, 34, 28, 0.88);
|
||||
--bg-panel-soft: rgba(61, 47, 39, 0.42);
|
||||
--bg-elevated: rgba(78, 60, 50, 0.56);
|
||||
--border-color: rgba(218, 183, 142, 0.18);
|
||||
--border-strong: rgba(226, 192, 151, 0.34);
|
||||
--text-primary: #f5ede5;
|
||||
--text-secondary: #d8c2ac;
|
||||
--text-muted: #a08772;
|
||||
--text-soft: #8a7566;
|
||||
--color-primary: #d98b42;
|
||||
--color-primary-strong: #efaf63;
|
||||
--color-primary-soft: rgba(217, 139, 66, 0.18);
|
||||
--color-success: #7bc38f;
|
||||
--color-danger: #dd7e72;
|
||||
--color-warning: #d6aa58;
|
||||
--color-info: #86b7c7;
|
||||
--shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.28);
|
||||
--shadow-panel: 0 20px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 244, 232, 0.04);
|
||||
--radius-shell: 24px;
|
||||
--radius-panel: 18px;
|
||||
--radius-control: 12px;
|
||||
--radius-pill: 999px;
|
||||
--sidebar-width: 18.5rem;
|
||||
--topbar-height: 4.5rem;
|
||||
--shell-padding: clamp(1rem, 1.2vw + 0.8rem, 1.5rem);
|
||||
--content-max: 96rem;
|
||||
--ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--motion-fast: 180ms;
|
||||
--motion-base: 240ms;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background-color: var(--bg-base);
|
||||
html {
|
||||
font-size: 16px;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(217, 139, 66, 0.15), transparent 28%),
|
||||
radial-gradient(circle at bottom right, rgba(134, 183, 199, 0.08), transparent 24%),
|
||||
linear-gradient(180deg, #1a1410 0%, var(--bg-base) 50%, #0f0b09 100%);
|
||||
}
|
||||
|
||||
body,
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: var(--text-primary);
|
||||
background: transparent;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* Element Plus dark mode overrides */
|
||||
.el-table { --el-table-bg-color: var(--bg-card); --el-table-tr-bg-color: var(--bg-card); --el-table-header-bg-color: var(--bg-elevated); --el-table-border-color: var(--border-color); --el-table-text-color: var(--text-primary); --el-table-header-text-color: var(--text-secondary); }
|
||||
.el-dialog { --el-dialog-bg-color: var(--bg-surface); --el-dialog-border-color: var(--border-color); }
|
||||
.el-drawer { --el-drawer-bg-color: var(--bg-surface); }
|
||||
.el-form-item__label { color: var(--text-secondary); }
|
||||
.el-input__wrapper { background-color: var(--bg-elevated) !important; box-shadow: 0 0 0 1px var(--border-color) inset !important; }
|
||||
.el-input__inner { color: var(--text-primary) !important; }
|
||||
.el-select-dropdown { background-color: var(--bg-elevated); border-color: var(--border-color); }
|
||||
.el-select-dropdown__item { color: var(--text-primary); }
|
||||
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background-color: var(--bg-surface); }
|
||||
.el-tag { border-radius: 6px; }
|
||||
.el-button--primary { background-color: var(--color-primary); border-color: var(--color-primary); }
|
||||
.el-button--primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); }
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.brand-type {
|
||||
font-family: 'Alegreya Sans SC', 'Noto Sans SC', sans-serif;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.shell-page {
|
||||
width: min(100%, var(--content-max));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-section {
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.page-header,
|
||||
.section-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.page-kicker {
|
||||
color: var(--color-primary-strong);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-family: 'Alegreya Sans SC', 'Noto Sans SC', sans-serif;
|
||||
font-size: clamp(2rem, 1.4rem + 1.6vw, 3.05rem);
|
||||
line-height: 0.95;
|
||||
font-weight: 800;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
max-width: 62ch;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.7;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.surface-card,
|
||||
.card,
|
||||
.panel {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 244, 232, 0.02), transparent 45%),
|
||||
var(--bg-panel);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-panel);
|
||||
box-shadow: var(--shadow-panel);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.section-caption {
|
||||
color: var(--text-soft);
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 1rem 1.05rem;
|
||||
}
|
||||
|
||||
.metric-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: auto 1rem 0.9rem auto;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(217, 139, 66, 0.18), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: var(--text-soft);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
margin-top: 0.45rem;
|
||||
font-family: 'Alegreya Sans SC', 'Noto Sans SC', sans-serif;
|
||||
font-size: clamp(1.8rem, 1.2rem + 1.3vw, 2.6rem);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.metric-note {
|
||||
margin-top: 0.4rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.toolbar-cluster,
|
||||
.filters,
|
||||
.action-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
/* Status badges */
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
gap: 0.45rem;
|
||||
min-height: 1.95rem;
|
||||
padding: 0.2rem 0.72rem;
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid transparent;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.status-badge .dot {
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.status-badge.healthy {
|
||||
background: rgba(123, 195, 143, 0.12);
|
||||
color: var(--color-success);
|
||||
border-color: rgba(123, 195, 143, 0.22);
|
||||
}
|
||||
|
||||
.status-badge.unhealthy {
|
||||
background: rgba(221, 126, 114, 0.12);
|
||||
color: var(--color-danger);
|
||||
border-color: rgba(221, 126, 114, 0.22);
|
||||
}
|
||||
|
||||
.status-badge.unknown,
|
||||
.status-badge.disabled {
|
||||
background: rgba(160, 135, 114, 0.14);
|
||||
color: var(--text-muted);
|
||||
border-color: rgba(160, 135, 114, 0.2);
|
||||
}
|
||||
|
||||
.status-badge.enabled {
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary-strong);
|
||||
border-color: rgba(239, 175, 99, 0.22);
|
||||
}
|
||||
|
||||
.time-text,
|
||||
.muted,
|
||||
.small {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.muted,
|
||||
.small {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.cell-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.96rem;
|
||||
}
|
||||
|
||||
.cell-url,
|
||||
.cell-type {
|
||||
margin-top: 0.22rem;
|
||||
color: var(--text-soft);
|
||||
font-size: 0.78rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: var(--color-danger);
|
||||
font-size: 0.82rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.85rem;
|
||||
padding: 1rem 1.2rem 1.1rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.el-config-provider,
|
||||
.el-overlay,
|
||||
.el-popper {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.el-button {
|
||||
min-height: 2.75rem;
|
||||
border-radius: var(--radius-control);
|
||||
font-weight: 600;
|
||||
transition:
|
||||
transform var(--motion-fast) var(--ease-standard),
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
background-color var(--motion-fast) var(--ease-standard),
|
||||
color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.el-button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.el-button--default,
|
||||
.el-button--info {
|
||||
background: rgba(255, 244, 232, 0.03);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.el-button--default:hover,
|
||||
.el-button--info:hover {
|
||||
border-color: var(--border-strong);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
color: #20150d;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 10px 24px rgba(217, 139, 66, 0.2);
|
||||
}
|
||||
|
||||
.el-button--primary:hover,
|
||||
.el-button--primary:focus-visible {
|
||||
background: linear-gradient(135deg, var(--color-primary-strong) 0%, #f2bf82 100%);
|
||||
color: #1d140d;
|
||||
}
|
||||
|
||||
.el-button.is-text,
|
||||
.el-button--text {
|
||||
min-height: 2.3rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.el-button.is-circle {
|
||||
min-width: 2.75rem;
|
||||
padding: 0.55rem;
|
||||
}
|
||||
|
||||
.el-input__wrapper,
|
||||
.el-textarea__inner,
|
||||
.el-select__wrapper,
|
||||
.el-input-number,
|
||||
.el-date-editor.el-input,
|
||||
.el-date-editor.el-input__wrapper {
|
||||
background: rgba(255, 244, 232, 0.02) !important;
|
||||
border-radius: var(--radius-control);
|
||||
box-shadow: inset 0 0 0 1px rgba(218, 183, 142, 0.14) !important;
|
||||
transition: box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.el-input__wrapper.is-focus,
|
||||
.el-select__wrapper.is-focused,
|
||||
.el-textarea__inner:focus,
|
||||
.el-input-number:focus-within {
|
||||
box-shadow: inset 0 0 0 1px rgba(239, 175, 99, 0.42), 0 0 0 0.22rem rgba(217, 139, 66, 0.12) !important;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-textarea__inner,
|
||||
.el-select__selected-item,
|
||||
.el-form-item__label,
|
||||
.el-checkbox__label,
|
||||
.el-radio__label,
|
||||
.el-drawer__title,
|
||||
.el-dialog__title {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.el-form-item__label,
|
||||
.el-checkbox__label,
|
||||
.el-radio__label {
|
||||
font-weight: 500;
|
||||
}
|
||||
.status-badge.healthy { background: rgba(34,197,94,0.15); color: var(--color-success); }
|
||||
.status-badge.unhealthy { background: rgba(239,68,68,0.15); color: var(--color-danger); }
|
||||
.status-badge.unknown { background: rgba(110,118,129,0.2); color: var(--text-muted); }
|
||||
.status-badge.enabled { background: rgba(99,102,241,0.15); color: var(--color-primary); }
|
||||
.status-badge.disabled { background: rgba(110,118,129,0.15); color: var(--text-muted); }
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.el-radio__input.is-checked .el-radio__inner,
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
background-color: var(--color-primary) !important;
|
||||
border-color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
.el-switch__core {
|
||||
min-width: 2.9rem;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
border-radius: var(--radius-pill);
|
||||
border-color: transparent;
|
||||
padding-inline: 0.65rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-drawer,
|
||||
.el-dialog {
|
||||
--el-dialog-bg-color: var(--bg-surface-strong);
|
||||
--el-dialog-padding-primary: 1.4rem;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 244, 232, 0.03), transparent 20%),
|
||||
var(--bg-surface-strong);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: calc(var(--radius-panel) + 0.15rem) 0 0 calc(var(--radius-panel) + 0.15rem);
|
||||
color: var(--text-primary);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
border-radius: calc(var(--radius-panel) + 0.15rem);
|
||||
}
|
||||
|
||||
.el-overlay-dialog {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.el-select-dropdown,
|
||||
.el-popper.is-light,
|
||||
.el-picker-panel,
|
||||
.el-message-box,
|
||||
.el-descriptions,
|
||||
.el-popconfirm {
|
||||
background: var(--bg-surface-strong) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item,
|
||||
.el-picker-panel__content,
|
||||
.el-message-box__title,
|
||||
.el-message-box__message,
|
||||
.el-descriptions__label,
|
||||
.el-descriptions__content {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover,
|
||||
.el-select-dropdown__item.is-selected {
|
||||
background: rgba(255, 244, 232, 0.05) !important;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-row-hover-bg-color: rgba(255, 244, 232, 0.03);
|
||||
--el-table-header-bg-color: rgba(255, 244, 232, 0.02);
|
||||
--el-table-border-color: rgba(218, 183, 142, 0.1);
|
||||
--el-table-text-color: var(--text-primary);
|
||||
--el-table-header-text-color: var(--text-soft);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
font-size: 0.73rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell {
|
||||
padding-block: 0.95rem;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table tr {
|
||||
transition: background-color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.el-table::before,
|
||||
.el-table__inner-wrapper::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-checkbox-group,
|
||||
.el-radio-group {
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
background: rgba(18, 15, 13, 0.45);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
margin-bottom: 0.45rem;
|
||||
color: var(--text-soft);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
max-height: 18rem;
|
||||
overflow: auto;
|
||||
padding: 0.95rem 1rem;
|
||||
border-radius: var(--radius-control);
|
||||
background: rgba(17, 13, 11, 0.72);
|
||||
border: 1px solid rgba(218, 183, 142, 0.12);
|
||||
color: var(--text-secondary);
|
||||
font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.65;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
background: rgba(218, 183, 142, 0.24);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(218, 183, 142, 0.38);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.page-title {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.page-header,
|
||||
.section-header,
|
||||
.filters,
|
||||
.toolbar-cluster,
|
||||
.action-row {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filters > *,
|
||||
.toolbar-cluster > * {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user