blowfish/assets/css/main.css

/*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */

@import "./components/zen-mode.css";
@import "./components/chroma.css";
@import "./components/a11y.css";

@import "tailwindcss";
@config "../../tailwind.config.js";

body a,
body button {
  @apply transition-colors;
}

button,
[role="button"] {
  cursor: pointer;
}

/* Scale SVG icons to text size */
.icon svg {
  @apply h-[1em] w-[1em];
}

/* Scale SVG logos to appropriate size */
.logo svg {
  @apply h-[5rem] w-[5rem];
}

/* Search */
#search-query::-webkit-search-cancel-button,
#search-query::-webkit-search-decoration,
#search-query::-webkit-search-results-button,
#search-query::-webkit-search-results-decoration {
  @apply hidden;
}

/* RTL support */
.prose blockquote {
  @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;
}

.prose ul > li,
.prose ol > li {
  @apply rtl:pl-0 rtl:pr-2 rtl:mr-7;
}

.prose ol > li:before,
.prose ul > li:before {
  @apply rtl:left-auto rtl:right-1;
}

.prose thead td:first-child,
.prose thead th:first-child {
  @apply rtl:pr-0;
}

.prose thead td:last-child,
.prose thead th:last-child {
  @apply rtl:pl-0;
}

/* Adjust first child within prose */
.prose div.min-w-0.max-w-prose > *:first-child {
  @apply mt-3;
}

/* Table of Contents */
#TableOfContents {
  @apply lg:max-w-[25vw];
}

#TOCView {
  max-height: calc(100vh - 150px);
  min-height: 0;
  overflow-x: hidden;
}

.toc ul,
.toc li {
  @apply px-0 leading-snug list-none;
}

.toc ul ul {
  @apply ltr:pl-4 rtl:pr-4;
}

.toc a {
  @apply font-normal text-neutral-700 dark:text-neutral-400;
}

.toc ul > li {
  @apply rtl:mr-0;
}

/* Code Copy */
.highlight-wrapper {
  @apply block;
}

.highlight {
  @apply relative z-0;
}

.highlight:hover > .copy-button {
  @apply visible;
}

.copy-button {
  @apply absolute top-0 right-0 z-10 invisible w-20 py-1 font-mono text-sm cursor-pointer
  opacity-90 bg-neutral-200 whitespace-nowrap rounded-bl-md rounded-tr-md text-neutral-700
  dark:bg-neutral-600 dark:text-neutral-200 overflow-hidden truncate;
}

.copy-button:hover,
.copy-button:focus,
.copy-button:active,
.copy-button:active:hover {
  @apply bg-primary-100 dark:bg-primary-600;
}

.copy-textarea {
  @apply absolute opacity-5 -z-10;
}

/* Fix long KaTeX equations on mobile (see https://katex.org/docs/issues.html#css-customization) */
.katex-display {
  overflow: auto hidden;
}

/* Fix katex overflow https://github.com/nunocoracao/blowfish/issues/2138 */
.katex-display {
  padding-right: 2px;
  width: calc(100% - 2px);
}

/* Fix long tables breaking out of article on mobile */
table {
  display: block;
  overflow: auto;
}

/* Fix long inline code sections breaking out of article on mobile */
code {
  word-wrap: break-word; /* All browsers since IE 5.5+ */
  overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
}

/* Fix long URLs breaking out of article bounds on mobile */
a {
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.prose-invert .highlight pre > code {
  background-color: unset;
}

/* Custom */

pre {
  text-align: left;
}

.thumbnail,
.thumbnail_card,
.thumbnail_card_related,
.thumbnail_card_term,
.single_hero_basic,
.single_hero_background {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.thumbnail {
  min-width: 300px;
  height: 180px;
}

.thumbnail_card {
  height: 200px;
}

.thumbnail_card_related {
  height: 150px;
}

.thumbnail_card_term {
  height: 150px;
}

.single_hero_round {
  max-height: 50vh;
  object-fit: cover;
}

.single_hero_background {
  z-index: -10;
}

.hero_gradient {
  width: 100%;
  height: 100%;
}

.thumbnailshadow {
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
}

.anchor {
  display: block;
  position: relative;
  top: -150px;
  height: 0px;
  visibility: hidden;
}

/* Offset scroll position to avoid header overlap */
[id^="fn"],
[id^="fnref"] {
  scroll-margin-top: 145px;
}

@variant sm {
  .thumbnail {
    min-width: 100%;
    height: 180px;
  }
  .article {
    flex-wrap: wrap;
  }
}

@variant md {
  .thumbnail {
    min-width: 300px;
    min-height: 180px;
    height: auto;
  }
  .article {
    flex-wrap: nowrap;
  }
}

.medium-zoom-image--opened {
  z-index: 100;
}

.nested-menu:hover + .menuhide {
  visibility: visible;
  opacity: 1;
  transition:
    visibility 0.3s,
    opacity 0.3s ease-in-out;
}

.menuhide:hover {
  visibility: visible;
  opacity: 1;
  transition:
    visibility 0.3s,
    opacity 0.3s ease-in-out;
}

.menuhide {
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0.3s,
    opacity 0.3s ease-in-out;
  z-index: 1000;
}

.active {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}