styles.css (10246B)
1 @font-face { 2 font-family: 'Inter', sans-serif; 3 src: url('inter.ttf') format('truetype'); 4 } 5 6 :root { 7 --ft-sans: 'Inter'; 8 9 --bg-default: #242424; 10 --bg-dark: #444444; 11 --bg-border: #555555; 12 13 --fg-default: #eeeeee; 14 --fg-subtle: #bbbbbb; 15 } 16 17 * { 18 box-sizing: border-box; 19 } 20 21 body { 22 font-family: var(--ft-sans); 23 font-size: 14px; 24 margin: 0px; 25 background-color: var(--bg-default); 26 color: var(--fg-default); 27 28 #popup { 29 width: 400px; 30 /* height: 300px; */ 31 height: auto; 32 padding: 0.75rem; 33 overflow-x: hidden; 34 35 #preview { 36 display: flex; 37 align-items: flex-start; 38 gap: 1rem; 39 border: 1px solid var(--bg-border); 40 padding: 1rem; 41 border-radius: 6px; 42 margin-bottom: 0.75rem; 43 44 &.preview--saved { 45 46 } 47 48 .preview-image { 49 width: 60px; 50 min-width: 60px; 51 aspect-ratio: 1/1; 52 border-radius: 5px; 53 overflow: hidden; 54 55 a { 56 display: block; 57 width: 100%; 58 height: 100%; 59 60 img { 61 width: 100%; 62 height: 100%; 63 object-fit: cover; 64 user-select: none; 65 pointer-events: none; 66 opacity: 0; 67 } 68 } 69 70 &.visible { 71 72 a { 73 74 img { 75 opacity: initial; 76 } 77 } 78 } 79 80 &.centered { 81 82 a { 83 display: grid; 84 width: 100%; 85 height: 100%; 86 place-content: center; 87 88 img { 89 max-width: 100%; 90 max-height: 100%; 91 object-fit: cover; 92 user-select: none; 93 pointer-events: none; 94 } 95 } 96 } 97 } 98 99 .preview-info { 100 flex: 1; 101 padding-bottom: 0.2rem; 102 min-width: 0px; 103 104 h4 { 105 margin-top: 0px; 106 margin-bottom: 0.5rem; 107 font-weight: 600; 108 user-select: none; 109 display: block; 110 min-width: 0px; 111 112 a { 113 color: var(--fg-default); 114 text-decoration: none; 115 display: -webkit-box; 116 -webkit-box-orient: vertical; 117 -webkit-line-clamp: 2; 118 overflow: hidden; 119 min-width: 0px; 120 121 &:hover { 122 text-decoration: underline; 123 } 124 } 125 } 126 127 p { 128 font-size: 12px; 129 margin-top: 0.5rem; 130 margin-bottom: 0.5rem; 131 color: var(--fg-subtle); 132 user-select: none; 133 display: -webkit-box; 134 -webkit-box-orient: vertical; 135 -webkit-line-clamp: 2; 136 overflow: hidden; 137 min-width: 0px; 138 } 139 140 span { 141 user-select: none; 142 color: #ff9e3d; 143 display: block; 144 } 145 146 .actions { 147 margin-top: 0.75rem; 148 display: flex; 149 justify-content: flex-end; 150 gap: 0.75rem; 151 152 button { 153 height: 32px; 154 border: none; 155 background: none; 156 padding-left: 0.75rem; 157 padding-right: 0.75rem; 158 border-radius: 6px; 159 background-color: var(--bg-dark); 160 cursor: pointer; 161 color: var(--fg-default); 162 font-size: 14px; 163 font-family: var(--ft-sans); 164 165 &.create { 166 background-color: #c77126; 167 168 &:hover { 169 background-color: #d97c2b; 170 } 171 } 172 173 &.delete { 174 background-color: #c92a2a; 175 176 &:hover { 177 background-color: #e33434; 178 } 179 } 180 181 &:hover { 182 background-color: var(--bg-border); 183 } 184 } 185 } 186 } 187 } 188 189 #pins { 190 margin: 0px; 191 padding: 0px; 192 display: flex; 193 gap: 0.25rem; 194 overflow-x: auto; 195 196 &:has(.list-pin) { 197 margin-bottom: 0.75rem; 198 } 199 200 .list-pin { 201 --item-count: 9; 202 display: flex; 203 border-radius: 6px; 204 margin: 0px; 205 overflow: hidden; 206 flex: calc(100% / var(--item-count) - 0.25rem * (var(--item-count) - 1) / var(--item-count)) 0 0; 207 208 &:hover { 209 background-color: var(--bg-dark); 210 } 211 212 &.pin--active { 213 background-color: var(--bg-border); 214 } 215 216 .pin-image { 217 width: 100%; 218 aspect-ratio: 1/1; 219 overflow: hidden; 220 221 a { 222 display: block; 223 width: 100%; 224 height: 100%; 225 padding: 0.25rem; 226 227 img { 228 width: 100%; 229 height: 100%; 230 object-fit: cover; 231 user-select: none; 232 pointer-events: none; 233 opacity: 0; 234 border-radius: 4px; 235 } 236 } 237 238 &.visible { 239 240 a { 241 242 img { 243 opacity: initial; 244 } 245 } 246 } 247 248 &.centered { 249 250 a { 251 display: grid; 252 width: 100%; 253 height: 100%; 254 place-content: center; 255 256 img { 257 max-width: 100%; 258 max-height: 100%; 259 object-fit: cover; 260 user-select: none; 261 pointer-events: none; 262 } 263 } 264 } 265 } 266 } 267 } 268 269 #search { 270 width: 100%; 271 height: 40px; 272 margin-bottom: 0.75rem; 273 border-radius: 6px; 274 border: 1px solid var(--bg-border); 275 background-color: var(--bg-default); 276 outline: none; 277 color: var(--fg-default); 278 padding-left: 0.75rem; 279 padding-right: 0.75rem; 280 font-size: 14px; 281 font-family: var(--ft-sans); 282 } 283 284 #list { 285 --item-count: 7; 286 margin: 0px; 287 padding: 0px; 288 max-height: calc(56px * var(--item-count)); 289 overflow-y: auto; 290 291 .list-item { 292 display: flex; 293 gap: 0.75rem; 294 border-radius: 6px; 295 margin: 0px; 296 overflow: hidden; 297 298 &:hover { 299 background-color: var(--bg-dark); 300 } 301 302 &.item--active { 303 background-color: var(--bg-border); 304 } 305 306 .item-image { 307 width: 40px; 308 min-width: 40px; 309 aspect-ratio: 1/1; 310 border-radius: 5px; 311 overflow: hidden; 312 margin-left: 0.5rem; 313 margin-top: 0.5rem; 314 margin-bottom: 0.5rem; 315 316 a { 317 display: block; 318 width: 100%; 319 height: 100%; 320 321 img { 322 width: 100%; 323 height: 100%; 324 object-fit: cover; 325 user-select: none; 326 pointer-events: none; 327 opacity: 0; 328 } 329 } 330 331 &.visible { 332 333 a { 334 335 img { 336 opacity: initial; 337 } 338 } 339 } 340 341 &.centered { 342 343 a { 344 display: grid; 345 width: 100%; 346 height: 100%; 347 place-content: center; 348 349 img { 350 max-width: 100%; 351 max-height: 100%; 352 object-fit: cover; 353 user-select: none; 354 pointer-events: none; 355 } 356 } 357 } 358 } 359 360 .item-info { 361 flex: 1; 362 min-width: 0px; 363 margin-top: 0.5rem; 364 margin-bottom: 0.5rem; 365 display: flex; 366 flex-direction: column; 367 justify-content: center; 368 369 h4 { 370 margin-top: 0px; 371 margin-bottom: 0px; 372 font-weight: 500; 373 user-select: none; 374 display: block; 375 min-width: 0px; 376 display: -webkit-box; 377 -webkit-box-orient: vertical; 378 -webkit-line-clamp: 1; 379 overflow: hidden; 380 381 a { 382 color: var(--fg-default); 383 text-decoration: none; 384 display: block; 385 min-width: 0px; 386 387 &:hover { 388 text-decoration: underline; 389 } 390 } 391 } 392 393 span { 394 user-select: none; 395 color: var(--fg-subtle); 396 display: block; 397 font-size: 12px; 398 margin-top: 0.1rem; 399 } 400 } 401 402 .item-open { 403 cursor: pointer; 404 border: none; 405 background: unset; 406 outline: none; 407 width: 40px; 408 display: grid; 409 place-content: center; 410 411 &:hover { 412 background-color: var(--bg-border); 413 414 .icon { 415 background: var(--fg-default); 416 } 417 } 418 419 .icon { 420 mask: url('icons/chevron-right.svg'); 421 background: var(--fg-subtle); 422 display: block; 423 width: 20px; 424 height: 20px; 425 margin-bottom: 0.25rem; 426 pointer-events: none; 427 } 428 } 429 430 .item-close { 431 cursor: pointer; 432 border: none; 433 background: unset; 434 outline: none; 435 width: 40px; 436 display: grid; 437 place-content: center; 438 439 &:hover { 440 background-color: var(--bg-border); 441 442 .icon { 443 background: var(--fg-default); 444 } 445 } 446 447 .icon { 448 mask: url('icons/chevron-left.svg'); 449 background: var(--fg-subtle); 450 display: block; 451 width: 20px; 452 height: 20px; 453 margin-bottom: 0.25rem; 454 pointer-events: none; 455 } 456 } 457 } 458 } 459 460 button.list-more { 461 height: 32px; 462 border: none; 463 background: none; 464 padding-left: 0.75rem; 465 padding-right: 0.75rem; 466 border-radius: 6px; 467 background-color: var(--bg-dark); 468 cursor: pointer; 469 color: var(--fg-default); 470 font-size: 14px; 471 width: 100%; 472 margin-top: 0.75rem; 473 font-family: var(--ft-sans); 474 475 &:hover { 476 background-color: var(--bg-border); 477 } 478 } 479 } 480 481 &:has(#preview) { 482 483 #list { 484 --item-count: 4; 485 } 486 } 487 }