@notebook-intelligence/notebook-intelligence/style/base.css

AI coding assistant for JupyterLab

/*
   Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>

    See the JupyterLab Developer Guide for useful CSS Patterns:
    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar-header {
  height: 25px;
  padding: 5px 10px;
  display: flex;
}

.sidebar-title {
  font-size: 14px;
  font-weight: bold;
  flex-grow: 1;
}

.sidebar-messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 5px;
}

.sidebar-user-input {
  height: auto;
  padding: 5px;
  display: flex;
  flex-direction: column;
  background-color: var(--jp-cell-editor-background);
  border: 2px solid var(--jp-border-color1);
  margin: 4px;
  border-radius: 3px;
}

/* stylelint-disable */
.sidebar-user-input.generating {
  background:
    linear-gradient(
        var(--jp-cell-editor-active-background),
        var(--jp-cell-editor-active-background)
      )
      padding-box,
    linear-gradient(var(--angle), #f1259c, #687aff) border-box;
  animation: 4s rotate-gen linear infinite;
  border: 2px solid #0000 !important;
}
/* stylelint-enable */

.sidebar-user-input:focus-within {
  border-radius: 2px;
  border-color: var(--jp-brand-color1);
}

.sidebar-user-input textarea {
  width: 100%;
  font-family: var(--jp-ui-font-family);
  color: var(--jp-ui-font-color1);
  outline: none;
  border: none;
  resize: none;
  background: none;
  /* stylelint-disable */
  field-sizing: content;
  /* stylelint-enable */
  min-height: 36px;
  max-height: 200px;
}

.sidebar-user-input .user-input-context-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.user-input-context {
  display: flex;
  align-items: center;
  border: 1px solid var(--jp-border-color1);
  border-radius: 4px;
  padding: 2px;
  gap: 5px;
  font-size: 11px;
}

.user-input-context.off {
  color: var(--jp-ui-font-color2);
  font-style: italic;
}

.user-input-context-toggle {
  cursor: pointer;
}

.user-input-context-toggle:hover {
  background-color: var(--jp-layout-color2);
}

.user-input-context svg {
  width: 16px;
  height: 16px;
  margin: -4px 0;
}

.sidebar-user-input .user-input-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.chat-mode-widgets-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  margin-right: 5px;
}

.chat-mode-select {
  height: 24px;
  background-color: initial;
  color: var(--jp-ui-font-color1);
  padding: 0 5px;
  border-color: var(--jp-border-color0);
  outline: none;
}

.user-input-footer-button {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  padding: 2px;
  cursor: pointer;
  color: var(--jp-ui-font-color2);
}

.user-input-footer-button.tools-button {
  width: auto;
  border: 1px solid var(--jp-border-color0);
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 3px;
}

.user-input-footer-button.tools-button-warning {
  color: var(--jp-warn-color0);
  border-color: var(--jp-warn-color0);
}

.user-input-footer-button.tools-button-active {
  color: var(--jp-brand-color0);
  border-color: var(--jp-brand-color0);
}

.user-input-footer-button svg {
  width: 18px;
  height: 18px;
}

