1import { fileURLToPath } from 'url' 2export const galleryStylesPath = fileURLToPath(import.meta.url) 4export const galleryStyles = ` 5.page-content { max-width: 900px; margin: 0 auto; } 6.grid { display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; } 7.gallery-group { background: #1c1c1c; border-radius: 6px; } 8.gallery-group > summary { cursor: pointer; padding: 14px 16px; font-size: 18px; color: #bbb; list-style: none; user-select: none; text-align: center; } 9.gallery-group > summary::-webkit-details-marker { display: none; } 10.gallery-group > summary::before { content: '< '; color: #5b9bd5; } 11.gallery-group > summary::after { content: ' >'; color: #5b9bd5; } 12.gallery-group[open] > summary::before { content: '</ '; } 13.gallery-group[open] > summary { color: #fff; } 14.gallery-group-cnt { color: #666; font-size: 14px; } 15.gallery-group-body { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 12px; } 16.card { display: flex; flex-direction: column; text-decoration: none; color: #fff; gap: 8px; padding: 10px 16px; background: #212121; overflow: hidden; } 17.grid > .card:nth-child(even) { background: #252525; } 18.card-body { display: flex; flex-direction: row; gap: 20px; flex-wrap: wrap; } 19.card-body-inline { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } 20.color-tile, .tile-container, .image-tile { width: 180px; height: 180px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } 21.image-caption { font-size: 12px; color: #aaa; margin-bottom: 4px; font-style: italic; white-space: pre-line; text-align: center; } 22.image-wrapper { width: 180px; flex-shrink: 0; } 23.color-tile { background: #444; } 24.tile-container { position: relative; } 25.tile-container canvas { width: 100%; height: 100%; } 26.music-toggle { position: absolute; top: -16px; left: -16px; width: 32px; height: 32px; border-radius: 50%; background: #E91E63; border: none; color: #fff; font-size: 16px; cursor: pointer; z-index: 10; transition: background 0.2s; } 27.music-toggle.playing { background: #4CAF50; } 28.card-command { font-family: monospace; font-size: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } 29.command-link { color: #5b9bd5; text-decoration: none; word-break: break-all; min-width: 0; } 30.command-link:hover { text-decoration: underline; } 31.ep-type { color: #777; white-space: nowrap; font-size: 11px; } 32a.ep-type { color: #777; text-decoration: none; } 33a.ep-type:hover { text-decoration: underline; color: #999; } 34.card-command > span:first-child { word-break: break-all; min-width: 0; } 35.card-command > a:first-child { word-break: break-all; min-width: 0; } 36.card-description { font-size: 14px; line-height: 1.5; color: #ccc; flex: 1; min-width: 200px; overflow-wrap: break-word; } 37.card-description a { text-decoration: none; } 38.card-description a:hover { text-decoration: underline; } 39.card-description p { margin: 0.5em 0; } 40.card-description p:first-child { margin-top: 0; } 41.card-description code { padding: 0.2em 0.4em; border-radius: 3px; font-family: monospace; font-size: inherit; background: #2a2a2a; color: #5fd7af; overflow-wrap: break-word; } 42.card-description pre { white-space: normal; overflow-wrap: break-word; word-break: break-all; max-width: 100%; margin: 0.5em 0; padding: 0; } 43.card-description pre code { padding: 0; display: block; } 44.card-description pre .line { display: block; white-space: pre-wrap; } 45.card-header { display: flex; flex-direction: column; gap: 2px; } 46.app-loc { color: #4a7fa8; white-space: nowrap; font-size: 10px; font-family: monospace; cursor: pointer; } 47.app-loc:hover { text-decoration: underline; } 48.eptype-loc { color: #666; white-space: nowrap; font-size: 10px; font-family: monospace; text-align: right; cursor: pointer; } 49.eptype-loc:hover { text-decoration: underline; } 50.loc-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; } 51.loc-modal { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; max-width: 700px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; } 52.loc-modal-header { padding: 12px 16px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; } 53.loc-modal-header h3 { margin: 0; font-size: 14px; color: #fff; } 54.loc-modal-close { background: none; border: none; color: #888; font-size: 20px; cursor: pointer; padding: 0 4px; } 55.loc-modal-close:hover { color: #fff; } 56.loc-modal-body { padding: 16px; overflow-y: auto; font-family: monospace; font-size: 11px; } 57.loc-modal-file { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; } 58.loc-modal-file a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; width: fit-content; } 59.loc-modal-file a:hover { text-decoration: underline; } 60.loc-modal-file.clr-cyan a { color: #5fd7d7; } 61.loc-modal-file.clr-magenta a { color: #d787d7; } 62.loc-modal-file.clr-green a { color: #5fd7af; } 63.loc-modal-file.clr-gray a { color: #888; } 64.loc-modal-file.clr-yellow a { color: #d7af5f; } 65.loc-modal-file .loc-cnt { color: #666; flex-shrink: 0; } 66.loc-section-header { color: #666; font-size: 10px; margin: 12px 0 4px; display: flex; justify-content: space-between; gap: 12px; } 67.loc-section-header:first-child { margin-top: 0; } 68.loc-section-header > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } 69.loc-section-total { white-space: nowrap; } 70.loc-legend { font-size: 10px; padding: 0 16px 8px; font-family: monospace; color: #666; } 71body.modal-open { overflow: hidden; } 72.pkg-stats { font-family: monospace; font-size: 11px; white-space: normal; word-break: break-word; } 73.pkg-stats .pkgs-line { color: #5b8a8a; } 74.pkg-stats .dpkgs-line { color: #555; } 75.demos-header { display: flex; justify-content: space-between; align-items: baseline; margin: 1.5em 0 0.5em; } 76.demos-header h2 { margin: 0; font-size: 1.3em; } 77.code-badge-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto 1fr auto; column-gap: 16px; align-items: start; } 78.code-badge-grid > .dry-img { grid-column: 2; grid-row: 1; justify-self: end; } 79.code-badge-grid > pre { grid-column: 1; grid-row: 1 / span 2; margin: 0; min-width: 0; } 80.code-badge-grid > .dry-first { grid-column: 1 / -1; grid-row: 3; margin: 0.5em 0 0; } 81.code-badge-grid > .dry-tagline { grid-column: 2; grid-row: 2; width: 0; min-width: 100%; text-align: right; margin: 0.5em 0 0; } 82@media (max-width: 760px) { 83 .code-badge-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } 84 .code-badge-grid > .dry-img { float: none; margin: 0; order: 2; } 85 .code-badge-grid > pre { order: 1; flex: 1 0 100%; } 86 .code-badge-grid > .dry-tagline { float: none; clear: none; text-align: left; margin: 0; order: 3; flex: 1 1 auto; width: auto; min-width: 0; } 87 .code-badge-grid > .dry-first { order: 4; flex: 1 0 100%; } 89.intro-row { display: flow-root; } 90.intro-row > .title-clone { float: right; margin: 1em 0 0 16px; } 91.intro-row > pre { margin: 0; } 92@media (max-width: 985px) { 93 .intro-row > .title-clone { float: none; display: block; width: fit-content; margin: 0 auto 60px; } 94 .intro-row > pre { overflow-x: auto; } 96@media (min-width: 986px) { 97 .intro-row > pre { overflow: visible; overflow-x: visible; } 99.intro-row { overflow: visible; } 100.title-clone code { font-size: 12px; color: #5fd7af; background: #2a2a2a; padding: 4px 8px; border-radius: 4px 4px 0 0; white-space: var(--code-white-space); overflow-x: auto; display: inline-block; position: relative; z-index: 1; } 101a.title-clone { text-decoration: none; cursor: pointer; min-width: 0; max-width: 100%; position: relative; isolation: isolate; } 102a.title-clone:hover code { background: #333; } 103.hamsa-flag-wrap { position: absolute; top: calc(100% - 10px); transform-origin: center top; transform: perspective(150px) rotateX(calc(var(--vel-abs, 0) * -0.5deg * var(--vel-mult, 1))) scaleY(calc(1 - var(--vel-abs, 0) * 0.002 * var(--vel-mult, 1))); z-index: -1; clip-path: inset(0 -20px -20px -20px); } 104.hamsa-flag-wrap.flag-left { left: 0; --vel-mult: 1; } 105.hamsa-flag-wrap.flag-right { right: 0; --vel-mult: 0.25; } 106.hamsa-flag { height: 60px; width: auto; display: block; pointer-events: none; transform-origin: center top; animation: hamsaFlutterIdle 6s ease-in-out infinite alternate; } 107@keyframes hamsaFlutterIdle { 0% { transform: skewX(0deg); } 13% { transform: skewX(-2deg); } 24% { transform: skewX(1deg); } 35% { transform: skewX(-3deg); } 47% { transform: skewX(2deg); } 58% { transform: skewX(-1deg); } 71% { transform: skewX(3deg); } 83% { transform: skewX(-2deg); } 100% { transform: skewX(1deg); } } 108@media (prefers-reduced-motion: reduce) { .hamsa-flag-wrap, .hamsa-flag { animation: none; } } 109.total-loc { color: #4a7fa8; font-size: 14px; font-family: monospace; cursor: pointer; flex-shrink: 0; } 110.total-loc:hover { text-decoration: underline; } 111.dry-img { height: 64px; } 112.dry-tagline { margin: 0; color: #888; font-style: italic; font-size: 13px; max-width: 220px; } 113@media (max-width: 600px) { 114 .card-body { display: flow-root; } 115 .card-body > :first-child { float: left; margin: 0 16px 4px 0; } 116 .card-description { min-width: 0; } 117 .color-tile, .image-tile { width: 120px; height: 120px; } 118 .tile-container { width: 150px; height: 150px; } 119 .image-wrapper { width: 120px; }