status-wall-theme 1.2.0 → 1.2.2

data/assets/themes/gamer.css

@@ -0,0 +1,416 @@
+/* ============================================
+   GAMER THEME - RGB Neon Style
+   For Status Wall
+   ============================================ */
+
+:root {
+    /* ============================================
+       BASE COLORS (Dark + Neon)
+       ============================================ */
+    --bg-color: #0a0a0f;              /* Deep dark background */
+    --card-bg: #12121a;               /* Card background */
+    --text-color: #ffffff;            /* Bright white text */
+    --meta-color: #8888aa;            /* Muted purple-gray */
+    --accent-color: #00ff88;          /* Neon green (primary RGB) */
+    --border-color: #1a1a2e;          /* Dark border */
+    
+    /* Secondary RGB colors for variety */
+    --rgb-pink: #ff0055;
+    --rgb-blue: #00d4ff;
+    --rgb-purple: #bd00ff;
+    --rgb-green: #00ff88;
+    
+    /* ============================================
+       SHADOWS & GLOW (Neon Effects)
+       ============================================ */
+    --shadow: 0 0 10px rgba(0, 255, 136, 0.1);
+    --shadow-hover: 0 0 25px rgba(0, 255, 136, 0.3);
+    --header-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
+    --mood-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+    
+    /* ============================================
+       BORDERS & CORNERS (Sharp, Tech Look)
+       ============================================ */
+    --card-border-radius: 4px;        /* Sharp corners */
+    --sidebar-card-radius: 4px;
+    --card-border: 1px solid #1a1a2e;
+    --card-border-hover: 1px solid #00ff88;
+    --sidebar-card-border: 1px solid #1a1a2e;
+    --header-border: 2px solid #00d4ff;
+    --avatar-border: 3px solid #00ff88;
+    
+    /* ============================================
+       ACCENT BORDERS (RGB Stripes)
+       ============================================ */
+    --post-top-border: 3px solid #00ff88;
+    --post-left-border: none;
+    --post-accent-width: 3px;
+    --header-accent: 2px solid #00d4ff;
+    
+    /* ============================================
+       SPACING
+       ============================================ */
+    --card-padding: 25px;
+    --card-margin: 25px;
+    --sidebar-gap: 30px;
+    
+    /* ============================================
+       TYPOGRAPHY (Tech/Gaming Fonts)
+       ============================================ */
+    --font-main: 'Segoe UI', 'Roboto', -apple-system, sans-serif;
+    --font-mono: 'Consolas', 'Courier New', monospace;
+    --font-size-base: 16px;
+    --line-height: 1.7;
+    
+    /* ============================================
+       LINKS & BUTTONS (Neon Hover)
+       ============================================ */
+    --link-color: #00d4ff;
+    --link-hover-color: #00ff88;
+    --link-decoration: none;
+    --link-hover-decoration: none;
+    
+    --btn-bg: transparent;
+    --btn-border: 1px solid #1a1a2e;
+    --btn-hover-bg: #00ff88;
+    --btn-hover-text: #0a0a0f;
+    
+    /* ============================================
+       ANIMATIONS (Smooth RGB Transitions)
+       ============================================ */
+    --transition-speed: 0.3s;
+    --hover-transform: translateY(-4px);
+    
+    /* ============================================
+       MOOD INDICATORS (Glowing Dots)
+       ============================================ */
+    --mood-size: 12px;
+    
+    /* ============================================
+       CALLOUT COLORS (RGB Variants)
+       ============================================ */
+    --callout-note: #00d4ff;          /* Cyan */
+    --callout-tip: #00ff88;           /* Green */
+    --callout-warning: #ffaa00;       /* Orange */
+    --callout-danger: #ff0055;        /* Pink/Red */
+    
+    /* ============================================
+       SIDEBAR CARDS
+       ============================================ */
+    --sidebar-card-bg: #12121a;
+    
+    /* ============================================
+       SCROLLBAR (RGB Styled)
+       ============================================ */
+    --scrollbar-width: 10px;
+    --scrollbar-track: #0a0a0f;
+    --scrollbar-thumb: #00ff88;
+    --scrollbar-thumb-hover: #00d4ff;
+}
+
+/* ============================================
+   BASE STYLES
+   ============================================ */
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    font-family: var(--font-main);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height);
+    background-image: 
+        radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.03) 0%, transparent 50%),
+        radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.03) 0%, transparent 50%);
+}
+
+/* ============================================
+   GAMER-SPECIFIC EFFECTS
+   ============================================ */
+
+/* --- RGB Border Animation on Cards --- */
+.status-card {
+    position: relative;
+    background: var(--card-bg);
+    border: var(--card-border);
+    border-radius: var(--card-border-radius);
+    border-top: var(--post-top-border);
+    box-shadow: var(--shadow);
+    padding: var(--card-padding);
+    margin-bottom: var(--card-margin);
+    transition: transform var(--transition-speed) ease, 
+                box-shadow var(--transition-speed) ease,
+                border-color var(--transition-speed) ease;
+    overflow: hidden;
+}
+
+.status-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
+    transition: left 0.5s ease;
+}
+
+.status-card:hover::before {
+    left: 100%;
+}
+
+.status-card:hover {
+    transform: var(--hover-transform);
+    box-shadow: var(--shadow-hover);
+    border: var(--card-border-hover);
+}
+
+/* --- Profile Header with Glow --- */
+.profile-header {
+    background: linear-gradient(135deg, #12121a 0%, #1a1a2e 100%);
+    border: var(--header-border);
+    border-radius: var(--card-border-radius);
+    box-shadow: var(--header-shadow);
+    position: relative;
+}
+
+.profile-header::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(45deg, #00ff88, #00d4ff, #bd00ff, #ff0055);
+    border-radius: var(--card-border-radius);
+    z-index: -1;
+    opacity: 0.3;
+    filter: blur(10px);
+}
+
+.profile-header .avatar img {
+    border: var(--avatar-border);
+    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
+}
+
+/* --- Sidebar Cards with RGB Accent --- */
+.featured-image-card,
+.pinned-post-card {
+    background: var(--sidebar-card-bg);
+    border: var(--sidebar-card-border);
+    border-radius: var(--sidebar-card-radius);
+    position: relative;
+}
+
+.featured-image-card:hover,
+.pinned-post-card:hover {
+    border-color: var(--rgb-blue);
+    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
+}
+
+/* --- Neon Buttons --- */
+.share-btn {
+    background: var(--btn-bg);
+    border: var(--btn-border);
+    color: var(--meta-color);
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 0.75rem;
+    transition: all var(--transition-speed) ease;
+}
+
+.share-btn:hover {
+    background: var(--btn-hover-bg);
+    color: var(--btn-hover-text);
+    border-color: var(--accent-color);
+    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
+}
+
+/* --- Glowing Links --- */
+a {
+    color: var(--link-color);
+    text-decoration: var(--link-decoration);
+    transition: color var(--transition-speed) ease;
+}
+
+a:hover {
+    color: var(--link-hover-color);
+    text-decoration: var(--link-hover-decoration);
+    text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
+}
+
+/* --- Pulsing Mood Indicators --- */
+.mood-indicator {
+    width: var(--mood-size);
+    height: var(--mood-size);
+    box-shadow: var(--mood-shadow);
+    animation: gamerPulse 2s infinite;
+}
+
+@keyframes gamerPulse {
+    0%, 100% { 
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% { 
+        transform: scale(1.3);
+        opacity: 0.8;
+    }
+}
+
+/* --- RGB Callouts --- */
+.status-content blockquote.callout-note {
+    border-left: 4px solid var(--callout-note) !important;
+    background: rgba(0, 212, 255, 0.1) !important;
+    box-shadow: 0 0 10px rgba(0, 212, 255, 0.1);
+}
+
+.status-content blockquote.callout-tip {
+    border-left: 4px solid var(--callout-tip) !important;
+    background: rgba(0, 255, 136, 0.1) !important;
+    box-shadow: 0 0 10px rgba(0, 255, 136, 0.1);
+}
+
+.status-content blockquote.callout-warning {
+    border-left: 4px solid var(--callout-warning) !important;
+    background: rgba(255, 170, 0, 0.1) !important;
+    box-shadow: 0 0 10px rgba(255, 170, 0, 0.1);
+}
+
+.status-content blockquote.callout-danger {
+    border-left: 4px solid var(--callout-danger) !important;
+    background: rgba(255, 0, 85, 0.1) !important;
+    box-shadow: 0 0 10px rgba(255, 0, 85, 0.1);
+}
+
+/* --- Custom RGB Scrollbar --- */
+::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #00ff88, #00d4ff, #bd00ff);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #00d4ff, #bd00ff, #ff0055);
+}
+
+/* --- Code Blocks (Terminal Style) --- */
+.status-content pre {
+    background: #0d0d12 !important;
+    border: 1px solid #1a1a2e;
+    border-left: 3px solid #00ff88;
+    box-shadow: 0 0 10px rgba(0, 255, 136, 0.1);
+}
+
+.status-content code {
+    font-family: var(--font-mono);
+    color: #00ff88;
+}
+
+.status-content p code,
+.status-content li code {
+    background: #12121a;
+    color: #00d4ff;
+    border: 1px solid #1a1a2e;
+}
+
+/* --- Pinned Posts with Glow Effect --- */
+.pinned-post-card {
+    position: relative;
+}
+
+.pinned-post-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--sidebar-card-radius);
+    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
+    opacity: 0;
+    transition: opacity var(--transition-speed) ease;
+    pointer-events: none;
+    z-index: -1;
+}
+
+.pinned-post-card:hover::before {
+    opacity: 1;
+}
+
+.pinned-post-card .pinned-label {
+    background: linear-gradient(90deg, #00ff88, #00d4ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 700;
+}
+
+/* --- Footer with RGB Line --- */
+footer {
+    border-top: 1px solid #1a1a2e;
+    padding-top: 20px;
+    position: relative;
+}
+
+footer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100px;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, #00ff88, transparent);
+}
+
+/* ============================================
+   OPTIONAL: EXTRA GAMER EFFECTS
+   Uncomment for more intense RGB!
+   ============================================ */
+
+/* --- Scanline Effect (Retro Gaming) --- */
+/*
+body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: repeating-linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.1) 0px,
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px,
+        transparent 2px
+    );
+    pointer-events: none;
+    z-index: 9999;
+}
+*/
+
+/* --- Floating Particles (Advanced) --- */
+/*
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+.status-card {
+    animation: float 3s ease-in-out infinite;
+}
+*/
+
+/* --- RGB Text Glow on Hover --- */
+/*
+.status-card:hover .status-title {
+    text-shadow: 0 0 10px var(--accent-color);
+}
+*/

