blob: cac83df115a0124f5824644fdf08dc80c703d50b (
plain)
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
|
/* 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://messenger/skin/colors.css");
/* This file defines the colors used for the main layout of the application.
* Colors that define a containers for content or thier text color should go
* here. Colors that define widgets or content should not */
/* Background 0 should be used for the main content or page background */
/* Background 1 should be used for center panes and secondary sidebars */
/* Background 2 should be used for primary sidebars */
/* Background 3 should be used for blocks of content inside the main content */
/* Background 4 should be used for elements inside the main content */
/* Color 0 should be used when the text needs more emphasis */
/* Color 1 should be used for the main text color */
/* Color 2 should be used when the text needs less emphasis */
/* Color 2 should be used when the text need even less emphasis */
/* Border 0 should be used for separation from main layout sections */
/* Border 1 should be used when the separation is part of the element */
:host,
:root {
--layout-background-0: var(--color-white);
--layout-background-1: var(--color-gray-05);
--layout-background-2: var(--color-gray-10);
--layout-background-3: var(--color-gray-20);
--layout-background-4: var(--color-gray-30);
--layout-color-0: var(--color-black);
--layout-color-1: var(--color-gray-90);
--layout-color-2: var(--color-gray-70);
--layout-color-3: var(--color-gray-50);
--layout-border-0: var(--color-gray-30);
--layout-border-1: var(--color-gray-40);
--layout-border-2: var(--color-gray-50);
}
@media (prefers-color-scheme: dark) {
:host,
:root {
--layout-background-0: var(--color-gray-90);
--layout-background-1: var(--color-gray-80);
--layout-background-2: var(--color-gray-70);
--layout-background-3: var(--color-gray-60);
--layout-background-4: var(--color-gray-50);
--layout-color-0: var(--color-white);
--layout-color-1: var(--color-gray-10);
--layout-color-2: var(--color-gray-30);
--layout-color-3: var(--color-gray-50);
--layout-border-0: var(--color-gray-70);
--layout-border-1: var(--color-gray-60);
--layout-border-2: var(--color-gray-50);
}
}
@media (prefers-contrast) {
:host,
:root:not(:-moz-lwtheme) {
--layout-background-0: Window;
--layout-background-1: -moz-Dialog;
--layout-background-2: transparent;
--layout-background-3: transparent;
--layout-background-4: transparent;
--layout-color-0: WindowText;
--layout-color-1: -moz-DialogText;
--layout-color-2: currentColor;
--layout-color-3: currentColor;
--layout-border-0: currentColor;
--layout-border-1: currentColor;
--layout-border-2: currentColor;
}
}
|
