Playing with Notion.so
Empty @name replaces the default template - 3/6/2022, 8:10:10 PM by robynrbieber
Details
Authorrobynrbieber
LicenseNo License
CategoryNotion
Created
Updated
Size27 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 Empty @name replaces the default template - 3/6/2022, 8:10:10 PM
@namespace github.com/openstyles/stylus
@version 1.1.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document url-prefix("https://www.notion.so/robynspace/") {
/* Insert code here... */
}
/**
* Robyn's Notion Style Minimal
* Created: 3-6-22
* Author: Robyn Bieber
* Version: 1.0
*/
/*=============================================
= VARIABLES =
=============================================*/
:root{
/*--------------------- Page Styling ---------------------*/
/*--------------------- Colors -------------------*/
/*- Gray ----------*/
--black--dark: rgb(51, 51, 51);
--black--dark--50: rgba(51, 51, 51, .5);
--gray--light: rgb(234, 234, 234);
--gray--dark:rgb(221, 220, 225);
--gray--dark--50:rgb(221, 220, 225, .5);
--gray--dark--30:rgb(221, 220, 225, .3);
/*- Tan (Orange) ----------*/
--tan--med:rgb(230,220,208);
--tan--dark:rgb(206, 201, 190);
--tan--med--50:rgba(236, 232, 224, .79);
--tan--med--30:rgba(206, 201, 190, .5);
--tan--dark--50:rgb(175, 151, 121, .5);
/*- Yellow ----------*/
--yellow--light-50: rgba(255, 252, 186, .5);
--yellow--dark:rgb(221,206,139);
/*- White ----------*/
--n--white--dark:rgb(238,236,219);
--n--white--dark--50:rgba(238,236,219,.5);
/*- Red ----------*/
--red--light: rgb(223,97,66);
--red--dark: rgb(190,87,42);
--red--dark--50: rgba(190,87,42, .5);
/*- Lavender (Purple) ----------*/
--lavender--med: rgb(237, 213, 240);
--lavender--dark: rgb(241, 209, 245);
--lavender--dark--50: rgba(241, 209, 245, .50);
--lavender--dark--25: rgba(241, 209, 245, .25);
/*- Brown ----------*/
--brown--dark: rgb(194, 173, 146);
--brown--dark--50: rgb(194, 173, 146, .5);
--white--dark: rgb(255,255,255);
--white--dark--50: rgba(255,255,255, .5);
/*--------------------- Fonts ----------------------*/
--title--font:'Canela';
--heading--font: 'Canela';
--secondary--heading--font:'Roboto Mono';
--body--font: 'Jost';
--accent--font: 'Roboto Mono';
--test--font:'Montserrat';
/*--------------------- Accents ---------------------*/
/*- Borders ----------*/
--border--width: 1px;
--border--type: solid;
--border--color: var(--gray--dark--50);
--border--style: var(--border--width) var(--border--type) var(--border--color);
--border--radius--sm: 7px;
--border--radius--med: 10px;
--border--radius--lrg: 30px;
--border--radius--full: 100%;
/*- Box Shadow ----------*/
--box--shadow--full: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;;
--transition--cards: box-shadow 0.12s ease-in 0s;
}
/*=============================================
= REFACTOR =
=============================================*/
/*--------------------- Fonts https://github.com/ethereum/ethdev-site/blob/master/public%2Ffonts%2FProxima%20Nova%20Reg.ttf ----------------------*/
@font-face {
font-family: 'Canela';
src: ('https://db.onlinewebfonts.com/c/4a24899e94d8236f671c1090cd9e068c?family=Canela');
font-weight: 500 !important;
}
@font-face {
font-family: 'Jost';
src: ('https://fonts.googleapis.com/css2?family=Jost&display=swap');
font-weight: normal !important;
}
@font-face {
font-family: 'Nanum Gothic';
src: ('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap');
font-weight: 700 !important;
}
@font-face {
font-family: 'Roboto Mono';
src: ('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
font-weight: 500 !important;
}
@font-face {
font-family: 'Montserrat';
src: ('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
}
/*--------------------- Headings ----------------------*/
[placeholder*="Heading 1"]{
font-family: var(--secondary--heading--font) !important;
}
[placeholder*="Heading 2"]{
font-family: var(--secondary--heading--font) !important;
font-weight: 500 !important;
}
[placeholder*="Heading 3"]{
font-family: var(--secondary--heading--font) !important;
font-weight: 700 !important;
}
[style*='Georgia'] {
font-family: var(--body--font) !important;
}
[style*='iawriter-mono'] {
font-family: var(--accent--font) !important;
}
.notion-selectable.notion-quote-block div[spellcheck='true'] {
font-family: var(--accent--font) !important;
}
[placeholder='Heading 1']{
font-family: var(--title--font) !important;
}
[placeholder='Heading 2'],
[placeholder='Heading 3'] {
font-family: var(--secondary--heading--font) !important;
letter-spacing: -.03em !important;
}
/*--------------------- Body ----------------------*/
html,body,input,button,input:-webkit-autofill::first-line .notion-frame{
font-family: var(--body--font)!important;
text-rendering: geometricPrecision;
font-weight: 400 !important;
}
/*--------------------- Block Quotes ----------------------*/
.notion-selectable.notion-quote-block div[spellcheck='true'] {
font-family: var(--accent--font) !important;
}
/*=============================================
= COLOR REFACTOR =
=============================================*/
/*- Borders ----------*/
.notion-light-theme *[style*="border-bottom: 1px solid rgb(233, 233, 231)"]{
border-bottom: 1px solid var(--gray--dark--50) !important;
}
.notion-light-theme *[style*="border-top: 1px solid rgb(233, 233, 231);"] {
border-top: 1px solid var(--gray--dark--50) !important;
}
.notion-light-theme *[style*="border-top: 1px solid rgb(233, 233, 231);"] {
border-right: 1px solid var(--gray--dark--50) !important;
}
.notion-light-theme *[style*="border-top: 1px solid rgb(233, 233, 231);"] {
border-left: 1px solid var(--gray--dark--50) !important;
}
.notion-light-theme *[style*="border:rgb(45, 170, 219);"] {
border: 1px solid var(--lavender--dark) !important;
}
/*--------------------- #4A90E2; Element Colors: Text background, blocks background, tags background, NOT TEXT (changed color in parentheses!)----------------------*/
/*- That damn blue! ----------*/
#notion-app *[style*="color:rgb(45, 170, 219)"]{
color: var(--lavender--dark--50) !important;
}
#notion-app *[style*="background-color:rgb(45, 170, 219)"]{
background-color: var(--lavender--dark--50) !important;
}
#notion-app *[style*="backgroundr:rgb(45, 170, 219)"]{
background: var(--lavender--dark--50) !important;
}
#notion-app *[style*="color:#4A90E2"]{
color: var(--lavender--dark--50) !important;
}
#notion-app *[style*="background-color:#4A90E2"]{
background-color: var(--lavender--dark--50) !important;
}
#notion-app *[style*="background: rgba(46, 170, 220, 0.15)"]{
background: var(--lavender--dark--50) !important;
}
#notion-app *[style*="rgb(46, 170, 220) 0px 0px 0px 2px inset;"]{
box-shadow: var(--black--dark) 0px 0px 0px 0px !important;
}
.notion-focusable:focus-visible {
box-shadow: none!important;
}
/*- Gray colors----------*/
.notion-light-theme *[style*="background:rgba(241, 241, 239, 1)"],
.notion-light-theme *[style*="background: rgb(241, 241, 239)"],
.notion-light-theme *[style*="background: rgba(55, 53, 47, 0.09)"],
.notion-light-theme *[style*="background: rgb(227, 226, 224)"] {
background: var(--gray--dark--50) !important;
}
.notion-light-theme *[fill*="background:rgba(241, 241, 239, 1)"]{
fill: var(--black--dark) !important;
}
/*- Tan (Tan Medium) ----------*/
.notion-light-theme *[style*="background:rgba(244, 238, 238, 1)"],
.notion-light-theme *[style*="background: rgb(244, 238, 238)"],
.notion-light-theme *[style*="background: rgb(238, 224, 218)"] {
background: var(--tan--med) !important;
}
.notion-light-theme *[style*="color: rgba(55, 53, 47, 0.5)"]{
color: var(--black--dark) !important;
}
.notion-light-theme *[style*="-webkit-text-fill-color: rgba(55, 53, 47, 0.5)"]{
color: var(--black--dark) !important;
}
/*- Pink (Red) ----------*/
.notion-light-theme *[style*="background: rgba(253, 235, 236, 1)"],
.notion-light-theme *[style*="background: rgb(253, 235, 236)"],
.notion-light-theme *[style*="background: rgb(255, 226, 221)"] {
background: var(--red--dark--50) !important;
}
/*- Orange (Tan transparent) ----------*/
.notion-light-theme *[style*="background:rgba(251, 236, 221, 1)"],
.notion-light-theme *[style*="background: rgb(251, 236, 221)"],
.notion-light-theme *[style*="background: rgb(250, 222, 201)"] {
background: var(--tan--dark--50) !important;
}
/*- Yellow ----------*/
.notion-light-theme *[style*="background:rgba(251, 243, 219, 1)"],
.notion-light-theme *[style*="background: rgb(251, 243, 219)"],
.notion-light-theme *[style*="background: rgb(253, 236, 200)"] {
background: var(--yellow--light-50) !important;
}
/*- Green ADD COLOR----------*/
.notion-light-theme *[style*="background:rgba(237, 243, 236, 1)"],
.notion-light-theme *[style*="background: rgb(237, 243, 236)"],
.notion-light-theme *[style*="background: rgb(219, 237, 219)"] {
background: var(--NONE--) !important;
}
/*-Blue ADD COLOR----------*/
.notion-light-theme *[style*="background:rgba(231, 243, 248, 1)"],
.notion-light-theme *[style*="background: rgb(231, 243, 248)"],
.notion-light-theme *[style*="background: rgb(211, 229, 239)"] {
background: var(--NONE--) !important;
}
/*-Purple----------*/
.notion-light-theme *[style*="background:rgba(244, 240, 247)"],
.notion-light-theme *[style*="background: rgba(244, 240, 247, 0.8)"],
.notion-light-theme *[style*="background: rgb(232, 222, 238)"] {
background: var(--lavender--dark--25) !important;
}
/*-Pink again (Brown) ----------*/
.notion-light-theme *[style*="background: rgba(249, 238, 243, 0.8)"],
.notion-light-theme *[style*="background: rgb(249, 238, 243)"],
.notion-light-theme *[style*="background: rgb(245, 224, 233)"] {
background: var(--brown--dark--50) !important;
}
/*--------------------- Cards ----------------------*/
/*-CHANGES ALL BOX SHAD...