/* * FabLab Machine Status board styling. * * Note on .fau-fablab-maschinenstatus-plugin-modal: a is hidden by the browser's default * stylesheet until it has an `open` attribute. We deliberately override * that here so the form is visible as a normal inline block when * JavaScript is unavailable. fau-fablab-maschinenstatus-plugin.js adds the `fau-fablab-maschinenstatus-plugin-modal--js` class * at runtime, which re-hides it and lets dialog.showModal()/close() * (and the `open` attribute they toggle) control visibility instead. */ .fau-fablab-maschinenstatus-plugin { margin: 1.5em 0; } .fau-fablab-maschinenstatus-plugin-notice { padding: 0.75em 1em; margin-bottom: 1em; border-radius: 4px; font-weight: 600; } .fau-fablab-maschinenstatus-plugin-notice--success { background: #e6f4ea; color: #1e4620; border: 1px solid #2e8540; } .fau-fablab-maschinenstatus-plugin-notice--error { background: #fdecea; color: #611a15; border: 1px solid #c0392b; } .fau-fablab-maschinenstatus-plugin-board { width: 100%; border-collapse: collapse; } .fau-fablab-maschinenstatus-plugin-board th, .fau-fablab-maschinenstatus-plugin-board td { text-align: left; padding: 0.6em 0.8em; border-bottom: 1px solid #ddd; } .fau-fablab-maschinenstatus-plugin-board__machine { font-weight: 600; } .fau-fablab-maschinenstatus-plugin-board__row:hover { background: #f7f9fb; } /* * Tooltip showing a machine's previous log entries, revealed by * fau-fablab-maschinenstatus-plugin.js after the visitor hovers a board * row for a couple of seconds. The * template it's built from (see board.php) is inert and invisible on its * own; this box is appended once to and repositioned per row. */ .fau-fablab-maschinenstatus-plugin-tooltip { position: absolute; z-index: 10000; max-width: 320px; padding: 0.7em 0.9em; background: #1f2937; color: #fff; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); font-size: 0.85em; line-height: 1.4; } .fau-fablab-maschinenstatus-plugin-tooltip[hidden] { display: none; } .fau-fablab-maschinenstatus-plugin-history-title { margin: 0 0 0.5em; font-weight: 600; } .fau-fablab-maschinenstatus-plugin-history-list { margin: 0; padding-left: 1.1em; } .fau-fablab-maschinenstatus-plugin-history-list li { margin-bottom: 0.5em; } .fau-fablab-maschinenstatus-plugin-history-list li:last-child { margin-bottom: 0; } .fau-fablab-maschinenstatus-plugin-history-date { display: block; opacity: 0.8; } .fau-fablab-maschinenstatus-plugin-history-desc { display: block; } .fau-fablab-maschinenstatus-plugin-badge { display: inline-block; padding: 0.25em 0.75em; border-radius: 999px; color: #fff; font-size: 0.85em; font-weight: 600; white-space: nowrap; } .fau-fablab-maschinenstatus-plugin-button { display: inline-block; margin-top: 1em; padding: 0.6em 1.2em; border: none; border-radius: 4px; background: #2f6fbb; color: #fff; font-weight: 600; cursor: pointer; } .fau-fablab-maschinenstatus-plugin-button--secondary { background: #888; } .fau-fablab-maschinenstatus-plugin-modal { display: block; position: static; max-width: 480px; margin-top: 1em; padding: 1.25em; border: 1px solid #ccc; border-radius: 6px; background: #fff; } .fau-fablab-maschinenstatus-plugin-modal.fau-fablab-maschinenstatus-plugin-modal--js { display: none; position: fixed; inset: 0; margin: auto; padding: 1.5em; border: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } .fau-fablab-maschinenstatus-plugin-modal.fau-fablab-maschinenstatus-plugin-modal--js[open] { display: block; } .fau-fablab-maschinenstatus-plugin-modal.fau-fablab-maschinenstatus-plugin-modal--js::backdrop { background: rgba(0, 0, 0, 0.5); } .fau-fablab-maschinenstatus-plugin-form p { margin: 0 0 0.9em; } .fau-fablab-maschinenstatus-plugin-form label { display: block; margin-bottom: 0.3em; font-weight: 600; } .fau-fablab-maschinenstatus-plugin-form select, .fau-fablab-maschinenstatus-plugin-form input[type="text"], .fau-fablab-maschinenstatus-plugin-form input[type="email"], .fau-fablab-maschinenstatus-plugin-form textarea { width: 100%; padding: 0.5em; box-sizing: border-box; border: 1px solid #bbb; border-radius: 4px; } .fau-fablab-maschinenstatus-plugin-form__actions { display: flex; gap: 0.6em; }