borderless / assets /app.css
spagestic's picture
TODO: fix the double scrollbar
3d1ce05
Raw
History Blame Contribute Delete
3.47 kB
.borderless-main-workspace {
align-items: stretch;
gap: 12px;
flex: 1 1 auto;
min-height: 0;
}
.borderless-center-panel,
.borderless-chat-panel {
min-height: 70vh;
}
.borderless-center-panel {
gap: 8px;
display: flex;
flex-direction: column;
}
.borderless-chat-panel {
border-left: 1px solid rgba(148, 163, 184, 0.18);
padding-left: 10px;
display: flex;
flex-direction: column;
align-self: stretch;
overflow: hidden;
}
.borderless-tabs {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
height: 100%;
overflow: hidden;
}
.borderless-tabs > .tab-wrapper {
flex-shrink: 0;
}
.borderless-tabs .tabitem {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.borderless-tabs .tabitem.borderless-form-tab {
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
.borderless-tabs .tabitem.borderless-chat-tab {
overflow: hidden;
}
.borderless-tabs .tabitem.borderless-chat-tab > .column {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: transparent;
}
.borderless-chat-panel > :where(.gap, .block, .form, div) {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
gap: 8px;
overflow: hidden;
}
.borderless-form-panel {
gap: 8px;
}
.borderless-form-panel textarea {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.borderless-form-panel textarea::-webkit-scrollbar {
display: none;
}
.borderless-form-hint {
color: #9ca3af;
font-size: 0.9rem;
}
.borderless-chat-panel .borderless-chat-input textarea {
min-height: 4rem;
resize: none;
background: transparent;
}
.borderless-chat-panel .borderless-chat-input,
.borderless-chat-panel .borderless-chat-input :where(.wrap, .input-container) {
flex: 0 0 auto;
background: transparent !important;
scrollbar-width: none;
-ms-overflow-style: none;
}
.borderless-chat-panel textarea::-webkit-scrollbar {
display: none;
}
.borderless-chat-panel .borderless-chatbot,
.borderless-chat-panel .chatbot {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
background: transparent !important;
}
.borderless-chat-panel .chatbot-wrap {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-gutter: auto;
scrollbar-width: none;
-ms-overflow-style: none;
background: transparent !important;
}
.borderless-chat-panel .borderless-chat-input::-webkit-scrollbar,
.borderless-chat-panel .chatbot-wrap::-webkit-scrollbar {
display: none;
}
.borderless-chat-panel .bubble-wrap {
flex: 0 0 auto;
min-height: auto;
margin-block: 0.35rem;
}
.borderless-chat-panel :where(
.bubble,
.message,
.message-wrap,
.message-content,
.md,
.prose
) {
max-height: none !important;
overflow-y: visible !important;
scrollbar-width: none;
}
.borderless-chat-panel :where(
.bubble,
.message,
.message-wrap,
.message-content,
.md,
.prose
)::-webkit-scrollbar {
display: none;
}
.borderless-hero h2 {
margin-bottom: 0.25rem;
}
.borderless-hero p {
max-width: 820px;
color: #9ca3af;
}
.borderless-examples-title {
margin-top: 0.35rem;
font-weight: 600;
}
.globe-column {
min-height: 70vh;
}
@media (max-width: 900px) {
.borderless-chat-panel {
border-left: 0;
height: auto;
min-height: 70vh;
padding-left: 0;
}
}
footer {
opacity: 0.72;
}