MediaWiki:Gadget-Gallery.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/* ── Gallery gadget — Instagram-style grid ───────────────────────── */

/* ── Full gallery grid ───────────────────────────────────────────── */
.gal-grid {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 4px;
    margin-top: 1.2em;
}
@media ( max-width: 600px ) { .gal-grid { grid-template-columns: repeat( 2, 1fr ); } }

.gal-item {
    aspect-ratio: 1;
    display: block;
    overflow: hidden;
    position: relative;
    background: #111;
}
.gal-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.25s, opacity 0.25s;
    display: block;
}
.gal-item:hover img { transform: scale( 1.06 ); opacity: 0.85; }

/* ── Upload drop zone ────────────────────────────────────────────── */
#gal-drop {
    border: 2px dashed #c8d0da;
    border-radius: 14px;
    padding: 2em 1em;
    text-align: center;
    background: #f7f8fb;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
#gal-drop.gal-dragover { border-color: #4a7fa5; background: #eef4fb; }

.gal-drop-inner { pointer-events: none; }
.gal-drop-icon  { font-size: 2.4em; display: block; margin-bottom: 0.3em; }
.gal-drop-sub   { font-size: 0.88em; color: #777; margin: 0.3em 0 0; }
.gal-browse     { color: #4a7fa5; text-decoration: underline; cursor: pointer; pointer-events: all; }
#gal-file-input { display: none; }

#gal-status     { margin-top: 0.6em; min-height: 1.4em; }
.gal-progress   { color: #555; font-size: 0.9em; }
.gal-ok         { color: #38a169; font-weight: 600; }
.gal-err        { color: #e53e3e; font-size: 0.9em; }
.gal-loading,
.gal-empty      { color: #888; padding: 2em; text-align: center; font-size: 0.95em; }

/* ── Homepage widget ─────────────────────────────────────────────── */
.gal-widget-grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: 4px;
    margin-bottom: 0.7em;
}
.gal-widget-item {
    aspect-ratio: 1;
    display: block;
    overflow: hidden;
    background: #111;
    border-radius: 3px;
}
.gal-widget-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.22s, opacity 0.22s;
    display: block;
}
.gal-widget-item:hover img { transform: scale( 1.08 ); opacity: 0.85; }

.gal-widget-more {
    display: inline-block;
    font-size: 0.85em;
    color: #4a7fa5;
    text-decoration: none;
    font-weight: 500;
}
.gal-widget-more:hover { text-decoration: underline; }
.gal-widget-empty { font-size: 0.88em; color: #999; margin: 0 0 0.4em; }

/* Dark theme adjustments */
html.theme-dark #gal-drop        { background: #252836; border-color: #2d3748; }
html.theme-dark #gal-drop.gal-dragover { border-color: #4a9edd; background: #1a2535; }
html.theme-dark .gal-drop-sub    { color: #718096; }
html.theme-dark .gal-widget-item { background: #252836; }
html.theme-dark .gal-item        { background: #252836; }
.gal-rename-note { font-size: 0.82em; color: #805ad5; display: block; margin-top: 0.3em; }