docs/ru-RU/community/custom-css.md

Руководство по пользовательским CSS

Оригинал предоставлен LavaC на нашем форуме сообщества:

{% embed url="https://community.anytype.io/t/tutorial-of-custom-css/14234" %}

Если вам понадобится помощь по этому руководству CSS или по CSS в целом, вы можете оставить комментарий в оригинальной теме.

Где

Чтобы использовать пользовательский CSS, вам нужно сначала перейти в рабочую директорию Anytype.

Затем создайте файл под названием custom.css в этой директории.

### Как

Чтобы учесть новичков, многие методы в этой статье не являются лучшими практиками. Если вы понимаете CSS, можете пропустить большую часть содержимого.

Цветовая тема

При разработке программного обеспечения стили обычно задаются через переменные, установленные в качестве базовых. В Anytype это так же. Если вы хотите изменить стили под себя, начните с этого.

Эти переменные обычно находятся под селектором :root, их можно увидеть в Dev Tools.

Например, --color-text-primary кажется переменной для самого тёмного чёрного текста, поэтому мы можем написать его в файле custom.css следующим образом:

После сохранения вы можете обновить Anytype, нажав (Command/Ctrl) + r.

Конечно, вы также можете напрямую изменить и просмотреть эффекты в Dev Tools.

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

Ниже приведена часть custom.css, которую я изменил, ссылаясь на Solarized 18. Это похоже на игру с изменением слов: меняйте переменные, чтобы увидеть, где они вступают в силу, и затем вы узнаете, что изменить дальше.

:root {
    --color-text-primary: #002b36;
    --color-text-secondary:	#586e75;
    --color-text-tertiary: 	#839496;
    --color-text-inversion: #eee8d5;
    --color-shape-primary: 	#586e75;
    --color-shape-secondary: 	#eee8d5;
    --color-shape-tertiary: 	#eee8d5;
    --color-shape-highlight-medium: rgba(79, 79, 79, 0.08);
    --color-shape-highlight-light: rgba(79, 79, 79, 0.04);
    --color-control-accent: #252525;
    --color-control-active: #b6b6b6;
    --color-control-inactive: #dcdcdc;
    --color-control-bg: #fff;
    --color-bg-primary: #fdf6e3;
    --color-bg-loader: rgba(255,255,255,0.7);
    --color-system-accent-100: #ffb522;
    --color-system-accent-50: #ffd15b;
    --color-system-accent-25: #ffee94;
    --color-system-selection: rgba(24, 163, 241, 0.15);
    --color-system-drop-zone: rgba(255, 187, 44, 0.25);
    --color-yellow: #ecd91b;
    --color-orange: #ffb522;
    --color-red: #f55522;
    --color-pink: #e51ca0;
    --color-purple: #ab50cc;
    --color-blue: #3e58eb;
    --color-ice: #2aa7ee;
    --color-teal: #0fc8ba;
    --color-lime: #5dd400;
    --color-green: #66B395;
}

Шрифты

Атрибут, связанный со шрифтами в CSS, называется font-family. Чтобы все тексты отображались с одним шрифтом, мы обычно применяем стили к тегу body.

body {
    font-family: "霞鹜文楷", "jetBrainsMono";
}

Конечно, для того чтобы это сработало, шрифт должен быть установлен на вашем компьютере. Если его нет, вы можете установить его или импортировать шрифт из интернета.

{% hint style="info" %}

{% endhint %}

Импортировать шрифт онлайн

Тёмный режим

Стили для тёмного режима нужно обернуть в html.themeDark.

/* Default applies to light mode */
.blocks {
    .block.blockText.textCallout>.wrapContent{
        border-radius: 30px;
    }
}

html.themeDark {
    /* Applies to Dark mode */
    --color-text-primary: red;
    .blocks {
        .block.blockText.textCallout>.wrapContent{
            border-radius: 2px;
        }
    }
}

Другие элементы

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

Вы можете попробовать изменить значения прямо там, чтобы увидеть, какие эффекты это вызовет.

Если эффекты вам понравились, вы можете скопировать всё это содержимое в свой файл custom.css, чтобы сохранить изменения.

Замена иконок

Иконки в Anytype реализованы с помощью SVG.

Например, иконки отношений

Текст, начинающийся с data:image/svg..., — это данные Base64, преобразованные из SVG.
Вы можете расшифровать эти данные на специальном веб-сайте, чтобы получить SVG изображение.

Если вы хотите настроить собственную иконку, вы можете преобразовать SVG в формат Base64, что можно сделать на специальном веб-сайте.

Что касается источников SVG-иконок, я рекомендую использовать этот веб-сайт.

Лучше не выбирать слишком сложные SVG, иначе текст Base64 будет слишком длинным.

После получения соответствующего текста Base64 и его замены, мы успешно изменили иконку.

.header .icon.relation {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvb......);
}

Если вам нравится оригинальная иконка, но вы хотите просто изменить её цвет, это также возможно, хотя и немного сложно.

.header .icon.relation {
  // The content of the url in the next line is the content of the `background-image` attribute of this icon. 
  mask-image: url(data:image/svg+xml;base64,.......);
  mask-repeat: no-repeat;
  background: red; // the color you want
}

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

Примеры

{% embed url="https://community.anytype.io/t/anytype-mist-light-dark-a-brand-new-anytype-theme/16329" %}