Skip to content

Instantly share code, notes, and snippets.

@nirewen
Last active May 10, 2022 21:21
Show Gist options
  • Save nirewen/af6b43b7d4549204ee1c816877f55c3b to your computer and use it in GitHub Desktop.
Save nirewen/af6b43b7d4549204ee1c816877f55c3b to your computer and use it in GitHub Desktop.
A collection of custom Notion CSS that I use
/* wider popout */
:root {
--theme--page_preview-width: 1280px;
}
.notion-selectable {
max-width: 1980px !important;
}
/* move Add property to the right */
#notion-app > div > div.notion-overlay-container.notion-default-overlay-container > div:nth-child(2) > div > div:nth-child(2) > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(2) > div > div:nth-child(1) > div {
position: relative;
}
#notion-app > div > div.notion-overlay-container.notion-default-overlay-container > div:nth-child(2) > div > div:nth-child(2) > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(2) > div > div:nth-child(1) > div > div:nth-child(2) {
position: absolute;
top: 8px;
right: -40px;
}
#notion-app > div > div.notion-overlay-container.notion-default-overlay-container > div:nth-child(2) > div > div:nth-child(2) > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(2) > div > div:nth-child(1) > div > div:nth-child(2) > div {
padding-left: 9px;
padding-right: 9px;
}
#notion-app > div > div.notion-overlay-container.notion-default-overlay-container > div:nth-child(2) > div > div:nth-child(2) > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(2) > div > div:nth-child(1) > div > div:nth-child(2) > div > div {
display: none;
}
#notion-app > div > div.notion-overlay-container.notion-default-overlay-container > div:nth-child(2) > div > div:nth-child(2) > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(2) > div > div:nth-child(1) > div > div:nth-child(2) > div > svg {
margin-right: 0 !important;
}
#notion-app > div > div.notion-overlay-container.notion-default-overlay-container > div:nth-child(2) > div > div:nth-child(2) > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(2) > div > div:nth-child(1) > div > div:nth-child(3) {
position: absolute;
top: 48px;
right: -40px;
}
#notion-app > div > div.notion-overlay-container.notion-default-overlay-container > div:nth-child(2) > div > div:nth-child(2) > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(2) > div > div:nth-child(1) > div > div:nth-child(3) > div {
padding-left: 9px;
padding-right: 9px;
}
#notion-app > div > div.notion-overlay-container.notion-default-overlay-container > div:nth-child(2) > div > div:nth-child(2) > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(2) > div > div:nth-child(1) > div > div:nth-child(3) > div > div {
display: none;
}
#notion-app > div > div.notion-overlay-container.notion-default-overlay-container > div:nth-child(2) > div > div:nth-child(2) > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(2) > div > div:nth-child(1) > div > div:nth-child(3) > div > svg {
margin-right: 0 !important;
}
/* move page icon to the left + smaller */
#notion-app > div > div.notion-cursor-listener > div:nth-child(3) > div.notion-frame > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(1) > div > div.pseudoSelection > div.notion-record-icon.notranslate.notion-focusable,
#notion-app > div > div.notion-cursor-listener > div:nth-child(2) > div.notion-frame > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(1) > div > div.pseudoSelection > div.notion-record-icon.notranslate.notion-focusable {
height: 48px !important;
width: 48px !important;
margin-left: -60px !important;
margin-bottom: -80px !important;
margin-top: 30px !important;
}
#notion-app > div > div.notion-cursor-listener > div:nth-child(3) > div.notion-frame > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(1) > div > div.pseudoSelection > div.notion-record-icon.notranslate.notion-focusable > div > div > img,
#notion-app > div > div.notion-cursor-listener > div:nth-child(2) > div.notion-frame > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(3) > div > div:nth-child(1) > div > div.pseudoSelection > div.notion-record-icon.notranslate.notion-focusable > div > div > img {
width: 48px !important;
height: 48px !important;
}
/* hide View of pages from the sidebar (you can still open the views in fullscreen from the parent page) */
#notion-app > div > div.notion-cursor-listener > div.notion-sidebar-container > div > div > div > div.notion-scroller.vertical > div.notion-outliner-private > div .notion-collection_view-block {
display: none !important;
}
/* shorter margins for columns and subcolumns */
#notion-app > div > div.notion-cursor-listener > div:nth-child(2) > div.notion-frame > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(4) > div:nth-child(1) > div > div div[style^="padding-top: 12px; padding-bottom: 12px;"],
#notion-app > div > div.notion-cursor-listener > div:nth-child(3) > div.notion-frame > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(4) > div:nth-child(1) > div > div div[style^="padding-top: 12px; padding-bottom: 12px;"] {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#notion-app > div > div.notion-cursor-listener > div:nth-child(2) > div.notion-frame > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(4) > div:nth-child(1) > div > div .notion-column_list-block[style$="margin-top: 2px; margin-bottom: 1px;"],
#notion-app > div > div.notion-cursor-listener > div:nth-child(3) > div.notion-frame > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(4) > div:nth-child(1) > div > div div[style^="padding-top: 12px; padding-bottom: 12px;"] {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* hide hidden groups from boards (kinda broken) */
#notion-app > div > div.notion-cursor-listener > div:nth-child(2) > div.notion-frame > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(4) > div:nth-child(1) > div .notion-collection_view-block > div:nth-child(2) > div > div > div > div > div:nth-child(1) > div:nth-child(3):not(.notion-collection-item),
#notion-app > div > div.notion-cursor-listener > div:nth-child(2) > div.notion-frame > div.notion-scroller.vertical > div.whenContentEditable > div:nth-child(4) > div:nth-child(1) > div .notion-collection_view-block > div:nth-child(2) > div > div > div > div > div:nth-child(4) {
display: none !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment