mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-03 01:38:46 +02:00
654b954ae3
This was found originally in bug 1973777. This sets the color scheme of the sidebar based off the newtab colors, so the fact that it worked was total luck. This was added for bug 1786627 for Firefox View. Instead, make firefoxview.css and common-shared work with both light and dark modes via light-dark, and since it wants the same color-scheme as the new tab, do so. That makes sure that the sidebar box and the sidebar <browser> don't get into inconsistent color schemes. This matters specially for the legacy sidebar since they don't set a background in the <browser> directly. But it's a good cleanup regardless. Differential Revision: https://phabricator.services.mozilla.com/D254857
161 lines
4.7 KiB
CSS
161 lines
4.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/. */
|
|
|
|
@import url("chrome://global/skin/in-content/common.css");
|
|
|
|
:root {
|
|
/* override --in-content-page-background from common-shared.css */
|
|
background-color: transparent;
|
|
--fxview-background-color: var(--newtab-background-color, var(--in-content-page-background));
|
|
--fxview-background-color-secondary: var(--newtab-background-color-secondary, light-dark(#ffffff, #42414d));
|
|
--fxview-element-background-hover: light-dark(
|
|
color-mix(in srgb, var(--fxview-background-color) 90%, currentColor),
|
|
color-mix(in srgb, var(--fxview-background-color) 80%, white)
|
|
);
|
|
--fxview-element-background-active: light-dark(
|
|
color-mix(in srgb, var(--fxview-background-color) 80%, currentColor),
|
|
color-mix(in srgb, var(--fxview-background-color) 60%, white)
|
|
);
|
|
--fxview-text-primary-color: var(--newtab-text-primary-color, var(--in-content-page-color));
|
|
--fxview-text-secondary-color: color-mix(in srgb, currentColor 70%, transparent);
|
|
--fxview-text-color-hover: var(--newtab-text-primary-color);
|
|
--fxview-primary-action-background: var(--newtab-primary-action-background, light-dark(#0061e0, #00ddff));
|
|
--fxview-border: var(--border-color-transparent);
|
|
--fxview-indicator-stroke-color-hover: light-dark(#deddde, #5d5c66);
|
|
|
|
/* ensure utility button hover states match those of the rest of the page */
|
|
--in-content-button-background-hover: var(--fxview-element-background-hover);
|
|
--in-content-button-background-active: var(--fxview-element-background-active);
|
|
--in-content-button-text-color-hover: var(--fxview-text-color-hover);
|
|
|
|
--fxview-sidebar-width: 288px;
|
|
--fxview-margin-top: 72px;
|
|
--fxview-card-padding-inline: 4px;
|
|
|
|
/* copy over newtab background color from activity-stream-[os].css files */
|
|
--newtab-background-color: light-dark(#f9f9fb, #2b2a33);
|
|
--fxview-card-header-font-weight: 500;
|
|
|
|
&[lwt-newtab] {
|
|
color-scheme: light;
|
|
}
|
|
&[lwt-newtab-brighttext] {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
@media (forced-colors) {
|
|
:root {
|
|
--fxview-element-background-hover: ButtonText;
|
|
--fxview-element-background-active: ButtonText;
|
|
--fxview-text-color-hover: ButtonFace;
|
|
--newtab-primary-action-background: LinkText;
|
|
--newtab-background-color: Canvas;
|
|
--newtab-background-color-secondary: Canvas;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 52rem) {
|
|
:root {
|
|
--fxview-sidebar-width: 82px;
|
|
}
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: var(--fxview-sidebar-width) 1fr;
|
|
background-color: var(--fxview-background-color);
|
|
color: var(--fxview-text-primary-color);
|
|
|
|
@media (max-width: 52rem) {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.main-container {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
min-width: 43rem;
|
|
max-width: 71rem;
|
|
}
|
|
|
|
@media (min-width: 120rem) {
|
|
.main-container {
|
|
margin-inline-start: 148px;
|
|
}
|
|
}
|
|
|
|
.page-header {
|
|
margin: 0;
|
|
}
|
|
|
|
.sticky-container {
|
|
position: sticky;
|
|
top: 0;
|
|
padding-block: var(--fxview-margin-top) 33px;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 35px;
|
|
}
|
|
|
|
.sticky-container.bottom-fade {
|
|
/*
|
|
* padding-inline is doubled to allow for the negative margin below to offset the
|
|
* container so that the box-shadows on the cards are hidden as they pass underneath.
|
|
*/
|
|
padding-inline: calc(var(--fxview-card-padding-inline) * 2);
|
|
margin: 0 calc(var(--fxview-card-padding-inline) * -1);
|
|
|
|
background: linear-gradient(to bottom, var(--fxview-background-color) 0%, var(--fxview-background-color) 95%, transparent 100%);
|
|
/* When you use HCM or set custom colors, you can't use a gradient. */
|
|
@media (forced-colors) {
|
|
background: var(--fxview-background-color);
|
|
}
|
|
}
|
|
|
|
.cards-container {
|
|
padding-inline: var(--fxview-card-padding-inline);
|
|
}
|
|
|
|
view-opentabs-contextmenu {
|
|
display: contents;
|
|
}
|
|
|
|
/* This should be supported within panel-{item,list} rather than modifying it */
|
|
panel-item::part(button) {
|
|
padding-inline-start: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
panel-item::part(button):hover {
|
|
background-color: var(--fxview-element-background-hover);
|
|
color: var(--fxview-text-color-hover);
|
|
}
|
|
|
|
panel-item::part(button):hover:active {
|
|
background-color: var(--fxview-element-background-active);
|
|
}
|
|
|
|
fxview-empty-state {
|
|
&:not([isSelectedTab]) button[slot="primary-action"] {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
/* these illustrations need a larger width otherwise they look too small */
|
|
&.synced-tabs::part(image-container) {
|
|
min-width: 250px;
|
|
}
|
|
|
|
/* center align the empty state image */
|
|
&.recentlyclosed::part(image-container) {
|
|
margin-inline-start: 50px;
|
|
}
|
|
|
|
/* align empty state text with synced tabs on recent browsing page */
|
|
&.recentlyclosed::part(main) {
|
|
padding-inline-start: 50px;
|
|
}
|
|
}
|