Gallery Database with tags wrap, without borders by verymoko

/* ==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, а классов нет. */
}