This commit is contained in:
tophf 2022-02-13 08:17:33 +03:00
parent 1372236cc1
commit 49ad53577e
3 changed files with 37 additions and 5 deletions

View File

@ -1,6 +1,7 @@
:root { :root {
--pad: 1rem; --pad: 1rem;
--pad05: calc(0.5 * var(--pad)); --pad05: calc(0.5 * var(--pad));
--popup-button-width: 16px;
} }
body { body {
@ -1031,22 +1032,27 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
#header:not(.sticky) { #header:not(.sticky) {
position: static; position: static;
} }
#header { #header:not(.sticky) {
display: block; display: block;
}
#header {
flex: 0 0 auto; flex: 0 0 auto;
height: unset; height: unset;
width: 100%; width: 100%;
overflow: visible;
background: #fff; background: #fff;
border-right: none; border-right: none;
border-bottom: 1px dashed #AAA; border-bottom: 1px dashed #AAA;
padding: var(--pad05) var(--pad05) 0; padding: var(--pad05) var(--pad05) 0;
} }
#header.sticky { #header.sticky {
flex-direction: row;
box-shadow: 0 0 3rem -.75rem black; box-shadow: 0 0 3rem -.75rem black;
} }
#header.sticky #basic-info, #header.sticky #basic-info,
#header.sticky #mozilla-format-buttons, #header.sticky #mozilla-format-buttons,
#header.sticky .buttons > button, #header.sticky .buttons > button,
#header.sticky .split-btn-pedal,
#heading, #heading,
#header-sticker { #header-sticker {
top: 0; top: 0;
@ -1054,11 +1060,14 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
} }
.popup-window #details-wrapper {
margin-right: var(--popup-button-width);
}
h2 { h2 {
display: none; display: none;
} }
#basic-info { #basic-info {
margin: 0 16px var(--pad05) 0; /* for popup icon in simple window */ margin: 0 var(--popup-button-width) var(--pad05) 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -1086,15 +1095,36 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
flex-direction: row; flex-direction: row;
margin: .25em 0 var(--pad05); margin: .25em 0 var(--pad05);
} }
#details-wrapper details[open] {
max-height: 10vh;
}
#details-wrapper[data-open^=".."] details { #details-wrapper[data-open^=".."] details {
max-width: 50%; max-width: 50%;
} }
#details-wrapper[data-open^="..."] { #details-wrapper[data-open^="..."] {
flex-wrap: wrap; flex-wrap: wrap;
} }
#details-wrapper details[open] {
margin-top: 0;
z-index: 1000;
}
#details-wrapper details[open]:focus-within {
z-index: 1001;
}
#details-wrapper details[open] > summary {
position: static;
margin-top: 0;
}
#details-wrapper details[open] > summary + * {
position: absolute;
overflow-y: auto;
max-height: 10vh;
background: #fff;
box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
padding: var(--pad);
}
#sections-list[open] > #toc,
#lint[open] > .lint-report-container {
max-width: 50vw;
right: 0;
}
#options[open], #options[open],
#publish[open], #publish[open],
#lint:not([open]) { #lint:not([open]) {

View File

@ -21,6 +21,7 @@
onclick: embedPopup, onclick: embedPopup,
}); });
$root.appendChild(btn); $root.appendChild(btn);
$root.classList.add('popup-window');
baseInit.domReady.then(() => { baseInit.domReady.then(() => {
document.body.appendChild(btn); document.body.appendChild(btn);
// Adding a dummy command to show in keymap help popup // Adding a dummy command to show in keymap help popup

View File

@ -320,6 +320,7 @@ body.resizing-v > * {
.split-btn { .split-btn {
position: relative; position: relative;
white-space: nowrap;
} }
.split-btn-pedal { .split-btn-pedal {
margin-left: -1px !important; margin-left: -1px !important;