1/**
2 * Copyright (c) 2024-2025, The Linux Foundation.
3 * SPDX-License-Identifier: Apache-2.0
4 */
5
6.hidden {
7  display: none !important;
8}
9
10.filter-form {
11  display: flex;
12  flex-wrap: wrap;
13  gap: 10px;
14  margin-bottom: 20px;
15}
16
17.filter-form input,
18.filter-form select {
19  appearance: none;
20  font-family: var(--system-font-family);
21  font-size: 14px;
22  border-radius: 50px;
23  padding: 10px 18px;
24  background-color: var(--input-background-color);
25  color: var(--body-color);
26  transition: all 0.3s ease;
27  box-shadow: none;
28}
29
30.filter-form input:focus, .filter-form select:focus {
31  border-color: var(--input-focus-border-color);
32}
33
34.form-group {
35  flex: 1 1 200px;
36  display: grid;
37  grid-template-rows: auto 1fr;
38  margin-bottom: 10px;
39}
40
41.filter-form .form-group label {
42  color: var(--body-color);
43  font-size: 10px;
44  text-transform: uppercase;
45  padding-left: 18px;
46  margin-bottom: 5px;
47}
48
49.filter-form #family, .filter-form #series, .filter-form #soc {
50  overflow: auto;
51  border-radius: 8px;
52  padding-right: 18px;
53}
54
55.filter-form #family option:checked,
56.filter-form #series option:checked,
57.filter-form #soc option:checked {
58  background-color: var(--admonition-note-title-background-color);
59  color: var(--admonition-note-title-color);
60}
61
62.select-container {
63  position: relative;
64}
65
66.select-container::after {
67  content: "\25BC";
68  position: absolute;
69  right: 20px;
70  top: 50%;
71  transform: translateY(-50%);
72  pointer-events: none;
73  font-size: 14px;
74  color: var(--body-color);
75}
76
77.filter-form select {
78  padding-right: 40px;
79  width: 100%;
80  text-overflow: ellipsis;
81  overflow: hidden;
82  white-space: nowrap;
83}
84
85.tag-container {
86  display: flex;
87  flex-wrap: wrap;
88  border: 1px solid #ccc;
89  border-radius: 50px;
90  padding: 5px 18px;
91}
92
93.tag-container:focus-within {
94  border-color: var(--input-focus-border-color);
95}
96
97.tag {
98  background-color: var(--admonition-note-background-color);
99  color: var(--admonition-note-color);
100  padding: 2px 12px 4px 16px;
101  border-radius: 30px;
102  display: inline-flex;
103  align-items: center;
104  cursor: pointer;
105  font-size: 14px;
106  margin-right: 8px;
107}
108
109.tag:hover {
110  background-color: #0056b3;
111}
112
113.tag::after {
114  content: '\00D7'; /* multiplication sign */
115  margin-left: 8px;
116  font-size: 12px;
117  cursor: pointer;
118}
119
120.filter-form input.tag-input {
121  flex: 1;
122  border: none;
123  padding: 5px;
124  outline: none;
125  background-color: transparent;
126}
127
128#catalog {
129  display: flex;
130  flex-wrap: wrap;
131  gap: 20px;
132  justify-content: center;
133  margin-top: 20px;
134  margin-bottom: 40px;
135}
136
137.board-card {
138  flex: 1 1 calc(33.3% - 20px);
139  /* Three cards per row */
140  max-width: calc(33.3% - 20px);
141  border-radius: 8px;
142  padding: 15px 20px;
143  background-color: var(--admonition-note-background-color);
144  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
145  display: flex;
146  flex-direction: column;
147  align-items: center;
148  transition: transform 0.3s ease;
149}
150
151.board-card:hover,
152.board-card:focus {
153  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
154  transform: translateY(-5px);
155  text-decoration: none;
156}
157
158.board-card .picture {
159  width: auto;
160  height: auto;
161  min-height: 100px;
162  max-height: 180px;
163  border-radius: 4px;
164  margin: 0 auto;
165  display: flex;
166  align-items: center;
167  flex-grow: 1;
168  padding: 10px 0px;
169}
170
171.board-card .no-picture {
172  font-size: 5em;
173  color: var(--admonition-note-title-background-color);
174  justify-content: center;
175}
176
177.board-card .vendor {
178  font-size: 12px;
179  color: var(--admonition-note-color);
180  font-weight: 900;
181  margin-bottom: 18px;
182  opacity: 0.5;
183}
184
185.board-card img {
186  max-height: 100%;
187  max-width: 100%;
188  object-fit: contain;
189}
190
191.board-card .board-name {
192  font-family: var(--header-font-family);
193  margin: auto 0 5px;
194  text-align: center;
195  font-size: 18px;
196  font-weight: 500;
197  color: var(--body-color);
198  padding-top: 10px;
199}
200
201.board-card .arch {
202  margin: 5px 0;
203  text-align: center;
204  font-size: 12px;
205  font-weight: 100;
206  color: var(--body-color);
207}
208
209@media (max-width: 1024px) {
210  .board-card {
211    flex: 1 1 calc(50% - 20px);
212    max-width: calc(50% - 20px);
213  }
214}
215
216@media (max-width: 768px) {
217  .board-card {
218    flex: 1 1 calc(100% - 20px);
219    max-width: calc(100% - 20px);
220  }
221
222  .board-card .picture {
223    min-height: 60px;
224    max-height: 120px;
225  }
226}
227
228#form-options .btn {
229  font-size: 14px;
230}
231
232#form-options .btn:focus {
233  outline-color: var(--body-color) !important;
234}
235
236#catalog.compact {
237  display: block;
238  list-style-type: disc;
239  margin: 20px;
240}
241
242#catalog.compact .board-card {
243  display: list-item;
244  padding: 4px 0;
245  border: none;
246  background-color: transparent;
247  box-shadow: none;
248  list-style-position: outside;
249  max-width: none;
250}
251
252#catalog.compact .board-card .vendor,
253#catalog.compact .board-card .picture {
254  display: none;
255}
256
257#catalog.compact .board-card .board-name {
258  display: inline;
259  font-family: var(--system-font-family);
260  text-align: left;
261  font-size: 16px;
262  font-weight: normal;
263  color: var(--body-color);
264  margin: 0;
265  padding: 0;
266}
267
268#catalog.compact .board-card .arch {
269  display: inline;
270}
271
272#catalog.compact .board-card .arch::before {
273  content: " (";
274}
275
276#catalog.compact .board-card .arch::after {
277  content: ")";
278}
279
280#catalog.compact .board-card:hover {
281  box-shadow: none;
282  transform: none;
283  text-decoration: underline;
284}