Начал переводить на consta UI

2026-07-20 16:42:34 +03:00
parent d823b3df47
commit 52e28e8dc6
10 changed files with 687 additions and 257 deletions
@@ -0,0 +1,109 @@
+/*
+  Извлечено со скриншотов брендбука/стайлгайда.
+  Угол градиента в источнике указан как «60%» — трактован как 60deg
+  (стандартная запись угла в CSS linear-gradient). Проверьте по оригиналу,
+  если это принципиально.
+*/
+
+:root {
+  /* ============================================================
+     ОСНОВНЫЕ ГРАДИЕНТЫ (синие) — для инфоблоков, диаграмм, блок-схем
+     ============================================================ */
+  --gradient-navy-start: rgb(0, 75, 158);
+  --gradient-navy-end: rgb(0, 164, 230);
+  --gradient-navy: linear-gradient(60deg, var(--gradient-navy-start), var(--gradient-navy-end));
+
+  --gradient-azure-start: rgb(36, 139, 224);
+  --gradient-azure-end: rgb(65, 205, 255);
+  --gradient-azure: linear-gradient(60deg, var(--gradient-azure-start), var(--gradient-azure-end));
+
+  --gradient-sky-start: rgb(94, 179, 236);
+  --gradient-sky-end: rgb(173, 214, 247);
+  --gradient-sky: linear-gradient(60deg, var(--gradient-sky-start), var(--gradient-sky-end));
+
+  --gradient-teal-dark-start: rgb(60, 129, 160);
+  --gradient-teal-dark-end: rgb(151, 195, 219);
+  --gradient-teal-dark: linear-gradient(60deg, var(--gradient-teal-dark-start), var(--gradient-teal-dark-end));
+
+  --gradient-teal-light-start: rgb(102, 190, 218);
+  --gradient-teal-light-end: rgb(161, 226, 233);
+  --gradient-teal-light: linear-gradient(60deg, var(--gradient-teal-light-start), var(--gradient-teal-light-end));
+
+  --gradient-navy-dark-start: rgb(0, 33, 92);
+  --gradient-navy-dark-end: rgb(0, 101, 170);
+  --gradient-navy-dark: linear-gradient(60deg, var(--gradient-navy-dark-start), var(--gradient-navy-dark-end));
+
+  --gradient-ice-start: rgb(206, 234, 255);
+  --gradient-ice-end: rgb(241, 249, 255);
+  --gradient-ice: linear-gradient(60deg, var(--gradient-ice-start), var(--gradient-ice-end));
+
+  --gradient-frost-start: rgb(215, 229, 237);
+  --gradient-frost-end: rgb(243, 245, 247);
+  --gradient-frost: linear-gradient(60deg, var(--gradient-frost-start), var(--gradient-frost-end));
+
+  /* ============================================================
+     ОСНОВНАЯ ПАЛИТРА — для диаграмм, блок-схем, смысловых выделений
+     ============================================================ */
+  --gradient-purple-start: rgb(161, 44, 126);
+  --gradient-purple-end: rgb(191, 51, 168);
+  --gradient-purple: linear-gradient(60deg, var(--gradient-purple-start), var(--gradient-purple-end));
+
+  --gradient-red-start: rgb(225, 48, 66);
+  --gradient-red-end: rgb(241, 103, 117);
+  --gradient-red: linear-gradient(60deg, var(--gradient-red-start), var(--gradient-red-end));
+
+  --gradient-orange-start: rgb(255, 142, 88);
+  --gradient-orange-end: rgb(254, 180, 106);
+  --gradient-orange: linear-gradient(60deg, var(--gradient-orange-start), var(--gradient-orange-end));
+
+  --gradient-olive-start: rgb(187, 189, 57);
+  --gradient-olive-end: rgb(197, 231, 103);
+  --gradient-olive: linear-gradient(60deg, var(--gradient-olive-start), var(--gradient-olive-end));
+
+  --gradient-green-start: rgb(44, 181, 135);
+  --gradient-green-end: rgb(57, 224, 137);
+  --gradient-green: linear-gradient(60deg, var(--gradient-green-start), var(--gradient-green-end));
+
+  --gradient-green-dark-start: rgb(25, 111, 82);
+  --gradient-green-dark-end: rgb(38, 160, 119);
+  --gradient-green-dark: linear-gradient(60deg, var(--gradient-green-dark-start), var(--gradient-green-dark-end));
+
+  --gradient-blue-start: rgb(7, 144, 203);
+  --gradient-blue-end: rgb(17, 203, 217);
+  --gradient-blue: linear-gradient(60deg, var(--gradient-blue-start), var(--gradient-blue-end));
+
+  --gradient-cyan-start: rgb(27, 211, 247);
+  --gradient-cyan-end: rgb(101, 240, 238);
+  --gradient-cyan: linear-gradient(60deg, var(--gradient-cyan-start), var(--gradient-cyan-end));
+
+  /* ============================================================
+     ДОПОЛНИТЕЛЬНЫЕ ГРАДИЕНТЫ — для диаграмм, блок-схем, смысловых выделений
+     ============================================================ */
+  --gradient-violet-start: rgb(138, 92, 231);
+  --gradient-violet-end: rgb(148, 57, 227);
+  --gradient-violet: linear-gradient(60deg, var(--gradient-violet-start), var(--gradient-violet-end));
+
+  --gradient-lavender-start: rgb(168, 143, 248);
+  --gradient-lavender-end: rgb(132, 159, 246);
+  --gradient-lavender: linear-gradient(60deg, var(--gradient-lavender-start), var(--gradient-lavender-end));
+
+  --gradient-pink-start: rgb(241, 141, 206);
+  --gradient-pink-end: rgb(222, 146, 232);
+  --gradient-pink: linear-gradient(60deg, var(--gradient-pink-start), var(--gradient-pink-end));
+
+  /* ============================================================
+     ДОПОЛНИТЕЛЬНЫЕ ЦВЕТА — для мелкой графики, линий (одиночные акценты)
+     Соответствуют по цветовому тону основной палитре и доп. градиентам
+     ============================================================ */
+  --accent-purple: rgb(181, 48, 154);
+  --accent-red: rgb(236, 86, 101);
+  --accent-orange: rgb(255, 171, 102);
+  --accent-olive: rgb(194, 220, 91);
+  --accent-green: rgb(50, 202, 136);
+  --accent-green-dark: rgb(34, 146, 109);
+  --accent-blue: rgb(14, 186, 213);
+  --accent-cyan: rgb(78, 231, 244);
+  --accent-violet: rgb(145, 82, 230);
+  --accent-lavender: rgb(157, 154, 247);
+  --accent-pink: rgb(232, 143, 219);
+}