/* Ported from res/values/colors.xml + values-night/colors.xml + values/dimens.xml. Screen CSS must never contain a hex code — only var(--token). */ :root { --primary:#004166; --primary-dark:#00263A; --accent:#FF402D; --bg:#F8FAFC; --content-body:#FCFCFC; --card:#FFFFFF; /* light_gray is ARGB #ADCAC5C5 in colors.xml -> rgba(202,197,197,.68) */ --gray-bg:#F5F5F5; --gray-line:rgba(202,197,197,.68); --text:#212121; --text-2:#757575; --mini-title:#2A2E43; --header:#004166; /* Brand-coloured text, and the dark panel behind the online-users list. Both need a lighter value on a dark background, so they are tokens rather than hard-coded overrides scattered through the screens. */ --brand-text:#004166; --panel:#2A2E43; /* Soft status glow behind a client card. Alpha-based so it reads on either theme without a second definition. */ --glow-on:rgba(76,175,80,.40); --glow-on-mid:rgba(76,175,80,.14); --glow-off:rgba(244,67,54,.32); --glow-off-mid:rgba(244,67,54,.11); /* Menu header collection readout (activity_menu_2a). These sit on the fixed dark-blue header in both themes, so they do not change with the theme. */ --rate-teal:#4ED6B8; --rate-lime:#B8E986; --rate-deep:#2E9E8F; /* The Menu's search button glyph. On the same fixed dark-blue header, so it does not flip with the theme either — a mid grey that reads as available without competing with the name beside it. */ --menu-search:#A9A9A9; /* The copy control on a client's identity card. It sits over the status halo, so it is a pale green rather than the brand navy — fixed in both themes for the same reason the halo is. */ --pcopy:#A0E999; --online:#4CAF50; --offline:#F44336; --warn:#FF9800; --error:#F44336; --tab-green:#388E3C; --tab-red:#D32F2F; --tab-purple:#800080; --tab-blue:#1976D2; --tab-orange:#FF9800; --tab-teal:#00897B; --tab-pink:#C2185B; --tab-indigo:#3F51B5; /* Dashboard summary card, from user_dashboard.xml and the colours HomeDashboardFragment swaps in. WRITTEN AS rgba() ON PURPOSE. Android hex is ARGB (alpha FIRST); CSS hex is RGBA (alpha LAST). Pasting the Android value straight in silently reads the alpha as blue and the red as alpha: #C4269003 became colour #C42690 at 1% opacity, so Total Online rendered invisible. Convert, never copy. #C4269003 -> rgba(38,144,3,.77) green Total Online #CDE00E0E -> rgba(224,14,14,.80) red Generated Bill #C7004166 -> rgba(0,65,102,.78) blue Active Clients #4C7E7E7E -> rgba(126,126,126,.30) grey divider #1B2196F3 -> rgba(33,150,243,.11) blue ONU button plate #BF004166 -> rgba(0,65,102,.75) navy ONU button mark holo_red_dark and holo_blue_dark are plain 6-digit values and need no conversion. */ --sum-green:rgba(38,144,3,.77); --sum-red:#CC0000; --sum-blue:#0099CC; /* Live ONU Status popup. tokens.css is the only file allowed to name a colour, so the design's palette lands here rather than in components.css. Mono is a system stack on purpose: the mock loaded IBM Plex from Google Fonts, and mac is an installable PWA that must render with no network. */ --onu-ink:#16212C; --onu-ink-strong:#0E1720; --onu-lab:#7C8A99; --onu-hair:#EEF1F4; --onu-hair-2:#E9EDF1; --onu-rx:#C0341F; --onu-rx-mute:#8A6F69; --onu-rx-bg:#FFF5F2; --onu-rx-line:#F2DBD5; --onu-rx-track:#F3E3DF; --onu-rx-fill:#E2653F; --onu-tx:#1F5FD0; --onu-tx-mute:#68788F; --onu-tx-bg:#F3F8FF; --onu-tx-line:#D9E5F6; --onu-tx-track:#DEE8F7; --onu-tx-fill:#4F8CF0; --onu-ok:#0F8A4E; --onu-ok-bg:#E7F7EE; --onu-ok-line:#C6ECD8; --onu-warn:#9A5A06; --onu-warn-bg:#FDF3E2; --onu-warn-line:#F2DDB8; --onu-warn-dot:#D98518; --onu-panel:#F7F9FB; --onu-foot:#F8FAFB; --onu-meta:#5D6B7A; --onu-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; /* The client row's ONU button: @drawable/menu_header_top behind outline_browse_activity_24 tinted #BF004166. Both converted per the note above; the mark is the same navy as --header, at 75%. */ --onu-plate:rgba(33,150,243,.11); --onu-mark:rgba(0,65,102,.75); /* Collected is a DIFFERENT green from Total Online. The two share the right slot of the summary card and were sharing --sum-green here, but the app uses #C4269003 for Total Online and android.R.color.holo_green_dark for Collected (HomeDashboardFragment:919) - a yellower green. */ --sum-collected:#669900; /* Online users row, from online_user_item.xml: ouSub/ouPage #90A4AE and ouTime #2F7ED8. Both are literals in that layout with no values-night counterpart, so the dark values below are ours. */ --ou-sub:#90A4AE; --ou-time:#2F7ED8; /* Per-user-type ink on an online row, from OnlineUser.typeColor(). The admin value is 0xFC007500 in the app — ARGB, so alpha FC (.988) over #007500, which is opaque enough to carry as a flat colour. */ --ut-client:#EA11D2; --ut-mreseller:#028795; --ut-admin:#007500; --ut-superadmin:#FA5959; --ut-agent:#800000; --ut-other:#00A65A; /* Source badge fills, from OnlineUser.sourceColor(). These were --tab-orange / --tab-purple / --tab-green, which are #FF9800 / #800080 / #388E3C — three different colours from the ones the app actually draws. iOS is mac's own category and has no counterpart there, so it takes the header pill's blue. */ --src-web:#00A65A; --src-mob:#8E44AD; --src-apk:#E67E22; --src-ios:#2F7ED8; --sum-bill:rgba(224,14,14,.80); --sum-active:rgba(0,65,102,.78); --sum-divider:rgba(126,126,126,.30); /* Pastel tile fills, as used by the dashboard stat tiles. Written as rgba rather than color-mix() so they work on older Android and iOS WebViews. */ --tint-red:rgba(211,47,47,.10); --tint-green:rgba(56,142,60,.10); --tint-blue:rgba(25,118,210,.10); --tint-purple:rgba(128,0,128,.10); --tint-orange:rgba(255,152,0,.12); --tint-teal:rgba(0,137,123,.10); --tint-pink:rgba(194,24,91,.10); --tint-indigo:rgba(63,81,181,.10); /* ---- dashboard stat tiles, exact from home_admin_type.xml ---- Eight accent/fill pairs. In the app every one of these is typed inline as a literal on the CardView - twice, once as app:tint and once as android:textColor - and NOT ONE is a @color resource, so there is no values-night counterpart for any of them. The [data-theme="dark"] block below is therefore ours, not a port: see the note there. --tile-dusty is the one 8-digit value in the set, #D6C25757. Android hex is ARGB, so that is alpha D6 (.839) over C25757, NOT #D6C257 at .34. Written as rgba() because check-css.mjs rejects 8-digit hex outright, which is exactly the mistake it was added to catch. */ --tile-pink:#EC407A; --tilebg-pink:#FCE4EC; --tile-teal:#009688; --tilebg-teal:#E0F2F1; --tile-purple:#841DCA; --tilebg-purple:#EBE5F4; --tile-dusty:rgba(194,87,87,.839); --tilebg-dusty:#F6E7E8; --tile-red:#E53935; --tilebg-red:#FBE9E7; --tile-blue:#2196F3; --tilebg-blue:#E3F2FD; --tile-orange:#FB8C00; --tilebg-orange:#FFF3E0; --tile-cyan:#00ACC1; --tilebg-cyan:#E0F7FA; /* The tile label takes no textColor in the layout, so it inherits the theme's textColorPrimary: AppCompat's primary_text_default_material_light, which is #DE000000 = rgba(0,0,0,.87). Softened to .74 here — at 13px bold the full 87% reads heavier on a pastel tile than it does at the app's 10sp. A TOKEN, not a literal in home.css: the dark theme flips this to white, and an rgba() written straight into the screen would slip past check-css.mjs (which only rejects hex) and leave a near-black label on a dark card. */ --tile-label:rgba(0,0,0,.74); /* ---- Cash On Hand (fragment_cash_ledger.xml + item_bank_ledger.xml) ---- Inline literals on the layout, like the stat tiles, so none of these has a values-night counterpart either. --ledger-open is @color/primary #004166, which IS a real resource and IS unchanged in values-night - and is still unreadable on a dark card, so it is overridden below for the same reason --brand-text already is. */ --ledger-label:#6E7C85; --ledger-open:#004166; --ledger-credit:#4CAF50; --ledger-debit:#26629E; --ledger-close:#F44336; /* dateFilterCard cardBackgroundColor, and the pale green behind the row's transfer button (item_bank_ledger.xml:116-122). */ --ledger-filter-bg:#F8F9FA; --ledger-go-bg:#E8F5E8; /* @drawable/chart_fill_blue, the one gradient on the dashboard: a 90deg linear whose two stops are ARGB. #551976D2 is alpha 0x55 = .33 over rgb(25,118,210), and #141976D2 is alpha 0x14 = .078 over the same. Read as 6-digit hex they would be #551976 and #141976 - two dark purples - which is the ARGB trap this file warns about. */ --sect-grad-from:rgba(25,118,210,.33); --sect-grad-to:rgba(25,118,210,.078); /* Monthly Billing Overview: the three LineDataSet colours, set in Java at HomeDashboardFragment:6425-6427. */ --bill-line:#1976D2; --coll-line:#43A047; --disc-line:#FF9800; /* Zone Wise Client's Status: ZoneStatusStripAdapter:86-90. The placeholder is what a half with no clients on either side draws. */ --zone-active:#1976D2; --zone-inactive:#BDBDBD; --zone-online:#4CAF50; --zone-offline:#F44336; --zone-empty:#ECEFF1; --zone-name:#2C3E50; /* item_billing_card.xml, taken from BillingAdapter rather than eyeballed. Two of the source values are EIGHT-DIGIT ARGB (alpha first): the footer tint #98FBE7E7 and the active badge text #8D008000. Pasted into CSS as-is they read as 6-digit hex at ~1% alpha and vanish - the exact bug that made Total Online invisible - so both are converted to rgba() here. */ --bill-amt-due:#CC0000; --bill-amt-paid:#8A8A8A; --bill-amt-adv:#009900; --bill-due-fg:#FF4444; --bill-due-bg:#FBE9E7; --bill-paid-fg:#AA66CC; --bill-paid-bg:#EBE5F4; --bill-adv-fg:#0099CC; --bill-adv-bg:#BBD0DB; --bill-foot-due:rgba(251,231,231,.60); --bill-foot-ok:#E7FBE9; --bill-active-bg:#E0F2F1; --bill-active-fg:rgba(0,128,0,.55); --bill-inact-bg:#FBE9E7; --bill-inact-fg:rgba(211,47,47,.51); /* item_collection.xml. #87C1C1C1 is ARGB again - alpha 87 - so the receipt number is a faint grey, not the near-black a 6-digit read would give. */ /* Ticket priority, from the app's priority_*_background drawables. Solid badge fills with white text, so they keep the same value in dark mode - lightening them would break the contrast the white text relies on. Urgent has no drawable of its own there and falls through to medium; it gets a darker red here so it does not read as routine. */ --pri-low:#4CAF50; --pri-medium:#FF9800; --pri-high:#F44336; --pri-urgent:#B71C1C; /* Ticket status tints and the two duration chips, from SupportCardAdapter. #841DCA is the closed-label purple; the duration chips are the app's pinkish age chip and teal assign chip. */ --sts-pending:#F6E7E8; --sts-process:#FFF3E0; --sts-solved:#E0F2F1; --sts-closed:#E3F2FD; --tkt-closed:#841DCA; --dur-age-bg:#FBE4E2; --dur-age-fg:#B5433A; --dur-asg-bg:#DDEFEC; --dur-asg-fg:#26706A; /* item_online_payment_card payAmountText */ /* item_onu.xml tints the voltage/temperature row blue, which separates a reading you glance at from the identity above it. */ --onu-env:#4A7C9B; /* Monitor chart. #0479ce / #398240 from MonitorFragment; the fills are the app's #800479ce / #80398240 read as ARGB - alpha FIRST, so 0x80 is the opacity and 0479ce is the colour. */ --mt-dn:#0479CE; --mt-up:#398240; --mt-dn-fill:rgba(4,121,206,.50); --mt-up-fill:rgba(57,130,64,.50); --mt-grid:#EEF1F8; --mt-axis:#7A869A; /* Dialer. The in-call overlay is the softphone's signature dark navy in both themes - a phone call is a full-screen mode, not a card - so these do not flip. #2e3e4e / #004166 are the web softphone's own colours. */ --dial-bg:#2E3E4E; --dial-bar:#004166; --dial-key:#3A4A5A; --dial-call:#00A65A; --dial-end:#E23B3B; --dial-on:#0A84FF; --dial-idle:#94A3B8; --dial-wait:#FBBF24; --dial-err:#F87171; --dial-sub:#CBD5E1; --dial-star:#FFC107; --dial-idle:#94A3B8; --dial-wait:#FBBF24; --dial-err:#F87171; --dial-sub:#CBD5E1; --dial-star:#FFC107; --pay-amt:#714683; --coll-amt:#26629E; --coll-disc:#6B6B6B; --coll-mr:rgba(193,193,193,.53); --coll-method:#EC407A; --coll-bank:#FB8C00; --bill-zone:#0088CC; --bill-date:#FB8C00; --bill-name:#333333; --bill-sub:#666666; /* Expire Soon countdown, from TerminatedClientsAdapter:79-86. Three steps, not two: RED at a day or less, #FF8C00 to three days, #FFA500 beyond. The last two are close on purpose — the app distinguishes "act now" from "coming up" without either reading as safe. */ --exp-red:#D32F2F; --exp-warn:#FF8C00; --exp-mild:#FFA500; /* Login screen. The app's login does NOT use --primary: the welcome line and the LOGIN button are a lighter azure, and the Remember-me switch is teal, over a near-white page rather than the dark header blue. index.php pins data-theme="light", so these deliberately have no dark counterpart. */ --login-blue:#1E88E5; --login-btn:#2196F3; --login-on:#00BFA5; --login-off:#CFD8DC; --login-ph:#9E9E9E; --card-radius:12px; --btn-radius:14px; --header-size:25px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --appbar-h:56px; --bottomnav-h:60px; --shadow-1:0 1px 3px rgba(0,0,0,.12); --shadow-2:0 4px 12px rgba(0,0,0,.15); --ease-standard:cubic-bezier(.45,0,.55,1); --ease-decelerate:cubic-bezier(0,0,.2,1); --ease-accelerate:cubic-bezier(.4,0,1,1); /* Scanning Card (activity_nid_scanner.xml). The app hard-codes this screen rather than theming it, so the light values are its own, converted from Android ARGB where needed. Dark mode is mac's addition - the app has no night variant of this layout at all, and leaving raw hex here would make it the one screen that ignores the theme. */ --nsc-bg:#F9FAFB; --nsc-tag-bg:#E0F2FE; --nsc-tag-fg:#1E293B; --nsc-strip:#C1D9F1; /* chart_fill_blue, #551976D2 -> #141976D2, bottom stop first. */ --nsc-fill-from:rgba(25,118,210,.333); --nsc-fill-to:rgba(25,118,210,.078); /* tab_selected_glow's linear layer and its 1dp #DEE2E6 stroke. */ --nsc-keep-from:#FFFFFF; --nsc-keep-mid:#F8F9FA; --nsc-keep-to:#E9ECEF; --nsc-keep-line:#DEE2E6; /* item_result_row.xml: label 12sp #666, value 16sp #1a1a1a, 1dp #14000000. */ --nsc-row-line:rgba(0,0,0,.078); --nsc-rl:#666666; --nsc-rv:#1A1A1A; --nsc-go:#22C55E; } [data-theme="dark"] { --bg:#121212; --content-body:#121212; --card:#1E1E1E; --gray-bg:#1E1E1E; --gray-line:#424242; --text:#FFFFFF; --text-2:rgba(255,255,255,.70); --mini-title:#FFFFFF; --header:#FFFFFF; --primary-dark:#012E47; --brand-text:#7EC6EE; --panel:#0C1622; --shadow-1:0 1px 3px rgba(0,0,0,.5); --shadow-2:0 4px 12px rgba(0,0,0,.6); /* The summary values sit on a dark card now, so lift them off the background. */ --sum-active:#7EC6EE; --sum-divider:rgba(255,255,255,.16); /* The ONU popup on a dark card: the tinted tiles have to stop being paper white or they glow, and the hairlines have to come up off the background. */ --onu-ink:#FFFFFF; --onu-ink-strong:#FFFFFF; --onu-lab:rgba(255,255,255,.55); --onu-hair:rgba(255,255,255,.10); --onu-hair-2:rgba(255,255,255,.12); --onu-rx-bg:rgba(192,52,31,.16); --onu-rx-line:rgba(192,52,31,.34); --onu-rx-track:rgba(192,52,31,.24); --onu-rx-mute:rgba(255,255,255,.60); --onu-tx-bg:rgba(31,95,208,.18); --onu-tx-line:rgba(31,95,208,.38); --onu-tx-track:rgba(31,95,208,.28); --onu-tx-mute:rgba(255,255,255,.60); --onu-rx:#FF8A73; --onu-tx:#7EB0FF; --onu-ok:#4ADE80; --onu-warn:#FBBF5A; --onu-ok-bg:rgba(74,222,128,.14); --onu-ok-line:rgba(74,222,128,.32); --onu-warn-bg:rgba(251,191,90,.14); --onu-warn-line:rgba(251,191,90,.32); --onu-panel:rgba(255,255,255,.05); --onu-foot:rgba(255,255,255,.04); --onu-meta:rgba(255,255,255,.60); /* A 75%-navy mark on a #1E1E1E card is all but invisible. Lift it to the same blue --brand-text takes here, and give the plate a touch more presence. */ --onu-plate:rgba(33,150,243,.18); --onu-mark:#7EC6EE; /* Pastels need more punch on a dark card to stay visible. */ --bill-due-bg:rgba(211,47,47,.18); --bill-paid-bg:rgba(170,102,204,.20); --bill-adv-bg:rgba(0,153,204,.22); --bill-foot-due:rgba(211,47,47,.12); --bill-foot-ok:rgba(56,142,60,.12); --bill-active-bg:rgba(56,142,60,.20); --bill-active-fg:#81C784; --bill-inact-bg:rgba(211,47,47,.18); --bill-inact-fg:#EF9A9A; --bill-amt-paid:#9E9E9E; --bill-amt-due:#EF5350; --bill-amt-adv:#66BB6A; --sts-pending:rgba(211,47,47,.16); --sts-process:rgba(255,152,0,.16); --sts-solved:rgba(56,142,60,.18); --sts-closed:rgba(25,118,210,.18); --tkt-closed:#CE93D8; --dur-age-bg:rgba(211,47,47,.16); --dur-age-fg:#EF9A9A; --dur-asg-bg:rgba(0,137,123,.18); --dur-asg-fg:#80CBC4; --onu-env:#82B1D8; --mt-dn:#64B5F6; --mt-up:#81C784; --mt-dn-fill:rgba(100,181,246,.28); --mt-up-fill:rgba(129,199,132,.28); --mt-grid:rgba(255,255,255,.10); --mt-axis:rgba(255,255,255,.55); --dial-bg:#2E3E4E; --dial-bar:#004166; --dial-key:#3A4A5A; --dial-call:#00A65A; --dial-end:#E23B3B; --dial-on:#0A84FF; --pay-amt:#CE93D8; --coll-amt:#64B5F6; --coll-disc:rgba(255,255,255,.60); --coll-mr:rgba(255,255,255,.38); --coll-method:#F06292; --bill-zone:#7EC6EE; --bill-name:#FFFFFF; --bill-sub:rgba(255,255,255,.70); --tint-red:rgba(211,47,47,.20); --tint-green:rgba(56,142,60,.20); --tint-blue:rgba(25,118,210,.20); --tint-purple:rgba(186,104,200,.20); --tint-orange:rgba(255,152,0,.20); --tint-teal:rgba(0,137,123,.20); --tint-pink:rgba(194,24,91,.20); --tint-indigo:rgba(63,81,181,.22); /* ---- stat tiles in dark ---- DELIBERATELY NOT A PORT. The Android app has a real user-toggled dark mode (AppCompatDelegate.setDefaultNightMode, from Settings and the menu), but none of the tile colours above has a values-night override - they are inline literals, so they cannot have one. The label, which takes no explicit colour, DOES flip to #FFFFFF. The result on that screen is white text on a #FCE4EC pastel: invisible. Reproducing it faithfully would mean shipping an unreadable dashboard, so the fills become alpha tints over the dark card and the accents lift to their light Material counterparts, which is what every other token here already does. */ --tile-pink:#F48FB1; --tilebg-pink:rgba(236,64,122,.20); --tile-teal:#4DB6AC; --tilebg-teal:rgba(0,150,136,.20); --tile-purple:#CE93D8; --tilebg-purple:rgba(132,29,202,.24); --tile-dusty:#E59A9A; --tilebg-dusty:rgba(194,87,87,.20); --tile-red:#EF5350; --tilebg-red:rgba(229,57,53,.20); --tile-blue:#64B5F6; --tilebg-blue:rgba(33,150,243,.20); --tile-orange:#FFB74D; --tilebg-orange:rgba(251,140,0,.20); --tile-cyan:#4DD0E1; --tilebg-cyan:rgba(0,172,193,.20); --tile-label:#FFFFFF; /* ---- Cash On Hand in dark ---- Not a port, for the same reason as --tile-* above: these are inline hex in the layout, so values-night cannot reach them. On Android this whole card turns #424242 in night mode (CardView derives its background from the theme's colorBackground) while every text colour stays fixed, leaving #6E7C85 labels and #004166 figures on dark grey. Lifted here instead. */ --ledger-label:rgba(255,255,255,.70); --ledger-open:#7EC6EE; --ledger-credit:#81C784; --ledger-debit:#64B5F6; --ledger-close:#EF5350; /* #90A4AE is a mid grey that survives a dark card; #2F7ED8 does not, so the time lifts to the same blue --brand-text already uses. */ --ou-sub:rgba(255,255,255,.60); --ou-time:#7EC6EE; /* Only the two dark ones move: #007500 and #800000 are close to unreadable on a #1E1E1E card. The rest are saturated enough to survive, and shifting them would break the mapping back to the app. */ --ut-admin:#4CAF50; --ut-agent:#E57373; /* Badge fills carry white text, so they keep their values — lightening them would break the contrast that text relies on. */ --ledger-filter-bg:#1E1E1E; --ledger-go-bg:rgba(76,175,80,.18); /* At .33 over a #1E1E1E card the strip reads as near-black, so both stops move to the lighter blue and lose most of their alpha. */ --sect-grad-from:rgba(100,181,246,.28); --sect-grad-to:rgba(100,181,246,.06); /* Lines and strip segments keep their hues - they are the legend, and shifting them would break the mapping to the labels. Only the two neutrals move: #BDBDBD and #ECEFF1 are near-white and vanish on a dark card. */ --bill-line:#64B5F6; --coll-line:#81C784; --disc-line:#FFB74D; --zone-active:#64B5F6; --zone-inactive:rgba(255,255,255,.28); --zone-online:#81C784; --zone-offline:#EF5350; --zone-empty:rgba(255,255,255,.10); --zone-name:rgba(255,255,255,.85); /* Scanning Card. The card slots and result rows become surfaces rather than white; the two blues that carry white text (the strip's Scan button, the green Process bar) keep their values, since lightening them would break the contrast that text depends on. */ --nsc-bg:#121212; --nsc-tag-bg:rgba(126,198,238,.18); --nsc-tag-fg:#7EC6EE; --nsc-strip:#123044; --nsc-fill-from:rgba(100,181,246,.24); --nsc-fill-to:rgba(100,181,246,.06); --nsc-keep-from:#1E1E1E; --nsc-keep-mid:#1B1B1B; --nsc-keep-to:#181818; --nsc-keep-line:#424242; --nsc-row-line:rgba(255,255,255,.12); --nsc-rl:rgba(255,255,255,.70); --nsc-rv:#FFFFFF; --nsc-go:#2EA85C; }