Тема DTF для фокусировки на контенте
Если вдруг кто-то тоже любит фокусироваться чисто на контенте, оставляя всё второстепенное в стороне. Только для тёмной расцветки.
Новый дизайн вполне неплох. Я лично люблю минимализм, поэтому сделал для него небольшую доработку со своей стороны.
С данными стилями почти весь контент сверху, справа, слева и снизу - будет заблюрен. Он будет становиться видным при наведении на него курсора.
1. Установите расширение для браузера которое позволяет добавлять собственные CSS стили для сайта. Я испольую User CSS.
2. Добавьте эти стили для сайта dtf.ru:
.bar--top > .header {
backdrop-filter: blur(2px);
background-color: #26282B55;
}
.content__floating > .content-footer {
backdrop-filter: blur(2px);
background-color: #23232488;
transition: all 1s ease;
&:hover, &:focus {
transition: all 0.2s ease;
background-color: #232324CC;
}
}
.bell__button {
opacity: 0.5;
transition: all 1s ease;
&:hover, &:focus {
transition: all 0.2s ease;
opacity: 1;
}
}
.user,
.header__search,
.content:not(.content--embed) > .content-header,
.header__left > a
{
opacity: 0.1;
filter: blur(2px);
transition: all 1s ease;
&:hover, &:focus {
transition: all 0.2s ease;
filter: blur(0px);
opacity: 1;
}
}
.aside--right, .aside--left {
opacity: 0.05;
filter: blur(5px);
transition: all 1s ease;
&:hover {
transition: all 0.2s ease;
filter: blur(0px);
opacity: 1;
}
}
Чтобы добавить их - просто зайдите на dtf.ru, тките наверху на иконку расширения и вставьте код в открывшееся окно редактора.
10 комментариев