Authorozramos
LicenseNo License
Categorynotion, userstyles, vaporwave
Created
Updated
Size67 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Gives Notion a Windows 98 inspired makeover. This works by loading 98.css and then redirects them to various elements. Styles the following:
This theme will style the actual Notion interface at notion.so as well as your public notion.site
For a live preview, developer resources, roadmap, and other random notes see https://ozramos.com/notion98
8/11/21 - Fixed titlebar width, improved table styles, Adds Clippy
/* ==UserStyle==
@name Notion98
@namespace ozramos.com/notion98
@version 1.0.0
@description Gives Notion a 90s vibe
@author Oz Ramos
==/UserStyle== */
@-moz-document domain("notion.so"), domain('notion.site') {
/* Variables */
:root {
--n98-box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
--n98-box-shadow-inset: inset -1px -1px #dfdfdf, inset 1px 1px grey;
--n98-box-shadow-inset-deep: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
--n98-bg: silver;
--n98-pd: 3px;
--n98-titlebar-bg: linear-gradient(90deg,navy,#1084d0);
}
/* Without this you'll get double magic super scrollers */
.notion-scroller::-webkit-scrollbar-button:vertical:start:increment,
.notion-scroller::-webkit-scrollbar-button:vertical:end:decrement,
.notion-scroller::-webkit-scrollbar-button:horizontal:start:increment,
.notion-scroller::-webkit-scrollbar-button:horizontal:end:decrement {
display: none /* super duper */!important;
}
/* Puts the whole Notion intside a window */
.notion-frame, .notion-frame > div:first-child {width: 100% !important}
.notion-peek-renderer > div:last-child,
.notion-frame {
background: var(--n98-bg) !important;
box-shadow: var(--n98-box-shadow) !important;
padding: var(--n98-pd) !important;
border-radius: 0 !important;
}
.notion-peek-renderer > div:last-child > div > div > div {
background: none !important;
}
.notion-peek-renderer > div:last-child > div:first-child > div:first-child {
align-items: center !important;
background: var(--n98-titlebar-bg) !important;
display: flex !important;
justify-content: space-between !important;
padding: 3px 2px 3px 3px !important;
}
.notion-peek-renderer > div:last-child > div:first-child > div:first-child > div:last-child > div {
margin-left: 3px;
}
.notion-topbar {
padding: 3px 2px 3px 3px !important;
background: var(--n98-titlebar-bg) !important;
}
.notion-topbar > div > div {
height: 30px !important;
margin-top: -3px !important;
}
.notion-topbar-mobile {
padding: 3px 2px 3px 3px !important;
background: var(--n98-titlebar-bg) !important;
}
.notion-topbar > div > div > div div.notion-open-sidebar.notion-focusable {
background: none !important;
box-shadow: none !important;
border: none !important;
}
.notion-peek-renderer > div:last-child > div:first-child > div:first-child [role="button"]:not(.notion-record-icon),
.notion-topbar > div > div [role="button"]:not(.notion-record-icon) {
background: var(--n98-bg) !important;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf !important;
color: #000 !important;
border-radius: 0 !important;
padding-top: 0 !important;
margin-top: 4px !important;
margin-left: 4px !important;
}
.notion-peek-renderer > div:last-child > div:first-child > div:first-child [role="button"]:not(.notion-record-icon):active {
box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey !Important;
box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
padding: 2px 11px 0 13px;
}
.notion-peek-renderer > div:last-child > div:first-child > div:first-child a > div svg {
fill: #000 !important;
}
.notion-topbar > div > div [role="button"]:not(.notion-record-icon) {
margin-top: 12px;
}
.notion-topbar-mobile div {
color: #fff !important;
}
.notion-topbar-mobile svg {
fill: #fff !important;
}
.notion-topbar > div > div > div svg.hamburgerMenu,
.notion-topbar > div > div > div svg.doubleChevronRight {
fill: #fff !important;
margin-top: -27px !important;
}
.notion-topbar > div > div > div svg.doubleChevronRight {
position: relative;
top: -10px;
}
.notion-topbar .notion-record-icon {
margin-top: 0 !important;
box-shadow: none !important;
}
notion-topbar > div > .notranslate {
margin-top: 8px !important;
}
notion-topbar > div > :last-child {
margin-top: -4px !important;
}
notion-topbar > div > :last-child [role="button"]:not(.notion-record-icon) {
margin-left: 3px;
}
/* Collection views */
.notion-collection_view_page-block > div {
background: none !important;
border: none !Important;
box-shadow: none !important;
}
/* Code Blocks */
.notion-code-block {
background: #fff;
}
/* Gallery View */
.notion-gallery-view .notion-collection-item {
background: var(--n98-bg) !important;
box-shadow: var(--n98-box-shadow) !important;
border-bottom: 0 !important;
padding: 3px !important;
border-radius: 0 !important;
}
.notion-gallery-view .notion-collection-item > a {
background: none !Important;
border-radius: 0 !important;
}
.notion-gallery-view .notion-collection-item > a > div > :nth-child(2) {
color: #fff !important;
}
.notion-gallery-view .notion-collection-item > a > div > :not(:nth-child(2)) {
color: #000 !important;
}
.notion-page-content > .notion-collection_view-block .notion-gallery-view .notion-collection-item > a > div > div:nth-child(2) {
background: var(--n98-titlebar-bg) !important;
padding: 3px 2px 3px 3px !important;
padding-left: 10px !important;
}
.notion-page-content > .notion-collection_view-block .notion-gallery-view .notion-collection-item > a > div > div:nth-child(2) svg {
fill: #fff !important;
}
.notion-page-content > .notion-collection_view-block .notion-gallery-view .notion-collection-item > a > div > div:nth-child(2) {order: 0 !important;}
.notion-page-content > .notion-collection_view-block .notion-gallery-view .notion-collection-item > a > div > div:nth-child(1) {order: 1 !important;}
.notion-page-content > .notion-collection_view-block .notion-gallery-view .notion-collection-item > a > div > div:nth-child(3) {order: 2 !important;}
.notion-page-content > .notion-collection_view-block .notion-gallery-view .notion-collection-item > a > div > div:nth-child(4) {order: 3 !important;}
/* Board View */
.notion-collection_view-block > div {
background: none !important;
box-shadow: none !Important;
border: none !important;
}
.notion-board-view > div > div:first-child > div {
background: none !important;
}
.notion-board-group .notion-collection-item > a {
background: var(--n98-bg) !important;
box-shadow: var(--n98-box-shadow) !important;
padding: 3px !important;
border-radius: 0 !important;
}
.notion-board-group .notion-page-block > a > div > div:first-child > div:last-child {
background: var(--n98-bg) !important;
box-shadow: var(--n98-box-shadow) !important;
padding: 3px !important;
border-radius: 0 !important;
}
.notion-board-group .notion-page-block > a > div > div:first-child > div:last-child > div.notion-focusable {
background: var(--n98-bg) !important;
}
.notion-board-group .notion-page-block > a > div > div:first-child > div:last-child > div.notion-focusable:hover,
.notion-board-group .notion-page-block > a > div > div:first-child > div:last-child > div.notion-focusable:active {
background: #bbb !Important;
}
/* Callout view */
.notion-callout-block > div > div {
box-shadow: var(--n98-box-shadow-inset) !important;
padding: 10px !important;
border-radius: 0 !important;
}
.notion-callout-block .notion-callout-block:empty {
border: none !Important;
padding: 0 !important;
}
/* Table view */
.notion-table-view .notion-collection-item > div {
box-shadow: var(--n98-box-shadow-inset);
padding: 3px !important;
align-items: stretch !important;
border-radius: 0 !important;
height: auto !important;
display: flex !important;
}
.notion-table-view .notion-collection-item > div > div {
border: none !important;
}
/* Table view fields */
.notion-overlay-container > [data-overlay="true"] > div > div > div:last-child > div > div > div[style*="background: white"] {
box-shadow: var(--n98-box-shadow-inset-deep) !important;
border-radius: 0 !important;
}
/* Bookmark Block */
.notion-bookmark-block .notion-focusable {
background: var(--n98-bg) !important;
box-shadow: var(--n98-box-shadow) !important;
padding: 3px !important;
border-radius: 0 !important;
}
/* List View */
.notion-list-view .notion-collection_view-block > .notion-collection-item {
box-shadow: var(--n98-box-shadow-inset) !important;
padding: 3px !important;
border-radius: 0 !important;
height: auto !important;
}
.notion-list-view .notion-collection_view-block > .notion-collection-item .notranslate {
border-bottom: none !Important;
}
/* Calendar View */
.notion-calendar-view > div:first-child > div:last-child {
box-shadow: var(--n98-box-shadow) !important;
padding: 3px !important;
border-radius: 0 !important;
}
.notion-calendar-view .notion-page-block > a {
background: var(--n98-bg) !important ;
box-shadow: var(--n98-box-shadow) !important;
padding: 3px !important;
border-radius: 0 !important;
background: #ccc !important;
}
.notion-calendar-view .notion-collection_view-block {
background: var(--n98-bg) !important;
}
/* Scrollbars */
::-webkit-scrollbar {
width: 16px !important
}
::-webkit-scrollbar:horizontal {
height: 17px !important
}
::-webkit-scrollbar-corner {
background: #dfdfdf !important
}
::-webkit-scrollbar-track {
background-color: none !important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule...