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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
/* - 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-shared.css");
@import url("chrome://messenger/skin/layout.css");
:host,
:root {
--in-content-button-height: 2.2em;
--in-content-button-border-radius: 3px;
--in-content-button-border-color: color-mix(in srgb, currentColor 9%, transparent);
--in-content-button-border-color-hover: color-mix(in srgb, currentColor 17%, transparent);
--in-content-sidebar-width: auto;
--menu-item-margin: 0 3px;
}
:root:not(.system-font-size) {
font: message-box;
}
@media not (prefers-contrast) {
:host,
:root {
--in-content-box-info-background: var(--layout-background-1);
--in-content-box-info-border: var(--layout-border-0);
--in-content-button-background: var(--grey-90-a10);
--in-content-button-background-hover: var(--grey-90-a20);
--in-content-button-background-active: var(--grey-90-a30);
--in-content-categories-background: var(--layout-background-2);
--in-content-categories-border: var(--in-content-categories-background);
--in-content-item-selected-unfocused: var(--color-gray-20);
--in-content-item-hover: color-mix(in srgb, currentColor 12%, transparent);
--in-content-item-selected: color-mix(in srgb, currentColor 20%, transparent);
--in-content-item-selected-text: var(--in-content-page-color);
}
@media (prefers-color-scheme: dark) {
:host,
:root {
--in-content-box-info-background: var(--layout-background-2);
--in-content-box-info-border: transparent;
--in-content-categories-background: var(--layout-background-2);
--in-content-item-selected-unfocused: rgba(249, 249, 250, 0.05);
--in-content-button-background: rgba(249, 249, 250, 0.1);
--in-content-button-background-hover: rgba(249, 249, 250, 0.15);
--in-content-button-background-active: rgba(249, 249, 250, 0.2);
--in-content-primary-button-background: #45a1ff;
--in-content-primary-button-background-hover: #65c1ff;
--in-content-primary-button-background-active: #85e1ff;
--in-content-focus-outline-color: #45a1ff;
}
}
}
@media (prefers-contrast) {
:root {
--in-content-box-info-background: transparent;
--in-content-box-info-border: currentColor;
--in-content-categories-background: transparent;
--in-content-categories-border: currentColor;
}
}
.sidebar-footer-link,
#categories > .category {
border-color: transparent !important;
}
#categories > .category {
margin-inline: 6px;
}
#categories > .category[selected] {
font-weight: 500;
}
@media not (prefers-contrast) {
#categories > .category[selected] {
background-color: var(--in-content-button-background) !important;
color: unset;
}
#categories[keyboard-navigation="true"]:focus-visible > .category[current],
#categories > .category:focus-visible {
background-color: var(--in-content-item-selected) !important;
color: var(--in-content-item-selected-text);
outline: none;
}
}
.category-name {
font-size: 1.1rem;
}
.sidebar-footer-list {
margin-inline: 0;
}
.sidebar-footer-icon {
margin: 10px;
}
.sidebar-footer-label {
margin: 0;
}
menupopup {
--panel-border-color: var(--in-content-box-border-color);
--panel-background: var(--in-content-box-background);
--panel-color: var(--in-content-text-color);
}
menupopup::part(content) {
border-radius: var(--arrowpanel-border-radius);
}
menulist > menupopup {
--panel-padding: 3px 0;
}
menupopup > :is(menu, menuitem) {
margin: var(--menu-item-margin);
min-height: 24px;
padding-block: var(--menu-item-padding);
border-radius: 3px;
}
menulist > menupopup menuseparator {
margin: 4px 8px;
}
|
