Custom Stylesheets
Usage
Admin users of rWeb can upload custom stylesheets to alter rWeb's appearance for all users. rWeb is designed around many CSS variables (properties), which will then use the values defined in the uploaded sheet instead of rWeb's default values.
warning
It is possible to put any CSS in this file, which will subsequently be loaded for all rWeb users. CSS should only be taken from trusted sources. Arbitrary CSS is not guaranteed to continue to function the same way across future rWeb upgrades.
The sections below list the supported variables that can be overwritten along with the current default values used by rWeb.
Light Mode
body {
--color-text: black;
--color-text-disabled: var(--rr-gray-700);
--color-text-selected: var(--rr-blue-800);
--color-text-danger: var(--rr-red-600);
--color-text-subtle: var(--rr-gray-700);
--color-text-inverse: white;
--color-link: var(--rr-blue-600);
--color-surface-sunken: var(--rr-tan-50);
--color-surface: white;
--color-surface-raised: white;
--color-surface-overlay: white;
--color-border: var(--rr-gray-150);
--color-border-input: var(--rr-gray-400);
--color-border-disabled: var(--rr-gray-100);
--color-border-selected: var(--rr-blue-500);
--color-border-danger: var(--rr-red-600);
--color-border-warning: var(--rr-orange-300);
--color-border-success: #64e572;
--color-led-red: red;
--color-led-yellow: #ffd900;
--color-led-green: green;
--color-background-accent-subtle: var(--rr-tan-50);
--color-background-input: white;
--color-background-input-hovered: var(--rr-gray-100);
--color-background-input-pressed: var(--rr-gray-200);
--color-background-neutral: rgb(from var(--rr-blue-800) r g b / 10%);
--color-background-neutral-hovered: rgb(from var(--rr-blue-800) r g b / 15%);
--color-background-neutral-pressed: rgb(from var(--rr-blue-800) r g b / 20%);
--color-background-neutral-subtle: transparent;
--color-background-neutral-subtle-hovered: #091E420F;
--color-background-neutral-subtle-pressed: #091E4224;
--color-background-selected: var(--rr-blue-100);
--color-background-selected-hovered: var(--rr-blue-200);
--color-background-selected-pressed: var(--rr-blue-300);
--color-background-brand-bold: var(--rr-blue-500);
--color-background-brand-bold-hovered: var(--rr-blue-600);
--color-background-brand-bold-pressed: var(--rr-blue-700);
--color-background-info: var(--rr-blue-100);
--color-background-danger: var(--rr-red-100);
--color-background-danger-bold: var(--rr-red-600);
--color-background-danger-bold-hovered: var(--rr-red-700);
--color-background-danger-bold-pressed: var(--rr-red-800);
--color-background-brand-subtle: var(--rr-blue-400);
--color-blanket: #050C1F75;
--shadow-surface-raised: 0px 1px 1px rgba(9, 30, 66, 0.25),0px 0px 1px rgba(9, 30, 66, 0.31);
--shadow-surface-overlay: 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31);
--color-chart-grid: var(--rr-gray-300);
/* These chart colors are now only used for lines, surfaces and accents. Not for text */
--color-chart-in: #24cbe5;
--color-chart-out: #64e572;
--color-chart-clean: #64e572; /* usually dashed */
--color-chart-attack: #d5331e;
--color-chart-monitored: #ff991f;
--color-chart-dropped: #ff00ff;
--color-chart-warning: #ffd900;
--color-chart-dropped-area: #ffe6e6;
--color-chart-monitored-area: #ebebdd;
--color-chart-clean-area: #c7f7cc;
--color-accent-auto: #24cbe5;
--color-accent-monitor: #ffd900;
--color-accent-force-on: #d5331e;
--color-accent-off: gray;
}
Dark Mode
body.darkMode {
--color-text: var(--rr-gray-50);
--color-text-disabled: var(--rr-gray-400);
--color-text-selected: var(--rr-blue-200);
--color-text-danger: var(--rr-red-500);
--color-text-subtle: var(--rr-gray-300);
--color-text-inverse: black;
--color-link: var(--color-text);
--color-surface-sunken: var(--rr-gray-1000);
--color-surface: var(--rr-gray-950);
--color-surface-raised: var(--rr-gray-900);
--color-surface-overlay: var(--rr-gray-900);
--color-border: var(--rr-gray-900);
--color-border-input: var(--rr-gray-600);
--color-border-disabled: var(--rr-gray-800);
--color-border-selected: var(--rr-blue-500);
--color-border-danger: var(--rr-red-700);
--color-border-warning: var(--rr-orange-300);
--color-border-success: #64e572;
--color-led-red: red;
--color-led-yellow: #ffd900;
--color-led-green: #64e572;
--color-background-accent-subtle: var(--rr-gray-1000);
--color-background-input: var(--rr-gray-900);
--color-background-input-hovered: var(--rr-gray-800);
--color-background-input-pressed: var(--rr-gray-700);
--color-background-neutral: rgb(from var(--rr-blue-100) r g b / 15%);
--color-background-neutral-hovered: rgb(from var(--rr-blue-100) r g b / 30%);
--color-background-neutral-pressed: rgb(from var(--rr-blue-100) r g b / 40%);
--color-background-neutral-subtle: transparent;
--color-background-neutral-subtle-hovered: #A1BDD914;
--color-background-neutral-subtle-pressed: #A6C5E229;
--color-background-selected: var(--rr-blue-900);
--color-background-selected-hovered: var(--rr-blue-800);
--color-background-selected-pressed: var(--rr-blue-700);
--color-background-brand-bold: var(--rr-blue-400);
--color-background-brand-bold-hovered: var(--rr-blue-300);
--color-background-brand-bold-pressed: var(--rr-blue-200);
--color-background-info: var(--rr-blue-900);
--color-background-danger: var(--rr-red-900);
--color-background-danger-bold: var(--rr-red-500);
--color-background-danger-bold-hovered: var(--rr-red-400);
--color-background-danger-bold-pressed: var(--rr-red-300);
--color-background-brand-subtle: var(--rr-blue-700);
--color-blanket: #10121499;
--shadow-surface-raised: 0px 1px 1px rgba(9, 30, 66, 0.25),0px 0px 1px rgba(9, 30, 66, 0.31);
--shadow-surface-overlay: 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31);
--color-chart-grid: var(--rr-gray-800);
/* These chart colors are now only used for lines, surfaces and accents. Not for text */
--color-chart-in: #00a3bf;
--color-chart-out: #57d9a3;
--color-chart-clean: #57d9a3; /* usually dashed */
--color-chart-attack: #df5353;
--color-chart-monitored: #bb6600;
--color-chart-dropped: #ff00ff;
--color-chart-warning: #ff991f;
--color-chart-dropped-area: #e9a8a8;
--color-chart-monitored-area: #ffc9af;
--color-chart-clean-area: #bbfcdb;
--color-accent-auto: #00a3bf;
--color-accent-monitor: #ff991f;
--color-accent-force-on: #df5353;
--color-accent-off: gray;
}