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
132
133
134
135
136
137
138
|
/* Copyright 2024 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* #css_wrapper_metadata_start
* #type=style-lit
* #import=./history_clusters_shared_style.css.js
* #import=./shared_vars.css.js
* #import=//resources/cr_elements/cr_icons_lit.css.js
* #scheme=relative
* #include=history-clusters-shared-style cr-icons-lit
* #css_wrapper_metadata_end */
:host {
--indentation: 52px;
--search-query-margin: 10px;
display: block;
/* Implements the spacing between containers. */
padding-bottom: var(--cluster-padding-vertical);
}
:host([in-side-panel]) {
--cr-icon-button-margin-start: 18px;
--search-query-margin: 4px;
padding-bottom: 0;
padding-top: 8px;
}
:host([in-side-panel]) #container {
background: var(--color-side-panel-card-background);
border-radius: 12px;
overflow: hidden;
}
:host([in-side-panel][is-first]) {
padding-top: 0;
}
:host-context(.focus-outline-visible):host(:focus) #container {
box-shadow: inset 0 0 0 2px var(--cr-focus-outline-color);
}
:host([has-hidden-visits_]) #container {
/* For containers with a "Show More" button, add some additional spacing for
the pill button by adding a margin on the container. */
margin-bottom: var(--cluster-padding-vertical);
}
:host([in-side-panel]) #container url-visit:last-of-type {
margin-bottom: 8px;
}
/* We need an inner container div to apply spacing between clusters. This is
because iron-list ignores the margin on the host element. */
:host(:not([in-side-panel])) #container {
background-color: var(--cr-card-background-color);
border-radius: var(--cr-card-border-radius);
box-shadow: var(--cr-card-shadow);
padding: var(--cluster-padding-vertical) 0;
}
.label-row {
align-items: center;
display: flex;
flex-grow: 1;
justify-content: space-between;
min-height: 24px;
min-width: 0;
padding-block-end: 13px;
padding-inline-start: var(--cluster-padding-horizontal);
}
:host([in-side-panel]) .label-row {
min-height: 44px;
padding-block-end: 0;
padding-inline-start: 16px;
}
#label {
color: var(--cr-primary-text-color);
font-size: 16px;
font-weight: 500;
}
:host([in-side-panel]) #label {
font-size: .875rem; /* 14px */
line-height: calc(10/7); /* 20px */
margin-inline-end: 16px;
}
.timestamp {
font-size: 11px;
}
:host([in-side-panel]) .timestamp {
font-size: .6875rem; /* 11px */
line-height: calc(5/3); /* 20px */
}
.debug-info {
color: var(--cr-secondary-text-color);
}
#related-searches-divider {
display: none;
}
:host([in-side-panel]) #related-searches-divider {
display: block;
background-color: var(--color-history-clusters-side-panel-divider);
height: 1px;
margin: 8px 16px;
}
#related-searches {
margin: 16px var(--cluster-padding-horizontal) 0px;
}
:host([in-side-panel]) #related-searches {
/* 2px left and right margin so related searches don't overlap container
* focus indicator. */
margin: 16px 2px;
}
/*TODO(mfacey): Figure out appropriate non side panel color to show carousel
buttons. */
:host([in-side-panel]) search-query {
flex-shrink: 0;
margin-top: 0;
}
search-query:not(:last-of-type) {
margin-inline-end: var(--search-query-margin);
}
:host([in-side-panel]) search-query:first-of-type {
margin-inline-start: 16px;
}
|
