css/code-notes.css - master - toxblh/code-notes-infograph

css/code-notes.css
482 строки13 KB
stas
Merge branch 'master' of ssh://gitverse.ru:2222/belonesox/code-notes-infograph
27 янв 2026, 18:40
27 янв 2026, 18:40fd4c476
.right {
    float: right;
    clear: right;
}

img[alt*="right"] {
    float: right;
    clear: right;
    margin-left: 1rem;
    margin-bottom: 2px;
    margin-top: 2px;
}

video[title*="right"] {
    float: right;
    clear: right;
    margin-left: 1rem;
    margin-bottom: 2px;
    margin-top: 2px;
}


a[href^="@"] {
    pointer-events: none;
    cursor: default;
    color: red !important;
    font-size: 110%;
    text-decoration: none !important;
}

a[href^="!"] {
    pointer-events: none;
    cursor: default;
    color: blue !important;
    font-size: 110%;
    text-decoration: none !important;
}

a[href^="???"] {
    pointer-events: none;
    cursor: default;
    color: blue !important;
    font-size: 70%;
    text-decoration: none !important;
    border: 0.8px dashed rgb(253, 125, 34); 
    background: #befb09; 
    border-radius: 3x;    
}

a[href="___"] {
  position: relative;
  display: inline-block;
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  font-size: 30%;
}

/* сам "термин" */
a[href^=":::"] {
  position: relative;
  display: inline-block;
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: inherit;
}

/* базовый жёлтый фон */
a[href^=":::"]::before,
a[href^=":::"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: rgba(255, 255, 0, 0.8);
  filter: blur(0.6px);
}

/* нижний мазок — слегка кривой, но ещё довольно аккуратный */
a[href^=":::"]::before {
  inset: 0.35em -0.35em 0.05em;
  border-radius: 999px;
  transform: skewX(-5deg) rotate(-1deg);
  opacity: 0.85;
}

/* верхний мазок — неровные края через clip-path */
a[href^=":::"]::after {
  inset: 0.30em -0.45em 0.10em;
  opacity: 0.9;
  /* делаем фигуру с «рваными» краями */
  clip-path: polygon(
      0% 40%, 3% 20%, 10% 30%, 16% 10%, 28% 25%, 38% 8%,
      50% 20%, 60% 5%, 72% 18%, 82% 3%, 92% 15%, 100% 8%,
      100% 70%, 95% 85%, 86% 95%, 72% 88%, 60% 100%, 45% 90%,
      32% 98%, 20% 88%, 10% 96%, 4% 85%, 0% 75%
  );
}


a[href^="#bib"] {
    cursor: default;
    color: blue !important;
    font-size: 60%;
    border: 0.6px dashed rgb(207, 235, 253); /* Оранжевый пунктирный border */
    background: #e7fdfc; /* Светло-оранжевый фон для контраста */
    border-radius: 3x;    
}

/* ===== общий стиль для всех видео-ссылок ===== */
a[href^="https://vimeo.com/"],
a[href*="youtu"],
a[href$=".mp4"] {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;

  padding: 0.1em 0.25em;
  border: 1px dashed rgba(0, 0, 0, 0.35);
  border-radius: 0.4em;

  background-color: rgb(255, 253, 220);
  text-decoration: none;
  box-decoration-break: clone;
}

/* ===== иконки Vimeo ===== */
a[href^="https://vimeo.com/"]::before {
  content: "📺";
}
a[href^="https://vimeo.com/"]::after {
  content: "▶";
}

/* ===== иконки YouTube ===== */
a[href*="youtu"]::before {
  content: "▶️";   /* YouTube style play button */
}
a[href*="youtu"]::after {
  content: "📺";   /* или "🎬", "⏵", "▶", что угодно */
}

/* ===== иконки .mp4 ===== */
a[href$=".mp4"]::before {
  content: "🎞️";  /* плёнка или "📹" */
}
a[href$=".mp4"]::after {
  content: "⏵";   /* play-иконка */
}


body {
    font-size: var(--doc-font-size, 28pt);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #FFF url(https://discopal.ispras.ru/img_auth.php/a/a7/Textbook.png) -16px 0 repeat fixed;
}

/* .markdown-body работает только в превью, не во фризе */
.markdown-body { --doc-font: var(--doc-font-size, 28pt); }
.cig-article { display: none !important; }
.cig-article ~ * { --doc-font: 12pt; }


pre {
    font-size: var(--pre-font, 40%); 
}

code {
    color: rgb(238, 93, 9) !important;
    background: transparent !important;
}

.katex, .mord {
  color: rgb(126, 0, 95);
}

hr{
    border: 3px solid blue !important;
    border-radius: 3px !important;
    clear: both;
}

