622 lines
16 KiB
CSS
622 lines
16 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: @ini_luxtools_locationlink !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;
|
||
}
|
||
|
||
/* Page link status (unlinked blobs alias) */
|
||
span.luxtools-pagelink-status {
|
||
display: inline-block;
|
||
font-size: 0.85em;
|
||
line-height: 1.3;
|
||
margin: 0.25em 0;
|
||
padding: 0.15em 0.4em;
|
||
border: 1px solid @ini_border;
|
||
border-radius: 0.2em;
|
||
background-color: @ini_background_alt;
|
||
color: inherit;
|
||
}
|
||
|
||
/* 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;
|
||
/* Placeholder while lazy-loaded image is pending.
|
||
* Uses custom property from inline style if thumb_placeholder is configured,
|
||
* otherwise falls back to built-in SVG icon. */
|
||
background-color: @ini_background;
|
||
background-image: var(--luxtools-placeholder, url(images/placeholder.svg));
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
/* contain works well for both: configured placeholder fills the area,
|
||
* built-in SVG icon stays small and centered */
|
||
background-size: contain;
|
||
}
|
||
|
||
/* 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;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
div.luxtools-scratchpad textarea.luxtools-scratchpad-text {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 100%;
|
||
display: block;
|
||
box-sizing: border-box;
|
||
min-height: 8em;
|
||
resize: vertical;
|
||
}
|
||
|
||
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);
|
||
transform-origin: center center;
|
||
transition: transform 0.1s ease-out;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
/* ========================================================================
|
||
* Grouping wrapper (compact image layout container)
|
||
* ======================================================================== */
|
||
|
||
.luxtools-grouping {
|
||
display: grid;
|
||
grid-template-columns: repeat(var(--luxtools-grouping-cols, 2), minmax(0, 1fr));
|
||
gap: var(--luxtools-grouping-gap, 0);
|
||
justify-content: var(--luxtools-grouping-justify, start);
|
||
align-items: var(--luxtools-grouping-align, start);
|
||
}
|
||
|
||
.luxtools-grouping.luxtools-grouping--flex {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--luxtools-grouping-gap, 0);
|
||
}
|
||
|
||
/* Let the grouping layout fully control item placement. */
|
||
.luxtools-grouping .luxtools-imagebox {
|
||
float: none;
|
||
clear: none;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ========================================================================
|
||
* Imagebox (Wikipedia-style image with caption)
|
||
* ======================================================================== */
|
||
|
||
.luxtools-imagebox {
|
||
margin-bottom: 0.5em;
|
||
display: block;
|
||
}
|
||
|
||
.luxtools-imagebox.tleft {
|
||
clear: left;
|
||
float: left;
|
||
margin-right: 1.4em;
|
||
}
|
||
|
||
.luxtools-imagebox.tright {
|
||
clear: right;
|
||
float: right;
|
||
margin-left: 1.4em;
|
||
}
|
||
|
||
.luxtools-imagebox.tcenter {
|
||
clear: both;
|
||
text-align: center;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.luxtools-imagebox.tcenter .luxtools-imagebox-inner {
|
||
display: inline-block;
|
||
text-align: left;
|
||
}
|
||
|
||
.luxtools-imagebox .luxtools-imagebox-inner {
|
||
display: inline-block;
|
||
background-color: @ini_background_alt;
|
||
border: 1px solid @ini_border;
|
||
padding: 3px;
|
||
font-size: 94%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.luxtools-imagebox .luxtools-imagebox-inner > a {
|
||
display: block;
|
||
line-height: 0;
|
||
background-color: @ini_background;
|
||
}
|
||
|
||
.luxtools-imagebox .luxtools-imagebox-inner img {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.luxtools-imagebox .luxtools-imagebox-caption {
|
||
border: none;
|
||
font-size: 94%;
|
||
line-height: 1.4em;
|
||
padding: 3px;
|
||
text-align: left;
|
||
}
|
||
|
||
/* ========================================================================
|
||
* Calendar widget
|
||
* ======================================================================== */
|
||
|
||
div.luxtools-calendar {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
font-size: 88%;
|
||
}
|
||
|
||
div.luxtools-calendar .luxtools-calendar-title {
|
||
font-weight: bold;
|
||
margin-bottom: 0.25em;
|
||
font-size: 95%;
|
||
text-align: center;
|
||
}
|
||
|
||
div.luxtools-calendar .luxtools-calendar-nav {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr;
|
||
align-items: center;
|
||
margin-bottom: 0.25em;
|
||
}
|
||
|
||
div.luxtools-calendar .luxtools-calendar-nav-prev {
|
||
text-align: left;
|
||
}
|
||
|
||
div.luxtools-calendar .luxtools-calendar-nav-next {
|
||
text-align: right;
|
||
}
|
||
|
||
div.luxtools-calendar .luxtools-calendar-nav-prev a,
|
||
div.luxtools-calendar .luxtools-calendar-nav-next a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
div.luxtools-calendar .luxtools-calendar-nav-button {
|
||
border: 1px solid @ini_border;
|
||
background-color: @ini_background_alt;
|
||
color: @ini_text;
|
||
font: inherit;
|
||
line-height: 1;
|
||
padding: 0.2em 0.45em;
|
||
cursor: pointer;
|
||
}
|
||
|
||
div.luxtools-calendar .luxtools-calendar-nav-button:hover,
|
||
div.luxtools-calendar .luxtools-calendar-nav-button:focus {
|
||
background-color: @ini_highlight;
|
||
outline: none;
|
||
}
|
||
|
||
div.luxtools-calendar table.luxtools-calendar-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
div.luxtools-calendar table.luxtools-calendar-table th,
|
||
div.luxtools-calendar table.luxtools-calendar-table td {
|
||
border: 1px solid @ini_border;
|
||
padding: 0;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
div.luxtools-calendar table.luxtools-calendar-table th {
|
||
background-color: @ini_background_alt;
|
||
font-size: 85%;
|
||
font-weight: normal;
|
||
}
|
||
|
||
div.luxtools-calendar td.luxtools-calendar-day-empty {
|
||
background-color: @ini_background_alt;
|
||
}
|
||
|
||
div.luxtools-calendar td.luxtools-calendar-day-today {
|
||
background-color: @ini_highlight;
|
||
}
|
||
|
||
div.luxtools-calendar td.luxtools-calendar-day a {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
min-height: 1.9em;
|
||
background: transparent;
|
||
text-decoration: none;
|
||
border-bottom: 0;
|
||
box-shadow: none;
|
||
padding: 0.1em 0;
|
||
}
|
||
|
||
div.luxtools-calendar td.luxtools-calendar-day a:hover,
|
||
div.luxtools-calendar td.luxtools-calendar-day a:focus,
|
||
div.luxtools-calendar td.luxtools-calendar-day a:active,
|
||
div.luxtools-calendar td.luxtools-calendar-day a:visited {
|
||
text-decoration: none;
|
||
border-bottom: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
div.luxtools-calendar td.luxtools-calendar-day:hover {
|
||
background-color: @ini_background_alt;
|
||
}
|
||
|
||
div.luxtools-calendar td.luxtools-calendar-day.luxtools-calendar-day-today:hover {
|
||
background-color: @ini_highlight;
|
||
}
|