notion-router.css

/* General */
div.notion-topbar > div > div:nth-child(1n).toggle-mode {
	display: none !important;	
}
div.notion-topbar-mobile > div:nth-child(1n).toggle-mode {
	display: none !important;	
}
div.notion-topbar-mobile > div:nth-child(5) {
	display: none !important;	
}
.notion-frame {
	background-image: linear-gradient(180deg, #fdfbfb 0%, #ebedee 100%) !important;
	/* background: linear-gradient(45deg,#ee7752,#e73c7e,#0a769c,#14daab) !important;
	background-size: 130% 100% !important;
	animation: gradient 8s ease infinite; */
}
@keyframes gradient {
	0% {
		background-position: 0% 50% !important;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.notion-page-content {
    padding-bottom: 2.5rem !important;
    padding-top: 2.5rem !important;
    background: #fff;
    border-radius: 1rem;
    margin: -2.75rem 0 10vh 0;
}
.notion-page-block {
    position: relative;
}
.notion-scroller > [style="width: 100%; font-size: 14px;"] {
    margin-bottom: 1.5rem;
}
.notion-image-block {
    pointer-events: none !important;
}
.notion-image-block img {
    pointer-events: none !important;
}
.notion-callout-block > div > div {
    border-radius: 0.5rem !important;   
}
.notion-peek-renderer {
    background: #142025 !important;
    transition: 0.3s;
}
.notion-peek-renderer > div:nth-child(2) {
    border-radius: 0.5rem !important;
    overflow: hidden;
}
.notion-gallery-view > div > div > a {
    border-radius: 0.5rem !important;	
}
.notion-gallery-view > div > div > a:hover {
    opacity: 0.75;	
}
.notion-scroller > div:nth-child(2) > div {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Landing Page: Navigation */
[data-block-id="c7ef4bd9-4069-480b-a481-3533903733e8"] > div > div:nth-child(even),
[data-block-id="f34cdbc9-8cd0-42aa-8189-3aa368fd0f37"] > div > div:nth-child(even) {
    display: none !important;
}
@media only screen and (min-width: 50em) {
    [data-block-id="c7ef4bd9-4069-480b-a481-3533903733e8"] > div > div:nth-child(even),
    [data-block-id="f34cdbc9-8cd0-42aa-8189-3aa368fd0f37"] > div > div:nth-child(even) {
        display: block !important;
    }
}
[data-block-id="c7ef4bd9-4069-480b-a481-3533903733e8"] > div > div:nth-child(odd),
[data-block-id="f34cdbc9-8cd0-42aa-8189-3aa368fd0f37"] > div > div:nth-child(odd) {
    display: inline-block !important;
    max-width: 50% !important;
}
@media only screen and (min-width: 50em) {
    [data-block-id="c7ef4bd9-4069-480b-a481-3533903733e8"] > div > div:nth-child(odd),
    [data-block-id="f34cdbc9-8cd0-42aa-8189-3aa368fd0f37"] > div > div:nth-child(odd) {
        display: block !important;
    }
}

/* Landing Page: Emoji */
[data-block-id="971194ae-0c81-4fc6-a386-382167111c79"] {
    display: none;
}
@media only screen and (min-width: 50em) {
    [data-block-id="971194ae-0c81-4fc6-a386-382167111c79"] {
        display: block;
        text-align: right;
        margin-top: -5.825rem !important;
        font-size: 4rem;
    }
}

/* Landing Page: Guestbook */
[data-block-id="fcce5ac2-0901-4e52-a247-4684ece3df01"] {
    font-size: 0.875rem;
    text-align: center;
}
[data-block-id="fcce5ac2-0901-4e52-a247-4684ece3df01"] .notion-record-icon {
    display: none !important;
}

/* Landing Page: Footer */
[data-block-id="6aa56b96-f6bf-4590-82c4-adca0c85b920"] {
    text-align: center;
}
[data-block-id="6f58376d-b7c3-47a6-8720-d537db62ebf0"] {
    text-align: center;
    margin-bottom: -3.5rem !important;
}
[data-block-id="6d7f9450-7f4e-4b6e-a9b8-45bccd9bfdd5"] {
    text-align: center;
    font-size: 0.875rem;
}

/* Landing Page: Showcase */
[data-block-id="ef16e429-9a91-4e22-8391-032d4fe51cd3"] > div:first-child,
[data-block-id="70792c31-f2b7-40b2-94ba-5a3a6c517273"] > div:first-child,
[data-block-id="b15a7f0e-0538-4bc7-aaeb-b9494458f5bb"] > div:first-child {
	min-height: 0 !important;	
}

[data-block-id="ef16e429-9a91-4e22-8391-032d4fe51cd3"] > div:first-child > div,
[data-block-id="70792c31-f2b7-40b2-94ba-5a3a6c517273"] > div:first-child > div,
[data-block-id="b15a7f0e-0538-4bc7-aaeb-b9494458f5bb"] > div:first-child > div {
	display: none !important;	
}

[data-block-id="ef16e429-9a91-4e22-8391-032d4fe51cd3"].notion-selectable.notion-collection_view-block,
[data-block-id="70792c31-f2b7-40b2-94ba-5a3a6c517273"].notion-selectable.notion-collection_view-block,
[data-block-id="b15a7f0e-0538-4bc7-aaeb-b9494458f5bb"].notion-selectable.notion-collection_view-block {
	border: none !important;	
}

[data-block-id="70792c31-f2b7-40b2-94ba-5a3a6c517273"].notion-selectable.notion-collection_view-block,
[data-block-id="b15a7f0e-0538-4bc7-aaeb-b9494458f5bb"].notion-selectable.notion-collection_view-block {
	padding-top: 0 !important;	
}

[data-block-id="70792c31-f2b7-40b2-94ba-5a3a6c517273"] .notion-list-view,
[data-block-id="b15a7f0e-0538-4bc7-aaeb-b9494458f5bb"] .notion-list-view {
	padding-bottom: 0 !important;	
}

[data-block-id="255f5a05-d774-467f-a73f-7079bcc0eeee"] {
	display: none !important;	
}
@media only screen and (min-width: 50em) {
    [data-block-id="255f5a05-d774-467f-a73f-7079bcc0eeee"] {
        display: block !important;
    }
}

/* Now */
[data-block-id="75a3b99e-f428-430d-a87b-3d5242fe5cce"] {
    text-align: right;
    padding-top: 1rem;
}

/* Portfolio */
[data-block-id="51ee9852-027b-450e-aa4e-f6f0a1861ec2"] > div:first-child,
[data-block-id="f70889a1-feaa-4a1d-b00c-d4ee6e29689d"] > div:first-child,
[data-block-id="ec104b15-ff6e-4400-a848-a88f6139e1ff"] > div:first-child {
    min-height: 0 !important;
}
[data-block-id="51ee9852-027b-450e-aa4e-f6f0a1861ec2"] > div:first-child > div,
[data-block-id="f70889a1-feaa-4a1d-b00c-d4ee6e29689d"] > div:first-child > div,
[data-block-id="ec104b15-ff6e-4400-a848-a88f6139e1ff"] > div:first-child > div {
    display: none !important;
}

/* Portfolio: Hiding Thumbnails */
[data-block-id="99a71a4b-08f7-4c99-945a-ddfbc9df0a1b"],
[data-block-id="183d187c-7b2c-4ce4-9d56-13d715eb2e9b"],
[data-block-id="afad12b7-f88f-419c-9a7f-7e621018b287"],
[data-block-id="e8e72e41-d5b4-4987-a016-44f8f489b53f"],
[data-block-id="ff122c47-f4fe-4b7f-b827-703883217388"],
[data-block-id="566014b3-8ba6-448f-b305-717f947ca58a"],
[data-block-id="a1dd0805-87b2-444e-8a6b-90ce0086a1c3"]{
    display: none !important;
}

/* Photo */
[data-block-id="00b8412b-49d8-4a22-a739-a4f666fbd082"] ~ div img {
    border-radius: 0.5rem !important;   
}

/* Remarks */
[data-block-id="e0fa74a3-dfc2-4b66-bcd9-30abfced1863"] ~ div img {
    border-radius: 0.5rem !important;   
}

/* Remarks: Adjust Thumbnails */
[data-block-id="e11ff443-eddf-42cc-a197-6580c47d1bc5"],[data-block-id="f23de68b-e100-4ff2-a4e0-1a3b19eb98d9"],[data-block-id="039a5f84-338a-4b2d-bed7-cd2112784fe2"],[data-block-id="43e70b54-3b70-4735-814e-776b5f5dc4fb"],[data-block-id="8371d4f9-4924-4e07-a422-2b871e2d504b"],[data-block-id="a9066f17-df96-43ab-a81a-ccba76c34176"] {
	display: none;
}


@media only screen and (min-width: 50em) {
    [data-block-id="c0b083f9-d63d-4f45-bee7-8b08d5e7e0f6"],[data-block-id="5fc61763-35d2-4ae7-ab98-086e63758bfb"],[data-block-id="71a0c46d-f859-4f2c-80e2-b1e6972f5f0e"],[data-block-id="b506d1bf-8ad7-4bb8-81d2-87e43bf21756"],[data-block-id="69a89fae-e10d-4f22-806c-e37ab3397f7e"],[data-block-id="54db5892-e2da-460e-8dc9-caa48615b902"] {
        display: none;
    }
    [data-block-id="e11ff443-eddf-42cc-a197-6580c47d1bc5"],[data-block-id="f23de68b-e100-4ff2-a4e0-1a3b19eb98d9"],[data-block-id="039a5f84-338a-4b2d-bed7-cd2112784fe2"],[data-block-id="43e70b54-3b70-4735-814e-776b5f5dc4fb"],[data-block-id="8371d4f9-4924-4e07-a422-2b871e2d504b"],[data-block-id="a9066f17-df96-43ab-a81a-ccba76c34176"] {
	display: block;
    }
}

/* Landing Page: Temporary */
[data-block-id="8a0b343f-5acc-4095-9fce-266148517eda"]{
    display: none !important;
}

Hi, First of all thanks for the css. I found that the original Fruition script has dark mode button and yours didn't. I wanted the dark mode button, so I modified this css a bit. Maybe this'll help save anyone's time ;)

Remove these first:

div.notion-topbar > div > div:nth-child(1n).toggle-mode {
    display: none !important;	
}
div.notion-topbar-mobile > div:nth-child(1n).toggle-mode {
    display: none !important;	
}
div.notion-topbar-mobile > div:nth-child(5) {
    display: none !important;	
}

Then replace .notion-frame with these:

.notion-frame {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, #fdfbfb 0%, #ebedee 100%) !important;

}

.dark .notion-frame {
    background-color: transparent !important;
    background-image:linear-gradient(180deg,#1b1b1b 0,#20262e 100%)!important;
}

.dark .notion-page-content {
    background:rgba(54, 73, 84, 0.2)
}

That's it! This works perfectly without any script function (I wasted hours trying to do that).

Can we use this code for potion?