Свой CSS для профиля

Тема «Своя» позволяет переписать внешний вид профиля обычным CSS. Доступно с премиумом.

Как включить

1. Откройте Редактор профиля → раздел Оформление → тема «Своя».
2. Вставьте CSS в поле «Свой CSS» — превью справа обновится сразу.
3. Нажмите «Сохранить».

Если вы не знаете CSS

Над полем «Свой CSS» есть кнопки с готовыми кусочками: «Острые углы», «Карточка шире», «Парящий аватар», «Свой вид на телефоне» и другие. Нажмите кнопку — кусочек добавится в конец поля, превью сразу покажет результат. Дальше можно поменять в нём одно-два числа и посмотреть, что изменится.

Проще всего начинать с переменных: одна строка вроде body { --vp-radius: 0 } меняет весь профиль сразу.

Куда применяются стили

Все селекторы автоматически привязываются к вашему профилю: правило h1 { … } превратится в .vp-custom h1 { … }. Шапку сайта, меню и чужие страницы задеть нельзя. body, html и :root означают корень профиля.

Фон (картинка, видео, градиент) и эффекты снега/дождя лежат вне этой области — их свой CSS не достаёт. Регулятор громкости видео и музыки (.vp-sound) тоже не меняется: он должен всегда оставаться на виду. Всё остальное на странице профиля можно перекрашивать и двигать.

Переменные

Самый простой способ что-то поменять. Пишите их в body { … }:

/* Квадратный строгий профиль с широкой колонкой */
body {
  --vp-radius: 0;
  --vp-radius-sm: 0;
  --vp-width: 820px;
  --vp-gap: 20px;
}

/* Моноширинный шрифт и имя покрупнее */
body {
  --vp-font: ui-monospace, Consolas, monospace;
  --vp-name-size: 48px;
}

Классы, которые можно стилизовать

Экраны профиля

Если в редакторе добавлены страницы («Обо мне», «Игры», «Галерея», «Текст»), профиль листается экранами: одно движение колеса — следующий экран. На каждом экране фоном стоит его название огромными буквами — только тонкий белый контур.

У вида «Карточка» шапка и меню Vibee спрятаны, полосы прокрутки тоже нет. Шапка выезжает, если подвести мышь к верхнему краю окна, а на телефоне — при прокрутке вверх. Свой CSS шапку не достаёт.

/* Контур названий — акцентным цветом */
body { --vp-mark-color: color-mix(in srgb, var(--accent) 60%, transparent) }

/* Сделать названия ещё тише или убрать совсем */
.vp-page-mark { opacity: 0.5 }
.vp-page-mark { display: none }

/* В каруселях — квадратные углы и без стрелок */
.vp-game > span, .vp-photo { border-radius: 0 }
.vp-flow-nav { display: none }

Как двигать элементы

Любой элемент из таблицы можно сдвинуть, повернуть или поменять местами.

/* Сдвинуть на 20px вправо и 10px вверх (остальная вёрстка не поедет) */
.vp-avatar-wrap { translate: 20px -10px }

/* Повернуть и чуть увеличить */
.vp-badges { transform: rotate(-8deg) scale(1.15) }

/* Отодвинуть с отступом (соседи подвинутся) */
.vp-socials { margin-top: 40px }

/* Поставить счётчик просмотров в правый верхний угол карточки */
.vp-views { left: auto; right: 16px; bottom: auto; top: 14px }

/* Положить аватар в левый верхний угол карточки, поверх содержимого */
.vp-card { padding-top: 120px }
.vp-avatar-wrap { position: absolute; left: 24px; top: 24px }

/* Поменять порядок: блоки под карточкой — в обратном порядке */
.vp-blocks > div { display: flex; flex-direction: column-reverse }

/* Музыку поднять выше всех блоков */
.vp-block-music { order: -1 }

/* Погоду спрятать */
.vp-block-weather { display: none }

