OpenNIT
Quelltext des aktuellen Standes
Fassung 1.1.1
page-editor.css
18 KB/*
* Seiten-Editor der Dokumentation.
*
* Wird nur auf den Editor-Seiten geladen (extra_css im Layout-Aufruf). Alle
* Klassen tragen den Editor-Kontext im Namen und bauen auf den zentralen
* Komponenten aus app.css auf; Farben kommen ausschliesslich aus den
* Design-Tokens.
*/
/* Editor Container */
.page-editor {
background: var(--slate-50);
min-height: calc(100vh - 120px);
}
/* Breadcrumb */
.editor-breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--color-bg);
border-bottom: 1px solid var(--gray-200);
font-size: 0.85rem;
}
.editor-breadcrumb a {
color: var(--gray-500);
text-decoration: none;
}
.editor-breadcrumb a:hover {
color: var(--blue-600);
text-decoration: none;
}
.editor-breadcrumb .sep {
color: var(--gray-300);
}
.editor-breadcrumb .current {
color: var(--gray-900);
font-weight: 500;
}
/* Top Bar */
.editor-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.5rem;
background: var(--color-bg);
border-bottom: 1px solid var(--gray-200);
gap: 1rem;
position: sticky;
top: 60px;
z-index: 100;
}
.topbar-left {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
}
.btn-back {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 0.5rem;
background: var(--gray-100);
color: var(--gray-700);
text-decoration: none;
font-size: 1.25rem;
transition: all 0.15s;
}
.btn-back:hover {
background: var(--gray-200);
text-decoration: none;
}
.page-title-wrapper {
flex: 1;
}
.page-title-input {
width: 100%;
font-size: 1.25rem;
font-weight: 600;
padding: 0.5rem 0;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--gray-900);
}
.page-title-input:focus {
outline: none;
border-bottom-color: var(--blue-600);
}
.topbar-right {
display: flex;
align-items: center;
gap: 1rem;
}
.version-indicator {
padding: 0.25rem 0.75rem;
background: var(--indigo-100);
color: var(--indigo-800);
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 600;
}
/* Buttons */
/* Schaltflächen kommen aus der zentralen Komponentenbibliothek (app.css).
Hier stehen nur noch die Ergänzungen, die es dort nicht gibt. */
.btn-save.has-changes {
background: var(--emerald-600);
border-color: var(--emerald-600);
color: var(--color-on-accent);
}
.btn-block {
width: 100%;
}
.sidebar-section-danger {
border-bottom: none;
}
.section-header-danger {
background: var(--red-50);
color: var(--red-800);
}
/* Editor Layout */
.editor-layout {
display: flex;
gap: 0;
}
.editor-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.editor-wrapper {
padding: 1.5rem;
background: var(--color-bg);
}
/* Change Reason Bar */
.change-reason-bar {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
background: var(--amber-100);
border-top: 2px solid var(--amber-400);
}
.change-reason-bar label {
font-weight: 600;
color: var(--amber-800);
white-space: nowrap;
font-size: 0.9rem;
}
.change-reason-bar input {
flex: 1;
padding: 0.625rem 1rem;
border: 2px solid var(--amber-400);
border-radius: 0.5rem;
font-size: 0.95rem;
background: var(--color-bg);
}
.change-reason-bar input:focus {
outline: none;
border-color: var(--amber-500);
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}
/* Sidebar */
.editor-sidebar {
width: 300px;
background: var(--color-bg);
border-left: 1px solid var(--gray-200);
flex-shrink: 0;
transition: width 0.25s ease;
overflow-x: hidden;
}
/* Sidebar Toggle */
.sidebar-toggle {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0.375rem;
border-bottom: 1px solid var(--gray-200);
background: var(--gray-50);
}
.sidebar-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: 0.375rem;
cursor: pointer;
color: var(--gray-500);
font-size: 1.1rem;
transition: all 0.15s;
}
.sidebar-toggle-btn:hover {
background: var(--gray-200);
color: var(--gray-700);
}
.toggle-icon {
transition: transform 0.25s ease;
display: inline-block;
}
/* Collapsed Sidebar */
.editor-layout.sidebar-collapsed .editor-sidebar {
width: 48px;
}
.editor-layout.sidebar-collapsed .sidebar-toggle {
justify-content: center;
}
.editor-layout.sidebar-collapsed .toggle-icon {
transform: rotate(180deg);
}
.editor-layout.sidebar-collapsed .section-header {
font-size: 0;
padding: 0.75rem;
justify-content: center;
cursor: pointer;
transition: background 0.15s;
}
.editor-layout.sidebar-collapsed .section-header:hover {
background: var(--color-primary-pale);
}
.editor-layout.sidebar-collapsed .section-header .section-icon {
font-size: 1.15rem;
}
.editor-layout.sidebar-collapsed .section-header .file-counter,
.editor-layout.sidebar-collapsed .section-header .links-count {
display: none;
}
.editor-layout.sidebar-collapsed .section-content {
display: none;
}
.sidebar-section {
border-bottom: 1px solid var(--gray-200);
}
.section-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.25rem;
font-weight: 600;
font-size: 0.85rem;
color: var(--gray-700);
background: var(--gray-50);
text-transform: uppercase;
letter-spacing: 0.025em;
}
.section-icon {
font-size: 1rem;
}
.section-content {
padding: 1rem 1.25rem;
}
.topic-badge {
display: inline-block;
padding: 0.5rem 0.75rem;
background: var(--blue-50);
color: var(--blue-800);
border-radius: 0.375rem;
font-weight: 500;
font-size: 0.9rem;
}
.form-select {
width: 100%;
padding: 0.625rem 0.875rem;
border: 1px solid var(--gray-300);
border-radius: 0.5rem;
font-size: 0.9rem;
background: var(--color-bg);
cursor: pointer;
}
.form-select:focus {
outline: none;
border-color: var(--blue-600);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
/* File List */
.file-list {
list-style: none;
padding: 0;
margin: 0 0 1rem 0;
}
.file-list:empty {
display: none;
}
.file-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: var(--gray-50);
border-radius: 0.375rem;
margin-bottom: 0.5rem;
font-size: 0.8rem;
transition: background 0.3s ease;
}
.file-item-highlight {
background: var(--blue-100);
animation: file-flash 0.6s ease;
}
@keyframes file-flash {
0% { background: var(--blue-200); }
50% { background: var(--blue-300); }
100% { background: var(--blue-100); }
}
.file-icon {
flex-shrink: 0;
}
.file-name {
flex: 1;
min-width: 0;
overflow: hidden;
color: var(--blue-600);
text-decoration: none;
/* Zeigt Ende des Dateinamens (mit Endung) statt Anfang */
direction: rtl;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
}
.file-name::before {
content: '\200E'; /* Left-to-right mark um Text korrekt darzustellen */
}
.file-name:hover {
text-decoration: underline;
}
.file-size {
color: var(--gray-500);
font-size: 0.75rem;
flex-shrink: 0;
}
.file-delete {
background: none;
border: none;
color: var(--gray-400);
cursor: pointer;
font-size: 1.1rem;
padding: 0 0.25rem;
line-height: 1;
transition: color 0.15s;
}
.file-delete:hover {
color: var(--red-500);
}
.upload-hint {
font-size: 0.8rem;
color: var(--gray-500);
font-style: italic;
margin: 0;
}
/* Upload Progress */
.upload-progress {
padding: 0.75rem;
background: var(--blue-50);
border-radius: 0.5rem;
border: 1px solid var(--blue-200);
}
.progress-bar {
height: 6px;
background: var(--gray-200);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-fill {
height: 100%;
background: var(--blue-600);
width: 0%;
transition: width 0.2s;
}
.progress-text {
font-size: 0.75rem;
color: var(--blue-800);
}
/* Dropzone */
.file-dropzone {
position: relative;
}
.file-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.dropzone-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.5rem;
border: 2px dashed var(--gray-300);
border-radius: 0.5rem;
text-align: center;
cursor: pointer;
transition: all 0.15s;
font-size: 0.85rem;
color: var(--gray-500);
}
.dropzone-label:hover,
.file-dropzone.dragover .dropzone-label {
border-color: var(--blue-600);
background: var(--blue-50);
color: var(--blue-600);
}
.dropzone-icon {
font-size: 1.5rem;
}
.file-dropzone.dragover .dropzone-label {
border-style: solid;
}
/* TinyMCE Overrides */
.tox-tinymce {
border: 1px solid var(--gray-200) !important;
border-radius: 0.5rem !important;
}
.tox .tox-toolbar__primary {
background: var(--gray-50) !important;
}
/* Responsive */
@media (max-width: 900px) {
.editor-layout {
flex-direction: column;
}
.editor-sidebar {
width: 100% !important;
border-left: none;
border-top: 1px solid var(--gray-200);
}
.sidebar-toggle {
display: none;
}
.editor-layout.sidebar-collapsed .section-header {
font-size: 0.85rem;
padding: 1rem 1.25rem;
justify-content: flex-start;
cursor: default;
}
.editor-layout.sidebar-collapsed .section-content {
display: block;
}
.editor-layout.sidebar-collapsed .section-header .file-counter,
.editor-layout.sidebar-collapsed .section-header .links-count {
display: inline;
}
}
@media (max-width: 640px) {
.editor-topbar {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.topbar-left {
width: 100%;
}
.topbar-right {
justify-content: flex-end;
}
.change-reason-bar {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
}
/* Ansprechpartner Auswahl */
.ap-search-input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--gray-300);
border-radius: 0.375rem;
font-size: 0.85rem;
box-sizing: border-box;
}
.ap-search-input:focus {
border-color: var(--blue-300);
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
outline: none;
}
#ap-search-wrapper {
position: relative;
}
.ap-search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg);
border: 1px solid var(--gray-200);
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
max-height: 250px;
overflow-y: auto;
z-index: 50;
margin-top: 0.25rem;
}
.ap-result-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
cursor: pointer;
font-size: 0.85rem;
border-bottom: 1px solid var(--gray-100);
}
.ap-result-item:last-child {
border-bottom: none;
}
.ap-result-item:hover {
background: var(--blue-50);
}
.ap-result-img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.ap-result-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--indigo-100);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.ap-result-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.ap-result-name {
font-weight: 500;
color: var(--gray-900);
}
.ap-result-sub {
font-size: 0.75rem;
color: var(--gray-500);
}
.ap-result-type {
font-size: 0.7rem;
color: var(--gray-400);
background: var(--gray-100);
padding: 0.125rem 0.5rem;
border-radius: 9999px;
flex-shrink: 0;
}
.ap-result-empty {
padding: 0.75rem;
text-align: center;
color: var(--gray-400);
font-size: 0.85rem;
}
.ap-selected {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.75rem;
background: var(--blue-50);
border: 1px solid var(--blue-200);
border-radius: 0.375rem;
font-size: 0.85rem;
}
.ap-selected-name {
font-weight: 500;
color: var(--blue-800);
}
.ap-selected-name small {
font-weight: 400;
color: var(--gray-500);
}
.ap-remove-btn {
background: none;
border: none;
color: var(--gray-400);
cursor: pointer;
font-size: 1.2rem;
padding: 0 0.25rem;
line-height: 1;
}
.ap-remove-btn:hover {
color: var(--red-500);
}
/* Tags */
.tag-select-wrapper {
position: relative;
}
.tag-selected-list {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-bottom: 0.5rem;
}
.tag-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.5rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 500;
}
.tag-chip-remove {
background: none;
border: none;
cursor: pointer;
font-size: 0.85rem;
line-height: 1;
opacity: 0.6;
padding: 0;
color: inherit;
}
.tag-chip-remove:hover {
opacity: 1;
}
.tag-search-input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--gray-300);
border-radius: 0.375rem;
font-size: 0.85rem;
box-sizing: border-box;
}
.tag-search-input:focus {
border-color: var(--blue-300);
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
outline: none;
}
.tag-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg);
border: 1px solid var(--gray-200);
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
max-height: 250px;
overflow-y: auto;
z-index: 50;
margin-top: 0.25rem;
}
.tag-dropdown-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
cursor: pointer;
font-size: 0.85rem;
border-bottom: 1px solid var(--gray-100);
transition: background 0.1s;
}
.tag-dropdown-item:last-child {
border-bottom: none;
}
.tag-dropdown-item:hover {
background: var(--blue-50);
}
.tag-dropdown-item.selected {
background: var(--blue-50);
font-weight: 600;
}
.tag-dropdown-color {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.tag-dropdown-count {
margin-left: auto;
font-size: 0.7rem;
color: var(--gray-400);
background: var(--gray-100);
padding: 0.125rem 0.5rem;
border-radius: 9999px;
}
.tag-dropdown-create {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
cursor: pointer;
font-size: 0.85rem;
color: var(--blue-600);
font-weight: 500;
border-top: 1px solid var(--gray-200);
}
.tag-dropdown-create:hover {
background: var(--blue-50);
}
/* ---- Autosave-Status ---- */
.autosave-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
padding: 0.2rem 0.55rem;
border-radius: 0.375rem;
white-space: nowrap;
}
.autosave-status-saving {
color: var(--alert-warning-text);
background: var(--alert-warning-bg);
border: 1px solid var(--bs-warning);
}
.autosave-status-saved {
color: var(--alert-success-text);
background: var(--alert-success-bg);
border: 1px solid var(--bs-success);
}
.autosave-status-error {
color: var(--alert-danger-text);
background: var(--alert-danger-bg);
border: 1px solid var(--bs-danger);
}
/* ---- Änderungsgrund-Hint neben Save-Button ---- */
.change-reason-hint {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--alert-warning-text);
background: var(--alert-warning-bg);
border: 1px solid var(--bs-warning);
border-radius: 0.375rem;
padding: 0.25rem 0.6rem;
animation: hint-pulse 2s ease infinite;
}
@keyframes hint-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* ---- Änderungsgrund-/Entwurf-Modal: Basis kommt aus app.css ---- */
.cr-modal { z-index: 9999; }
.cr-modal .modal-card { max-width: 500px; }
.cr-modal-desc {
margin: 0 0 0.875rem;
color: var(--gray-500);
font-size: 0.9rem;
}
.cr-modal-error {
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
color: var(--color-danger-dark);
font-size: 0.85rem;
}
/* Editor-Wrapper ohne feste Höhe – TinyMCE bestimmt die Höhe */
.editor-wrapper {
padding: 0 !important;
background: var(--color-bg);
flex: 1;
}
.tox-tinymce {
border: none !important;
border-radius: 0 !important;
}
.editor-main {
min-height: 0;
overflow: hidden;
}
/* ---- Bearbeitungs-Lock-Banner ---- */
.lock-banner {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9999;
background: var(--blue-800);
color: var(--color-on-accent);
font-size: .87rem;
font-weight: 500;
padding: .55rem 1.25rem;
display: flex;
align-items: center;
gap: .6rem;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.lock-banner svg { flex-shrink: 0; }
/* ---- KI-Assistent Modal ---- */
/* KI-Modal: Basis kommt aus app.css (.modal-overlay/.modal-card) */
.ai-modal { z-index: 10000; }
.ai-modal .modal-card { max-width: 520px; }
/* Loading spinner */
.ai-spinner {
display: inline-block;
width: 0.875rem;
height: 0.875rem;
border: 2px solid rgba(255,255,255,0.4);
border-top-color: var(--color-on-accent);
border-radius: 50%;
animation: ai-spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 0.25rem;
}
@keyframes ai-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 600px) {
.ai-modal .modal-card { max-width: 100%; }
}