notion #custom

inject.css

	/*
README

Notion is essentially a web page. We can easily modify elements within the notion by inserting CSS. In the nativefier app, I can again simply put the CSS at `lotion/Lotion/resources/app/inject/inject.css` .


# Feature

- Change the old white bold scroll bar, more modern
- Modify the theme color,basically include the left sidebar, center and code block,Can be changed according to night mode and day mode
- Thinner cover image and higher content -block
- Change file,link,quote sytle
- Change TOC sytle,and float TOC in the right (Works wonders for long documents.)
- Some of the changes to the table,board,page view(optional), so if you want to change it, try
- Change font (Sometimes it doesn't work, I don't know.)

# How to

If you're interested in beautifying Lotion, the next thing needs to be done by yourself. Just remove the comments. and restart the app(I don't really know how to dynamically insert, if you do, PR.)

default color and size, if you don't like it, change it yourself.



# Thanks

The original creators of code are @Uzver,@Steveyang, thanks to them.
*/


/* ---------------------------------------------------------------
The following content is created by @Uzver(https://www.reddit.com/user/uzverUA/)
Published on https://www.notion.so/Notion-Enhancer-147abdd0b5ed47c9b472520f9ee212a4
----------------------------------------------------------------*/

/*
--------Changing fonts--------
find more
https://www.w3schools.com/cssref/css_websafe_fonts.asp
https://www.w3.org/Style/Examples/007/fonts.en.html
*/

* {
  font-family: Algerian;
}

/* change color code : https://htmlcolorcodes.com/  */
/*
--------Changed dark-theme background--------

*/
.notion-dark-theme .notion-frame {
  background-color: #211f1f !important;
}

/*
--------Changed color of sidebar-background--------
*/

.notion-dark-theme .notion-sidebar-container {
  background-color: #2f3437 !important;
}

.notion-light-theme .notion-sidebar-container {
  background-color: #fff !important;
}

/*
--------Changed color of code-block--------
*/

.notion-dark-theme .notion-code-block {
  background: rgb(60, 60, 73);
}

.notion-light-theme .notion-code-block {
  background: #f8f8ff;
}

/*
--------Changed style of scrollbars--------
*/

/* To make cursor style as pointer when hover on scrollbar */
.notion-scroller {
  cursor: auto;
}
/* Scrollbar size */
::-webkit-scrollbar {
  width: 5px; /* To change vertical scrollbar width */
  height: 7px; /* To change horizontal scrollbar height */
}
/* Element where vertical and horizontal scrollbars converge */
::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* Light Theme style for Scrollbars */
.notion-light-theme ::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #afafaf;
}
.notion-light-theme ::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #e4e4e4;
}
.notion-light-theme ::-webkit-scrollbar-thumb:hover {
  background: #969696;
}

/* Dark Theme style for Scrollbars */
.notion-dark-theme ::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #3d3d42;
}
.notion-dark-theme ::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #5d5d5d;
}
.notion-dark-theme ::-webkit-scrollbar-thumb:hover {
  background: #868686;
}

/*
--------Thinner Cover Image And Higher Content Block--------
*/

/* There is some bugs with it.
On other screens\scaling\resolutions, it may look weird.
To fix it, Adjust "vh" values.
*/
/* Changing content block position, less height - higher content block */

/*[style^="position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;"] {
  height: 10vh !important;
}*/

/* Changing cover image height to match higher content block */

/*[style^="position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;"]
  img {
  height: 16vh !important;
}*/

/*
--------Customization of Table View--------
*/

/* Changing table padding to make it more wider */

/*[class="notion-scroller"] > .notion-table-view {
  padding-left: 35px !important;
  padding-right: 15px !important;
  min-width: 0% !important;
}

.notion-frame > div.notion-scroller.vertical.horizontal > div:nth-child(2) {
  padding-left: 30px !important;
}

[style^="height: 42px;padding-left: 96px;padding-right: 96px;flex-shrink: 0;z-index: 1;overflow: visible;position: sticky;left: 0px;"] {
  padding-left: 30px !important;
}
*/

/* Changing the width of horizontal scroller, because of wider table */

/*[style^="flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; display: flex; align-items: center; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.9); padding: 0px 96px 30vh;"]
  .notion-selectable
  .notion-scroller.horizontal::-webkit-scrollbar-track {
  margin-left: 10px;
  margin-right: 10px;
}*/

/*
--------Customization of Table View--------
*/