.chat-message {
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.chat-message pre {
  padding: 3px;
  border-radius: 3px;
  border: 1px solid var(--jp-border-color1);
}

pre:has(.code-block-header) {
  padding: 2px;
  background-color: var(--jp-layout-color2);
}

.chat-message-header {
  display: flex;
}

.chat-message-from {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.chat-message-from-icon {
  margin-right: 6px;
}

.chat-message-from-icon img {
  width: 18px;
  height: 18px;
}

.chat-response-img img {
  max-width: 100%;
}

.chat-message-from-icon-default.dark img {
  filter: invert(100%);
}

.chat-message-from-title {
  font-weight: bold;
}

.chat-message-from-progress {
  padding-left: 10px;
  flex-grow: 1;
  font-size: 12px;
}

.loading-ellipsis::after {
  display: inline-block;
  animation: animated-ellipsis steps(1, end) 1s infinite;
  content: '';
}

@keyframes animated-ellipsis {
  0% {
    content: '';
  }

  25% {
    content: '.';
  }

  50% {
    content: '..';
  }

  75% {
    content: '...';
  }

  100% {
    content: '';
  }
}

.chat-message-timestamp {
  padding-left: 10px;
  font-size: 11px;
}

.chat-message-content p {
  margin-block: 5px 5px;
  line-height: 18px;
}

.chat-message-content a {
  text-decoration: underline;
}

.chat-message-copilot {
  background-color: rgb(159 153 208 / 15%);
}

.copilot-generated-notebook-link {
  text-decoration: underline;
  cursor: pointer;
}

.sidebar-login-info {
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  line-height: 20px;
}

.sidebar-login-info a {
  text-decoration: underline;
}

.sidebar-login-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sidebar-login-buttons .jp-Dialog-button.jp-mod-styled {
  margin-right: 0;
}

.sidebar-greeting {
  padding: 5px;
  font-size: 14px;
  line-height: 20px;
}

.user-code-span {
  cursor: pointer;
  color: var(--jp-content-link-color);
}

.user-code-span:hover {
  text-shadow: 1px 1px var(--jp-border-color1);
}

.user-code-span:active {
  color: var(--jp-ui-font-color2);
}

.chat-response-html-frame {
  margin: 5px 0;
}

.chat-response-html-frame-iframe {
  width: 100%;
  border: none;
}

.chat-response-anchor {
  margin: 5px 0;
}

.chat-response-button {
  margin: 5px 0;
}

.chat-response-progress {
  margin: 5px 0;
}

.chat-confirmation-form {
  border: 1px solid var(--jp-border-color1);
  padding: 5px;
  line-height: 20px;
}

.chat-confirmation-form button {
  height: 24px;
  line-height: 24px;
  padding: 0 6px;
  margin-top: 2px;
}

.user-input-autocomplete,
.mode-tools-popover {
  display: flex;
  background-color: var(--jp-layout-color2);
  border: 1px solid var(--jp-border-color1);
  flex-direction: column;
  position: absolute;
  bottom: 80px;
  left: 4px;
  gap: 2px;
  /* stylelint-disable */
  max-height: min(calc(100% - 120px), 400px);
  /* stylelint-enable */
  overflow-y: auto;
  user-select: none;
}

.mode-tools-popover {
  width: calc(100% - 10px);
  /* stylelint-disable */
  max-height: min(calc(100% - 200px), 400px);
  /* stylelint-enable */
  box-shadow: var(--jp-brand-color0) 0 0 1px 1px;
  display: flex;
  flex-direction: column;
}

.mode-tools-popover-title {
  font-weight: bold;
}

.mode-tools-popover-header {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  background-color: var(--jp-layout-color1);
  padding: 2px;
}

.mode-tools-popover-header-icon svg {
  width: 18px;
  height: 18px;
}

.mode-tools-popover-clear-tools-button {
  flex-grow: 1;
  color: var(--jp-ui-font-color2);
  display: flex;
  padding-top: 3px;
}

.mode-tools-popover-clear-tools-button svg {
  width: 16px;
  height: 16px;
}

.mode-tools-popover-close-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: auto;
  height: 24px;
  color: white;
  background-color: var(--jp-brand-color0);
  padding-right: 6px;
  border-radius: 2px;
}

.mode-tools-popover-close-button svg {
  width: 16px;
  height: 16px;
  padding: 4px;
  margin-top: 2px;
}

.mode-tools-popover-tool-list {
  flex-grow: 1;
  overflow-y: auto;
}

.mode-tools-group {
  display: flex;
  flex-direction: column;
  padding-left: 5px;
  margin-bottom: 5px;
}

.mode-tools-group-header {
  padding: 5px 0;
  border-bottom: 1px solid var(--jp-border-color1);
  margin: 0 5px;
  font-weight: bold;
}

.user-input-autocomplete-item {
  cursor: pointer;
  padding: 4px;
}

.user-input-autocomplete-item.selected {
  background-color: var(--jp-layout-color1);
}

.code-block-header {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 3px;
  padding-bottom: 0;
}

.code-block-header-language {
  flex-grow: 1;
}

.code-block-header-button {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 2px;
}

.code-block-header-button:hover {
  background-color: var(--jp-layout-color1);
}

.code-block-header-button:active {
  background-color: var(--jp-layout-color3);
}

.copy-icon svg {
  width: 12px;
  height: 12px;
}

.claude-icon svg {
  width: 16px;
  height: 16px;
  color: #d97757;
}

.send-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 5px;
  border: 1px solid var(--jp-border-color1);
}

.send-button:hover:enabled {
  background-color: var(--jp-layout-color1);
}

