Add HomelabDS brand identity: logo, colors, FusionPBX theme

2026-05-31 01:07:19 +00:00
parent cd303570d7
commit 8b37bfb20f
4 changed files with 266 additions and 0 deletions
@@ -0,0 +1,175 @@
+/* ============================================
+   HomelabDS Theme — para FusionPBX
+   Substitui a identidade visual do FusionPBX
+   ============================================ */
+
+/* Paleta HomelabDS */
+:root {
+  --hl-primary: #00D4AA;
+  --hl-primary-dark: #009B7D;
+  --hl-secondary: #1A1A2E;
+  --hl-accent: #FF6B6B;
+  --hl-surface: #F8F9FA;
+  --hl-text: #2D3436;
+  --hl-text-light: #636E72;
+}
+
+/* ========== TOP BAR / HEADER ========== */
+.navbar, .navbar-inverse {
+  background: var(--hl-secondary) !important;
+  border: none !important;
+}
+
+.navbar-inverse .navbar-brand {
+  color: #fff !important;
+  font-weight: 700 !important;
+  font-size: 18px !important;
+  letter-spacing: 1px !important;
+}
+
+.navbar-inverse .navbar-nav > li > a {
+  color: rgba(255,255,255,0.8) !important;
+}
+
+.navbar-inverse .navbar-nav > li > a:hover,
+.navbar-inverse .navbar-nav > .active > a {
+  color: var(--hl-primary) !important;
+  background: transparent !important;
+}
+
+.navbar-brand:before {
+  content: "◆ " !important;
+  color: var(--hl-primary) !important;
+}
+
+/* ========== BUTTONS ========== */
+.btn-primary {
+  background: var(--hl-primary) !important;
+  border-color: var(--hl-primary) !important;
+  color: #fff !important;
+}
+
+.btn-primary:hover {
+  background: var(--hl-primary-dark) !important;
+  border-color: var(--hl-primary-dark) !important;
+}
+
+.btn-danger {
+  background: var(--hl-accent) !important;
+  border-color: var(--hl-accent) !important;
+}
+
+/* ========== LINKS ========== */
+a {
+  color: var(--hl-primary-dark) !important;
+}
+
+a:hover {
+  color: var(--hl-primary) !important;
+}
+
+/* ========== PANELS / CARDS ========== */
+.panel {
+  border-color: #e8e8e8 !important;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
+}
+
+.panel-heading {
+  background: var(--hl-surface) !important;
+  border-bottom: 2px solid var(--hl-primary) !important;
+  font-weight: 600 !important;
+}
+
+.panel-primary > .panel-heading {
+  background: var(--hl-secondary) !important;
+  color: #fff !important;
+  border-bottom: 3px solid var(--hl-primary) !important;
+}
+
+/* ========== TABLES ========== */
+.table > thead > tr > th {
+  border-bottom: 2px solid var(--hl-primary) !important;
+  color: var(--hl-secondary) !important;
+  font-weight: 600 !important;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+  background: var(--hl-surface) !important;
+}
+
+/* ========== FORMS ========== */
+.form-control:focus {
+  border-color: var(--hl-primary) !important;
+  box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.15) !important;
+}
+
+/* ========== LABELS / BADGES ========== */
+.label-primary {
+  background: var(--hl-primary) !important;
+}
+
+.label-success {
+  background: var(--hl-primary-dark) !important;
+}
+
+.label-danger {
+  background: var(--hl-accent) !important;
+}
+
+/* ========== SIDEBAR / MENU ========== */
+.sidebar-menu > li > a {
+  color: var(--hl-text) !important;
+}
+
+.sidebar-menu > li.active > a {
+  border-left: 3px solid var(--hl-primary) !important;
+  color: var(--hl-primary-dark) !important;
+  font-weight: 600 !important;
+}
+
+/* ========== LOGIN PAGE ========== */
+body.login-page {
+  background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%) !important;
+}
+
+.login-page .login-box-body {
+  background: #fff !important;
+  border-radius: 8px !important;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
+  border-top: 4px solid var(--hl-primary) !important;
+}
+
+.login-page .login-logo h1 {
+  font-size: 28px !important;
+  font-weight: 700 !important;
+}
+
+.login-page .login-logo h1:before {
+  content: "◆ " !important;
+  color: var(--hl-primary) !important;
+}
+
+/* ========== FOOTER ========== */
+.main-footer {
+  border-top: 2px solid var(--hl-primary) !important;
+  color: var(--hl-text-light) !important;
+}
+
+/* ========== PAGINATION ========== */
+.pagination > .active > a {
+  background: var(--hl-primary) !important;
+  border-color: var(--hl-primary) !important;
+}
+
+.pagination > li > a:hover {
+  color: var(--hl-primary-dark) !important;
+}
+
+/* ========== ALERTS ========== */
+.alert-success {
+  border-left: 4px solid var(--hl-primary-dark) !important;
+}
+
+.alert-danger {
+  border-left: 4px solid var(--hl-accent) !important;
+}