diff options
Diffstat (limited to 'frontend/src/components/FeedListVariants.css')
| -rw-r--r-- | frontend/src/components/FeedListVariants.css | 342 |
1 files changed, 0 insertions, 342 deletions
diff --git a/frontend/src/components/FeedListVariants.css b/frontend/src/components/FeedListVariants.css deleted file mode 100644 index e97ea95..0000000 --- a/frontend/src/components/FeedListVariants.css +++ /dev/null @@ -1,342 +0,0 @@ -/* Glass Variant */ -.feed-list.variant-glass { - background: rgba(255, 255, 255, 0.05); - /* Very subtle tint */ - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-right: 1px solid rgba(255, 255, 255, 0.1); - padding: 1.5rem; - font-family: system-ui, -apple-system, sans-serif; - /* Modern sans */ - color: var(--text-color); -} - -.feed-list.variant-glass .logo { - font-size: 1.5rem; - background: transparent !important; - /* Override sticky bg */ - margin-bottom: 2rem; - opacity: 0.8; -} - -.feed-list.variant-glass .section-header { - font-size: 0.75rem; - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--text-color); - opacity: 0.5; - margin-top: 2rem; - font-weight: 600; -} - -.feed-list.variant-glass a, -.feed-list.variant-glass .feed-title, -.feed-list.variant-glass .tag-link { - padding: 0.4rem 0.8rem; - margin: 0.2rem 0; - border-radius: 8px; - transition: all 0.2s ease; - font-weight: 500; - text-decoration: none !important; - /* No underlines in glass */ - color: var(--text-color); - opacity: 0.8; - border: none; - /* No default borders */ -} - -.feed-list.variant-glass a:hover, -.feed-list.variant-glass .feed-title:hover, -.feed-list.variant-glass .tag-link:hover { - background: rgba(255, 255, 255, 0.1); - opacity: 1; - transform: translateX(4px); - color: var(--text-color); -} - -.feed-list.variant-glass a.active, -.feed-list.variant-glass .feed-title.active, -.feed-list.variant-glass .tag-link.active { - background: rgba(255, 255, 255, 0.25); - color: var(--text-color); - font-weight: 700; - opacity: 1; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); -} - -.feed-list.variant-glass .search-input { - border-radius: 20px; - background: rgba(0, 0, 0, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - color: var(--text-color); - padding: 0.5rem 1rem; -} - -.feed-list.variant-glass .nav-section { - border-top: 1px solid rgba(255, 255, 255, 0.1); - margin-top: 2rem; - padding-top: 1.5rem; -} - -.feed-list.variant-glass .nav-link, -.feed-list.variant-glass .logout-link { - opacity: 0.6; - padding: 0.5rem 0.8rem; - border-radius: 8px; -} - -.feed-list.variant-glass .nav-link:hover, -.feed-list.variant-glass .logout-link:hover { - background: rgba(255, 255, 255, 0.05); - opacity: 1; - text-decoration: none; -} - -.feed-list.variant-glass .theme-selector button { - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 12px; -} - -.feed-list.variant-glass .theme-selector button.active { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.3); -} - - -/* Nano Banana Variant (Playful/Pop) */ -.feed-list.variant-banana { - background: #fdfdfd; - padding: 1rem; - font-family: 'Poppins', 'Verdana', sans-serif; - border-right: none; - box-shadow: 4px 0 24px rgba(0, 0, 0, 0.04); -} - -.theme-dark .feed-list.variant-banana { - background: #111; -} - -.feed-list.variant-banana .logo { - font-size: 2.5rem; - text-shadow: 2px 2px 0px #FFD700; - /* Banana yellow shadow */ - background: transparent; - transform: rotate(-3deg); - display: inline-block; - margin-bottom: 2rem; -} - -.feed-list.variant-banana .section-header { - background: #FFD700; - color: #000; - display: inline-block; - padding: 0.2rem 0.5rem; - transform: skew(-10deg); - font-size: 0.8rem; - font-weight: 800; - margin-bottom: 1rem; - border-radius: 4px; -} - -.feed-list.variant-banana .search-input { - border: 2px solid #000; - border-radius: 8px; - box-shadow: 2px 2px 0px #000; - transition: all 0.2s; -} - -.feed-list.variant-banana .search-input:focus { - transform: translate(1px, 1px); - box-shadow: 1px 1px 0px #000; - outline: none; -} - -.theme-dark .feed-list.variant-banana .search-input { - border-color: #fff; - box-shadow: 2px 2px 0px #fff; - background: #222; - color: #fff; -} - -.feed-list.variant-banana a, -.feed-list.variant-banana .feed-title, -.feed-list.variant-banana .tag-link { - border: 1px solid transparent; - padding: 0.5rem; - border-radius: 8px; - transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); - font-weight: 600; - text-decoration: none !important; - color: var(--text-color); -} - -.feed-list.variant-banana a:hover, -.feed-list.variant-banana .feed-title:hover, -.feed-list.variant-banana .tag-link:hover { - transform: scale(1.05) rotate(1deg); - background: #fff9c4; - /* Light yellow */ - color: #000; - box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); -} - -.theme-dark .feed-list.variant-banana a:hover, -.theme-dark .feed-list.variant-banana .feed-title:hover, -.theme-dark .feed-list.variant-banana .tag-link:hover { - background: #333; - color: #FFD700; -} - - -.feed-list.variant-banana a.active, -.feed-list.variant-banana .feed-title.active, -.feed-list.variant-banana .tag-link.active { - background: #FFD700; - color: #000 !important; - transform: scale(1.02); - box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1); - border: 2px solid #000; -} - -.feed-list.variant-banana .nav-section { - border-top: 2px dashed #FFD700; - margin-top: 2rem; - padding-top: 1rem; -} - -.feed-list.variant-banana .theme-selector button { - border: 2px solid #000; - box-shadow: 2px 2px 0px #000; - border-radius: 4px; -} - -.feed-list.variant-banana .theme-selector button.active { - background: #FFD700; - transform: translate(1px, 1px); - box-shadow: 1px 1px 0px #000; -} - - -/* Type Variant (Swiss/Bold) */ -.feed-list.variant-type { - background: var(--bg-color); - padding: 2rem 1rem; - font-family: 'Helvetica Neue', 'Arial', sans-serif; - border-right: 4px solid var(--text-color); -} - -.feed-list.variant-type .logo { - font-size: 3rem; - letter-spacing: -2px; - font-weight: 900; - background: transparent; - line-height: 0.8; - margin-bottom: 3rem; - color: var(--text-color); -} - -.feed-list.variant-type .section-header { - font-size: 1.2rem; - font-weight: 900; - border-bottom: 2px solid var(--text-color); - padding-bottom: 0.5rem; - margin-top: 3rem; - margin-bottom: 1rem; - letter-spacing: -0.5px; - color: var(--text-color); -} - -.feed-list.variant-type a, -.feed-list.variant-type .feed-title, -.feed-list.variant-type .tag-link { - font-size: 1rem; - font-weight: 700; - text-decoration: none !important; - border-left: 0px solid var(--text-color); - padding-left: 0; - transition: padding-left 0.2s, border-left-width 0.2s; - opacity: 0.6; - color: var(--text-color); - padding: 0.5rem 0; - display: block; -} - -.feed-list.variant-type a:hover, -.feed-list.variant-type .feed-title:hover, -.feed-list.variant-type .tag-link:hover { - padding-left: 1rem; - border-left: 4px solid var(--text-color); - opacity: 1; - color: var(--text-color); -} - -.feed-list.variant-type a.active, -.feed-list.variant-type .feed-title.active, -.feed-list.variant-type .tag-link.active { - padding-left: 1rem; - border-left: 8px solid var(--text-color); - opacity: 1; - color: var(--text-color); -} - -.feed-list.variant-type .search-input { - border: none; - border-bottom: 2px solid var(--text-color); - background: transparent; - border-radius: 0; - padding: 1rem 0; - font-weight: bold; - font-size: 1.2rem; -} - -.feed-list.variant-type .search-input:focus { - outline: none; - border-bottom-width: 4px; -} -.feed-list.variant-type .nav-section { - border-top: 4px solid var(--text-color); - margin-top: 4rem; - padding-top: 1rem; -} - -.feed-list.variant-type .nav-link, -.feed-list.variant-type .logout-link { - font-size: 1.2rem; - font-weight: 900; -} - -.feed-list.variant-type .theme-selector button { - border-radius: 0; - border: 2px solid var(--text-color); - background: transparent; -} - -.feed-list.variant-type .theme-selector button.active { - background: var(--text-color); - color: var(--bg-color); -} - -.feed-list.variant-type .nav-section { - border-top: 4px solid var(--text-color); - margin-top: 4rem; - padding-top: 1rem; -} - -.feed-list.variant-type .nav-link, -.feed-list.variant-type .logout-link { - font-size: 1.2rem; - font-weight: 900; -} - -.feed-list.variant-type .theme-selector button { - border-radius: 0; - border: 2px solid var(--text-color); - background: transparent; -} - -.feed-list.variant-type .theme-selector button.active { - background: var(--text-color); - color: var(--bg-color); -} |
