1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
/* 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, #FFFFFF);
--fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 90%, currentColor);
--fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor);
--fxview-text-primary-color: var(--newtab-text-primary-color, var(--in-content-page-color));
--fxview-text-color-hover: var(--newtab-text-primary-color);
--fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0);
/* 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: 286px;
--fxview-margin-top: 72px;
}
@media (prefers-color-scheme: dark) {
:root {
--fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white);
--fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white);
--newtab-background-color-secondary: #42414d;
--newtab-primary-action-background: #00ddff;
}
}
@media (prefers-contrast) {
:root {
--fxview-element-background-hover: ButtonText;
--fxview-element-background-active: ButtonText;
--fxview-text-color-hover: ButtonFace;
--newtab-primary-action-background: LinkText;
--newtab-background-color-secondary: Canvas;
}
}
body {
display: grid;
grid-template-columns: var(--fxview-sidebar-width) 1fr;
background-color: var(--fxview-background-color);
color: var(--fxview-text-primary-color);
margin-block-start: var(--fxview-margin-top);
}
#pages {
width: 90%;
margin: 0 auto;
max-width: 1136px;
}
fxview-category-button[name="overview"]::part(icon) {
background-image: url("chrome://mozapps/skin/extensions/category-discover.svg");
}
fxview-category-button[name="opentabs"]::part(icon) {
background-image: url("chrome://mozapps/skin/extensions/category-discover.svg");
}
fxview-category-button[name="recently-closed"]::part(icon) {
background-image: url("chrome://mozapps/skin/extensions/category-discover.svg");
}
fxview-category-button[name="synced-tabs"]::part(icon) {
background-image: url("chrome://mozapps/skin/extensions/category-discover.svg");
}
fxview-category-button[name="history"]::part(icon) {
background-image: url("chrome://mozapps/skin/extensions/category-discover.svg");
}
@media (max-width: 52rem) {
:root {
--fxview-sidebar-width: 82px;
}
}
@media (min-width: 120rem) {
#pages {
margin-inline-start: 148px;
}
}
|
