mediawiki-extensions-WikiEd.../modules/realtimepreview/RealtimePreview.less
Sam Wilson 94d4912103 Realtime Preview: add hover button for reloading
Add a 'reload' button to the right-side preview pane (that shows
on hover, and stays in the same place when the preview is
scrolled), and also an accesskey to trigger the preview. If the
preview is not open when the accesskey is pressed, it'll be
opened.

Bug: T303532
Change-Id: Ifa77ad7cf6d2ed6a8b955f9a324986d1c6f9a993
2022-04-14 08:08:58 +08:00

64 lines
1.3 KiB
Plaintext

@import 'mediawiki.ui/variables.less';
/* stylelint-disable selector-max-id */
#wpTextbox1,
.mw-editform #wpTextbox1 {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
resize: none;
height: 100%;
min-height: auto;
max-height: none;
}
.ext-WikiEditor-realtimepreview-preview {
padding: 0 6px;
}
.wikiEditor-ui .wikiEditor-ui-view {
border-bottom: 0;
}
.ext-WikiEditor-ResizingDragBar-ns {
border-top: 1px solid @colorGray12;
}
@loadingbar-width: 20%;
.ext-WikiEditor-realtimepreview-loadingbar {
position: absolute;
z-index: 5;
display: block;
opacity: 1;
content: ' ';
background-color: @color-primary;
width: @loadingbar-width;
height: 4px;
// Hide the loading bar to start with; it'll be shown if the loading state persists for more than 1s.
visibility: hidden;
animation: loadingbar 1.5s 1s infinite linear alternate;
}
@keyframes loadingbar {
0% {
visibility: visible;
left: 0;
}
100% {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
left: calc( 100% - @loadingbar-width );
}
}
.ext-WikiEditor-twopanes-pane2 .ext-WikiEditor-reloadButton {
display: none;
position: absolute;
top: 12px;
right: 12px;
z-index: 5;
}
.ext-WikiEditor-twopanes-pane2:hover .ext-WikiEditor-reloadButton {
display: block;
}