cloudstudio/vendor/modules/code-oss-dev/extensions/CloudStudio.metawork/media/chat/message/index.css

Run VS Code on a remote server.

body{
  padding: 0;
}
body *{
  box-sizing: border-box;
}
.container{
  position: relative;
  display: flex;
  flex-flow: column;
  padding: 0;
  height: 100vh;
  padding-top: 5px;
}
.container .list{
  flex:1;
  overflow: auto;
  padding-bottom: 30px;
  min-width: 250px;
}
.container .item{
  position: relative;
  display: flex;
  align-items: flex-start;
  font-size: var(--vscode-font-size);
  margin-top: 15px;
  padding: 5px 30px;
  overflow: auto;
}

.container .item::-webkit-scrollbar{
  height: 4px;
  transition: opacity .5s linear;
}
.container .item:hover{
  opacity: 1;
}
.container .item-merge-text + .item-merge-text{
  margin-top: 0;
}
.container .item-merge-text + .item-merge-text .avatar{
  opacity: 0;
  height: 0;
}
.container .item-merge-text + .item-merge-text .name{
  display: none;
}
.container .item-merge-text + .item-merge-text .text{
  padding: 0
}
.container .item-merge-text + .item-merge-text .time{
  position: absolute;
  left: 26px;
  top: 6px;
  opacity: 0;
  transition: all .5s linear;
}
.container .item-merge-text + .item-merge-text:hover .time{
  opacity: 1;
}
.container .item:hover{
  background-color: #303031;
}
.container .dateline{
  text-align: center;
  font-size: var(--vscode-editor-font-size);
  color: var(--vscode-descriptionForeground);
  margin: 15px;
}
.container .avatar{
  width: 32px;
  height: 32px;
  border-radius: 4px;
}
.container .article{
  flex: 1;
  padding-left: 10px;
  overflow-y: hidden;
  overflow-x: hidden;
}
.container .article::-webkit-scrollbar{
  height: 4px;
}
.container .name{
  color: var(--vscode-foreground);
}
.container .time{
  margin-left: 6px;
  color: var(--vscode-descriptionForeground);
  font-size: var(--vscode-editor-font-size);
  opacity: .7;
}
.container .text{
  color: var(--vscode-foreground);
  line-height: 16px;
  word-break: break-all;
  white-space: pre-wrap;
  padding-top: 5px;
}
.container .code{
  /* color: var(--vscode-foreground); */
  font-size: var(--vscode-editor-font-size);
  line-height: 16px;
  padding-top: 5px;
}
.container code{
  /* color: var(--vscode-debugTokenExpression-string); */
}
.container pre{
  cursor: pointer;
  white-space: pre;
  margin: 0;
  padding-bottom: 8px;
  overflow: hidden;
  overflow-x: auto;
}
.container pre::-webkit-scrollbar{
  height: 1px;
}
.container pre::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.container pre:hover::-webkit-scrollbar-thumb{
  background-color: var(--vscode-descriptionForeground);
}
.container .quote{
  border-top: 1px solid #3C3C3C;
  padding-top: 8px;
  color: #808080;
  font-size: var(--vscode-editor-font-size);
  cursor: pointer;
  user-select: none;
  margin-top: -1px;
  word-break: break-all;
  text-indent: -48px;
  padding-left: 48px;
}
.form{
  width: 100%;
  position: relative;
  padding: 0 30px 30px 30px;
}
.input{
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 8px;
  border-width: 0;
  outline: none;
  background-color: var(--vscode-input-background);
  color: var(--vscode-foreground);
  border: 1px solid var(--vscode-panelInput-border);
}
.enterIcon{
  position: absolute;
  right: 36px;
  top: 6px;
  opacity: .7;
  cursor: pointer;
}

/* 重置vscode风格 - 黑色风格 */
.vscode-dark .class_{
  color: #4ec9b0;
}
.vscode-dark .function_{
  color: #dcdcaa;
}
.vscode-dark .hljs-params{
  color: #4ec9b0;
}

/* 重置vscode风格 - 白色风格 */
.vscode-light .container .item:hover{
  background-color: #f0f0f0;
}
.vscode-light .container .quote{
  border-top: 1px solid #D4D4D4;
  color: #A0A0A0;
}
.vscode-light code{
  color: #001080;
}
.vscode-light .hljs-keyword{
  color: #af00db;
}
.vscode-light .hljs-string{
  color: #a31515;
}
.vscode-light .hljs-title.class_{
  color: #267f99
}
.vscode-light .hljs-title.function_{
  color: #795e26;
}
.vscode-light .hljs-attr{
  color: #001080;
}
.vscode-light .hljs-params{
  color: #001080;
}

.vscode-light .hljs-selector-tag{
  color: #800000;
}
.vscode-light .hljs-selector-class{
  color: #800000;
}
.vscode-light .hljs-attribute{
  color: #ff0000;
}
.vscode-light .hljs-number{
  color: #098658;
}