spotlight/stylesheet.css at main · itsnin/spotlight · GitHub

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
/* Spotlight stylesheet */
/* Reuses the GNOME Overview search widgets, styled to fit our popup. */
/* Dark mode: background rgba(28,28,30,0.85), text #f5f5f7, selection rgba(255,255,255,0.12) */
/* Light mode: background rgba(255,255,255,0.88), text #1d1d1f, selection rgba(0,122,255,0.12) */
/* Global reset, kill inherited focus outlines or borders from parent theme. */
.spotlight-container,
.spotlight-container * {
  border: none;
  outline: none;
  box-shadow: none;
  -st-icon-style: requested;
}
/* Container, single unified window, dark default. */
.spotlight-container {
  background-color: rgba(28, 28, 30, 0.85);
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  color: #f5f5f7;
  max-height: 540px;
}
/* Light theme overrides applied when the container carries the theme-light class. */
.spotlight-container.theme-light {
  background-color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  color: #1d1d1f;
}
/* Search entry, make it blend into unified window, dark default. */
.spotlight-container > StEntry,
.spotlight-container > StEntry:focus {
  background-color: transparent;
  color: #f5f5f7;
  border: none;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 400;
  caret-color: #ffffff;
  selection-background-color: #0a84ff;
}
.spotlight-container.theme-light > StEntry,
.spotlight-container.theme-light > StEntry:focus {
  color: #1d1d1f;
  caret-color: #000000;
  selection-background-color: rgba(0, 122, 255, 0.2);
}
.spotlight-container > StEntry StLabel.hint-text {
  color: rgba(245, 245, 247, 0.35);
}
.spotlight-container.theme-light > StEntry StLabel.hint-text {
  color: rgba(29, 29, 31, 0.35);
}
/* Search results area, transparent so it blends with container. */
.spotlight-container .search-section-content {
  background-color: transparent !important;
  border-radius: 12px;
  padding: 2px;
}
/* Individual result rows, dark by default. */
.spotlight-container .list-search-result,
.spotlight-container .overview-tile,
.spotlight-container .search-provider-icon,
.spotlight-container .list-search-provider-content {
  background-color: transparent;
  color: #f5f5f7;
  border-radius: 12px;
}
.spotlight-container.theme-light .list-search-result,
.spotlight-container.theme-light .overview-tile,
.spotlight-container.theme-light .search-provider-icon,
.spotlight-container.theme-light .list-search-provider-content {
  color: #1d1d1f;
}
/* Selected and hover state, dark by default. */
.spotlight-container .list-search-result:selected,
.spotlight-container .overview-tile:selected,
.spotlight-container .list-search-result:hover,
.spotlight-container .overview-tile:hover,
.spotlight-container .search-provider-icon:hover,
.spotlight-container .list-search-provider-content:hover,
.spotlight-container .list-search-result:focus,
.spotlight-container .overview-tile:focus,
.spotlight-container .search-provider-icon:focus,
.spotlight-container .list-search-provider-content:focus {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff;
}
.spotlight-container.theme-light .list-search-result:selected,
.spotlight-container.theme-light .overview-tile:selected,
.spotlight-container.theme-light .list-search-result:hover,
.spotlight-container.theme-light .overview-tile:hover,
.spotlight-container.theme-light .search-provider-icon:hover,
.spotlight-container.theme-light .list-search-provider-content:hover,
.spotlight-container.theme-light .list-search-result:focus,
.spotlight-container.theme-light .overview-tile:focus,
.spotlight-container.theme-light .search-provider-icon:focus,
.spotlight-container.theme-light .list-search-provider-content:focus {
  background-color: rgba(0, 122, 255, 0.12) !important;
  color: #000000;
}
/* Result text colors, dark by default. */
.spotlight-container .list-search-result,
.spotlight-container .list-search-result StLabel {
  color: #f5f5f7;
}
.spotlight-container.theme-light .list-search-result,
.spotlight-container.theme-light .list-search-result StLabel {
  color: #1d1d1f;
}
.spotlight-container .list-search-result:selected StLabel,
.spotlight-container .list-search-result:hover StLabel,
.spotlight-container .list-search-result:focus StLabel {
  color: #ffffff;
}
.spotlight-container.theme-light .list-search-result:selected StLabel,
.spotlight-container.theme-light .list-search-result:hover StLabel,
.spotlight-container.theme-light .list-search-result:focus StLabel {
  color: #000000;
}
/* Provider section headers, dark by default. */
.spotlight-container .search-provider-icon {
  color: #98989d;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 12px 2px 12px;
}
.spotlight-container.theme-light .search-provider-icon {
  color: #6e6e73;
}