Rounded UI (selections, tables, callouts), accent changed, small improvements, etc.
Notion Reforged by amaruelleof
Details
Authoramaruelleof
LicenseCC Zero
Categorynotion
Created
Updated
Size7.3 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Notion Reforged
@version 20221221.08.36
@namespace userstyles.world/user/amaruelleof
@description Rounded UI (selections, tables, callouts), accent changed, small improvements, etc.
@author amaruelleof
@license CC Zero
==/UserStyle== */
@-moz-document domain("www.notion.so") {
/*
==UserStyle==
@name Notion Reforged
@author amaruelleof
@namespace notion.so
@version 1.0.1
@description Rounded UI (selections, tables, callouts), accent changed, small improvements, etc.
@var color accentColor "Accent color" #123456
@var color selectionColor "Selection color" #123456
@preprocessor stylus
==UserStyle==
*/
:root{
--accent-color: accentColor!important;
--selection-color: selectionColor!important;
}
div[style*="border-radius: 3px;"], div[style*="border-radius: 0px;"]:hover {
border-radius: 20px!important;
}
div[style*="border-left: 3px solid"] {
border-radius: 3px;
}
span[style*="background:rgba"] {
padding: 3px;
border-radius: 5px;
}
img:not([alt]) {
border-radius: 20px!important;
}
a[style*="border-radius: 3px;"] {
border-radius: 20px!important;
}
.notion-emoji {
border-radius: 0px!important;
}
.notion-selectable notion-drive-block {
border-radius: 14px!important;
}
div[style*="background: rgb(35, 131, 226)"] {
background-color: var(--accent-color)!important;
border-radius: 14px!important;
}
div[style*="text-decoration: line-through"] {
text-decoration: none!important;
}
svg[class="triangle"] {
border-radius: 10px;
}
svg[class="page"] {
border-radius: 5px;
}
span[style*="color:#EB5757"] {
font-family: 'IBM Plex Mono', 'JetBrains Mono', 'Consolas'!important;
color: rgb(5, 5, 5)!important;
background-color: rgb(240, 240, 240)!important;
border-radius: 10px!important;
}
div[class="notion-selectable notion-bulleted_list-block"] {
border-radius: 14px!important;
overflow: hidden!important;
margin: 0!important;
}
div[margin-top="1px"] {
margin-top: 0!important;
margin-bottom: 0!important;
}
div[background-color] {
border-radius: 14px!important;
}
.line-numbers notion-code-block {
border-radius: 14px !important;
}
.notion-sidebar-container {
border-radius: 14px!important;
margin: 10px;
}
.notion-sidebar {
box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.25);
border-radius: 14px!important;
}
.notion-sidebar-switcher.notion-focusable {
border-radius: 14px!important;
}
.temp-item:focus, .temp-item:hover, .notion-focusable:focus {
border-radius: 14px!important;
}
div[style*='border-radius: 4px'] {
border-radius: 14px!important;
}
div[style*='border-radius: 5px'] {
border-radius: 14px!important;
}
div[role=button] {
border-radius: 14px!important;
}
.notion-collection-view-item-add{
border-radius: 14px!important;
}
div[style='user-select: none; transition: background 20ms ease-in 0s; cursor: pointer; display: flex; align-items: center; justify-content: center; white-space: nowrap; border-top-left-radius: 3px; border-bottom-left-radius: 3px; line-height: 1.1; padding-left: 8px; padding-right: 8px; font-weight: 500; background: rgb(35, 131, 226); color: white;'], div[style='user-select: none; transition: background 20ms ease-in 0s; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 24px; align-self: stretch; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background: rgb(35, 131, 226); color: white; box-shadow: rgba(55, 53, 47, 0.16) 1px 0px 0px inset;']{
border-radius: 0px!important;
}
div[style='user-select: none; transition: background 20ms ease-in 0s; cursor: pointer; display: flex; align-items: center; justify-content: center; white-space: nowrap; border-top-left-radius: 3px; border-bottom-left-radius: 3px; line-height: 1.1; padding-left: 8px; padding-right: 8px; font-weight: 500; background: rgb(35, 131, 226); color: white;']:hover, div[style='user-select: none; transition: background 20ms ease-in 0s; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 24px; align-self: stretch; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background: rgb(35, 131, 226); color: white; box-shadow: rgba(55, 53, 47, 0.16) 1px 0px 0px inset;']:hover{
border-radius: 0px!important;
}
table {
border-collapse: separate;
border: 1px solid rgb(233, 233, 231);
border-radius: 8px;
overflow: hidden;
}
td, th {
border-left: 1px solid rgb(233, 233, 231);
border-top: 1px solid rgb(233, 233, 231);
}
th {
background-color: var(--accent-color);
border-top: none;
}
td:first-child, th:first-child {
border-left: none;
}
.notion-table-row {
border-radius: 6px;
}
div[style*='border-top-left-radius: 5px; border-top-right-radius: 5px;'] {
border-top-left-radius: 14px!important;
border-top-right-radius: 14px!important;
}
div[style*='block; position: absolute; inset: 0px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; z-index: -1;'] {
border-radius: 14px!important;
}
div[style*='background: rgb(242, 241, 238); cursor: default; position: absolute; inset: 0px; display: flex; place-content: center; align-items: center; padding: 0.5em 1em; text-align: center; flex-direction: column; overflow: hidden;'], div[style*='background: rgb(242, 241, 238); cursor: default; position: absolute; inset: 0px; display: flex; place-content: center; align-items: center; padding: 0.5em 1em; text-align: center; flex-direction: column; overflow: hidden;']:hover{
border-radius: 14px!important;
}
iframe{
border-radius: 14px!important;
}
.pageLinkIndicator{
display: none!important;
}
img[style*='display: block; object-fit: cover; border-radius: 3px; width: 17.76px; height: 17.76px; transition: opacity 100ms ease-out 0s;']{
border-radius: 3px!important;
}
.notion-selectable.notion-table_of_contents-block{
overflow: hidden;
border-radius: 14px!Important;
}
div[style="background: rgb(241, 241, 239);"]{
padding: 2px 10px!important;
}
.notion-selectable-halo {
inset: -3px!important;
background: var(--selection-color)!important;
border-radius: 20px!important;
}
div[style*="background: rgb(241, 241, 239);"]{
border-radius: 14px!important;
width: fit-content;
}
.notion-selectable.notion-bulleted_list-block , .notion-selectable.notion-numbered_list-block{
margin-top: 5px!important;
margin-bottom: 5px!important;
}
*::selection{
border-radius: 7px!important;
background-color: var(--selection-color);
}
div[style="display: flex; flex-direction: column; position: absolute; margin-left: auto; max-width: 970px; border-radius: 3px; background: white; box-shadow: rgba(15, 15, 15, 0.016) 0px 0px 0px 1px, rgba(15, 15, 15, 0.03) 0px 3px 6px, rgba(15, 15, 15, 0.06) 0px 9px 24px; top: 72px; left: 72px; right: 72px; margin-right: auto; height: calc(100% - 144px);"]{
overflow: hidden;
}
#notion-app > div > div.notion-overlay-container.notion-default-overlay-container > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) > div > div > div > div > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div > div:nth-child(1){
color: var(--accent-color);
}
.notion-focusable{
border-radius: 7px!important;
}
}