/* Copyright 2022 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* #css_wrapper_metadata_start
* #type=vars
* #scheme=relative
* #css_wrapper_metadata_end */
/* Common css variables for Material Design WebUI */
html {
--google-blue-50-rgb: 232, 240, 254; /* #e8f0fe */
--google-blue-50: rgb(var(--google-blue-50-rgb));
--google-blue-100-rgb: 210, 227, 252; /* #d2e3fc */
--google-blue-100: rgb(var(--google-blue-100-rgb));
--google-blue-200-rgb: 174, 203, 250; /* #aecbfa */
--google-blue-200: rgb(var(--google-blue-200-rgb));
--google-blue-300-rgb: 138, 180, 248; /* #8ab4f8 */
--google-blue-300: rgb(var(--google-blue-300-rgb));
--google-blue-400-rgb: 102, 157, 246; /* #669df6 */
--google-blue-400: rgb(var(--google-blue-400-rgb));
--google-blue-500-rgb: 66, 133, 244; /* #4285f4 */
--google-blue-500: rgb(var(--google-blue-500-rgb));
--google-blue-600-rgb: 26, 115, 232; /* #1a73e8 */
--google-blue-600: rgb(var(--google-blue-600-rgb));
--google-blue-700-rgb: 25, 103, 210; /* #1967d2 */
--google-blue-700: rgb(var(--google-blue-700-rgb));
--google-blue-800-rgb: 24, 90, 188; /* #185abc */
--google-blue-800: rgb(var(--google-blue-800-rgb));
--google-blue-900-rgb: 23, 78, 166; /* #174ea6 */
--google-blue-900: rgb(var(--google-blue-900-rgb));
--google-green-50-rgb: 230, 244, 234; /* #e6f4ea */
--google-green-50: rgb(var(--google-green-50-rgb));
--google-green-200-rgb: 168, 218, 181; /* #a8dab5 */
--google-green-200: rgb(var(--google-green-200-rgb));
--google-green-300-rgb: 129, 201, 149; /* #81c995 */
--google-green-300: rgb(var(--google-green-300-rgb));
--google-green-400-rgb: 91, 185, 116; /* #5bb974 */
--google-green-400: rgb(var(--google-green-400-rgb));
--google-green-500-rgb: 52, 168, 83; /* #34a853 */
--google-green-500: rgb(var(--google-green-500-rgb));
--google-green-600-rgb: 30, 142, 62; /* #1e8e3e */
--google-green-600: rgb(var(--google-green-600-rgb));
--google-green-700-rgb: 24, 128, 56; /* #188038 */
--google-green-700: rgb(var(--google-green-700-rgb));
--google-green-800-rgb: 19, 115, 51; /* #137333 */
--google-green-800: rgb(var(--google-green-800-rgb));
--google-green-900-rgb: 13, 101, 45; /* #0d652d */
--google-green-900: rgb(var(--google-green-900-rgb));
--google-grey-50-rgb: 248, 249, 250; /* #f8f9fa */
--google-grey-50: rgb(var(--google-grey-50-rgb));
--google-grey-100-rgb: 241, 243, 244; /* #f1f3f4 */
--google-grey-100: rgb(var(--google-grey-100-rgb));
--google-grey-200-rgb: 232, 234, 237; /* #e8eaed */
--google-grey-200: rgb(var(--google-grey-200-rgb));
--google-grey-300-rgb: 218, 220, 224; /* #dadce0 */
--google-grey-300: rgb(var(--google-grey-300-rgb));
--google-grey-400-rgb: 189, 193, 198; /* #bdc1c6 */
--google-grey-400: rgb(var(--google-grey-400-rgb));
--google-grey-500-rgb: 154, 160, 166; /* #9aa0a6 */
--google-grey-500: rgb(var(--google-grey-500-rgb));
--google-grey-600-rgb: 128, 134, 139; /* #80868b */
--google-grey-600: rgb(var(--google-grey-600-rgb));
--google-grey-700-rgb: 95, 99, 104; /* #5f6368 */
--google-grey-700: rgb(var(--google-grey-700-rgb));
--google-grey-800-rgb: 60, 64, 67; /* #3c4043 */
--google-grey-800: rgb(var(--google-grey-800-rgb));
--google-grey-900-rgb: 32, 33, 36; /* #202124 */
--google-grey-900: rgb(var(--google-grey-900-rgb));
/* --google-grey-900 + 4% white blended together. */
--google-grey-900-white-4-percent: #292a2d;
--google-purple-200-rgb: 215, 174, 251; /* #d7aefb */
--google-purple-200: rgb(var(--google-purple-200-rgb));
--google-purple-900-rgb: 104, 29, 168; /* #681da8 */
--google-purple-900: rgb(var(--google-purple-900-rgb));
--google-red-300-rgb: 242, 139, 130; /* #f28b82 */
--google-red-300: rgb(var(--google-red-300-rgb));
--google-red-500-rgb: 234, 67, 53; /* #ea4335 */
--google-red-500: rgb(var(--google-red-500-rgb));
--google-red-600-rgb: 217, 48, 37; /* #d93025 */
--google-red-600: rgb(var(--google-red-600-rgb));
--google-yellow-50-rgb: 254, 247, 224; /* #fef7e0 */
--google-yellow-50: rgb(var(--google-yellow-50-rgb));
--google-yellow-100-rgb: 254, 239, 195; /*feefc3*/
--google-yellow-100: rgb(var(--google-yellow-100-rgb));
--google-yellow-200-rgb: 253, 226, 147; /* #fde293 */
--google-yellow-200: rgb(var(--google-yellow-200-rgb));
--google-yellow-300-rgb: 253, 214, 51; /* #fdd633 */
--google-yellow-300: rgb(var(--google-yellow-300-rgb));
--google-yellow-400-rgb: 252, 201, 52; /* #fcc934 */
--google-yellow-400: rgb(var(--google-yellow-400-rgb));
--google-yellow-500-rgb: 251, 188, 4; /* #fbbc04 */
--google-yellow-500: rgb(var(--google-yellow-500-rgb));
--cr-primary-text-color: var(--google-grey-900);
--cr-secondary-text-color: var(--google-grey-700);
--cr-card-background-color: white;
--cr-shadow-color: var(--google-grey-800);
/* Vars to help define --cr-elevation-* vars. Components should use the
* --cr-elevation-* variables instead of these colors directly. */
--cr-shadow-key-color_:
color-mix(in srgb, var(--cr-shadow-color) 30%, transparent);
--cr-shadow-ambient-color_:
color-mix(in srgb, var(--cr-shadow-color) 15%, transparent);
--cr-elevation-1: var(--cr-shadow-key-color_) 0 1px 2px 0,
var(--cr-shadow-ambient-color_) 0 1px 3px 1px;
--cr-elevation-2: var(--cr-shadow-key-color_) 0 1px 2px 0,
var(--cr-shadow-ambient-color_) 0 2px 6px 2px;
--cr-elevation-3: var(--cr-shadow-key-color_) 0 1px 3px 0,
var(--cr-shadow-ambient-color_) 0 4px 8px 3px;
--cr-elevation-4: var(--cr-shadow-key-color_) 0 2px 3px 0,
var(--cr-shadow-ambient-color_) 0 6px 10px 4px;
--cr-elevation-5: var(--cr-shadow-key-color_) 0 4px 4px 0,
var(--cr-shadow-ambient-color_) 0 8px 12px 6px;
--cr-card-shadow: var(--cr-elevation-2);
--cr-checked-color: var(--google-blue-600);
--cr-focused-item-color: var(--google-grey-300);
--cr-form-field-label-color: var(--google-grey-700);
--cr-hairline-rgb: 0, 0, 0;
--cr-iph-anchor-highlight-color: rgba(var(--google-blue-600-rgb), 0.1);
--cr-link-color: var(--google-blue-700);
--cr-menu-background-color: white;
--cr-menu-background-focus-color: var(--google-grey-400);
--cr-menu-shadow: 0 2px 6px var(--paper-grey-500);
--cr-separator-color: rgba(0, 0, 0, .06);
--cr-title-text-color: rgb(90, 90, 90);
--cr-toolbar-background-color: white;
--cr-hover-background-color: rgba(var(--google-grey-900-rgb), .1);
--cr-active-background-color: rgba(var(--google-grey-900-rgb), .16);
--cr-focus-outline-color: rgba(var(--google-blue-600-rgb), .4);
--paper-grey-500: #9e9e9e;
}
@media (prefers-color-scheme: dark) {
html {
--cr-primary-text-color: var(--google-grey-200);
--cr-secondary-text-color: var(--google-grey-500);
--cr-card-background-color: var(--google-grey-900-white-4-percent);
--cr-card-shadow-color-rgb: 0, 0, 0;
--cr-checked-color: var(--google-blue-300);
--cr-focused-item-color: var(--google-grey-800);
--cr-form-field-label-color: var(--dark-secondary-color);
--cr-hairline-rgb: 255, 255, 255;
--cr-iph-anchor-highlight-color: rgba(var(--google-grey-100-rgb), 0.1);
--cr-link-color: var(--google-blue-300);
--cr-menu-background-color: var(--google-grey-900);
--cr-menu-background-focus-color: var(--google-grey-700);
--cr-menu-background-sheen: rgba(255, 255, 255, .06); /* Only dark mode. */
--cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
rgba(0, 0, 0, .15) 0 3px 6px 2px;
--cr-separator-color: rgba(255, 255, 255, .1);
--cr-title-text-color: var(--cr-primary-text-color);
--cr-toolbar-background-color: var(--google-grey-900-white-4-percent);
--cr-hover-background-color: rgba(255, 255, 255, .1);
--cr-active-background-color: rgba(var(--google-grey-200-rgb), .16);
--cr-focus-outline-color: rgba(var(--google-blue-300-rgb), .4);
}
}
@media (forced-colors: active) {
html {
/* In Windows HCM, |box-shadow| is not showing. The suggested workaround
is to use |outline| or |border| instead. The color does not matter,
since it is forced by the OS so using 'transparent'. */
--cr-focus-outline-hcm: 2px solid transparent;
--cr-border-hcm: 2px solid transparent;
}
}
/* Don't use color values past this point. Instead, create a variable that's
* set for both light and dark modes and use a single variable below. */
html {
--cr-button-edge-spacing: 12px;
--cr-button-height: 32px;
/* Spacing between policy (controlledBy) indicator and control. */
--cr-controlled-by-spacing: 24px;
/* Default max-width for input fields */
--cr-default-input-max-width: 264px;
/* The inner icon is 20px in size. The button has 8px * 2 padding. */
--cr-icon-ripple-size: 36px;
--cr-icon-ripple-padding: 8px;
--cr-icon-size: 20px;
--cr-icon-button-margin-start: 16px;
/* Shift button so ripple overlaps the end of the row. */
--cr-icon-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1);
/* TODO (johntlee): re-implement with paddings instead; */
/* These are used for row items such as radio buttons, check boxes, list
* items etc. */
--cr-section-min-height: 48px;
--cr-section-two-line-min-height: 64px;
--cr-section-padding: 20px;
--cr-section-vertical-padding: 12px;
--cr-section-indent-width: 40px;
--cr-section-indent-padding: calc(
var(--cr-section-padding) + var(--cr-section-indent-width));
--cr-section-vertical-margin: 21px;
--cr-centered-card-max-width: 680px;
--cr-centered-card-width-percentage: 0.96;
--cr-hairline: 1px solid rgba(var(--cr-hairline-rgb), .14);
--cr-separator-height: 1px;
--cr-separator-line: var(--cr-separator-height) solid
var(--cr-separator-color);
--cr-toolbar-overlay-animation-duration: 150ms;
--cr-toolbar-height: 56px;
--cr-container-shadow-height: 6px;
--cr-container-shadow-margin: calc(-1 * var(--cr-container-shadow-height));
--cr-container-shadow-max-opacity: 1;
/** MD Refresh Styles */
--cr-card-border-radius: 8px;
--cr-disabled-opacity: .38;
--cr-form-field-bottom-spacing: 16px;
--cr-form-field-label-font-size: .625rem;
--cr-form-field-label-height: 1em;
--cr-form-field-label-line-height: 1;
}
html[chrome-refresh-2023] {
/* Colors: These variables should never be overridden and should only be used
as fallback values for shared cr_elements or in UIs that do not have
the color pipeline. */
--cr-fallback-color-outline: rgb(116, 119, 117);
--cr-fallback-color-primary: rgb(11, 87, 208);
--cr-fallback-color-on-primary: rgb(255, 255, 255);
--cr-fallback-color-primary-container: rgb(211, 227, 253);
--cr-fallback-color-on-primary-container: rgb(4, 30, 73);
--cr-fallback-color-secondary-container: rgb(194, 231, 255);
--cr-fallback-color-on-secondary-container: rgb(0, 29, 53);
--cr-fallback-color-neutral-container: rgb(242, 242, 242);
--cr-fallback-color-neutral-outline: rgb(199, 199, 199);
--cr-fallback-color-surface: rgb(255, 255, 255);
--cr-fallback-color-on-surface-rgb: 31, 31, 31;
--cr-fallback-color-on-surface: rgb(var(--cr-fallback-color-on-surface-rgb));
--cr-fallback-color-surface-variant: rgb(225, 227, 225);
--cr-fallback-color-on-surface-variant: rgb(68, 71, 70);
--cr-fallback-color-on-surface-subtle: rgb(71, 71, 71);
--cr-fallback-color-inverse-primary: rgb(168, 199, 250);
--cr-fallback-color-inverse-surface: rgb(48, 48, 48);
--cr-fallback-color-inverse-on-surface: rgb(242, 242, 242);
--cr-fallback-color-tonal-container: rgb(211, 227, 253);
--cr-fallback-color-on-tonal-container: rgb(4, 30, 73);
--cr-fallback-color-tonal-outline: rgb(168, 199, 250);
--cr-fallback-color-error: rgb(179, 38, 30);
--cr-fallback-color-divider: rgb(211, 227, 253);
--cr-fallback-color-state-hover-on-prominent_: rgba(253, 252, 251, .1);
--cr-fallback-color-state-on-subtle-rgb_: 31, 31, 31;
--cr-fallback-color-state-hover-on-subtle_: rgba(
var(--cr-fallback-color-state-on-subtle-rgb_), .06);
--cr-fallback-color-state-ripple-neutral-on-subtle_: rgba(
var(--cr-fallback-color-state-on-subtle-rgb_), .08);
--cr-fallback-color-state-ripple-primary-rgb_: 124, 172, 248;
--cr-fallback-color-state-ripple-primary_: rgba(
var(--cr-fallback-color-state-ripple-primary-rgb_), 0.32);
--cr-fallback-color-base-container: rgba(105, 145, 214, .12);
--cr-fallback-color-disabled-background: rgba(
var(--cr-fallback-color-on-surface-rgb), .12);
--cr-fallback-color-disabled-foreground: rgba(
var(--cr-fallback-color-on-surface-rgb), var(--cr-disabled-opacity));
/* States */
--cr-hover-background-color: var(--color-sys-state-hover,
rgba(var(--cr-fallback-color-on-surface-rgb), .08));
--cr-hover-on-prominent-background-color: var(
--color-sys-state-hover-on-prominent,
var(--cr-fallback-color-state-hover-on-prominent_));
--cr-hover-on-subtle-background-color: var(
--color-sys-state-hover-on-subtle,
var(--cr-fallback-color-state-hover-on-subtle_));
--cr-active-background-color: var(--color-sys-state-pressed,
rgba(var(--cr-fallback-color-on-surface-rgb), .12));
--cr-active-on-primary-background-color: var(
--color-sys-state-ripple-primary,
var(--cr-fallback-color-state-ripple-primary_));
--cr-active-neutral-on-subtle-background-color: var(
--color-sys-state-ripple-neutral-on-subtle,
var(--cr-fallback-color-state-ripple-neutral-on-subtle_));
--cr-focus-outline-color: var(--color-sys-state-focus-ring,
var(--cr-fallback-color-primary));
/* Typography */
--cr-primary-text-color: var(--color-primary-foreground,
var(--cr-fallback-color-on-surface));
--cr-secondary-text-color: var(--color-secondary-foreground,
var(--cr-fallback-color-on-surface-variant));
--cr-link-color: var(--color-link-foreground-default,
var(--cr-fallback-color-primary));
/* Layout */
--cr-button-height: 36px;
/* Elevation */
--cr-shadow-color: var(--color-sys-shadow, rgb(0, 0, 0));
}
@media (prefers-color-scheme: dark) {
html[chrome-refresh-2023] {
/* Colors */
--cr-fallback-color-outline: rgb(142, 145, 143);
--cr-fallback-color-primary: rgb(168, 199, 250);
--cr-fallback-color-on-primary: rgb(6, 46, 111);
--cr-fallback-color-primary-container: rgb(8, 66, 160);
--cr-fallback-color-on-primary-container: rgb(211, 227, 253);
--cr-fallback-color-secondary-container: rgb(0, 74, 119);
--cr-fallback-color-on-secondary-container: rgb(194, 231, 255);
--cr-fallback-color-neutral-container: rgb(42, 42, 42);
--cr-fallback-color-neutral-outline: rgb(117, 117, 117);
--cr-fallback-color-surface: rgb(26, 27, 30);
--cr-fallback-color-on-surface-rgb: 227, 227, 227;
--cr-fallback-color-surface-variant: rgb(68, 71, 70);
--cr-fallback-color-on-surface-variant: rgb(196, 199, 197);
--cr-fallback-color-on-surface-subtle: rgb(199, 199, 199);
--cr-fallback-color-inverse-primary: rgb(11, 87, 208);
--cr-fallback-color-inverse-surface: rgb(227, 227, 227);
--cr-fallback-color-inverse-on-surface: rgb(31, 31, 31);
--cr-fallback-color-tonal-container: rgb(0, 74, 119);
--cr-fallback-color-on-tonal-container: rgb(194, 231, 255);
--cr-fallback-color-tonal-outline: rgb(0, 99, 155);
--cr-fallback-color-error: rgb(242, 184, 181);
--cr-fallback-color-divider: rgb(71, 71, 71);
--cr-fallback-color-state-hover-on-prominent_: rgba(31, 31, 31, .06);
--cr-fallback-color-state-on-subtle-rgb_: 253, 252, 251;
--cr-fallback-color-state-hover-on-subtle_: rgba(
var(--cr-fallback-color-state-on-subtle-rgb_), .10);
--cr-fallback-color-state-ripple-neutral-on-subtle_: rgba(
var(--cr-fallback-color-state-on-subtle-rgb_), .16);
--cr-fallback-color-state-ripple-primary-rgb_: 76, 141, 246;
--cr-fallback-color-base-container: rgba(40, 40, 40, 1);
}
}
/* Overrides to ensure disabled elements show up disabled. */
@media (forced-colors: active) {
html[chrome-refresh-2023] {
--cr-fallback-color-disabled-background: Canvas;
--cr-fallback-color-disabled-foreground: GrayText;
}
}
Codebase Browser
chromium