mirror of
https://github.com/discourse/discourse-ai.git
synced 2025-08-06 21:23:47 +00:00
88 lines
1.9 KiB
SCSS
88 lines
1.9 KiB
SCSS
:root {
|
|
// Overridden in ai-composer-helper.gjs to adjust for virtual keyboard
|
|
--mobile-virtual-screen-height: 100svh;
|
|
}
|
|
|
|
.ai-composer-helper-menu:not(.is-expanded) {
|
|
--composer-helper-menu-padding: 1rem;
|
|
--composer-helper-menu-trigger-size: 3em;
|
|
--composer-helper-menu-height: calc(1rem + 3em);
|
|
|
|
position: fixed;
|
|
list-style: none;
|
|
inset: auto;
|
|
transform: none;
|
|
max-width: unset;
|
|
z-index: z("fullscreen");
|
|
top: calc(
|
|
var(--mobile-virtual-screen-height) - var(--composer-helper-menu-height) -
|
|
env(keyboard-inset-height)
|
|
);
|
|
right: 0;
|
|
padding-right: 1rem;
|
|
padding-bottom: var(--composer-helper-menu-padding);
|
|
margin: 0px;
|
|
width: 100vw;
|
|
text-align: right;
|
|
border: none;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent 0,
|
|
rgba(0, 0, 0, 0.3) 100%
|
|
);
|
|
box-shadow: none;
|
|
|
|
&.out-of-bounds {
|
|
visibility: visible;
|
|
pointer-events: initial;
|
|
}
|
|
|
|
button {
|
|
background: var(--secondary);
|
|
border: 1px solid var(--primary-low);
|
|
border-radius: 100%;
|
|
box-shadow: 0 0 10px 2px
|
|
dark-light-choose(
|
|
rgba(var(--primary-rgb), 0.1),
|
|
rgba(var(--secondary-rgb), 0.1)
|
|
);
|
|
width: var(--composer-helper-menu-trigger-size);
|
|
height: var(--composer-helper-menu-trigger-size);
|
|
animation-duration: 0.15s;
|
|
animation-timing-function: cubic-bezier(0, 0.7, 0.9, 1.2);
|
|
animation-fill-mode: backwards;
|
|
animation-name: slide-in;
|
|
|
|
&:hover {
|
|
.discourse-no-touch & {
|
|
background: var(--secondary);
|
|
}
|
|
}
|
|
|
|
.d-button-label {
|
|
display: none;
|
|
}
|
|
.d-icon {
|
|
margin: 0;
|
|
color: var(--tertiary-high);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ios-safari-composer-hacks .ai-composer-helper-menu:not(.is-expanded) {
|
|
top: calc(
|
|
var(--mobile-virtual-screen-height) - var(--composer-helper-menu-height)
|
|
);
|
|
}
|
|
|
|
@keyframes slide-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(calc(100% + 1rem));
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|