569 lines
11 KiB
CSS
569 lines
11 KiB
CSS
.config-settings {
|
|
display: grid;
|
|
gap: 12px;
|
|
--config-accent: var(--pm-primary-color);
|
|
}
|
|
.config-page,
|
|
.config-page-body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
.config-navigation {
|
|
grid-area: submenu;
|
|
position: sticky;
|
|
top: 0;
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
.config-navigation > .settings-submenu {
|
|
grid-area: auto;
|
|
position: static;
|
|
}
|
|
.settings-header,
|
|
.panel-heading {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
}
|
|
.settings-header h3,
|
|
.panel-heading h4 {
|
|
margin: 0;
|
|
color: var(--pm-text-primary);
|
|
}
|
|
.settings-header h3 {
|
|
font-size: 20px;
|
|
line-height: 1.4;
|
|
flex-shrink: 0;
|
|
}
|
|
.settings-header {
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.settings-header .settings-desc {
|
|
margin: 6px 0 0;
|
|
}
|
|
.access-tag {
|
|
flex: none;
|
|
}
|
|
.config-availability {
|
|
display: grid;
|
|
justify-items: start;
|
|
gap: 16px;
|
|
}
|
|
.config-availability .el-alert {
|
|
width: 100%;
|
|
}
|
|
.panel-heading h4 {
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
.panel-heading h4 {
|
|
margin-top: 4px;
|
|
}
|
|
.heading-note {
|
|
margin: 5px 0 0;
|
|
color: var(--pm-text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.65;
|
|
}
|
|
.settings-desc {
|
|
color: var(--pm-text-secondary);
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
}
|
|
.section-eyebrow {
|
|
color: var(--config-accent);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.editor-panel,
|
|
.maintenance-panel {
|
|
border: 1px solid var(--pm-border-color);
|
|
border-radius: 12px;
|
|
background: var(--pm-bg-secondary);
|
|
}
|
|
.editor-panel {
|
|
padding: 16px;
|
|
}
|
|
.tag-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
.config-alert,
|
|
.degraded-alert {
|
|
margin-top: 16px;
|
|
}
|
|
.config-workspace {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) clamp(156px, 30%, 196px);
|
|
grid-template-areas: "main submenu";
|
|
align-items: start;
|
|
gap: 16px;
|
|
min-width: 0;
|
|
}
|
|
.config-main {
|
|
grid-area: main;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 12px;
|
|
min-width: 0;
|
|
container: config-main / inline-size;
|
|
}
|
|
.config-main > * {
|
|
min-width: 0;
|
|
}
|
|
.config-main:focus {
|
|
outline: none;
|
|
}
|
|
.config-main:focus-visible {
|
|
outline: 2px solid color-mix(in srgb, var(--config-accent) 35%, transparent);
|
|
outline-offset: -2px;
|
|
border-radius: 12px;
|
|
}
|
|
.panel-heading {
|
|
flex-wrap: wrap;
|
|
}
|
|
.editor-hint,
|
|
.action-hint {
|
|
margin: 8px 0 0;
|
|
color: var(--pm-text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
.secret-editor {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr);
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-top: 10px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--pm-border-color);
|
|
border-radius: 10px;
|
|
background: var(--pm-bg-primary);
|
|
}
|
|
.secret-editor label {
|
|
color: var(--pm-text-primary);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
.secret-editor p {
|
|
margin: 5px 0 0;
|
|
color: var(--pm-text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
.confirmation-check {
|
|
margin-top: 16px;
|
|
max-width: 100%;
|
|
height: auto;
|
|
align-items: flex-start;
|
|
}
|
|
.editor-footer {
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--pm-border-color);
|
|
}
|
|
.editor-footer .confirmation-check {
|
|
margin-top: 0;
|
|
}
|
|
.confirmation-check :deep(.el-checkbox__label) {
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
line-height: 1.5;
|
|
}
|
|
.confirmation-check :deep(.el-checkbox__input) {
|
|
margin-top: 3px;
|
|
}
|
|
.action-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
margin-top: 12px;
|
|
}
|
|
.action-row > .el-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
min-height: 32px;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
white-space: nowrap;
|
|
}
|
|
.maintenance-heading {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
gap: 6px 12px;
|
|
margin-top: 8px;
|
|
}
|
|
.maintenance-heading h4 {
|
|
margin: 0;
|
|
color: var(--pm-text-primary);
|
|
font-size: 14px;
|
|
}
|
|
.maintenance-heading p {
|
|
margin: 0;
|
|
color: var(--pm-text-secondary);
|
|
font-size: 12px;
|
|
}
|
|
.maintenance-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
border-radius: 16px;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
transition: background-color .18s ease;
|
|
}
|
|
.maintenance-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.maintenance-summary:hover {
|
|
background: var(--pm-bg-hover);
|
|
}
|
|
.maintenance-summary:focus-visible,
|
|
.backup-item:focus-visible {
|
|
outline: 2px solid var(--config-accent);
|
|
outline-offset: -3px;
|
|
}
|
|
.maintenance-copy {
|
|
display: grid;
|
|
flex: 1;
|
|
min-width: 0;
|
|
gap: 5px;
|
|
}
|
|
.maintenance-copy strong {
|
|
color: var(--pm-text-primary);
|
|
font-size: 14px;
|
|
}
|
|
.maintenance-copy > span {
|
|
color: var(--pm-text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
.disclosure-arrow {
|
|
flex: none;
|
|
width: 7px;
|
|
height: 7px;
|
|
margin: 0 3px;
|
|
border-right: 1.5px solid var(--pm-text-secondary);
|
|
border-bottom: 1.5px solid var(--pm-text-secondary);
|
|
transform: rotate(45deg);
|
|
transition: transform .18s ease;
|
|
}
|
|
.maintenance-panel[open] > .maintenance-summary {
|
|
border-bottom: 1px solid var(--pm-border-color);
|
|
border-radius: 16px 16px 0 0;
|
|
}
|
|
.maintenance-panel[open] .disclosure-arrow {
|
|
transform: rotate(225deg);
|
|
}
|
|
.maintenance-body {
|
|
padding: 14px 16px;
|
|
}
|
|
.backup-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
.backup-item {
|
|
display: grid;
|
|
gap: 5px;
|
|
padding: 12px;
|
|
color: var(--pm-text-primary);
|
|
text-align: left;
|
|
border: 1px solid var(--pm-border-color);
|
|
border-radius: var(--pm-radius-sm);
|
|
background: var(--pm-bg-primary);
|
|
cursor: pointer;
|
|
}
|
|
.backup-item:hover,
|
|
.backup-item.selected {
|
|
border-color: var(--pm-primary-color);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--pm-primary-color) 16%, transparent);
|
|
}
|
|
.backup-item small {
|
|
color: var(--pm-text-secondary);
|
|
}
|
|
.preview-box,
|
|
.result-box {
|
|
display: grid;
|
|
gap: 7px;
|
|
margin-top: 16px;
|
|
padding: 14px;
|
|
border-radius: var(--pm-radius-sm);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
.preview-box {
|
|
color: var(--pm-text-primary);
|
|
background: color-mix(in srgb, var(--pm-primary-color) 8%, var(--pm-bg-primary));
|
|
}
|
|
.result-success {
|
|
color: var(--el-color-success-dark-2);
|
|
background: var(--el-color-success-light-9);
|
|
}
|
|
.result-error {
|
|
color: var(--el-color-danger-dark-2);
|
|
background: var(--el-color-danger-light-9);
|
|
}
|
|
.result-box ul {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
}
|
|
@container config-main (max-width: 620px) {
|
|
.secret-editor {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
@container config-main (max-width: 400px) {
|
|
.editor-panel {
|
|
padding: 16px;
|
|
}
|
|
.maintenance-summary,
|
|
.maintenance-body {
|
|
padding: 14px;
|
|
}
|
|
.maintenance-summary {
|
|
flex-wrap: wrap;
|
|
}
|
|
.action-row .el-button {
|
|
flex: 1;
|
|
min-width: 110px;
|
|
}
|
|
}
|
|
@container settings-content (max-width: 560px) {
|
|
:global(.settings-drawer-desktop .config-workspace) {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-areas:
|
|
"submenu"
|
|
"main";
|
|
gap: 12px;
|
|
}
|
|
|
|
:global(.settings-drawer-desktop .config-navigation) {
|
|
position: static;
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
:global(.settings-drawer-desktop .config-main) {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-header {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.config-navigation {
|
|
gap: 10px;
|
|
}
|
|
|
|
.config-navigation > :deep(.settings-submenu) {
|
|
position: static;
|
|
padding: 2px 0 2px 10px;
|
|
border: 0;
|
|
border-left: 1px solid var(--pm-border-color);
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.config-navigation > :deep(.settings-submenu-heading) {
|
|
flex-direction: row-reverse;
|
|
padding: 2px 8px 8px;
|
|
}
|
|
|
|
.config-navigation > :deep(.settings-submenu-list) {
|
|
display: grid;
|
|
gap: 2px;
|
|
padding: 0;
|
|
}
|
|
|
|
.config-navigation > :deep(.settings-submenu-entry),
|
|
.config-navigation > :deep(.settings-submenu-item) {
|
|
width: 100%;
|
|
}
|
|
|
|
.config-navigation > :deep(.settings-submenu-item) {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.config-navigation > :deep(.has-children) {
|
|
margin-top: 6px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.config-navigation > :deep(.settings-tertiary-list) {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.config-navigation > :deep(.settings-submenu-item.active::before) {
|
|
top: 10px;
|
|
right: auto;
|
|
bottom: 10px;
|
|
left: -11px;
|
|
width: 3px;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.config-workspace {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-areas:
|
|
"submenu"
|
|
"main";
|
|
gap: 16px;
|
|
}
|
|
|
|
.config-navigation {
|
|
position: static;
|
|
}
|
|
}
|
|
.panel-desc {
|
|
margin: 0;
|
|
color: var(--pm-text-secondary);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
.migration-source {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-top: 10px;
|
|
}
|
|
.migration-source > div {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 8px 12px;
|
|
border-radius: var(--pm-radius-sm);
|
|
background: var(--pm-bg-primary);
|
|
}
|
|
.migration-source span {
|
|
color: var(--pm-text-secondary);
|
|
font-size: 13px;
|
|
}
|
|
.migration-source strong {
|
|
color: var(--pm-text-primary);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.migration-form {
|
|
max-width: 880px;
|
|
margin-top: 10px;
|
|
}
|
|
.migration-connection-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
|
gap: 6px 16px;
|
|
}
|
|
.migration-connection-grid :deep(.el-input-number) {
|
|
width: 100%;
|
|
}
|
|
@container config-main (max-width: 620px) {
|
|
.migration-connection-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
.migration-form :deep(.el-form-item) {
|
|
margin-bottom: 0;
|
|
}
|
|
.migration-form :deep(.el-form-item__label) {
|
|
margin-bottom: 4px;
|
|
line-height: 20px;
|
|
}
|
|
.migration-form > * + * {
|
|
margin-top: 8px;
|
|
}
|
|
@container config-main (min-width: 700px) {
|
|
.editor-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 8px 16px;
|
|
}
|
|
.editor-footer .confirmation-check {
|
|
flex: 1 1 280px;
|
|
}
|
|
.editor-footer .action-row {
|
|
margin-top: 0;
|
|
flex: 0 1 auto;
|
|
gap: 8px;
|
|
}
|
|
.editor-footer > .el-alert,
|
|
.editor-footer .action-hint {
|
|
flex-basis: 100%;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
.migration-result-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
.migration-error {
|
|
color: var(--el-color-danger);
|
|
}
|
|
.restart-services {
|
|
margin-top: 18px;
|
|
}
|
|
.restart-result {
|
|
margin-top: 16px;
|
|
}
|
|
@container config-main (max-width: 400px) {
|
|
.migration-source {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.migration-result-heading {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.config-settings {
|
|
--config-accent: var(--pm-primary-light-3);
|
|
}
|
|
}
|
|
@media (min-width: 769px) and (max-height: 800px) {
|
|
.config-page,
|
|
.config-page-body,
|
|
.config-main {
|
|
gap: 8px;
|
|
}
|
|
.editor-panel {
|
|
padding: 12px;
|
|
}
|
|
.editor-footer {
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
}
|
|
.secret-editor {
|
|
margin-top: 8px;
|
|
padding: 8px 10px;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.maintenance-summary,
|
|
.disclosure-arrow {
|
|
transition: none;
|
|
}
|
|
}
|