| 325 | } |
| 326 | |
| 327 | function createMenu() { |
| 328 | const container = document.createElement("div"); |
| 329 | container.id = "bookmark-spicetify"; |
| 330 | container.className = "context-menu-container"; |
| 331 | container.style.zIndex = "1029"; |
| 332 | |
| 333 | const style = document.createElement("style"); |
| 334 | style.textContent = ` |
| 335 | #bookmark-spicetify { |
| 336 | position: absolute; |
| 337 | left: 0; |
| 338 | right: 0; |
| 339 | width: 100vw; |
| 340 | height: 100vh; |
| 341 | z-index: 5000; |
| 342 | } |
| 343 | #bookmark-menu { |
| 344 | display: inline-block; |
| 345 | width: 25%; |
| 346 | min-width: 380px; |
| 347 | max-height: 70%; |
| 348 | overflow: hidden auto; |
| 349 | padding-bottom: 10px; |
| 350 | position: absolute; |
| 351 | z-index: 5001; |
| 352 | } |
| 353 | .bookmark-card { |
| 354 | display: flex; |
| 355 | flex-direction: row; |
| 356 | justify-content: flex-start; |
| 357 | align-items: center; |
| 358 | margin-top: 20px; |
| 359 | cursor: pointer; |
| 360 | padding: 0 10px; |
| 361 | } |
| 362 | .bookmark-card-image { |
| 363 | width: 70px; |
| 364 | height: 70px; |
| 365 | object-fit: cover; |
| 366 | object-position: center center; |
| 367 | border-radius: 4px; |
| 368 | } |
| 369 | .bookmark-card-info { |
| 370 | display: flex; |
| 371 | flex-direction: column; |
| 372 | justify-content: center; |
| 373 | align-items: flex-start; |
| 374 | width: 100%; |
| 375 | padding: 10px 20px; |
| 376 | color: var(--spice-text); |
| 377 | } |
| 378 | .bookmark-card-info span { |
| 379 | -webkit-line-clamp: 1; |
| 380 | -webkit-box-orient: vertical; |
| 381 | display: -webkit-box; |
| 382 | white-space: normal; |
| 383 | overflow: hidden; |
| 384 | text-overflow: ellipsis; |