/* Same as with table. Makes board view more wider */
.notion-board-view {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/*
--------Customization of Page view--------
*/

/* Wider page view */
.notion-peek-renderer > div:nth-child(2) {
  max-width: 1205px !important;
}

/* Hide "add icon\cover" row in page view */
.notion-peek-renderer
  .notion-scroller.vertical
  > div:nth-child(1)
  > div:nth-child(1)
  > div:nth-child(2) {
  display: none !important;
}

/* Hide comments row */
.notion-peek-renderer .notion-scroller.vertical > div:nth-child(3) {
  display: none !important;
}

/* remove huge margin-top of icon */
.notion-peek-renderer .notion-record-icon {
  display: none !important;
}

/* ---------------------------------------------------------------
The following content is created by @Steveyang(https://userstyles.org/users/603130)
Published on https://userstyles.org/
----------------------------------------------------------------*/
/*
--------Change file style--------
*/
.notion-file-block {
  font-family: cursive;
  background: rgba(32, 32, 32, 0.38);
  color: rgb(217, 255, 3) !important;
}

/*
--------Change link color and mouseover style--------
*/
.notion-page-content a {
  color: rgb(84, 123, 207) !important;
  text-decoration: none;
}

a:hover {
  color: #be5c44 !important;
  text-decoration: none;
}

/* For fun hover link theme
https://css-tricks.com/having-fun-with-link-hover-effects/ */

/* .notion-page-content a {
  color: rgb(108, 255, 255) !important;
  text-decoration: none;
  background: linear-gradient(
    to bottom,
    var(--mainColor) 0%,
    var(--mainColor) 100%
  );
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 3px 3px;
}

a:hover {
  color: #70f090 !important;
  text-decoration: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;
}

:root {
  --mainColor: #ff9800;
}

body {
  align-items: center;
  display: flex;
  font-family: "Montserrat", sans-serif;
  font-size: 2em;
  height: 100vh;
  justify-content: center;
} */

/*
--------Change Quote style--------
*/
.notion-selectable.notion-quote-block > div:nth-child(1) > div:nth-child(1) {
  border-left: 4px solid #f95a9a !important;
  font-size: 0.9em;
  font-family: cursive;
}

/*
--------Float TOC in the Right--------
*/
.notion-selectable.notion-table_of_contents-block {
  position: fixed !important;
  transition: top 0.2s ease 0.2s;
  right: 10px;
  left: auto;
  top: 150px !important;
  display: inline-block !important;
  width: 210px !important;
  max-width: 100% !important;
  margin-right: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 80vh !important;
  min-height: 1vh !important;
}
/* Hover show long text */
[style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%); background-repeat: repeat-x; background-position: 0px 100%; background-size: 100% 1px;"]:hover {
  overflow: visible !important;
  white-space: normal !important;
}

/*when full width,toc will block text ,*/

.notion-page-content {
  padding-right: 240px !important;
}

/* change TOC style */
/* H1 margin-left: 0px */
[style^="padding: 6px 2px; font-size: 14px; line-height: 1.3; display: flex; align-items: center; margin-left: 0px;"] {
  font-size: 15px !important;
  font-family: Arial, Helvetica, sans-serif;
}

/* change H1 color and remove H1 underline */
[style^="padding: 6px 2px; font-size: 14px; line-height: 1.3; display: flex; align-items: center; margin-left: 0px;"]
  > [style^="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%); background-repeat: repeat-x; background-position: 0px 100%; background-size: 100% 1px;"] {
  color: #1cb5f2 !important;
  background-size: 100% 0px !important;
}

/* H2 margin-left: 24px */
[style^="padding: 6px 2px; font-size: 14px; line-height: 1.3; display: flex; align-items: center; margin-left: 24px;"] {
  font-size: 17px !important;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(163, 106, 106) !important;
}

/* Add bullet in fornt of H2 */
/* more contents: https://css-tricks.com/snippets/html/glyphs/ */
[style^="padding: 6px 2px; font-size: 14px; line-height: 1.3; display: flex; align-items: center; margin-left: 24px;"]:before {
  content: "\2022";
  /* change this code "\76" */
  margin-right: 6px;
}

/* H3 margin-left: 48px; */
[style^="padding: 6px 2px; font-size: 14px; line-height: 1.3; display: flex; align-items: center; margin-left: 48px;"] {
  font-size: 16px !important;
  color: rgb(165, 173, 92) !important;
}

/* Add ordinal indicator in fornt of H3 */
[style^="padding: 6px 2px; font-size: 14px; line-height: 1.3; display: flex; align-items: center; margin-left: 48px;"]:before {
  content: "\00ba";
  margin-right: 6px;
}

/* remove H2 H3 underline */
[style^="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%); background-repeat: repeat-x; background-position: 0px 100%; background-size: 100% 1px;"] {
  background-size: 100% 0px !important;
}


/* change Table style */

/* colomun header cell  */

/* .notion-table-view-header-cell {
  background: rgba(40, 125, 201, 0.85);
  font-family: sans-serif;
  font-weight: bold;
  color: rgb(255, 255, 255);
}

.notion-table-view .notion-collection-item div {
  text-align: left !important;
} */

/* Change all selection bar of SVG icons w/h  */
/* .notion-table-view svg {
  height: 16px !important;
  width: 16px !important;
} */

/* Table line alignment  */
/* .notion-table-view {
  min-width: 0px !important;
  background-size: 100% 0px !important;
} */

/* Remove link, URL unlderline in Table */
/* [style^="line-height: 1.5; white-space: normal; word-break: break-word; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%); background-repeat: repeat-x; background-position: 0px 100%; background-size: 100% 1px; font-weight: 500;"] {
  background-size: 100% 0px !important;
} */

/* [style="line-height: 1.5; white-space: pre-wrap; word-break: break-word; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%); background-repeat: repeat-x; background-position: 0px 100%; background-size: 100% 1px;"] {
  background-size: 100% 0px !important;
} */

/* .notion-table-view .notion-collection-item div div div {
  margin-bottom: 6px !important;
  padding-top: 3px !important;
} */

/* .notion-table-view .notion-collection-item {
  align-items: center;
} */

/* .notion-table-view .notion-collection-item .notion-record-icon {
  margin-right: 5px !important;
  margin-bottom: 1px !important;
} */
/*
.notion-table-view .notion-collection-item .notion-record-icon div {
  padding-top: 0px !important;
}

.notion-table-view .checkboxSquare {
  height: 50px !important;
  margin-top: 3px;
  padding-top: 0px !important;
  padding-bottom: 1px !important;
} */

/* .notion-table-view .dragHandle {
  margin-top: -6px;
} */

/* .notion-table-view .openAsPageThick {
  margin-right: 2px;
}

.notion-table-view .check {
  margin-top: 3px;
} */

Can anyone help me on how to apply this in notion?

Thank you so much.

@KimhengMok you can use the nativefier app like said in the comments. https://github.com/nativefier/nativefier
Here's an example used for Notion: https://github.com/indirect/notion-custom-css-builder

Source: https://andre.arko.net/2020/05/18/custom-styles-for-notion/