Модификация стилей FlowCraft

В этом документе описаны подходы к модификации визуального стиля платформы FlowCraft для создания уникального пользовательского интерфейса, отличающегося от оригинального проекта n8n.

Обзор стилевой системы

FlowCraft использует модульную систему стилей, основанную на CSS переменных (CSS Custom Properties), что позволяет легко изменять визуальный стиль всего приложения путем модификации небольшого набора переменных. Основные компоненты стилевой системы:

Цветовая схема - основные цвета интерфейса
Типографика - шрифты, размеры текста, интервалы
Компоненты - стили отдельных UI-компонентов
Сетка и отступы - система расположения элементов
Анимации и переходы - визуальные эффекты

Анализ оригинальных стилей n8n

Оригинальный проект n8n использует следующую цветовую схему:

Основной цвет: #ff6d5a (оранжево-красный)
Вторичный цвет: #41b883 (зеленый)
Фон: #f9f9f9 (светло-серый)
Текст: #333333 (темно-серый)
Акцент: #13c2c2 (бирюзовый)

Типографика n8n основана на шрифтах:

Основной шрифт: 'Open Sans', sans-serif
Заголовки: 'Roboto', sans-serif

Модификация цветовой схемы

Для создания уникального визуального стиля FlowCraft, мы изменили цветовую схему следующим образом:

Новая цветовая схема FlowCraft

css

:root {
  /* Основные цвета */
  --fc-primary: #4a6bfa;          /* Основной цвет (синий) */
  --fc-primary-light: #7a93ff;    /* Светлый оттенок основного цвета */
  --fc-primary-dark: #2a4bd0;     /* Темный оттенок основного цвета */
  
  /* Вторичные цвета */
  --fc-secondary: #6c3ce9;        /* Вторичный цвет (фиолетовый) */
  --fc-secondary-light: #8f68f0;  /* Светлый оттенок вторичного цвета */
  --fc-secondary-dark: #4e20c0;   /* Темный оттенок вторичного цвета */
  
  /* Акцентные цвета */
  --fc-accent: #00c8aa;           /* Акцентный цвет (бирюзовый) */
  --fc-accent-light: #40e0cb;     /* Светлый оттенок акцентного цвета */
  --fc-accent-dark: #00a088;      /* Темный оттенок акцентного цвета */
  
  /* Нейтральные цвета */
  --fc-background: #f8faff;       /* Фон (светло-голубой) */
  --fc-surface: #ffffff;          /* Поверхность (белый) */
  --fc-text-primary: #1a2b4a;     /* Основной текст (темно-синий) */
  --fc-text-secondary: #5a6a8a;   /* Вторичный текст (серо-синий) */
  --fc-border: #e0e7ff;           /* Границы (светло-голубой) */
  
  /* Статусные цвета */
  --fc-success: #00c853;          /* Успех (зеленый) */
  --fc-warning: #ffab00;          /* Предупреждение (оранжевый) */
  --fc-error: #ff3d71;            /* Ошибка (красный) */
  --fc-info: #0095ff;             /* Информация (голубой) */
}

Сравнение с оригинальной схемой

Элемент	n8n	FlowCraft	Отличие
Основной цвет	#ff6d5a (оранжево-красный)	#4a6bfa (синий)	Полная смена цветового спектра
Вторичный цвет	#41b883 (зеленый)	#6c3ce9 (фиолетовый)	Контрастный цвет из другой части спектра
Акцент	#13c2c2 (бирюзовый)	#00c8aa (бирюзовый)	Небольшое изменение оттенка
Фон	#f9f9f9 (светло-серый)	#f8faff (светло-голубой)	Добавление цветового оттенка
Текст	#333333 (темно-серый)	#1a2b4a (темно-синий)	Добавление цветового оттенка

Модификация типографики

Новая типографика FlowCraft

css