.send-button svg {
  width: 18px;
  height: 18px;
}

button.send-button {
  padding: 4px;
  width: 24px;
  height: 24px;
}

.inline-popover {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: #f2f3ff;
}

body[data-jp-theme-light='false'] .inline-popover {
  background-color: #14162b;
}

.inline-prompt-container {
  width: 100%;
  height: 100%;
  padding: 2px;
}

.monaco-editor-container {
  width: 100%;
  flex-grow: 1;
  border: 1px solid var(--jp-border-color2);
  border-left: none;
  border-right: none;
}

.inline-popover-footer {
  height: 32px;
  width: calc(100% - 6px);
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  padding-left: 5px;
  background-color: var(--jp-layout-color2);
}

.inline-prompt-container textarea {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  font-family: var(--jp-ui-font-family);
  color: var(--jp-ui-font-color1);
  resize: none;
  background: none;
  outline: none;
  border: none;
}

.inline-popover-footer .jp-Button {
  height: 24px;
  padding: 4px;
}

.github-copilot-status-bar {
  color: var(--jp-inverse-layout-color2);
}

.github-copilot-status-bar svg {
  margin-top: 4px;
}

.github-copilot-login-dialog {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  width: 500px;
  line-height: 20px;
}

.github-copilot-login-status-text.logged-in {
  color: var(--jp-brand-color1);
}

.config-dialog {
  display: flex;
  flex-direction: column;
  width: 500px;
  height: 100%;
}

.config-dialog-container .jp-Dialog-content {
  max-height: 600px;
}

.config-dialog-container .jp-Dialog-footer {
  display: none;
}

.config-dialog-body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: 15px;
}

.model-config-section-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.model-config-section-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 0px;
}

.config-dialog-footer {
  height: 32px;
  display: flex;
  margin-top: 10px;
}

.config-dialog-body select.jp-mod-styled {
  appearance: auto;
}

.config-dialog-body input.jp-mod-styled {
  width: 100%;
}

.model-config-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-field-row {
  padding-left: 15px;
}

.form-field-description {
  color: var(--jp-ui-font-color2);
  margin-bottom: 5px;
}

.model-config-section-header {
  font-weight: bold;
  font-size: 15px;
}

