Files
piNail/sethflix_theme.md

3.6 KiB

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

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)

.panel, .card, .well, .modal-content {
    background-color: #252525 !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
}

Forms & Inputs

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

.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

.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

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.