MediaWiki:Test.css: различия между версиями

Версия от 09:56, 24 августа 2025

#ss-art-gallery.ss-wrap{--ss-bg:#0e0f14;--ss-fg:#e9e9e9;--ss-muted:#a9b0bd;--ss-accent:#dca01b;--ss-card:#171a21;--ss-ring:#2b3241;--ss-chip:#1e2330;--ss-shadow:0 10px 28px rgba(0,0,0,.4);background:var(--ss-bg);color:var(--ss-fg);padding:20px;border-radius:18px;font-family:"Segoe UI",sans-serif}
#ss-art-gallery .ss-header{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;text-align:center}
#ss-art-gallery .ss-title{font-size:30px;line-height:1.2;font-weight:700;color:var(--ss-accent)}
#ss-art-gallery .ss-sub{font-size:15px;color:var(--ss-muted)}
#ss-art-gallery .ss-filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
#ss-art-gallery .ss-chip{user-select:none;cursor:pointer;background:var(--ss-chip);padding:8px 14px;border-radius:999px;border:1px solid var(--ss-ring);box-shadow:var(--ss-shadow);font-size:13px;transition:all .2s ease}
#ss-art-gallery .ss-chip:hover{background:var(--ss-accent);color:#000}
#ss-art-gallery .ss-chip-active{border-color:var(--ss-accent);background:var(--ss-accent);color:#000}
#ss-art-gallery .ss-section{margin:24px 0}
#ss-art-gallery .ss-section-title{font-size:22px;font-weight:700;margin:10px 0 14px;text-align:left;color:var(--ss-accent)}
#ss-art-gallery .ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
#ss-art-gallery .ss-card{background:var(--ss-card);border:1px solid var(--ss-ring);border-radius:16px;box-shadow:var(--ss-shadow);padding:12px;display:flex;flex-direction:column;gap:10px;transform:translateZ(0);transition:transform .2s ease,border-color .2s ease}
#ss-art-gallery .ss-card:hover{transform:translateY(-4px);border-color:var(--ss-accent)}
#ss-art-gallery .ss-card-title{font-size:15px;color:var(--ss-muted);text-align:center}
#ss-art-gallery .ss-card img{width:100%!important;height:auto!important;border-radius:12px;display:block}
#ss-art-gallery .ss-hidden{display:none!important}
#ss-art-gallery .ss-modal{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999}
#ss-art-gallery .ss-modal.open{display:flex}
#ss-art-gallery .ss-modal-inner{max-width:92vw;max-height:92vh;animation:ss-fade .25s ease}
#ss-art-gallery .ss-modal-img{max-width:92vw;max-height:92vh;border-radius:14px;box-shadow:0 0 24px rgba(0,0,0,.7)}
#ss-art-gallery .ss-modal-close{position:fixed;top:16px;right:18px;background:var(--ss-chip);border:1px solid var(--ss-ring);padding:8px 14px;border-radius:10px;cursor:pointer;transition:all .2s ease}
#ss-art-gallery .ss-modal-close:hover{background:var(--ss-accent);color:#000}
@keyframes ss-fade{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}