website/src/components/ui/code-window.module.css

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

.codeWindow {
  border: 1px solid var(--odl-border);
  border-radius: var(--odl-radius-lg);
  background: var(--odl-surface);
  box-shadow: var(--odl-shadow-lg);
  overflow: hidden;
}
.windowBar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--odl-space-3);
  padding: var(--odl-space-3) var(--odl-space-4);
  border-bottom: 1px solid var(--odl-border);
  background: var(--odl-surface-2);
}
.windowDots {
  --code-window-dot-size: 11px;
  --code-window-dot-gap: 6px;

  display: flex;
  gap: var(--code-window-dot-gap);
}
.windowDot {
  width: var(--code-window-dot-size);
  height: var(--code-window-dot-size);
  border-radius: var(--odl-radius-pill);
  background: var(--odl-border-strong);
}
.windowTitle {
  min-width: 0;
  font-family: var(--odl-font-mono);
  font-size: var(--odl-text-xs);
  line-height: 1.35;
  color: var(--odl-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.windowTitleLink {
  color: var(--odl-fg);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(
    in srgb,
    var(--odl-fg-muted) 58%,
    transparent
  );
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--odl-dur) var(--odl-ease),
    text-decoration-color var(--odl-dur) var(--odl-ease),
    opacity var(--odl-dur) var(--odl-ease);
}
.windowTitleLink:hover {
  color: var(--odl-accent);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(
    in srgb,
    var(--odl-accent) 70%,
    transparent
  );
}
.windowTitleLink:focus-visible {
  outline: 1px dotted var(--odl-accent);
  outline-offset: 2px;
}
.codeBodyAnimated {
  overflow: hidden;
  background: var(--odl-code-bg);
  transition: height var(--odl-dur-slow) var(--odl-ease);
}
@media (prefers-reduced-motion: reduce) {
  .codeBodyAnimated {
    transition: none;
  }
}

.codeBody :global(.theme-code-block),
.codeBody :global([class*="codeBlockContainer"]) {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.codeBody :global(.prism-code) {
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0;
  background: var(--odl-code-bg) !important;
  font-size: 0.8125rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.codeBody :global(.token-line) {
  white-space: inherit;
  overflow-wrap: inherit;
}

@media (max-width: 996px) {
  .windowBar {
    align-items: start;
  }
  .windowDots {
    margin-top: var(--code-window-mobile-dot-offset, 0.15rem);
  }
  .windowTitle {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}