:root {
  --doc-font-size: 28pt;
  --list-font-delta: 6%;
  --list-font-l1: 95%;
  --list-font-l2: calc(var(--list-font-l1) - var(--list-font-delta));
  --list-font-l3: calc(var(--list-font-l2) - var(--list-font-delta));
  --list-font-l4: calc(var(--list-font-l3) - var(--list-font-delta));
  --list-font-l5: calc(var(--list-font-l4) - var(--list-font-delta));
  --list-font-l6: calc(var(--list-font-l5) - var(--list-font-delta));
  --table-font: 50%;
  --pre-font: 40%;
  --list-top-offset: 0.5ex;
  --list-top-arrow-scale: 1.2;
  --list-line-height: 1.2;
  --list-top-gap: 0.5em;
  --list-top-arrow-content: "👉";
  --indent-base: 1.6em; /* масштабируется вместе с текущим шрифтом уровня */
  /* толщина веток масштабируется вместе с шрифтом */
  --branch-stroke-base: 0.1em; /* ~2px при 20px */
  --branch-stroke-l2: var(--branch-stroke-base);
  --branch-stroke-l3: calc(var(--branch-stroke-base) * 0.9);
  --branch-stroke-l4: calc(var(--branch-stroke-base) * 0.8);
  --branch-stroke-l5: calc(var(--branch-stroke-base) * 0.7);
  --branch-horizontal-factor: 0.7; /* доля от indent */
  --node-padding: calc(1rem + 0.5em); /* отступ для текста пункта */
  /* подстройка смещения вертикальных линий влево (em масштабируется с шрифтом) */
  --branch-offset-l2: 2.17em;  /* ~91px @42pt */
  --branch-offset-l3: 2.17em;  /* ~64px @42pt */
  --branch-offset-l4: 2.17em;  /* ~36px @42pt */
  --branch-offset-l5: 2.17em;  /* ~31px @42pt */
}


/* ===== размер шрифта по глубине ===== */
ul li {
  font-size: var(--list-font-l1, 95%);   /* уровень 1 */
}
ul ul li {
  font-size: var(--list-font-l2, 90%);   /* уровень 2 */
}
ul ul ul li {
  font-size: var(--list-font-l3, 85%);   /* уровень 3 */
}
ul ul ul ul li {
  font-size: var(--list-font-l4, 80%);  /* уровень 4 */
}
ul ul ul ul ul li {
  font-size: var(--list-font-l5, 75%);   /* уровень 5 */
}

ul ul ul ul ul ul li {
  font-size: var(--list-font-l6, 70%);   /* уровень 6 */
}

/* ===== ВЕРХНИЕ УРОВНИ: ГАЛОЧКИ ===== */
/* любой ul, который НЕ лежит внутри li — считаем списком верхнего уровня */
:not(li) > ul {
  margin: 0 0 0.75rem 0;
  padding-left: 0;
  list-style: none;
}

:not(li) > ul > li {
  position: relative;
  padding: 0.2rem 0 0.2rem 1.8rem;
  line-height: var(--list-line-height, 1.2);
}

:not(li) > ul > li::before {
  --arrow-size: calc(var(--list-top-arrow-scale, 2) * 1em);
  content: var(--list-top-arrow-content, "👉");
  position: absolute;
  left: 0;
  top: calc((var(--list-line-height, 1.2) * 1em - var(--arrow-size)) / 2);
  font-size: var(--arrow-size);
  font-weight: 600;
  transform: rotate(-15deg);
}

:not(li) > ul > li {
  padding-left: calc(var(--arrow-size, 1em) + var(--list-top-gap, 0.5em));
}

/* ===== ВЛОЖЕННЫЕ УРОВНИ: дерево на margin-left + общая ось ===== */

ul ul {
  --branch-color: #1f77b4;  /* lvl2 */
  --branch-stroke-current: var(--branch-stroke-l2);
  --branch-offset-current: var(--branch-offset-l2, 0);
  --axis-x: calc(var(--indent) + var(--node-padding, 1.5em) - var(--branch-offset-current, 0));
  --indent: var(--indent-base, 1.6em);
  margin: 0.2rem 0;
  padding-left: 0;          /* вся вложенность через margin-left у li */
  list-style: none;
  position: relative;
}

/* цвета глубже */
ul ul ul {
  --branch-color: #ff7f0e;  /* lvl3 */
  --branch-stroke-current: var(--branch-stroke-l3);
  --branch-offset-current: var(--branch-offset-l3, 0);
  --axis-x: calc(var(--indent) + var(--node-padding, 1.5em) - var(--branch-offset-current, 0));
}
ul ul ul ul {
  --branch-color: #2ca02c;  /* lvl4 */
  --branch-stroke-current: var(--branch-stroke-l4);
  --branch-offset-current: var(--branch-offset-l4, 0);
  --axis-x: calc(var(--indent) + var(--node-padding, 1.5em) - var(--branch-offset-current, 0));
}
ul ul ul ul ul {
  --branch-color: #d62728;  /* lvl5 */
  --branch-stroke-current: var(--branch-stroke-l5);
  --branch-offset-current: var(--branch-offset-l5, 0);
  --axis-x: calc(var(--indent) + var(--node-padding, 1.5em) - var(--branch-offset-current, 0));
}

/* каждый пункт смещаем вправо margin'ом,
   а внутри него оставляем место под ветку + 1em воздуха до текста */