:root {
  /* Шрифты */
  --fc-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --fc-font-family-heading: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fc-font-family-mono: 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  
  /* Размеры шрифтов */
  --fc-font-size-xs: 0.75rem;    /* 12px */
  --fc-font-size-sm: 0.875rem;   /* 14px */
  --fc-font-size-md: 1rem;       /* 16px */
  --fc-font-size-lg: 1.125rem;   /* 18px */
  --fc-font-size-xl: 1.25rem;    /* 20px */
  --fc-font-size-2xl: 1.5rem;    /* 24px */
  --fc-font-size-3xl: 1.875rem;  /* 30px */
  --fc-font-size-4xl: 2.25rem;   /* 36px */
  
  /* Веса шрифтов */
  --fc-font-weight-light: 300;
  --fc-font-weight-normal: 400;
  --fc-font-weight-medium: 500;
  --fc-font-weight-semibold: 600;
  --fc-font-weight-bold: 700;
  
  /* Высота строки */
  --fc-line-height-tight: 1.25;
  --fc-line-height-normal: 1.5;
  --fc-line-height-relaxed: 1.75;
  
  /* Межбуквенный интервал */
  --fc-letter-spacing-tight: -0.025em;
  --fc-letter-spacing-normal: 0;
  --fc-letter-spacing-wide: 0.025em;
}

Сравнение с оригинальной типографикой

Элемент	n8n	FlowCraft	Отличие
Основной шрифт	'Open Sans', sans-serif	'Inter', sans-serif	Современный шрифт с лучшей читаемостью
Заголовки	'Roboto', sans-serif	'Montserrat', sans-serif	Более выразительный шрифт для заголовков
Моноширинный шрифт	Стандартный	'Fira Code'	Специализированный шрифт для кода

Модификация компонентов интерфейса

Кнопки

css

/* Стили кнопок */
.fc-button {
  border-radius: 8px;
  font-weight: var(--fc-font-weight-medium);
  transition: all 0.2s ease-in-out;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.fc-button-primary {
  background-color: var(--fc-primary);
  color: white;
}

.fc-button-primary:hover {
  background-color: var(--fc-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(74, 107, 250, 0.2);
}

.fc-button-secondary {
  background-color: var(--fc-secondary);
  color: white;
}

.fc-button-secondary:hover {
  background-color: var(--fc-secondary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(108, 60, 233, 0.2);
}

.fc-button-outline {
  background-color: transparent;
  border: 2px solid var(--fc-primary);
  color: var(--fc-primary);
}

.fc-button-outline:hover {
  background-color: rgba(74, 107, 250, 0.1);
}

Карточки

css

/* Стили карточек */
.fc-card {
  background-color: var(--fc-surface);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.fc-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.fc-card-header {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--fc-border);
  padding-bottom: 0.75rem;
}

.fc-card-title {
  font-family: var(--fc-font-family-heading);
  font-weight: var(--fc-font-weight-semibold);
  color: var(--fc-text-primary);
  font-size: var(--fc-font-size-xl);
}

.fc-card-content {
  color: var(--fc-text-secondary);
}

Формы

css

/* Стили форм */
.fc-form-group {
  margin-bottom: 1.5rem;
}

.fc-form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: var(--fc-font-weight-medium);
  color: var(--fc-text-primary);
}

.fc-form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 2px solid var(--fc-border);
  background-color: var(--fc-surface);
  color: var(--fc-text-primary);
  transition: all 0.2s ease;
}

.fc-form-input:focus {
  border-color: var(--fc-primary);
  box-shadow: 0 0 0 3px rgba(74, 107, 250, 0.2);
  outline: none;
}

.fc-form-input::placeholder {
  color: var(--fc-text-secondary);
  opacity: 0.6;
}

.fc-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}

Модификация сетки и отступов

css

