393 lines
9.8 KiB
CSS
393 lines
9.8 KiB
CSS
/* luxtools plugin styles
|
||
* Keep this minimal and scoped to the plugin container.
|
||
*/
|
||
|
||
/* DokuWiki often highlights rows on hover. Avoid highlighting header rows. */
|
||
div.luxtools-plugin table thead tr:hover > * {
|
||
background-color: @ini_background_alt !important;
|
||
}
|
||
|
||
|
||
/* "Open Location" row above the header should be visually smaller. */
|
||
div.luxtools-plugin table thead tr.luxtools-openlocation-row td {
|
||
font-size: 80%;
|
||
padding-top: 0.2em;
|
||
padding-bottom: 0.2em;
|
||
}
|
||
div.luxtools-plugin table thead tr.luxtools-openlocation-row:hover td {
|
||
background-color: @ini_background !important;
|
||
}
|
||
|
||
/* Ensure directories use a dedicated folder icon.
|
||
* DokuWiki's icon CSS is generated primarily for file extensions; a custom
|
||
* mf_folder class may otherwise fall back to the generic file icon.
|
||
*/
|
||
div.luxtools-plugin a.media.mediafile.mf_folder,
|
||
div.luxtools-plugin a.mediafile.mf_folder {
|
||
background-image: url(images/folder.svg) !important;
|
||
}
|
||
|
||
/* DokuWiki templates often style .media links with higher specificity.
|
||
* Ensure our custom color always wins.
|
||
*/
|
||
div.luxtools-plugin a.luxtools-open,
|
||
div.luxtools-plugin a.luxtools-open:visited,
|
||
a.luxtools-open,
|
||
a.luxtools-open:visited {
|
||
color: #b57d35 !important;
|
||
}
|
||
|
||
/* Standalone {{open>...}} links are not wrapped in div.luxtools-plugin. */
|
||
a.luxtools-open.media.mediafile.mf_folder {
|
||
background-image: url(images/open-folder.svg) !important;
|
||
}
|
||
|
||
/* Muted empty-state message when a listing has no results. */
|
||
div.luxtools-plugin .luxtools-empty {
|
||
opacity: 0.65;
|
||
font-style: italic;
|
||
padding: 0.25em 0;
|
||
}
|
||
|
||
/* Image gallery spacing. */
|
||
div.luxtools-gallery {
|
||
padding-bottom: 0.5em;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.35em;
|
||
}
|
||
|
||
div.luxtools-gallery a.media.luxtools-gallery-item {
|
||
display: inline-block;
|
||
position: relative;
|
||
border: 1px solid @ini_border;
|
||
background-color: @ini_background_alt;
|
||
overflow: hidden;
|
||
line-height: 0;
|
||
text-decoration: none;
|
||
}
|
||
|
||
div.luxtools-gallery a.media.luxtools-gallery-item:hover,
|
||
div.luxtools-gallery a.media.luxtools-gallery-item:focus {
|
||
border-color: @ini_text;
|
||
}
|
||
|
||
div.luxtools-gallery img.luxtools-thumb {
|
||
display: block;
|
||
width: 150px;
|
||
height: 150px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* Filename overlay (single line, muted). */
|
||
div.luxtools-gallery .luxtools-gallery-caption {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
font-size: 0.75em;
|
||
line-height: 1.3;
|
||
padding: 0.25em 0.4em;
|
||
color: #fff;
|
||
background: rgba(0, 0, 0, 0.35);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Scratchpad */
|
||
div.luxtools-scratchpad {
|
||
position: relative;
|
||
}
|
||
|
||
/* Template hook: stable wrapper around scratchpad content + controls. */
|
||
div.luxtools-scratchpad .luxtools-scratchpad-frame {
|
||
position: relative;
|
||
}
|
||
|
||
div.luxtools-scratchpad .luxtools-scratchpad-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 0.4em;
|
||
margin-bottom: 0.2em;
|
||
}
|
||
|
||
div.luxtools-scratchpad .luxtools-scratchpad-name {
|
||
flex: 0 1 auto;
|
||
min-width: 0;
|
||
opacity: 0.65;
|
||
font-size: 90%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
div.luxtools-scratchpad a.luxtools-scratchpad-edit {
|
||
text-decoration: none;
|
||
opacity: 0.75;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 2em;
|
||
min-height: 2em;
|
||
line-height: 1;
|
||
font-style: italic;
|
||
color: inherit;
|
||
}
|
||
div.luxtools-scratchpad a.luxtools-scratchpad-edit:hover,
|
||
div.luxtools-scratchpad a.luxtools-scratchpad-edit:focus {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Edit mode: replace rendered view with editor. */
|
||
div.luxtools-scratchpad.is-editing .luxtools-scratchpad-view {
|
||
display: none;
|
||
}
|
||
|
||
div.luxtools-scratchpad.is-editing .luxtools-scratchpad-bar {
|
||
display: none;
|
||
}
|
||
|
||
div.luxtools-scratchpad .luxtools-scratchpad-editor {
|
||
margin-top: 0.4em;
|
||
}
|
||
|
||
div.luxtools-scratchpad textarea.luxtools-scratchpad-text {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
min-height: 8em;
|
||
}
|
||
|
||
div.luxtools-scratchpad .luxtools-scratchpad-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4em;
|
||
margin-top: 0.35em;
|
||
}
|
||
|
||
div.luxtools-scratchpad .luxtools-scratchpad-status {
|
||
opacity: 0.8;
|
||
font-size: 90%;
|
||
}
|
||
|
||
div.luxtools-scratchpad .luxtools-scratchpad-error {
|
||
opacity: 0.8;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* Admin: settings page form layout */
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.75em;
|
||
text-align: left;
|
||
}
|
||
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block > span {
|
||
flex: 0 0 35%;
|
||
text-align: left;
|
||
margin: 0;
|
||
padding-top: 0.2em;
|
||
}
|
||
|
||
/* The admin page markup uses <br/> to create a new line; in this layout we keep
|
||
* label + control in one row.
|
||
*/
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block > br {
|
||
display: none;
|
||
}
|
||
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form textarea.edit,
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="text"].edit,
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="number"].edit,
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
|
||
flex: 1 1 auto;
|
||
margin-left: auto;
|
||
width: auto;
|
||
max-width: 65%;
|
||
box-sizing: border-box;
|
||
text-align: left;
|
||
}
|
||
|
||
/* Dropdowns: don't stretch; size to content, but keep them on the right. */
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
|
||
flex: 0 0 auto;
|
||
margin-left: 0;
|
||
width: max-content;
|
||
max-width: 65%;
|
||
}
|
||
|
||
/* Checkbox controls: keep them in the control column, left-aligned. */
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block input[type="checkbox"] {
|
||
margin-left: 0;
|
||
align-self: center;
|
||
}
|
||
|
||
/* On narrow screens, stack label and control to keep things readable. */
|
||
@media (max-width: 600px) {
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block {
|
||
display: block;
|
||
}
|
||
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block > br {
|
||
display: block;
|
||
}
|
||
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form textarea.edit,
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="text"].edit,
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="number"].edit,
|
||
div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
/* Disable background scrolling while the lightbox is open. */
|
||
html.luxtools-noscroll,
|
||
html.luxtools-noscroll body {
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
/* Fullscreen lightbox viewer (client-side). */
|
||
.luxtools-lightbox {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 9999;
|
||
display: none;
|
||
}
|
||
|
||
.luxtools-lightbox.is-open {
|
||
display: block;
|
||
}
|
||
|
||
.luxtools-lightbox .luxtools-lightbox-backdrop {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.85);
|
||
}
|
||
|
||
.luxtools-lightbox .luxtools-lightbox-stage {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.8em;
|
||
}
|
||
|
||
.luxtools-lightbox .luxtools-lightbox-media {
|
||
position: relative;
|
||
display: inline-block;
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
}
|
||
|
||
.luxtools-lightbox img.luxtools-lightbox-img {
|
||
display: block;
|
||
/* Use viewport constraints so tall images always fit.
|
||
* Percent max-height is unreliable here because the wrapper doesn't have a fixed height.
|
||
*/
|
||
max-width: calc(100vw - 1.6em);
|
||
max-height: calc(100vh - 1.6em);
|
||
}
|
||
|
||
.luxtools-lightbox .luxtools-lightbox-caption {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 1.2em;
|
||
transform: translateX(-50%);
|
||
display: block;
|
||
max-width: 60rem;
|
||
padding: 0.4em 0.8em;
|
||
color: rgba(255, 255, 255, 0.95);
|
||
background: rgba(0, 0, 0, 0.45);
|
||
border-radius: 0.4em;
|
||
font-size: 0.9em;
|
||
line-height: 1.35;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Image-anchored prev/next zones.
|
||
* These are sized relative to the displayed image (not the viewport) and show
|
||
* a subtle indicator only on hover/focus.
|
||
*/
|
||
.luxtools-lightbox button.luxtools-lightbox-zone {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 25%;
|
||
background: transparent;
|
||
border: none;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.luxtools-lightbox button.luxtools-lightbox-zone-prev {
|
||
left: 0;
|
||
}
|
||
|
||
.luxtools-lightbox button.luxtools-lightbox-zone-next {
|
||
right: 0;
|
||
}
|
||
|
||
.luxtools-lightbox button.luxtools-lightbox-zone::after {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 3em;
|
||
line-height: 1;
|
||
color: rgba(255, 255, 255, 0.95);
|
||
text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9);
|
||
opacity: 0;
|
||
transition: opacity 120ms ease-in-out;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.luxtools-lightbox button.luxtools-lightbox-zone-prev::after {
|
||
content: '‹';
|
||
left: 0.35em;
|
||
}
|
||
|
||
.luxtools-lightbox button.luxtools-lightbox-zone-next::after {
|
||
content: '›';
|
||
right: 0.35em;
|
||
}
|
||
|
||
.luxtools-lightbox button.luxtools-lightbox-zone:hover::after,
|
||
.luxtools-lightbox button.luxtools-lightbox-zone:focus-visible::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Top-right close button. */
|
||
.luxtools-lightbox button.luxtools-lightbox-close {
|
||
position: absolute;
|
||
top: 0.8em;
|
||
right: 0.8em;
|
||
z-index: 3;
|
||
color: rgba(255, 255, 255, 0.95);
|
||
text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9);
|
||
background: transparent;
|
||
border: none;
|
||
font-size: 2.5em;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.luxtools-lightbox button.luxtools-lightbox-close:hover,
|
||
.luxtools-lightbox button.luxtools-lightbox-close:focus-visible {
|
||
background: rgba(0, 0, 0, 0.60);
|
||
border-radius: 999px;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.luxtools-lightbox button.luxtools-lightbox-zone::after {
|
||
font-size: 2.4em;
|
||
}
|
||
}
|