Skip to content

Gallery Database with tags wrap, without borders by verymoko

Screenshot of Gallery Database with tags wrap, without borders

Details

Authorverymoko

LicenseCC0, maybe. Do what you want.

Categoryuserstyles, notion

Created

Updated

Size3.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

1.06.22
Renamed this style from “Tags wrap in Gallery Database”. Made a different version for it.

Source code

/* ==UserStyle==
@name         Tags wrap in Gallery Database
@version      20220222.00.30
@namespace    userstyles.world/user/verymoko
@description  The style wraps tags in Gallery Database. It helps me to imitate pinterest board, but with notion-inbuilt tags, filters and visual grouping by colour.
@author       verymoko
@license      CC0, maybe. Do what you want.
==/UserStyle== */

@-moz-document domain("notion.so") {
/*
Перенос тегов

Стандартный Ноушен не даёт увидеть все теги карточки. Я включил перенос и упростил оформление¹, чтобы ничего не отвлекало от просмотра картинок и их упорядоченности.

Карточки с текстом тоже трогал, потому что пару раз хотел их использовать. Другие типы карточек не пробовал — пока что не пригождались.

¹ Чтобы оставить только перенос тегов, нужно удалить строчки, начиная с 34.

Содержание
1. Теги и ссылки
2. Карточки с картинками
3. Карточки с текст
*/



/* 1. Теги и ссылки */

/* Сбрасываю высоту подписи карточки, чтобы теги задали её сами */
.notion-gallery-view .notion-focusable > div:last-child > div {
    height: unset !important;
}

/* Компенсирую изменившийся зазор меджц картинкой и тегом */
.notion-gallery-view .notion-focusable > div:last-child {
    padding: 13px 0px 10px 10px !important;
}

/* Перенос тегов */
.notion-gallery-view .notion-focusable > div:last-child > div:first-child > div {
    flex-wrap: wrap;
    row-gap: 4px;
}


/* Перевёрстка фрейма тега */
.notion-gallery-view .notion-focusable > div:nth-child(2) > div > div div {
    padding: 0.75em 0.2em !important;
}
/* second child, чтобы не затронуть паддинги текстовых карточки */

/* Зазор теги-ссылка в 1,5 раза больше зазора картинка-теги */
.notion-gallery-view .notion-focusable > div:last-child > div:first-child {
	margin-bottom: 0.4em;
}




/* 2. Карточки с картинками */

/* Выравниваю карточки по левому краю картинки, так как наружной рамки не будет */
.notion-gallery-view .notion-collection-item {
	position: relative;
	left: -8px;
}

/* Убираю рамки карточки */
.notion-gallery-view > div > div > div > div > a {
    box-shadow: unset !important;
}

/* Убираю полоски карточки */
.notion-gallery-view .notion-focusable > div > div > div > div:last-child {
    border-bottom: unset !important;
}

/* Выравниваю картинки по левому краю */
.notion-gallery-view .notion-focusable > div > div > div > div img {
   object-position: 10px 50% !important;
}



/* 3. Карточки с текстом */

/* Убираю фон текста */
.notion-gallery-view .notion-focusable > div > div > div {
	background: unset !important;
}

/* Не получилось отредактировать поля текстового фрейма. У текстовой и картиночной карточки одинаковая структура HTML, а классов нет. */
}

Reviews

No reviews yet.