Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* 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;
}
@adayush

This comment has been minimized.

Copy link

@adayush adayush commented Jun 4, 2021

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment