Discource-C
/
discourse-ai
mirror of https://github.com/discourse/discourse-ai.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: show image caption button on image hover (#670)

This commit is contained in:
Kris 2024-06-19 18:58:19 -04:00 committed by GitHub
parent 8849caf136
commit 59ed6d7b3e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 41 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
assets/stylesheets/modules/ai-helper/common/ai-helper.scss
View File

@ -482,37 +482,49 @@
}
// AI Image Caption Feature:
.image-wrapper .button-wrapper {
.generate-caption {
background: var(--tertiary-low);
color: var(--tertiary);
box-shadow: var(--shadow-dropdown);
position: absolute;
white-space: nowrap;
top: -3.15rem;
left: 0.75rem;
padding: 0.5em 0.75em;
transition: all 0.25s ease;
.image-wrapper {
.button-wrapper {
.generate-caption {
background: var(--tertiary-low);
color: var(--tertiary);
box-shadow: var(--shadow-dropdown);
position: absolute;
white-space: nowrap;
top: -2rem;
left: 0.35rem;
padding: 0.33em 0.75em;
transition: all 0.25s ease;
.discourse-no-touch & {
display: none;
}
.d-icon {
margin-right: 0.25rem;
.d-icon {
margin-right: 0.25rem;
}
&:active {
box-shadow: none;
}
&:hover,
&:focus {
background: var(--tertiary-400);
color: var(--tertiary-hover);
cursor: pointer;
}
&.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.7;
}
}
&:active {
box-shadow: none;
}
&:hover,
&:focus {
background: var(--tertiary-400);
color: var(--tertiary-hover);
cursor: pointer;
}
&.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.7;
}
.discourse-no-touch & {
&:hover {
.button-wrapper .generate-caption {
display: block;
}
}
}
}