position: absolute считается от ближайшего элемента с position: relative — у главной карточки (.vp-card) он уже стоит. position: fixed запрещён.

Двигайте лучше .vp-avatar-wrap, а не .vp-avatar: у обёртки нет своих анимаций, поэтому сдвиг не «сбросится» после появления профиля.

Готовые анимации

Эти анимации уже есть на сайте — @keyframes писать не нужно, достаточно одной строки:

/* Аватар парит */
.vp-avatar-wrap { animation: vp-float 4s ease-in-out infinite }

/* Значки покачиваются */
.vp-badges { animation: vp-sway 3s ease-in-out infinite }

/* Иконки соцсетей пульсируют при наведении */
.vp-social:hover { animation: vp-pulse 0.6s ease-in-out infinite }

/* Баннер медленно переливается цветами */
.vp-banner { animation: vp-hue 12s linear infinite }

Первое число — длительность одного цикла, infinite — повторять бесконечно. Посетители с включённым «уменьшить движение» анимаций не увидят.

Отдельный вид для телефона

Через @media можно задать стили, которые работают только на узком экране. Внутри — обычные правила:

/* На телефоне: квадратные углы, без баннера, имя поменьше */
@media (max-width: 640px) {
  body { --vp-radius: 0; --vp-card-padding: 16px; --vp-name-size: 28px }
  .vp-banner { display: none }
  .vp-block-clock { display: none }
}

/* На больших экранах колонка шире */
@media (min-width: 1200px) {
  body { --vp-width: 760px }
}

Разрешены условия по ширине, высоте и ориентации экрана, например (max-width: 640px), (orientation: landscape), (prefers-reduced-motion: reduce). Внутри @media нельзя писать другие @-правила.

Что разрешено и что нет

Разрешено:

• обычные правила селектор { свойство: значение };
• переменные --vp-…;
• анимации через @keyframes и готовые анимации из списка выше;
• @media для отдельного вида на телефоне;
• картинки через url(https://…).

Вырезается автоматически:

• @import, @font-face, @supports и другие @-правила, кроме @keyframes и @media;
• @media с подозрительным условием (например, с url(…));
• expression(), javascript:, data:, behavior, -moz-binding;
• url() не на https;
• position: fixed (им можно перекрыть сайт поддельным окном);
• любые HTML-теги и обратные слеши.

Максимальный размер — 10 000 символов.

Готовый пример: «Акцентная карточка»

Работает с видом «Общий профиль».

/* Чуть строже углы и шире колонка */
body {
  --vp-radius: 22px;
  --vp-width: 720px;
}

/* Рамка карточки — градиент из акцентного цвета */
.vp-card {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%);
}

/* Имя с градиентом от белого к акцентному */
.vp-name {
  background: linear-gradient(90deg, #ffffff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

/* Аватар чуть «парит» */
.vp-avatar-wrap {
  animation: vp-float 4s ease-in-out infinite;
}

/* Иконки соцсетей — круглые, при наведении заливаются акцентом */
.vp-socials a {
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
}
.vp-socials a:hover {
  background: var(--accent);
  color: #0a0a0c;
}

/* Описание без курсива, мягче цвет */
.vp-bio {
  font-style: normal;
  color: rgb(255 255 255 / 0.75);
}

/* Блоки под карточкой — с той же акцентной рамкой */
.vp-blocks .vp-glass {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

Советы

• Начните с кнопок-заготовок и переменных — так проще понять, что за что отвечает.
• Если стиль не применился, скорее всего, он попал под фильтр: проверьте, нет ли в нём запрещённых @-правил, fixed или ссылок не на https.
• Пользуйтесь var(--accent) вместо фиксированных цветов — тогда при смене цвета в редакторе стиль поменяется сам.
• Проверяйте вид на телефоне: откройте свой профиль с телефона или сузьте окно браузера, а @media (max-width: 640px) поможет поправить то, что не помещается.