bitran/dist/bitran.css

📜 Highly customizable text processor and transpiler.

.bitran-blockFloat {
  --_bitran-floatHeight: var(--bitran_blocksGap);
  position: absolute;
  width: 100%;
  height: var(--_bitran-floatHeight);
}
.bitran-blockFloat--above {
  top: calc(-1 * var(--_bitran-floatHeight));
}
.bitran-blockFloat--below {
  bottom: calc(-1 * var(--_bitran-floatHeight));
}
.bitran-container:not(.bitran-editMode) .bitran-blockContainer:first-child > .bitran-blockFloat--above, .bitran-container:not(.bitran-editMode) .bitran-blockContainer:last-child > .bitran-blockFloat--below {
  display: none;
}.bitran-blockAside {
  flex-shrink: 0;
  transition: all var(--bitran_transitionSpeed) var(--bitran_transitionFunction);
  transition-property: background;
  width: var(--_bitran_asideWidth);
  margin-right: var(--_bitran_asideGap);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  cursor: pointer;
  background: transparent;
}
.bitran-blockAside .bitran-blockAsideIcon {
  position: sticky;
  top: 0;
  height: 30px;
  width: 100%;
  transition: all var(--bitran_transitionSpeed) var(--bitran_transitionFunction);
  transition-property: color;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bitran-blockAside .bitran-blockAsideIcon > svg {
  aspect-ratio: 1/1;
  width: 68%;
  fill: currentColor;
}
.bitran-blockAside .bitran-blockAsideIcon {
  color: transparent;
}
.bitran-blockAside:hover {
  background: var(--bitran_bgAccent);
}
.bitran-blockContainer:hover > .bitran-block > .bitran-blockAside .bitran-blockAsideIcon {
  color: color-mix(in srgb, var(--bitran_textMuted) 65%, transparent);
}
.bitran-blockContainer:hover > .bitran-block > .bitran-blockAside:hover .bitran-blockAsideIcon {
  color: var(--bitran_textMuted);
}
.bitran-block.bitran-error > .bitran-blockAside {
  background: color-mix(in srgb, var(--bitran_colorError) 25%, light-dark(white, #212121)) !important;
}
.bitran-block.bitran-error > .bitran-blockAside .bitran-blockAsideIcon {
  color: color-mix(in srgb, var(--bitran_colorError) 60%, light-dark(black, white)) !important;
}.bitran-blockContainer {
  position: relative;
}
.bitran-blockContainer:hover {
  z-index: 10;
}
.bitran-blockContainer .bitran-block {
  display: flex;
}
.bitran-blockContainer .bitran-block .bitran-blockMain {
  min-width: 0;
  flex: 1;
}
.bitran-blockContainer .bitran-block.bitran-error .bitran-blockMain {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background: color-mix(in srgb, var(--bitran_colorError) 25%, light-dark(white, #212121));
  color: color-mix(in srgb, var(--bitran_colorError) 60%, light-dark(black, white));
}
.bitran-container.bitran-editMode .bitran-blockContainer:first-child {
  margin-top: var(--bitran_blocksGap);
}
.bitran-container.bitran-editMode .bitran-blockContainer:last-child {
  margin-bottom: var(--bitran_blocksGap);
}.bitran-container {
  --bitran_gapSmall: 15px;
  --bitran_gap: 30px;
  --bitran_gapBig: 45px;
  --bitran_xPadding: 20px;
  --bitran_blocksGap: 30px;
  --bitran_transitionSpeed: 200ms;
  --bitran_transitionFunction: ease-out;
  --bitran_fontSans: sans-serif;
  --bitran_fontSerif: serif;
  --bitran_text: light-dark(#333333, #C8C8C8);
  --bitran_textMuted: light-dark(#696969, #7f7f7f);
  --bitran_textDimmed: light-dark(#969696, #616161);
  --bitran_textDisabled: light-dark(#b9b9b9, #4f4f4f);
  --bitran_bgAccent: light-dark(#e1e1e1, #2d2d2d);
  --bitran_colorBrand: light-dark(#118fe7, #3da1e7);
  --bitran_colorError: light-dark(#cf2f2f, #c35c5e);
  --_bitran_asideWidth: 20px;
  --_bitran_asideGap: 3px;
  --_bitran_asideFullWidth: 23px;
}
.bitran-container {
  container: bitran/inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--bitran_blocksGap);
  font-family: var(--bitran_fontSans);
  padding-right: var(--bitran_xPadding);
  padding-left: calc(var(--bitran_xPadding) - var(--_bitran_asideFullWidth));
}.bitran-paragraph {
  text-align: justify;
}