data/assets/themes/minimal.css

@@ -0,0 +1,89 @@
+:root {
+    /* === Base Colors === */
+    --bg-color: #ffffff;
+    --card-bg: #ffffff;
+    --text-color: #242424;
+    --meta-color: #666666;
+    --accent-color: #000000;
+    --border-color: #eaeaea;
+    
+    /* === Shadows & Depth === */
+    --shadow: none;
+    --shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
+    --header-shadow: none;
+    --mood-shadow: none;
+    
+    /* === Borders & Corners === */
+    --card-border-radius: 0px;
+    --sidebar-card-radius: 0px;
+    --card-border: 1px solid #eaeaea;
+    --card-border-hover: 1px solid #000000;
+    --sidebar-card-border: 1px solid #eaeaea;
+    --header-border: 1px solid #eaeaea;
+    --avatar-border: 2px solid #000000;
+    
+    /* === Accent Borders === */
+    --post-top-border: none;
+    --post-left-border: 4px solid #000000;
+    --header-accent: none;
+    
+    /* === Spacing === */
+    --card-padding: 30px;
+    --card-margin: 30px;
+    --sidebar-gap: 40px;
+    
+    /* === Typography === */
+    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    --line-height: 1.8;
+    
+    /* === Links & Buttons === */
+    --link-color: #000000;
+    --link-hover-color: #666666;
+    --link-decoration: underline;
+    --link-hover-decoration: none;
+    
+    --btn-bg: transparent;
+    --btn-border: 1px solid #eaeaea;
+    --btn-hover-bg: #000000;
+    --btn-hover-text: #ffffff;
+    
+    /* === Animations === */
+    --transition-speed: 0.2s;
+    --hover-transform: translateY(-2px);
+    
+    /* === Mood === */
+    --mood-size: 8px;
+    
+    /* === Callouts (Monochrome) === */
+    --callout-note: #242424;
+    --callout-tip: #242424;
+    --callout-warning: #242424;
+    --callout-danger: #242424;
+    
+    /* === Sidebar === */
+    --sidebar-card-bg: #ffffff;
+    
+    /* === Scrollbar === */
+    --scrollbar-width: 6px;
+    --scrollbar-track: #ffffff;
+    --scrollbar-thumb: #000000;
+    --scrollbar-thumb-hover: #666666;
+}
+
+/* Minimal Specific Overrides */
+body {
+    background-color: var(--bg-color);
+    background-image: none;
+}
+
+/* Remove gradients/shadows for pure flat look */
+.profile-header {
+    background: var(--card-bg);
+    box-shadow: none;
+    border-bottom: 2px solid #000;
+}
+
+/* Stronger hover state for minimal feedback */
+.status-card:hover {
+    border-color: #000;
+}

