How to

How to

Transform the background of the text into a highlight

.notion-h .notion-blue_background {
   background-image:linear-gradient(120deg, #1ceaff, #1ceaff);;
    background-repeat: no-repeat;
    background-size: 100% 0.4em;
    background-position: 0 88%;
    font-weight: inherit;
    background-color: unset;
}

Enhance the Scrollbar Appearance and Style

html ::-webkit-scrollbar-track {
    background-color: #fa8bff !important;
    background-image: linear-gradient(180deg,
            #f79533,
            #f37055 16.67%,
            #ef4e7b 33.34%,
            #a166ab 50.01%,
            #5073b8 66.68%,
            #1098ad 83.35%,
            #07b39b 100%) !important;
}

::-webkit-scrollbar {
    width: 0.7rem;
}

::-webkit-scrollbar-thumb {
    background: lightgray;
    border-radius: 20px;
}

Customize Collection View as Tabs

/* tabs styles */
.notion-collection-view-dropdown-content {
    display: flex;
    box-shadow: none;
    align-items: center;
    justify-content: start;
    gap: 30px;
    flex-wrap: wrap;
    margin: 0 auto !important;
}
.notion-collection-view-dropdown-content-item-active-icon>svg {
    display: none !important;
}
.notion-view-type>svg{
    display: none !important;
}
.notion-collection-view-type-title{
    overflow: unset;
}
.notion-collection-view-dropdown-content-item {
    padding:  5px 20px;
    border-radius:5px;
    box-shadow:0px 0px 0px 2px black;
    color: white !important;
}
.notion-collection-view-dropdown-content-item:focus,
.notion-collection-view-dropdown-content-item-active {
    background-color:black;
    color: white !important;

}
.notion-collection-view-dropdown-content-item-active>.notion-collection-view-type>.notion-view-type>.notion-collection-view-type-title{
    color: white !important;
}
.dropdown {
    display: block;
}

.dropdown-trigger {
    display: none;
}

.dropdown-menu {
    display: block;
    position: unset;
    z-index: 99;

}
.dropdown-content{
    background: unset;
}
.notion-collection-view-dropdown-content{
    padding: 25px 0px 25px 0px;
}
.notion-collection-header{
    display: flex;
    justify-content: start;
    padding-left: 90px;
    align-items: center;
    margin: 10px 0px 60px 0px;
}
.notion-collection-view-dropdown-content {
    display: flex;
    box-shadow: none;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

Make Gallery with overlay

:root{
  
  --border-radius:5px;
  --db-card-gap:40px;
  --db-cover-height-small:230px;
}

.notion-collection-card-body{
  display: none;
}
.notion-collection-card-cover:hover +.notion-collection-card-body{
  display: block;
}
.notion-collection-card-body:hover{
  display: block;

}
.notion-collection-card{
  position: relative;
}
.notion-collection-card-body{
  position: absolute;
  bottom: 0;
  color: white;
  background: rgba(56,56,56, 0.45);
  padding: 20px 10px;
}
.notion-collection-card-body{
  width: 100%;
  
}
.notion-collection-card-body .notion-page-icon-inline{
  display: none;
}
.notion-collection-card-property span{
  color: white;
}
.notion-gallery-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--db-card-gap);
    border-top: unset;
    max-width:70%;
    margin: 0 auto;
}
.notion-collection-card-cover{
  border-bottom: unset;
}

@media (max-width:800px){
  .notion-gallery-grid {
    grid-template-columns: 1fr 1fr;
    
  }
}

@media (max-width:640px){
  .notion-gallery-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    
  }
}

Scale Gallery View Cards on Hover

:root{
  --db-card-gap:50px;
  --border-radius: 5px;
  --db-cover-height-small:210px;
}
.notion-collection-card {
    box-shadow: var(--db-card-shadow);
    background-color: unset;
}

.notion-collection-card {
    transform: scale(1);
    transition: all .5s ease !important;
    outline: 1px solid lightgray;
}


.notion-collection-card:hover {
    transform: scale(1.04);
    transition: all .5s ease !important;
    background: unset;
    outline: 2px solid lightgray;
    
}

.notion-gallery-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--db-card-gap);
    border-top: unset;
}

.notion-collection-card-cover {
    border-bottom: none;
}

.notion-collection-card-property .notion-page-title-text {
    white-space: pre-wrap;
}

.notion-collection-card{
  border-radius: var(--border-radius);
}
.notion-gallery-grid{
  max-width:70%;
  margin: 0 auto;
}
.notion-collection-card-body .notion-page-icon-inline{
  display: none;
}
.notion-page-title-text{
  font-size: 20px;
}
.notion-page{
  bg-color:
}

@media (max-width:800px){
  .notion-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--db-card-gap);
}
}
@media (max-width:640px){
  .notion-gallery-grid {
    grid-template-columns: 1fr;
    grid-gap: var(--db-card-gap);
}
.notion-gallery-grid{
  max-width:100%;
  margin: 0 auto;
}

}

Change Gallery View Cards into List Cards

:root{
  --border-radius:5px;
  --db-cover-height-small:230px;
}
.notion-gallery-grid{
  max-width: 70%;
  margin: 0 auto;
}

.notion-collection-card{
  flex-direction: row;
}
.notion-gallery-grid{
  display: grid;
  grid-template-columns: 1fr;

}
.notion-collection-card-cover{
  width: 200px;
  height: 400px;
}
.notion-collection-card-property .notion-page-icon-inline{
  display: none;
}
.notion-collection-card-property .notion-page-title{ 
  font-size: 1.5rem;
}
.notion-collection-card:hover{
   background: none;
}
.notion-collection-card-body{
   flex:1;
}
.notion-property{
  white-space: pre-wrap;
}
@media (max-width:800px){
  .notion-gallery-grid{
    max-width: 100%;
  }
  
}