ul ul li {
  position: relative;
  margin-left: var(--indent);
  padding: 0.15rem 0 0.15rem var(--node-padding, calc(1rem + 0.5em));
}

/* вертикальный ствол уровня — в общей оси X = var(--indent) */
ul ul::before {
  content: "";
  position: absolute;
  left: var(--axis-x);
  top: -2px;
  bottom: -2px;
  border-left: var(--branch-stroke-current, var(--branch-stroke-l2)) solid var(--branch-color);
  border-left-color: var(--branch-color);
  opacity: 0.9;
}

/* горизонтальная ветка — рисуется у li, но стартует в той же оси,
   потому что margin-left = var(--indent) */
ul ul > li::before {
  content: "";
  position: absolute;
  top: 0.82em;
  left: calc(var(--axis-x) - var(--indent));
  /* width: calc(var(--indent) * var(--branch-horizontal-factor, 0.7)); */
  width: calc( var(--indent) );
  border-top: var(--branch-stroke-current, 2px) solid var(--branch-color);
  border-top-color: var(--branch-color);
  border-radius: 0 999px 999px 0;
}

hr {
    border: 5px solid blue;
    border-radius: 5px;
}

p {
    margin-block-end: 0.1em;
}


/* Стили для blockquote.code-line, который НЕ ВЛОЖЕН в другой blockquote */
/* Т.е., его родительский элемент - это не blockquote */
:not(blockquote) > blockquote.code-line{
  /* tweakables */
  --bg: #f9f9f9;     /* fill */
  --bd: #ccc;        /* border */
  --tip-left: 26px;  /* horizontal position */
  --tip-base: 28px;  /* triangle width; height = base/2 */

  font-size: 90%;
  position: relative;
  background: transparent;
  border: none;
  padding: 12px;
  margin: 4px;
  border-radius: 8px;
}

/* box underlay: below floated images */
:not(blockquote) > blockquote.code-line::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 8px;
  z-index: -1; /* under floats */
}

/* triangle + 1px "patch" that hides the top border under its base */
:not(blockquote) > blockquote.code-line::after{
  content: "";
  position: absolute;
  left: var(--tip-left);
  top: calc(-1 * (var(--tip-base) / 2) + 1px);
  width: var(--tip-base);
  height: calc(var(--tip-base) / 2);
  z-index: 1; /* under floats, above ::before */

  /* Layer 1 (top): triangle with side strokes only
     Layer 2 (bottom): 1px strip matching the box bg to cover the box's top border under the base */
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'>\
  <polygon points='0,14 14,0 28,14' fill='%23f9f9f9'/>\
  <path d='M1,14 L14,1 L27,14' fill='none' stroke='%23ccc' stroke-width='1'/>\
</svg>") no-repeat center / 100% 100%;
}

:not(blockquote) > blockquote.code-line > p.code-line{
  margin-block-start: .1em;
  margin-block-end: .1em;
  position: relative;
}

/* Стили для blockquote.code-line, который ВЛОЖЕН в другой blockquote */
blockquote > blockquote.code-line{
  border: 2px dashed orange; /* Оранжевый пунктирный border */
  padding: 4px;
  margin: 2px;
  background: #fff3e0; /* Светло-оранжевый фон для контраста */
  border-radius: 8px;
}

/* Убедитесь, что для вложенного blockquote не будет ::before и ::after */
blockquote > blockquote.code-line::before,
blockquote > blockquote.code-line::after {
  content: none;
}


table {
  font-size: var(--table-font, 60%);
}

/* ===== таблицы ===== */

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: 1rem 0;
}

th,
td {
  padding: 0.35em 0.6em;
  border: 1px dashed rgba(0, 0, 0, 0.25);  /* тонкий пунктир */
}

/* заголовок таблицы */
thead th {
  font-weight: 600;
  background: rgba(230, 236, 244, 0.9);    /* чуть более плотный фон */
}

/* зебра: строки тела таблицы */
tbody tr:nth-child(odd) {
  background: rgba(245, 245, 245, 0.9);    /* светло-серый */
}

tbody tr:nth-child(even) {
  background: rgba(232, 241, 250, 0.9);    /* очень светлый голубой */
}

/* :hover по строке, чтобы удобно читать */
tbody tr:hover {
  background: rgba(214, 230, 248, 0.9);
}




/* планшеты / небольшие ноуты / VSCode-превью  */
@media (max-width: 1024px) {
  html,
  body,
  body.vscode-body,
  body.vscode-light,
  body.vscode-dark,
  body.vscode-high-contrast {
    margin: 5px !important;
    padding: 0 !important;
  }
} 



/* ===== оформление блочных формул KaTeX ===== */

.katex-block {
  display: block;

  background: rgba(255, 253, 220, 0.65);     /* светлая пастельная подложка */
  border: 2px dashed rgba(0, 0, 0, 0.25);    /* пунктирная рамка */
  border-radius: 12px;                       /* сглаженные края */
}

/* сам KaTeX внутри блока иногда даёт внешние поля — убираем */