/* * fonts.css — три шрифтовые системы приложения. * * Шрифты лежат рядом, а не тянутся из интернета: приложение работает * на площадке, где связи может не быть вовсе, и CSP пускает только * своё. Файлы — woff2, латиница и кириллица отдельными кусками: * браузер качает только тот, который реально нужен тексту на экране, * и только для выбранной системы. * * A — инженерная: IBM Plex Sans + IBM Plex Mono * B — русская сетка: Golos Text + JetBrains Mono (по умолчанию) * C — сценическая: Onest, заголовки и числа Oswald * * Систему выбирает человек в настройках; выбор лежит в data-font * на . Пока он не сделан — B: Golos рисовался под кириллицу, * а всё в приложении русское. */ @font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/golos-text-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/golos-text-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/golos-text-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/golos-text-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/golos-text-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/golos-text-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/golos-text-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/golos-text-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/jetbrains-mono-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/jetbrains-mono-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/jetbrains-mono-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/jetbrains-mono-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/ibm-plex-sans-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/ibm-plex-sans-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/ibm-plex-sans-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/ibm-plex-sans-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/ibm-plex-mono-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/ibm-plex-mono-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/ibm-plex-mono-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/ibm-plex-mono-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/oswald-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/oswald-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/oswald-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/oswald-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/oswald-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/oswald-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/oswald-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/oswald-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/onest-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/onest-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/onest-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/onest-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/onest-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/onest-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/onest-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/onest-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} /* Системный запас — им экран рисуется, пока грузится основной шрифт, и им же, если файл не доехал. */ :root{ --font-fallback:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif; --font-mono-fallback:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* B по умолчанию */ --font-ui:'Golos Text',var(--font-fallback); --font-mono:'JetBrains Mono',var(--font-mono-fallback); --font-num:'JetBrains Mono',var(--font-mono-fallback); --font-title:'Golos Text',var(--font-fallback); --title-weight:700; --title-track:-.02em; } html[data-font="a"]{ --font-ui:'IBM Plex Sans',var(--font-fallback); --font-mono:'IBM Plex Mono',var(--font-mono-fallback); --font-num:'IBM Plex Mono',var(--font-mono-fallback); --font-title:'IBM Plex Sans',var(--font-fallback); --title-weight:600; --title-track:-.01em; } html[data-font="b"]{ --font-ui:'Golos Text',var(--font-fallback); --font-mono:'JetBrains Mono',var(--font-mono-fallback); --font-num:'JetBrains Mono',var(--font-mono-fallback); --font-title:'Golos Text',var(--font-fallback); --title-weight:700; --title-track:-.02em; } html[data-font="c"]{ --font-ui:'Onest',var(--font-fallback); --font-mono:'JetBrains Mono',var(--font-mono-fallback); --font-num:'Oswald',var(--font-fallback); --font-title:'Oswald',var(--font-fallback); --title-weight:500; --title-track:.02em; } /* Системный шрифт — для тех, кто не хочет ничего нового. */ html[data-font="sys"]{ --font-ui:var(--font-fallback); --font-mono:var(--font-mono-fallback); --font-num:var(--font-mono-fallback); --font-title:var(--font-fallback); --title-weight:700; --title-track:-.01em; } /* Где что применяется. Тело — основным, числа и коды — своим: в таблице табеля цифры должны стоять столбиком, а не плясать. */ body{font-family:var(--font-ui)} /* * Моноширинным набрано всё, что является значением: дата, время, * число, сумма, состояние. Это не украшение — на этом держится вид * макета: подписи и заголовки идут обычным шрифтом, а значения * стоят столбиком и читаются как показания прибора. * * В макете такие места помечены классом mono прямо в разметке * (восемьдесят с лишним раз). У нас разметка своя, поэтому тот же * список собран здесь селекторами — одним местом, а не классом * на каждой строке. Раньше правило знало только .num и .mono, * а .num при переносе стал .bl-num — и весь слой пропал разом. */ /* * Крупные числа и всё остальное набраны разными шрифтами: в макете * это `.num` и `.mono`, и у сценической системы они расходятся — * число рисует Oswald, а показания приборов остаются моноширинными. * Пока оба списка шли одним правилом, в системе C дата в шапке * и время на полосе дня выходили Oswald’ом, и строки съезжали. */ .num, .bl-num, /* крупное число в плитке */ .bl-hero3 b,.chip3 b /* три числа в ряд */ {font-family:var(--font-num);font-variant-numeric:tabular-nums} .mono, #topbar-sub, /* дата под именем в шапке */ .bl-sec a, /* «все» у заголовка раздела */ .bl-item-s,.bl-item-r, /* подпись и значение в строке */ .prow > span:last-child, /* состояние человека в плитке дня */ .bl-brk span:last-child, /* значение в разбивке денег */ .av, /* инициалы в кружке */ .staff-sub, /* должность и коэффициент */ .proj-meta, /* площадка и даты проекта */ .next-date b,.next-date span, /* число и месяц ближайшей смены */ .tcal-day, /* клетки календаря занятости */ .gd,.gantt-name.h, /* числа дней в ленте расписания */ .month-nav, /* переключатель месяца */ .gear-s,.cat-row .v, /* числа прибора и значения свойств */ .file span.sz, /* размер файла */ .exp-sum input,#exp-amount, /* сумма расхода */ .ts-tbl, /* табель целиком: он из чисел */ .ver /* номер версии */ {font-family:var(--font-mono);font-variant-numeric:tabular-nums} /* Имя и должность в табеле — слова, а не числа. */ .ts-tbl .ts-name i,.ts-tbl .ts-name em{font-family:var(--font-ui)} code,kbd,pre,samp{font-family:var(--font-mono)} .modal-title,.sep-label,.hero-name,h1,h2,h3,h4{ font-family:var(--font-title);font-weight:var(--title-weight); letter-spacing:var(--title-track)} /* У Oswald заголовки узкие и высокие — им нужен воздух сверху, иначе они липнут к предыдущему блоку. */ html[data-font="c"] .sep-label{text-transform:uppercase} /* C — сценическая: заголовки набраны прописными, как на афише и кофре. В макете это одно правило `.sys-c .title{text-transform:uppercase}`; у нас заголовки собраны списком, поэтому список повторяется здесь. Названия строк и плиток заголовками не считаются и остаются как есть. */ html[data-font="c"] .modal-title, html[data-font="c"] .hero-name, html[data-font="c"] .topbar-name, html[data-font="c"] h1,html[data-font="c"] h2, html[data-font="c"] h3,html[data-font="c"] h4{text-transform:uppercase}