.model-config-section-body {
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inline-prompt-widget {
  border-radius: 4px;
  padding: 3px;
  z-index: 1000;
  box-shadow: rgba(90 76 191 / 30%) 0 0 10px 10px;
}

.inline-prompt-widget::before {
  border-radius: 4px;
  content: '';
  background-image: conic-gradient(
    from 270deg at 50% 50%,
    #3b37ff 0deg,
    #096bde 160deg,
    #f1259c 175deg,
    #7c3ffe 200deg,
    #7c3ffe 350deg,
    #3b37ff 360deg
  );
  /* stylelint-disable */
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: -1px;
  /* stylelint-enable */
  position: absolute;
  z-index: -1;
}

/* stylelint-disable */
.jp-InputArea-editor.generating {
  background:
    linear-gradient(
        var(--jp-cell-editor-active-background),
        var(--jp-cell-editor-active-background)
      )
      padding-box,
    linear-gradient(var(--angle), #f1259c, #687aff) border-box;
  animation: 4s rotate-gen linear infinite;
  border: 2px solid #0000 !important;
}

@keyframes rotate-gen {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
/* stylelint-enable */

.ollama-warning-message {
  color: var(--jp-warn-color0);
  line-height: 20px;
}

.expandable-content-title {
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--jp-ui-font-color2);
}

.expandable-content-text {
  display: none;
  margin: 5px;
  padding: 0 5px;
  border: 1px solid var(--jp-border-color2);
  border-radius: 5px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: inset 0 0 15px 15px rgb(23 23 23 / 50%);
}

.expandable-content .collapsed-icon {
  display: inline;
}

.expandable-content .expanded-icon {
  display: none;
}

.expandable-content.expanded .expanded-icon {
  display: inline;
}

.expandable-content.expanded .expandable-content-text {
  display: block;
}

.expandable-content.expanded .collapsed-icon {
  display: none;
}

.access-token-config-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

svg.access-token-warning {
  color: var(--jp-warn-color0);
  width: 18px;
  height: 18px;
}

.checkbox-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.checkbox-item:hover {
  background-color: var(--jp-layout-color1);
}

.checkbox-item-indent-0 {
  padding-left: 0;
}

.checkbox-item-indent-1 {
  padding-left: 12px;
}

.checkbox-item-indent-2 {
  padding-left: 24px;
}

.checkbox-item-indent-3 {
  padding-left: 36px;
}

.checkbox-icon {
  width: 16px;
  height: 16px;
  color: var(--jp-brand-color1);
  padding-top: 1px;
}

.checkbox-item-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 2px;
  padding: 3px 2px;
  color: var(--jp-ui-font-color1);
}

.checkbox-item-header .checkbox-item-toggle {
  color: var(--jp-ui-font-color0);
  font-weight: bold;
}

.mode-tools-group-built-in {
  flex-flow: row wrap;
}

.mode-tools-group-built-in .checkbox-item {
  width: 50%;
}

.mode-tools-group-built-in .checkbox-item-toggle {
  font-weight: normal;
}

.checkbox-item-description {
  padding-left: 25px;
  color: var(--jp-ui-font-color2);
  padding-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbi-settings-panel {
  display: flex;
  height: 100%;
}

.nbi-settings-panel-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  width: 150px;
  background-color: var(--jp-layout-color2);
}

.nbi-settings-panel-tab {
  display: flex;
  gap: 5px;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
}

.nbi-settings-panel-tab:hover {
  background-color: var(--jp-layout-color1);
}

.nbi-settings-panel-tab.active {
  background-color: var(--jp-layout-color1);
  font-weight: bold;
}

.nbi-settings-panel-tab-content {
  flex-grow: 1;
  padding: 20px;
}

.pill-item {
  cursor: pointer;
  background-color: var(--jp-layout-color1);
  display: inline-block;
  padding: 2px 6px;
  margin: 2px 4px;
  border-radius: 4px;
}

.pill-item:hover {
  cursor: pointer;
  background-color: var(--jp-layout-color2);
}

.pill-item.checked {
  background-color: var(--jp-layout-color3);
}

.server-status-indicator {
  width: 10px;
  height: 10px;
  margin: 2px;
  border-radius: 50%;
  background-color: var(--jp-brand-color0);
}

.server-status-indicator.connected,
.server-status-indicator.updated-tool-list,
.server-status-indicator.updated-prompt-list {
  background-color: var(--jp-success-color1);
}

.server-status-indicator.connecting,
.server-status-indicator.disconnecting,
.server-status-indicator.updating-tool-list,
.server-status-indicator.updating-prompt-list {
  background-color: var(--jp-warn-color1);
}

.server-status-indicator.not-connected,
.server-status-indicator.failed-to-connect {
  background-color: var(--jp-error-color1);
}

.form-input-dialog-body {
  width: 500px;
}

.form-input-dialog-body-content-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-input-dialog-body-content-field {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.form-input-dialog-body-content-field-label {
  width: 50%;
}

.form-input-dialog-body-content-field-input {
  width: 50%;
}

.mcp-server-prompts .pill-item {
  cursor: default;
}

.mcp-server-tools-header,
.mcp-server-prompts-header {
  margin: 5px;
  font-style: italic;
}

.config-dialog-body a {
  color: var(--jp-content-link-color);
}

.chat-mode-widgets-container .claude-icon svg {
  margin-top: 4px;
  width: 18px;
  height: 18px;
}

.chat-confirmation-form.ask-user-question {
  display: flex;
  flex-direction: column;
}

.ask-user-question-container {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--jp-border-color1);
}

.ask-user-question .ask-user-question-container:nth-last-child(-n + 2) {
  border-bottom: none;
}

.ask-user-question-form {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ask-user-question-question {
  font-weight: bold;
}

.ask-user-question-header {
  font-style: italic;
}

.ask-user-question-options {
  display: flex;
  flex-direction: column;
}

.ask-user-question-option {
  display: flex;
  flex-direction: column;
}

.ask-user-question-option-input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.ask-user-question-option-input-container input {
  transform: scale(1.25);
}

.ask-user-question-option-label-container {
  width: calc(100% - 15px);
  margin-left: 2px;
  display: flex;
  flex-direction: column;
}

.ask-user-question-option-label {
  font-weight: bold;
}

.ask-user-question-option-description {
  color: var(--jp-ui-font-color2);
  padding-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ask-user-question-footer {
  padding: 0 0 5px 10px;
}

.claude-mode-config-dialog .form-field-description {
  color: var(--jp-ui-font-color1);
}