.odab { display: grid; gap: 12px; width: 100%; min-width: 0; } .odab-filter { display:flex; gap:8px; align-items:center; } /* Theme compatibility: Our taxonomy + single templates use common WP wrappers (content-area/site-main). Ensure ODAB always fills the theme-provided content width (but never breaks out). */ .odab-content-area, .odab-site-main, .odab-tax-wrap, .odab-detail-wrap{ width:100%; min-width:0; } /* Spacing ------- Our taxonomy + single templates sometimes bypass the theme's usual entry spacing/padding. Add a small top padding so the first row doesn't stick to the header/navigation. Use Bootstrap CSS vars when available. */ .odab-tax-wrap, .odab-detail-wrap{ padding-top: var(--bs-gutter-y, 1.5rem); } /* Small-screen gutters ------------------- On some themes (incl. Tabler WP variations) our taxonomy/single templates can render without the theme's usual horizontal container padding on narrow viewports. Provide a safe, theme-friendly gutter on small screens. We avoid double-gutters by moving responsibility from .odab-container to the inner wrappers at this breakpoint. */ @media (max-width: 768px){ .odab-container{ padding-left:0; padding-right:0; } .odab-tax-wrap, .odab-detail-wrap{ padding-left: var(--bs-gutter-x, 1rem); padding-right: var(--bs-gutter-x, 1rem); } } /* Theme width compatibility ------------------------ Shortcodes naturally live inside the theme's content container, but our taxonomy + single templates can end up outside a theme container depending on theme structure. We therefore provide an ODAB container that *behaves like* a Bootstrap 5 `.container` (max-widths + gutters) **without breaking themes**: - If the theme already wraps content in `.container`, we avoid double gutters and avoid re-constraining width. */ .odab-container{ width:100%; max-width:100%; min-width:0; margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; } /* If we're inside common Bootstrap/Tabler containers, never re-constrain width. */ .container .odab-container, .container-fluid .odab-container, .container-xl .odab-container, .container-xxl .odab-container{ max-width:100%; padding-left:0; padding-right:0; } /* Wrapper helper. NOTE: We intentionally respect the active theme's content width. (Earlier versions used a full-bleed 100vw layout which broke theme widths.) */ .odab-fullbleed{ width: 100%; margin: 0; padding: 0; box-sizing: border-box; } /* Masonry-like layout that does NOT reshuffle when "Ladda fler" appends. We render real columns (.odab-col) and append new items to the shortest column. */ .odab-grid-wrap{ position:relative; width:100%; } .odab-grid{ display:flex; gap: 16px; align-items:flex-start; width: 100%; } .odab-col{ flex: 1 1 0; display:flex; flex-direction:column; gap:16px; min-width: 0; } /* Responsive: show fewer columns */ @media (max-width: 1200px){ .odab-col:nth-child(4){ display:none; } } @media (max-width: 900px){ .odab-col:nth-child(3), .odab-col:nth-child(4){ display:none; } } @media (max-width: 600px){ .odab-col:nth-child(2), .odab-col:nth-child(3), .odab-col:nth-child(4){ display:none; } } /* Global loading indicator for AJAX (fixed in viewport) We render this once in as #odab-global-loading so it doesn't "travel" with the grid while auto-loading more items. */ .odab-grid-loading{ display:none; } #odab-global-loading{ position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; z-index: 99999; transition: opacity .15s ease; } body.odab-global-loading-on #odab-global-loading{ opacity: 1; } .odab-spinner{ width:28px; height:28px; border:3px solid rgba(0,0,0,0.14); border-top-color: rgba(0,0,0,0.45); border-radius:50%; animation: odab-spin .8s linear infinite; } @keyframes odab-spin{ to{ transform: rotate(360deg);} } .odab-card { display: block; width: 100%; text-decoration:none; border:1px solid #e5e5e5; border-radius:0; overflow:hidden; background:#fff; transform: translateY(0); box-shadow: none; transition: transform .16s ease, box-shadow .16s ease; cursor: default; position: relative; } /* Single asset (info page) layout */ .odab-detail{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:start;} @media (max-width: 960px){ .odab-detail{ grid-template-columns:1fr; } } .odab-detail-media img, .odab-detail-media video{width:100%;height:auto;display:block;} .odab-detail-meta{min-width:0;} .odab-detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;} .odab-detail-row{margin:4px 0;} .odab-detail-title{margin:0 0 10px;} .odab-detail-note{opacity:.75;margin-top:10px;font-size:13px;} .odab-card-link{ display:block; text-decoration:none; cursor: zoom-in; } /* Keep normal pointer for album stacks/cards */ .odab-album-card, .odab-album-card *{ cursor: pointer; } .odab-thumb { background:#f2f2f2; display:block; } .odab-thumb img { width:100%; height:auto; display:block; transform: scale(1); opacity:0; filter: blur(6px); transition: transform .20s ease, opacity .25s ease, filter .35s ease; } .odab-thumb img.is-loaded{ opacity:1; filter:none; } /* Remove captions under thumbnails (titles are still in lightbox). */ .odab-title{ display:none !important; } /* Subtle hover "lift" */ .odab-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.10); } .odab-card:hover .odab-thumb img{ transform: scale(1.02); } /* Fade-in for album covers as well */ .odab-album-stack img{ opacity:0; filter: blur(6px); transition: opacity .25s ease, filter .35s ease; } .odab-album-stack img.is-loaded{ opacity:1; filter:none; } /* Video hint */ .odab-card .odab-thumb{position:relative;} .odab-card.odab-is-video .odab-thumb:after{content:'▶';position:absolute;left:10px;bottom:10px;font-size:18px;background:rgba(0,0,0,0.55);color:#fff;border-radius:999px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;} /* Hover bar (filename + actions) */ .odab-hoverbar{ position:absolute; left:0; right:0; bottom:0; padding:10px 10px; display:flex; gap:10px; align-items:center; justify-content:space-between; background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0.10)); color:#fff; opacity:1; transform: translateY(0); transition: background .16s ease, opacity .16s ease, transform .16s ease; pointer-events:auto; } .odab-card:hover .odab-hoverbar{ background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.18)); opacity:1; transform: translateY(0); pointer-events:auto; } .odab-hover-title{ font-size:13px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width: 0; } .odab-hover-actions{ display:flex; gap:8px; flex:0 0 auto; } .odab-act{ display:inline-flex; width:32px; height:32px; border:0; padding:0; border-radius:999px; background: rgba(0,0,0,0.18); color:#fff; align-items:center; justify-content:center; text-decoration:none; transition: transform .12s ease, background .12s ease, opacity .12s ease; } .odab-act svg{ width:18px; height:18px; display:block; } .odab-act:hover{ transform: translateY(-1px); background: rgba(0,0,0,0.28); } .odab-fav.is-busy{ opacity: .65; pointer-events:none; } .odab-act-share.is-copied{ background: rgba(47,179,68,0.85); color:#fff; } .glightbox-desc .odab-lb-actions .odab-act{ background: rgba(0,0,0,0.08); color:#111; } .glightbox-desc .odab-lb-actions .odab-act:hover{ background: rgba(0,0,0,0.14); } .odab-btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid #111;text-decoration:none;color:#111;} .odab-btn-secondary{border-color:#bbb;color:#111;} /* Inline loader for infinite scroll */ .odab-more{ --odab-more-bg: var(--odab-surface, #fff); --odab-more-fg: var(--odab-text, #182433); --odab-more-border: var(--odab-border, rgba(0,0,0,.12)); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; margin: 1rem auto 0; padding: .775rem 1.15rem; min-width: 11rem; min-height: 2.75rem; position: relative; border: 1px solid var(--odab-more-border); border-radius: 999px; background: var(--odab-more-bg); color: var(--odab-more-fg); font: inherit; font-size: .95rem; font-weight: 600; line-height: 1; letter-spacing: .01em; box-shadow: var(--odab-shadow, 0 .5rem 1.25rem rgba(15,23,42,.08)); cursor: pointer; transition: transform .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease, opacity .14s ease; -webkit-appearance: none; appearance: none; } .odab-more:hover{ transform: translateY(-1px); background: var(--odab-action-hover, #f6f7fb); border-color: color-mix(in srgb, var(--odab-more-border) 74%, var(--odab-more-fg) 26%); box-shadow: var(--odab-shadow-lg, 0 1rem 2rem rgba(15,23,42,.14)); } .odab-more:focus-visible{ outline: 2px solid color-mix(in srgb, var(--odab-more-fg) 24%, transparent); outline-offset: 3px; } .odab-more[disabled], .odab-more.is-loading{ opacity: .82; cursor: wait; } .odab-more[hidden]{ display: none !important; } .odab-more.is-loading:after{ content:''; display:inline-block; width:16px; height:16px; border:2px solid color-mix(in srgb, var(--odab-more-fg) 16%, transparent); border-top-color: color-mix(in srgb, var(--odab-more-fg) 54%, transparent); border-radius:50%; animation: odab-spin .8s linear infinite; } html[data-bs-theme="dark"] .odab-more{ background: color-mix(in srgb, var(--odab-surface, #151f38) 92%, transparent); } /* Filter bar (Tom Select) */ .odab-filter{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:14px;} .odab-filter-row{min-width:240px; flex: 1 1 280px;} .odab-label{display:none;} .odab-sort{width:100%;} /* Tom Select baseline (Tabler/Bootstrap compatible) ------------------------------------------------ Tabler's vendors stylesheet styles Tom Select colors, but it does not include the core positioning/layout rules. We only enforce the *critical* layout bits so the dropdown behaves correctly, and we scope it to the ODAB filter area (because we move the filter next to the page title). */ .odab-filter .ts-wrapper{width:100%; position:relative !important;} .odab-filter .ts-control{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; /* Provide the missing Tom Select "core" box model so Tabler can skin it. Tabler vendors includes colors/shadows, but not the base layout. */ background: var(--tblr-bg-forms, #fff); border: 1px solid var(--tblr-border-color, rgba(0,0,0,.15)); border-radius: var(--tblr-border-radius, .25rem); padding: .3125rem .75rem; min-height: calc(1.25em + .625rem + 2px); } .odab-filter .ts-wrapper.form-control-sm .ts-control, .odab-filter .ts-wrapper.form-select-sm .ts-control{ padding: .25rem .5rem; min-height: calc(1.25em + .5rem + 2px); font-size: .875rem; } .odab-filter .ts-control input{border:0; outline:0; flex:1 1 80px; min-width:60px; padding:0; margin:0; background:transparent;} .odab-filter .ts-item{ border:0 !important; box-shadow:none !important; background: var(--tblr-bg-surface-secondary, rgba(0,0,0,.06)); color: inherit; border-radius: .25rem; display:inline-flex; align-items:center; gap:.2rem; padding: 0 .18rem 0 .45rem; } .odab-filter .ts-item .remove{ cursor:pointer; display:inline-flex; align-items:center; justify-content:center; margin-left:.12rem; padding:0 .28rem 0 .16rem; line-height:1; text-decoration:none; } .odab-filter .ts-dropdown .ts-option, .odab-filter .ts-dropdown .option{cursor:pointer;} .odab-filter .ts-dropdown{position:absolute !important; top:100% !important; left:0 !important; right:0 !important; z-index:2000 !important;} /* TomSelect empty state */ .odab-filter .odab-ts-noresults{padding:.5rem .75rem;} .odab-filter .odab-ts-noresults-pill{ display:inline-block; padding:.25rem .5rem; border-radius:999px; background: rgba(0,0,0,.04); color: rgba(0,0,0,.55); font-size: .875rem; } /* Tom Select hides the original can show up as an extra listbox above the control. Scope to ODAB only. */ .odab-filter select.ts-hidden-accessible, .odab-filter select.tomselected{ position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; padding:0 !important; margin:0 !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; clip-path: inset(50%) !important; white-space:nowrap !important; border:0 !important; } /* Page header alignment (Bootstrap-like) ------------------------------------ When JS moves .odab-filter into the theme header that contains .page-title, we make that header a flex row with actions on the right. */ .odab-pagehead{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;} .odab-pagehead .odab-filter{margin:0; justify-content:flex-end; align-items:center; gap:12px;} @media (min-width: 901px){ .odab-pagehead .odab-filter{flex-wrap:nowrap;} } .odab-pagehead .odab-filter-row{min-width:0; flex:0 1 auto; display:flex; align-items:center;} /* Preferred widths (desktop) */ .odab-pagehead .odab-filter-row:first-child{flex:0 1 640px; min-width:420px;} .odab-pagehead .odab-filter-row:last-child{flex:0 0 180px;} @media (max-width: 900px){ .odab-pagehead .odab-filter-row:first-child{flex:1 1 100%;} .odab-pagehead .odab-filter-row:last-child{flex:1 1 100%;} } /* ODAB filter: align controls side-by-side and let Tabler style them */ .odab-pagehead .odab-filter{display:flex; flex-direction:row;} @media (max-width: 900px){ .odab-pagehead .odab-filter{flex-wrap:wrap;} } /* Tom Select in page header: keep the control compact and avoid the "extra box" look. We also prevent the control from growing taller when tags are selected by disabling wrap. */ .odab-pagehead .odab-filter .ts-control{ background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; display:flex !important; align-items:center !important; gap:.25rem; /* Match Tabler form-select-sm height exactly; avoid baseline drift */ padding: 0 .5rem !important; box-sizing: border-box !important; min-height: var(--tblr-input-height-sm, 2.25rem) !important; height: var(--tblr-input-height-sm, 2.25rem) !important; line-height: 1.25rem !important; /* Match Tabler form-select-sm font size (typically 12px) */ font-size: .75rem !important; width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; } .odab-pagehead .odab-filter .ts-control::-webkit-scrollbar{height:0;} .odab-pagehead .odab-filter .ts-control{scrollbar-width:none;} .odab-pagehead .odab-filter .ts-control input{ cursor:text; height: 100%; line-height: 1.25rem; font-size: .75rem; padding:0; margin:0; align-self:center; min-width: 1ch; } .odab-pagehead .odab-filter .ts-control .item{ white-space:nowrap; display:inline-flex; align-items:center; gap:.2rem; padding-left:.45rem !important; padding-right:.18rem !important; } .odab-pagehead .odab-filter .ts-control .remove{ cursor:pointer; display:inline-flex; align-items:center; justify-content:center; margin-left:.12rem; padding:0 .28rem 0 .16rem; line-height:1; text-decoration:none; } .odab-pagehead .odab-filter .ts-dropdown .option, .odab-pagehead .odab-filter .ts-dropdown .ts-option{cursor:pointer !important;} /* Make the two header controls the same height (Tabler/Bootstrap). */ .odab-pagehead .odab-sort{min-width:180px; height: var(--tblr-input-height-sm, 2.25rem) !important; min-height: var(--tblr-input-height-sm, 2.25rem) !important;} .odab-pagehead .odab-filter .ts-wrapper{ height: var(--tblr-input-height-sm, 2.25rem) !important; min-height: var(--tblr-input-height-sm, 2.25rem) !important; box-sizing: border-box !important; display:flex !important; align-items:center !important; flex: 1 1 auto !important; width: 100% !important; min-width: 320px; } /* If TomSelect re-applies the placeholder (e.g. when all options are selected), keep it hidden as soon as we have selected items. */ .odab-pagehead .odab-filter .ts-wrapper.has-items .ts-control input::placeholder, .odab-pagehead .odab-filter .ts-control.has-items input::placeholder, .odab-pagehead .odab-filter .ts-wrapper.dropdown-active .ts-control input::placeholder, .odab-pagehead .odab-filter .ts-wrapper.input-active .ts-control input::placeholder{ opacity:0 !important; } /* If TomSelect renders a placeholder element node, hide it whenever we have selected items. */ .odab-pagehead .odab-filter .ts-wrapper.has-items .ts-control .placeholder, .odab-pagehead .odab-filter .ts-control.has-items .placeholder{ display:none !important; } .odab-tax-header{margin: 10px 0 18px;} .odab-tax-header h1{margin:0 0 6px;} /* Global: square corners for ODAB thumbnails/media */ .odab-thumb img, .odab-detail-img, .odab-detail-media video, .odab-admin-thumb, .odab-admin-previewbox .odab-admin-previewmedia{ border-radius: 0 !important; } /* Albums (DesignShack-like stack) Keep album listing page layout stable: aim for 4 columns on desktop, fewer on smaller screens. */ .odab-albums{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:16px 0;} @media (max-width: 1200px){ .odab-albums{ grid-template-columns:repeat(3,1fr); } } @media (max-width: 900px){ .odab-albums{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 600px){ .odab-albums{ grid-template-columns:1fr; } } /* On small screens some themes don't provide horizontal gutters for the album listing. Add gentle page padding, but avoid double-gutters inside Bootstrap containers. */ @media (max-width: 768px){ .odab-albums{ padding-left: var(--bs-gutter-x, 1rem); padding-right: var(--bs-gutter-x, 1rem); } } .odab-album-card{position:relative;display:block;text-decoration:none;color:inherit;} .odab-album-stack-wrap{position:relative;display:block;overflow:visible;} .odab-album-stack{ position:relative; display:block; overflow:hidden; background:#fff; aspect-ratio:4/3; border: 8px solid #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index:3; border-radius:0; transform: translateY(0) scale(1); transition: transform .20s ease, box-shadow .20s ease; } .odab-album-stack img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;transform:none;} .odab-album-placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,#eee,#f7f7f7);} /* two visible layers behind (more contrast + stronger rotation) */ .odab-album-stack-wrap::before, .odab-album-stack-wrap::after{ content:''; position:absolute; inset:0; border: 8px solid #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index:1; } .odab-album-stack-wrap::before{ background:#eff4de; top: 6px; left: 6px; transform: rotate(-4deg); z-index:1; } .odab-album-stack-wrap::after{ background:#768590; top: 12px; left: 12px; transform: rotate(4deg); z-index:2; } /* Stack variants (stable per album via odab-stack-v1..v4) */ .odab-album-stack-wrap.odab-stack-v1::before{ top:6px; left:6px; transform:rotate(-4deg); background:#eff4de; } .odab-album-stack-wrap.odab-stack-v1::after{ top:12px; left:12px; transform:rotate(4deg); background:#768590; } .odab-album-stack-wrap.odab-stack-v2::before{ top:5px; left:8px; transform:rotate(3deg); background:#e9f2ff; } .odab-album-stack-wrap.odab-stack-v2::after{ top:13px; left:10px; transform:rotate(-5deg); background:#ffe9f1; } .odab-album-stack-wrap.odab-stack-v3::before{ top:8px; left:4px; transform:rotate(-6deg); background:#f4f0de; } .odab-album-stack-wrap.odab-stack-v3::after{ top:12px; left:14px; transform:rotate(2deg); background:#e8eef5; } .odab-album-stack-wrap.odab-stack-v4::before{ top:4px; left:5px; transform:rotate(5deg); background:#eef7f2; } .odab-album-stack-wrap.odab-stack-v4::after{ top:14px; left:9px; transform:rotate(-3deg); background:#f6eef7; } /* Hover: lift + zoom the whole front layer so label follows the image perfectly */ .odab-album-card:hover .odab-album-stack{transform:translateY(-3px) scale(1.01);box-shadow: 6px 10px 22px rgba(0,0,0,0.22);} /* Label overlay similar to Flickr */ .odab-album-label{ position:absolute; left:8px; right:8px; bottom:8px; z-index:4; padding:10px 12px; color:#fff; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0)); pointer-events:none; transform:none; transform-origin:center; transition:none; } .odab-album-title{display:block;font-size:16px;line-height:1.2;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,0.35);} .odab-album-count{display:block;font-size:13px;opacity:0.9;text-shadow:0 1px 2px rgba(0,0,0,0.35);} /* Taxonomy (album) pages previously had a fixed max-width which made the gallery look narrower than the regular gallery shortcode. Let the theme control content width so all ODAB grids can span the same available space. */ .odab-tax-wrap{max-width:none;} /* Some themes use flex/centered wrappers on taxonomy templates which can cause the ODAB blocks to shrink to content width. Force full-width behavior within the theme-provided content container. */ .odab-tax-wrap, .odab-tax-subalbums, .odab-tax-gallery, .odab-tax-gallery > .odab, .odab-tax-gallery .odab-grid-wrap{ width:100% !important; max-width:100% !important; } .odab-tax-gallery > .odab{justify-self:stretch !important; align-self:stretch !important;} .odab-tax-gallery .odab-grid{width:100% !important;} /* Give album galleries a little horizontal gutter on small screens (match regular pages) */ @media (max-width: 768px){ .odab-tax-gallery{ padding-left: var(--bs-gutter-x, 1rem); padding-right: var(--bs-gutter-x, 1rem); box-sizing: border-box; } } /* Ensure the new masonry grid styling wins inside album (taxonomy) pages even if the theme has older overrides */ .odab-tax-gallery .odab-grid{ display:flex !important; gap:16px !important; align-items:flex-start !important; } .odab-tax-gallery .odab-col{ display:flex !important; flex-direction:column !important; gap:16px !important; } /* Hide placeholder text when Tom Select input is focused */ .odab-pagehead .odab-filter .ts-control input:focus::placeholder{color:transparent;} /* Tag cloud shortcode */ .odab-tag-cloud{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; align-content:center; gap:4px 8px; } .odab-tag-cloud--classic{ max-width:700px; margin:0 auto; padding:clamp(6px, 1vw, 10px); line-height:1; } .odab-tag-word{ --odab-tag-color: var(--tblr-body-color, #2b2b2b); display:inline-flex; align-items:flex-end; justify-content:center; gap:.18em; margin:0; vertical-align:middle; white-space:nowrap; font-size:var(--odab-tag-size, 1rem); font-weight:800; letter-spacing:-.05em; color:var(--odab-tag-color); text-decoration:none; padding:0; transform:translateY(var(--odab-tag-lift, 0)); transform-origin:center; transition:transform .16s ease, opacity .16s ease, color .16s ease, text-shadow .16s ease; opacity:.97; flex:0 0 auto; } .odab-tag-word:hover{ text-decoration:none; transform:translateY(calc(var(--odab-tag-lift, 0) - .02em)) scale(1.02); opacity:1; text-shadow:0 1px 0 rgba(255,255,255,.24); } .odab-tag-word.is-active{ opacity:1; text-decoration:underline; text-underline-offset:.1em; text-decoration-thickness:.08em; } .odab-tag-word.is-horizontal{ transform:translateY(var(--odab-tag-lift, 0)); } .odab-tag-word.is-horizontal:hover{ transform:translateY(calc(var(--odab-tag-lift, 0) - .02em)) scale(1.02); } .odab-tag-word.is-vertical{ writing-mode:vertical-rl; text-orientation:mixed; line-height:.82; min-block-size:1.02em; } .odab-tag-word.is-vertical:hover{ transform:translateY(calc(var(--odab-tag-lift, 0) - .02em)) scale(1.02); } .odab-tag-word__label{line-height:1;} .odab-tag-word__count{ font-size:.30em; line-height:1; opacity:.52; font-weight:700; letter-spacing:0; } .odab-tag-tone--red-deep{--odab-tag-color:#90151c;} .odab-tag-tone--red{--odab-tag-color:#ac2a2a;} .odab-tag-tone--rose{--odab-tag-color:#bb595c;} .odab-tag-tone--blush{--odab-tag-color:#ead7df;} .odab-tag-tone--brick{--odab-tag-color:#af3c3f;} @media (max-width: 767px){ .odab-tag-cloud{gap:4px 6px;} .odab-tag-cloud--classic{max-width:100%; padding:6px;} .odab-tag-word{letter-spacing:-.03em;} .odab-tag-word.is-vertical{writing-mode:horizontal-tb; text-orientation:mixed;} } /* Compact latest-assets strip/grid ([odab_latest]) */ .odab-latest-grid{ --odab-latest-height: 120px; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; } .odab-latest-item{ display:block; flex:0 0 auto; height:var(--odab-latest-height); aspect-ratio:var(--odab-item-ratio, 1.3333); width:auto; max-width:100%; overflow:hidden; background:#f2f2f2; border:1px solid #e5e5e5; text-decoration:none; transition:transform .16s ease, box-shadow .16s ease; } .odab-latest-item:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,0.10); } .odab-latest-item img{ width:100%; height:100%; display:block; object-fit:cover; } @media (max-width: 640px){ .odab-latest-grid{ gap:8px; } } /* ========================================================= Theme-aware frontend polish (Tabler light/dark friendly) ========================================================= */ :root{ --odab-surface: var(--tblr-bg-surface, #ffffff); --odab-surface-2: var(--tblr-bg-surface-secondary, #f6f7fb); --odab-border: var(--tblr-border-color, rgba(0,0,0,.12)); --odab-text: var(--tblr-body-color, #182433); --odab-muted: var(--tblr-secondary-color, rgba(24,36,51,.72)); --odab-overlay: rgba(9, 16, 31, .78); --odab-overlay-strong: rgba(9, 16, 31, .9); --odab-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .08); --odab-shadow-lg: 0 1rem 2rem rgba(15, 23, 42, .14); --odab-radius: 14px; --odab-action-bg: color-mix(in srgb, var(--odab-surface) 88%, transparent); --odab-action-hover: color-mix(in srgb, var(--odab-surface) 100%, #000 8%); --odab-btn-bg: var(--odab-surface); --odab-btn-fg: var(--odab-text); } html[data-bs-theme="dark"]{ --odab-surface: color-mix(in srgb, var(--tblr-bg-surface, #151f38) 96%, #fff 4%); --odab-surface-2: color-mix(in srgb, var(--tblr-bg-surface-secondary, #10192c) 94%, #fff 6%); --odab-border: color-mix(in srgb, var(--tblr-border-color, rgba(255,255,255,.12)) 92%, #fff 8%); --odab-text: var(--tblr-body-color, #f4f6fa); --odab-muted: color-mix(in srgb, var(--tblr-body-color, #f4f6fa) 72%, transparent); --odab-overlay: rgba(4, 10, 22, .82); --odab-overlay-strong: rgba(4, 10, 22, .94); --odab-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .28); --odab-shadow-lg: 0 1rem 2.5rem rgba(0, 0, 0, .4); --odab-action-bg: color-mix(in srgb, var(--odab-surface) 86%, transparent); --odab-action-hover: color-mix(in srgb, var(--odab-surface) 100%, #fff 6%); --odab-btn-bg: color-mix(in srgb, var(--odab-surface) 88%, transparent); --odab-btn-fg: var(--odab-text); } .odab, .odab .page-title, .odab-detail-wrap, .odab-tax-wrap, .odab-latest-grid, .glightbox-desc{ color: var(--odab-text); } /* Cards and thumbs should feel like theme surfaces instead of stark white */ .odab-card, .odab-latest-item, .odab-album-stack{ background: var(--odab-surface); border-color: var(--odab-border); box-shadow: var(--odab-shadow); } .odab-card:hover, .odab-latest-item:hover, .odab-album-card:hover .odab-album-stack{ box-shadow: var(--odab-shadow-lg); } .odab-thumb, .odab-latest-item, .odab-album-placeholder{ background: var(--odab-surface-2); } .odab-more.is-loading:after, .odab-spinner{ border-color: color-mix(in srgb, var(--odab-text) 14%, transparent); border-top-color: color-mix(in srgb, var(--odab-text) 46%, transparent); } /* Header/filter controls */ .odab-pagehead .odab-filter .ts-wrapper, .odab-pagehead .odab-sort, .odab-filter .ts-control, .odab-filter .ts-dropdown, .odab-filter .ts-dropdown .option, .odab-filter .ts-dropdown .ts-option{ color: var(--odab-text); } .odab-filter .ts-control, .odab-pagehead .odab-sort, .odab-pagehead .odab-filter .ts-wrapper{ background: var(--odab-surface) !important; border: 1px solid var(--odab-border) !important; border-radius: 10px !important; box-shadow: none !important; } .odab-pagehead .odab-filter .ts-control{ background: transparent !important; border: 0 !important; border-radius: inherit !important; } .odab-filter .ts-dropdown{ background: var(--odab-surface) !important; border: 1px solid var(--odab-border) !important; border-radius: 12px !important; box-shadow: var(--odab-shadow-lg) !important; } .odab-filter .ts-dropdown .option, .odab-filter .ts-dropdown .ts-option{ color: var(--odab-text) !important; } .odab-filter .ts-dropdown .active, .odab-filter .ts-dropdown .selected{ background: color-mix(in srgb, var(--odab-surface-2) 88%, transparent) !important; } .odab-filter .ts-item{ background: color-mix(in srgb, var(--odab-surface-2) 92%, transparent) !important; color: var(--odab-text) !important; } .odab-filter .odab-ts-noresults-pill{ background: color-mix(in srgb, var(--odab-surface-2) 94%, transparent); color: var(--odab-muted); } /* Single info page: create a contained two-panel layout instead of text floating on page bg */ .odab-detail{ align-items: stretch; gap: 1.25rem; } .odab-detail-media, .odab-detail-meta{ min-width: 0; background: var(--odab-surface); border: 1px solid var(--odab-border); border-radius: var(--odab-radius); box-shadow: var(--odab-shadow); } .odab-detail-media{ padding: clamp(.75rem, 1.2vw, 1rem); } .odab-detail-media img, .odab-detail-media video{ border-radius: calc(var(--odab-radius) - 6px); background: var(--odab-surface-2); max-height: min(75vh, 900px); object-fit: contain; } .odab-detail-meta{ padding: clamp(1rem, 1.4vw, 1.25rem); color: var(--odab-text); } .odab-detail-title, .odab-tax-header h1, .odab-pagehead .page-title{ color: var(--odab-text); } .odab-detail-desc, .odab-detail-note, .odab-detail-row{ color: var(--odab-muted); } .odab-detail-row strong{ color: var(--odab-text); } .odab-detail-fav{ justify-content: flex-start !important; margin: 0 0 1rem !important; } .odab-detail-actions{ margin-top: 1rem; } .odab-btn, .odab-btn-secondary{ background: var(--odab-btn-bg); color: var(--odab-btn-fg); border: 1px solid var(--odab-border); border-radius: 10px; box-shadow: none; transition: transform .14s ease, background-color .14s ease, border-color .14s ease; } .odab-btn:hover, .odab-btn-secondary:hover{ background: var(--odab-action-hover); color: var(--odab-btn-fg); border-color: color-mix(in srgb, var(--odab-border) 78%, var(--odab-text) 22%); transform: translateY(-1px); } /* Action icons should remain visible in both themes */ .odab-act, .glightbox-desc .odab-lb-actions .odab-act, .odab-detail-fav .odab-act{ background: var(--odab-action-bg); color: var(--odab-text); border: 1px solid var(--odab-border); box-shadow: none; } .odab-act:hover, .glightbox-desc .odab-lb-actions .odab-act:hover, .odab-detail-fav .odab-act:hover{ background: var(--odab-action-hover); color: var(--odab-text); } .odab-act-share.is-copied{ background: color-mix(in srgb, #2fb344 76%, var(--odab-surface) 24%); border-color: color-mix(in srgb, #2fb344 60%, var(--odab-border) 40%); } /* Hover bar readable over both bright and dark images */ .odab-hoverbar{ background: linear-gradient(to top, var(--odab-overlay-strong), transparent 72%); z-index: 3; } .odab-hover-actions{ position: relative; z-index: 4; } .odab-hover-actions .odab-act, .odab-hover-actions a.odab-act, .odab-hover-actions button.odab-act{ pointer-events: auto; } .odab-hover-title{ color: #fff; } .odab-hover-actions .odab-act{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18); color: #fff; } .odab-hover-actions .odab-act:hover{ background: rgba(255,255,255,.22); color: #fff; } /* Album stacks look less harsh in dark mode */ html[data-bs-theme="dark"] .odab-album-stack-wrap::before, html[data-bs-theme="dark"] .odab-album-stack-wrap::after{ border-color: color-mix(in srgb, var(--odab-surface) 88%, #fff 12%); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.32); } html[data-bs-theme="dark"] .odab-album-stack-wrap.odab-stack-v1::before{ background:#243149; } html[data-bs-theme="dark"] .odab-album-stack-wrap.odab-stack-v1::after{ background:#324867; } html[data-bs-theme="dark"] .odab-album-stack-wrap.odab-stack-v2::before{ background:#24384d; } html[data-bs-theme="dark"] .odab-album-stack-wrap.odab-stack-v2::after{ background:#4d3240; } html[data-bs-theme="dark"] .odab-album-stack-wrap.odab-stack-v3::before{ background:#3a3446; } html[data-bs-theme="dark"] .odab-album-stack-wrap.odab-stack-v3::after{ background:#25394b; } html[data-bs-theme="dark"] .odab-album-stack-wrap.odab-stack-v4::before{ background:#1e3c37; } html[data-bs-theme="dark"] .odab-album-stack-wrap.odab-stack-v4::after{ background:#42334e; } /* GLightbox needs its own theme-aware shell */ .glightbox-container .goverlay{ background: var(--odab-overlay-strong) !important; } .glightbox-container .gslide-description, .glightbox-container .gdesc-inner, .glightbox-container .gslide-desc, .glightbox-container .gslide-title, .glightbox-container .gslide-media, .glightbox-container .gslide-image, .glightbox-container .gslide-video{ color: var(--odab-text); } .glightbox-container .gdesc-inner, .glightbox-container .gslide-description{ background: var(--odab-surface) !important; color: var(--odab-text) !important; border-left: 1px solid var(--odab-border); box-shadow: var(--odab-shadow-lg); } .glightbox-container .gslide-title, .glightbox-container .odab-lb-title{ color: var(--odab-text) !important; } .glightbox-container .odab-lb-desc, .glightbox-container .glightbox-desc > div:not(.odab-lb-title):not(.odab-lb-actions){ color: var(--odab-muted) !important; } .glightbox-container .glightbox-desc strong{ color: var(--odab-text) !important; } .glightbox-container .gclose, .glightbox-container .gprev, .glightbox-container .gnext{ background: color-mix(in srgb, var(--odab-overlay) 88%, transparent) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; transition: transform .14s ease, background-color .14s ease; } .glightbox-container .gclose:hover, .glightbox-container .gprev:hover, .glightbox-container .gnext:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--odab-overlay) 98%, #fff 2%) !important; } .glightbox-clean .gslide-media img{ border-radius: 0; box-shadow: 0 1rem 3rem rgba(0,0,0,.18); } html[data-bs-theme="dark"] .glightbox-clean .gslide-media img{ box-shadow: 0 1.25rem 3rem rgba(0,0,0,.36); } /* Small screen adjustments */ @media (max-width: 960px){ .odab-detail-media, .odab-detail-meta{ border-radius: 12px; } .glightbox-container .gdesc-inner, .glightbox-container .gslide-description{ border-left: 0; border-top: 1px solid var(--odab-border); } } @media (max-width: 640px){ .odab-detail-media{ padding: .625rem; } .odab-detail-meta{ padding: .875rem; } .odab-detail-actions{ gap: .5rem; } .odab-btn, .odab-btn-secondary{ padding: .625rem .875rem; } } /* ========================================================================== v0783 Theme polish for Tabler light/dark mode -------------------------------------------------------------------------- */ :root, html[data-bs-theme="light"], body[data-bs-theme="light"]{ --odab-surface: var(--tblr-bg-surface, #ffffff); --odab-surface-2: var(--tblr-bg-surface-secondary, #f3f4f6); --odab-border: var(--tblr-border-color, rgba(4,32,69,.10)); --odab-text: var(--tblr-body-color, #1f2937); --odab-muted: var(--tblr-secondary-color, rgba(31,41,55,.72)); --odab-overlay: rgba(8, 15, 28, .72); --odab-overlay-strong: rgba(8, 15, 28, .92); --odab-shadow: rgba(var(--tblr-body-color-rgb, 31,41,55), .05) 0 4px 18px 0; --odab-shadow-lg: 0 1rem 2rem rgba(0,0,0,.14); --odab-action-bg: color-mix(in srgb, var(--odab-surface) 92%, transparent); --odab-action-hover: color-mix(in srgb, var(--odab-surface-2) 82%, var(--odab-surface) 18%); } html[data-bs-theme="dark"], body[data-bs-theme="dark"]{ --odab-surface: var(--tblr-bg-surface, #18212f); --odab-surface-2: var(--tblr-bg-surface-secondary, #111a29); --odab-border: var(--tblr-border-color, rgba(72,110,149,.18)); --odab-text: var(--tblr-body-color, #e5e7eb); --odab-muted: var(--tblr-secondary-color, rgba(229,231,235,.76)); --odab-overlay: rgba(3, 8, 18, .84); --odab-overlay-strong: rgba(3, 8, 18, .96); --odab-shadow: 0 .5rem 1.5rem rgba(0,0,0,.28); --odab-shadow-lg: 0 1rem 2.5rem rgba(0,0,0,.42); --odab-action-bg: color-mix(in srgb, var(--odab-surface) 90%, rgba(255,255,255,.03) 10%); --odab-action-hover: color-mix(in srgb, var(--odab-surface-2) 72%, var(--odab-surface) 28%); } .odab, .odab .page-title, .odab-tax-wrap, .odab-detail-wrap, .odab-detail, .odab-filter, .odab-filter *{ color: var(--odab-text); } /* Theme-aware cards/grids */ .odab-card, .odab-latest-item, .odab-album-stack, .odab-detail-media, .odab-detail-meta{ background: var(--odab-surface); border-color: var(--odab-border); box-shadow: var(--odab-shadow); } .odab-thumb, .odab-latest-item, .odab-album-placeholder, .odab-detail-media img, .odab-detail-media video{ background: var(--odab-surface-2); } /* Keep gallery cards clean in dark mode */ .odab-card{ border-color: var(--odab-border); } .odab-card:hover{ box-shadow: var(--odab-shadow-lg); } /* Filter controls */ .odab-filter .ts-control, .odab-pagehead .odab-sort, .odab-pagehead .odab-filter .ts-wrapper, .odab-filter .ts-dropdown{ background: var(--odab-surface) !important; border-color: var(--odab-border) !important; color: var(--odab-text) !important; } .odab-filter .ts-dropdown{ box-shadow: var(--odab-shadow-lg) !important; } .odab-filter .ts-dropdown .option, .odab-filter .ts-dropdown .ts-option{ color: var(--odab-text) !important; } .odab-filter .ts-dropdown .active, .odab-filter .ts-dropdown .selected{ background: color-mix(in srgb, var(--odab-surface-2) 86%, transparent) !important; } .odab-filter .ts-item{ background: color-mix(in srgb, var(--odab-surface-2) 92%, transparent) !important; color: var(--odab-text) !important; } /* Single asset page gets a proper panel layout */ .odab-detail{ align-items: stretch; gap: 1.25rem; } .odab-detail-media, .odab-detail-meta{ border: 1px solid var(--odab-border); min-width: 0; } .odab-detail-media{ padding: 1rem; } .odab-detail-media img, .odab-detail-media video{ display: block; width: 100%; max-height: min(75vh, 880px); object-fit: contain; } .odab-detail-meta{ padding: 1rem 1.125rem; } .odab-detail-title, .odab-tax-header h1, .odab-pagehead .page-title{ color: var(--odab-text); } .odab-detail-row, .odab-detail-desc, .odab-detail-note{ color: var(--odab-muted); } .odab-detail-row strong, .glightbox-container .glightbox-desc strong{ color: var(--odab-text); } .odab-detail-fav{ justify-content: flex-start !important; margin: 0 0 1rem !important; } .odab-detail-actions{ gap: .625rem; } .odab-btn, .odab-btn-secondary, .odab-more{ background: var(--odab-action-bg); color: var(--odab-text); border: 1px solid var(--odab-border); box-shadow: none; } .odab-btn:hover, .odab-btn-secondary:hover, .odab-more:hover{ background: var(--odab-action-hover); color: var(--odab-text); border-color: color-mix(in srgb, var(--odab-border) 70%, var(--odab-text) 30%); } /* Unified icon buttons */ .odab-act, .odab-detail-fav .odab-act, .glightbox-desc .odab-lb-actions .odab-act{ background: var(--odab-action-bg); color: var(--odab-text); border: 1px solid var(--odab-border); } .odab-act:hover, .odab-detail-fav .odab-act:hover, .glightbox-desc .odab-lb-actions .odab-act:hover{ background: var(--odab-action-hover); color: var(--odab-text); } /* Hover bar on image cards */ .odab-hoverbar{ background: linear-gradient(to top, var(--odab-overlay-strong), transparent 74%); } .odab-hover-title{ color: #fff; } .odab-hover-actions .odab-act{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.16); color: #fff; } .odab-hover-actions .odab-act:hover{ background: rgba(255,255,255,.24); color: #fff; } /* GLightbox shell should match theme instead of hard white sidebar */ .glightbox-container .goverlay{ background: var(--odab-overlay-strong) !important; } .glightbox-container .gdesc-inner, .glightbox-container .gslide-description{ background: var(--odab-surface) !important; color: var(--odab-text) !important; border-left: 1px solid var(--odab-border); box-shadow: var(--odab-shadow-lg); } .glightbox-container .gslide-title, .glightbox-container .odab-lb-title{ color: var(--odab-text) !important; } .glightbox-container .odab-lb-desc, .glightbox-container .glightbox-desc > div:not(.odab-lb-title):not(.odab-lb-actions){ color: var(--odab-muted) !important; } .glightbox-container .gclose, .glightbox-container .gprev, .glightbox-container .gnext{ background: color-mix(in srgb, var(--odab-overlay) 90%, transparent) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; } .glightbox-container .gclose:hover, .glightbox-container .gprev:hover, .glightbox-container .gnext:hover{ background: color-mix(in srgb, var(--odab-overlay) 98%, #fff 2%) !important; } .glightbox-clean .gslide-media img{ border-radius: 0 !important; box-shadow: 0 1rem 3rem rgba(0,0,0,.22); } html[data-bs-theme="dark"] .glightbox-clean .gslide-media img, body[data-bs-theme="dark"] .glightbox-clean .gslide-media img{ box-shadow: 0 1.25rem 3rem rgba(0,0,0,.4); } /* Album stack helper layers look softer in dark mode */ html[data-bs-theme="dark"] .odab-album-stack-wrap::before, html[data-bs-theme="dark"] .odab-album-stack-wrap::after, body[data-bs-theme="dark"] .odab-album-stack-wrap::before, body[data-bs-theme="dark"] .odab-album-stack-wrap::after{ border-color: color-mix(in srgb, var(--odab-surface) 86%, #fff 14%); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.34); } @media (max-width: 960px){ .glightbox-container .gdesc-inner, .glightbox-container .gslide-description{ border-left: 0; border-top: 1px solid var(--odab-border); } } .odab-act-share.is-copied{ background: #2fb344 !important; border-color: #2fb344 !important; color: #fff !important; box-shadow: 0 0 0 4px rgba(47,179,68,.22); } .odab-copy-toast{ position: fixed; right: 20px; bottom: 20px; z-index: 100000; display: inline-flex; align-items: center; gap: .5rem; max-width: min(92vw, 360px); padding: .75rem .95rem; border-radius: 999px; border: 1px solid var(--odab-border, rgba(255,255,255,.18)); background: var(--odab-surface, rgba(15,23,42,.94)); color: var(--odab-text, #fff); box-shadow: 0 16px 32px rgba(0,0,0,.22); opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; } .odab-copy-toast.is-visible{ opacity: 1; transform: translateY(0); } [data-bs-theme="dark"] .odab-copy-toast, body.dark .odab-copy-toast, body.is-dark .odab-copy-toast{ background: rgba(17,24,39,.96); color: #f8fafc; border-color: rgba(255,255,255,.12); } /* Keep the front album card white even when theme-aware surfaces are enabled. The two cards behind are already white-bordered, so force the top card to match. */ .odab-album-stack{ background: #fff !important; border-color: #fff !important; } .odab-album-card:hover .odab-album-stack{ background: #fff !important; border-color: #fff !important; } /* Clean skeleton loading for [odab_latest] */ .odab-latest-item{ position: relative; isolation: isolate; } .odab-latest-skeleton{ position:absolute; inset:0; display:block; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100% ), linear-gradient(135deg, #eceff3 0%, #f5f7fa 45%, #eceff3 100%); background-size: 200% 100%, 100% 100%; animation: odab-latest-shimmer 1.15s linear infinite; z-index: 1; } .odab-latest-skeleton.is-hidden{ opacity:0; visibility:hidden; transition: opacity .18s ease, visibility .18s ease; } .odab-latest-item img{ position:relative; z-index:2; opacity:0; transition: opacity .22s ease; } .odab-latest-item img.is-loaded{ opacity:1; } @keyframes odab-latest-shimmer{ 0%{ background-position: 200% 0, 0 0; } 100%{ background-position: -200% 0, 0 0; } }