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
:root {
/* Colors from common.css */
--in-content-background-color: f9f9fa;
--in-content-border-color: #d7d7db;
--in-content-primary-button-background: rgb(0, 97, 224);
--in-content-primary-button-background-active: rgb(5, 62, 148);
--in-content-primary-button-background-hover: rgb(2, 80, 187);
--in-content-text-color: #0c0c0d;
--bg-color: var(--in-content-background-color);
--text-color: var(--in-content-text-color);
--secondary-text-color: var(--grey-50);
--border-color: var(--in-content-border-color);
--box-background: #fff;
--box-border-color: var(--in-content-border-color);
--button-background-color: var(--grey-90-a10); /* Note: this is from Photon Default button */
--button-color: var(--grey-90); /* Note: this is from Photon Default button */
--button-hover-background-color: var(--grey-90-a20); /* Note: this is from Photon Default button */
--button-active-background-color: var(--grey-90-a30); /* Note: this is from Photon Default button */
--category-background-hover: rgba(12,12,13,0.1);
--category-text: rgba(12,12,13);
--category-text-selected: var(--in-content-primary-button-background);
--fieldpair-text-color: var(--grey-50);
--sidebar-text-color: var(--category-text);
--sidebar-selected-color: var(--category-text-selected);
--sidebar-background-hover: var(--category-background-hover);
--card-background-color: var(--white-100);
--card-separator-color: var(--grey-20);
/* Dimensions from common.css #categories > .category */
--category-height: 48px;
--category-padding: 10px;
--category-transition-duration: 150ms;
--icon-ok-color: var(--green-70);
--icon-info-color: var(--grey-90);
--link-color: var(--in-content-primary-button-background);
--link-color-active: var(--in-content-primary-button-background-active);
--link-color-hover: var(--in-content-primary-button-background-hover);
--primary-button-background-color: var(--blue-60);
--primary-button-color: var(--white-100);
--primary-button-hover-background-color: var(--blue-70);
--primary-button-active-background-color: var(--blue-80);
--popup-header-background-color: var(--grey-20);
--popup-header-color: var(--grey-90);
/* Colors from Photon */
--success-background: #30e60b;
--warning-background: #fffbd6; /* from the Web Console */
--warning-border: rgba(164, 127, 0, 0.27); /* yellow-70(#a47f00) at 27% */
--warning-icon: var(--yellow-65); /* from the Web Console */
--warning-text: var(--yellow-80); /* from the Web Console */
--error-background: #fdf2f5; /* from the Web Console */
--error-border: rgba(90, 0, 2, 0.16); /* red-80(#5a0002) at 16% */
--error-icon: var(--red-60); /* from the Web Console */
--error-text: var(--red-70); /* from the Web Console */
--highlight-50: #0a84ff;
--grey-20: #ededf0; /* for ui, no special semantic */
--grey-30: #d7d7db; /* for ui, no special semantic */
--grey-50: #737373; /* for ui, no special semantic */
--grey-90: #0c0c0d; /* for ui, no special semantic */
--grey-90-a10: rgba(12, 12, 13, 0.1);
--grey-90-a20: rgba(12, 12, 13, 0.2);
--grey-90-a30: rgba(12, 12, 13, 0.3);
--grey-90-a60: rgba(12, 12, 13, 0.6);
--red-70: #a4000f; /* for ui, no special semantic */
--white-100: #fff; /* for ui, no special semantic */
--yellow-60: #d7b600; /* for ui, no special semantic */
--yellow-70: #a47f00; /* for ui, no special semantic */
/* Typography from Photon */
--body-10-font-size: 13px;
--body-10-font-weight: 400;
--body-20-font-size: 15px;
--body-20-font-weight: 400;
--body-20-font-weight-bold: 700;
--caption-10-font-size: 11px;
--caption-10-font-weight: 400;
--caption-20-font-size: 13px;
--caption-20-font-weight: 400;
--display-10-font-size: 28px;
--display-10-font-weight: 600;
--title-20-font-size: 17px;
--title-20-font-weight: 600;
--title-30-font-size: 22px;
/* Global layout vars */
--page-width: 664px;
--base-unit: 4px;
/* Global styles */
--base-font-style: message-box;
--base-font-size: var(--body-10-font-size);
--base-font-weight: var(--body-10-font-weight);
--base-line-height: 1.8;
--icon-label-font-size: var(--body-10-font-size);
--message-font-size: var(--body-10-font-size);
--button-font-size: var(--base-font-size);
--micro-font-size: 11px;
--monospace-font-family: monospace;
--card-shadow-blur-radius: var(--base-unit);
/*
* Variables particular to about:debugging
*/
--alt-heading-icon-size: calc(var(--base-unit) * 6);
--alt-heading-icon-gap: var(--base-unit);
--main-heading-icon-size: calc(var(--base-unit) * 17); /* 4px * 17 = 68px */
--main-heading-icon-gap: calc(var(--base-unit) * 3);
--main-subheading-icon-size: calc(var(--base-unit) * 4);
--main-subheading-heading-icon-gap: calc(var(--base-unit) * 2);
}
/* Dark Theme variables */
@media (prefers-color-scheme: dark) {
:root {
--in-content-background-color: rgb(28, 27, 34);
--in-content-border-color: rgba(249,249,250,0.2);
--in-content-primary-button-background: #00ddff;
--in-content-primary-button-background-active: rgb(170,242,255);
--in-content-primary-button-background-hover: rgb(128,235,255);
--in-content-text-color: #eee;
--secondary-text-color: rgb(168, 168, 168);
--box-background: rgb(35, 34, 43);
--button-background-color: rgb(72, 72, 84);
--button-color: var(--white-100);
--button-hover-background-color: rgb(92, 92, 106);
--category-background-hover: rgba(12,12,13,0.1);
--category-text: var(--text-color);
--fieldpair-text-color: var(--text-color);
--sidebar-text-color: var(--text-color);
--sidebar-background-hover: rgb(92, 92, 106);
--card-background-color: rgb(35, 34, 43);
--card-separator-color: var(--grey-50);
--icon-ok-color: var(--white-100);
--icon-info-color: var(--white-100);
--popup-header-background-color: var(--grey-50);
--popup-header-color: var(--white-100);
/*
* From common.inc.css
*/
--primary-button-background-color: #00ddff;
--primary-button-color: rgb(43,42,51);
--primary-button-active-background-color: rgb(170,242,255);
--primary-button-hover-background-color: rgb(128,235,255);
}
}
/*
* Reset some tags
*/
html {
font: var(--base-font-style);
}
body {
margin: 0;
padding: 0;
color: var(--text-color);
font-size: var(--base-font-size);
font-weight: var(--base-font-weight);
line-height: var(--base-line-height);
background: var(--bg-color);
}
dd {
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
color: var(--link-color);
}
a:hover {
color: var(--link-color-hover);
}
a:active {
color: var(--link-color-active);
}
p, h1 {
margin: 0;
}
/*
* Utils
*/
/* text that needs to be cut with … */
.ellipsis-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Technical text that should use a monospace font, such as code, error messages. */
.technical-text {
font-family: var(--monospace-font-family);
}
/* Links that need to look like current text */
.undecorated-link,
.undecorated-link:hover {
text-decoration: none;
color: currentColor;
}
/* Text needs to wrap anywhere */
.word-wrap-anywhere {
word-wrap: anywhere;
}
/*
* Typography
*/
/* Main style for heading (i.e. h1) */
.main-heading {
font-size: var(--display-10-font-size);
font-weight: var(--display-10-font-weight);
line-height: 1.2;
}
.main-heading__icon {
width: 100%;
}
.main-heading-subtitle {
font-size: var(--title-30-font-size);
font-weight: var(--title-20-font-weight);
}
/* Main style for a subheading (i.e. h2). It features an icon */
/* +--------+-------------+
* | [Icon] | Lorem ipsum |
* +--------+-------------+
*/
.main-subheading {
margin-block: calc(var(--base-unit) * 4) 0;
font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */
font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */
display: grid;
grid-template-columns: var(--main-subheading-icon-size) 1fr;
grid-column-gap: var(--main-subheading-heading-icon-gap);
align-items: center;
}
.main-subheading__icon {
width: 100%;
fill: currentColor;
-moz-context-properties: fill;
}
/* Alternative style for a heading (i.e. h1) */
.alt-heading {
font-weight: var(--title-20-font-weight);
font-size: var(--title-20-font-size);
margin-block-start: 0;
margin-block-end: calc(var(--base-unit) * 4);
}
.alt-heading--larger {
font-size: var(--title-30-font-size);
font-weight: var(--title-20-font-weight);
}
/* Alternative style for a subheading (i.e. h2). It features an icon */
/* +--------+-------------+
* | [Icon] | Lorem ipsum |
* +--------+-------------+
*/
.alt-subheading {
margin-block-start: calc(var(--base-unit) * 4);
font-weight: 600;
font-size: 1.14em;
line-height: 1.4em; /* odd value - from common.inc.css */
display: grid;
grid-template-columns: var(--alt-heading-icon-size) 1fr;
grid-column-gap: var(--alt-heading-icon-gap);
align-items: center;
}
.alt-subheading__icon {
width: 100%;
fill: currentColor;
-moz-context-properties: fill;
}
/*
* Layout elements
*/
/* for horizontal rules / separators */
.separator {
border-style: solid none none none;
border-color: var(--border-color);
}
/* adds breathing space to the separator */
.separator--breathe {
margin: calc(var(--base-unit) * 5) 0;
}
/* a series of button-like elements, layed out horizontally */
.toolbar {
display: flex;
column-gap: calc(var(--base-unit) * 3);
}
.toolbar--right-align {
justify-content: end;
}
/*
Form controls
*/
.default-button, .default-input {
box-sizing: border-box;
font-size: 1em;
}
/* Buttons from Photon */
.default-button, .primary-button {
appearance: none;
margin: 0;
height: calc(var(--base-unit) * 8);
padding-inline-start: calc(var(--base-unit) * 5);
padding-inline-end: calc(var(--base-unit) * 5);
border: none;
border-radius: calc(var(--base-unit) / 2);
font-size: var(--button-font-size);
}
/* Disabled state for buttons from Photon */
.default-button:disabled, .primary-button:disabled {
opacity: 0.4;
}
/* Smaller variant size for buttons, from Photon */
.default-button--micro, .primary-button--micro {
padding-inline-start: calc(2 * var(--base-unit));
padding-inline-end: calc(2 * var(--base-unit));
font-size: var(--micro-font-size);
height: calc(var(--base-unit) * 6);
}
/* Photon button representing a primary action */
.primary-button {
color: var(--primary-button-color);
background-color: var(--primary-button-background-color);
}
.primary-button:enabled:hover {
background: var(--primary-button-hover-background-color);
}
.primary-button:enabled:active {
background: var(--primary-button-active-background-color);
}
/* Photon standard button */
.default-button {
color: var(--button-color);
background-color: var(--button-background-color);
}
.default-button:enabled:hover {
background: var(--button-hover-background-color);
}
.default-button:enabled:active {
background: var(--button-active-background-color);
}
@media (prefers-contrast) {
.default-button,
.ghost-button,
.primary-button {
background-color: ButtonFace;
/* Add a border to make buttons visible in high contrast */
border: 1px solid ButtonText;
color: ButtonText;
}
.ghost-button {
fill: ButtonText;
}
:is(
.default-button,
.ghost-button,
.primary-button
):enabled:is(:hover, :active) {
background-color: ButtonText;
color: ButtonFace;
}
}
/* Photon ghost button. Icon button with no background */
.ghost-button {
background: transparent;
border: none;
border-radius: calc(var(--base-unit) / 2);
fill: var(--button-color);
height: calc(var(--base-unit) * 6);
padding: calc(var(--base-unit));
width: calc(var(--base-unit) * 6);
-moz-context-properties: fill;
}
.ghost-button:hover {
background: var(--button-hover-background-color);
}
.ghost-button:active {
background: var(--button-active-background-color);
}
/* Standard inputs */
.default-input {
line-height: unset;
padding: 0 calc(var(--base-unit) * 2);
height: 100%;
border: 1px solid var(--box-border-color);
border-radius: 2px;
color: var(--text-color);
background-color: var(--box-background);
}
/*
* Other UI components
*/
/*
* A small, colored badge.
* NOTE: styles borrowed from Photon's micro buttons (there aren't badges)
*/
.badge {
background: var(--grey-30);
border-radius: calc(var(--base-unit) / 2);
font-size: var(--micro-font-size);
padding: var(--base-unit) calc(2 * var(--base-unit));
}
.badge--info {
background: var(--highlight-50);
}
.badge--success {
background: var(--success-background);
}
.badge--warning {
background: var(--warning-background);
}
.badge--error {
background: var(--error-background);
}
/*
* Card UI, from Photon
*/
.card {
background-color: var(--card-background-color); /* from common.inc.css */
border-radius: var(--card-shadow-blur-radius); /* from common.inc.css */
box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */
box-sizing: border-box;
min-width: min-content;
padding-block: calc(var(--base-unit) * 5);
}
.card__heading {
font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */
font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */
}