Below is a selection of code snippets to further enhance customization (requires upgraded Super site)
‣
Easily center align any text on your site
‣
Center align any group of Notion blocks
‣
Below is a selection of code snippets to further enhance customization (requires upgraded Super site)
.notion-toggle {
border: 1px solid var(--color-border-default) !important;
border-radius: 14px !important;
margin-top: 8px!important;
margin-bottom: 8px !important;
position: relative !important;
text-align: left !important;
transition: background .3s ease-in-out !important;
}
.notion-toggle__summary {
margin: 0 !important;
margin-left: 0px !important;
padding: 18px !important;
padding-right: 30px !important;
}
.notion-heading.toggle {
padding: 0px !important;
}
.notion-toggle.open {
background: var(--color-card-bg) !important;
padding-bottom: 16px !important;
}
.notion-toggle.open .notion-toggle__content {
border-top: 1px solid var(--color-border-default) !important;
}
.notion-toggle__content {
padding-inline-start: 0px !important;
border-top: 1px solid var(--color-border-default) !important;
margin: 0px 20px 0px 20px !important;
padding-top: 16px !important;
transition: all .05s ease-in-out !important;
}
.notion-toggle__trigger {
display: none !important;
}
.notion-toggle__content .notion-text__content {
margin-bottom: 0px !important;
}
.notion-toggle:hover {
background: var(--color-card-bg) !important;
}
.notion-toggle__summary {
position: relative!important;
}
.notion-toggle__summary:before {
position: absolute !important;
font-weight: 100 !important;
font-size: 24px !important;
opacity: .4 !important;
content: "" !important;
width: 18px!important;
height: 18px!important;
background-repeat: no-repeat!important;
background-position: center!important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23212121' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")!important;
top: 50%!important;
transform: translateY(-50%)!important;
right: 18px !important;
}
.open .notion-toggle__summary:before {
position: absolute !important;
font-weight: 100 !important;
font-size: 24px !important;
line-height: 1 !important;
opacity: .4 !important;
content: "" !important;
width: 18px!important;
height: 18px!important;
background-repeat: no-repeat!important;
background-position: center!important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z' fill='%23212121'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")!important;
top: 50%!important;
transform: translateY(-50%)!important;
right: 18px !important;
}
.notion-toggle.open .notion-toggle__content {
opacity: 1 !important;
height: auto !important;
}
.notion-toggle.closed .notion-toggle__content {
opacity: 0 !important;
height: 0px !important;
padding: 0 !important;
display: block !important;
}