Skip to content

Instantly share code, notes, and snippets.

@mamaj
Last active March 4, 2024 16:14
Show Gist options
  • Save mamaj/a316fe7a1ffc46df994c2657b3a71bbf to your computer and use it in GitHub Desktop.
Save mamaj/a316fe7a1ffc46df994c2657b3a71bbf to your computer and use it in GitHub Desktop.
A CSS mod to notion.so. Changing link colors. brighter text highlight colors in dark mode, indent line for toggle blocks.
/*
* Name: NOTION MOD
* Homepage:
* Author: mamaj
* Version: v1.0
* Updated: 02.14.2020
*/
/*.notion-text-block a, .notion-quote-block a, .notion-bulleted_list-block a {
color: rgba(108, 255, 255, 1) !important;
text-decoration: none;
}
.notion-text-block a:hover, .notion-quote-block a:hover {
color: #70f090 !important;
text-decoration: none;
}
*/
div[style*="border-bottom: 1px solid rgba(255, 255, 255, 0.07)"] {
border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}
span[data-token-index][style*="background:rgba(46, 68, 58, 1)"]{
border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
background: rgba(42, 90, 68, 1) !important;
/* border: solid 1px */
}
span[data-token-index][style*="background:rgba(79, 64, 41, 1)"]{
border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
background: #878019 !important;
/* border: solid 1px */
}
span[data-token-index][style*="background:rgba(45, 66, 86, 1)"]{
border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
background: #24527e !important;
/* border: solid 1px */
}
span[data-token-index][style*="background:rgba(69, 58, 91, 1)"]{
border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
background: #664b9d !important;
/* border: solid 1px */
}
span[data-token-index][style*="background:rgba(81, 56, 77, 1)"]{
border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
background: #ad3099 !important;
/* border: solid 1px */
}
span[data-token-index][style*="background:rgba(85, 59, 41, 1)"]{
border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
background: #a15d3a !important;
/* border: solid 1px */
}
/* ========== SHRINK PADDING ON CODE BLOCKS ========== */
.notion-code-block.line-numbers > div {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
.notion-code-block:not(.line-numbers) .line-numbers + div + div, #code-line-numbers {
top: 14px !important;
}
.notion-code-block.line-numbers + div + div {
background: var(--theme--code-background);
box-shadow: 5px 2px 8px 4px var(--theme--code-background);
}
/*
* Name: NOTION MOD
* Homepage:
* Author: mamaj
* Version: v1.0
* Updated: 02.14.2020
*/
.notion-text-block a, .notion-quote-block a, .notion-bulleted_list-block a {
color: rgba(108, 255, 255, 1) !important;
text-decoration: none;
}
.notion-text-block a:hover, .notion-quote-block a:hover {
color: #70f090 !important;
text-decoration: none;
}
div[style*="border-bottom: 1px solid rgba(255, 255, 255, 0.07)"] {
border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.notion-toggle-block>div>div:last-child>div:nth-child(2)>div {
/* border: solid 1px; */
/* border-radius: 4px; */
/* border-color: rgba(255, 255, 255, 0.4); */
box-shadow: -14px 0 0 0 rgb(47, 52, 55), -15px 0 0 0 rgba(255, 255, 255, .2);
}
span[data-token-index]{
border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
/* border: solid 1px */
}
span[data-token-index][style*="background:rgba(46, 68, 58, 1)"]{
/* border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px; */
background: rgba(42, 90, 68, 1) !important;
/* border: solid 1px */
}
span[data-token-index][style*="background:rgba(79, 64, 41, 1)"]{
/* border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px; */
background: #878019 !important;
/* border: solid 1px */
}
span[data-token-index][style*="background:rgba(45, 66, 86, 1)"]{
/* border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px; */
background: #24527e !important;
/* border: solid 1px */
}
span[data-token-index][style*="background:rgba(69, 58, 91, 1)"]{
/* border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px; */
background: #664b9d !important;
/* border: solid 1px */
}
span[data-token-index][style*="background:rgba(81, 56, 77, 1)"]{
/* border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px; */
background: #ad3099 !important;
/* border: solid 1px */
}
span[data-token-index][style*="background:rgba(85, 59, 41, 1)"]{
/* border-radius: 3px !important;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px; */
background: #a15d3a !important;
/* border: solid 1px */
}
@jrdmcgr
Copy link

jrdmcgr commented Mar 4, 2024

How do I add this to Notion?

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