Hide the Notion header
/* Remove Notion Header (Page Title, Cover and Icon)*/
.notion-header {
display: none!important;
}
.super-content {
padding-top: 60px!important; /* You can change this number */
}
Change the maximum page width
/* Change the max width of the page content */
:root {
--max-width: 990px!important;
}
Turn a callout block into a button
/* Turn a single line callout block into a button (Entire block is clickable) */
.notion-callout {
position: relative!important;
}
.notion-callout .notion-callout__content:first-of-type > .notion-semantic-string span .notion-link {
position: absolute!important;
height: 100%!important;
width: 100%!important;
top: 0!important;
left: 0!important;
right: 0!important;
bottom: 0!important;
padding: 15px!important;
padding-left: 50px!important;
border: none!important;
}
Change default text color
/* Change default text color */
:root {
--color-text-default: #2b2b2b!important;
}
Change default background color
/* Change default background color */
:root {
--color-bg-default: #eeeeee!important;
}
Modify Notion colors
/* Change Notion text colors */
:root {
--color-text-blue: #2081e2!important;
--color-text-red: #e2a79e!important;
--color-text-green: #115e67!important;
--color-text-pink: #fbbfe5!important;
--color-text-yellow: #ffd140!important;
--color-text-orange: #fba067!important;
--color-text-purple: #80379c!important;
--color-text-gray: #2b2b2b!important;
--color-text-brown: #404040!important;
}
/* Change Notion background colors */
:root {
--color-bg-blue-light: #2081e2!important;
--color-bg-red-light: #e2a79e!important;
--color-bg-green-light: #115e67!important;
--color-bg-pink-light: #fbbfe5!important;
--color-bg-yellow-light: #ffd140!important;
--color-bg-orange-light: #fba067!important;
--color-bg-purple-light: #80379c!important;
--color-bg-gray-light: #2b2b2b!important;
--color-bg-brown-light: #404040!important;
}