luxtools-plugin/style.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;
}

div.luxtools-scratchpad .luxtools-scratchpad-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.2em;
}

div.luxtools-scratchpad a.luxtools-scratchpad-edit {
    text-decoration: none;
    opacity: 0.7;
    padding: 0 0.2em;
}
div.luxtools-scratchpad a.luxtools-scratchpad-edit:hover,
div.luxtools-scratchpad a.luxtools-scratchpad-edit:focus {
    opacity: 1;
}

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;
}

/* 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 img.luxtools-lightbox-img {
    max-width: 100%;
    max-height: 100%;
}

.luxtools-lightbox .luxtools-lightbox-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6em 1em;
    color: #fff;
    opacity: 0.9;
    background: rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Top-left "open in new tab" button. */
.luxtools-lightbox button.luxtools-lightbox-opennew {
    left: 0.6em;
    top: 0.6em;
    bottom: auto;
    width: 2.4em;
    height: 2.4em;
    background: transparent;
    border: none;
    border-radius: 0.2em;
    z-index: 2;
}


.luxtools-lightbox button.luxtools-lightbox-btn {
    position: absolute;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Navigation: transparent left/right tap zones (default everywhere). */
.luxtools-lightbox button.luxtools-lightbox-prev,
.luxtools-lightbox button.luxtools-lightbox-next {
    top: 0;
    bottom: 0;
    width: 30%;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 2em;
    color: rgba(255, 255, 255, 0.7);
}

.luxtools-lightbox button.luxtools-lightbox-prev {
    left: 0;
}

.luxtools-lightbox button.luxtools-lightbox-next {
    right: 0;
}

/* Close button overlays content. */
.luxtools-lightbox button.luxtools-lightbox-close {
    top: 0.6em;
    right: 0.6em;
    width: 2.2em;
    height: 2.2em;
    background: transparent;
    border: none;
    z-index: 2;
}

@media (max-width: 600px) {
    .luxtools-lightbox button.luxtools-lightbox-prev,
    .luxtools-lightbox button.luxtools-lightbox-next {
        font-size: 1.6em;
    }
}