overleaf/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss

:root {
  --ide-redesign-background: var(--bg-dark-primary);
  --ide-redesign-color: var(--content-primary-dark);
  --ide-redesign-resizing-background: var(--bg-dark-primary);
  --ide-redesign-color-scheme: dark;
}

@include theme('light') {
  --ide-redesign-background: var(--bg-light-primary);
  --ide-redesign-color: var(--content-primary);
  --ide-redesign-resizing-background: var(--white);
  --ide-redesign-color-scheme: light;
}

.ide-redesign-body {
  color-scheme: var(--ide-redesign-color-scheme);
  display: flex;
  flex-grow: 1;
  background-color: var(--ide-redesign-background);
  color: var(--ide-redesign-color);
  overflow-y: hidden;
  z-index: 0;
}

.ide-redesign-main {
  height: 100%;
  display: flex;
  flex-direction: column;

  .ide-panel-group-resizing {
    background-color: var(--ide-redesign-resizing-background);
  }
}

.ide-skeleton-block {
  border: 1px solid grey;
  background-color: white;
}

.ide-redesign-full-height {
  height: 100%;
}

.ide-redesign-pdf-container {
  position: relative;
}

.ide-redesign-editor-container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ide-redesign-editor-content {
  flex: 1 1 auto;
  position: relative;
}

.ide-redesign-python-editor-split {
  height: 100%;
}

.ide-redesign-python-output-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--ide-redesign-background);
  color: var(--ide-redesign-color);
  border-top: 1px solid var(--border-divider);

  .compile-button-group {
    border-radius: var(--ds-border-radius-300);
  }
}

.ide-redesign-python-output-pane-body {
  flex: 1;
  overflow: auto;
  padding: var(--spacing-06);
  font-family: 'DM Mono', monospace;
  font-size: var(--font-size-02);
  line-height: var(--line-height-03);
}

.ide-redesign-python-output-pane-placeholder {
  color: var(--content-secondary);
}

.ide-redesign-python-output-pane-line {
  white-space: pre-wrap;
  word-break: break-word;
}

.ide-redesign-python-output-pane-placeholder,
.ide-redesign-python-output-pane-error {
  white-space: pre-wrap;
}

.ide-redesign-python-output-pane-error {
  margin-bottom: var(--spacing-03);
  color: var(--red-50);
}

.ide-redesign-labs-user-beta-promo {
  position: absolute;
  top: 60px;
  right: 28px;
  z-index: 100000;
  max-width: 560px;
  font-size: var(--font-size-03);
  line-height: var(--line-height-03);

  .notification-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-02);
    align-items: flex-start;
  }
}

.ide-redesign-labs-user-beta-promo-title {
  font-weight: bold;
}

.ide-redesign-labs-user-beta-promo-button {
  margin-top: var(--spacing-05);
}