Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/*
* IMPORTANT NOTE
* This file is parsed in js (see client/shared/theme.js)
* so the formatting should be consistent (i.e. no '}' inside a rule).
*/
:root {
/* Text sizes */
--theme-body-font-size: 11px;
--theme-code-font-size: 11px;
--theme-code-line-height: calc(15 / 11);
/* Toolbar size (excluding borders) */
--theme-toolbar-height: 24px;
--theme-toolbar-tall-height: 28px;
/* For accessibility purposes we want to enhance the focus styling. This
* should improve keyboard navigation usability. */
--theme-focus-outline-color: var(--blue-50);
--theme-focus-outline-size: 2px;
--theme-focus-outline: var(--theme-focus-outline-size) solid var(--theme-focus-outline-color);
--theme-outline-offset: 0px;
/**
* we want the box shadow to be 2px bigger than the offset so we have a "double border"
* (without it impacting the element layout), which should work whatever
* the background-color is (e.g. a clickable element in a "selected" blue-background container)
**/
--theme-outline-box-shadow-size: calc(2px + var(--theme-focus-outline-size) + var(--theme-outline-offset));
--theme-outline-box-shadow: 0 0 0 var(--theme-outline-box-shadow-size) var(--theme-body-background);
/* Standardizes the height of items in the Watch Expressions and XHR Breakpoints panes */
--expression-item-height: 20.5px;
/* The photon animation curve */
--animation-curve: cubic-bezier(0.07, 0.95, 0, 1);
/* This should be similar to --highlighter-box-content-color from highlighter.css,
* with lower opacity than the 0.6 we apply on highlighter so this can be used as
* background color without being too bold
*/
--dimmed-highlighter-box-content-color:hsl(197,71%,73%,.3);
/*
* Photon Colors CSS Variables v3.3.2
* - We only add Photon color variables that we are actually using; unused
* variables will fail browser/base/content/test/static/browser_parsable_css.js
* - We added a few unofficial colors: a few intermediary values (e.g. Blue 45),
* and lighter variants for the dark theme (e.g. Red 20, Red 40).
*/
--magenta-50: #ff1ad9;
--magenta-65: #dd00a9;
--magenta-70: #b5007f;
--purple-50: #9400ff;
--purple-60: #8000d7;
--purple-30: #c069ff;
--blue-30: #75baff;
--blue-40: #45a1ff;
--blue-50: #0a84ff;
--blue-50-a30: rgba(10, 132, 255, 0.3);
--blue-55: #0074e8;
--blue-60: #0060df;
--blue-70: #003eaa;
--blue-80: #002275;
--teal-60: #00c8d7;
--teal-70: #008ea4;
--green-50: #30e60b;
--green-60: #12bc00;
--green-70: #058b00;
--yellow-50: #ffe900;
--yellow-60: #d7b600;
--yellow-65: #be9b00;
--yellow-70: #a47f00;
/* interpolated from yellow-70 and yellow-80 */
--yellow-75: #8b6801;
--yellow-80: #715100;
--red-05: #ffe6e8;
--red-20: #ffb3d2;
--red-40: #ff3b6b;
--red-40-a90: rgba(255, 59, 107, 0.9);
--red-50: #ff0039;
--red-60: #d70022;
--red-70: #a4000f;
--grey-10: #f9f9fa;
--grey-10-a15: rgba(249, 249, 250, 0.15);
--grey-10-a20: rgba(249, 249, 250, 0.2);
--grey-10-a25: rgba(249, 249, 250, 0.25);
--grey-10-a30: rgba(249, 249, 250, 0.3);
--grey-20: #ededf0;
--grey-25: #e0e0e2;
--grey-30: #d7d7db;
--grey-35: #c3c3c6;
--grey-40: #b1b1b3;
--grey-43: #a4a4a4;
--grey-45: #939395;
--grey-50: #737373;
--grey-55: #5c5c5f;
--grey-60: #4a4a4f;
--grey-70: #38383d;
--grey-80: #2a2a2e;
--grey-85: #1b1b1d;
--grey-90: #0c0c0d;
--grey-90-a05: rgba(12, 12, 13, 0.05);
--grey-90-a10: rgba(12, 12, 13, 0.1);
--grey-90-a15: rgba(12, 12, 13, 0.15);
--grey-90-a20: rgba(12, 12, 13, 0.2);
--grey-90-a30: rgba(12, 12, 13, 0.3);
}
:root.theme-light {
--theme-body-background: white;
--theme-body-emphasized-background: var(--grey-10);
--theme-body-alternate-emphasized-background: #f0f9fe;
--theme-sidebar-background: white;
/* Toolbar */
--theme-tab-toolbar-background: var(--grey-10);
--theme-toolbar-background: var(--grey-10);
--theme-toolbar-color: var(--grey-90);
--theme-toolbar-selected-color: var(--blue-60);
--theme-toolbar-highlighted-color: var(--green-60);
--theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
--theme-toolbar-background-alt: #f5f5f5;
--theme-toolbar-background-highlighted: #b9dcff;
--theme-toolbar-error-background: var(--red-05);
--theme-toolbar-hover: var(--grey-20);
--theme-toolbar-hover-active: var(--grey-20);
--theme-toolbar-separator: var(--grey-90-a10);
/* Toolbar buttons */
--toolbarbutton-background: var(--grey-10);
--toolbarbutton-hover-background: var(--grey-20);
--toolbarbutton-focus-background: var(--grey-20);
--toolbarbutton-focus-color: var(--grey-70);
--toolbarbutton-checked-background: var(--blue-55);
--toolbarbutton-checked-focus-background: var(--blue-60);
--toolbarbutton-checked-color: #ffffff;
/* Buttons */
--theme-button-background: rgba(12, 12, 13, 0.05);
--theme-button-active-background: rgba(12, 12, 13, 0.1);
/* Accordion headers */
--theme-accordion-header-background: var(--theme-toolbar-background);
--theme-accordion-header-hover: var(--theme-toolbar-hover);
/* Selection */
--theme-selection-background: var(--blue-55);
--theme-selection-background-hover: #f0f9fe;
--theme-selection-focus-background: var(--toolbarbutton-hover-background);
--theme-selection-color: #ffffff;
/* Border color that splits the toolbars/panels/headers. */
--theme-splitter-color: var(--grey-25);
--theme-emphasized-splitter-color: var(--grey-30);
--theme-emphasized-splitter-color-hover: var(--grey-40);
/* Icon colors */
--theme-icon-color: rgba(12, 12, 13, 0.8);
--theme-icon-dimmed-color: rgba(135, 135, 137, 0.9);
--theme-icon-checked-color: var(--blue-60);
--theme-icon-error-color: var(--red-60);
--theme-icon-warning-color: var(--yellow-65);
/* Text color */
--theme-comment: var(--grey-55);
--theme-body-color: var(--grey-70);
--theme-link-color: var(--blue-60);
--theme-text-color-alt: var(--grey-50);
--theme-text-color-inactive: var(--grey-40);
--theme-text-color-error: var(--red-60);
--theme-text-color-strong: var(--grey-90);
--theme-stack-trace-text: var(--red-70);
--theme-highlight-green: var(--green-70);
--theme-highlight-blue: var(--blue-55);
--theme-highlight-purple: var(--blue-70);
--theme-highlight-red: var(--magenta-65);
--theme-highlight-yellow: #fff89e;
/* These theme-highlight color variables have not been photonized. */
--theme-highlight-bluegrey: #0072ab;
--theme-highlight-lightorange: #d97e00;
--theme-highlight-orange: #f13c00;
--theme-highlight-pink: #b82ee5;
--theme-highlight-gray: #dde1e4;
/* Colors that were used in Graphs in the old performance tools, which was removed.
--theme-graphs-purple: #b693eb;
--theme-graphs-yellow: #efc052;
--theme-graphs-orange: #d97e00;
--theme-graphs-grey: #cccccc;
--theme-graphs-full-red: #f00;
/* Common popup styles(used by HTMLTooltip and autocomplete) */
--theme-popup-background: Field;
--theme-popup-color: FieldText;
--theme-popup-border-color: ThreeDShadow;
--theme-popup-dimmed: hsla(0, 0%, 80%, 0.3);
/* Styling for devtool buttons */
--theme-toolbarbutton-background: none;
--theme-toolbarbutton-color: var(--grey-70);
--theme-toolbarbutton-hover-background: var(--grey-90-a05);
--theme-toolbarbutton-checked-background: var(--grey-90-a10);
--theme-toolbarbutton-checked-color: var(--grey-90);
--theme-toolbarbutton-checked-hover-background: var(--grey-90-a15);
--theme-toolbarbutton-checked-hover-color: var(--grey-90);
--theme-toolbarbutton-active-background: var(--grey-90-a20);
--theme-toolbarbutton-active-color: var(--grey-90);
/* Used for select elements */
/* Note: we don't use the pair of system properties Field/FieldText here (like
* above), because this lightgrey background makes it possible to remove the
* border, which is more stylish. The downsides is that we don't adjust with
* the OS' dark mode setting. Hopefully this trade-off is OK.
*/
--theme-select-background: var(--grey-20);
--theme-select-color: #0c0c0d;
--theme-select-hover-border-color: var(--grey-30);
/* Warning colors */
--theme-warning-background: hsl(54, 100%, 92%);
--theme-warning-border: rgba(215, 182, 0, 0.28); /* Yellow 60 + opacity */
--theme-warning-color: var(--yellow-80);
/* Flashing colors used to highlight updates */
--theme-contrast-background: #fff699; /* = Yellow 50-a40 on white */
--theme-contrast-background-alpha: rgba(255, 233, 0, 0.4); /* Yellow 50-a40 */
--theme-contrast-color: black;
/* This is used for search/filter results underline and need to have a 3:1 contrast against the background */
--theme-contrast-border: var(--yellow-70);
}
:root.theme-dark {
--theme-body-background: #232327;
--theme-body-emphasized-background: var(--grey-70);
--theme-body-alternate-emphasized-background: #353b48;
--theme-sidebar-background: #18181a;
/* Toolbar */
--theme-tab-toolbar-background: var(--grey-90);
--theme-toolbar-background: #18181a;
--theme-toolbar-color: var(--grey-40);
--theme-toolbar-selected-color: white;
--theme-toolbar-highlighted-color: var(--green-50);
--theme-toolbar-background-hover: #232327;
--theme-toolbar-background-alt: var(--grey-85);
--theme-toolbar-background-highlighted: var(--blue-60);
--theme-toolbar-error-background: var(--red-70);
--theme-toolbar-hover: #232327;
--theme-toolbar-hover-active: #252526;
--theme-toolbar-separator: var(--grey-10-a20);
/* Toolbar buttons */
--toolbarbutton-background: var(--grey-70);
--toolbarbutton-hover-background: var(--grey-70);
--toolbarbutton-focus-background: var(--grey-60);
--toolbarbutton-focus-color: var(--grey-30);
--toolbarbutton-checked-background: #204e8a;
--toolbarbutton-checked-focus-background: var(--blue-60);
--toolbarbutton-checked-color: #ffffff;
/* Buttons */
--theme-button-background: rgba(249, 249, 250, 0.1);
--theme-button-active-background: rgba(249, 249, 250, 0.15);
/* Accordion headers */
--theme-accordion-header-background: #232327;
--theme-accordion-header-hover: #2a2a2e;
/* Selection */
--theme-selection-background: #204e8a;
--theme-selection-background-hover: #353b48;
--theme-selection-focus-background: var(--grey-60);
--theme-selection-color: #ffffff;
/* Border color that splits the toolbars/panels/headers. */
--theme-splitter-color: var(--grey-70);
--theme-emphasized-splitter-color: var(--grey-60);
--theme-emphasized-splitter-color-hover: var(--grey-50);
/* Icon colors */
--theme-icon-color: rgba(249, 249, 250, 0.7);
--theme-icon-dimmed-color: rgba(147, 147, 149, 0.9);
--theme-icon-checked-color: var(--blue-30);
--theme-icon-error-color: var(--red-40);
--theme-icon-warning-color: var(--yellow-60);
/* Text color */
--theme-comment: var(--grey-45);
--theme-body-color: var(--grey-40);
--theme-link-color: #75bfff;
--theme-text-color-alt: var(--grey-45);
--theme-text-color-inactive: var(--grey-50);
--theme-text-color-error: var(--grey-10);
--theme-text-color-strong: var(--grey-30);
--theme-stack-trace-text: var(--red-20);
--theme-highlight-green: #86de74;
--theme-highlight-blue: #75bfff;
--theme-highlight-purple: #b98eff;
--theme-highlight-red: #ff7de9;
--theme-highlight-yellow: #fff89e;
/* These theme-highlight color variables have not been photonized. */
--theme-highlight-bluegrey: #5e88b0;
--theme-highlight-lightorange: #d99b28;
--theme-highlight-orange: #d96629;
--theme-highlight-pink: #df80ff;
--theme-highlight-gray: #e9f4fe;
/* Colors that were used in Graphs in the old performance tools, which was removed.
--theme-graphs-purple: #df80ff;
--theme-graphs-yellow: #d99b28;
--theme-graphs-orange: #d96629;
--theme-graphs-grey: #757873;
--theme-graphs-full-red: #f00;
/* Common popup styles(used by HTMLTooltip and autocomplete) */
--theme-popup-background: var(--grey-60);
--theme-popup-color: rgb(249, 249, 250);
--theme-popup-border-color: #27272b;
--theme-popup-dimmed: rgba(249, 249, 250, 0.1);
/* Styling for devtool buttons */
--theme-toolbarbutton-background: none;
--theme-toolbarbutton-color: var(--grey-40);
--theme-toolbarbutton-hover-background: var(--grey-10-a15);
--theme-toolbarbutton-checked-background: var(--grey-10-a20);
--theme-toolbarbutton-checked-color: var(--grey-30);
--theme-toolbarbutton-checked-hover-background: var(--grey-10-a25);
--theme-toolbarbutton-checked-hover-color: var(--grey-30);
--theme-toolbarbutton-active-background: var(--grey-10-a30);
--theme-toolbarbutton-active-color: var(--grey-30);
/* Used for select elements */
--theme-select-background: var(--grey-60);
--theme-select-color: #fff;
--theme-select-hover-border-color: var(--grey-50);
/* Warning colors */
--theme-warning-background: hsl(42, 37%, 19%);
--theme-warning-border: hsl(60, 30%, 26%);
--theme-warning-color: hsl(43, 94%, 81%);
/* Flashing colors used to highlight updates */
--theme-contrast-background: #4f4b1f; /* = Yellow 50-a20 on body background */
--theme-contrast-background-alpha: rgba(255, 233, 0, 0.15); /* Yellow 50-a15 */
--theme-contrast-color: white;
--theme-contrast-border: var(--yellow-65);
}