appscms-tools-theme 4.7.4 → 4.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_data/footer/en/data.json +264 -2
- data/_data/header/en/data.json +1 -5
- data/_data/home/en/en.json +1 -169
- data/_data/home-1/en/en.json +237 -1
- data/_includes/alternates/alternates.html +25 -72
- data/_includes/appscms/head/head.html +7 -7
- data/_includes/appscms/navbars/toolbar.html +205 -213
- data/_includes/head/index.html +4 -0
- data/_includes/header/index.html +28 -68
- data/_includes/script.html +1 -1
- data/_layouts/feature-1.html +241 -361
- data/_layouts/home-1.html +3 -46
- data/assets/css/appscms-variables.css +1 -1
- data/assets/css/common.css +395 -1
- data/assets/css/home-1.css +1 -0
- metadata +3 -3
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
|
|
2
1
|
<style>
|
|
3
|
-
.mobile-search-bar{
|
|
2
|
+
.mobile-search-bar {
|
|
4
3
|
position: relative;
|
|
5
4
|
height: 100px;
|
|
6
5
|
width: 100%;
|
|
7
|
-
|
|
6
|
+
display: none;
|
|
8
7
|
}
|
|
8
|
+
|
|
9
9
|
.mobile-search-container {
|
|
10
10
|
display: flex;
|
|
11
11
|
border: 1px solid #ccc;
|
|
12
12
|
border-radius: 5px;
|
|
13
13
|
overflow: hidden;
|
|
14
14
|
height: 38px;
|
|
15
|
-
|
|
15
|
+
margin: 20px 0px 20px 0px;
|
|
16
16
|
background-color: white;
|
|
17
17
|
position: relative;
|
|
18
|
-
}
|
|
18
|
+
}
|
|
19
19
|
|
|
20
|
-
.mobile-search-input {
|
|
20
|
+
.mobile-search-input {
|
|
21
21
|
flex: 1;
|
|
22
22
|
border: none;
|
|
23
23
|
padding: 12px 16px;
|
|
24
24
|
font-size: 16px;
|
|
25
25
|
outline: none;
|
|
26
|
-
}
|
|
26
|
+
}
|
|
27
27
|
|
|
28
|
-
.mobile-search-input::placeholder {
|
|
28
|
+
.mobile-search-input::placeholder {
|
|
29
29
|
color: #888;
|
|
30
|
-
}
|
|
30
|
+
}
|
|
31
31
|
|
|
32
|
-
.mobile-search-button {
|
|
32
|
+
.mobile-search-button {
|
|
33
33
|
background-color: #000;
|
|
34
34
|
border: none;
|
|
35
35
|
padding: 0 16px;
|
|
@@ -38,27 +38,31 @@
|
|
|
38
38
|
justify-content: center;
|
|
39
39
|
cursor: pointer;
|
|
40
40
|
outline: none;
|
|
41
|
-
}
|
|
41
|
+
}
|
|
42
42
|
|
|
43
|
-
.mobile-search-button svg {
|
|
43
|
+
.mobile-search-button svg {
|
|
44
44
|
/* fill: #fff; */
|
|
45
45
|
height: 20px;
|
|
46
|
-
}
|
|
46
|
+
}
|
|
47
47
|
|
|
48
|
-
.mobile-search-button:active {
|
|
48
|
+
.mobile-search-button:active {
|
|
49
49
|
background-color: #555;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
.mobile-
|
|
61
|
-
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.mobile-nav-search {
|
|
53
|
+
position: relative;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.mobile-result-item {
|
|
57
|
+
padding: 9px 12px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.mobile-result-item a {
|
|
61
|
+
color: #222325;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.mobile-searchbarResults {
|
|
65
|
+
background-color: #fff;
|
|
62
66
|
border: 1px solid #e4e5e7;
|
|
63
67
|
border-radius: 6px;
|
|
64
68
|
-webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
|
|
@@ -72,51 +76,47 @@
|
|
|
72
76
|
position: fixed;
|
|
73
77
|
margin-top: 42px;
|
|
74
78
|
width: 244px;
|
|
75
|
-
|
|
76
|
-
|
|
79
|
+
height: 400px;
|
|
80
|
+
overflow-y: scroll;
|
|
77
81
|
z-index: 101;
|
|
78
82
|
display: none;
|
|
79
|
-
}
|
|
83
|
+
}
|
|
80
84
|
</style>
|
|
81
85
|
|
|
82
86
|
{%- if site.newToolBar and page.lang == 'en' -%}
|
|
83
|
-
<div class="appscms-toolbar">
|
|
87
|
+
<div class="appscms-toolbar">
|
|
84
88
|
<div class="row">
|
|
85
89
|
<div class="col-11 mx-auto">
|
|
86
|
-
|
|
87
90
|
<div class="appscms-toolbar-list">
|
|
88
91
|
<button class="scroll-left">❮</button>
|
|
89
92
|
<div id="close-nav-ham" data-open="1" class="close-nav-ham">
|
|
90
|
-
<img
|
|
91
|
-
|
|
92
|
-
style="cursor: pointer"
|
|
93
|
-
height="30px"
|
|
94
|
-
width="30px"
|
|
95
|
-
src="/assets/images/close-button.svg"
|
|
96
|
-
alt="close-button"
|
|
97
|
-
/>
|
|
93
|
+
<img class="mt-3" style="cursor: pointer" height="30px" width="30px" src="/assets/images/close-button.svg"
|
|
94
|
+
alt="close-button" />
|
|
98
95
|
</div>
|
|
99
96
|
{%- if site.navigationSearch -%}
|
|
100
97
|
<div class="mobile-search-bar">
|
|
101
|
-
|
|
102
98
|
<div class="mobile-search-container">
|
|
103
99
|
<input type="text" class="mobile-search-input" placeholder="Search Tools">
|
|
104
|
-
|
|
105
100
|
<button class="mobile-search-button">
|
|
106
|
-
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"
|
|
101
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
|
|
102
|
+
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
103
|
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
|
104
|
+
<g id="SVGRepo_iconCarrier">
|
|
105
|
+
<path
|
|
106
|
+
d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
|
|
107
|
+
stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
108
|
+
</g>
|
|
109
|
+
</svg>
|
|
107
110
|
</button>
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
<div id="mobile-results" class="mobile-searchbarResults"></div>
|
|
111
|
+
<div id="mobile-results" class="mobile-searchbarResults"></div>
|
|
112
|
+
</div>
|
|
111
113
|
</div>
|
|
112
|
-
</div>
|
|
113
114
|
{%- endif -%}
|
|
114
|
-
|
|
115
|
-
{%- if Data.megaMenu -%}
|
|
115
|
+
|
|
116
|
+
{%- if Data.megaMenu -%}
|
|
117
|
+
{%- for item in Data.megaMenu.dropdown -%}
|
|
116
118
|
<li class="appscms-toolbar-list-item">
|
|
117
|
-
<span
|
|
118
|
-
class="appscms-toolbar-list-item-span d-flex justify-content-between"
|
|
119
|
-
>
|
|
119
|
+
<span class="appscms-toolbar-list-item-span d-flex justify-content-between">
|
|
120
120
|
{{ item.categoryName }}
|
|
121
121
|
</span>
|
|
122
122
|
<div class="list-item-dropdown">
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
|
|
149
149
|
{% assign array_size = item.links | size %}
|
|
150
150
|
{% assign half_size = array_size | divided_by: 2 %}
|
|
151
|
-
|
|
151
|
+
|
|
152
152
|
{% assign first_half = item.links | slice: 0, half_size %}
|
|
153
153
|
{% assign second_half = item.links | slice: half_size, array_size %}
|
|
154
154
|
|
|
@@ -159,10 +159,10 @@
|
|
|
159
159
|
{%- for i in first_half | slice: 0, half -%}
|
|
160
160
|
<li>
|
|
161
161
|
<a href="{{ i.url }}">{{ i.name }}</a>
|
|
162
|
-
|
|
162
|
+
|
|
163
163
|
</li>
|
|
164
|
-
{%- endfor -%}
|
|
165
|
-
|
|
164
|
+
{%- endfor -%}
|
|
165
|
+
|
|
166
166
|
</ul>
|
|
167
167
|
</div>
|
|
168
168
|
<div class="col-md-6">
|
|
@@ -170,28 +170,27 @@
|
|
|
170
170
|
{%- for i in second_half -%}
|
|
171
171
|
<li>
|
|
172
172
|
<a href="{{ i.url }}">{{ i.name }}</a>
|
|
173
|
-
|
|
173
|
+
|
|
174
174
|
</li>
|
|
175
175
|
{%- endfor -%}
|
|
176
176
|
</ul>
|
|
177
177
|
</div>
|
|
178
|
-
|
|
179
|
-
|
|
178
|
+
|
|
179
|
+
|
|
180
180
|
</div>
|
|
181
|
-
|
|
181
|
+
|
|
182
182
|
</div>
|
|
183
183
|
</div>
|
|
184
184
|
{%- endif -%}
|
|
185
|
-
|
|
186
185
|
</div>
|
|
187
186
|
</div>
|
|
188
187
|
</li>
|
|
189
|
-
{%- endfor -%}
|
|
190
|
-
-%}
|
|
188
|
+
{%- endfor -%}
|
|
189
|
+
{%- endif -%}
|
|
190
|
+
|
|
191
|
+
{%- for item in siteData.megaMenu.dropdown -%}
|
|
191
192
|
<li class="appscms-toolbar-list-item">
|
|
192
|
-
<span
|
|
193
|
-
class="appscms-toolbar-list-item-span d-flex justify-content-between"
|
|
194
|
-
>
|
|
193
|
+
<span class="appscms-toolbar-list-item-span d-flex justify-content-between">
|
|
195
194
|
{{ item.categoryName }}
|
|
196
195
|
</span>
|
|
197
196
|
<div class="list-item-dropdown">
|
|
@@ -216,45 +215,45 @@
|
|
|
216
215
|
</div>
|
|
217
216
|
</div>
|
|
218
217
|
{%- endif -%}
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
218
|
+
{%- if item.links.size > 0 -%}
|
|
219
|
+
<div class="col-lg-6">
|
|
220
|
+
<div class="appscms-other-tools">
|
|
221
|
+
<div class="expand_menu-name-categiry">OTHER TOOLS</div>
|
|
222
|
+
{% assign array_size = item.links | size %}
|
|
223
|
+
{% assign half_size = array_size | divided_by: 2 %}
|
|
224
|
+
|
|
225
|
+
{% assign first_half = item.links | slice: 0, half_size %}
|
|
226
|
+
{% assign second_half = item.links | slice: half_size, array_size %}
|
|
227
|
+
|
|
228
|
+
<div class="row">
|
|
229
|
+
<div class="col-md-6">
|
|
230
|
+
<ul class="mega_menu">
|
|
231
|
+
{%- for i in first_half | slice: 0, half -%}
|
|
232
|
+
<li>
|
|
233
|
+
<a href="{{ i.url }}">{{ i.name }}</a>
|
|
234
|
+
|
|
235
|
+
</li>
|
|
236
|
+
{%- endfor -%}
|
|
237
|
+
</ul>
|
|
238
|
+
</div>
|
|
239
|
+
<div class="col-md-6">
|
|
240
|
+
<ul class="mega_menu">
|
|
241
|
+
|
|
242
|
+
{%- for i in second_half -%}
|
|
243
|
+
<li>
|
|
244
|
+
<a href="{{ i.url }}">{{ i.name }}</a>
|
|
245
|
+
|
|
246
|
+
</li>
|
|
247
|
+
{%- endfor -%}
|
|
248
|
+
</ul>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
</div>
|
|
250
253
|
</div>
|
|
251
|
-
|
|
252
|
-
|
|
253
254
|
</div>
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
{%- endif -%}
|
|
257
|
-
|
|
255
|
+
{%- endif -%}
|
|
256
|
+
|
|
258
257
|
</div>
|
|
259
258
|
</div>
|
|
260
259
|
</li>
|
|
@@ -272,7 +271,8 @@
|
|
|
272
271
|
<div class="appscms-toolbar-list">
|
|
273
272
|
<button class="scroll-left">❮</button>
|
|
274
273
|
<div id="close-nav-ham" data-open="1" class="close-nav-ham">
|
|
275
|
-
<img class="mt-3" style="cursor: pointer;" height="30px" width="30px" src="/assets/images/close-button.svg"
|
|
274
|
+
<img class="mt-3" style="cursor: pointer;" height="30px" width="30px" src="/assets/images/close-button.svg"
|
|
275
|
+
alt="close-button">
|
|
276
276
|
</div>
|
|
277
277
|
{%- if Data.megaMenu -%}
|
|
278
278
|
{%- for item in Data.megaMenu.dropdown -%}
|
|
@@ -285,30 +285,30 @@
|
|
|
285
285
|
{{ Data.nav-link-name }}
|
|
286
286
|
</h4>
|
|
287
287
|
<div class="row">
|
|
288
|
-
{%- assign count = 0 -%}
|
|
289
|
-
{%- for i in item.links -%}
|
|
290
|
-
{%- assign count = count | plus: 1 -%}
|
|
288
|
+
{%- assign count = 0 -%}
|
|
289
|
+
{%- for i in item.links -%}
|
|
290
|
+
{%- assign count = count | plus: 1 -%}
|
|
291
291
|
{%- if count == 1 -%}
|
|
292
|
-
|
|
293
|
-
|
|
292
|
+
{%- if site.name == "olarandoms" -%}
|
|
293
|
+
<div class="col-xl-6">
|
|
294
294
|
{%- else -%}
|
|
295
295
|
<div class="col-md-6 col-lg-4">
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
296
|
+
{%- endif -%}
|
|
297
|
+
{%- endif -%}
|
|
298
|
+
{%- if count == 6 -%}
|
|
299
299
|
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
|
|
300
300
|
</div>
|
|
301
|
-
{%- assign count = 0 -%}
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
301
|
+
{%- assign count = 0 -%}
|
|
302
|
+
{%- else -%}
|
|
303
|
+
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
|
|
304
|
+
{%- endif -%}
|
|
305
|
+
{%- endfor -%}
|
|
306
|
+
</div>
|
|
306
307
|
</div>
|
|
307
|
-
</div>
|
|
308
308
|
</li>
|
|
309
309
|
{%- endfor -%}
|
|
310
310
|
{%- endif -%}
|
|
311
|
-
|
|
311
|
+
|
|
312
312
|
{%- for item in siteData.megaMenu.dropdown -%}
|
|
313
313
|
<li class="appscms-toolbar-list-item">
|
|
314
314
|
<span class="appscms-toolbar-list-item-span d-flex justify-content-between">
|
|
@@ -319,26 +319,26 @@
|
|
|
319
319
|
{{ siteData.megaMenu.nav-link-name }}
|
|
320
320
|
</h4>
|
|
321
321
|
<div class="row">
|
|
322
|
-
{%- assign count = 0 -%}
|
|
323
|
-
{%- for i in item.links -%}
|
|
324
|
-
{%- assign count = count | plus: 1 -%}
|
|
322
|
+
{%- assign count = 0 -%}
|
|
323
|
+
{%- for i in item.links -%}
|
|
324
|
+
{%- assign count = count | plus: 1 -%}
|
|
325
325
|
{%- if count == 1 -%}
|
|
326
|
-
|
|
327
|
-
|
|
326
|
+
{%- if site.name == "olarandoms" -%}
|
|
327
|
+
<div class="col-xl-6">
|
|
328
328
|
{%- else -%}
|
|
329
329
|
<div class="col-md-6 col-lg-4">
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
330
|
+
{%- endif -%}
|
|
331
|
+
{%- endif -%}
|
|
332
|
+
{%- if count == 6 -%}
|
|
333
333
|
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
|
|
334
334
|
</div>
|
|
335
|
-
{%- assign count = 0 -%}
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
335
|
+
{%- assign count = 0 -%}
|
|
336
|
+
{%- else -%}
|
|
337
|
+
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
|
|
338
|
+
{%- endif -%}
|
|
339
|
+
{%- endfor -%}
|
|
340
|
+
</div>
|
|
340
341
|
</div>
|
|
341
|
-
</div>
|
|
342
342
|
</li>
|
|
343
343
|
{%- endfor -%}
|
|
344
344
|
<button class="scroll-right">❯</button>
|
|
@@ -353,97 +353,89 @@
|
|
|
353
353
|
|
|
354
354
|
<script>
|
|
355
355
|
document.addEventListener("DOMContentLoaded", function () {
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
356
|
+
const scrollContainer = document.querySelector(".appscms-toolbar-list");
|
|
357
|
+
const scrollLeft = document.querySelector(".scroll-left");
|
|
358
|
+
const scrollRight = document.querySelector(".scroll-right");
|
|
359
|
+
|
|
360
|
+
function updateScrollButtons() {
|
|
361
|
+
scrollLeft.style.display =
|
|
362
|
+
scrollContainer.scrollLeft > 0 ? "block" : "none";
|
|
363
|
+
scrollRight.style.display =
|
|
364
|
+
scrollContainer.scrollWidth >
|
|
365
|
+
scrollContainer.clientWidth + scrollContainer.scrollLeft
|
|
366
|
+
? "block"
|
|
367
|
+
: "none";
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
scrollLeft.addEventListener("click", function () {
|
|
371
|
+
scrollContainer.scrollLeft -= 120; // Adjust this value as needed
|
|
372
|
+
updateScrollButtons();
|
|
373
|
+
});
|
|
374
|
+
|
|
375
|
+
scrollRight.addEventListener("click", function () {
|
|
376
|
+
scrollContainer.scrollLeft += 120; // Adjust this value as needed
|
|
377
|
+
updateScrollButtons();
|
|
378
|
+
});
|
|
379
|
+
|
|
380
|
+
scrollContainer.addEventListener("scroll", updateScrollButtons);
|
|
381
|
+
|
|
382
|
+
// Initial check to hide buttons if necessary
|
|
377
383
|
updateScrollButtons();
|
|
378
384
|
});
|
|
379
385
|
|
|
380
|
-
scrollContainer.addEventListener("scroll", updateScrollButtons);
|
|
381
|
-
|
|
382
|
-
// Initial check to hide buttons if necessary
|
|
383
|
-
updateScrollButtons();
|
|
384
|
-
});
|
|
385
|
-
|
|
386
386
|
</script>
|
|
387
387
|
|
|
388
388
|
<style>
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
position: relative;
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
.scroll-left,
|
|
399
|
-
.scroll-right {
|
|
400
|
-
background-color: #4456f6f7;
|
|
401
|
-
color: white;
|
|
402
|
-
border: none;
|
|
403
|
-
height: 40px;
|
|
404
|
-
cursor: pointer;
|
|
405
|
-
position: absolute;
|
|
406
|
-
width: 40px;
|
|
407
|
-
top: 50%;
|
|
408
|
-
z-index: 100;
|
|
409
|
-
transform: translateY(-50%);
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
.scroll-left {
|
|
413
|
-
left: 0;
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
.scroll-right {
|
|
417
|
-
right: 0;
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
.scroll-left:hover,
|
|
421
|
-
.scroll-right:hover {
|
|
422
|
-
background-color:#8691f6f7 ;
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
.navbar {
|
|
426
|
-
overflow-x: auto;
|
|
427
|
-
white-space: nowrap;
|
|
428
|
-
flex-grow: 1;
|
|
429
|
-
scroll-behavior: smooth;
|
|
430
|
-
display: flex;
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
.navbar ul {
|
|
434
|
-
padding: 0;
|
|
435
|
-
margin: 0;
|
|
436
|
-
display: flex;
|
|
437
|
-
list-style-type: none;
|
|
438
|
-
}
|
|
439
|
-
|
|
440
|
-
.navbar li {
|
|
441
|
-
display: inline;
|
|
442
|
-
}
|
|
389
|
+
.scroll-container {
|
|
390
|
+
display: flex;
|
|
391
|
+
align-items: center;
|
|
392
|
+
background-color: #333;
|
|
393
|
+
position: relative;
|
|
394
|
+
}
|
|
443
395
|
|
|
396
|
+
.scroll-left,
|
|
397
|
+
.scroll-right {
|
|
398
|
+
background-color: #4456f6f7;
|
|
399
|
+
color: white;
|
|
400
|
+
border: none;
|
|
401
|
+
height: 40px;
|
|
402
|
+
cursor: pointer;
|
|
403
|
+
position: absolute;
|
|
404
|
+
width: 40px;
|
|
405
|
+
top: 50%;
|
|
406
|
+
z-index: 100;
|
|
407
|
+
transform: translateY(-50%);
|
|
408
|
+
}
|
|
444
409
|
|
|
410
|
+
.scroll-left {
|
|
411
|
+
left: 0;
|
|
412
|
+
}
|
|
445
413
|
|
|
414
|
+
.scroll-right {
|
|
415
|
+
right: 0;
|
|
416
|
+
}
|
|
446
417
|
|
|
418
|
+
.scroll-left:hover,
|
|
419
|
+
.scroll-right:hover {
|
|
420
|
+
background-color: #8691f6f7;
|
|
421
|
+
}
|
|
447
422
|
|
|
423
|
+
.navbar {
|
|
424
|
+
/* overflow-x: auto; */
|
|
425
|
+
white-space: nowrap;
|
|
426
|
+
flex-grow: 1;
|
|
427
|
+
scroll-behavior: smooth;
|
|
428
|
+
display: flex;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.navbar ul {
|
|
432
|
+
padding: 0;
|
|
433
|
+
margin: 0;
|
|
434
|
+
display: flex;
|
|
435
|
+
list-style-type: none;
|
|
436
|
+
}
|
|
448
437
|
|
|
438
|
+
.navbar li {
|
|
439
|
+
display: inline;
|
|
440
|
+
}
|
|
449
441
|
</style>
|