sqlpage--sqlpage/examples/official-site/assets/highlightjs-and-tabler-theme.css

@charset "utf-8";

:root,
.layout-boxed[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Core colors refined for better contrast */
  --tblr-body-color: hsl(225deg 35% 86%);
  --tblr-secondary-color: hsl(225, 15%, 80%);
  --tblr-muted-color: hsla(225, 15%, 75%, 0.8);

  /* Background system */
  --tblr-body-bg: hsl(225deg 44% 9%);
  --tblr-bg-surface: hsl(225, 47%, 10%);
  --tblr-bg-surface-secondary: hsl(225, 47%, 12%);
  --tblr-bg-surface-tertiary: hsl(225, 47%, 14%);

  /* Border colors */
  --tblr-border-color: hsl(225deg, 26%, 19%);
  --tblr-border-color-translucent: hsla(225deg 27% 19% / 0.7);

  /* Text secondary RGB */
  --tblr-text-secondary-rgb:
    204, 209, 217; /* RGB equivalent of hsl(225, 15%, 80%) */

  /* Code colors */
  --tblr-code-color: hsl(
    225deg 45.4% 76.93%
  ); /* Light code text for dark theme */
  --tblr-code-bg: hsla(225, 47%, 15%, 0.5); /* Subtle dark background */
  --tblr-active-bg: var(--tblr-code-bg);

  /* Ethereal accent colors */
  --tblr-blue-rgb: 84, 151, 213;
  --tblr-blue: rgb(var(--tblr-blue-rgb));
  --tblr-blue-lt-rgb: 21, 31, 53;
  --tblr-blue-lt: rgb(var(--tblr-blue-lt-rgb));
  --tblr-primary-rgb: 95, 132, 169;
  --tblr-primary: rgb(var(--tblr-primary-rgb));
  --tblr-secondary: hsla(247, 60%, 94%, 0.7); /* Nebula purple */

  /* Status + accent colors aligned with the brand palette */
  --tblr-success-rgb: 16, 132, 86; /* Deep green for white text */
  --tblr-success: rgb(var(--tblr-success-rgb));
  --tblr-warning-rgb: 197, 124, 0; /* Deep amber */
  --tblr-warning: rgb(var(--tblr-warning-rgb));
  --tblr-danger-rgb: 196, 68, 68; /* Deep crimson */
  --tblr-danger: rgb(var(--tblr-danger-rgb));
  --tblr-purple-rgb: 118, 82, 200; /* Deep violet */
  --tblr-purple: rgb(var(--tblr-purple-rgb));
  --tblr-cyan-rgb: 0, 149, 168; /* Deep cyan */
  --tblr-cyan: rgb(var(--tblr-cyan-rgb));
  --tblr-indigo-rgb: 96, 113, 215; /* Deep indigo */
  --tblr-indigo: rgb(var(--tblr-indigo-rgb));
  --tblr-teal: #267d63;
  --tblr-teal-fg: #20050b;

  --tblr-green: var(--tblr-success);
  --tblr-yellow: var(--tblr-warning);
  --tblr-red: var(--tblr-danger);

  /* Luminous links */
  --tblr-link-color: hsl(212, 70%, 75%) !important; /* Star glow */
  --tblr-link-hover-color: hsl(212, 70%, 85%) !important; /* Supernova */
  --tblr-carousel-caption-color: var(--tblr-muted-color);

  /* Ethereal shadows */
  --tblr-box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2), 0 0 15px rgba(66, 153, 225, 0.15);
  --tblr-box-shadow-dropdown:
    0px 8px 24px rgba(0, 0, 0, 0.25), 1px 9px 20px rgba(174, 62, 201, 0.15);

  /* Pure white emphasis */
  --tblr-emphasis-color: #ffffff;
  --tblr-heading-color: #ffffff;

  /* Syntax highlighting colors */
  --hljs-cosmic-comment: hsl(290, 10%, 60%); /* Distant star */
  --hljs-cosmic-punctuation: hsl(60, 40%, 85%); /* Stardust */
  --hljs-cosmic-property: hsl(340, 60%, 65%); /* Red giant */
  --hljs-cosmic-number: hsl(0, 50%, 75%); /* Solar flare */
  --hljs-cosmic-boolean: hsl(270, 100%, 75%); /* Purple nebula */
  --hljs-cosmic-string: hsl(120, 40%, 75%); /* Green aurora */
  --hljs-cosmic-operator: hsl(0, 0%, 95%); /* White dwarf */
  --hljs-cosmic-keyword: hsl(210, 100%, 75%); /* Blue giant */
}

