mirror of
https://github.com/invoke-ai/InvokeAI
synced 2025-07-25 12:55:55 +00:00
91 lines
1.6 KiB
SCSS
91 lines
1.6 KiB
SCSS
@use '../../../styles/Mixins/' as *;
|
|
|
|
.parameters-panel-wrapper-enter {
|
|
transform: translateX(-150%);
|
|
}
|
|
|
|
.parameters-panel-wrapper-enter-active {
|
|
transform: translateX(0);
|
|
transition: all 120ms ease-out;
|
|
}
|
|
|
|
.parameters-panel-wrapper-exit {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.parameters-panel-wrapper-exit-active {
|
|
transform: translateX(-150%);
|
|
transition: all 120ms ease-out;
|
|
}
|
|
|
|
.parameters-panel-wrapper {
|
|
background-color: var(--background-color);
|
|
height: $app-content-height;
|
|
width: $options-bar-max-width;
|
|
max-width: $options-bar-max-width;
|
|
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
overflow-y: scroll;
|
|
@include HideScrollbar;
|
|
|
|
.parameters-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 0.5rem;
|
|
height: 100%;
|
|
@include HideScrollbar;
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
&[data-pinned='false'] {
|
|
z-index: 20;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
filter: var(--floating-panel-drop-shadow);
|
|
width: calc($options-bar-max-width + 2rem);
|
|
max-width: calc($options-bar-max-width + 2rem);
|
|
height: 100%;
|
|
|
|
.parameters-panel-margin {
|
|
margin: 1rem;
|
|
}
|
|
}
|
|
|
|
.parameters-panel-pin-button {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
z-index: 20;
|
|
|
|
&[data-selected='true'] {
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
svg {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.invoke-ai-logo-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 0.7rem;
|
|
padding-left: 0.5rem;
|
|
padding-top: $progress-bar-thickness;
|
|
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|