325 lines
7.0 KiB
SCSS
325 lines
7.0 KiB
SCSS
.admin-container {
|
|
margin-top: var(--space-8);
|
|
max-width: min(1720px, 96vw);
|
|
padding: 0 clamp(12px, 2.2vw, 24px);
|
|
}
|
|
|
|
.admin-shell {
|
|
display: grid;
|
|
grid-template-columns: 260px minmax(0, 1fr);
|
|
min-height: calc(100vh - 220px);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
background: var(--color-bg-card);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.sidebar {
|
|
background: var(--color-neutral-100);
|
|
color: var(--color-text);
|
|
padding: var(--space-6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
.brand h1 {
|
|
margin: 0;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.brand p {
|
|
margin: var(--space-2) 0 0;
|
|
color: var(--color-text-muted);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.menu-scroll {
|
|
min-width: 0;
|
|
}
|
|
|
|
.menu a {
|
|
text-decoration: none;
|
|
color: var(--color-text-muted);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3) var(--space-4);
|
|
font-weight: 600;
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-bg-card);
|
|
transition:
|
|
border-color 0.2s ease,
|
|
background-color 0.2s ease,
|
|
color 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.menu a:hover {
|
|
border-color: var(--color-brand);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.menu a.active {
|
|
background: #fff5b8;
|
|
color: var(--color-text);
|
|
border-color: var(--color-brand);
|
|
}
|
|
|
|
.logout {
|
|
margin-top: auto;
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text);
|
|
background: var(--color-bg-card);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3) var(--space-4);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition:
|
|
border-color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.logout:hover {
|
|
border-color: var(--color-brand);
|
|
background: #fff8cc;
|
|
}
|
|
|
|
.content {
|
|
background: var(--color-bg);
|
|
padding: var(--space-6);
|
|
min-width: 0;
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-form-control,
|
|
:host
|
|
::ng-deep
|
|
.content
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
|
|
:host ::ng-deep .content select,
|
|
:host ::ng-deep .content textarea {
|
|
width: 100%;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-2);
|
|
background: var(--color-bg-card);
|
|
color: var(--color-text);
|
|
font: inherit;
|
|
font-size: 1rem;
|
|
transition:
|
|
border-color 0.2s ease,
|
|
box-shadow 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-form-control:focus,
|
|
:host
|
|
::ng-deep
|
|
.content
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
|
|
:host ::ng-deep .content select:focus,
|
|
:host ::ng-deep .content textarea:focus {
|
|
outline: none;
|
|
border-color: var(--color-brand);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-form-control:disabled,
|
|
:host
|
|
::ng-deep
|
|
.content
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):disabled,
|
|
:host ::ng-deep .content select:disabled,
|
|
:host ::ng-deep .content textarea:disabled {
|
|
background: var(--color-surface-muted);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
:host ::ng-deep .content select,
|
|
:host ::ng-deep .content select.ui-form-control {
|
|
appearance: auto;
|
|
background-image: none;
|
|
background-position: initial;
|
|
background-size: initial;
|
|
padding-right: var(--space-2);
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-form-caption,
|
|
:host ::ng-deep .content .form-field > span,
|
|
:host ::ng-deep .content .toolbar-field > span,
|
|
:host ::ng-deep .content .form-grid label > span,
|
|
:host ::ng-deep .content .status-editor label,
|
|
:host ::ng-deep .content .status-editor-field label {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
:host ::ng-deep .content button,
|
|
:host ::ng-deep .content .ui-button {
|
|
border: 0;
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-2) var(--space-4);
|
|
background: var(--color-brand);
|
|
color: var(--color-neutral-900);
|
|
font: inherit;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
border-color 0.2s ease,
|
|
color 0.2s ease,
|
|
opacity 0.2s ease;
|
|
}
|
|
|
|
:host ::ng-deep .content button:hover:not(:disabled),
|
|
:host ::ng-deep .content .ui-button:hover:not(:disabled) {
|
|
background: var(--color-brand-hover);
|
|
}
|
|
|
|
:host ::ng-deep .content button:disabled,
|
|
:host ::ng-deep .content .ui-button:disabled {
|
|
opacity: 0.65;
|
|
cursor: default;
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-button--ghost,
|
|
:host ::ng-deep .content .ghost,
|
|
:host ::ng-deep .content .btn-secondary,
|
|
:host ::ng-deep .content .panel-toggle {
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-button--ghost:hover:not(:disabled),
|
|
:host ::ng-deep .content .ghost:hover:not(:disabled),
|
|
:host ::ng-deep .content .btn-secondary:hover:not(:disabled),
|
|
:host ::ng-deep .content .panel-toggle:hover:not(:disabled) {
|
|
background: var(--color-surface-muted);
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-button--danger,
|
|
:host ::ng-deep .content .btn-delete {
|
|
background: var(--color-danger-500);
|
|
color: #ffffff;
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-button--danger:hover:not(:disabled),
|
|
:host ::ng-deep .content .btn-delete:hover:not(:disabled) {
|
|
background: #dc2626;
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-button--ghost-danger {
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-button--ghost-danger:hover:not(:disabled) {
|
|
background: #fff0f0;
|
|
border-color: #d9534f;
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-checkbox {
|
|
gap: 0.85rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-checkbox__mark {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-file-picker__button,
|
|
:host ::ng-deep .content .ui-file-picker__name {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-language-toolbar {
|
|
padding: var(--space-2);
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-language-toolbar__copy span,
|
|
:host ::ng-deep .content .ui-language-toolbar__copy p,
|
|
:host ::ng-deep .content .ui-language-toolbar__button {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
:host ::ng-deep .content .ui-language-toolbar__button {
|
|
min-width: 2.8rem;
|
|
padding: 0.4rem 0.6rem;
|
|
}
|
|
|
|
@media (max-width: 1240px) {
|
|
.admin-shell {
|
|
grid-template-columns: 220px minmax(0, 1fr);
|
|
}
|
|
|
|
.sidebar {
|
|
padding: var(--space-5);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1360px) {
|
|
.admin-container {
|
|
margin-top: var(--space-6);
|
|
padding: 0 var(--space-3);
|
|
}
|
|
|
|
.admin-shell {
|
|
grid-template-columns: 1fr;
|
|
min-height: unset;
|
|
}
|
|
|
|
.sidebar {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.menu-scroll {
|
|
overflow-x: auto;
|
|
padding-bottom: 2px;
|
|
margin: 0 calc(-1 * var(--space-1));
|
|
padding-inline: var(--space-1);
|
|
}
|
|
|
|
.menu {
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
min-width: max-content;
|
|
}
|
|
|
|
.logout {
|
|
margin-top: var(--space-1);
|
|
width: fit-content;
|
|
}
|
|
|
|
.content {
|
|
padding: var(--space-4);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.brand h1 {
|
|
font-size: 1.02rem;
|
|
}
|
|
|
|
.brand p {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.content {
|
|
padding: var(--space-3);
|
|
}
|
|
}
|