.btn-primary {
  --tblr-btn-border-color: var(--tblr-secondary);
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-color: var(--tblr-primary-fg, #ffffff);
  --tblr-btn-bg: transparent;
  --tblr-btn-hover-color: var(--tblr-primary-fg);
  --tblr-btn-hover-bg: transparent;
  --tblr-btn-active-color: var(--tblr-primary-fg);
  --tblr-btn-active-bg: transparent;
  --tblr-btn-disabled-bg: var(--tblr-primary);
  --tblr-btn-disabled-color: var(--tblr-primary-fg);
  --tblr-btn-box-shadow: 0.1em 0.1em 0.1em var(--tblr-primary);
  --tblr-btn-hover-border-color: var(--tblr-primary);
  --tblr-btn-active-shadow: -0.1em -0.1em 0.1em var(--tblr-primary);
}

.dropdown-menu {
  --tblr-dropdown-link-active-color: rgb(166, 211, 255);
}

@media (min-width: 768px) {
  .layout-boxed {
    background: #07020ff5
      linear-gradient(70deg, rgba(23, 17, 39, 0.4), transparent) fixed;
  }
}

/* Comments, Prolog, Doctype, and Cdata */
.hljs-comment,
.hljs-prolog,
.hljs-meta,
.hljs-cdata {
  color: var(--tblr-secondary-color);
}

/* Punctuation */
.hljs-template-variable,
.hljs-punctuation {
  color: var(--hljs-cosmic-punctuation);
}

/* Property and Tag */
.hljs-property {
  color: var(--hljs-cosmic-property);
}

/* Number */
.hljs-number {
  color: var(--hljs-cosmic-number);
}

/* Boolean */
.hljs-literal {
  color: var(--hljs-cosmic-boolean);
}

/* String */
.hljs-selector-tag,
.hljs-string {
  color: var(--hljs-cosmic-string);
}

/* Operator */
.hljs-operator,
.hljs-symbol,
.hljs-link,
.language-css .hljs-string,
.style .hljs-string {
  color: var(--hljs-cosmic-operator);
}

/* Keyword */
.hljs-template-tag,
.hljs-keyword {
  color: var(--hljs-cosmic-keyword);
}

/* Namespace */
.hljs-namespace {
  opacity: 0.7;
}

/* Selector, Attr-name, and String */
.hljs-attr {
  color: #fcfce5;
}

.hljs-name {
  color: #e4faf6;
}

/* Operator, Entity, URL, CSS String, and Style String */
.hljs-operator,
.hljs-symbol,
.hljs-link,
.language-css .hljs-string,
.style .hljs-string {
  color: #f8f8f2;
}

/* At-rule and Attr-value */
.hljs-tag,
.hljs-keyword,
.hljs-attribute-value {
  color: #e6db74;
}

/* Regex and Important */
.hljs-regexp,
.hljs-important {
  color: var(--tblr-yellow);
}

/* Important */
.hljs-important {
  font-weight: bold;
}

/* Entity */
.hljs-symbol {
  cursor: help;
}

/* Token transition */
.hljs {
  transition: 0.3s;
}

/* Code selection */
code::selection,
code ::selection {
  background: var(--tblr-yellow);
  color: var(--tblr-gray-900);
  border-radius: 0.1em;
}

code .hljs-keyword::selection,
code .hljs-punctuation::selection {
  color: var(--tblr-gray-800);
}

/* Pre code padding */
pre code {
  padding: 0;
}

/* Limit height and add inset shadow to code blocks */
pre:has(code) {
  max-height: 33vh; /* Limit height */
  overflow: auto;
  box-shadow: inset 0 -1px 20px hsla(207.7, 39.4%, 6.5%, 0.64);
  border-radius: 0.5rem;
}

@media print {
  pre:has(code) {
    max-height: none !important;
    box-shadow: none !important;
  }
}