/* Gallery Image Likes - front-end styles */ /* -------------------------------------------------------------- */ /* Bare-icon overlay on the image corner - no pill, no background. */ /* !important is used throughout on purpose: these icons are */ /* injected into arbitrary theme markup (page builders, gallery */ /* grids, portfolio templates) and many themes ship a global */ /* `button { ... }` reset that would otherwise silently override */ /* them, turning a plain icon into a skinned theme button. */ /* */ /* Each group lives directly under (see .gil-overlay-root */ /* below) rather than inside the image's own markup, and is */ /* positioned in JS via getBoundingClientRect() - some themes */ /* rebuild the DOM immediately around a content image (lazy-load */ /* reveal, hover/info overlays, slider re-renders) which would */ /* otherwise wipe out anything placed inside that subtree. top/ */ /* left are set inline per-image by gallery-image-likes.js, not */ /* by the .gil-pos-* classes here. */ /* -------------------------------------------------------------- */ .gil-overlay-root { position: static; } /* -------------------------------------------------------------- */ /* Kalium theme: "Fullscreen" portfolio template ships its own */ /* title/caption bar with a "Click here to show project info" */ /* toggle and (when the theme's Social Sharing option is on) a */ /* like + share panel that expands over the photo. Per site owner's */ /* request, only this plugin's own bare like/share/comment icons */ /* should appear on the photo - so the theme's own bar is hidden */ /* entirely, site-wide, on this one template. This does not affect */ /* any other theme or portfolio layout. */ /* -------------------------------------------------------------- */ .single-portfolio__type-full-screen .single-portfolio__content { display: none !important; } .gil-btn-group.gil-btn-group { all: unset; position: fixed !important; display: flex !important; gap: 4px !important; margin: 0 !important; z-index: 99998 !important; box-sizing: border-box !important; } .gil-btn { all: unset; box-sizing: border-box !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 5px !important; margin: 0 !important; background: none !important; color: #fff !important; border: none !important; border-radius: 50% !important; font-size: 12px !important; font-family: inherit !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; cursor: pointer !important; transition: transform 0.15s ease !important; } .gil-btn:hover { transform: scale(1.12) !important; } .gil-btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; } .gil-btn[disabled] { cursor: default !important; opacity: 0.85 !important; } .gil-icon { width: 22px !important; height: 22px !important; max-width: none !important; max-height: none !important; flex: none !important; fill: var(--gil-icon-color, rgba(255, 255, 255, 0.92)) !important; stroke: rgba(0, 0, 0, 0.45) !important; stroke-width: 0.6 !important; vertical-align: middle; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); transition: fill 0.15s ease, transform 0.2s ease; } /* -------------------------------------------------------------- */ /* Icon size (Settings > Image Likes > Icon size). Medium matches */ /* the plugin's original fixed dimensions exactly, so sites that */ /* never touch this setting see no change. */ /* -------------------------------------------------------------- */ .gil-size-small .gil-btn { padding: 3px !important; font-size: 10px !important; } .gil-size-small .gil-icon { width: 16px !important; height: 16px !important; } .gil-size-small .gil-count { font-size: 10px !important; } .gil-size-medium .gil-btn { padding: 5px !important; font-size: 12px !important; } .gil-size-medium .gil-icon { width: 22px !important; height: 22px !important; } .gil-size-medium .gil-count { font-size: 12px !important; } .gil-size-large .gil-btn { padding: 7px !important; font-size: 14px !important; } .gil-size-large .gil-icon { width: 28px !important; height: 28px !important; } .gil-size-large .gil-count { font-size: 14px !important; } /* -------------------------------------------------------------- */ /* Icon background (Settings > Image Likes > Icon background). */ /* "None" (no class added) is the original bare-icon look and stays */ /* untouched by any of this. The others add a soft, semi-transparent */ /* badge behind each icon - since it now has its own contrast layer, */ /* the drop-shadow used to separate a bare icon from any photo */ /* behind it is switched off so the badge edge stays clean. */ /* -------------------------------------------------------------- */ .gil-shape-circle .gil-btn, .gil-shape-square .gil-btn, .gil-shape-pill .gil-btn { background: rgba(17, 17, 17, 0.5) !important; } .gil-shape-circle .gil-btn { border-radius: 50% !important; } .gil-shape-square .gil-btn { border-radius: 8px !important; } .gil-shape-pill .gil-btn { border-radius: 999px !important; padding-left: 10px !important; padding-right: 10px !important; } .gil-shape-circle .gil-icon, .gil-shape-square .gil-icon, .gil-shape-pill .gil-icon { filter: none !important; } .gil-count { min-width: 1em !important; text-align: left !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; line-height: inherit !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); } /* Like: fills the configured accent colour (Settings > Image Likes) while active - red by default. */ .gil-btn-like.is-liked .gil-icon { fill: var(--gil-like-color, #ff3b47) !important; stroke: rgba(0, 0, 0, 0.25) !important; animation: gil-pop 0.35s ease; } /* Share / Comment: a brief green flash confirms the action landed. */ .gil-btn.gil-flash-success .gil-icon { fill: #34c759 !important; animation: gil-pop 0.35s ease; } @keyframes gil-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } } /* -------------------------------------------------------------- */ /* Modal dialog (Share popup and Comment popup) */ /* -------------------------------------------------------------- */ body.gil-modal-open { overflow: hidden; } .gil-modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 100000 !important; padding: 20px !important; box-sizing: border-box !important; } .gil-modal { position: relative !important; background: #fff !important; color: #222 !important; border-radius: 14px !important; padding: 24px !important; width: 100% !important; max-width: 420px !important; max-height: 85vh !important; overflow-y: auto !important; box-sizing: border-box !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important; font-size: 14px !important; line-height: 1.5 !important; } .gil-modal-close { all: unset; position: absolute !important; top: 12px !important; right: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; cursor: pointer !important; color: #666 !important; } .gil-modal-close:hover { background: rgba(0, 0, 0, 0.06) !important; } .gil-modal-close .gil-icon { width: 16px !important; height: 16px !important; fill: currentColor !important; stroke: none !important; filter: none; } .gil-modal-heading { margin: 0 0 14px !important; padding-right: 24px; font-size: 17px !important; font-weight: 600 !important; } .gil-modal-subheading { margin: 16px 0 8px !important; font-size: 13px !important; font-weight: 600 !important; opacity: 0.75; } .gil-modal-status { margin: 8px 0 !important; font-size: 13px !important; min-height: 1em; } .gil-modal-success { margin: 0 0 10px !important; font-weight: 600 !important; } .gil-modal-link { color: #0073aa !important; text-decoration: underline !important; } .gil-modal-submit, .gil-modal-cancel { all: unset; box-sizing: border-box !important; display: inline-block !important; padding: 9px 20px !important; margin: 4px 8px 0 0 !important; border: none !important; border-radius: 999px !important; font-size: 13px !important; font-family: inherit !important; font-weight: 600 !important; line-height: normal !important; text-align: center !important; cursor: pointer !important; } .gil-modal-submit { background: #222 !important; color: #fff !important; } .gil-modal-cancel { background: rgba(0, 0, 0, 0.06) !important; color: #222 !important; } .gil-modal-submit[disabled] { opacity: 0.6 !important; cursor: default !important; } .gil-comment-fields { display: flex; flex-direction: column; gap: 8px; } .gil-comment-form-row { display: flex; gap: 8px; flex-wrap: wrap; } .gil-comment-fields input, .gil-comment-fields textarea { flex: 1 1 160px; box-sizing: border-box !important; padding: 8px 10px !important; margin: 0 !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; border-radius: 6px !important; font-family: inherit !important; font-size: 13px !important; line-height: normal !important; background: #fff !important; color: #222 !important; } .gil-comment-fields textarea { resize: vertical; width: 100%; } /* -------------------------------------------------------------- */ /* Share modal grid of network buttons */ /* -------------------------------------------------------------- */ .gil-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .gil-share-item { all: unset; box-sizing: border-box !important; display: block !important; width: 100% !important; padding: 10px 12px !important; margin: 0 !important; background: rgba(0, 0, 0, 0.05) !important; border: none !important; border-radius: 8px !important; text-align: center !important; font-size: 13px !important; font-family: inherit !important; line-height: normal !important; cursor: pointer !important; color: #222 !important; } .gil-share-item:hover { background: rgba(0, 0, 0, 0.1) !important; } /* -------------------------------------------------------------- */ /* Photo page: image + like/share stats + self-contained comments */ /* -------------------------------------------------------------- */ .gil-photo-page { max-width: 780px; margin: 0 auto 32px; } .gil-photo-page__img { display: block; width: 100%; height: auto; border-radius: 10px; } .gil-photo-page__stats { display: flex; align-items: center; gap: 20px; margin: 14px 0 24px; font-size: 14px; } .gil-photo-like-btn { all: unset; display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; } .gil-photo-like-btn .gil-icon { width: 24px !important; height: 24px !important; fill: none !important; stroke: #444 !important; stroke-width: 1.6 !important; filter: none; } .gil-photo-like-btn.is-liked .gil-icon { fill: var(--gil-like-color, #ff3b47) !important; stroke: var(--gil-like-color, #ff3b47) !important; animation: gil-pop 0.35s ease; } .gil-photo-like-count, .gil-photo-share-count { font-weight: 600; color: #333; } .gil-comments-app { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 20px; } .gil-comment-status, .gil-comment-empty { opacity: 0.7; font-style: italic; margin: 0 0 12px; } .gil-comment-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; } .gil-comment { display: flex; gap: 10px; } .gil-comment-depth-1, .gil-comment-depth-2, .gil-comment-depth-3 { margin-left: 34px; margin-top: 12px; } .gil-comment-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; } .gil-comment-body { flex: 1; min-width: 0; } .gil-comment-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; } .gil-comment-author { font-weight: 600; } .gil-comment-date { font-size: 12px; opacity: 0.6; } .gil-comment-content { word-break: break-word; margin-bottom: 6px; } .gil-comment-actions { display: flex; align-items: center; gap: 14px; } .gil-comment-like { all: unset; display: inline-flex !important; align-items: center !important; gap: 4px !important; cursor: pointer !important; font-size: 12px !important; color: #666 !important; } .gil-icon-small { width: 14px !important; height: 14px !important; fill: none !important; stroke: #888 !important; stroke-width: 2 !important; filter: none; } .gil-comment-like.is-liked .gil-icon-small { fill: #ff3b47 !important; stroke: #ff3b47 !important; } .gil-comment-reply { all: unset; cursor: pointer !important; font-size: 12px !important; font-weight: 600 !important; color: #666 !important; } .gil-comment-reply:hover, .gil-comment-like:hover { color: #222 !important; } .gil-reply-form-wrap { margin-top: 10px; } .gil-reply-form-actions { display: flex; align-items: center; } .gil-comment-replies:empty { display: none; }