Andrea Marchesini
2c348757b6
Differential Revision: https://phabricator.services.mozilla.com/D311440
300 lines
8.7 KiB
CSS
300 lines
8.7 KiB
CSS
/* 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
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
/* Each container color carries a legacy literal (used when browser.nova.enabled
|
|
is off) and, when nova is on, refreshed design-system tokens. Kept in sync
|
|
with CONTAINER_COLORS in ContextualIdentityService: `code` matches the legacy
|
|
literal, `codeNova` matches the nova stroke shade (--color-<name>-40).
|
|
|
|
Under nova each container surface picks a dedicated palette shade:
|
|
--identity-fill-color light 60 / dark 20 (URL-bar pill, menus, panel subviews,
|
|
preferences list, tab-row indicators)
|
|
--identity-stroke-color shade 40 (tab stroke, URL-bar badge, all-tabs indicator, preferences color swatches) */
|
|
.identity-color-blue {
|
|
--identity-tab-color: #37adff;
|
|
--identity-icon-color: #37adff;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--identity-fill-color: light-dark(var(--color-blue-60), var(--color-blue-20));
|
|
--identity-stroke-color: var(--color-blue-40);
|
|
}
|
|
}
|
|
|
|
.identity-color-cyan {
|
|
--identity-tab-color: #00c79a;
|
|
--identity-icon-color: #00c79a;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--identity-fill-color: light-dark(var(--color-cyan-60), var(--color-cyan-20));
|
|
--identity-stroke-color: var(--color-cyan-40);
|
|
}
|
|
}
|
|
|
|
.identity-color-green {
|
|
--identity-tab-color: #51cd00;
|
|
--identity-icon-color: #51cd00;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--identity-fill-color: light-dark(var(--color-green-60), var(--color-green-20));
|
|
--identity-stroke-color: var(--color-green-40);
|
|
}
|
|
}
|
|
|
|
.identity-color-yellow {
|
|
--identity-tab-color: #ffcb00;
|
|
--identity-icon-color: #ffcb00;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--identity-fill-color: light-dark(var(--color-yellow-60), var(--color-yellow-20));
|
|
--identity-stroke-color: var(--color-yellow-40);
|
|
}
|
|
}
|
|
|
|
.identity-color-orange {
|
|
--identity-tab-color: #ff9f00;
|
|
--identity-icon-color: #ff9f00;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--identity-fill-color: light-dark(var(--color-orange-60), var(--color-orange-20));
|
|
--identity-stroke-color: var(--color-orange-40);
|
|
}
|
|
}
|
|
|
|
.identity-color-red {
|
|
--identity-tab-color: #ff613d;
|
|
--identity-icon-color: #ff613d;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--identity-fill-color: light-dark(var(--color-red-60), var(--color-red-20));
|
|
--identity-stroke-color: var(--color-red-40);
|
|
}
|
|
}
|
|
|
|
.identity-color-pink {
|
|
--identity-tab-color: #ff4bda;
|
|
--identity-icon-color: #ff4bda;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--identity-fill-color: light-dark(var(--color-pink-60), var(--color-pink-20));
|
|
--identity-stroke-color: var(--color-pink-40);
|
|
}
|
|
}
|
|
|
|
.identity-color-purple {
|
|
--identity-tab-color: #af51f5;
|
|
--identity-icon-color: #af51f5;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--identity-fill-color: light-dark(var(--color-purple-60), var(--color-purple-20));
|
|
--identity-stroke-color: var(--color-purple-40);
|
|
}
|
|
}
|
|
|
|
.identity-color-violet {
|
|
--identity-tab-color: #764edd;
|
|
--identity-icon-color: #764edd;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--identity-fill-color: light-dark(var(--color-violet-60), var(--color-violet-20));
|
|
--identity-stroke-color: var(--color-violet-40);
|
|
}
|
|
}
|
|
|
|
.identity-color-gray {
|
|
--identity-tab-color: currentColor;
|
|
--identity-icon-color: currentColor;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--identity-fill-color: light-dark(var(--color-gray-60), var(--color-gray-20));
|
|
--identity-stroke-color: var(--color-gray-40);
|
|
}
|
|
}
|
|
|
|
/* Tinted background shared by every nova container fill surface (URL-bar pill,
|
|
menus, panel subviews, preferences list, tab-row indicators). */
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
[class*="identity-color-"] {
|
|
--identity-fill-tint: color-mix(in srgb, var(--identity-fill-color) 15%, transparent);
|
|
}
|
|
}
|
|
|
|
.identity-icon-fence {
|
|
--identity-icon: url("resource://usercontext-content/fence.svg");
|
|
}
|
|
|
|
.identity-icon-fingerprint {
|
|
--identity-icon: url("resource://usercontext-content/fingerprint.svg");
|
|
}
|
|
|
|
.identity-icon-briefcase {
|
|
--identity-icon: url("resource://usercontext-content/briefcase.svg");
|
|
}
|
|
|
|
.identity-icon-dollar {
|
|
--identity-icon: url("resource://usercontext-content/dollar.svg");
|
|
}
|
|
|
|
.identity-icon-cart {
|
|
--identity-icon: url("resource://usercontext-content/cart.svg");
|
|
}
|
|
|
|
.identity-icon-circle {
|
|
--identity-icon: url("resource://usercontext-content/circle.svg");
|
|
}
|
|
|
|
.identity-icon-vacation {
|
|
--identity-icon: url("resource://usercontext-content/vacation.svg");
|
|
}
|
|
|
|
.identity-icon-gift {
|
|
--identity-icon: url("resource://usercontext-content/gift.svg");
|
|
}
|
|
|
|
.identity-icon-food {
|
|
--identity-icon: url("resource://usercontext-content/food.svg");
|
|
}
|
|
|
|
.identity-icon-fruit {
|
|
--identity-icon: url("resource://usercontext-content/fruit.svg");
|
|
}
|
|
|
|
.identity-icon-pet {
|
|
--identity-icon: url("resource://usercontext-content/pet.svg");
|
|
}
|
|
|
|
.identity-icon-tree {
|
|
--identity-icon: url("resource://usercontext-content/tree.svg");
|
|
}
|
|
|
|
.identity-icon-chill {
|
|
--identity-icon: url("resource://usercontext-content/chill.svg");
|
|
}
|
|
|
|
#userContext-indicator {
|
|
height: 16px;
|
|
width: 16px;
|
|
margin-inline-start: 3px;
|
|
}
|
|
|
|
#userContext-label {
|
|
color: var(--identity-tab-color);
|
|
margin: 0;
|
|
max-width: 8em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
color: var(--identity-fill-color);
|
|
/* Reorder hack; fix the DOM order and drop it once nova ships (Bug 2046350). */
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
#userContext-icons {
|
|
align-items: center;
|
|
|
|
/* When nova is enabled the container indicator is rendered as a pill
|
|
(icon + name) with a tinted background derived from the container color. */
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
gap: var(--space-xxsmall);
|
|
padding: var(--space-xxsmall) var(--space-small);
|
|
border-radius: var(--border-radius-circle);
|
|
background-color: var(--identity-fill-tint);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: color-mix(in srgb, var(--identity-fill-color) 25%, transparent);
|
|
}
|
|
|
|
&:hover:active {
|
|
background-color: color-mix(in srgb, var(--identity-fill-color) 40%, transparent);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
|
|
background-color: var(--identity-icon-color);
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
margin: 0 calc(var(--tab-border-radius) / 2);
|
|
position: relative;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
background-color: var(--identity-stroke-color);
|
|
height: 4px;
|
|
border-radius: 4px;
|
|
/* From the favicon center to the close button center. */
|
|
margin-inline: calc(var(--tab-inline-padding) + 8px) calc(var(--tab-inline-padding) / 2 + 12px);
|
|
inset-block-start: -6px;
|
|
}
|
|
|
|
#tabbrowser-tabs[orient="vertical"] & {
|
|
height: auto;
|
|
width: 2px;
|
|
margin: calc(var(--tab-border-radius) / 2) 0;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
width: 4px;
|
|
height: 16px;
|
|
margin: 0;
|
|
inset-inline-end: -9px;
|
|
inset-block-start: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
/* Pinned tabs have no label or close button, so center the stroke. */
|
|
.tabbrowser-tab[usercontextid][pinned] > .tab-stack > .tab-background > .tab-context-line {
|
|
width: 16px;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
/* Extend the clip region so the trailing-gap stroke isn't clipped. */
|
|
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[usercontextid][pinned] {
|
|
overflow-clip-margin: content-box 12px;
|
|
}
|
|
}
|
|
|
|
.userContext-icon,
|
|
.subviewbutton[usercontextid] > .toolbarbutton-icon,
|
|
#userContext-indicator {
|
|
background-image: var(--identity-icon);
|
|
-moz-context-properties: fill;
|
|
fill: var(--identity-icon-color);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
#userContext-indicator {
|
|
/* Reorder hack; fix the DOM order and drop it once nova ships (Bug 2046350). */
|
|
order: 1;
|
|
margin-inline-start: 0;
|
|
fill: var(--identity-fill-color);
|
|
}
|
|
}
|
|
|
|
.menuitem-iconic[data-usercontextid] {
|
|
--menuitem-icon: var(--identity-icon);
|
|
--menuitem-icon-fill: var(--identity-icon-color);
|
|
|
|
/* When nova is enabled the container icon sits inside a round tinted
|
|
background, mirroring the about:preferences#containers list. */
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--menuitem-icon-fill: var(--identity-fill-color);
|
|
|
|
> .menu-icon {
|
|
width: var(--icon-size-large);
|
|
height: var(--icon-size-large);
|
|
padding: var(--space-xsmall);
|
|
border-radius: var(--border-radius-circle);
|
|
background-color: var(--identity-fill-tint);
|
|
}
|
|
}
|
|
}
|