/* Heyuri Aqua Dark CSS */ :root { /* -- Dark Aqua Pool Palette -- */ --color-bg-main: #0a2a2f; /* Very Dark Desaturated Cyan */ --color-fg-main: #e0f2f7; /* Very Light Cyan for text */ --color-fg-link: #26c6da; /* Bright Cyan for links */ --color-fg-link-hover: #80deea; /* Lighter Cyan for hover */ --color-bg-boardlist: #103a40; /* Dark Cyan, slightly lighter than main bg */ --color-fg-boardlist: var(--color-fg-main); --color-bg-theading: #004c54; /* Dark Teal - for prominent headers */ --color-bg-theading2: #005662; /* Slightly Lighter Dark Teal */ --color-bg-theading3: #006064; /* Original Deep Teal, now a lighter bg accent */ --color-bg-postblock: #1c3f4a; /* Dark Desaturated Cyan/Blue, lighter than main bg */ --color-fg-title: #b2ebf2; /* Light Cyan */ --color-fg-name: #80deea; /* Lighter Cyan (same as link hover) */ --color-fg-warning: #ff6b6b; /* Bright Red for warnings */ --color-fg-warning-ip: #ff6b6b; --color-fg-quote: #4dd0e1; /* Medium-Light Cyan for quote text */ --color-fg-quote2: #80deea; /* Light Aqua for quote icon or secondary quote text */ --color-bg-reply: #0f3038; /* Dark Cyan, very close to main bg but distinct */ --color-bg-reply-hl: #1a4a52; /* Highlighted reply, slightly lighter */ --color-hi-contrast-border: #267d85; /* Medium Teal for distinct borders */ --color-lo-contrast-border: #154046; /* Darker Teal for subtle borders */ --color-fg-logo: #b2ebf2; --color-fg-global-message: #80deea; --color-bg-window-item-highlight: #1a4a52; --color-bg-postlists-header: #004c54; /* Same as theading */ --color-fg-postlists-header: #e0f7fa; --color-fg-postlists-header-link: #ffffff; /* Pure white for max contrast here */ --color-bg-postlists-odd: #0f3038; /* Same as reply bg */ --color-bg-postlists-even: #143f47; /* Slightly lighter for striping */ --font-family-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-size-main: 0.875em; } /* General body styles for dark theme */ body { background-color: var(--color-bg-main); color: var(--color-fg-main); } a { color: var(--color-fg-link); } a:hover { color: var(--color-fg-link-hover); } /* -- Logo -- */ .logo:after { content: ""; font-size: 2.5em; animation: change-emoji 14s infinite; } /* -- Randomly Cycle through some Emojis for Decoration --*/ @keyframes change-emoji { 0% { content: ""; } /* Fish */ 25% { content: ""; } /* Tropical fish */ 50% { content: ""; } /* Wave */ 75% { content: "💧"; } /* Droplet */ 100% { content: "🐡"; } /* Blowfish */ } /* Make emoji slightly brighter if needed, or add a subtle glow */ .logo:after { filter: brightness(1.2); /* Optional: makes emoji pop a bit more */ } /*Badges for Users*/ .name:before { content: " "; /* Keep as is unless specific badge styling is needed */ } /* -- Content Boxes -- */ .theading, .theading2, .theading3, .neomenuTopLevel, .detailsbox, .postblock, .reply, .window { border: 2px solid var(--color-hi-contrast-border); background: var(--color-bg-theading); /* Default background for these, can be overridden */ /* For dark theme, the inner shadow should be subtle and dark, or a light glow */ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0,0,0,0.3); } /* Specific backgrounds if different from theading default */ .theading2 { background: var(--color-bg-theading2); } .theading3 { background: var(--color-bg-theading3); } .postblock { background: var(--color-bg-postblock); } .reply { background: var(--color-bg-reply); } /* -- Buttons -- */ button { background: linear-gradient(to bottom, #00838f, #006064); /* Darker teal gradient */ border: 1px solid var(--color-fg-link-hover); /* Brighter border for pop */ color: var(--color-fg-main); /* Light text */ border-radius: 3px; padding: 0.25em 1em; transition: all 0.2s; font-weight: bold; } button:hover { background: linear-gradient(to bottom, #0097a7, #00838f); /* Slightly lighter on hover */ border-color: #b2ebf2; } /* -- inputs -- */ input[type="text"], input[type="password"], textarea, select { background: var(--color-bg-reply); /* Dark background */ border: 2px solid var(--color-hi-contrast-border); color: var(--color-fg-main); /* Light text */ padding: 0.3em; border-radius: 3px; } input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-color: var(--color-fg-link); outline: none; box-shadow: 0 0 5px rgba(var(--color-fg-link-rgb, 38, 198, 218), 0.5); /* Define --color-fg-link-rgb if you want to use it often */ } blockquote { border-left: 3px solid var(--color-fg-quote); padding-left: 10px; margin-left: 5px; color: var(--color-fg-quote); /* Text inside blockquote */ } blockquote:before { content: "❝"; color: var(--color-fg-quote2); /* Use a brighter color for the quote mark */ opacity: 0.7; /* Adjust opacity for visibility */ font-size: 1.5em; margin-right: 5px; vertical-align: -0.3em; float: left; /* Optional: for better alignment */ line-height: 1; /* Optional: for better alignment */ }