data/assets/themes/ocean.css

@@ -0,0 +1,30 @@
+:root {
+    --bg-color: #e0f7fa;
+    --card-bg: #ffffff;
+    --text-color: #006064;
+    --meta-color: #00838f;
+    --accent-color: #00acc1;
+    --border-color: #b2ebf2;
+    --shadow: 0 1px 2px rgba(0,172,193,0.1);
+    --shadow-hover: 0 6px 12px rgba(0,172,193,0.2);
+
+    /* Add callout colors */
+    --callout-note: #2d88ff;
+    --callout-tip: #00c853;
+    --callout-warning: #ff9800;
+    --callout-danger: #f44336;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+/* Ocean-specific accents */
+.profile-header {
+    border-top: 3px solid var(--accent-color);
+}
+
+.status-card {
+    border-left: 3px solid var(--accent-color);
+}

data/assets/themes/slate.css

@@ -0,0 +1,88 @@
+:root {
+    /* === Base Colors (Cool Blues/Grays) === */
+    --bg-color: #f8f9fa;
+    --card-bg: #ffffff;
+    --text-color: #1a1a1a;
+    --meta-color: #6c757d;
+    --accent-color: #0d6efd;
+    --border-color: #dee2e6;
+    
+    /* === Shadows & Depth (Structured) === */
+    --shadow: 0 2px 4px rgba(0,0,0,0.05);
+    --shadow-hover: 0 8px 16px rgba(13, 110, 253, 0.15);
+    --header-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    --mood-shadow: 0 0 0 2px #e9ecef;
+    
+    /* === Borders & Corners (Clean) === */
+    --card-border-radius: 8px;
+    --sidebar-card-radius: 8px;
+    --card-border: 1px solid #e9ecef;
+    --card-border-hover: 1px solid #0d6efd;
+    --sidebar-card-border: 1px solid #e9ecef;
+    --header-border: 1px solid #e9ecef;
+    --avatar-border: 3px solid #ffffff;
+    
+    /* === Accent Borders === */
+    --post-top-border: 3px solid #0d6efd;
+    --post-left-border: none;
+    --header-accent: 3px solid #0d6efd;
+    
+    /* === Spacing === */
+    --card-padding: 24px;
+    --card-margin: 24px;
+    --sidebar-gap: 30px;
+    
+    /* === Typography === */
+    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --line-height: 1.6;
+    
+    /* === Links & Buttons === */
+    --link-color: #0d6efd;
+    --link-hover-color: #0a58ca;
+    --link-decoration: none;
+    --link-hover-decoration: underline;
+    
+    --btn-bg: #ffffff;
+    --btn-border: 1px solid #dee2e6;
+    --btn-hover-bg: #0d6efd;
+    --btn-hover-text: #ffffff;
+    
+    /* === Animations === */
+    --transition-speed: 0.2s;
+    --hover-transform: translateY(-2px);
+    
+    /* === Mood === */
+    --mood-size: 10px;
+    
+    /* === Callouts (Professional) === */
+    --callout-note: #0d6efd;
+    --callout-tip: #198754;
+    --callout-warning: #ffc107;
+    --callout-danger: #dc3545;
+    
+    /* === Sidebar === */
+    --sidebar-card-bg: #ffffff;
+    
+    /* === Scrollbar === */
+    --scrollbar-width: 8px;
+    --scrollbar-track: #f8f9fa;
+    --scrollbar-thumb: #0d6efd;
+    --scrollbar-thumb-hover: #0a58ca;
+}
+
+/* Slate Specific Overrides */
+body {
+    background-color: var(--bg-color);
+}
+
+/* Crisp header */
+.profile-header {
+    background: #fff;
+    border-top: 3px solid var(--accent-color);
+}
+
+/* Code blocks match theme */
+.status-content pre {
+    background: #1e1e1e !important;
+    border: 1px solid #333;
+}

data/lib/status-wall-theme.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module StatusWallTheme
+  VERSION = "1.2.2"
+end