134 lines
3.6 KiB
Markdown
134 lines
3.6 KiB
Markdown
# Sethflix Theme Context
|
|
|
|
This file defines the standard "Sethflix" visual theme (Dark Mode with Orange Accents) for use in all web applications.
|
|
|
|
## 1. Core Identity
|
|
|
|
* **Theme Name:** Sethflix Dark
|
|
* **Primary Background:** Black (`#000000`) or Dark Gray (`#1a1a1a` / `#252525`)
|
|
* **Primary Text:** Light Gray (`#e0e0e0`)
|
|
* **Accent Color:** Orange (`#D35400`)
|
|
* **Hover/Active Color:** Lighter/Darker Orange (`#e65c00` / `#a84300`)
|
|
* **Border Color:** Dark Gray (`#333333`) or Orange (`#D35400` for emphasis)
|
|
|
|
## 2. Assets
|
|
|
|
* **Logo (Square/Favicon):** `https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png`
|
|
* *Usage:* Sidebar icon, Favicon, Mobile Navbar.
|
|
* *Dimensions:* 55px width (sidebar), 32px-55px (navbar).
|
|
* **Full Logo (Login):** Same image used for login (`login.png`), typically scaled to 150px width.
|
|
|
|
## 3. CSS Color Palette
|
|
|
|
| Element | Color Hex | Description |
|
|
| :--- | :--- | :--- |
|
|
| **Global Background** | `#1a1a1a` | Main body, panels, modals, cards |
|
|
| **Sidebar/Navbar** | `#000000` | Navigation bars |
|
|
| **Panel/Card (Comfortable)** | `#252525` | Content containers, wells |
|
|
| **Primary Text** | `#e0e0e0` | Body text, headings |
|
|
| **Secondary Text** | `#cccccc` | Muted text, paragraphs in wells |
|
|
| **Accent (Strong/Bold)** | `#D35400` | Links, `<strong>`, Buttons, Active States |
|
|
| **Inputs/Forms** | `#2a2a2a` | Text inputs, search bars (Text: `#fff`) |
|
|
| **Borders (Subtle)** | `#333333` | Dividers, panel borders |
|
|
| **Borders (Highlight)** | `#D35400` | Images, Active Inputs |
|
|
|
|
## 4. Reusable CSS Snippets
|
|
|
|
### Global Resets & Typography
|
|
```css
|
|
body, html {
|
|
background-color: #1a1a1a !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, strong, b, a {
|
|
color: #D35400 !important;
|
|
}
|
|
|
|
p, span, div {
|
|
color: #e0e0e0;
|
|
}
|
|
```
|
|
|
|
### Components (Cards/Panels)
|
|
```css
|
|
.panel, .card, .well, .modal-content {
|
|
background-color: #252525 !important;
|
|
border: 1px solid #333 !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
```
|
|
|
|
### Forms & Inputs
|
|
```css
|
|
input, textarea, select, .form-control {
|
|
background-color: #2a2a2a !important;
|
|
color: #fff !important;
|
|
border: 1px solid #444 !important;
|
|
}
|
|
|
|
input:focus {
|
|
border-color: #D35400 !important;
|
|
box-shadow: 0 0 5px rgba(211, 84, 0, 0.5) !important;
|
|
}
|
|
```
|
|
|
|
### Buttons
|
|
```css
|
|
.btn-primary, .btn-ghost {
|
|
background-color: #D35400 !important;
|
|
color: #fff !important;
|
|
border-color: #D35400 !important;
|
|
}
|
|
|
|
.btn-primary:hover, .btn-ghost:hover {
|
|
background-color: #e65c00 !important;
|
|
}
|
|
```
|
|
|
|
### Navigation & Menus
|
|
```css
|
|
.navbar, .sidebar {
|
|
background-color: #000000 !important;
|
|
}
|
|
|
|
.nav-link:hover, .nav-item.active {
|
|
background-color: #333 !important;
|
|
color: #D35400 !important;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
background-color: #1a1a1a !important;
|
|
border-color: #333 !important;
|
|
}
|
|
```
|
|
|
|
### Images
|
|
```css
|
|
img {
|
|
border: 2px solid #D35400 !important;
|
|
}
|
|
|
|
.noborder, .logo-img {
|
|
border: none !important;
|
|
}
|
|
```
|
|
|
|
## 5. Mautic Specifics (Reference)
|
|
* **Sidebar Logo:** 55px width, 4px top margin, centered.
|
|
* **Navbar:** Flexbox centering, left-aligned logo with margin.
|
|
* **Alerts:** Dark background, left-border accent matching alert type color (Orange/Red/Blue/Green).
|
|
|
|
|
|
## Network Inventory
|
|
The master source of truth for all device IPs, LXC IDs, and service mappings can be found at:
|
|
on Node 173.
|
|
|
|
## Network Inventory
|
|
The master source of truth for all device IPs, LXC IDs, and service mappings can be found at:
|
|
on Node 173.
|
|
|
|
## Network Inventory
|
|
The master source of truth for all device IPs, LXC IDs, and service mappings can be found at:
|
|
`/root/network_inventory.md` on Node 173.
|