fixes
This commit is contained in:
Mateusz Gruszczyński
+146
-2
@@ -449,11 +449,18 @@ textarea:focus {
|
||||
.editor-column,
|
||||
.preview-column {
|
||||
display: grid;
|
||||
grid-template-rows: 30px minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.editor-column {
|
||||
grid-template-rows: 30px auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.preview-column {
|
||||
grid-template-rows: 30px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.preview-column {
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
@@ -3993,7 +4000,6 @@ dialog::backdrop {
|
||||
.authorship-fragment {
|
||||
border-radius: 2px;
|
||||
background: color-mix(in srgb, var(--owner) 18%, transparent);
|
||||
box-shadow: inset 0 -2px color-mix(in srgb, var(--owner) 72%, transparent);
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
@@ -4554,3 +4560,141 @@ dialog::backdrop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Authorship display modes */
|
||||
.editor-column-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
||||
.authorship-mode-control { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--panel) 88%, transparent); }
|
||||
.authorship-mode-control button { min-height: 26px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11px; }
|
||||
.authorship-mode-control button.active { background: var(--surface-strong, #262b35); color: var(--text); }
|
||||
.participant-badges { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 6px; min-width: 0; min-height: 0; padding: 7px 12px; border-bottom: 1px solid var(--border); }
|
||||
.participant-badges[hidden] { display: none; }
|
||||
.participant-badge { display: inline-flex; flex: 0 0 auto; align-items: center; width: auto; max-width: 100%; min-height: 0; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--owner) 65%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--owner) 18%, transparent); font: 600 11px/1.3 system-ui, sans-serif; }
|
||||
@media (max-width: 720px) {
|
||||
.editor-column-label { align-items: flex-start; }
|
||||
.authorship-mode-control button { padding-inline: 7px; }
|
||||
.participant-badges { padding: 6px 8px; }
|
||||
.public-task-toggle { width: 100%; }
|
||||
}
|
||||
|
||||
.public-page-options { display: grid; gap: 4px; align-content: center; }
|
||||
.public-page-options .public-task-toggle { min-height: 24px; }
|
||||
@media (max-width: 720px) { .public-page-options { width: 100%; } }
|
||||
|
||||
/* Keep the whole editor surface consistent in Simple and Full modes. */
|
||||
.editor-shell {
|
||||
background: #0d1015;
|
||||
}
|
||||
.editor-shell textarea {
|
||||
z-index: 3;
|
||||
background: transparent;
|
||||
}
|
||||
.authorship-layer {
|
||||
z-index: 2;
|
||||
background: transparent;
|
||||
}
|
||||
.owner-labels {
|
||||
z-index: 4;
|
||||
}
|
||||
.line-gutter {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
|
||||
/* Stable editor canvas in both authorship modes. */
|
||||
.pad-page .editor-column,
|
||||
.pad-page .editor-shell {
|
||||
background: #0d1015;
|
||||
}
|
||||
|
||||
.pad-page .editor-shell {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.pad-page .editor-shell::before {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
inset: 0;
|
||||
background: #0d1015;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pad-page .editor-shell textarea,
|
||||
.pad-page .owner-labels {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* The authorship canvas must paint the whole editable area, not only text rows. */
|
||||
.pad-page .authorship-layer {
|
||||
width: auto;
|
||||
height: auto;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
background: #0d1015 !important;
|
||||
}
|
||||
|
||||
.pad-page .line-gutter {
|
||||
background: #0d1015;
|
||||
}
|
||||
|
||||
.resources-access-rules {
|
||||
margin: 10px 0 0;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, .02);
|
||||
color: var(--muted);
|
||||
font-size: .78rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* Full-height editor/gutter separator, independent of the number of text lines. */
|
||||
.pad-page .editor-shell::after {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 48px;
|
||||
width: 1px;
|
||||
background: var(--border);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pad-page .line-gutter {
|
||||
align-self: stretch;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.pad-page.hide-editor-line-numbers .editor-shell::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.pad-page .editor-shell::after {
|
||||
left: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fill the editor column with the actual editor shell.
|
||||
The grid version could size the shell to its content in Full authorship mode,
|
||||
so the gutter separator stopped after the last rendered line. */
|
||||
.pad-page .editor-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.pad-page .editor-column > .column-label,
|
||||
.pad-page .editor-column > .participant-badges {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.pad-page .editor-column > .editor-shell {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user