/* * sky-theme.css — Global frontend theme tokens (all modules) * ---------------------------------------------------------------- * Single source of truth for brand + surface + ranking colors. * Navy (#1d446b) is the hardcoded default this round. A later round * overrides --sky-primary (and friends) per client by injecting a * from the admin BrandColor config into * — no CSS here needs to change for that to work. * * Loaded once in application/views/index.tpl, after style.css and * before {mod}.css, so every frontend page (sidebar, dashboard, * ranking) can reference these variables and override Sneat base. */ :root { /* Brand — navy scale (default; per-client override target) */ --sky-primary-rgb: 29, 68, 107; --sky-primary-dark-rgb: 19, 49, 79; --sky-primary-darker-rgb: 13, 35, 56; --sky-primary: var(--main-color); --sky-primary-dark: rgb(var(--sky-primary-dark-rgb)); --sky-primary-darker: rgb(var(--sky-primary-darker-rgb)); --sky-accent: var(--main-color); --sky-primary-soft: #eaf1f8; /* Surface — page background, cards, borders, text */ --sky-bg: #f6f8fb; --sky-surface: #fff; --sky-border: #e6ecf3; --sky-text: #1f2b3a; --sky-muted: #6b7a8d; /* Ranking — màu chủ đạo lấy từ LOGO Sky Realty: NAVY (chữ) + GOLD (tia). * --rank-primary = navy thương hiệu (= --sky-primary). Các bậc TỰ SUY bằng color-mix * (fallback hex tĩnh navy cho trình duyệt cũ). Admin override --rank-primary nếu cần. */ --rank-primary: var(--sky-primary); /* navy #1d446b — chủ đạo (từ logo) */ --rank-1: #10253b; /* fallback: navy tối nhất (gốc gradient) */ --rank-1: color-mix(in srgb, var(--rank-primary) 55%, #000); --rank-2: #173656; /* fallback: navy giữa */ --rank-2: color-mix(in srgb, var(--rank-primary) 80%, #000); --rank-3: #1d446b; /* fallback: navy sáng = primary */ --rank-3: var(--rank-primary); --rank-gold: #e6ac35; /* gold từ tia logo (podium #1, viền) */ --rank-gold-soft: #f4d385; /* gold nhạt (title/ánh sáng) */ --rank-accent: #c9922b; /* nhấn: gold đậm (thay xanh, hợp brand) */ } /* =================================================================== * Podium BXH cá nhân (block top_ranking) — reskin ĐỎ → NAVY + GOLD. * Bậc/cap gốc đỏ nằm ở style.css (Sneat original, KHÔNG sửa) → override * ở đây (sky-theme.css nạp sau style.css). Dùng token --rank-*. * #1 (vô địch) giữ navy + đổi cap đỏ → GOLD cho nổi bật. * =================================================================== */ /* Mỗi bậc = KHỐI HỘP 3D: mặt trước gradient navy (như #1) + mặt trên vát (:before) * để navy SÁNG hơn mặt trước → lộ cạnh khối 3D (không bị phẳng). */ .rank__block-item.rank__top-second { background: linear-gradient(6deg, var(--sky-accent) 25%, var(--rank-2) 100%) !important; } .rank__block-item.rank__top-second:before { border-bottom-color: var(--sky-accent) !important; } .rank__block-item.rank__top-three { background: linear-gradient(6deg, var(--rank-2) 25%, var(--rank-1) 100%) !important; } .rank__block-item.rank__top-three:before { border-bottom-color: var(--rank-2) !important; } .rank__block-item.rank__top-one:before { border-bottom-color: var(--rank-gold) !important; } .rank__profile-profit { background: var(--rank-1) !important; } .rank__tab-panel .btn-ranking { background: var(--rank-1) !important; } /* Tab thời gian BXH Vùng/Phòng (ranking_dept) — tab active đỏ #520211 → navy */ .ranking__dept-nav>li>a.active { background: var(--rank-1) !important; } /* ================================================================== * Empty state (.dbx-empty) — đặt ở đây vì sky-theme.css nạp GLOBAL * (trước {$mod}.css) nên mọi module dùng được, không chỉ mod=home. * Huy hiệu icon tròn navy nhạt + tiêu đề + phụ đề. * ================================================================== */ .dbx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 16px; color: #9aa7b6; } .dbx-empty img { width: 84px; height: auto; opacity: .9; } .dbx-empty i { font-size: 42px; opacity: .35; } .dbx-empty__ic { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sky-primary-soft); color: var(--sky-accent); margin-bottom: 2px; } .dbx-empty__ic i { font-size: 28px; opacity: 1; } .dbx-empty__t { font-size: 13.5px; font-weight: 600; color: #6b7a8c; } .dbx-empty__s { font-size: 12px; color: #9aa7b6; margin-top: -3px; } [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } /* ===== [Menu v2] copy giao diện từ CA — chỉ áp khi .menu-v2 ===== */ /* Chi an khi co class .menu-v2 (bat bang ?menu=v2). Khong bat => giao dien cu nguyen ven. */ .menu-v2 { --fh-menu-w: 260px; --fh-brand: var(--main-color); --fh-brand-soft: rgba(159, 34, 58, .06); --fh-txt: #697a8d; --fh-txt-sub: #7d8b99; --fh-icon-sub: #a4aeb8; } /* --- Chieu rong sidebar: phai keo theo moi rule Sneat dat cung 15.25rem --- */ .menu-v2 .menu-vertical, .menu-v2 .menu-vertical .menu-block { width: var(--fh-menu-w); } /* Item/header phai la 100% cua .menu-inner (da tru padding ngang 14px), KHONG ep 268px cung (tran ra phai, cut badge) va cung KHONG de auto (dong co lai theo chu, hut le phai). */ .menu-v2 .menu-vertical .menu-inner>.menu-item, .menu-v2 .menu-vertical .menu-inner>.menu-header { width: 100%; } /* :not(.layout-menu-collapsed) la BAT BUOC — luc thu gon sidebar chi con 5.25rem, neu van tru --fh-menu-w thi navbar bi thu ngan va lech han sang phai. */ .menu-v2.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-navbar.navbar-detached { width: calc(100% - calc(1.625rem * 2) - var(--fh-menu-w)); } .menu-v2 .layout-menu { box-shadow: 0 0 14px 0 rgba(67, 89, 113, .09); } /* Sneat cho sidebar truot 0.3s nhung navbar/noi dung thi nhay ngay -> luc bam nut dong/mo hai ben lech nhau. Cho chung chay cung nhip. */ .menu-v2 .layout-page { transition: padding-left .3s ease-in-out, padding-right .3s ease-in-out; } .menu-v2 .layout-navbar.navbar-detached { transition: width .3s ease-in-out, left .3s ease-in-out; } .menu-v2 .content-footer { transition: left .3s ease-in-out; } @media (min-width: 1200px) { .menu-v2.layout-menu-fixed:not(.layout-menu-collapsed) .layout-page, .menu-v2.layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page { padding-left: var(--fh-menu-w); } .menu-v2.layout-menu-fixed:not(.layout-menu-collapsed).layout-menu-flipped .layout-page, .menu-v2.layout-menu-fixed-offcanvas:not(.layout-menu-collapsed).layout-menu-flipped .layout-page { padding-right: var(--fh-menu-w); } /* Navbar la position:fixed, Sneat ghim `left:15.25rem` theo sidebar mac dinh 244px. Sidebar cua ta rong hon nen phai keo `left` theo, khong thi topbar lech sang trai. */ .menu-v2.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar, .menu-v2.layout-menu-fixed-offcanvas.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar { left: var(--fh-menu-w); } .menu-v2.layout-footer-fixed:not(.layout-menu-collapsed) .layout-wrapper:not(.layout-without-menu) .content-footer { left: var(--fh-menu-w); } /* Sneat keo sidebar ra khi hover luc thu gon bang margin am = -(rong - 5.25rem). 244->268px nen chenh lech doi tu 11rem thanh 11.5rem, khong sua thi content bi day sai. */ .menu-v2.layout-menu-hover.layout-menu-collapsed .layout-menu { margin-right: -11.5rem; } } /* --- Khoi logo: GIU NGUYEN anh can giua, chi siet chieu cao --- */ .menu-v2 .menu .app-brand.demo { height: 68px; margin-top: 8px; margin-bottom: 4px; } /* --- Vung cuon menu --- */ .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner { padding: 0 14px 20px !important; } /* --- Nhom cap 1 --- */ .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item>.menu-link { margin: 3px 0 !important; padding: 10px 12px !important; border-radius: 8px; color: var(--fh-txt) !important; font-size: 14px; font-weight: 500; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item>.menu-link:hover { background-color: var(--fh-brand-soft); color: var(--fh-brand) !important; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item>.menu-link>.menu-icon { width: 22px; height: 22px; margin-right: 12px; color: inherit !important; font-size: 21px; } /* nhan nhom: bo IN HOA + co 11px cu, dua ve nhan thuong nhu item */ .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item>.menu-link .menu-header-text { flex: 1; overflow: hidden; color: inherit !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; text-overflow: ellipsis; white-space: nowrap; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item>.menu-toggle::after { right: 12px; color: #c2c9d0; } /* --- Pill so dem --- */ .menu-v2 .menu-count { flex-shrink: 0; margin-left: auto; padding: 2px 7px; border-radius: 20px; background-color: #f0f2f5; color: var(--fh-txt-sub); font-size: 11px; font-weight: 600; line-height: 1.45; } /* --- Nhan phan vung (QUAN TRI) --- */ .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-header { margin: 0; padding: 16px 8px 8px; background-color: transparent !important; box-shadow: none; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-header .menu-header-text { color: #b4bdc6 !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .09em; text-transform: uppercase; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-header::before { display: none; } /* --- Cum con: thut le + vach guide doc --- */ .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub.no-before { position: relative; padding: 4px 0 6px 22px; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub.no-before::before { position: absolute; top: 6px; bottom: 10px; left: 11px; width: 1.5px; border-radius: 2px; background-color: #eceef1; content: ""; } /* --- Item con --- */ /* !important de thang .text-warning/.text-primary con sot trong markup cu */ .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub.no-before>.menu-item>.menu-link { margin: 1px 0; padding: 7px 10px; border-radius: 7px; color: var(--fh-txt-sub) !important; font-size: 13.5px; font-weight: 400; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub.no-before>.menu-item>.menu-link:hover { background-color: var(--fh-brand-soft); color: var(--fh-brand) !important; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub.no-before .menu-icon { width: 18px; height: 18px; margin-right: 8px; color: var(--fh-icon-sub) !important; font-size: 17px; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub.no-before>.menu-item>.menu-link:hover .menu-icon { color: var(--fh-brand) !important; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub.no-before>.menu-item>.menu-toggle::after { right: 10px; color: #b4bdc6; } /* --- Dang xem: crimson nen dac (thay tim #696cff cua Sneat) --- */ .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub.no-before>.menu-item.active>.menu-link, .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active:not(.open)>.menu-link { background-color: var(--fh-brand) !important; box-shadow: 0 2px 6px rgba(159, 34, 58, .28); color: #fff !important; font-weight: 500; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub.no-before>.menu-item.active>.menu-link .menu-icon, .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active:not(.open)>.menu-link .menu-icon { color: #fff !important; } .menu-v2 .bg-menu-theme .menu-sub.no-before>.menu-item.active>.menu-link .badge { background-color: rgba(255, 255, 255, .22) !important; color: #fff !important; } /* nhom cha dang mo: giu mau thuong, item con active da du tin hieu */ .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active.open>.menu-link, .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active.open>.menu-link .menu-header-text, .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active.open>.menu-link .menu-icon { background-color: transparent !important; color: var(--fh-txt) !important; } .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active.open>.menu-link:hover, .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active.open>.menu-link:hover .menu-header-text, .menu-v2 .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active.open>.menu-link:hover .menu-icon { background-color: var(--fh-brand-soft); color: var(--fh-brand) !important; } /* --- Nhan FH: tong vang dong cua thiet ke --- */ .menu-v2 .bg-menu-theme .menu-sub.no-before .badge.badge-demo { padding: 2px 5px; border-radius: 4px; background-color: rgba(206, 147, 74, .15) !important; color: #ce934a !important; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; } /* --- Card nguoi dung o day sidebar --- */ .menu-v2 .menu-footer { flex-shrink: 0; overflow: hidden; /* thu gon con 84px thi phan thua khong duoc tran ra de len noi dung */ border-top: 1px solid #f0f1f4; padding: 12px 14px 14px; } .menu-v2 .menu-footer-link { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 7px 8px; border-radius: 8px; color: inherit; text-decoration: none; } .menu-v2 .menu-footer-info { min-width: 0; } .menu-v2 .menu-footer-link:hover { background-color: var(--fh-brand-soft); } .menu-v2 .menu-footer-name { overflow: hidden; color: #566a7f; font-size: 13.5px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .menu-v2 .menu-footer-role { overflow: hidden; color: #a1acb8; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .menu-v2 .menu-footer-out { color: #a9b3bd; font-size: 19px; } /* --- Khi thu gon --- KHONG boc trong @media: Sneat co the thu gon o nhieu nguong, boc media lam ten + chuc danh khong an duoc va tran ra de len noi dung. */ .menu-v2.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .menu-count, .menu-v2.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .menu-footer-info, .menu-v2.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .menu-footer-out { display: none !important; /* !important vi .menu-footer-info mang class d-flex (display:flex !important) */ } .menu-v2.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .menu-footer-link { justify-content: center; gap: 0; } .menu-v2.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .menu-footer { padding-left: 10px; padding-right: 10px; } /* Thu gon: Sneat ep .menu-item = 5.25rem (84px) = dung be rong sidebar, nen padding ngang cua .menu-inner phai ve 0, khong thi item tran va bi cat mep phai. */ .menu-v2.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .bg-menu-theme .menu-inner { padding-left: 0 !important; padding-right: 0 !important; } /* Thu gon: nhan phan vung -> duong ke mach. Sneat giu no rong 16.25rem va giau chu bang text-indent, de nguyen thi no tho ra ngoai sidebar gan 200px. */ .menu-v2.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .bg-menu-theme .menu-inner>.menu-header { width: 100% !important; /* la flex item: de auto thi co ve 0 vi chu da bi an */ height: 1px; overflow: hidden; margin: 14px 0; padding: 0 !important; background-color: #eceef1 !important; } /*=============== [Menu v2] — END ===============*/