From 50de9ebed3128ea35f56596d6f2c23d0f836abfc Mon Sep 17 00:00:00 2001 From: Travis V Date: Fri, 7 Feb 2025 15:11:26 -0500 Subject: [PATCH] Updated workflow --- .github/workflows/release.yml | 2 +- styles.css | 1434 --------------------------------- 2 files changed, 1 insertion(+), 1435 deletions(-) delete mode 100644 styles.css diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index b8751b7..d588a15 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -34,4 +34,4 @@ jobs: gh release create "$tag" \ --title="$tag" \ --draft \ - manifest.json main.js styles.css + main.js manifest.json styles.css diff --git a/styles.css b/styles.css deleted file mode 100644 index d2eb1ba..0000000 --- a/styles.css +++ /dev/null @@ -1,1434 +0,0 @@ -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -.animate-spin { - animation: spin 1s linear infinite; -} - -.animate-spin-slower { - animation: spin 2s linear infinite; -} - -.edit-metadata-modal { - padding: 20px; -} - -.edit-metadata-modal h3 { - margin-bottom: 20px; -} - -.edit-metadata-modal .form-group { - margin-bottom: 15px; -} - -.edit-metadata-modal label { - display: block; - margin-bottom: 5px; - font-weight: 500; -} - -.edit-metadata-modal input, -.edit-metadata-modal textarea { - width: 100%; - padding: 8px; - border: 1px solid var(--background-modifier-border); - border-radius: 4px; -} - -.edit-metadata-modal .button-group { - display: flex; - gap: 10px; - justify-content: flex-end; - margin-top: 20px; -} - -.edit-metadata-modal button { - padding: 8px 16px; - border-radius: 4px; - cursor: pointer; -} - -.edit-metadata-modal button[type='submit'] { - background-color: var(--interactive-accent); - color: var(--text-on-accent); -} - -/* https://loading.io/css/ */ - -.lds-ellipsis, -.lds-ellipsis div { - box-sizing: border-box; -} - -.lds-ellipsis { - display: inline-block; - position: relative; - width: 80px; - height: 80px; -} - -.lds-ellipsis div { - position: absolute; - top: 33.33333px; - width: 13.33333px; - height: 13.33333px; - border-radius: 50%; - background: currentColor; - animation-timing-function: cubic-bezier(0, 1, 1, 0); -} - -.lds-ellipsis div:nth-child(1) { - left: 8px; - animation: lds-ellipsis1 0.6s infinite; -} - -.lds-ellipsis div:nth-child(2) { - left: 8px; - animation: lds-ellipsis2 0.6s infinite; -} - -.lds-ellipsis div:nth-child(3) { - left: 32px; - animation: lds-ellipsis2 0.6s infinite; -} - -.lds-ellipsis div:nth-child(4) { - left: 56px; - animation: lds-ellipsis3 0.6s infinite; -} - -@keyframes lds-ellipsis1 { - 0% { - transform: scale(0); - } - 100% { - transform: scale(1); - } -} - -@keyframes lds-ellipsis3 { - 0% { - transform: scale(1); - } - 100% { - transform: scale(0); - } -} - -@keyframes lds-ellipsis2 { - 0% { - transform: translate(0, 0); - } - 100% { - transform: translate(24px, 0); - } -} - -/* Different site */ - -/* HTML:
*/ - -.loader_l3 { - width: 60px; - aspect-ratio: 2; - --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000); - background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%; - background-size: calc(100% / 3) 50%; - animation: l3 1s infinite linear; -} - -@keyframes l3 { - 20% { - background-position: 0% 0%, 50% 50%, 100% 50%; - } - 40% { - background-position: 0% 100%, 50% 0%, 100% 50%; - } - 60% { - background-position: 0% 50%, 50% 100%, 100% 0%; - } - 80% { - background-position: 0% 50%, 50% 50%, 100% 100%; - } -} - -.view-metadata-modal { - /* padding: 20px; */ - /* max-width: 600px; */ - margin: 0 auto; -} - -.view-metadata-modal h3 { - margin-bottom: 20px; - font-size: 1.5em; - border-bottom: 1px solid var(--background-modifier-border); - padding-bottom: 10px; -} - -.view-metadata-modal h4 { - /* margin: 15px 0 10px; */ - margin: 0 0 0 0; - padding-bottom: 10px; - font-size: 1.1em; - color: var(--text-muted); -} - -.metadata-section { - margin-bottom: 20px; - padding: 15px; - background-color: var(--background-secondary); - border-radius: 8px; -} - -.metadata-group { - margin-bottom: 12px; -} - -.metadata-group:last-child { - margin-bottom: 0; -} - -.metadata-group label { - display: block; - font-weight: 600; - margin-bottom: 4px; - color: var(--text-muted); - font-size: 0.9em; -} - -.metadata-value { - padding: 8px; - background-color: var(--background-primary); - border-radius: 4px; - border: 1px solid var(--background-modifier-border); -} - -.metadata-value.scrollable { - max-height: 150px; - overflow-y: auto; - white-space: pre-wrap; -} - -.metadata-value.tags { - display: flex; - flex-wrap: wrap; - gap: 8px; - padding: 8px; -} - -.tag { - background-color: var(--interactive-accent); - color: var(--text-on-accent); - padding: 4px 8px; - border-radius: 4px; - font-size: 0.9em; -} - -.no-tags { - color: var(--text-muted); - font-style: italic; -} - -.button-group { - display: flex; - justify-content: flex-end; - margin-top: 20px; -} - -.button-group button { - padding: 8px 16px; - border-radius: 4px; - cursor: pointer; - background-color: var(--interactive-normal); - color: var(--text-normal); -} - -.button-group button:hover { - background-color: var(--interactive-hover); -} - -.config-modal-form { - display: flex; - flex-direction: column; - gap: 1rem; - padding: 1rem; -} - -.config-field { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - gap: 0.5rem; - /* padding: 0.5rem 0; */ - padding-bottom: 1rem; - border-bottom: 1px solid var(--background-modifier-border); -} - -.config-field label { - font-weight: 500; - /* margin-bottom: 0.25rem; */ -} - -.config-field-checkbox-label { - display: flex; - flex-direction: row; - align-items: center; - gap: 0.5rem; - cursor: pointer; -} - -.config-field input[type='text'], -.config-field input[type='number'], -.config-field select { - padding: 0.5rem; - border-radius: 4px; - border: 1px solid var(--background-modifier-border); - background: var(--background-primary); - color: var(--text-normal); -} - -.config-multiselect { - height: 100px; - padding: 0.5rem; -} - -.config-modal-controls { - display: flex; - gap: 1rem; - justify-content: flex-end; - /* padding: 1rem 0; */ - margin-top: 1rem; -} - -/* Debug Operations Modal Styles */ - -.debug-operations-content { - display: flex; - flex-direction: column; - gap: 1.5rem; - padding: 1rem; -} - -.debug-section { - display: flex; - flex-direction: column; - gap: 1rem; - padding: 1rem; - background-color: var(--background-secondary); - border-radius: 8px; -} - -.debug-section h3 { - margin: 0; - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--background-modifier-border); -} - -.debug-description { - color: var(--text-muted); - font-size: 0.9em; - line-height: 1.4; -} - -.debug-results { - padding: 1rem; - background-color: var(--background-secondary); - border-radius: 8px; -} - -.debug-results h4 { - margin: 0; - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--background-modifier-border); -} - -.results-details { - margin-top: 1rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.result-item { - display: flex; - justify-content: space-between; - padding: 0.5rem; - background-color: var(--background-primary); - border-radius: 4px; -} - -.result-item span:first-child { - color: var(--text-muted); -} - -.processing-queue-modal { - padding: 20px; - max-height: 500px; - display: flex; - flex-direction: column; -} - -.queue-controls { - display: flex; - gap: 8px; - margin-bottom: 16px; -} - -.queue-control-button { - display: flex; - align-items: center; - gap: 4px; - padding: 4px 8px; - border-radius: 4px; - background-color: var(--background-modifier-hover); - color: var(--text-normal); - font-size: 14px; - cursor: pointer; - transition: background-color 0.2s ease; -} - -.queue-control-button:hover { - background-color: var(--background-modifier-active); -} - -.queue-status { - font-size: 14px; - margin-bottom: 16px; -} - -.queue-stats { - display: flex; - gap: 15px; - margin-bottom: 20px; - padding: 10px; - background: var(--background-secondary); - border-radius: 5px; - font-size: 14px; -} - -.queue-items { - overflow-y: auto; - flex-grow: 1; -} - -.queue-item { - display: flex; - align-items: center; - padding: 10px; - border-bottom: 1px solid var(--background-modifier-border); - gap: 10px; -} - -.status-processing { - background: var(--background-modifier-hover); -} - -.status-completed { - color: var(--text-success); -} - -.status-failed { - color: var(--text-error); -} - -.loading-spinner { - display: inline-block; - width: 16px; - height: 16px; - border: 2px solid var(--text-muted); - border-top-color: var(--text-normal); - border-radius: 50%; - animation: spin 1s linear infinite; -} - -.item-error { - color: var(--text-error); - font-size: 0.9em; - margin-left: auto; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -.tag-combobox { - position: relative; /* For positioning suggestions */ - background-color: var(--background-secondary); - border-radius: 8px; - border: 1px solid var(--background-modifier-border); - padding: 5px; - display: flex; /* For horizontal layout */ - flex-wrap: wrap; /* Allow tags to wrap */ - align-items: center; /* Vertically align items */ - min-height: 30px; /* Ensure a reasonable minimum height */ -} - -.tag-input { - border: none; - outline: none; - flex-grow: 1; /* Take up remaining space */ - padding: 5px; - min-width: 100px; /* Prevent collapsing when empty */ -} - -.selected-tags { - display: flex; - flex-wrap: wrap; - margin-right: 5px; /* Spacing from input */ -} - -.tag-pill { - /* background-color: var(--interactive-accent); */ - background-color: var(--background-secondary-alt); - color: var(--text-on-accent); - padding: 4px 8px; - border-radius: 4px; - font-size: 0.9em; - margin: 2px; - display: inline-flex; /* For button alignment */ - align-items: center; -} - -.remove-tag-button { - background: none; - border: none; - color: #666; - cursor: pointer; - margin-left: 5px; - font-size: 0.8em; - padding: 0; /* Reset padding */ - line-height: 1; /* Reset line-height */ - width: 16px; - height: 16px; -} - -.suggestions-list { - position: absolute; /* Position below the input */ - top: 100%; /* Below the tag-combobox */ - left: 0; - right: 0; - background-color: var(--background-secondary); - border: 1px solid var(--background-modifier-border); - /* border-top: none; */ - /* border-radius: 0 0 4px 4px; */ - border-radius: 4px; - list-style: none; - padding: 0; - margin: 0; - z-index: 10; /* Ensure it's above other content */ - max-height: 200px; /* Limit height for scrollability */ - overflow-y: auto; - overflow-x: clip; - box-sizing: border-box; -} - -.suggestions-list li { - padding: 8px 10px; - cursor: pointer; -} - -.suggestions-list li:hover { - background-color: var(--background-modifier-border); -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -:root { - --dialog-width: calc(min(auto, 100%)); - --dialog-height: calc(min(auto, 100%)); - } - -.settings-display { - padding: 1rem; - width: 100%; - max-width: 500px; - } - -.setting-item { - display: flex; - justify-content: space-between; - padding: 0.5rem 0; - border-bottom: 1px solid var(--background-modifier-border); - } - -.setting-item:last-child { - border-bottom: none; - } - -.setting-label { - font-weight: bold; - color: var(--text-muted); - } - -.setting-value { - color: var(--text-normal); - } - -.button-group { - margin-top: 1rem; - } - -.model-item { - border-radius: 0.5rem; - cursor: pointer; - padding: 0.5rem; - border-bottom: 1px solid var(--background-modifier-border); - } - -.model-item:hover { - background-color: var(--background-modifier-border); - } - -.model-item:last-child { - border-bottom: none; - } - -.queue-indicator { - cursor: pointer; - opacity: 0.8; - transition: opacity 0.2s ease; - } - -.queue-indicator:hover { - opacity: 1; - } - -.rotating { - animation: spin 2s linear infinite; - } - -@keyframes spin { - 100% { - transform: rotate(360deg); - } - } - -.vision-recall-status-bar-control { - cursor: pointer; - opacity: 0.8; - transition: opacity 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - padding: 0 4px; - } - -.vision-recall-status-bar-control:hover { - opacity: 1; - } - -.file-upload-container { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - margin-top: 20px; - } - -.clipboard-upload-button-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 40px; - } - -.vision-recall-view { - padding-right: 20px; - padding-left: 20px; - } - -.vision-recall-view a, - .link { - color: var(--text-accent); - text-decoration: underline; - cursor: pointer; - } - -.vision-recall-view a:hover, - .link:hover { - color: var(--text-accent-hover); - } - -.vision-recall-view h2 { - /* margin-bottom: 20px; */ - } - -.vision-recall-view ul { - list-style-type: none; - padding: 0; - } - -.vision-recall-view li { - /* margin-bottom: 20px; */ - } - -.vision-recall-view .view-filters { - margin-bottom: 10px; - } - -.vision-recall-view .view-filters input[type='text'] { - width: 100%; - padding: 8px; - border: 1px solid var(--background-modifier-border); /* Use Obsidian theme variable for border */ - border-radius: 5px; - background-color: var( - --background-primary - ); /* Use Obsidian theme variable for background */ - color: var(--text-normal); /* Use Obsidian theme variable for text color */ - /* margin-bottom: 5px; Add some margin between input fields */ - } - -.vision-recall-view .metadata-list { - display: flex; /* Use flexbox for list layout */ - flex-direction: column; /* Stack list items vertically */ - border: 1px solid var(--background-modifier-border); - border-radius: 5px; - overflow: hidden; /* Clip any content that overflows rounded corners */ - } - -.vision-recall-view .metadata-list .list-header { - display: flex; /* Flexbox for header items */ - background-color: var( - --background-modifier-hover - ); /* Header background color */ - padding: 8px 10px; - font-weight: bold; - border-bottom: 1px solid var(--background-modifier-border); - } - -.vision-recall-view .metadata-list .list-header strong { - flex: 1; /* Distribute space evenly among header items */ - text-align: left; /* Align header text to the left */ - padding-right: 10px; /* Add some spacing between header items */ - white-space: nowrap; - } - -.vision-recall-view .metadata-list .list-item { - display: flex; /* Flexbox for list items */ - padding: 10px 10px; - border-bottom: 1px solid var(--background-modifier-border); /* Separator between items */ - } - -.vision-recall-view .metadata-list .list-item:last-child { - border-bottom: none; /* Remove border from the last item */ - } - -.vision-recall-view .metadata-list .list-item span { - flex: 1; /* Distribute space evenly among item spans */ - text-align: left; /* Align text to the left */ - padding-right: 10px; /* Spacing between spans in items */ - overflow: hidden; /* Ensure text ellipsis works */ - text-overflow: ellipsis; /* Ellipsis for overflowing text */ - white-space: nowrap; /* Prevent text wrapping */ - padding-bottom: 10px; - } - -/* Adjust width for specific columns if needed */ - -.vision-recall-view .metadata-list .list-header strong:nth-child(1), /* Screenshot Filename */ -.vision-recall-view .metadata-list .list-item span:nth-child(1) { - flex: 1; - } - -.vision-recall-view .metadata-list .list-header strong:nth-child(2), /* Note Path */ -.vision-recall-view .metadata-list .list-item span:nth-child(2) { - flex: 1; - } - -.vision-recall-view .metadata-list .list-header strong:nth-child(3), /* Timestamp */ -.vision-recall-view .metadata-list .list-item span:nth-child(3) { - flex: 1.5; - } - -.vision-recall-view .metadata-list .list-header strong:nth-child(4), /* Extracted Tags */ -.vision-recall-view .metadata-list .list-item span:nth-child(4) { - flex: 2; - } - -.vision-recall-view .metadata-list .list-header strong:nth-child(5), /* Actions */ -.vision-recall-view .metadata-list .list-item span:nth-child(5) { - flex: 1; - justify-content: end; - flex-direction: row; - align-items: end; - text-align: right; - min-width: -moz-fit-content; - min-width: fit-content; - width: -moz-fit-content; - width: fit-content; - padding-right: 0px; - } - -.vision-recall-view .view-filters label { - margin-right: 5px; - } - -.vision-recall-view .view-filters input[type='date'] { - padding: 8px; - border: 1px solid var(--background-modifier-border); - border-radius: 5px; - background-color: var(--background-primary); - color: var(--text-normal); - /* margin-bottom: 5px; */ - } - -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.pointer-events-none { - pointer-events: none; -} - -.pointer-events-auto { - pointer-events: auto; -} - -.fixed { - position: fixed; -} - -.absolute { - position: absolute; -} - -.relative { - position: relative; -} - -.left-0 { - left: 0px; -} - -.right-2 { - right: 0.5rem; -} - -.top-0 { - top: 0px; -} - -.top-2 { - top: 0.5rem; -} - -.z-\[5\] { - z-index: 5; -} - -.z-\[6\] { - z-index: 6; -} - -.m-0 { - margin: 0px; -} - -.mx-auto { - margin-left: auto; - margin-right: auto; -} - -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; -} - -.mb-2 { - margin-bottom: 0.5rem; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.mb-8 { - margin-bottom: 2rem; -} - -.mt-4 { - margin-top: 1rem; -} - -.block { - display: block; -} - -.flex { - display: flex; -} - -.inline-flex { - display: inline-flex; -} - -.list-item { - display: list-item; -} - -.hidden { - display: none; -} - -.h-2 { - height: 0.5rem; -} - -.h-4 { - height: 1rem; -} - -.h-48 { - height: 12rem; -} - -.h-5 { - height: 1.25rem; -} - -.h-fit { - height: -moz-fit-content; - height: fit-content; -} - -.h-full { - height: 100%; -} - -.w-4 { - width: 1rem; -} - -.w-5 { - width: 1.25rem; -} - -.w-80 { - width: 20rem; -} - -.w-fit { - width: -moz-fit-content; - width: fit-content; -} - -.w-full { - width: 100%; -} - -.min-w-full { - min-width: 100%; -} - -.flex-1 { - flex: 1 1 0%; -} - -.cursor { - cursor: var(--cursor); -} - -.cursor-not-allowed { - cursor: not-allowed; -} - -.cursor-pointer { - cursor: pointer; -} - -.select-text { - -webkit-user-select: text; - -moz-user-select: text; - user-select: text; -} - -.flex-row { - flex-direction: row; -} - -.flex-col { - flex-direction: column; -} - -.flex-wrap { - flex-wrap: wrap; -} - -.items-center { - align-items: center; -} - -.justify-start { - justify-content: flex-start; -} - -.justify-end { - justify-content: flex-end; -} - -.justify-center { - justify-content: center; -} - -.justify-between { - justify-content: space-between; -} - -.gap-1 { - gap: 0.25rem; -} - -.gap-2 { - gap: 0.5rem; -} - -.gap-4 { - gap: 1rem; -} - -.overflow-hidden { - overflow: hidden; -} - -.overflow-y-auto { - overflow-y: auto; -} - -.rounded-full { - border-radius: 9999px; -} - -.rounded-m { - border-radius: var(--radius-m); -} - -.rounded-none { - border-radius: 0px; -} - -.bg-\[\#000000\] { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); -} - -.bg-background-modifier-hover { - background-color: var(--background-modifier-hover); -} - -.bg-background-primary { - background-color: var(--background-primary); -} - -.bg-background-secondary { - background-color: var(--background-secondary); -} - -.bg-background-secondary-alt { - background-color: var(--background-secondary-alt); -} - -.bg-opacity-30 { - --tw-bg-opacity: 0.3; -} - -.p-0 { - padding: 0px; -} - -.p-2 { - padding: 0.5rem; -} - -.p-4 { - padding: 1rem; -} - -.pb-10 { - padding-bottom: 2.5rem; -} - -.text-center { - text-align: center; -} - -.font-bold { - font-weight: var(--font-bold); -} - -.font-medium { - font-weight: var(--font-medium); -} - -.text-red { - color: var(--color-red); -} - -.text-text-muted { - color: var(--text-muted); -} - -.text-text-normal { - color: var(--text-normal); -} - -.opacity-50 { - opacity: 0.5; -} - -.shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.filter { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -.backdrop-blur-sm { - --tw-backdrop-blur: blur(4px); - -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); -} - -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.duration-300 { - transition-duration: 300ms; -} - -.\@container\/header { - container-type: inline-size; - container-name: header; -} - -.\@container\/subheader { - container-type: inline-size; - container-name: subheader; -} - -/* Add these styles to your existing CSS */ - -.pagination-controls { - padding: 8px; - border-top: 1px solid var(--background-modifier-border); -} - -.pagination-controls button { - display: flex; - align-items: center; - gap: 4px; - padding: 4px 8px; - border: 1px solid var(--background-modifier-border); - border-radius: 4px; - background-color: var(--background-primary); -} - -.pagination-controls button:hover:not(:disabled) { - background-color: var(--background-modifier-hover); -} - -.pagination-controls .items-per-page-select { - padding: 4px 8px; - border: 1px solid var(--background-modifier-border); - border-radius: 4px; - background-color: var(--background-primary); -} - -.pagination-info { - padding: 0 8px; -} - -.gallery-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: 1rem; - padding: 1rem; -} - -.gallery-item { - background: var(--background-secondary); - border-radius: 8px; - overflow: hidden; - transition: transform 0.2s; -} - -.gallery-item:hover { - transform: translateY(-2px); -} - -.gallery-image-container { - position: relative; - aspect-ratio: 16/9; - overflow: hidden; -} - -.gallery-image-container img { - width: 100%; - height: 100%; - -o-object-fit: cover; - object-fit: cover; - cursor: pointer; -} - -.gallery-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - opacity: 0; - transition: opacity 0.2s; - pointer-events: none; -} - -.gallery-image-container:hover .gallery-overlay { - opacity: 1; -} - -.gallery-button { - background: var(--interactive-accent); - color: var(--text-on-accent); - padding: 0.5rem 1rem; - border-radius: 4px; - border: none; - cursor: pointer; - margin-bottom: 0.5rem; -} - -.gallery-actions { - display: flex; - gap: 1rem; - color: white; -} - -.gallery-info { - padding: 0.75rem; -} - -.gallery-filename { - font-weight: bold; - margin-bottom: 0.25rem; -} - -.gallery-date { - color: var(--text-muted); - font-size: 0.9em; - margin-bottom: 0.25rem; -} - -.gallery-tags { - color: var(--text-muted); - font-size: 0.9em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.vision-recall-status-bar-controls { - display: flex; - gap: 8px; - align-items: center; -} - -/* Screenshot Modal Styles */ - -.screenshot-modal-content { - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.screenshot-modal-link { - display: block; - margin: auto; - cursor: pointer; -} - -.screenshot-modal-image { - display: block; - margin: auto; - max-width: 100%; - max-height: 80vh; - height: auto; - width: auto; -} - -.hover\:bg-background-modifier-hover:hover { - background-color: var(--background-modifier-hover); -} - -@container header (min-width: 48rem) { - .\@3xl\/header\:block { - display: block; - } -} - -@container subheader (min-width: 48rem) { - .\@3xl\/subheader\:block { - display: block; - } -} - -@container subheader (min-width: 56rem) { - .\@4xl\/subheader\:block { - display: block; - } -}