- Added Custom Font Variable
Alfon's Notion Tweak by alfonsusac
Details
Authoralfonsusac
LicenseMIT
Categorynotion
Created
Updated
Size19 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Better Notion
@namespace alfonsusac
@version 0.0.1
@description A new userstyle for Notion
@author Alfonsus A (https://github.com/alfonsusac)
@license MIT
@homepageURL https://github.com/alfonsusac
@supportURL https://github.com/alfonsusac/Notion-Enhancements/issues
@preprocessor stylus
@var checkbox enabled "Enabled" 0
@var checkbox test "Test" 0
@var text fontFamilySans "Sans Serif Font" null
@var text fontFamilySerif "Serif Font" null
@var text fontFamilyMono "Mono Font" null
@var number roundedness "Roundiness" 1
@var checkbox fillCallout "Fill Default Callout Color" 0
@var checkbox rounderCallout "Rounded Callout" 0
@var checkbox calloutOffsetContent "Offset Callout Content" 0
@var checkbox biggerFileBlock "Bigger File Block" 0
@var checkbox roundedImgs "Rounded Images" 1
@var checkbox betterViewHeader "Beter Database View Header" 0
@var checkbox betterSingleColumnTables "Better Single Column View" 0
@var number buttononhovermode "Button On Hover Mode" 0
@var checkbox listAttributeAlign "Align Left List Attribute Except Last" 0
@var checkbox galleryRemoveNew "Remove New BUtton on Gallry" 0
@var checkbox pageControlAlwaysVisible "Page Control Always Visible" 0
==/UserStyle== */
@-moz-document domain("notion.so")
card-box-shadow = rgba(15 15 15 10%) 0px 0px 0px 1px, rgba(15 15 15 10%) 0px 2px 4px
card-box-outline = rgba(15 15 15 10%) 0px 0px 0px 1px
card-border-radius = 3px
card-font-size = 14px
/* Custom mixins */
dimension(w,h)
width w
height h
mark()
background-color rgba(255,0,0,0.2) !important
outline solid red 1px !important
todo()
/* Global Variables */
borderrad = (3px + 1 * roundedness)
padding1 = (16px + 1 * roundedness/3 - 4)
padding2 = (16px + 1 * roundedness/3)
// Scroll Bars
::-webkit-scrollbar-track
background: transparent !important
// Page Controls (Add Cover, Add Comment, Add Icon)
div[style*="max-width: 100%; padding-left: calc(96px + env(safe-area-inset-left)); width: 100%;"]
> div:first-child
display: flex
margin-bottom 24px
align-items: end
.notion-record-icon
margin-right: 24px
if pageControlAlwaysVisible
.notion-page-controls
&:empty
height: 0 !important
> div
opacity: 1 !important
// Files
if biggerFileBlock
.notion-selectable.notion-file-block
> div > div > div // focusable
padding: 0px 8px
border-radius: 8px !important
> div
> :nth-child(1)
// outline black 1px solid
padding-left: 0px
padding-right: 2px
> :nth-child(2) > div > div:first-child
// margin-left: 4px
font-weight: 500
border-bottom: rgba(55, 53, 47, 0.16) solid 1px
// Images
if roundedImgs
.notion-image-block > div > div:first-child
border-radius: borderrad
overflow: hidden
// Linksk, Mentions, and Subpages.
.notion-selectable.notion-page-block,
.notion-collection_view_page-block,
.notion-alias-block
> div > a
> .notion-focusable // Focusable
padding: 2px 2px
> div > div// Wrapper
// Page Hyperlink
&:nth-of-type(1) > div
> div:nth-child(1) // The Icon
^[2] ^[3..-1]
flex 0 1 auto
width: auto !important
display:flex
flex-direction row
align-items center
> div
width auto !important
^[2] ^[3..-1]:before
flex-shrink 0
content " "
dimension 0px 8px
margin-right 0px
if buttononhovermode is 1
transition all .1s ease-in-out
background-image url(https://api.iconify.design/ic:round-keyboard-arrow-right.svg)
background-position center
background-size auto
opacity 0.2
if buttononhovermode is 2
transition all .1s ease-in-out
background-color #0000001c
border-radius 16px
if buttononhovermode is 3
transition all .1s ease-in-out
background-color #0000001c
border-radius 2px
^[2]:hover ^[3..-1]:before
if buttononhovermode is 0
dimension 0 0
if buttononhovermode is 1
dimension 8px 8px
margin-right 4px
if buttononhovermode is 2 or buttononhovermode is 3
dimension 8px 8px
margin-right 6px
> div:nth-of-type(2) // The Text
flex 0 1 auto
font-weight: 500 !important
// Remove Triple Dot Button
&:nth-of-type(2)
display: none !important
// Views
.notion-page-content
div.notion-selectable.notion-collection_view-block
// The Header
> :first-child[contenteditable="false"] > div
if betterViewHeader
border-radius: (borderrad - 4px) (borderrad - 4px) 0px 0px
background: rgba(100,100,100,0.05)
flex-direction: row
justify-content: space-between !important
overflow: clip
align-items: center !important
min-height: auto !important
padding: 4px 4px !important
> div
height: auto !important
box-shadow: none !important
// The Right Side Menu List
> :last-child
// Add Button
> .notion-collection-view-item-add
> div[style*="background: rgb(46\, 170, 220);"]
background: transparent !important
color: rgb(46, 170, 220) !important
font-weight: 500 !important
box-shadow:none !important
svg.chevronDown
fill: rgb(46, 170, 220) !important
> div:last-child
box-shadow:none !important
// The View Content
> :nth-child(2)[contenteditable="false"]
if betterSingleColumnTables
^[0] > ^[1..-1]
background:hsla(60, 0%, 40%, .10) !important
> div > div
// Database Title
&:not(.notion-scroller.horizontal.notion-collection-view-body)
padding-top: 6px !important
// Datavase Content
&.notion-scroller > div
// All types of views
> div
// Database Group Header
> div
background-color transparent !important
// Select Single Column Table only
if betterSingleColumnTables
^[0] > ^[1..-1]
&[style*="background: white"], & > [style*="background: white"] // Light mode
background-color rgb(239,239,239) !important
&[style*="background: rgb(25\, 25, 25)"], & > [style*="background: rgb(25\, 25, 25)"] // Dark Mode
background-color rgb(32,32,32) !important
// Group Content
> div div[style*="width: 100%; position: relative"] > div
// Group header
&:first-child
&[style*="background: white"], & > [style*="background: white"] // Light mode
background-color rgb(239,239,239) !important
&[style*="background: rgb(25\, 25, 25)"], & > [style*="background: rgb(25\, 25, 25)"] // Dark Mode
background-color rgb(32,32,32) !important
// Board View
&.notion-board-view
// Board Cards
a[style*="display: block; color: inherit; text-decoration: none; box-shadow: rgba(15\, 15, 15, ...