diff --git a/shaarli-pro/tag.cloud.html b/shaarli-pro/tag.cloud.html index 90ea386..ae9a009 100644 --- a/shaarli-pro/tag.cloud.html +++ b/shaarli-pro/tag.cloud.html @@ -1,68 +1,457 @@ - - -{$pageName="tag.cloud"} -{include="includes"} - - -{include="page.header"} + -{include="tag.sort"} + + {$pageName="tag.cloud"} + {include="includes"} + -
-
- {loop="$plugin_start_zone"} - {$value} - {/loop} -
+ + {include="page.header"} -
-
{'Tag Cloud'|t}
-
-
- {loop="$tags"} - {$key} - {$value.count} - {loop="$value.tag_plugin"} - {$value} - {/loop} + {include="tag.sort"} + +
+
+ {loop="$plugin_start_zone"} + {$value} + {/loop} +
+ +
+
{'Tag Cloud'|t}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ {loop="$tags"} + + {$key} + {$value.count} + {loop="$value.tag_plugin"} + {$value} + {/loop} + + {/loop} +
+ + + +
+
+ +
+ {loop="$plugin_end_zone"} + {$value} {/loop}
-
-
- {loop="$plugin_end_zone"} - {$value} - {/loop} -
-
+ -{include="page.footer"} - - + .alphabet-filter::-webkit-scrollbar { + display: none; + } + + .alpha-btn { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 34px; + height: 34px; + padding: 0; + font-size: 0.8rem; + font-weight: 600; + font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; + letter-spacing: 0.02em; + color: rgba(148, 163, 184, 0.8); + background: transparent; + border: none; + border-radius: 50%; + cursor: pointer; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 1; + } + + .alpha-btn::before { + content: ''; + position: absolute; + inset: 2px; + border-radius: 50%; + background: transparent; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + z-index: -1; + } + + .alpha-btn:hover:not(.disabled) { + color: #fff; + } + + .alpha-btn:hover:not(.disabled)::before { + background: rgba(99, 102, 241, 0.25); + } + + .alpha-btn.active { + color: #fff; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + } + + .alpha-btn.active::before { + background: linear-gradient(135deg, #5b8def 0%, #6366f1 100%); + box-shadow: + 0 2px 10px rgba(91, 141, 239, 0.5), + 0 0 20px rgba(99, 102, 241, 0.3); + } + + .alpha-btn.disabled { + color: rgba(100, 116, 139, 0.3); + cursor: not-allowed; + } + + .alpha-btn.disabled:hover::before { + background: transparent; + } + + /* ALL button special styling */ + .alpha-btn[data-letter="ALL"] { + min-width: 48px; + font-size: 0.7rem; + letter-spacing: 0.08em; + border-radius: 20px; + margin-right: 0.25rem; + } + + .alpha-btn[data-letter="ALL"]::before { + border-radius: 18px; + } + + /* Separator after ALL and # */ + .alpha-btn[data-letter="ALL"]::after, + .alpha-btn[data-letter="#"]::after { + content: ''; + position: absolute; + right: -4px; + top: 50%; + transform: translateY(-50%); + width: 1px; + height: 18px; + background: rgba(99, 102, 241, 0.2); + } + + .alpha-btn[data-letter="#"] { + margin-right: 0.25rem; + } + + /* Tag Cloud - Premium Design */ + .tag-cloud { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 1rem; + padding: 1rem 0; + } + + .tag-item { + position: relative; + display: inline-flex; + transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); + } + + .tag-item:hover { + transform: translateY(-2px) scale(1.02); + z-index: 10; + } + + .tag-item.hidden { + display: none; + } + + .cloud-tag { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5em 1em; + font-weight: 500; + color: #e2e8f0; + background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%); + border: 1px solid rgba(99, 102, 241, 0.15); + border-radius: 25px; + text-decoration: none; + white-space: nowrap; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + } + + .cloud-tag:hover { + color: #fff; + background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(91, 141, 239, 0.2) 100%); + border-color: rgba(99, 102, 241, 0.5); + text-decoration: none; + box-shadow: + 0 4px 16px rgba(99, 102, 241, 0.3), + 0 0 20px rgba(99, 102, 241, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + } + + /* Count Badge - Positioned at top-right corner */ + .count-badge { + position: absolute; + top: -6px; + right: -6px; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 5px; + font-size: 0.65rem; + font-weight: 600; + color: #fff; + background: linear-gradient(135deg, #5b8def 0%, #6366f1 100%); + border-radius: 10px; + box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4); + transition: all 0.25s ease; + z-index: 2; + } + + /* Large count badge for popular tags */ + .tag-item:hover .count-badge { + transform: scale(1.1); + box-shadow: 0 3px 10px rgba(99, 102, 241, 0.5); + } + + /* Size variations for visual hierarchy - keeping font-size from template */ + .cloud-tag[style*="font-size:1"] { + padding: 0.4em 0.8em; + } + + .cloud-tag[style*="font-size:2"], + .cloud-tag[style*="font-size:3"], + .cloud-tag[style*="font-size:4"] { + padding: 0.5em 1.2em; + border-width: 1.5px; + } + + /* Featured tags (largest) get special treatment */ + .cloud-tag[style*="font-size:4"], + .cloud-tag[style*="font-size:5"] { + background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(30, 41, 59, 0.9) 100%); + border-color: rgba(99, 102, 241, 0.3); + } + + /* No tags message */ + .no-tags-message { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem; + color: var(--text-muted); + text-align: center; + gap: 0.5rem; + } + + .no-tags-message i { + font-size: 2.5rem; + opacity: 0.5; + } + + .no-tags-message span { + font-size: 0.95rem; + } + + /* Responsive adjustments */ + @media (max-width: 992px) { + .alphabet-filter { + justify-content: flex-start; + padding: 0.3rem 0.5rem; + margin-left: -1rem; + margin-right: -1rem; + border-radius: 0; + border-left: none; + border-right: none; + } + + .alpha-btn { + min-width: 30px; + height: 30px; + font-size: 0.75rem; + } + + .alpha-btn[data-letter="ALL"] { + min-width: 42px; + } + } + + @media (max-width: 576px) { + .alpha-btn { + min-width: 28px; + height: 28px; + font-size: 0.7rem; + } + + .alpha-btn[data-letter="ALL"] { + min-width: 38px; + font-size: 0.65rem; + } + } + + + + + {include="page.footer"} + + + \ No newline at end of file