/* 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; --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 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; --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); /* 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; --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); } [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); /* 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); }