cleanUrl: /lab
share: true
<style>
.notion-collection_view-block {
width: inherit !important;
}
:root .width {
max-width: 100% !important;
width: 1728px; !important;
}
@media (max-width: 1919px) {
width: 1376px; !important;
}
@media (max-width: 1440px) {
width: 1024px; !important;
}
@media (max-width: 1056px) {
width: calc(100% - 2rem); !important;
}
h1 {
width: inherit !important;
}
</style>
<!-- template/templates.html -->
<style>
/* 카드 */
.notion-collection-item {
transition: 200ms;
}
.notion-collection-item>a {
border: 0;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.0) !important;
border-radius: 10px !important;
}
.notion-collection-item>a>div:hover {
background: #ffffff !important;
}
.notion-collection-item:hover {
/* transform: scale(1.05) !important; */
/* box-shadow: 0px 3px 6px #00000018 !important; */
background: #ffffff !important;
}
/* 이미지 */
.notion-collection-item>a>div>div:nth-child(1)>div>div>div {
border-radius: 4px;
/* position: relative; */
}
.notion-collection-item>a>div>div:nth-child(1)>div>div>div:before {
border-radius: 4px;
position: absolute;
bottom: 0;
content: " ";
width: 100%;
height: 90px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
opacity: 0.1;
transition: 200ms;
}
.item-hover:before {
opacity: 1 !important;
}
/* .notion-collection-item > a > div > div:nth-child(1) > div > div > div:hover:before {
opacity: 1;
} */
/* 아이템 제목 */
.notion-collection-item>a>div>div:nth-child(2) {
padding-left: 15px !important;
padding-right: 15px !important;
margin-top: 5px;
padding-bottom: 0px !important;
}
.notion-collection-item>a>div>div:nth-child(2)>div {
font-size: 21px !important;
font-weight: 700 !important;
}
.notion-collection-item>a>div>div:nth-child(2) .notion-record-icon {
/* display: none !important; */
height: 23px !important;
width: 23px !important;
margin-top: 6px !important;
}
/* 태그 칸 (제목 아래) */
.notion-collection-item>a>div>div:nth-child(3) {
padding-left: 15px !important;
}
/* 태그 */
.notion-collection-item>a>div>div:nth-child(3)>div:nth-child(1)>div>div {
padding-left: 0 !important;
padding-right: 0 !important;
background: #ffffff00 !important;
color: rgba(0, 0, 0, 0.4) !important;
font-size: 15px !important;
}
/* 내용 */
.notion-collection-item>a>div>div:nth-child(3)>div:nth-child(3) {
margin-top: -24px !important;
}
/* 카드 소개 내용 */
.notion-collection-item>a>div>div:nth-child(3)>div:nth-child(2) span {
z-index: 99999;
font-size: 15px !important;
color: #ffffff !important;
white-space: normal !important;
word-break: break-all !important;
line-height: 170% !important;
margin-top: -210px !important;
font-weight: bolder;
transition: 200ms;
opacity: 0;
padding-left: 5px;
}
.notion-collection-item>a> {
opacity: 1;
}
.notion-collection-item>a>div>div:nth-child(3)>div:nth-child(2) span:before {
content: ""
}
</style>
<script>
let items = document.querySelectorAll('.notion-collection-item');
items.forEach((e) => {
e.addEventListener("mouseover", (ee) => {
let item = e.querySelector('a > div > div:nth-child(3) > div:nth-child(2) span');
let item2 = e.querySelector('a > div > div:nth-child(1) > div > div > div');
item.style.opacity = "1";
item2.classList.add('item-hover');
})
e.addEventListener("mouseout", (ee) => {
let item = e.querySelector('a > div > div:nth-child(3) > div:nth-child(2) span');
let item2 = e.querySelector('a > div > div:nth-child(1) > div > div > div');
item.style.opacity = "";
item2.classList.remove('item-hover');
});
});
// let uploadTempalateBtn = document.createElement('a');
// uploadTempalateBtn.classList.add('searchBox');
// uploadTempalateBtn.setAttribute("href", "<https://www.notion-tools.com/templates/upload>")
// uploadTempalateBtn.innerHTML = '템플릿 업로드';
// let searchBox = document.querySelector('.notion-page-content >.notion-collection_view-block > div:first-child > div:first-child > div:first-child > div:nth-child(2)');
// searchBox.appendChild(uploadTempalateBtn);
</script>
포스트