├── .DS_Store ├── .babelrc ├── .github └── workflows │ └── backupAction.yml ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── readmeAssets ├── .DS_Store └── img │ ├── -1.png │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ └── 7.png ├── scripts ├── index.mjs ├── render │ ├── convertHtmlToMd.js │ └── renderToHtmlString.js ├── style │ └── notion-render.css └── utils │ └── email.ts ├── webpack.config.js ├── yarn-error.log └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qumuchegi/notion-docsify/25acef2f763ca3529e6cc0f46b156281247681e8/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets" : [ 3 | "@babel/preset-env" , 4 | "@babel/preset-react" 5 | ], 6 | "plugins" : [ 7 | "@babel/plugin-transform-runtime" 8 | ] 9 | } -------------------------------------------------------------------------------- /.github/workflows/backupAction.yml: -------------------------------------------------------------------------------- 1 | name: backup-notion 2 | 3 | on: 4 | push: 5 | schedule: 6 | - cron: "10 23,4,11 * * *" #在北京时间 早上 7:10、中午 12:10、晚上 19:10 点各备份一次，也就是每天备份三次 7 | jobs: 8 | backup-notion: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: checkout 12 | uses: actions/checkout@v2 13 | - uses: actions/setup-node@v2 14 | with: 15 | node-version: "17" 16 | - run: npm install 17 | - name: build script 18 | run: npm run build 19 | continue-on-error: true 20 | - run: npm run run-backup ${{ secrets.NOTION_PAGE_IDS }} ${{ secrets.NOTION_TOKEN }} 21 | - name: backup as artifact 22 | uses: actions/upload-artifact@v3 23 | with: 24 | name: notion-backup-zip 25 | path: backupZip 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build/ 3 | backup/ 4 | backupZip/ 5 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 备份 notion 2 | 3 | 利用 GitHub Action 的 cron jobs 自动定时备份 notion 4 | 5 | ## 数据安全 6 | 7 | 1. 将项目设置为私有仓库，那么备份的数据只会在自己的 GitHub 账户下面可见 8 | >可以在 GitHub 上将fork后的此项目设置为私有仓库，这样可以保护你的备份笔记不会被其他人看到。将项目转为私有仓库的方法： setting => Danger Zone => Change repository visibility => change visibility 9 | 10 | 2. notion 页面只能通过个人的 token 读取，不会分享到 web，不会被浏览和篡改内容 11 | 12 | ## 动机 13 | 14 | - notion 是美帝公司，可能由于一些政治因素国内的用户突然访问不了 15 | 16 | - notion 本身可能服务崩溃，数据丢失 17 | 18 | 出于这些原因，我们有必要给一些重要的数据做备份 19 | 20 | ## 使用指南 21 | 22 | 1. 获取 Notion 的 token_v2， 23 | 24 | 打开 `https://www.notion.so`，用你自己的账户登录，登录后， 25 | f12 打开开发者面板，在 ‘应用’ => 'Cookie' => 'token_v2'， 复制 token_v2 的值 26 | 27 | ![](/readmeAssets/img/-1.png) 28 | 29 | 2. 复制你需要备份的 notion 页面 30 | 31 | **获取 notion page id**: 在你需要备份的 notion 页面的右上角，点击 share 后，点击 'Copy Link', 得到一个 URL，比如 `https://www.notion.so/chegi/1c3ca781039447228f3c0bbf9b8ed74c` 这个 URL 我们可以复制到浏览器上查看这个 notion 页面 (只有页面主任可以登录查看). 我们把 url 后面的一部分的最后 32 位字符串复制下来，这 32 位就是这个 notion page id 32 | 33 | ![](/readmeAssets/img/7.png) 34 | 35 | （注意，你不需要 share 一个页面下面的子页面，只要顶级页面 share 了，那么子页面也会被 share）: 36 | 37 | 3. fork 此项目仓库 38 | 39 | 4. 在 GitHub secrets 填写 token_v2 和 notion page id 40 | 41 | 在 fork 的仓库详情页（如下图），打开 `Setting` tab, 设置环境变量 `NOTION_PAGE_IDS`, 变量的值是你需要备份的 notion 页面的 id。（**如果有多个页面，就用 ',' 隔开，需要注意： 1. 要用英文的顿号；2. 顿号前后不要留空格**） 42 | 43 | ![](/readmeAssets/img/5.png) 44 | 45 | 填写 notion page id: 46 | 47 | ![](/readmeAssets/img/6.png) 48 | 49 | 同样的方法我们新建一个名为 `NOTION_TOKEN` 的环境变量，它的值是我们在上面复制的 token_v2。 50 | 51 | 5. 上面的步骤做好后，只需等待备份任务自动运行。备份时间是每天三次自动备份（在北京时间 早上 7:10、中午 12:10、晚上 19:10 点各备份一次）。备份的结果会放在每次备份任务的 `Artifacts`，你可以在这里 (Actions) 下载备份结果。 52 | 53 | ![](/readmeAssets/img/4.png) 54 | 55 | 备份结果： 56 | 57 | ![](/readmeAssets/img/2.png) 58 | 59 | 下载备份结果到本地，解压，只需要把顶级的 `index.html` 在浏览器打开，里面的子页面的链接会自动改成本地的地址，点击 `index.html` 里面的链接可以在浏览器自动打开子页面。 60 | 61 | ![](/readmeAssets/img/3.png) 62 | 63 | 6. 定期更新 `token_v2` 64 | 65 | `token_v2` 的有效期为 1 年，如果过期了，你需要再按照第 1 步和第 4 步更新 `token_v2`。 66 | 67 | 68 | ## 目前存在问题 69 | 70 | 1. 递归备份子页面只支持在父页面上创建的子页面，从其他 notion 页面复制的子页面链接不能被备份，但是点击这种子页面的链接会跳到 notion 的页面，不影响查看内容 71 | 72 | 2. 图片等非文字静态资源暂时不会备份，这些资源被 notion 放在 AWS 的服务器，不受 notion 的影响 73 | 74 | 3. 导出格式为 HTML 的时候格式和 notion 保持一样，但是转化为 markdown 的时候 collection 格式会失真 75 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "notion-docsify", 3 | "version": "1.0.0", 4 | "description": "将 notion 的页面转化为静态网站", 5 | "main": "scripts/index.js", 6 | "author": "qumuchegi", 7 | "license": "MIT", 8 | "scripts": { 9 | "build": "webpack --config webpack.config.js --mode=development", 10 | "run-backup": "node build/bundle.js" 11 | }, 12 | "dependencies": { 13 | "@octokit/rest": "^18.12.0", 14 | "adm-zip": "^0.5.9", 15 | "node-html-markdown": "^1.1.3", 16 | "notion-client": "^6.5.0", 17 | "react": "^18.0.0", 18 | "react-dom": "^18.0.0", 19 | "react-notion-x": "^4.12.0" 20 | }, 21 | "devDependencies": { 22 | "@babel/core": "^7.17.8", 23 | "@babel/plugin-transform-runtime": "^7.17.0", 24 | "@babel/preset-env": "^7.16.11", 25 | "@babel/preset-react": "^7.16.7", 26 | "babel-loader": "^8.2.4", 27 | "copy-webpack-plugin": "^10.2.4", 28 | "css-loader": "^6.7.1", 29 | "webpack": "^5.71.0", 30 | "webpack-cli": "^4.9.2", 31 | "webpack-dev-server": "^4.7.4" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /readmeAssets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qumuchegi/notion-docsify/25acef2f763ca3529e6cc0f46b156281247681e8/readmeAssets/.DS_Store -------------------------------------------------------------------------------- /readmeAssets/img/-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qumuchegi/notion-docsify/25acef2f763ca3529e6cc0f46b156281247681e8/readmeAssets/img/-1.png -------------------------------------------------------------------------------- /readmeAssets/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qumuchegi/notion-docsify/25acef2f763ca3529e6cc0f46b156281247681e8/readmeAssets/img/1.png -------------------------------------------------------------------------------- /readmeAssets/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qumuchegi/notion-docsify/25acef2f763ca3529e6cc0f46b156281247681e8/readmeAssets/img/2.png -------------------------------------------------------------------------------- /readmeAssets/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qumuchegi/notion-docsify/25acef2f763ca3529e6cc0f46b156281247681e8/readmeAssets/img/3.png -------------------------------------------------------------------------------- /readmeAssets/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qumuchegi/notion-docsify/25acef2f763ca3529e6cc0f46b156281247681e8/readmeAssets/img/4.png -------------------------------------------------------------------------------- /readmeAssets/img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qumuchegi/notion-docsify/25acef2f763ca3529e6cc0f46b156281247681e8/readmeAssets/img/5.png -------------------------------------------------------------------------------- /readmeAssets/img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qumuchegi/notion-docsify/25acef2f763ca3529e6cc0f46b156281247681e8/readmeAssets/img/6.png -------------------------------------------------------------------------------- /readmeAssets/img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qumuchegi/notion-docsify/25acef2f763ca3529e6cc0f46b156281247681e8/readmeAssets/img/7.png -------------------------------------------------------------------------------- /scripts/index.mjs: -------------------------------------------------------------------------------- 1 | import { NotionAPI } from "notion-client" 2 | import { renderNotionPage } from './render/renderToHtmlString.js' 3 | import path from 'path' 4 | import fs from 'fs' 5 | import AdmZip from 'adm-zip' 6 | 7 | const localNotionStyleFileName = 'style/notion-render.css' 8 | 9 | console.log('-----notion backup start-----', process.argv) 10 | console.log('reading notion page id from your cmd argv ...') 11 | 12 | 13 | if (!process.argv[2]) { 14 | throw 'can not get notion page id! please add notion page ids on github setting secret' 15 | } 16 | if (!process.argv[3]) { 17 | throw 'can not get notion token! please add notion integration token on github setting secret' 18 | } 19 | 20 | // 测试 notion page id：917c1456eb6b472590f3611fb57b691c（子页面不是直接子页面，而是其他页面的链接） 21 | const blockIdArr = process.argv[2].split(',').map(id => id.trim()) 22 | const notionToken = process.argv[3] 23 | // const email = process.argv[4] 24 | const exportFileType = 'html' // process.argv[3] 25 | 26 | console.log('this is notion block id you want to back up:\n') 27 | console.log(blockIdArr) 28 | const NC = new NotionAPI({ 29 | authToken: notionToken 30 | }) 31 | 32 | function pureBlockId(blockId) { 33 | return blockId.replaceAll('-', '') 34 | } 35 | 36 | let failPageIdArr = [] 37 | async function backupNotionPage(parentDir = '', blockId, dirDeep = 0) { 38 | let res 39 | try { 40 | res = await NC.getPage(blockId, { fetchCollections: true }) 41 | } catch (err) { 42 | failPageIdArr.push(blockId.replaceAll('-', '')) 43 | throw 'page fetch error' 44 | } 45 | // blockId === '917c1456eb6b472590f3611fb57b691c' && 46 | // fs.writeFileSync(path.resolve(__dirname, '../log' + `/res${blockId}.json`), JSON.stringify(res)) 47 | // console.log({res}) 48 | const dirPath = `${parentDir}/${pureBlockId(blockId)}` 49 | fs.mkdirSync(dirPath, { recursive: true }) 50 | const notionRenderStylePath = '../'.repeat((Math.max(dirDeep, 0)) * 2 + 1) + localNotionStyleFileName 51 | const { str, childPages: childPagesId } = renderNotionPage(dirPath, res, blockId, exportFileType, notionRenderStylePath) 52 | fs.writeFileSync(`${dirPath}/index.${exportFileType}`, str) 53 | // console.log( 54 | // { 55 | // blockId, 56 | // childPagesId 57 | // }) 58 | 59 | if (childPagesId.length > 0) { 60 | // console.log({ 61 | // 'childPagesId length': childPagesId.length, 62 | // childPagesId 63 | // }) 64 | const childDir = `${dirPath}/childPages` 65 | fs.mkdirSync(childDir, { recursive: true }) 66 | await Promise.allSettled( // 不能用 Promise.all，不能因为有一个 page 解析失败而影响后面全部的 page 67 | childPagesId.map(id => { 68 | return backupNotionPage(childDir, id.replaceAll('-', ''), dirDeep + 1) 69 | }) 70 | ) 71 | } 72 | return blockId 73 | } 74 | 75 | const backupDir = path.resolve(__dirname, '../backup') 76 | 77 | async function zipBackupDir() { 78 | const now = new Date() 79 | const zip = new AdmZip() 80 | fs.mkdirSync( path.resolve(__dirname, `../backupZip`)) 81 | const zipPath = path.resolve(__dirname, `../backupZip/backup-notion-${now.getTime()}.zip`) 82 | zip.addLocalFolder(backupDir) 83 | zip.writeZip(zipPath) 84 | } 85 | 86 | // 复制 css 文件 87 | fs.cpSync( 88 | path.resolve(__dirname, './style/notion-render.css'), 89 | backupDir + '/style/notion-render.css' 90 | ) 91 | 92 | Promise.allSettled( 93 | blockIdArr.map(id => { 94 | try { 95 | return backupNotionPage(backupDir, id, 0) 96 | } catch (err) { 97 | console.log(err) 98 | return id 99 | } 100 | }) 101 | ).then(resultArr => { 102 | console.log('backup done') 103 | const successIds = resultArr.filter(({ status, value }) => { 104 | return status === 'fulfilled' 105 | }).map(i => i.value) 106 | const failIds = [] 107 | blockIdArr.forEach(id => { 108 | if (!successIds.includes(id)) { 109 | failIds.push(id) 110 | } 111 | }) 112 | console.table([{ 113 | 'backup success block id': successIds, 114 | 'backup failed block id': failIds 115 | }]) 116 | failPageIdArr.length > 0 && 117 | console.log( 118 | 'these pages backup failed, they are probably removed from notion: \n', 119 | failPageIdArr, 120 | '\n', 121 | `you can try to visit notion page with these page id, take the first page id for example, like this: https://www.notion.so/${failPageIdArr[0]}` 122 | ) 123 | zipBackupDir(backupDir) 124 | }).catch(err => { 125 | console.error('fail~~', err) 126 | }) 127 | 128 | -------------------------------------------------------------------------------- /scripts/render/convertHtmlToMd.js: -------------------------------------------------------------------------------- 1 | import { NodeHtmlMarkdown, NodeHtmlMarkdownOptions } from 'node-html-markdown' 2 | 3 | const nhm = new NodeHtmlMarkdown( 4 | /* options (optional) */ 5 | { 6 | preferNativeParser: true, 7 | 8 | }, 9 | /* customTransformers (optional) */ undefined, 10 | /* customCodeBlockTranslators (optional) */ undefined 11 | ); 12 | 13 | export default function convertHtmlToMd(htmlStr) { 14 | return nhm.translate(htmlStr) 15 | } -------------------------------------------------------------------------------- /scripts/render/renderToHtmlString.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { renderToString } from 'react-dom/server' 3 | import { NotionRenderer, Equation, Collection, CollectionRow, Code } from 'react-notion-x' 4 | import convertHtmlToMd from './convertHtmlToMd' 5 | 6 | const CLASSNAME_REWRITE__NOTION_LINK = 'notion-link-rewrite-base-path' 7 | const CHILD_BLOCK_TYPE = [ 8 | 'page' 9 | ] 10 | 11 | /** 12 | notion block type: 13 | 14 | export declare type BlockType = 15 | | 'page' 16 | | 'text' 17 | | 'bookmark' 18 | | 'bulleted_list' 19 | | 'numbered_list' 20 | | 'header' 21 | | 'sub_header' 22 | | 'sub_sub_header' 23 | | 'quote' 24 | | 'equation' 25 | | 'to_do' 26 | | 'table_of_contents' 27 | | 'divider' 28 | | 'column_list' 29 | | 'column' 30 | | 'callout' 31 | | 'toggle' 32 | | 'image' 33 | | 'embed' 34 | | 'gist' 35 | | 'video' 36 | | 'figma' 37 | | 'typeform' 38 | | 'codepen' 39 | | 'excalidraw' 40 | | 'tweet' 41 | | 'maps' 42 | | 'pdf' 43 | | 'audio' 44 | | 'drive' 45 | | 'file' 46 | | 'code' 47 | | 'collection_view' 48 | | 'collection_view_page' 49 | | 'transclusion_container' 50 | | 'transclusion_reference' 51 | | 'alias' 52 | | 'table' 53 | | 'table_row' 54 | | 'external_object_instance' 55 | | string; 56 | 57 | */ 58 | 59 | function findPageBlockId(parentId, blockValue, blocks = [], collectionView = {}) { 60 | let childIds = [] 61 | if (!blockValue.content) { 62 | return [] 63 | } 64 | blocks.forEach(block => { 65 | // isSubPage 直接子页面 66 | const isSubPage = blockValue.content.includes(block.value.id) && 67 | CHILD_BLOCK_TYPE.includes(block.value.type) 68 | // && block.value.id !== generatePageId(parentId) 69 | if (isSubPage) { 70 | childIds.push(block.value.id) 71 | } 72 | 73 | // collection sub page 74 | let collectionSubPageIds = [] 75 | if (block.value.type === 'collection_view') { 76 | if (block.value.parent_id === generatePageId(parentId)) { 77 | block.value.view_ids.forEach(viewId => { 78 | collectionSubPageIds.push( 79 | ...(collectionView[viewId].value.page_sort) 80 | ) 81 | }) 82 | } 83 | } 84 | childIds.push(...collectionSubPageIds) 85 | }) 86 | return childIds 87 | } 88 | 89 | const PageLink = ( 90 | fileType, // html/md 91 | childPagesIdArr = [] 92 | ) => (props) => { 93 | const id = props.href.match(/\/(.*)/)[1] 94 | const isSubPage = childPagesIdArr.includes(generatePageId(id)) 95 | return 107 | {props.children} 108 | 109 | } 110 | 111 | export function renderNotionPage( 112 | parentDir, 113 | recordMap, 114 | blockId, 115 | fileType, 116 | notionRenderStylePath 117 | ) { // fileType html/md 118 | const childPages = findPageBlockId( 119 | blockId, 120 | recordMap.block[generatePageId(blockId)].value, 121 | Object.values(recordMap.block), 122 | recordMap['collection_view'] 123 | ).filter(id => id !== blockId) 124 | 125 | let htmlStr = renderToString( 126 | 140 | ) 141 | htmlStr = ` 142 | 143 | 144 | 145 | 146 | 155 | 156 | 157 | ${htmlStr} 158 | 159 | ` 160 | return { 161 | str: fileType === 'html' ? htmlStr : convertHtmlToMd(htmlStr), 162 | childPages 163 | } 164 | } 165 | 166 | function generatePageId(rawPageId) { 167 | if (/[^-]{8}-[^-]{4}-[^-]{4}-[^-]{4}-[^-]{12}/.test(rawPageId)) { 168 | return rawPageId 169 | } 170 | return [ 171 | rawPageId.slice(0, 8), 172 | rawPageId.slice(8, 12), 173 | rawPageId.slice(12, 16), 174 | rawPageId.slice(16, 20), 175 | rawPageId.slice(20, 32) 176 | ].join('-') 177 | } 178 | 179 | -------------------------------------------------------------------------------- /scripts/style/notion-render.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --notion-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 3 | 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; 4 | --fg-color: rgb(55, 53, 47); 5 | --fg-color-0: rgba(55, 53, 47, 0.09); 6 | --fg-color-1: rgba(55, 53, 47, 0.16); 7 | --fg-color-2: rgba(55, 53, 47, 0.4); 8 | --fg-color-3: rgba(55, 53, 47, 0.6); 9 | --fg-color-4: #000; 10 | --fg-color-5: rgba(55, 53, 47, 0.024); 11 | --fg-color-6: rgba(55, 53, 47, 0.8); 12 | --fg-color-icon: var(--fg-color); 13 | 14 | --bg-color: #fff; 15 | --bg-color-0: rgba(135, 131, 120, 0.15); 16 | --bg-color-1: rgb(247, 246, 243); 17 | --bg-color-2: rgba(135, 131, 120, 0.15); 18 | 19 | --select-color-0: rgb(46, 170, 220); 20 | --select-color-1: rgba(45, 170, 219, 0.3); 21 | --select-color-2: #d9eff8; 22 | 23 | --notion-red: rgb(224, 62, 62); 24 | --notion-pink: rgb(173, 26, 114); 25 | --notion-blue: rgb(11, 110, 153); 26 | --notion-purple: rgb(105, 64, 165); 27 | --notion-teal: rgb(15, 123, 108); 28 | --notion-yellow: rgb(223, 171, 1); 29 | --notion-orange: rgb(217, 115, 13); 30 | --notion-brown: rgb(100, 71, 58); 31 | --notion-gray: rgb(155, 154, 151); 32 | 33 | --notion-red_background: rgb(251, 228, 228); 34 | --notion-pink_background: rgb(244, 223, 235); 35 | --notion-blue_background: rgb(221, 235, 241); 36 | --notion-purple_background: rgb(234, 228, 242); 37 | --notion-teal_background: rgb(221, 237, 234); 38 | --notion-yellow_background: rgb(251, 243, 219); 39 | --notion-orange_background: rgb(250, 235, 221); 40 | --notion-brown_background: rgb(233, 229, 227); 41 | --notion-gray_background: rgb(235, 236, 237); 42 | 43 | --notion-red_background_co: rgba(251, 228, 228, 0.3); 44 | --notion-pink_background_co: rgba(244, 223, 235, 0.3); 45 | --notion-blue_background_co: rgba(221, 235, 241, 0.3); 46 | --notion-purple_background_co: rgba(234, 228, 242, 0.3); 47 | --notion-teal_background_co: rgba(221, 237, 234, 0.3); 48 | --notion-yellow_background_co: rgba(251, 243, 219, 0.3); 49 | --notion-orange_background_co: rgba(250, 235, 221, 0.3); 50 | --notion-brown_background_co: rgba(233, 229, 227, 0.3); 51 | --notion-gray_background_co: rgba(235, 236, 237, 0.3); 52 | 53 | --notion-item-blue: rgba(0, 120, 223, 0.2); 54 | --notion-item-orange: rgba(245, 93, 0, 0.2); 55 | --notion-item-green: rgba(0, 135, 107, 0.2); 56 | --notion-item-pink: rgba(221, 0, 129, 0.2); 57 | --notion-item-brown: rgba(140, 46, 0, 0.2); 58 | --notion-item-red: rgba(255, 0, 26, 0.2); 59 | --notion-item-yellow: rgba(233, 168, 0, 0.2); 60 | --notion-item-default: rgba(206, 205, 202, 0.5); 61 | --notion-item-purple: rgba(103, 36, 222, 0.2); 62 | --notion-item-gray: rgba(155, 154, 151, 0.4); 63 | 64 | --notion-max-width: 720px; 65 | --notion-header-height: 45px; 66 | } 67 | 68 | .dark-mode { 69 | --fg-color: rgba(255, 255, 255, 0.9); 70 | --fg-color-0: var(--fg-color); 71 | --fg-color-1: var(--fg-color); 72 | --fg-color-2: var(--fg-color); 73 | --fg-color-3: var(--fg-color); 74 | --fg-color-4: var(--fg-color); 75 | --fg-color-5: rgba(255, 255, 255, 0.7); 76 | --fg-color-6: #fff; 77 | --fg-color-icon: #fff; 78 | 79 | --bg-color: #2f3437; 80 | --bg-color-0: rgb(71, 76, 80); 81 | --bg-color-1: rgb(63, 68, 71); 82 | --bg-color-2: rgba(135, 131, 120, 0.15); 83 | 84 | --notion-red: rgb(255, 115, 105); 85 | --notion-pink: rgb(226, 85, 161); 86 | --notion-blue: rgb(82, 156, 202); 87 | --notion-purple: rgb(154, 109, 215); 88 | --notion-teal: rgb(77, 171, 154); 89 | --notion-yellow: rgb(255, 220, 73); 90 | --notion-orange: rgb(255, 163, 68); 91 | --notion-brown: rgb(147, 114, 100); 92 | --notion-gray: rgba(151, 154, 155, 0.95); 93 | --notion-red_background: rgb(89, 65, 65); 94 | --notion-pink_background: rgb(83, 59, 76); 95 | --notion-blue_background: rgb(54, 73, 84); 96 | --notion-purple_background: rgb(68, 63, 87); 97 | --notion-teal_background: rgb(53, 76, 75); 98 | --notion-yellow_background: rgb(89, 86, 59); 99 | --notion-orange_background: rgb(89, 74, 58); 100 | --notion-brown_background: rgb(67, 64, 64); 101 | --notion-gray_background: rgb(69, 75, 78); 102 | --notion-red_background_co: rgba(89, 65, 65, 0.3); 103 | --notion-pink_background_co: rgba(83, 59, 76, 0.3); 104 | --notion-blue_background_co: rgba(120, 162, 187, 0.3); 105 | --notion-purple_background_co: rgba(68, 63, 87, 0.3); 106 | --notion-teal_background_co: rgba(53, 76, 75, 0.3); 107 | --notion-yellow_background_co: rgba(89, 86, 59, 0.3); 108 | --notion-orange_background_co: rgba(89, 74, 58, 0.3); 109 | --notion-brown_background_co: rgba(67, 64, 64, 0.3); 110 | --notion-gray_background_co: rgba(69, 75, 78, 0.3); 111 | } 112 | 113 | .notion { 114 | font-size: 16px; 115 | line-height: 1.5; 116 | color: var(--fg-color); 117 | caret-color: var(--fg-color); 118 | font-family: var(--notion-font); 119 | } 120 | 121 | .notion > * { 122 | padding: 3px 0; 123 | } 124 | 125 | .notion * { 126 | margin-block-start: 0; 127 | margin-block-end: 0; 128 | } 129 | 130 | .notion *::selection { 131 | background: var(--select-color-1); 132 | } 133 | 134 | .notion *, 135 | .notion *:focus { 136 | outline: 0; 137 | } 138 | 139 | .notion-page-content { 140 | width: 100%; 141 | display: flex; 142 | flex-direction: column; 143 | } 144 | 145 | @media (min-width: 1300px) and (min-height: 300px) { 146 | .notion-page-content-has-aside { 147 | display: flex; 148 | flex-direction: row; 149 | width: calc((100vw + var(--notion-max-width)) / 2); 150 | } 151 | 152 | .notion-page-content-has-aside .notion-aside { 153 | display: flex; 154 | } 155 | 156 | .notion-page-content-has-aside .notion-page-content-inner { 157 | width: var(--notion-max-width); 158 | max-width: var(--notion-max-width); 159 | } 160 | } 161 | 162 | .notion-page-content-inner { 163 | position: relative; 164 | display: flex; 165 | flex-direction: column; 166 | align-items: flex-start; 167 | } 168 | 169 | .notion-aside { 170 | position: sticky; 171 | top: 148px; 172 | z-index: 101; 173 | /* top: calc((100vh - 48px - 100%) / 2); */ 174 | 175 | align-self: flex-start; 176 | flex: 1; 177 | 178 | display: none; 179 | flex-direction: column; 180 | align-items: center; 181 | } 182 | 183 | .notion-aside-table-of-contents { 184 | display: flex; 185 | flex-direction: column; 186 | align-items: center; 187 | max-height: calc(100vh - 148px - 16px); 188 | min-width: 222px; 189 | overflow: auto; 190 | background: var(--bg-color); 191 | border-radius: 4px; 192 | } 193 | 194 | .notion-aside-table-of-contents-header { 195 | text-transform: uppercase; 196 | font-weight: 400; 197 | font-size: 1.1em; 198 | word-break: break-word; 199 | } 200 | 201 | .notion-aside-table-of-contents .notion-table-of-contents-item { 202 | line-height: 1; 203 | } 204 | 205 | .notion-aside-table-of-contents 206 | .notion-table-of-contents-item-indent-level-0:first-of-type { 207 | margin-top: 0; 208 | } 209 | 210 | .notion-aside-table-of-contents .notion-table-of-contents-item-indent-level-0 { 211 | margin-top: 0.25em; 212 | } 213 | 214 | .notion-aside-table-of-contents .notion-table-of-contents-item-indent-level-1 { 215 | font-size: 13px; 216 | } 217 | 218 | .notion-aside-table-of-contents .notion-table-of-contents-item-indent-level-2 { 219 | font-size: 12px; 220 | } 221 | 222 | .notion-aside-table-of-contents .notion-table-of-contents-item-body { 223 | border: 0 none; 224 | } 225 | 226 | .notion-table-of-contents-active-item { 227 | color: var(--select-color-0) !important; 228 | } 229 | 230 | .notion-app { 231 | position: relative; 232 | background: var(--bg-color); 233 | min-height: 100vh; 234 | } 235 | 236 | .notion-viewport { 237 | position: relative; 238 | padding: 0px; 239 | top: 0; 240 | left: 0; 241 | right: 0; 242 | bottom: 0; 243 | } 244 | 245 | .medium-zoom-overlay { 246 | z-index: 300; 247 | } 248 | 249 | .medium-zoom-image { 250 | border-radius: 0; 251 | } 252 | 253 | .medium-zoom-image--opened { 254 | margin: unset !important; 255 | min-width: unset !important; 256 | min-height: unset !important; 257 | z-index: 301; 258 | } 259 | 260 | .notion-frame { 261 | display: flex; 262 | flex-direction: column; 263 | width: 100%; 264 | height: 100%; 265 | } 266 | 267 | .notion-page-scroller { 268 | position: relative; 269 | display: flex; 270 | flex-direction: column; 271 | flex-grow: 1; 272 | align-items: center; 273 | min-height: calc(100vh - var(--notion-header-height)); 274 | } 275 | 276 | .notion-red, 277 | .notion-red_co { 278 | color: var(--notion-red); 279 | } 280 | .notion-pink, 281 | .notion-pink_co { 282 | color: var(--notion-pink); 283 | } 284 | .notion-blue, 285 | .notion-blue_co { 286 | color: var(--notion-blue); 287 | } 288 | .notion-purple, 289 | .notion-purple_co { 290 | color: var(--notion-purple); 291 | } 292 | .notion-teal, 293 | .notion-teal_co { 294 | color: var(--notion-teal); 295 | } 296 | .notion-yellow, 297 | .notion-yellow_co { 298 | color: var(--notion-yellow); 299 | } 300 | .notion-orange, 301 | .notion-orange_co { 302 | color: var(--notion-orange); 303 | } 304 | .notion-brown, 305 | .notion-brown_co { 306 | color: var(--notion-brown); 307 | } 308 | .notion-gray, 309 | .notion-gray_co { 310 | color: var(--notion-gray); 311 | } 312 | .notion-red_background { 313 | background-color: var(--notion-red_background); 314 | } 315 | .notion-pink_background { 316 | background-color: var(--notion-pink_background); 317 | } 318 | .notion-blue_background { 319 | background-color: var(--notion-blue_background); 320 | } 321 | .notion-purple_background { 322 | background-color: var(--notion-purple_background); 323 | } 324 | .notion-teal_background { 325 | background-color: var(--notion-teal_background); 326 | } 327 | .notion-yellow_background { 328 | background-color: var(--notion-yellow_background); 329 | } 330 | .notion-orange_background { 331 | background-color: var(--notion-orange_background); 332 | } 333 | .notion-brown_background { 334 | background-color: var(--notion-brown_background); 335 | } 336 | .notion-gray_background { 337 | background-color: var(--notion-gray_background); 338 | } 339 | .notion-red_background_co { 340 | background-color: var(--notion-red_background_co); 341 | } 342 | .notion-pink_background_co { 343 | background-color: var(--notion-pink_background_co); 344 | } 345 | .notion-blue_background_co { 346 | background-color: var(--notion-blue_background_co); 347 | } 348 | .notion-purple_background_co { 349 | background-color: var(--notion-purple_background_co); 350 | } 351 | .notion-teal_background_co { 352 | background-color: var(--notion-teal_background_co); 353 | } 354 | .notion-yellow_background_co { 355 | background-color: var(--notion-yellow_background_co); 356 | } 357 | .notion-orange_background_co { 358 | background-color: var(--notion-orange_background_co); 359 | } 360 | .notion-brown_background_co { 361 | background-color: var(--notion-brown_background_co); 362 | } 363 | .notion-gray_background_co { 364 | background-color: var(--notion-gray_background_co); 365 | } 366 | 367 | .notion-item-blue { 368 | background-color: var(--notion-item-blue); 369 | } 370 | .notion-item-orange { 371 | background-color: var(--notion-item-orange); 372 | } 373 | .notion-item-green { 374 | background-color: var(--notion-item-green); 375 | } 376 | .notion-item-pink { 377 | background-color: var(--notion-item-pink); 378 | } 379 | .notion-item-brown { 380 | background-color: var(--notion-item-brown); 381 | } 382 | .notion-item-red { 383 | background-color: var(--notion-item-red); 384 | } 385 | .notion-item-yellow { 386 | background-color: var(--notion-item-yellow); 387 | } 388 | .notion-item-default { 389 | background-color: var(--notion-item-default); 390 | } 391 | .notion-item-purple { 392 | background-color: var(--notion-item-purple); 393 | } 394 | .notion-item-gray { 395 | background-color: var(--notion-item-gray); 396 | } 397 | 398 | .notion b { 399 | font-weight: 600; 400 | } 401 | 402 | .notion-title { 403 | width: 100%; 404 | font-size: 2.5em; 405 | font-weight: 700; 406 | margin-bottom: 20px; 407 | line-height: 1.2; 408 | } 409 | 410 | .notion-h { 411 | position: relative; 412 | display: inline-block; 413 | 414 | font-weight: 600; 415 | line-height: 1.3; 416 | padding: 3px 2px; 417 | margin-bottom: 1px; 418 | 419 | max-width: 100%; 420 | white-space: pre-wrap; 421 | word-break: break-word; 422 | } 423 | 424 | .notion-h1 { 425 | font-size: 1.875em; 426 | margin-top: 1.08em; 427 | } 428 | 429 | .notion-header-anchor { 430 | position: absolute; 431 | top: -54px; 432 | left: 0; 433 | } 434 | 435 | .notion-title + .notion-h1, 436 | .notion-title + .notion-h2, 437 | .notion-title + .notion-h3 { 438 | margin-top: 0; 439 | } 440 | /* TODO: notion-page-content */ 441 | .notion-h1:first-child { 442 | margin-top: 0; 443 | } 444 | /* .notion-h1:first-of-type { 445 | margin-top: 2px; 446 | } */ 447 | .notion-h2 { 448 | font-size: 1.5em; 449 | margin-top: 1.1em; 450 | } 451 | .notion-h3 { 452 | font-size: 1.25em; 453 | margin-top: 1em; 454 | } 455 | 456 | .notion-h:hover .notion-hash-link { 457 | opacity: 1; 458 | } 459 | 460 | .notion-hash-link { 461 | opacity: 0; 462 | text-decoration: none; 463 | float: left; 464 | margin-left: -20px; 465 | padding-right: 4px; 466 | fill: var(--fg-color-icon); 467 | } 468 | 469 | .notion-page-cover { 470 | display: block; 471 | object-fit: cover; 472 | width: 100%; 473 | height: 30vh !important; 474 | min-height: 30vh !important; 475 | max-height: 30vh !important; 476 | padding: 0; 477 | } 478 | 479 | .notion-page-cover-wrapper { 480 | width: 100%; 481 | height: 30vh; 482 | min-height: 30vh; 483 | max-height: 30vh; 484 | display: flex; 485 | justify-content: center; 486 | align-items: center; 487 | } 488 | 489 | .notion-collection-card-cover { 490 | overflow: hidden; 491 | } 492 | 493 | .notion-collection-card-cover span, 494 | .notion-collection-card-cover img { 495 | min-height: 100% !important; 496 | max-height: 100% !important; 497 | } 498 | 499 | .notion-page-cover-wrapper span, 500 | .notion-page-cover-wrapper img { 501 | width: 100% !important; 502 | height: 30vh !important; 503 | min-height: 30vh !important; 504 | max-height: 30vh !important; 505 | } 506 | 507 | .notion-page { 508 | position: relative; 509 | padding: 0; 510 | margin: 0 auto; 511 | display: flex; 512 | flex-direction: column; 513 | flex-grow: 1; 514 | flex-shrink: 0; 515 | align-items: flex-start; 516 | width: 100%; 517 | max-width: 100%; 518 | } 519 | 520 | .notion-full-page { 521 | padding-bottom: calc(max(10vh, 120px)); 522 | } 523 | 524 | .notion-page-no-cover { 525 | margin-top: 48px !important; 526 | padding-top: 96px; 527 | } 528 | 529 | .notion-page-no-cover.notion-page-no-icon { 530 | padding-top: 0; 531 | } 532 | 533 | .notion-page-no-cover.notion-page-has-image-icon { 534 | padding-top: 148px; 535 | } 536 | 537 | .notion-page-has-cover.notion-page-no-icon { 538 | padding-top: 48px; 539 | } 540 | 541 | .notion-page-has-cover { 542 | padding-top: 96px; 543 | } 544 | 545 | .notion-page-has-cover.notion-page-has-text-icon { 546 | padding-top: 64px; 547 | } 548 | 549 | .notion-page-icon-hero { 550 | position: absolute; 551 | top: 0; 552 | left: 50%; 553 | display: flex; 554 | flex-direction: row; 555 | justify-content: center; 556 | } 557 | 558 | .notion-page-icon-hero.notion-page-icon-image { 559 | width: 124px; 560 | height: 124px; 561 | margin-left: -62px; 562 | } 563 | 564 | .notion-page-icon-hero.notion-page-icon-span { 565 | height: 78px; 566 | width: 78px; 567 | margin-left: -39px; 568 | } 569 | 570 | .notion-page-icon-hero .notion-page-icon { 571 | position: relative; 572 | display: block; 573 | } 574 | 575 | .notion-page-has-cover .notion-page-icon-hero.notion-page-icon-image { 576 | top: -62px; 577 | } 578 | 579 | .notion-page-has-cover .notion-page-icon-hero.notion-page-icon-span { 580 | top: -42px; 581 | } 582 | 583 | .notion-page-icon-hero.notion-page-icon-span .notion-page-icon { 584 | font-size: 78px; 585 | line-height: 1.1; 586 | margin-left: 0; 587 | color: var(--fg-color-icon); 588 | } 589 | 590 | .notion-page-icon-hero.notion-page-icon-image .notion-page-icon { 591 | display: block; 592 | border-radius: 3px; 593 | width: 100%; 594 | height: 100%; 595 | max-width: 100%; 596 | max-height: 100%; 597 | } 598 | 599 | .notion-page-icon-hero.notion-page-icon-image img { 600 | object-fit: cover; 601 | } 602 | 603 | .notion-page-icon { 604 | font-family: 'Apple Color Emoji', 'Segoe UI Emoji', NotoColorEmoji, 605 | 'Noto Color Emoji', 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols; 606 | font-size: 1.1em; 607 | fill: var(--fg-color-6); 608 | color: var(--fg-color-icon); 609 | } 610 | 611 | .notion-search .notion-page-icon { 612 | fill: rgba(55, 53, 47, 0.8); 613 | color: rgb(55, 53, 47); 614 | } 615 | 616 | img.notion-page-icon, 617 | svg.notion-page-icon { 618 | display: block; 619 | object-fit: fill; 620 | border-radius: 3px; 621 | max-width: 100%; 622 | max-height: 100%; 623 | } 624 | 625 | .notion-page-icon-inline { 626 | width: 22px; 627 | height: 22px; 628 | max-width: 22px; 629 | max-height: 22px; 630 | margin: 0 4px; 631 | } 632 | 633 | .notion-page-icon-inline span { 634 | max-width: 100%; 635 | max-height: 100%; 636 | } 637 | 638 | .notion-page-icon-inline img { 639 | object-fit: cover; 640 | } 641 | 642 | .notion-page { 643 | width: var(--notion-max-width); 644 | padding-left: calc(min(16px, 8vw)); 645 | padding-right: calc(min(16px, 8vw)); 646 | } 647 | 648 | .notion-full-width { 649 | --notion-max-width: calc(min(1920px, 98vw)); 650 | padding-left: calc(min(96px, 8vw)); 651 | padding-right: calc(min(96px, 8vw)); 652 | } 653 | 654 | .notion-small-text { 655 | font-size: 14px; 656 | } 657 | 658 | .notion-quote { 659 | display: block; 660 | width: 100%; 661 | white-space: pre-wrap; 662 | word-break: break-word; 663 | border-left: 3px solid currentcolor; 664 | padding: 0.2em 0.9em; 665 | margin: 6px 0; 666 | font-size: 1.2em; 667 | } 668 | 669 | .notion-hr { 670 | width: 100%; 671 | margin: 6px 0; 672 | padding: 0; 673 | border-top: none; 674 | border-color: var(--fg-color-0); 675 | } 676 | 677 | .notion-link { 678 | color: inherit; 679 | word-break: break-word; 680 | text-decoration: inherit; 681 | border-bottom: 0.05em solid; 682 | border-color: var(--fg-color-2); 683 | opacity: 0.7; 684 | transition: border-color 100ms ease-in, opacity 100ms ease-in; 685 | } 686 | 687 | .notion-link:hover { 688 | border-color: var(--fg-color-6); 689 | opacity: 1; 690 | } 691 | 692 | .notion-collection .notion-link { 693 | opacity: 1; 694 | } 695 | 696 | .notion-blank { 697 | width: 100%; 698 | min-height: 1rem; 699 | padding: 3px 2px; 700 | margin-top: 1px; 701 | margin-bottom: 1px; 702 | } 703 | 704 | .notion-page-link { 705 | display: flex; 706 | color: var(--fg-color); 707 | text-decoration: none; 708 | width: 100%; 709 | height: 30px; 710 | margin: 1px 0; 711 | transition: background 120ms ease-in 0s; 712 | } 713 | 714 | .notion-page-link:hover { 715 | background: var(--bg-color-0); 716 | } 717 | 718 | .notion-collection-card .notion-page-link { 719 | height: unset; 720 | margin: 0; 721 | transition: unset; 722 | } 723 | .notion-collection-card .notion-page-link { 724 | background: unset; 725 | } 726 | 727 | .notion-icon { 728 | display: block; 729 | width: 18px; 730 | height: 18px; 731 | color: var(--fg-color-icon); 732 | } 733 | 734 | .notion-page-text { 735 | white-space: nowrap; 736 | overflow: hidden; 737 | text-overflow: ellipsis; 738 | font-weight: 500; 739 | line-height: 1.3; 740 | border-bottom: 1px solid var(--fg-color-1); 741 | margin: 4px 0; 742 | } 743 | 744 | .notion-inline-code { 745 | color: #eb5757; 746 | padding: 0.2em 0.4em; 747 | background: var(--bg-color-2); 748 | border-radius: 3px; 749 | font-size: 85%; 750 | font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, 751 | monospace; 752 | } 753 | 754 | .notion-inline-underscore { 755 | text-decoration: underline; 756 | } 757 | 758 | .notion-list { 759 | margin: 0; 760 | margin-block-start: 0.6em; 761 | margin-block-end: 0.6em; 762 | } 763 | 764 | .notion-list-disc { 765 | list-style-type: disc; 766 | padding-inline-start: 1.7em; 767 | margin-top: 0; 768 | margin-bottom: 0; 769 | } 770 | .notion-list-numbered { 771 | list-style-type: decimal; 772 | padding-inline-start: 1.6em; 773 | margin-top: 0; 774 | margin-bottom: 0; 775 | } 776 | 777 | .notion-list-disc li { 778 | padding-left: 0.1em; 779 | } 780 | 781 | .notion-list-numbered li { 782 | padding-left: 0.2em; 783 | } 784 | 785 | .notion-list li { 786 | padding: 6px 0; 787 | white-space: pre-wrap; 788 | } 789 | 790 | .notion-asset-wrapper { 791 | margin: 0.5rem 0; 792 | max-width: 100vw; 793 | min-width: 100%; 794 | align-self: center; 795 | display: flex; 796 | flex-direction: column; 797 | } 798 | 799 | .notion-asset-wrapper-image { 800 | max-width: 100%; 801 | } 802 | 803 | .notion-asset-wrapper-full { 804 | max-width: 100vw; 805 | } 806 | 807 | .notion-asset-wrapper img { 808 | width: 100%; 809 | height: 100%; 810 | max-height: 100%; 811 | } 812 | 813 | .notion-asset-wrapper iframe { 814 | border: none; 815 | background: rgb(247, 246, 245); 816 | } 817 | 818 | .notion-text { 819 | width: 100%; 820 | white-space: pre-wrap; 821 | word-break: break-word; 822 | padding: 3px 2px; 823 | margin: 1px 0; 824 | } 825 | 826 | .notion-text:first-child { 827 | margin-top: 2px; 828 | } 829 | 830 | .notion-text-children { 831 | padding-left: 1.5em; 832 | display: flex; 833 | flex-direction: column; 834 | } 835 | 836 | .notion-block { 837 | padding: 3px 2px; 838 | } 839 | 840 | .notion .notion-code { 841 | font-size: 85%; 842 | } 843 | 844 | .notion-code { 845 | position: relative; 846 | width: 100%; 847 | padding: 1em; 848 | margin: 4px 0; 849 | border-radius: 3px; 850 | tab-size: 2; 851 | display: block; 852 | box-sizing: border-box; 853 | overflow: auto; 854 | background: var(--bg-color-1); 855 | font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, 856 | monospace; 857 | } 858 | 859 | .notion-code-copy { 860 | position: absolute; 861 | top: 1em; 862 | right: 1em; 863 | /* user-select: none; */ 864 | z-index: 9; 865 | transition: opacity 0.2s cubic-bezier(0.3, 0, 0.5, 1); 866 | } 867 | 868 | .notion-code-copy-button { 869 | display: inline-block; 870 | padding: 0.6em; 871 | font-size: 1.25em; 872 | line-height: 1em; 873 | cursor: pointer; 874 | 875 | transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1), 876 | color 0.2s cubic-bezier(0.3, 0, 0.5, 1), 877 | border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); 878 | box-shadow: 0 1px 0 rgba(27, 31, 36, 0.04), 879 | inset 0 1px 0 rgba(255, 255, 255, 0.25); 880 | background-color: #f6f8fa; 881 | 882 | color: #24292f; 883 | border: 1px solid rgba(27, 31, 36, 0.15); 884 | border-radius: 6px; 885 | } 886 | 887 | .notion-code-copy-button:hover { 888 | background-color: #f3f4f6; 889 | border-color: rgba(27, 31, 36, 0.15); 890 | transition-duration: 0.1s; 891 | } 892 | 893 | .notion-code-copy-button:active { 894 | background: hsla(220, 14%, 93%, 1); 895 | border-color: rgba(27, 31, 36, 0.15); 896 | transition: none; 897 | } 898 | 899 | .notion-code .notion-code-copy { 900 | opacity: 0; 901 | } 902 | 903 | .notion-code:hover .notion-code-copy { 904 | opacity: 1; 905 | } 906 | 907 | .notion-code-copy-button svg { 908 | display: block; 909 | } 910 | 911 | .notion-code-copy-tooltip { 912 | pointer-events: none; 913 | position: absolute; 914 | bottom: -38px; 915 | left: 0; 916 | width: 100%; 917 | display: flex; 918 | flex-direction: row; 919 | justify-content: center; 920 | z-index: 99; 921 | font-size: 14px; 922 | } 923 | 924 | .notion-code-copy-tooltip > div { 925 | padding: 6px 8px; 926 | background: #222; 927 | color: #fff; 928 | border-radius: 6px; 929 | } 930 | 931 | .notion-column { 932 | display: flex; 933 | flex-direction: column; 934 | padding-top: 12px; 935 | padding-bottom: 12px; 936 | } 937 | 938 | .notion-column > *:first-child { 939 | margin-top: 0; 940 | margin-left: 0; 941 | margin-right: 0; 942 | } 943 | 944 | .notion-column > *:last-child { 945 | margin-left: 0; 946 | margin-right: 0; 947 | margin-bottom: 0; 948 | } 949 | 950 | .notion-row { 951 | display: flex; 952 | overflow: hidden; 953 | width: 100%; 954 | max-width: 100%; 955 | } 956 | 957 | @media (max-width: 640px) { 958 | .notion-row { 959 | flex-direction: column; 960 | } 961 | 962 | .notion-row .notion-column { 963 | width: 100% !important; 964 | } 965 | 966 | .notion-row .notion-spacer { 967 | display: none; 968 | } 969 | } 970 | 971 | .notion-bookmark { 972 | margin: 4px 0; 973 | width: 100%; 974 | box-sizing: border-box; 975 | text-decoration: none; 976 | border: 1px solid var(--fg-color-1); 977 | border-radius: 3px; 978 | display: flex; 979 | overflow: hidden; 980 | /* user-select: none; */ 981 | } 982 | 983 | .dark-mode .notion-bookmark { 984 | border-color: var(--bg-color-0); 985 | } 986 | 987 | .notion-bookmark > div:first-child { 988 | flex: 4 1 180px; 989 | padding: 12px 14px 14px; 990 | overflow: hidden; 991 | text-align: left; 992 | color: var(--fg-color); 993 | } 994 | 995 | .notion-bookmark-title { 996 | font-size: 14px; 997 | line-height: 20px; 998 | white-space: nowrap; 999 | overflow: hidden; 1000 | text-overflow: ellipsis; 1001 | min-height: 24px; 1002 | margin-bottom: 2px; 1003 | } 1004 | 1005 | .notion-bookmark-description { 1006 | font-size: 12px; 1007 | line-height: 16px; 1008 | opacity: 0.8; 1009 | height: 32px; 1010 | overflow: hidden; 1011 | } 1012 | 1013 | .notion-bookmark-link { 1014 | display: flex; 1015 | margin-top: 6px; 1016 | } 1017 | 1018 | .notion-bookmark-link-icon { 1019 | width: 16px; 1020 | height: 16px; 1021 | min-width: 16px; 1022 | margin-right: 6px; 1023 | } 1024 | 1025 | .notion-bookmark-link-text { 1026 | font-size: 12px; 1027 | line-height: 16px; 1028 | color: var(--fg-color); 1029 | white-space: nowrap; 1030 | overflow: hidden; 1031 | text-overflow: ellipsis; 1032 | } 1033 | 1034 | .notion-bookmark-link-icon img { 1035 | max-width: 100%; 1036 | max-height: 100%; 1037 | } 1038 | 1039 | .notion-bookmark-image { 1040 | flex: 1 1 180px; 1041 | position: relative; 1042 | } 1043 | 1044 | .notion-bookmark-image > * { 1045 | position: absolute !important; 1046 | width: 100%; 1047 | height: 100%; 1048 | } 1049 | 1050 | .notion-column .notion-bookmark-image { 1051 | display: none; 1052 | } 1053 | 1054 | .notion-spacer { 1055 | width: calc(min(32px, 4vw)); 1056 | } 1057 | 1058 | .notion-spacer:last-child { 1059 | display: none; 1060 | } 1061 | 1062 | .notion-asset-object-fit { 1063 | position: absolute; 1064 | left: 0; 1065 | top: 0; 1066 | right: 0; 1067 | bottom: 0; 1068 | width: 100%; 1069 | height: 100%; 1070 | border-radius: 1px; 1071 | } 1072 | 1073 | .notion-image { 1074 | display: block; 1075 | width: 100%; 1076 | border-radius: 1px; 1077 | } 1078 | 1079 | .notion-asset-caption { 1080 | padding: 6px 0 6px 2px; 1081 | white-space: pre-wrap; 1082 | word-break: break-word; 1083 | caret-color: var(--fg-color); 1084 | font-size: 14px; 1085 | line-height: 1.4; 1086 | color: var(--fg-color-3); 1087 | } 1088 | 1089 | .notion-callout { 1090 | padding: 16px 16px 16px 12px; 1091 | display: inline-flex; 1092 | width: 100%; 1093 | border-radius: 3px; 1094 | border-width: 1px; 1095 | align-items: center; 1096 | box-sizing: border-box; 1097 | margin: 4px 0; 1098 | border: 1px solid var(--fg-color-0); 1099 | } 1100 | 1101 | .dark-mode .notion-callout { 1102 | border-color: var(--bg-color-2); 1103 | } 1104 | 1105 | .notion-callout .notion-page-icon-inline { 1106 | align-self: flex-start; 1107 | width: 24px; 1108 | height: 24px; 1109 | line-height: 24px; 1110 | font-size: 1.3em; 1111 | } 1112 | 1113 | .notion-callout-text { 1114 | margin-left: 8px; 1115 | white-space: pre-wrap; 1116 | word-break: break-word; 1117 | width: 100%; 1118 | } 1119 | 1120 | .notion-toggle { 1121 | padding: 3px 2px; 1122 | } 1123 | .notion-toggle > summary { 1124 | cursor: pointer; 1125 | outline: none; 1126 | } 1127 | .notion-toggle > div { 1128 | margin-left: 1.1em; 1129 | } 1130 | 1131 | .notion-collection { 1132 | align-self: center; 1133 | min-width: 100%; 1134 | } 1135 | 1136 | .notion-collection-header { 1137 | display: flex; 1138 | align-items: center; 1139 | height: 42px; 1140 | padding: 4px 2px; 1141 | white-space: nowrap; 1142 | overflow: hidden; 1143 | } 1144 | 1145 | .notion-collection-header-title { 1146 | display: inline-flex; 1147 | align-items: center; 1148 | font-size: 1.25em; 1149 | line-height: 1.2; 1150 | font-weight: 600; 1151 | white-space: pre-wrap; 1152 | word-break: break-word; 1153 | margin-right: 0.5em; 1154 | } 1155 | 1156 | .notion-collection-view-dropdown { 1157 | cursor: pointer; 1158 | padding: 6px 8px; 1159 | border: 0 none; 1160 | border-radius: 3px; 1161 | transition: background 120ms ease-in 0s; 1162 | background: transparent; 1163 | } 1164 | 1165 | .notion-collection-view-dropdown:hover { 1166 | background: var(--bg-color-0); 1167 | } 1168 | 1169 | .notion-collection-view-dropdown-icon { 1170 | position: relative; 1171 | top: 2px; 1172 | margin-left: 4px; 1173 | } 1174 | 1175 | .notion-collection-view-type { 1176 | display: flex; 1177 | align-items: center; 1178 | font-size: 14px; 1179 | } 1180 | 1181 | .notion-collection-view-type-icon { 1182 | display: inline-block; 1183 | width: 14px; 1184 | height: 14px; 1185 | /* fill: var(--fg-color); */ 1186 | fill: rgba(55, 53, 47); 1187 | margin-right: 6px; 1188 | } 1189 | 1190 | .notion-collection-view-type-title { 1191 | white-space: nowrap; 1192 | overflow: hidden; 1193 | text-overflow: ellipsis; 1194 | color: var(--fg-color); 1195 | } 1196 | 1197 | .notion-table { 1198 | width: 100vw; 1199 | max-width: 100vw; 1200 | align-self: center; 1201 | overflow: auto hidden; 1202 | } 1203 | 1204 | .notion-table-view { 1205 | position: relative; 1206 | float: left; 1207 | min-width: var(--notion-max-width); 1208 | padding-left: 0; 1209 | transition: padding 200ms ease-out; 1210 | } 1211 | 1212 | .notion-table-header { 1213 | display: flex; 1214 | position: absolute; 1215 | z-index: 82; 1216 | height: 33px; 1217 | color: var(--fg-color-3); 1218 | min-width: var(--notion-max-width); 1219 | } 1220 | 1221 | .notion-table-header-inner { 1222 | width: 100%; 1223 | display: inline-flex; 1224 | border-top: 1px solid var(--fg-color-1); 1225 | border-bottom: 1px solid var(--fg-color-1); 1226 | /* box-shadow: white -3px 0 0, rgba(55, 53, 47, 0.16) 0 1px 0; */ 1227 | } 1228 | 1229 | .notion-table-header-placeholder { 1230 | height: 34px; 1231 | } 1232 | 1233 | .notion-table-th { 1234 | display: flex; 1235 | position: relative; 1236 | } 1237 | 1238 | .notion-table-view-header-cell { 1239 | display: flex; 1240 | flex-shrink: 0; 1241 | overflow: hidden; 1242 | height: 32px; 1243 | font-size: 14px; 1244 | padding: 0; 1245 | } 1246 | 1247 | .notion-table-view-header-cell-inner { 1248 | /* user-select: none; */ 1249 | display: flex; 1250 | width: 100%; 1251 | height: 100%; 1252 | padding-left: 8px; 1253 | padding-right: 8px; 1254 | border-right: 1px solid var(--fg-color-0); 1255 | } 1256 | 1257 | .notion-table-th:last-child .notion-table-view-header-cell-inner { 1258 | border-right: 0 none; 1259 | } 1260 | 1261 | .notion-collection-column-title { 1262 | display: flex; 1263 | align-items: center; 1264 | line-height: 120%; 1265 | min-width: 0; 1266 | font-size: 14px; 1267 | } 1268 | 1269 | .notion-collection-column-title-icon { 1270 | display: inline-block; 1271 | width: 14px; 1272 | height: 14px; 1273 | min-width: 14px; 1274 | min-height: 14px; 1275 | fill: var(--fg-color-2); 1276 | margin-right: 6px; 1277 | } 1278 | 1279 | .notion-collection-column-title-body { 1280 | white-space: nowrap; 1281 | overflow: hidden; 1282 | text-overflow: ellipsis; 1283 | } 1284 | 1285 | .notion-table-body { 1286 | position: relative; 1287 | min-width: var(--notion-max-width); 1288 | } 1289 | 1290 | .notion-table-row { 1291 | display: flex; 1292 | border-bottom: 1px solid var(--fg-color-1); 1293 | } 1294 | 1295 | .notion-table-cell { 1296 | min-height: 32px; 1297 | padding: 5px 8px 6px; 1298 | font-size: 14px; 1299 | line-height: 1; 1300 | white-space: normal; 1301 | overflow: hidden; 1302 | word-break: break-word; 1303 | border-right: 1px solid var(--fg-color-1); 1304 | } 1305 | 1306 | .notion-table-cell:last-child { 1307 | border-right: 0 none; 1308 | } 1309 | 1310 | .notion-table-cell-title { 1311 | font-weight: 500; 1312 | } 1313 | 1314 | .notion-table-cell-text { 1315 | white-space: pre-wrap; 1316 | } 1317 | 1318 | .notion-table-cell-text, 1319 | .notion-table-cell-number, 1320 | .notion-table-cell-url, 1321 | .notion-table-cell-email, 1322 | .notion-table-cell-phone_number { 1323 | line-height: 1.5; 1324 | } 1325 | 1326 | .notion-table-cell-number { 1327 | white-space: pre-wrap; 1328 | } 1329 | 1330 | .notion-table-cell-select, 1331 | .notion-table-cell-multi_select { 1332 | padding: 7px 8px 0; 1333 | } 1334 | 1335 | .notion-property-select, 1336 | .notion-property-multi_select { 1337 | display: flex; 1338 | flex-wrap: wrap; 1339 | gap: 6px; 1340 | } 1341 | 1342 | .notion-property-select-item, 1343 | .notion-property-multi_select-item { 1344 | display: flex; 1345 | align-items: center; 1346 | padding: 0 6px; 1347 | border-radius: 3px; 1348 | height: 18px; 1349 | white-space: nowrap; 1350 | overflow: hidden; 1351 | text-overflow: ellipsis; 1352 | line-height: 120%; 1353 | } 1354 | 1355 | .notion-property-file { 1356 | display: flex; 1357 | flex-wrap: wrap; 1358 | align-content: flex-start; 1359 | } 1360 | 1361 | .notion-property-file img { 1362 | max-height: 24px; 1363 | max-width: 100%; 1364 | margin-right: 6px; 1365 | } 1366 | 1367 | .notion-collection-card-cover .notion-property-file { 1368 | height: 100%; 1369 | } 1370 | 1371 | .notion-collection-card-cover .notion-property-file img { 1372 | width: 100%; 1373 | margin: 0; 1374 | max-height: 100%; 1375 | } 1376 | 1377 | .notion-collection-card .notion-property-checkbox-container { 1378 | display: flex; 1379 | } 1380 | 1381 | .notion-property-checkbox-text { 1382 | display: none; 1383 | } 1384 | 1385 | .notion-collection-card .notion-property-checkbox-text { 1386 | display: inline-block; 1387 | margin-left: 6px; 1388 | } 1389 | 1390 | .notion-property-checkbox { 1391 | width: 16px; 1392 | height: 16px; 1393 | } 1394 | 1395 | .notion-property-checkbox-checked { 1396 | width: 16px; 1397 | height: 16px; 1398 | background: var(--select-color-0); 1399 | } 1400 | 1401 | .notion-property-checkbox-checked svg { 1402 | position: relative; 1403 | display: block; 1404 | /* top: -3px; */ 1405 | top: 1px; 1406 | left: 1px; 1407 | width: 14px; 1408 | height: 14px; 1409 | fill: #fff; 1410 | } 1411 | 1412 | .notion-property-checkbox-unchecked { 1413 | width: 16px; 1414 | height: 16px; 1415 | border: 1.3px solid var(--fg-color); 1416 | } 1417 | 1418 | .notion-gallery { 1419 | align-self: center; 1420 | } 1421 | 1422 | .notion-gallery-view { 1423 | position: relative; 1424 | padding-left: 0; 1425 | transition: padding 200ms ease-out; 1426 | } 1427 | 1428 | .notion-gallery-grid { 1429 | display: grid; 1430 | position: relative; 1431 | grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 1432 | grid-auto-rows: 1fr; 1433 | gap: 16px; 1434 | border-top: 1px solid var(--fg-color-1); 1435 | padding-top: 16px; 1436 | padding-bottom: 4px; 1437 | } 1438 | 1439 | .notion-gallery-grid-size-small { 1440 | grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 1441 | } 1442 | 1443 | .notion-gallery-grid-size-large { 1444 | grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 1445 | } 1446 | 1447 | .notion-collection-card { 1448 | display: flex; 1449 | flex-direction: column; 1450 | overflow: hidden; 1451 | 1452 | text-decoration: none; 1453 | box-shadow: rgba(15, 15, 15, 0.1) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 2px 4px; 1454 | border-radius: 3px; 1455 | background: var(--bg-color); 1456 | color: var(--fg-color); 1457 | transition: background 100ms ease-out 0s; 1458 | 1459 | /* user-select: none; */ 1460 | cursor: pointer; 1461 | } 1462 | 1463 | .notion-collection-card:hover { 1464 | background: var(--bg-color-0); 1465 | } 1466 | 1467 | .notion-collection-card-cover { 1468 | position: relative; 1469 | width: 100%; 1470 | height: 190px; 1471 | border-bottom: 1px solid var(--fg-color-0); 1472 | overflow: hidden; 1473 | } 1474 | 1475 | .notion-collection-card-cover img { 1476 | width: 100%; 1477 | height: 100%; 1478 | border-radius: 1px 1px 0 0; 1479 | /* object-fit: cover; */ 1480 | } 1481 | 1482 | .notion-collection-card-cover .notion-collection-card-cover-empty { 1483 | width: 100%; 1484 | height: 100%; 1485 | pointer-events: none; 1486 | overflow: hidden; 1487 | background: var(--fg-color-5); 1488 | box-shadow: var(--fg-color-0) 0 -1px 0 0 inset; 1489 | padding: 8px 8px 0; 1490 | } 1491 | 1492 | .notion-collection-card-size-small .notion-collection-card-cover { 1493 | height: 124px; 1494 | } 1495 | 1496 | .notion-collection-card-body { 1497 | display: flex; 1498 | flex-direction: column; 1499 | padding: 4px 10px; 1500 | } 1501 | 1502 | .notion-collection-card-property { 1503 | padding: 4px 0; 1504 | white-space: nowrap; 1505 | word-break: break-word; 1506 | overflow: hidden; 1507 | text-overflow: ellipsis; 1508 | font-size: 12px; 1509 | } 1510 | 1511 | .notion-collection-card-property:first-child { 1512 | font-size: 14px; 1513 | font-weight: 500; 1514 | } 1515 | 1516 | .notion-collection-card-property:not(:first-child) { 1517 | white-space: nowrap; 1518 | text-overflow: clip; 1519 | } 1520 | 1521 | .notion-collection-card-property img { 1522 | max-height: 18px; 1523 | } 1524 | 1525 | .notion-list-collection { 1526 | align-self: center; 1527 | } 1528 | 1529 | .notion-list-collection { 1530 | width: 100%; 1531 | max-width: 100%; 1532 | } 1533 | 1534 | .notion-list-view { 1535 | position: relative; 1536 | padding-left: 0; 1537 | transition: padding 200ms ease-out; 1538 | max-width: 100%; 1539 | } 1540 | 1541 | .notion-list-body { 1542 | display: flex; 1543 | flex-direction: column; 1544 | border-top: 1px solid var(--fg-color-1); 1545 | padding-top: 8px; 1546 | max-width: 100%; 1547 | overflow: hidden; 1548 | } 1549 | 1550 | .notion-list-item { 1551 | display: flex; 1552 | justify-content: space-between; 1553 | align-items: center; 1554 | padding: 0 4px; 1555 | margin: 1px 0; 1556 | max-width: 100%; 1557 | overflow: hidden; 1558 | } 1559 | 1560 | .notion-list-item-title { 1561 | white-space: nowrap; 1562 | overflow: hidden; 1563 | text-overflow: ellipsis; 1564 | font-weight: 500; 1565 | line-height: 1.3; 1566 | } 1567 | 1568 | .notion-list-item-body { 1569 | display: flex; 1570 | align-items: center; 1571 | flex-wrap: nowrap; 1572 | overflow: hidden; 1573 | } 1574 | 1575 | .notion-list-item-property { 1576 | /* display: flex; 1577 | align-items: center; */ 1578 | margin-left: 14px; 1579 | font-size: 14px; 1580 | } 1581 | 1582 | .notion-list-item-property .notion-property-date, 1583 | .notion-list-item-property .notion-property-created_time, 1584 | .notion-list-item-property .notion-property-last_edited_time, 1585 | .notion-list-item-property .notion-property-url { 1586 | display: inline-block; 1587 | color: var(--fg-color-3); 1588 | font-size: 12px; 1589 | /* white-space: nowrap; */ 1590 | overflow: hidden; 1591 | text-overflow: ellipsis; 1592 | } 1593 | 1594 | .notion-board { 1595 | width: 100vw; 1596 | max-width: 100vw; 1597 | align-self: center; 1598 | overflow: auto hidden; 1599 | } 1600 | 1601 | .notion-board-view { 1602 | position: relative; 1603 | float: left; 1604 | min-width: 100%; 1605 | padding-left: 0; 1606 | transition: padding 200ms ease-out; 1607 | } 1608 | 1609 | .notion-board-header { 1610 | display: flex; 1611 | position: absolute; 1612 | z-index: 82; 1613 | height: 44px; 1614 | min-width: 100%; 1615 | } 1616 | 1617 | .notion-board-header-inner { 1618 | display: inline-flex; 1619 | border-top: 1px solid var(--fg-color-1); 1620 | border-bottom: 1px solid var(--fg-color-1); 1621 | } 1622 | 1623 | .notion-board-header-placeholder { 1624 | height: var(--notion-header-height); 1625 | } 1626 | 1627 | .notion-board-th { 1628 | display: flex; 1629 | align-items: center; 1630 | font-size: 14px; 1631 | padding-right: 16px; 1632 | box-sizing: content-box; 1633 | flex-shrink: 0; 1634 | } 1635 | 1636 | .notion-board-th-body { 1637 | display: flex; 1638 | align-items: center; 1639 | font-size: 14px; 1640 | line-height: 1.2; 1641 | padding-left: 2px; 1642 | padding-right: 4px; 1643 | white-space: nowrap; 1644 | overflow: hidden; 1645 | } 1646 | 1647 | .notion-board-th-count { 1648 | color: var(--fg-color-3); 1649 | font-weight: 500; 1650 | padding: 0 8px; 1651 | } 1652 | 1653 | .notion-board-th-empty { 1654 | margin-right: 4px; 1655 | position: relative; 1656 | top: 2px; 1657 | } 1658 | 1659 | .notion-board-body { 1660 | display: inline-flex; 1661 | } 1662 | 1663 | .notion-board-group { 1664 | flex: 0 0 auto; 1665 | padding-right: 16px; 1666 | box-sizing: content-box; 1667 | } 1668 | 1669 | .notion-board-group-card { 1670 | margin-bottom: 8px; 1671 | } 1672 | 1673 | .notion-board-view .notion-board-th, 1674 | .notion-board-view .notion-board-group { 1675 | width: 260px; 1676 | } 1677 | 1678 | .notion-board-view-size-small .notion-board-th, 1679 | .notion-board-view-size-small .notion-board-group { 1680 | width: 180px; 1681 | } 1682 | 1683 | .notion-board-view-size-large .notion-board-th, 1684 | .notion-board-view-size-large .notion-board-group { 1685 | width: 320px; 1686 | } 1687 | 1688 | .notion-board-view .notion-collection-card .notion-collection-card-cover { 1689 | height: 148px; 1690 | } 1691 | 1692 | .notion-board-view-size-small 1693 | .notion-collection-card 1694 | .notion-collection-card-cover { 1695 | height: 100px; 1696 | } 1697 | 1698 | .notion-board-view-size-large 1699 | .notion-collection-card 1700 | .notion-collection-card-cover { 1701 | height: 180px; 1702 | } 1703 | 1704 | .notion-collection-page-properties { 1705 | width: 100%; 1706 | display: flex; 1707 | flex-direction: column; 1708 | } 1709 | 1710 | .notion-table-of-contents { 1711 | width: 100%; 1712 | margin: 4px 0; 1713 | } 1714 | 1715 | .notion-table-of-contents-item { 1716 | color: var(--fg-color); 1717 | opacity: 0.7; 1718 | transition: background 100ms ease-in, opacity 100ms ease-in; 1719 | 1720 | text-decoration: none; 1721 | /* user-select: none; */ 1722 | transition: background 20ms ease-in 0s; 1723 | cursor: pointer; 1724 | width: 100%; 1725 | 1726 | padding: 6px; 1727 | font-size: 14px; 1728 | line-height: 1.3; 1729 | display: flex; 1730 | align-items: center; 1731 | 1732 | white-space: nowrap; 1733 | overflow: hidden; 1734 | text-overflow: ellipsis; 1735 | } 1736 | 1737 | .notion-table-of-contents-item:hover { 1738 | background: var(--bg-color-0); 1739 | opacity: 1; 1740 | } 1741 | 1742 | .notion-table-of-contents-item-body { 1743 | border-bottom: 1px solid var(--fg-color-1); 1744 | } 1745 | 1746 | .notion-to-do { 1747 | width: 100%; 1748 | display: flex; 1749 | flex-direction: column; 1750 | } 1751 | 1752 | .notion-to-do-item { 1753 | width: 100%; 1754 | display: flex; 1755 | align-items: center; 1756 | width: 100%; 1757 | padding-left: 2px; 1758 | min-height: calc(1.5em + 3px + 3px); 1759 | } 1760 | 1761 | .notion-to-do-children { 1762 | padding-left: 1.5em; 1763 | } 1764 | 1765 | .notion-to-do-checked .notion-to-do-item { 1766 | text-decoration: line-through; 1767 | opacity: 0.375; 1768 | } 1769 | 1770 | .notion-to-do-body { 1771 | white-space: pre-wrap; 1772 | word-break: break-word; 1773 | } 1774 | 1775 | .notion-to-do-item .notion-property-checkbox { 1776 | margin-right: 8px; 1777 | } 1778 | 1779 | .notion-google-drive { 1780 | width: 100%; 1781 | align-self: center; 1782 | margin: 4px 0; 1783 | } 1784 | 1785 | .notion-google-drive-link { 1786 | position: relative; 1787 | display: flex; 1788 | flex-direction: column; 1789 | color: inherit; 1790 | text-decoration: none; 1791 | width: 100%; 1792 | border: 1px solid var(--fg-color-1); 1793 | border-radius: 3px; 1794 | 1795 | /* user-select: none; */ 1796 | transition: background 20ms ease-in 0s; 1797 | cursor: pointer; 1798 | } 1799 | 1800 | .notion-google-drive-link:hover { 1801 | background: var(--bg-color-0); 1802 | } 1803 | 1804 | .notion-google-drive-preview { 1805 | display: block; 1806 | position: relative; 1807 | width: 100%; 1808 | padding-bottom: 55%; 1809 | overflow: hidden; 1810 | } 1811 | 1812 | .notion-google-drive-preview img { 1813 | position: absolute; 1814 | width: 100%; 1815 | top: 0; 1816 | left: 0; 1817 | bottom: 0; 1818 | right: 0; 1819 | object-fit: cover; 1820 | object-position: center top; 1821 | } 1822 | 1823 | .notion-google-drive-body { 1824 | width: 100%; 1825 | min-height: 60px; 1826 | padding: 12px 14px 14px; 1827 | overflow: hidden; 1828 | border-top: 1px solid var(--fg-color-1); 1829 | } 1830 | 1831 | .notion-google-drive-body-title { 1832 | font-size: 14px; 1833 | line-height: 20px; 1834 | white-space: nowrap; 1835 | overflow: hidden; 1836 | text-overflow: ellipsis; 1837 | margin-bottom: 2px; 1838 | } 1839 | 1840 | .notion-google-drive-body-modified-time { 1841 | font-size: 12px; 1842 | line-height: 1.3; 1843 | color: var(--fg-color-3); 1844 | max-height: 32px; 1845 | overflow: hidden; 1846 | } 1847 | 1848 | .notion-google-drive-body-source { 1849 | display: flex; 1850 | align-items: center; 1851 | margin-top: 6px; 1852 | } 1853 | 1854 | .notion-google-drive-body-source-icon { 1855 | flex-shrink: 0; 1856 | background-size: cover; 1857 | width: 16px; 1858 | height: 16px; 1859 | margin-right: 6px; 1860 | } 1861 | 1862 | .notion-google-drive-body-source-domain { 1863 | font-size: 12px; 1864 | line-height: 16px; 1865 | white-space: nowrap; 1866 | overflow: hidden; 1867 | text-overflow: ellipsis; 1868 | } 1869 | 1870 | .notion-file { 1871 | width: 100%; 1872 | margin: 1px 0; 1873 | } 1874 | 1875 | .notion-file-link { 1876 | display: flex; 1877 | align-items: center; 1878 | padding: 3px 2px; 1879 | border-radius: 3px; 1880 | transition: background 20ms ease-in 0s; 1881 | color: inherit; 1882 | text-decoration: none; 1883 | } 1884 | 1885 | .notion-file-link:hover { 1886 | background: var(--bg-color-0); 1887 | } 1888 | 1889 | .notion-file-icon { 1890 | margin-right: 2px; 1891 | width: 1.35em; 1892 | display: flex; 1893 | align-items: center; 1894 | justify-content: center; 1895 | flex-grow: 0; 1896 | flex-shrink: 0; 1897 | min-height: calc(1.5em + 3px + 3px); 1898 | height: 1.35em; 1899 | } 1900 | 1901 | .notion-file-info { 1902 | display: flex; 1903 | align-items: baseline; 1904 | } 1905 | 1906 | .notion-file-title { 1907 | white-space: nowrap; 1908 | overflow: hidden; 1909 | text-overflow: ellipsis; 1910 | } 1911 | 1912 | .notion-file-size { 1913 | white-space: nowrap; 1914 | overflow: hidden; 1915 | text-overflow: ellipsis; 1916 | color: var(--fg-color-3); 1917 | font-size: 12px; 1918 | line-height: 16px; 1919 | margin-left: 6px; 1920 | } 1921 | 1922 | .notion-audio { 1923 | width: 100%; 1924 | } 1925 | 1926 | .notion-audio audio { 1927 | width: 100%; 1928 | } 1929 | 1930 | .notion-equation { 1931 | position: relative; 1932 | display: inline-flex; 1933 | color: inherit; 1934 | fill: inherit; 1935 | /* user-select: none; */ 1936 | border-radius: 3px; 1937 | transition: background 20ms ease-in 0s; 1938 | } 1939 | 1940 | .notion-equation-inline { 1941 | -webkit-user-select: all; 1942 | -moz-user-select: all; 1943 | user-select: all; 1944 | } 1945 | 1946 | .notion-equation-block { 1947 | display: flex; 1948 | flex-direction: column; 1949 | overflow: auto; 1950 | width: 100%; 1951 | max-width: 100%; 1952 | padding: 4px 8px; 1953 | margin: 4px 0; 1954 | cursor: pointer; 1955 | } 1956 | 1957 | .notion-equation:hover { 1958 | background: var(--bg-color-0); 1959 | } 1960 | 1961 | .notion-equation:active, 1962 | .notion-equation:focus { 1963 | background: var(--select-color-2); 1964 | } 1965 | 1966 | .notion-frame .katex-display .katex { 1967 | padding-right: 32px; 1968 | } 1969 | 1970 | .notion-frame .katex > .katex-html { 1971 | white-space: normal; 1972 | } 1973 | 1974 | .notion-page-title { 1975 | display: inline-flex; 1976 | max-width: 100%; 1977 | align-items: center; 1978 | line-height: 1.3; 1979 | transition: background 120ms ease-in 0s; 1980 | } 1981 | 1982 | .notion-page-title-icon { 1983 | display: flex; 1984 | align-items: center; 1985 | justify-content: center; 1986 | height: 22px; 1987 | width: 22px; 1988 | border-radius: 3px; 1989 | flex-shrink: 0; 1990 | } 1991 | 1992 | .notion-page-title .notion-page-icon-inline { 1993 | margin-left: 2px; 1994 | margin-right: 6px; 1995 | } 1996 | 1997 | .notion-collection-card-property .notion-link { 1998 | border-bottom: 0 none; 1999 | } 2000 | 2001 | .notion-collection-card-property .notion-page-title { 2002 | transition: none; 2003 | } 2004 | 2005 | .notion-collection-card-property .notion-page-title:hover { 2006 | background: unset; 2007 | } 2008 | 2009 | .notion-collection-card-property .notion-page-title-icon { 2010 | margin-left: 0; 2011 | height: 18px; 2012 | width: 18px; 2013 | } 2014 | 2015 | .notion-collection-card-property .notion-page-title-text { 2016 | border-bottom: 0 none; 2017 | } 2018 | 2019 | .notion-collection-card-property 2020 | .notion-property-relation 2021 | .notion-page-title-text { 2022 | border-bottom: 1px solid; 2023 | } 2024 | 2025 | .notion-page-title-text { 2026 | position: relative; 2027 | top: 1px; 2028 | border-bottom: 1px solid var(--fg-color-1); 2029 | line-height: 1.3; 2030 | white-space: nowrap; 2031 | overflow: hidden; 2032 | text-overflow: ellipsis; 2033 | font-weight: 500; 2034 | } 2035 | 2036 | /* removes double underline with links */ 2037 | .notion-link .notion-page-title-text { 2038 | border-bottom: 0px; 2039 | } 2040 | 2041 | .notion-collection-row { 2042 | width: 100%; 2043 | padding: 4px 0 8px; 2044 | border-bottom: 1px solid var(--fg-color-0); 2045 | margin-bottom: 1em; 2046 | } 2047 | 2048 | .notion-collection-row-body { 2049 | display: flex; 2050 | flex-direction: column; 2051 | } 2052 | 2053 | .notion-collection-row-property { 2054 | display: flex; 2055 | align-items: center; 2056 | margin-bottom: 4px; 2057 | } 2058 | 2059 | .notion-collection-row-value { 2060 | flex: 1; 2061 | padding: 6px 8px 7px; 2062 | font-size: 14px; 2063 | } 2064 | 2065 | .notion-collection-row-property .notion-collection-column-title { 2066 | display: flex; 2067 | align-items: center; 2068 | width: 160px; 2069 | height: 34px; 2070 | color: var(--fg-color-3); 2071 | padding: 0 6px; 2072 | } 2073 | 2074 | .notion-collection-row-property .notion-property { 2075 | width: 100%; 2076 | } 2077 | 2078 | .notion-collection-row-property .notion-collection-column-title-icon { 2079 | width: 16px; 2080 | height: 16px; 2081 | min-width: 16px; 2082 | min-height: 16px; 2083 | } 2084 | 2085 | .notion-collection-row-property .notion-link { 2086 | border-bottom: 0 none; 2087 | } 2088 | 2089 | .notion-collection-row-property 2090 | .notion-property-relation 2091 | .notion-page-title-text { 2092 | border-bottom: 1px solid; 2093 | } 2094 | 2095 | .notion-user { 2096 | display: block; 2097 | object-fit: cover; 2098 | border-radius: 100%; 2099 | width: 20px; 2100 | height: 20px; 2101 | } 2102 | 2103 | .notion-list-item-property .notion-property-multi_select-item { 2104 | margin-bottom: 0; 2105 | flex-wrap: none; 2106 | } 2107 | 2108 | .notion-list-item-property .notion-property-multi_select-item:last-of-type { 2109 | margin-right: 0; 2110 | } 2111 | 2112 | .notion-toggle .notion-collection-header, 2113 | .notion-toggle .notion-table-view, 2114 | .notion-toggle .notion-board-view, 2115 | .notion-column .notion-collection-header, 2116 | .notion-column .notion-table-view, 2117 | .notion-column .notion-board-view { 2118 | padding-left: 0 !important; 2119 | padding-right: 0 !important; 2120 | } 2121 | 2122 | .notion-toggle .notion-table, 2123 | .notion-toggle .notion-board, 2124 | .notion-column .notion-table, 2125 | .notion-column .notion-board { 2126 | width: 100% !important; 2127 | max-width: 100% !important; 2128 | } 2129 | 2130 | @media only screen and (max-width: 730px) { 2131 | .notion-asset-wrapper { 2132 | max-width: 100%; 2133 | } 2134 | 2135 | .notion-asset-wrapper-full { 2136 | max-width: 100vw; 2137 | } 2138 | } 2139 | 2140 | @media (max-width: 640px) { 2141 | .notion-bookmark-image { 2142 | display: none; 2143 | } 2144 | } 2145 | 2146 | .lazy-image-wrapper { 2147 | position: relative; 2148 | overflow: hidden; 2149 | } 2150 | 2151 | .lazy-image-wrapper img { 2152 | position: absolute; 2153 | width: 100%; 2154 | height: 100%; 2155 | object-fit: cover; 2156 | max-width: 100%; 2157 | max-height: 100%; 2158 | min-width: 100%; 2159 | min-height: 100%; 2160 | } 2161 | 2162 | .lazy-image-preview { 2163 | filter: blur(20px); 2164 | transform: scale(1.1); 2165 | 2166 | opacity: 1; 2167 | transition: opacity 400ms ease-in !important; 2168 | transition-delay: 100ms; 2169 | will-change: opacity; 2170 | } 2171 | 2172 | .lazy-image-wrapper img.lazy-image-real { 2173 | position: relative; 2174 | } 2175 | 2176 | .lazy-image-real { 2177 | opacity: 0; 2178 | transition: opacity 400ms ease-out !important; 2179 | will-change: opacity; 2180 | } 2181 | 2182 | .lazy-image-real.medium-zoom-image { 2183 | transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), 2184 | opacity 400ms ease-out !important; 2185 | will-change: opacity, transform; 2186 | } 2187 | 2188 | .medium-zoom-image--opened { 2189 | object-fit: cover; 2190 | opacity: 1; 2191 | } 2192 | 2193 | /* 2194 | NOTE: if we hide the preview image, there's a weird bug with react hydration where 2195 | the image will sometimes flicker to show the background during initial page load. 2196 | So I'm removing this `opacity: 0` for now, but it will cause issues if the real 2197 | image is transparent. 2198 | */ 2199 | .lazy-image-loaded .lazy-image-preview { 2200 | opacity: 0; 2201 | } 2202 | 2203 | .lazy-image-loaded .lazy-image-real { 2204 | opacity: 1; 2205 | } 2206 | 2207 | .notion-page-cover.lazy-image-wrapper { 2208 | padding: 0 !important; 2209 | } 2210 | 2211 | .notion-collection-card-cover .lazy-image-wrapper { 2212 | padding: 0 !important; 2213 | height: 100%; 2214 | } 2215 | 2216 | .notion-page-cover .lazy-image-preview, 2217 | .notion-page-cover .lazy-image-real { 2218 | will-change: unset !important; 2219 | } 2220 | 2221 | .notion-page-cover .lazy-image-loaded .lazy-image-preview { 2222 | opacity: 1; 2223 | } 2224 | 2225 | .notion-lite { 2226 | overflow-y: auto; 2227 | } 2228 | 2229 | .notion-lite .notion-page { 2230 | width: 100%; 2231 | padding: 0; 2232 | /* padding: calc(max(2vmin, 8px)); */ 2233 | } 2234 | 2235 | .notion-lite .notion-collection-header, 2236 | .notion-lite .notion-table-view, 2237 | .notion-lite .notion-board-view { 2238 | padding-left: 0 !important; 2239 | padding-right: 0 !important; 2240 | } 2241 | 2242 | .notion-lite .notion-board, 2243 | .notion-lite .notion-table { 2244 | width: 100% !important; 2245 | } 2246 | 2247 | .notion-header { 2248 | position: sticky; 2249 | top: 0; 2250 | left: 0; 2251 | z-index: 200; 2252 | 2253 | width: 100%; 2254 | max-width: 100vw; 2255 | overflow: hidden; 2256 | height: var(--notion-header-height); 2257 | min-height: var(--notion-header-height); 2258 | 2259 | background: var(--bg-color); 2260 | } 2261 | 2262 | .notion-header .nav-header { 2263 | position: absolute; 2264 | top: 0; 2265 | left: 0; 2266 | right: 0; 2267 | height: 100%; 2268 | display: flex; 2269 | flex-direction: row; 2270 | justify-content: space-between; 2271 | align-items: center; 2272 | padding: 0 12px; 2273 | text-size-adjust: 100%; 2274 | line-height: 1.5; 2275 | line-height: 1.2; 2276 | font-size: 14px; 2277 | } 2278 | 2279 | .notion-header .breadcrumbs { 2280 | display: flex; 2281 | flex-direction: row; 2282 | align-items: center; 2283 | height: 100%; 2284 | flex-grow: 0; 2285 | min-width: 0; 2286 | margin-right: 8px; 2287 | } 2288 | 2289 | .notion-header .breadcrumb { 2290 | display: inline-flex; 2291 | flex-direction: row; 2292 | justify-content: center; 2293 | align-items: center; 2294 | white-space: nowrap; 2295 | text-overflow: ellipsis; 2296 | 2297 | color: var(--fg-color); 2298 | text-decoration: none; 2299 | margin: 1px 0px; 2300 | padding: 4px 6px; 2301 | border-radius: 3px; 2302 | transition: background 120ms ease-in 0s; 2303 | /* user-select: none; */ 2304 | background: transparent; 2305 | cursor: pointer; 2306 | } 2307 | 2308 | .notion-header .breadcrumb .notion-page-icon-inline { 2309 | font-size: 18px; 2310 | line-height: 1.1; 2311 | margin: 0 6px 0 0; 2312 | } 2313 | 2314 | .notion-header .breadcrumb .notion-page-icon-span { 2315 | position: relative; 2316 | top: 1px; 2317 | } 2318 | 2319 | .notion-header .searchIcon { 2320 | width: 14px; 2321 | height: 14px; 2322 | margin-right: 6px; 2323 | color: var(--fg-color); 2324 | fill: var(--fg-color); 2325 | } 2326 | 2327 | .notion-header .breadcrumb:not(.active):hover { 2328 | background: var(--bg-color-0); 2329 | } 2330 | 2331 | .notion-header .breadcrumb:not(.active):active { 2332 | background: var(--bg-color-1); 2333 | } 2334 | 2335 | .notion-header .breadcrumb.active { 2336 | cursor: default; 2337 | } 2338 | 2339 | .notion-header .spacer { 2340 | margin: 0 2px; 2341 | color: var(--fg-color-2); 2342 | } 2343 | 2344 | .notion-header .button { 2345 | height: 28px; 2346 | padding: 0 8px; 2347 | } 2348 | 2349 | .notion-search-overlay { 2350 | position: fixed; 2351 | top: 0; 2352 | left: 0; 2353 | right: 0; 2354 | bottom: 0; 2355 | background: rgba(15, 15, 15, 0.6); 2356 | 2357 | display: flex; 2358 | justify-content: center; 2359 | align-items: flex-start; 2360 | z-index: 1001; 2361 | } 2362 | 2363 | .notion-search { 2364 | box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, 2365 | rgba(15, 15, 15, 0.1) 0px 5px 10px, rgba(15, 15, 15, 0.2) 0px 15px 40px; 2366 | border-radius: 3px; 2367 | background: #fff; 2368 | 2369 | position: relative; 2370 | top: 90px; 2371 | max-width: 600px; 2372 | min-height: 50px; 2373 | max-height: 80vh; 2374 | width: 75%; 2375 | overflow: hidden; 2376 | outline: none; 2377 | 2378 | font-size: 16px; 2379 | line-height: 1.5; 2380 | color: rgb(55, 53, 47); 2381 | caret-color: rgb(55, 53, 47); 2382 | font-family: var(--notion-font); 2383 | } 2384 | 2385 | .notion-search .quickFindMenu { 2386 | display: flex; 2387 | flex-direction: column; 2388 | min-width: 100%; 2389 | max-width: calc(100vw - 24px); 2390 | height: 100%; 2391 | max-height: 80vh; 2392 | min-height: 50px; 2393 | } 2394 | 2395 | .notion-search .searchBar { 2396 | display: flex; 2397 | flex-direction: row; 2398 | align-items: center; 2399 | height: 52px; 2400 | box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px; 2401 | font-size: 18px; 2402 | line-height: 27px; 2403 | padding: 16px; 2404 | } 2405 | 2406 | .notion-search .searchInput { 2407 | resize: none; 2408 | white-space: nowrap; 2409 | border: none; 2410 | outline: none; 2411 | flex: 1; 2412 | 2413 | line-height: inherit; 2414 | font-size: inherit; 2415 | } 2416 | 2417 | .notion-search .inlineIcon { 2418 | margin-right: 10px; 2419 | fill: rgba(55, 53, 47, 0.4); 2420 | } 2421 | 2422 | .notion-search .clearButton { 2423 | /* user-select: none; */ 2424 | border-radius: 20px; 2425 | cursor: pointer; 2426 | margin-left: 8px; 2427 | } 2428 | 2429 | .notion-search .clearIcon { 2430 | width: 14px; 2431 | height: 14px; 2432 | fill: rgba(55, 53, 47, 0.3); 2433 | } 2434 | 2435 | .notion-search .clearButton:hover .clearIcon { 2436 | fill: rgba(55, 53, 47, 0.4); 2437 | } 2438 | 2439 | .notion-search .clearButton:active .clearIcon { 2440 | fill: rgba(55, 53, 47, 0.8); 2441 | } 2442 | 2443 | @keyframes spinner { 2444 | to { 2445 | transform: rotate(360deg); 2446 | } 2447 | } 2448 | 2449 | .notion-search .loadingIcon { 2450 | animation: spinner 0.6s linear infinite; 2451 | } 2452 | 2453 | .notion-search .noResultsPane { 2454 | display: flex; 2455 | flex-direction: column; 2456 | justify-content: center; 2457 | align-items: center; 2458 | padding: 32px 16px; 2459 | } 2460 | 2461 | .notion-search .noResults { 2462 | font-size: 14px; 2463 | font-weight: 500; 2464 | line-height: 20px; 2465 | color: rgba(55, 53, 47, 0.6); 2466 | } 2467 | 2468 | .notion-search .noResultsDetail { 2469 | font-size: 14px; 2470 | margin-top: 2px; 2471 | color: rgba(55, 53, 47, 0.4); 2472 | } 2473 | 2474 | .notion-search .resultsFooter { 2475 | box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px; 2476 | margin-top: 1px; 2477 | font-size: 12px; 2478 | min-height: 28px; 2479 | color: rgba(55, 53, 47, 0.4); 2480 | /* user-select: none; */ 2481 | padding: 0 16px; 2482 | display: flex; 2483 | flex-direction: column; 2484 | justify-content: center; 2485 | } 2486 | 2487 | .notion-search .resultsCount { 2488 | font-weight: 500; 2489 | color: rgba(55, 53, 47, 0.6); 2490 | } 2491 | 2492 | .notion-search .resultsPane { 2493 | display: flex; 2494 | flex-direction: column; 2495 | height: 100%; 2496 | flex: 1; 2497 | overflow: auto; 2498 | } 2499 | 2500 | .notion-search .resultsPane .result { 2501 | padding: 8px 14px; 2502 | border-bottom: 1px solid rgba(55, 53, 47, 0.06); 2503 | font-size: 14px; 2504 | /* user-select: none; */ 2505 | display: flex; 2506 | flex-direction: column; 2507 | align-items: stretch; 2508 | color: rgb(55, 53, 47); 2509 | text-decoration: none; 2510 | } 2511 | 2512 | .notion-search .resultsPane .result:hover { 2513 | background: rgba(55, 53, 47, 0.08) !important; 2514 | } 2515 | 2516 | .notion-search .resultsPane .result:active { 2517 | background: rgba(55, 53, 47, 0.16) !important; 2518 | } 2519 | 2520 | .notion-search .resultsPane .result { 2521 | min-height: unset; 2522 | height: unset; 2523 | } 2524 | 2525 | .notion-search .resultsPane .result .notion-page-title { 2526 | display: flex; 2527 | } 2528 | 2529 | .notion-search .resultsPane .result .notion-search-result-highlight { 2530 | font-size: 90%; 2531 | margin: 4px 0 0 30px; 2532 | } 2533 | 2534 | .notion-sync-block { 2535 | width: 100%; 2536 | } 2537 | 2538 | .notion-collection-group { 2539 | margin-bottom: 1em; 2540 | } 2541 | 2542 | .notion-collection-group > summary { 2543 | } 2544 | 2545 | .notion-collection-group > summary > div { 2546 | transform: scale(0.85); 2547 | transform-origin: 0% 50%; 2548 | display: inline-flex; 2549 | align-items: center; 2550 | } 2551 | 2552 | .notion-simple-table { 2553 | border: 1px solid var(--fg-color-5); 2554 | border-collapse: collapse; 2555 | border-spacing: 0; 2556 | font-size: 14px; 2557 | } 2558 | 2559 | .notion-simple-table tr:first-child td { 2560 | background: var(--bg-color-0); 2561 | } 2562 | 2563 | .notion-simple-table td { 2564 | border: 1px solid var(--fg-color-5); 2565 | padding: 8px 8px; 2566 | } 2567 | 2568 | .notion-external { 2569 | border-radius: 3px; 2570 | transition: background 120ms ease-in 0s; 2571 | text-decoration: none; 2572 | } 2573 | 2574 | .notion-external:hover { 2575 | background: var(--bg-color-0); 2576 | } 2577 | 2578 | .notion-external-block { 2579 | width: 100%; 2580 | margin-top: 4px; 2581 | border: 1px solid var(--fg-color-1); 2582 | padding: 6px 6px; 2583 | display: flex; 2584 | } 2585 | 2586 | .notion-external-mention { 2587 | display: inline; 2588 | margin-left: 2px; 2589 | margin-right: 2px; 2590 | } 2591 | 2592 | .notion-external-image { 2593 | width: 32px; 2594 | height: 32px; 2595 | margin: 3px 12px 3px 4px; 2596 | } 2597 | 2598 | .notion-external-mention .notion-external-image { 2599 | display: inline-block; 2600 | width: 16px; 2601 | height: 16px; 2602 | margin: 0; 2603 | margin-right: 0.3em; 2604 | } 2605 | 2606 | .notion-external-description { 2607 | display: flex; 2608 | flex-direction: column; 2609 | } 2610 | 2611 | .notion-external-mention .notion-external-description { 2612 | display: inline; 2613 | } 2614 | 2615 | .notion-external-title { 2616 | font-size: 14px; 2617 | font-weight: 500; 2618 | color: var(--fg-color-4); 2619 | } 2620 | 2621 | .notion-external-mention .notion-external-title { 2622 | display: inline; 2623 | font-size: 16px; 2624 | border-bottom: 0.05em solid var(--fg-color-1); 2625 | } 2626 | 2627 | .notion-external-subtitle { 2628 | font-size: 12px; 2629 | color: var(--fg-color-3); 2630 | } 2631 | 2632 | .notion-external-mention .notion-external-subtitle { 2633 | display: none; 2634 | } 2635 | 2636 | .notion-yt-lite { 2637 | background-color: #000; 2638 | position: absolute; 2639 | width: 100%; 2640 | height: 100%; 2641 | display: block; 2642 | contain: content; 2643 | background-position: center center; 2644 | background-size: cover; 2645 | cursor: pointer; 2646 | } 2647 | 2648 | .notion-yt-lite::before { 2649 | content: ''; 2650 | display: block; 2651 | position: absolute; 2652 | top: 0; 2653 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); 2654 | background-position: top; 2655 | background-repeat: repeat-x; 2656 | width: 100%; 2657 | height: 60px; 2658 | padding-bottom: 50px; 2659 | transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); 2660 | } 2661 | 2662 | .notion-yt-lite > iframe { 2663 | width: 100%; 2664 | height: 100%; 2665 | position: absolute; 2666 | top: 0; 2667 | left: 0; 2668 | } 2669 | .notion-yt-playbtn { 2670 | width: 68px; 2671 | height: 48px; 2672 | position: absolute; 2673 | cursor: pointer; 2674 | transform: translate3d(-50%, -50%, 0); 2675 | top: 50%; 2676 | left: 50%; 2677 | z-index: 1; 2678 | background-color: transparent; 2679 | /* YT's actual play button svg */ 2680 | background-image: url('data:image/svg+xml;utf8,'); 2681 | filter: grayscale(100%); 2682 | transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1); 2683 | border: none; 2684 | } 2685 | .notion-yt-lite:hover > .notion-yt-playbtn, 2686 | .notion-yt-youtube .notion-yt-playbtn:focus { 2687 | filter: none; 2688 | } 2689 | 2690 | .notion-yt-initialized { 2691 | cursor: unset; 2692 | } 2693 | .notion-yt-initialized::before, 2694 | .notion-yt-initialized > .notion-yt-playbtn { 2695 | opacity: 0; 2696 | pointer-events: none; 2697 | } 2698 | 2699 | .notion-yt-thumbnail { 2700 | position: absolute; 2701 | top: 0; 2702 | left: 0; 2703 | width: 100%; 2704 | height: 100%; 2705 | object-fit: cover; 2706 | } 2707 | 2708 | .notion-collection-view-dropdown-content { 2709 | font-family: var(--notion-font); 2710 | min-width: 220; 2711 | background: #fff; 2712 | border-radius: 6; 2713 | padding: 0; 2714 | box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 2715 | 0px 10px 20px -15px rgba(22, 23, 24, 0.2); 2716 | animation-duration: 400ms; 2717 | animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); 2718 | animation-fill-mode: forwards; 2719 | will-change: transform, opacity; 2720 | } 2721 | 2722 | .notion-collection-view-dropdown-content-item { 2723 | all: unset; 2724 | position: relative; 2725 | height: 25px; 2726 | padding: 7px 96px 7px 10px; 2727 | line-height: 1; 2728 | display: flex; 2729 | align-items: center; 2730 | border-radius: 3px; 2731 | /* user-select: none; */ 2732 | cursor: pointer; 2733 | color: rgb(55, 53, 47); 2734 | font-size: 14px; 2735 | } 2736 | 2737 | .notion-collection-view-dropdown-content-item[data-disabled] { 2738 | color: #777; 2739 | pointer-events: none; 2740 | cursor: unset; 2741 | } 2742 | 2743 | .notion-collection-view-dropdown-content-item:focus, 2744 | .notion-collection-view-dropdown-content-item-active { 2745 | background-color: #ebfaff; 2746 | } 2747 | 2748 | .notion-collection-view-dropdown-content-item-active-icon { 2749 | position: absolute; 2750 | right: 0; 2751 | width: 32px; 2752 | display: inline-flex; 2753 | align-items: center; 2754 | justify-content: center; 2755 | } 2756 | 2757 | .notion-collection-view-dropdown-content-item-active-icon > svg { 2758 | width: 12px; 2759 | } 2760 | 2761 | @keyframes slideDownAndFade { 2762 | 0% { 2763 | opacity: 0; 2764 | transform: translateY(-2px); 2765 | } 2766 | 2767 | 100% { 2768 | opacity: 1; 2769 | transform: translateY(0); 2770 | } 2771 | } 2772 | 2773 | .notion-collection-view-dropdown-content[data-state='open'] { 2774 | animation-name: slideDownAndFade; 2775 | } 2776 | -------------------------------------------------------------------------------- /scripts/utils/email.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qumuchegi/notion-docsify/25acef2f763ca3529e6cc0f46b156281247681e8/scripts/utils/email.ts -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const CopyWebpackPlugin = require('copy-webpack-plugin') 3 | 4 | module.exports = { 5 | target: 'node', 6 | context: path.resolve(__dirname, 'scripts'), 7 | entry: '/index.mjs', 8 | output: { 9 | filename: 'bundle.js', 10 | path: path.resolve(__dirname, 'build') 11 | }, 12 | module: { 13 | rules: [ 14 | // { 15 | // test: /\.css$/, 16 | // use: [ 17 | // { 18 | // loader: 'style-loader' 19 | // }, 20 | // { 21 | // loader: 'css-loader' 22 | // } 23 | // ], 24 | // exclude: /node_modules/ 25 | // }, 26 | { 27 | test: /\.(js|jsx)$/, 28 | loader: 'babel-loader', 29 | exclude: /node_modules/ 30 | } 31 | ] 32 | }, 33 | plugins: [ 34 | new CopyWebpackPlugin( 35 | { 36 | patterns: [ 37 | { 38 | from: path.resolve(__dirname, 'scripts/style/notion-render.css'), 39 | to: path.resolve(__dirname, 'build/style') 40 | } 41 | ] 42 | }) 43 | ] 44 | } -------------------------------------------------------------------------------- /yarn-error.log: -------------------------------------------------------------------------------- 1 | Arguments: 2 | /usr/local/bin/node /usr/local/bin/yarn init 3 | 4 | PATH: 5 | /Users/chegequmu/.rvm/gems/ruby-3.0.0/bin:/Users/chegequmu/.rvm/gems/ruby-3.0.0@global/bin:/Users/chegequmu/.rvm/rubies/ruby-3.0.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Applications/Postgres.app/Contents/Versions/latest/bin:/Users/chegequmu/.rvm/bin 6 | 7 | Yarn version: 8 | 1.22.4 9 | 10 | Node version: 11 | 14.18.1 12 | 13 | Platform: 14 | darwin x64 15 | 16 | Trace: 17 | Error: canceled 18 | at Interface. (/usr/local/lib/node_modules/yarn/lib/cli.js:137008:13) 19 | at Interface.emit (events.js:400:28) 20 | at Interface._ttyWrite (readline.js:1001:16) 21 | at ReadStream.onkeypress (readline.js:265:10) 22 | at ReadStream.emit (events.js:400:28) 23 | at emitKeys (internal/readline/utils.js:358:14) 24 | at emitKeys.next () 25 | at ReadStream.onData (readline.js:1270:36) 26 | at ReadStream.emit (events.js:400:28) 27 | at addChunk (internal/streams/readable.js:293:12) 28 | 29 | npm manifest: 30 | No manifest 31 | 32 | yarn manifest: 33 | No manifest 34 | 35 | Lockfile: 36 | No lockfile 37 | --------------------------------------------------------------------------------