topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2026-04-28 03:14:18 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
jerryjzhang
2023-06-12 18:44:01 +08:00
commit dc4fc69b57
879 changed files with 573090 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

579
webapp/packages/supersonic-fe/src/pages/Chat/style.less Normal file
View File

@@ -0,0 +1,579 @@
.chat {
height: calc(100vh - 48px) !important;
overflow-y: hidden;
background: linear-gradient(180deg, rgba(23, 74, 228, 0) 29.44%, rgba(23, 74, 228, 0.06) 100%),
linear-gradient(90deg, #f3f3f7 0%, #f3f3f7 20%, #ebf0f9 60%, #f3f3f7 80%, #f3f3f7 100%);
&.external {
.chatApp {
width: calc(100vw - 450px) !important;
height: calc(100vh - 58px) !important;
}
}
&.mobile {
height: 100vh !important;
.chatSection {
// height: 100vh !important;
height: 100% !important;
}
.conversation {
// height: 100vh !important;
height: 100% !important;
}
.chatApp {
width: 100vw !important;
// height: 100vh !important;
height: 100% !important;
}
}
}
.chatSection {
display: flex;
height: calc(100vh - 48px) !important;
overflow-y: hidden;
}
.chatBody {
height: 100%;
}
.conversation {
position: relative;
width: 225px;
height: calc(100vh - 48px);
.leftSection {
width: 100%;
height: 100%;
}
}
.chatApp {
display: flex;
flex-direction: column;
width: calc(100vw - 510px);
height: calc(100vh - 58px) !important;
margin-top: 10px;
color: rgba(0, 0, 0, 0.87);
.emptyHolder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.navBar {
position: relative;
z-index: 10;
display: flex;
align-items: center;
height: 40px;
padding: 0 10px;
background: rgb(243 243 243);
border-bottom: 1px solid rgb(228, 228, 228);
.conversationNameWrapper {
display: flex;
align-items: center;
.conversationName {
padding: 4px 12px;
color: var(--text-color-third) !important;
font-size: 14px !important;
border-radius: 4px;
cursor: pointer;
.editIcon {
margin-left: 10px;
color: var(--text-color-fourth);
font-size: 14px;
}
&:hover {
background-color: rgba(0, 0, 0, 0.03);
}
}
.divider {
width: 1px;
height: 16px;
margin-right: 4px;
margin-left: 12px;
background-color: var(--text-color-fourth);
}
}
.conversationInput {
width: 300px;
color: var(--text-color-third) !important;
font-size: 14px !important;
cursor: default !important;
}
}
.chatBody {
display: flex;
flex: 1;
.chatContent {
display: flex;
flex-direction: column;
width: 100%;
.messageContainer {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
overflow-x: hidden;
overflow-y: scroll;
.messageList {
display: flex;
flex-direction: column;
padding: 0 20px 90px 4px;
row-gap: 20px;
.messageItem {
display: flex;
flex-direction: column;
row-gap: 20px;
}
&.reportLoading {
position: absolute;
bottom: 10000px;
width: 100%;
}
}
}
}
}
}
.mobile {
.messageList {
padding: 0 12px 20px !important;
}
}
.keyword {
color: var(--primary-color);
}
.messageItem {
margin-top: 12px;
}
.messageTime {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
color: #999;
}
.modules {
display: flex;
align-items: center;
height: 40px;
padding: 8px 12px;
overflow: hidden;
background: rgb(243, 243, 243);
border-top: 1px solid rgb(228, 228, 228);
.moduleType {
width: 80px;
margin-right: 12px;
:global {
.ant-select-selection-item {
font-size: 13px !important;
}
.ant-select-selection-item,
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector::after {
line-height: 28px !important;
}
}
.moduleSelect {
box-sizing: border-box;
width: 100%;
height: 100%;
color: rgba(0, 0, 0, 0.87);
word-break: break-all;
border: 0;
border-radius: 20px;
:global {
.ant-select-selector {
height: 30px !important;
border: 1px solid var(--primary-color) !important;
border-radius: 20px !important;
}
.ant-select-arrow {
margin-top: -4px !important;
}
}
}
}
.example {
margin-right: 4px;
// margin-left: 16px;
color: var(--text-color-secondary);
font-size: 13px;
}
:global {
button[ant-click-animating-without-extra-node]::after {
border: 0 none;
opacity: 0;
animation: none 0 ease 0 1 normal;
}
.iconBtn {
color: rgba(0, 0, 0, 0.4) !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
.scrollerControlIcon {
font-size: 12px;
}
&:hover {
background: rgba(0, 0, 0, 0.05) !important;
}
}
}
.modulesInner {
display: flex;
flex: 1;
overflow-x: scroll;
overflow-y: hidden;
scroll-behavior: smooth;
&::-webkit-scrollbar {
display: none;
}
.moduleItem {
position: relative;
display: flex;
align-items: center;
margin-left: 8px;
padding: 4px 11px;
color: var(--text-color);
font-weight: 500;
font-size: 14px;
line-height: 1.43;
white-space: nowrap;
background: #fff;
border: 1px solid #fff;
border-radius: 20px;
cursor: pointer;
transition: 0.15s ease-in-out;
&:hover {
background: rgba(0, 0, 0, 0.05);
background-clip: padding-box;
border-color: rgba(0, 0, 0, 0.05);
}
&:first-child {
margin-left: 0 !important;
}
&.activeModuleItem {
color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
&.cmdItem {
font-weight: normal;
font-size: 13px;
}
}
}
}
.optGroupBar {
display: flex;
align-items: center;
justify-content: space-between;
// width: 530px;
&.recentSearchBar {
padding-top: 2px;
padding-bottom: 5px;
}
.optGroupTitle {
color: #333;
font-weight: 500;
font-size: 14px;
}
.recentSearch {
color: #999;
font-weight: normal;
}
.clearSearch {
color: #666;
font-size: 14px;
cursor: pointer;
}
}
.recentSearchOption {
padding-left: 12px !important;
.optionItem {
display: flex;
align-items: center;
justify-content: space-between;
width: 483px;
.removeRecentMsg {
display: none;
cursor: pointer;
}
}
&:hover {
.removeRecentMsg {
display: block;
}
}
}
.conversationList {
padding-top: 20px;
.conversationItem {
padding-left: 16px;
cursor: pointer;
.conversationItemContent {
display: flex;
align-items: center;
padding: 12px 0;
color: var(--text-color-third);
.conversationIcon {
margin-right: 10px;
color: var(--text-color-fourth);
font-size: 20px;
}
.conversationContent {
width: 160px;
overflow: hidden;
color: var(--text-color-third);
white-space: nowrap;
text-overflow: ellipsis;
}
}
&.activeConversationItem,
&:hover {
.conversationContent {
color: var(--chat-blue);
}
}
}
}
.addConversation {
display: flex;
align-items: center;
margin-left: 12px;
color: var(--text-color-third);
column-gap: 4px;
cursor: pointer;
&:hover {
color: var(--primary-color);
}
}
.loadingWords {
padding: 40px 1px;
}
.associateWordsOption {
display: flex;
align-items: center;
column-gap: 10px;
.optionContent {
display: flex;
align-items: center;
min-width: 450px;
column-gap: 10px;
}
.indicatorItem {
min-width: 180px;
.indicatorLabel {
color: var(--text-color-fourth);
font-size: 12px;
}
.indicatorValue {
margin-left: 4px;
font-size: 13px;
}
}
}
.collapseBtn {
margin: 0 10px;
color: var(--text-color-third);
font-size: 16px;
cursor: pointer;
&:hover {
color: var(--primary-color);
}
}
.autoCompleteDropdown {
width: 650px !important;
min-width: 650px !important;
border-radius: 10px;
:global {
.ant-select-item {
min-height: 36px !important;
line-height: 26px !important;
&:not(:first-child):hover {
background: #f5f5f5 !important;
}
}
// .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
// background-color: #fff;
// }
}
}
.recommendItemTitle {
margin-right: 14px;
padding: 4px 12px;
background-color: var(--deep-background);
border-radius: 2px;
}
.refeshQuestions {
cursor: pointer;
.reloadIcon {
margin-right: 4px;
}
}
.recommendQuestions {
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 100%;
color: var(--text-color-fourth);
font-size: 18px;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
}
.currentTool {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 24px 0 2px;
color: var(--chat-blue);
font-weight: 500;
font-size: 16px;
background: rgba(255, 255, 255, 0.2);
.removeTool {
position: absolute;
top: 14px;
right: 6px;
color: var(--text-color-fifth);
font-size: 14px;
cursor: pointer;
&:hover {
color: var(--chat-blue);
}
}
}
.associateOption {
display: flex;
align-items: center;
}
.associateOptionAvatar {
width: 32px;
margin-right: 10px;
}
.optionContent {
min-width: 330px;
}
.optionIndicator {
min-width: 120px;
margin-left: 4px;
color: var(--text-color-fourth);
font-size: 12px;
}
.operateSection {
margin-top: 20px;
padding-left: 15px;
}
.operateItem {
display: flex;
align-items: center;
padding: 10px 0;
cursor: pointer;
.operateIcon {
margin-right: 10px;
color: var(--text-color-fourth);
font-size: 20px;
}
.operateLabel {
color: var(--text-color-third);
font-size: 14px;
}
&:hover {
.operateLabel {
color: var(--chat-blue);
}
}
}
.messageLoading {
margin-top: 30px;
}