/** * Media Library modal theming for a Bootstrap Barrio subtheme. * * The media library opens as a jQuery UI dialog that is appended to , * so these rules are NOT scoped to a region — they target the dialog globally. * Load this file on the front end (e.g. add it to your theme's global CSS * library in THEME.libraries.yml, or to the library you already attach for * node forms). It will then apply to the AJAX-loaded media library too. * * Tweak the accent colours below to match your palette. */ :root { --ml-accent: #1f3c88; /* EODY navy */ --ml-accent-dark: #16285c; --ml-border: #d7dce5; --ml-bg: #ffffff; --ml-bg-muted: #f4f6fa; --ml-text: #1f2733; --ml-text-muted: #6b7585; --ml-radius: 10px; } /* ========================================================= 1. Dialog frame ========================================================= */ .ui-dialog.media-library-widget-modal { padding: 0; border: 0; border-radius: var(--ml-radius); box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28); overflow: hidden; background: var(--ml-bg); font-family: inherit; } /* Dim the page behind the modal (jQuery UI overlay) */ .ui-widget-overlay { background: rgba(15, 23, 42, 0.55); opacity: 1; } /* Title bar */ .media-library-widget-modal .ui-dialog-titlebar { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 1rem 1.25rem; border: 0; border-radius: 0; background: var(--ml-accent); color: #fff; } .media-library-widget-modal .ui-dialog-title { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; color: #fff; float: none; } /* Close button — the element is empty in the DOM, so draw an "×" */ .media-library-widget-modal .ui-dialog-titlebar-close { position: static; width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; transition: background 0.15s ease; } .media-library-widget-modal .ui-dialog-titlebar-close::before { content: '\00d7'; /* multiplication sign as a clean × */ display: block; font-size: 1.35rem; line-height: 2rem; text-align: center; } .media-library-widget-modal .ui-dialog-titlebar-close:hover { background: rgba(255, 255, 255, 0.28); } /* Hide the jQuery UI icon span if a theme injects one */ .media-library-widget-modal .ui-dialog-titlebar-close .ui-icon { display: none; } /* Content area */ .media-library-widget-modal .ui-dialog-content { padding: 1.5rem; color: var(--ml-text); } /* ========================================================= 2. Media-type menu -> horizontal tabs ========================================================= */ .js-media-library-menu { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1.25rem; padding: 0 0 0.5rem; list-style: none; /* kills the bullets */ border-bottom: 2px solid var(--ml-border); } .js-media-library-menu li { margin: 0; padding: 0; list-style: none; } .js-media-library-menu a { display: inline-block; padding: 0.5rem 0.9rem; border: 0; border-radius: var(--ml-radius) var(--ml-radius) 0 0; color: var(--ml-text-muted); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease; } .js-media-library-menu a:hover, .js-media-library-menu a:focus { color: var(--ml-accent); background: var(--ml-bg-muted); text-decoration: none; } /* Active type tab */ .js-media-library-menu a.active { position: relative; color: var(--ml-accent); background: transparent; font-weight: 600; } .js-media-library-menu a.active::after { content: ''; position: absolute; left: 0.25rem; right: 0.25rem; bottom: -0.5rem; height: 3px; border-radius: 3px; background: var(--ml-accent); } /* ========================================================= 3. Upload / "Add files" form ========================================================= */ #media-library-add-form-wrapper { margin-bottom: 1.5rem; padding: 1.25rem; border: 1px dashed var(--ml-border); border-radius: var(--ml-radius); background: var(--ml-bg-muted); } #media-library-add-form-wrapper label { display: block; margin-bottom: 0.4rem; font-weight: 600; color: var(--ml-text); } .media-library-widget-modal .form-file, .media-library-widget-modal input[type="file"] { display: block; width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--ml-border); border-radius: 8px; background: #fff; font-size: 0.95rem; } .media-library-widget-modal input[type="file"]::file-selector-button { margin-right: 0.75rem; padding: 0.4rem 0.9rem; border: 0; border-radius: 6px; background: var(--ml-accent); color: #fff; font-weight: 500; cursor: pointer; transition: background 0.15s ease; } .media-library-widget-modal input[type="file"]::file-selector-button:hover { background: var(--ml-accent-dark); } .media-library-widget-modal .description, .media-library-widget-modal small.text-muted { display: block; margin-top: 0.5rem; color: var(--ml-text-muted); font-size: 0.82rem; line-height: 1.4; } /* ========================================================= 4. View header — Grid / Table (Πλέγμα / Πίνακας) toggle ========================================================= */ .media-library-widget-modal .view-header { display: flex; gap: 0.4rem; margin-bottom: 1rem; } .views-display-link { padding: 0.35rem 0.85rem; border: 1px solid var(--ml-border); border-radius: 999px; color: var(--ml-text-muted); font-size: 0.88rem; text-decoration: none; transition: all 0.15s ease; } .views-display-link:hover { border-color: var(--ml-accent); color: var(--ml-accent); text-decoration: none; } .views-display-link.is-active { background: var(--ml-accent); border-color: var(--ml-accent); color: #fff; } /* ========================================================= 5. Exposed filters (Όνομα / Ταξινόμηση κατά / Apply) ========================================================= */ .media-library-widget-modal .views-exposed-form .d-flex { align-items: flex-end; gap: 0.75rem; } .media-library-widget-modal .views-exposed-form label { margin-bottom: 0.3rem; font-weight: 600; font-size: 0.85rem; color: var(--ml-text); } .media-library-widget-modal .views-exposed-form .form-control, .media-library-widget-modal .views-exposed-form .form-select { border: 1px solid var(--ml-border); border-radius: 8px; /* padding: 0.45rem 0.6rem; */ } .media-library-widget-modal .views-exposed-form .form-control:focus, .media-library-widget-modal .views-exposed-form .form-select:focus, .media-library-widget-modal input:focus, .media-library-widget-modal select:focus { outline: 0; border-color: var(--ml-accent); box-shadow: 0 0 0 3px rgba(31, 60, 136, 0.15); } /* ========================================================= 6. Buttons (generic, inside the dialog) ========================================================= */ .media-library-widget-modal .button, .media-library-widget-modal .btn, .media-library-widget-modal input[type="submit"] { border-radius: 8px; padding: 0.5rem 1.1rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .media-library-widget-modal .button--primary, .media-library-widget-modal .btn-primary, .media-library-widget-modal input[type="submit"].btn-primary { background: var(--ml-accent); border-color: var(--ml-accent); color: #fff; } .media-library-widget-modal .button--primary:hover, .media-library-widget-modal .btn-primary:hover { background: var(--ml-accent-dark); border-color: var(--ml-accent-dark); } /* Secondary / Apply filters style */ .media-library-widget-modal #edit-actions input[type="submit"]:not(.btn-primary) { background: #fff; border-color: var(--ml-border); color: var(--ml-text); } /* ========================================================= 7a. GRID view (Πλέγμα) The cards live directly inside the views form, so we turn that form into a flex container only when it actually holds grid cards. ========================================================= */ .js-media-library-views-form:has(.media-library-item--grid) { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; } .js-media-library-views-form { display: grid; grid-auto-flow: column; } .js-media-library-views-form hr.views-row-separator{ display: none; } .js-media-library-views-form .js-media-library-item { max-width: 400px; } /* Non-card children (messages, hidden inputs, the actions bar) shouldn't sit in the flex flow as columns. */ .js-media-library-views-form:has(.media-library-item--grid) > #media-library-messages, .js-media-library-views-form:has(.media-library-item--grid) > .form-actions { flex: 1 0 100%; } .js-media-library-views-form > input[type="hidden"] { display: none; } /* The card itself */ .media-library-item--grid { position: relative; flex: 0 1 160px; display: flex; flex-direction: column; margin: 0; border: 1px solid var(--ml-border); border-radius: var(--ml-radius); background: #fff; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .media-library-item--grid:hover, .media-library-item--grid.is-hover { border-color: var(--ml-accent); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); } .media-library-item--grid.checked, .media-library-item--grid.is-focus { border-color: var(--ml-accent); box-shadow: 0 0 0 2px var(--ml-accent); } /* Thumbnail / file icon — contain so generic icons aren't cropped */ .media-library-item--grid .media-library-item__preview, .media-library-item--grid .field--name-thumbnail { margin: 0; } .media-library-item--grid .field--name-thumbnail img, .media-library-item--grid .media-library-item__preview img { display: block; width: 100%; height: 120px; object-fit: contain; padding: 0.75rem; background: var(--ml-bg-muted); } /* Checkbox overlay, top-left of the card */ .media-library-item__click-to-select-checkbox { position: absolute; top: 0.4rem; left: 0.4rem; z-index: 2; margin: 0; } .media-library-item__click-to-select-checkbox .form-check, .media-library-item__click-to-select-checkbox .form-item { margin: 0; } /* Name / attributes block under the thumbnail */ .media-library-item__attributes { padding: 0; } .media-library-item__name { display: block; padding: 0.5rem 0.6rem; font-size: 0.8rem; font-style: normal; /* undo any inherited italics */ font-weight: 500; line-height: 1.3; color: var(--ml-text); text-align: left; word-break: break-word; } /* ========================================================= 7b. TABLE view (Πίνακας) ========================================================= */ .media-library-widget-modal .table-responsive { width: 100%; border: 1px solid var(--ml-border); border-radius: var(--ml-radius); overflow-x: auto; } .media-library-widget-modal table.views-view-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.9rem; } .media-library-widget-modal table.views-view-table thead th { padding: 0.6rem 0.75rem; background: var(--ml-bg-muted); color: var(--ml-text); font-weight: 600; font-style: normal; text-align: left; white-space: nowrap; border-bottom: 2px solid var(--ml-border); } .media-library-widget-modal table.views-view-table td { padding: 0.55rem 0.75rem; vertical-align: middle; border-bottom: 1px solid var(--ml-border); } .media-library-item--table:hover td { background: var(--ml-bg-muted); } .media-library-item--table.checked td { background: rgba(31, 60, 136, 0.06); } /* Shrink the oversized 180px file icons down to a thumbnail */ .media-library-item--table img, .media-library-widget-modal td.views-field-thumbnail__target-id img { width: 40px; height: 40px; object-fit: contain; } /* Keep the checkbox + thumbnail columns tight */ .media-library-widget-modal td.views-field-media-library-select-form, .media-library-widget-modal th.views-field-media-library-select-form { width: 1%; white-space: nowrap; } .media-library-widget-modal td.views-field-thumbnail__target-id, .media-library-widget-modal th.views-field-thumbnail__target-id { width: 56px; } .media-library-widget-modal td.views-field-name { font-weight: 500; color: var(--ml-text); } /* ========================================================= 7c. Empty state — ONLY when there are no items (Δεν υπάρχουν διαθέσιμα μέσα.) ========================================================= */ .js-media-library-views-form:not(:has(.media-library-item)) { padding: 2rem 0; color: var(--ml-text-muted); font-style: italic; text-align: center; } /* ========================================================= 8. Footer button pane + selected count ========================================================= */ .media-library-widget-modal .ui-dialog-buttonpane { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; margin: 0; padding: 1rem 1.5rem; border-top: 1px solid var(--ml-border); background: var(--ml-bg-muted); } .media-library-widget-modal .ui-dialog-buttonset { margin: 0; float: none; } .media-library-selected-count { margin: 0; font-size: 0.88rem; color: var(--ml-text-muted); } /* ========================================================= 9. Responsive ========================================================= */ @media (max-width: 768px) { .ui-dialog.media-library-widget-modal { width: 95% !important; left: 2.5% !important; } .js-media-library-menu { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; } .media-library-widget-modal .views-exposed-form .d-flex { flex-direction: column; align-items: stretch; } }