97 lines
3.7 KiB
Markdown
97 lines
3.7 KiB
Markdown
# Charcoal Outline
|
|
|
|
A clean, dark Fluxer theme with a solid charcoal background, transparent main panels, blue feature accents, and thin gray hover outlines.
|
|
|
|
|
|
|
|
## Features
|
|
|
|
- Solid charcoal background (`#1e1e1e`).
|
|
- Transparent main panels with subtle gray borders.
|
|
- Thin gray hover outlines on targeted controls and selectable rows.
|
|
- Blue accents for primary actions and selected states.
|
|
- Distinct danger, warning, success, and presence colors.
|
|
- Opaque menus, tooltips, and popouts for readability.
|
|
- System fonts with no external assets or network dependencies.
|
|
- No custom JavaScript, gradients, or glow.
|
|
- Animation-free by default, with an optional motion addon.
|
|
|
|
## Installation
|
|
|
|
1. Download `Charcoal Outline.css` from this repository.
|
|
2. Open Fluxer's theme settings and add the stylesheet using the CSS import or editor option available in your client.
|
|
3. Enable Charcoal Outline.
|
|
|
|
This is a complete replacement stylesheet, not an append-only patch. If you used an earlier version, replace its CSS rather than appending this version.
|
|
|
|
The exact theme-management controls may vary by client version.
|
|
|
|
## Customization
|
|
|
|
The palette is defined in the `:root, body` block near the top of the stylesheet:
|
|
|
|
```css
|
|
--co-background: #1e1e1e;
|
|
--co-text: #e8ebf2;
|
|
--co-muted: #98a1b3;
|
|
--co-accent: #4fa3ff;
|
|
--co-danger: #ef6565;
|
|
--co-success: #7bdca2;
|
|
--co-warning: #f2ce75;
|
|
--co-line: rgba(128,128,128,.35);
|
|
--co-code: rgba(128,128,128,.2);
|
|
--co-hover: rgba(128,128,128,.08);
|
|
--co-selected: rgba(79,163,255,.14);
|
|
```
|
|
|
|
- `--co-line` controls panel borders and gray hover outlines.
|
|
- `--co-accent` controls mapped blue feature accents.
|
|
- `--co-hover` controls subtle hover fills.
|
|
- `--co-selected` controls mapped selection fills.
|
|
|
|
Some secondary shades and mention backgrounds use explicit color values. Changing `--co-accent` alone does not recolor every blue detail.
|
|
|
|
## Layout and accessibility
|
|
|
|
The theme avoids custom sidebar offsets, forced control sizes, clipping workarounds, and resize-handle changes. Native layout and scrolling behavior are left in place as far as practical.
|
|
|
|
Keyboard-focus indicators remain separate from mouse-hover outlines. Existing selected-server outlines and semantic feature colors are preserved. The base theme adds no custom motion effects. Optional animations are available through `charcoal-outline-motion.css`.
|
|
|
|
## Optional motion addon
|
|
|
|
`charcoal-outline-motion.css` is a stand alone css that adds subtle animations to Charcoal Outline without changing its colors or layout.
|
|
|
|
### Included effects
|
|
|
|
- Thin gray hover outlines fade in and out.
|
|
- Buttons compress slightly when pressed.
|
|
- Server icons lift slightly on hover.
|
|
- Menus, tooltips, notifications, and message-action toolbars have quick entrance animations.
|
|
- The composer border transitions smoothly when focused.
|
|
- Channel and settings rows transition between their existing background colors.
|
|
|
|
## Changelog
|
|
|
|
### 1.0.1
|
|
|
|
- Consolidated gray hover styling into the complete stylesheet.
|
|
- Removed redundant outlines from already-bordered buttons.
|
|
- Preserved keyboard-focus and selected-server outlines.
|
|
- Applied consistent disabled-state exclusions to targeted hover rules.
|
|
- Retained existing feature colors and native layout geometry.
|
|
|
|
### 1.0.0
|
|
|
|
- Initial Fluxer adaptation of the charcoal dark stylesheet.
|
|
- Added token mappings and component-scoped styling.
|
|
- Kept the theme self-contained without external assets or scripts.
|
|
|
|
## License
|
|
|
|
```text
|
|
THE BEER-WARE LICENSE (Revision 42):
|
|
Michael Moon wrote this file. As long as you retain this notice you
|
|
can do whatever you want with this stuff. If we meet some day, and you
|
|
think this stuff is worth it, you can buy me a beer in return.
|
|
Michael Moon
|
|
```
|