diff --git a/pluginHolder/templates/pluginHolder/plugins.html b/pluginHolder/templates/pluginHolder/plugins.html index 98f195e29..f176e3477 100644 --- a/pluginHolder/templates/pluginHolder/plugins.html +++ b/pluginHolder/templates/pluginHolder/plugins.html @@ -826,6 +826,71 @@ border-radius: 8px; } + /* Collapsible Category Filter for Grid/Table (installed view) - same style as A-Å filter */ + .installed-category-filter-wrapper { + margin-top: 12px; + margin-bottom: 0; + } + .installed-category-toggle-btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + border: 1px solid var(--border-primary, #e8e9ff); + background: var(--bg-primary, white); + border-radius: 8px; + font-size: 13px; + font-weight: 600; + color: var(--text-secondary, #64748b); + cursor: pointer; + transition: all 0.2s; + } + .installed-category-toggle-btn:hover { + background: var(--bg-hover, #f8f9ff); + border-color: #5856d6; + color: #5856d6; + } + .installed-category-toggle-btn[aria-expanded="true"] .installed-category-chevron { + transform: rotate(180deg); + } + .installed-category-chevron { + font-size: 10px; + transition: transform 0.2s; + } + .installed-category-filter { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 12px; + padding: 15px; + background: var(--bg-secondary, #f8f9ff); + border-radius: 8px; + } + .installed-category-btn { + padding: 6px 12px; + border: 1px solid var(--border-primary, #e8e9ff); + background: var(--bg-primary, white); + border-radius: 6px; + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; + color: var(--text-secondary, #64748b); + display: inline-flex; + align-items: center; + gap: 6px; + } + .installed-category-btn:hover { + background: var(--bg-hover, #f0f1ff); + border-color: #5856d6; + color: #5856d6; + } + .installed-category-btn.active { + background: #5856d6; + color: white; + border-color: #5856d6; + } + .alpha-btn { padding: 6px 12px; border: 1px solid var(--border-primary, #e8e9ff); @@ -1263,6 +1328,26 @@ + +