:root {
  /* Отступы */
  --fc-space-1: 0.25rem;   /* 4px */
  --fc-space-2: 0.5rem;    /* 8px */
  --fc-space-3: 0.75rem;   /* 12px */
  --fc-space-4: 1rem;      /* 16px */
  --fc-space-5: 1.5rem;    /* 24px */
  --fc-space-6: 2rem;      /* 32px */
  --fc-space-8: 3rem;      /* 48px */
  --fc-space-10: 4rem;     /* 64px */
  --fc-space-12: 5rem;     /* 80px */
  
  /* Радиусы скругления */
  --fc-radius-sm: 4px;
  --fc-radius-md: 8px;
  --fc-radius-lg: 12px;
  --fc-radius-xl: 16px;
  --fc-radius-full: 9999px;
  
  /* Тени */
  --fc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --fc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
  --fc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05);
  --fc-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/* Сетка */
.fc-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fc-space-4);
  padding-right: var(--fc-space-4);
}

.fc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--fc-space-4);
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
  .fc-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 480px) {
  .fc-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Модификация анимаций и переходов

css

:root {
  /* Длительность анимаций */
  --fc-duration-fast: 150ms;
  --fc-duration-normal: 300ms;
  --fc-duration-slow: 500ms;
  
  /* Функции плавности */
  --fc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --fc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --fc-ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* Анимации */
@keyframes fc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fc-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fc-scale-in {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Классы анимаций */
.fc-animate-fade-in {
  animation: fc-fade-in var(--fc-duration-normal) var(--fc-ease-out) forwards;
}

.fc-animate-slide-up {
  animation: fc-slide-up var(--fc-duration-normal) var(--fc-ease-out) forwards;
}

.fc-animate-scale-in {
  animation: fc-scale-in var(--fc-duration-normal) var(--fc-ease-out) forwards;
}

Модификация рабочей области (Workflow Editor)

Рабочая область редактора рабочих процессов - это ключевой компонент интерфейса FlowCraft. Мы внесли следующие изменения:

css

/* Стили рабочей области */
.fc-workflow-editor {
  background-color: var(--fc-background);
  background-image: 
    radial-gradient(circle at 1px 1px, var(--fc-border) 1px, transparent 0);
  background-size: 24px 24px;
  height: 100%;
}

/* Стили узлов */
.fc-node {
  background-color: var(--fc-surface);
  border-radius: var(--fc-radius-lg);
  box-shadow: var(--fc-shadow-md);
  border-top: 3px solid var(--fc-primary);
  transition: all 0.2s var(--fc-ease-out);
}

.fc-node:hover {
  box-shadow: var(--fc-shadow-lg);
  transform: translateY(-2px);
}

.fc-node-header {
  padding: var(--fc-space-3);
  border-bottom: 1px solid var(--fc-border);
  display: flex;
  align-items: center;
}

.fc-node-icon {
  width: 24px;
  height: 24px;
  margin-right: var(--fc-space-2);
  color: var(--fc-primary);
}

.fc-node-title {
  font-weight: var(--fc-font-weight-medium);
  color: var(--fc-text-primary);
}

.fc-node-content {
  padding: var(--fc-space-3);
}

/* Стили соединений */
.fc-connection {
  stroke: var(--fc-primary);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: none;
  transition: stroke 0.2s var(--fc-ease-out);
}

.fc-connection:hover {
  stroke: var(--fc-primary-dark);
  stroke-width: 3;
}

.fc-connection-point {
  fill: var(--fc-primary);
  stroke: var(--fc-surface);
  stroke-width: 2;
}

.fc-connection-point:hover {
  fill: var(--fc-primary-dark);
  transform: scale(1.2);
}

Модификация боковой панели

css

/* Стили боковой панели */
.fc-sidebar {
  background-color: var(--fc-surface);
  border-right: 1px solid var(--fc-border);
  width: 280px;
  height: 100%;
  overflow-y: auto;
  transition: width 0.3s var(--fc-ease-in-out);
}

.fc-sidebar-collapsed {
  width: 64px;
}

.fc-sidebar-header {
  padding: var(--fc-space-4);
  border-bottom: 1px solid var(--fc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fc-sidebar-logo {
  height: 32px;
}

.fc-sidebar-toggle {
  background: none;
  border: none;
  color: var(--fc-text-secondary);
  cursor: pointer;
  padding: var(--fc-space-2);
  border-radius: var(--fc-radius-full);
  transition: all 0.2s var(--fc-ease-out);
}

.fc-sidebar-toggle:hover {
  background-color: var(--fc-border);
  color: var(--fc-text-primary);
}

.fc-sidebar-menu {
  padding: var(--fc-space-3) 0;
}

.fc-sidebar-menu-item {
  display: flex;
  align-items: center;
  padding: var(--fc-space-3) var(--fc-space-4);
  color: var(--fc-text-secondary);
  text-decoration: none;
  transition: all 0.2s var(--fc-ease-out);
}

.fc-sidebar-menu-item:hover {
  background-color: rgba(74, 107, 250, 0.1);
  color: var(--fc-primary);
}

.fc-sidebar-menu-item.active {
  background-color: rgba(74, 107, 250, 0.15);
  color: var(--fc-primary);
  border-right: 3px solid var(--fc-primary);
}

.fc-sidebar-menu-icon {
  margin-right: var(--fc-space-3);
  width: 20px;
  height: 20px;
}

Модификация верхней панели

css

/* Стили верхней панели */
.fc-header {
  background-color: var(--fc-surface);
  border-bottom: 1px solid var(--fc-border);
  padding: var(--fc-space-3) var(--fc-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fc-header-title {
  font-family: var(--fc-font-family-heading);
  font-weight: var(--fc-font-weight-semibold);
  color: var(--fc-text-primary);
  font-size: var(--fc-font-size-lg);
}

.fc-header-actions {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
}

.fc-header-search {
  position: relative;
}

.fc-header-search-input {
  padding: var(--fc-space-2) var(--fc-space-3);
  padding-left: calc(var(--fc-space-3) + 24px);
  border-radius: var(--fc-radius-full);
  border: 1px solid var(--fc-border);
  background-color: var(--fc-background);
  width: 240px;
  transition: all 0.2s var(--fc-ease-out);
}

.fc-header-search-input:focus {
  width: 320px;
  border-color: var(--fc-primary);
  box-shadow: 0 0 0 3px rgba(74, 107, 250, 0.2);
  outline: none;
}

.fc-header-search-icon {
  position: absolute;
  left: var(--fc-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--fc-text-secondary);
  width: 16px;
  height: 16px;
}

.fc-header-user {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
}

.fc-header-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--fc-radius-full);
  object-fit: cover;
}

.fc-header-user-name {
  font-weight: var(--fc-font-weight-medium);
  color: var(--fc-text-primary);
}

Реализация темной темы

FlowCraft поддерживает темную тему, которая активируется автоматически в зависимости от системных настроек пользователя или может быть выбрана вручную.

css

/* Темная тема */
[data-theme="dark"] {
  /* Основные цвета */
  --fc-primary: #5d7bff;          /* Основной цвет (светло-синий) */
  --fc-primary-light: #8a9fff;    /* Светлый оттенок основного цвета */
  --fc-primary-dark: #4a6bfa;     /* Темный оттенок основного цвета */
  
  /* Вторичные цвета */
  --fc-secondary: #8c5cf5;        /* Вторичный цвет (светло-фиолетовый) */
  --fc-secondary-light: #a77ff8;  /* Светлый оттенок вторичного цвета */
  --fc-secondary-dark: #6c3ce9;   /* Темный оттенок вторичного цвета */
  
  /* Акцентные цвета */
  --fc-accent: #00e0c2;           /* Акцентный цвет (яркий бирюзовый) */
  --fc-accent-light: #40f0d8;     /* Светлый оттенок акцентного цвета */
  --fc-accent-dark: #00c8aa;      /* Темный оттенок акцентного цвета */
  
  /* Нейтральные цвета */
  --fc-background: #121826;       /* Фон (темно-синий) */
  --fc-surface: #1e2736;          /* Поверхность (темно-синий) */
  --fc-text-primary: #f0f4ff;     /* Основной текст (светло-голубой) */
  --fc-text-secondary: #a0b0d0;   /* Вторичный текст (серо-голубой) */
  --fc-border: #2a3548;           /* Границы (темно-синий) */
  
  /* Статусные цвета */
  --fc-success: #00e676;          /* Успех (яркий зеленый) */
  --fc-warning: #ffcc00;          /* Предупреждение (яркий оранжевый) */
  --fc-error: #ff5a8a;            /* Ошибка (яркий красный) */
  --fc-info: #29b6f6;             /* Информация (яркий голубой) */
}

/* Стили рабочей области для темной темы */
[data-theme="dark"] .fc-workflow-editor {
  background-image: 
    radial-gradient(circle at 1px 1px, var(--fc-border) 1px, transparent 0);
}

/* Стили узлов для темной темы */
[data-theme="dark"] .fc-node {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Стили форм для темной темы */
[data-theme="dark"] .fc-form-input {
  background-color: rgba(0, 0, 0, 0.2);
}

Реализация переключателя тем

html

<button class="fc-theme-toggle" aria-label="Toggle theme">
  <svg class="fc-theme-toggle-icon fc-theme-toggle-icon-light" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="5"></circle>
    <line x1="12" y1="1" x2="12" y2="3"></line>
    <line x1="12" y1="21" x2="12" y2="23"></line>
    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
    <line x1="1" y1="12" x2="3" y2="12"></line>
    <line x1="21" y1="12" x2="23" y2="12"></line>
    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
  </svg>
  <svg class="fc-theme-toggle-icon fc-theme-toggle-icon-dark" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
  </svg>
</button>

css

/* Стили переключателя тем */
.fc-theme-toggle {
  background: none;
  border: none;
  color: var(--fc-text-secondary);
  cursor: pointer;
  padding: var(--fc-space-2);
  border-radius: var(--fc-radius-full);
  transition: all 0.2s var(--fc-ease-out);
}

.fc-theme-toggle:hover {
  background-color: var(--fc-border);
  color: var(--fc-text-primary);
}

.fc-theme-toggle-icon {
  width: 20px;
  height: 20px;
}

.fc-theme-toggle-icon-light {
  display: none;
}

.fc-theme-toggle-icon-dark {
  display: block;
}

[data-theme="dark"] .fc-theme-toggle-icon-light {
  display: block;
}

[data-theme="dark"] .fc-theme-toggle-icon-dark {
  display: none;
}

javascript

// Скрипт для переключения тем
document.addEventListener('DOMContentLoaded', () => {
  const themeToggle = document.querySelector('.fc-theme-toggle');
  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
  
  // Установка начальной темы
  if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && prefersDarkScheme.matches)) {
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    document.documentElement.setAttribute('data-theme', 'light');
  }
  
  // Обработчик переключения темы
  themeToggle.addEventListener('click', () => {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
  });
});

Адаптация для мобильных устройств

FlowCraft адаптирован для работы на мобильных устройствах с помощью медиа-запросов:

css

/* Адаптивные стили */
@media (max-width: 1024px) {
  .fc-sidebar {
    width: 240px;
  }
  
  .fc-header-search-input {
    width: 180px;
  }
  
  .fc-header-search-input:focus {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .fc-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s var(--fc-ease-in-out);
  }
  
  .fc-sidebar.open {
    transform: translateX(0);
  }
  
  .fc-sidebar-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    display: none;
  }
  
  .fc-sidebar-overlay.open {
    display: block;
  }
  
  .fc-header-menu-button {
    display: block;
  }
  
  .fc-header-search {
    display: none;
  }
  
  .fc-header-actions {
    gap: var(--fc-space-2);
  }
}

@media (max-width: 480px) {
  .fc-header-title {
    font-size: var(--fc-font-size-md);
  }
  
  .fc-header-user-name {
    display: none;
  }
  
  .fc-node {
    min-width: 200px;
  }
}

Анимации и микровзаимодействия

Для улучшения пользовательского опыта мы добавили различные анимации и микровзаимодействия:

css

/* Анимации и микровзаимодействия */
.fc-button {
  position: relative;
  overflow: hidden;
}

.fc-button::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
}

.fc-button:active::after {
  width: 300px;
  height: 300px;
}

.fc-node.dragging {
  opacity: 0.8;
  transform: scale(1.05);
  box-shadow: var(--fc-shadow-xl);
}

.fc-connection.connecting {
  stroke-dasharray: 5, 5;
  animation: fc-dash 1s linear infinite;
}

@keyframes fc-dash {
  to { stroke-dashoffset: -10; }
}

.fc-notification {
  animation: fc-slide-in-right 0.3s var(--fc-ease-out) forwards;
}

@keyframes fc-slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.fc-notification.closing {
  animation: fc-slide-out-right 0.3s var(--fc-ease-in) forwards;
}

@keyframes fc-slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

Иконки и визуальные элементы

FlowCraft использует собственный набор иконок, отличающийся от оригинального проекта n8n:

css

/* Стили иконок */
.fc-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fc-icon-sm {
  width: 16px;
  height: 16px;
}

.fc-icon-lg {
  width: 32px;
  height: 32px;
}

/* Примеры пользовательских иконок */
.fc-icon-workflow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234a6bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 3 21 3 21 8'%3E%3C/polyline%3E%3Cline x1='4' y1='20' x2='21' y2='3'%3E%3C/line%3E%3Cpolyline points='21 16 21 21 16 21'%3E%3C/polyline%3E%3Cline x1='15' y1='15' x2='21' y2='21'%3E%3C/line%3E%3Cline x1='4' y1='4' x2='9' y2='9'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.fc-icon-integration {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234a6bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10'%3E%3C/path%3E%3Cpath d='M12 20V4'%3E%3C/path%3E%3Cpath d='M6 20v-6'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

Заключение

В этом документе мы описали подходы к модификации визуального стиля платформы FlowCraft для создания уникального пользовательского интерфейса, отличающегося от оригинального проекта n8n. Основные изменения включают:

Полностью новую цветовую схему - переход от оранжево-красной к сине-фиолетовой гамме
Обновленную типографику - использование современных шрифтов Inter и Montserrat
Переработанные компоненты интерфейса - кнопки, карточки, формы и другие элементы
Улучшенные анимации и микровзаимодействия - для более отзывчивого интерфейса
Поддержку темной темы - для комфортной работы в условиях низкой освещенности
Адаптивный дизайн - для работы на устройствах с различными размерами экрана

Эти изменения позволяют создать современный, удобный и визуально привлекательный интерфейс, сохраняя при этом функциональность и удобство использования оригинального проекта.

Модификация стилей FlowCraft ​

Обзор стилевой системы ​

Анализ оригинальных стилей n8n ​

Модификация цветовой схемы ​

Новая цветовая схема FlowCraft ​

Сравнение с оригинальной схемой ​

Модификация типографики ​

Новая типографика FlowCraft ​

Сравнение с оригинальной типографикой ​

Модификация компонентов интерфейса ​

Кнопки ​

Карточки ​

Формы ​

Модификация сетки и отступов ​

Модификация анимаций и переходов ​

Модификация рабочей области (Workflow Editor) ​

Модификация боковой панели ​

Модификация верхней панели ​

Реализация темной темы ​

Реализация переключателя тем ​

Адаптация для мобильных устройств ​

Анимации и микровзаимодействия ​

Иконки и визуальные элементы ​

Заключение ​