/* * LiveLog theming. * * The active Radzen theme stylesheet ("default" = light, "dark" = dark) is rendered by the * RadzenTheme component in App.razor just before this file, and MainLayout mirrors the active * theme onto so overrides here can be scoped per theme. * * Light: stock Radzen "default" theme with the LiveLog teal brand palette. * Dark: replicates the QuantumDecoder UI look (Syncfusion Office2019Black), values extracted * from Syncfusion.Themes.Office2019Black.WPF Common/Brushes.xaml. */ :root { --rz-white: #ffffff; --rz-black: #000000; --rz-primary: #598087; --rz-primary-light: #6d8f95; --rz-primary-lighter: rgba(89, 128, 135, 0.16); --rz-primary-dark: #52767c; --rz-primary-darker: #436065; --rz-secondary: #80a4ab; --rz-secondary-light: #8fafb5; --rz-secondary-lighter: rgba(128, 164, 171, 0.2); --rz-secondary-dark: #76979d; --rz-secondary-darker: #607b80; --rz-info: #2cc8c8; --rz-info-light: #4ed1d1; --rz-info-lighter: rgba(44, 200, 200, 0.2); --rz-info-dark: #25a8a8; --rz-info-darker: #219696; --rz-success: #5dbf74; --rz-success-light: #77c98a; --rz-success-lighter: rgba(93, 191, 116, 0.16); --rz-success-dark: #4ea061; --rz-success-darker: #468f57; --rz-warning: #fac152; --rz-warning-light: #fbcb6e; --rz-warning-lighter: rgba(250, 193, 82, 0.2); --rz-warning-dark: #d2a245; --rz-warning-darker: #bc913e; --rz-danger: #f9777f; --rz-danger-light: #fa8d93; --rz-danger-lighter: rgba(249, 119, 127, 0.2); --rz-danger-dark: #d1646b; --rz-danger-darker: #bb595f; --rz-on-primary: #ffffff; --rz-on-primary-light: #ffffff; --rz-on-primary-lighter: #598087; --rz-on-primary-dark: #ffffff; --rz-on-primary-darker: #ffffff; --rz-on-secondary: #ffffff; --rz-on-secondary-light: #ffffff; --rz-on-secondary-lighter: #80a4ab; --rz-on-secondary-dark: #ffffff; --rz-on-secondary-darker: #ffffff; --rz-on-info: #ffffff; --rz-on-info-light: #ffffff; --rz-on-info-lighter: #2cc8c8; --rz-on-info-dark: #ffffff; --rz-on-info-darker: #ffffff; --rz-on-success: #ffffff; --rz-on-success-light: #ffffff; --rz-on-success-lighter: #5dbf74; --rz-on-success-dark: #ffffff; --rz-on-success-darker: #ffffff; --rz-on-warning: #ffffff; --rz-on-warning-light: #ffffff; --rz-on-warning-lighter: #fac152; --rz-on-warning-dark: #ffffff; --rz-on-warning-darker: #ffffff; --rz-on-danger: #ffffff; --rz-on-danger-light: #ffffff; --rz-on-danger-lighter: #f9777f; --rz-on-danger-dark: #ffffff; --rz-on-danger-darker: #ffffff; } :root[data-theme="dark"] { /* Office2019Black gray scale: window #262626, content #323130, hover/selected #454545 */ --rz-base: #5c5c5c; --rz-base-50: #ffffff; --rz-base-100: #f2f2f2; --rz-base-200: #e5e5e5; --rz-base-300: #b1b1b1; --rz-base-400: #989898; --rz-base-500: #8a8a8a; --rz-base-600: #787878; --rz-base-700: #454545; --rz-base-800: #323130; --rz-base-900: #262626; --rz-base-light: #b1b1b1; --rz-base-lighter: #f2f2f2; --rz-base-dark: #454545; --rz-base-darker: #262626; --rz-on-base: #ffffff; --rz-on-base-light: #262626; --rz-on-base-lighter: #262626; --rz-on-base-dark: #ffffff; --rz-on-base-darker: #ffffff; /* decoder accent blue (PrimaryBackground / PrimaryColorLight1 / Dark1 / Dark2) */ --rz-primary: #265aaa; --rz-primary-light: #2c69c7; --rz-primary-lighter: rgba(38, 90, 170, 0.24); --rz-primary-dark: #1f4a8c; --rz-primary-darker: #183b6f; --rz-on-primary-lighter: #5b8dda; /* decoder link blue (LinkForeground / LinkForegroundHovered); drives links and hover accents */ --rz-secondary: #23a6e8; --rz-secondary-light: #4fb7ec; --rz-secondary-lighter: rgba(35, 166, 232, 0.2); --rz-secondary-dark: #1488c3; --rz-secondary-darker: #1173a4; --rz-on-secondary-lighter: #23a6e8; /* decoder semantic colors (SuccessForeground / WarningForeground / ErrorForeground) */ --rz-success: #69c77a; --rz-success-light: #7ed28d; --rz-success-lighter: rgba(105, 199, 122, 0.16); --rz-success-dark: #58a867; --rz-success-darker: #4c9159; --rz-on-success-lighter: #69c77a; --rz-warning: #fb9a69; --rz-warning-light: #fcae85; --rz-warning-lighter: rgba(251, 154, 105, 0.2); --rz-warning-dark: #d97f4f; --rz-warning-darker: #bf6f45; --rz-on-warning-lighter: #fb9a69; --rz-danger: #ff5757; --rz-danger-light: #ff7373; --rz-danger-lighter: rgba(255, 87, 87, 0.2); --rz-danger-dark: #d64a4a; --rz-danger-darker: #b84040; --rz-on-danger-lighter: #ff5757; /* decoder chart series palette (Series1-7) */ --rz-series-1: #0078b6; --rz-series-2: #ba1c74; --rz-series-3: #fac100; --rz-series-4: #5550b0; --rz-series-5: #d8523e; --rz-series-6: #2eab2e; --rz-series-7: #ffa830; /* decoder tooltips are dark gray (TooltipBackground), not the Radzen info color */ --rz-tooltip-background-color: #454545; } .rz-data-row { height: 60px; } /* --- Responsive overrides (added for small-screen support) --- */ @media (max-width: 768px) { /* The default 60px data-grid row wastes vertical space on phones/tablets. */ .rz-data-row { height: 44px; } }