├── .gitignore ├── LICENSE ├── README.md ├── manifest.json ├── package.json ├── resource ├── sc_setting-1-min.png ├── sc_setting-2-min.png ├── screenshot.gif └── screenshot_main_light-min.png ├── rollup.config.js ├── src ├── main.ts ├── settings.ts └── styles.scss ├── tsconfig.json └── versions.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Intellij 2 | *.iml 3 | .idea 4 | 5 | # npm 6 | node_modules 7 | package-lock.json 8 | 9 | # build 10 | *.js.map 11 | *.css.map 12 | 13 | # js // リリースのみに入れる 14 | main.js 15 | styles.css 16 | 17 | # data 18 | data.json 19 | 20 | # trush 21 | .DS_Store 22 | .DS_Store? 23 | .Spotlight-V100 24 | .Trashes 25 | .trash -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021 PADAone 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | 24 | 25 | The hexToRgb(), componentToHex(), rgbToHex() functions are: 26 | Copyright (c) 2021 Jeremy Valentine 27 | Repository URL: https://github.com/valentine195/obsidian-admonition -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian Card View Mode 2 | ![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/yo-goto/obsidian-card-view-mode) 3 | ![GitHub All Releases](https://img.shields.io/github/downloads/yo-goto/obsidian-card-view-mode/total?color=red) 4 | 5 | ![main screen shot](https://raw.githubusercontent.com/yo-goto/obsidian-card-view-mode/master/resource/screenshot_main_light-min.png) 6 | 7 | ## Feature.1 Card View 8 | 9 | This plugin is inspired by [Scrapbox](https://scrapbox.io/product?lang=en) (a web-based wiki tool) & Zettelkasten method (Slip box) by Niklas Luhmann. 10 | 11 | I found all of the notes are not in the same stage while developing. We need some ways to distinguish the stages. The card view feature is one way to weigh notes and express them. You can assess whether your notes are **atomic**, then, if you feel your note is longer and not atomic, you can divide or extract the contents. 12 | 13 | The vertical size of each note (a.k.a card) can be extended or reduced based on the amount of content on them. At a glance, you can easily find how mature your note is at the early stage of note-taking, note-making, or eventually **note-developing**. 14 | 15 | I highly recommend you to use this plugin with the Sliding Pane plugin. I made this to be compatible with that and the Embedded Note Titles plugin. 16 | 17 | ## Feature.2 Attention Pane 18 | 19 | Another feature is “Attention Pane”. An active pane card is highlighted and the others are grayed out. This enables you to find an active pane easily and focus on the note. You can pay attention to the specific pane among many notes!! 20 | 21 | Active and non-active cards are rendered with different RGB color values. You can set the value difference in the setting tab. Set the value 0 if you want to disable this feature. 22 | 23 | ## Demo 24 | 25 | ![Screenshot](https://raw.githubusercontent.com/yo-goto/obsidian-card-view-mode/master/resource/screenshot.gif) 26 | 27 | ## Settings 28 | 29 | Card colors, background color, card shapes are configurable in the settings tab. 30 | 31 | ![setting 1](https://raw.githubusercontent.com/yo-goto/obsidian-card-view-mode/master/resource/sc_setting-1-min.png) 32 | 33 | ![setting 2](https://raw.githubusercontent.com/yo-goto/obsidian-card-view-mode/master/resource/sc_setting-2-min.png) 34 | 35 | 36 | - You can globally turn on/off this plugin with a command at any time. 37 | - You can customize the card design(colors, corner radius, drop shadow). 38 | 39 | ## Compatibility 40 | 41 | - [Sliding Panes (Andy Matuschak Mode)](https://github.com/deathau/sliding-panes-obsidian) 42 | - [Embedded Note Title](https://github.com/mgmeyers/obsidian-embedded-note-titles) 43 | - [Banners](https://github.com/noatpad/obsidian-banners) (compatibility is not yet stable) 44 | 45 | # Development 46 | 47 | [Roadmap](https://github.com/yo-goto/obsidian-card-view-mode/projects/1) 48 | ## How to install manually 49 | 50 | - Clone this repo 51 | - `npm i` or `yarn` to install dependencies 52 | - `npm run dev` to compile 53 | - Copy `manifiest.json`, `main.js` and `styles.css` to a subfolder of your plugins folder 54 | - Reload obsidian to see changes 55 | 56 | ## Special Thanks 57 | 58 | Special thanks to these amazing plugins! I used these plugins as a reference for developing my first public plugin. The plugin basic structure is mainly based on the Sliding Pane. I referred to other plugins to build the color configuration system. 59 | 60 | - [Sliding Panes (Andy Matuschak Mode)](https://github.com/deathau/sliding-panes-obsidian) by deathau 61 | - [Admonition](https://github.com/valentine195/obsidian-admonition) by valentine195 62 | - [Minimal Theme Settings](https://github.com/kepano/obsidian-minimal-settings) by kepano 63 | - [Embedded Code Title](https://github.com/tadashi-aikawa/obsidian-embedded-code-title) by tadashi-aikawa 64 | - [Calendar](https://github.com/liamcain/obsidian-calendar-plugin) by liamcain 65 | 66 | ## Original CSS 67 | 68 | I've developed this plugin from a custom CSS snippet but I changed it into an SCSS file. If you get interested in the CSS style, you can see the original snippet linked below. 69 | 70 | [Gist Link](https://gist.github.com/yo-goto/742906c6463310e3f4e18c745dede016) 71 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "obsidian-card-view-mode", 3 | "name": "Card View Mode", 4 | "author": "PADAone", 5 | "minAppVersion": "0.12.13", 6 | "authorUrl": "https://github.com/yo-goto", 7 | "description": "Enable to view your notes as cards.", 8 | "version": "0.4.10", 9 | "isDesktopOnly": false 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "obsidian-card-view-mode", 3 | "version": "0.4.10", 4 | "description": "Card View Mode & Attention Pane. View notes as cards!", 5 | "main": "main.js", 6 | "scripts": { 7 | "dev": "rollup --config rollup.config.js -w", 8 | "build": "rollup --config rollup.config.js" 9 | }, 10 | "keywords": [], 11 | "author": "PADAone", 12 | "license": "MIT", 13 | "devDependencies": { 14 | "@rollup/plugin-commonjs": "^15.1.0", 15 | "@rollup/plugin-node-resolve": "^9.0.0", 16 | "@rollup/plugin-typescript": "^6.0.0", 17 | "@types/node": "^14.14.37", 18 | "@types/resize-observer-browser": "^0.1.6", 19 | "obsidian": "https://github.com/obsidianmd/obsidian-api/tarball/master", 20 | "obsidian-plugin-cli": "^0.8.0", 21 | "rollup": "^2.35.1", 22 | "rollup-plugin-scss": "^2.6.1", 23 | "sass": "^1.30.0", 24 | "tslib": "^2.2.0", 25 | "typescript": "^4.2.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /resource/sc_setting-1-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yo-goto/obsidian-card-view-mode/2550696227a8fb77b26e8e293fa76b95c6d8ccc7/resource/sc_setting-1-min.png -------------------------------------------------------------------------------- /resource/sc_setting-2-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yo-goto/obsidian-card-view-mode/2550696227a8fb77b26e8e293fa76b95c6d8ccc7/resource/sc_setting-2-min.png -------------------------------------------------------------------------------- /resource/screenshot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yo-goto/obsidian-card-view-mode/2550696227a8fb77b26e8e293fa76b95c6d8ccc7/resource/screenshot.gif -------------------------------------------------------------------------------- /resource/screenshot_main_light-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yo-goto/obsidian-card-view-mode/2550696227a8fb77b26e8e293fa76b95c6d8ccc7/resource/screenshot_main_light-min.png -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from '@rollup/plugin-typescript'; 2 | import {nodeResolve} from '@rollup/plugin-node-resolve'; 3 | import commonjs from '@rollup/plugin-commonjs'; 4 | import scss from 'rollup-plugin-scss'; 5 | 6 | export default { 7 | input: 'src/main.ts', 8 | output: { 9 | dir: '.', 10 | sourcemap: 'inline', 11 | format: 'cjs', 12 | exports: 'default' 13 | }, 14 | external: ['obsidian'], 15 | plugins: [ 16 | typescript(), 17 | nodeResolve({browser: true}), 18 | commonjs(), 19 | scss({ output: 'styles.css', sass: require('sass') }), 20 | ] 21 | }; -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import './styles.scss' 2 | import { Plugin } from 'obsidian'; 3 | import { 4 | CardViewModeSettings, 5 | DEFAULT_SETTINGS, 6 | CardViewModeSettingTab, 7 | CardViewModeCommands 8 | } from './settings'; 9 | 10 | 11 | export default class CardViewModePlugin extends Plugin { 12 | settings: CardViewModeSettings; 13 | style: HTMLStyleElement = document.head.createEl('style'); 14 | 15 | async onload() { 16 | await this.loadSettings(); 17 | if (!this.settings.disabled) this.enable(); 18 | this.addSettingTab(new CardViewModeSettingTab(this.app, this)); 19 | new CardViewModeCommands(this).addCommands(); 20 | } 21 | 22 | onunload(){ 23 | this.disable(); 24 | } 25 | 26 | enable = () => { 27 | this.app.workspace.onLayoutReady(this.reallyEnable); 28 | } 29 | 30 | reallyEnable = () => { 31 | this.addStyle(); 32 | } 33 | 34 | disable = () => { 35 | this.removeStyle(); 36 | } 37 | 38 | async loadSettings() { 39 | this.settings = Object.assign(DEFAULT_SETTINGS, await this.loadData()); 40 | } 41 | 42 | refresh = () => { 43 | this.updateStyle() 44 | } 45 | 46 | removeStyle = () => { 47 | const el = this.style; 48 | if (el) el.remove(); 49 | document.body.classList.remove('plugin-card-view-mode'); 50 | document.body.classList.remove('plugin-card-view-mode-cardtitle'); 51 | document.body.classList.remove('plugin-card-view-mode-dropshadow'); 52 | document.body.classList.remove('plugin-card-view-mode-remove-pane-boudaries'); 53 | document.body.classList.remove('plugin-card-view-mode-hide-scrollbar'); 54 | } 55 | 56 | addStyle = () => { 57 | this.style.setAttribute('type', 'text/css'); 58 | 59 | // add style in head tag 60 | document.getElementsByTagName("head")[0].appendChild(this.style); 61 | document.body.classList.add('plugin-card-view-mode'); 62 | this.updateStyle(); 63 | } 64 | 65 | updateStyle = () => { 66 | // a. update boolean settings 67 | document.body.classList.toggle('plugin-card-view-mode-cardtitle', this.settings.cardTitle); 68 | document.body.classList.toggle('plugin-card-view-mode-dropshadow', this.settings.cardDropShadow); 69 | document.body.classList.toggle('plugin-card-view-mode-remove-pane-boudaries', this.settings.removePaneBoundaries); 70 | document.body.classList.toggle('plugin-card-view-mode-hide-scrollbar', this.settings.hideScrollBar); 71 | 72 | // b. update custom css properties 73 | const el = this.style; 74 | if (!el) throw "plugin-card-view-mode element not found!"; 75 | else { 76 | el.textContent = ` 77 | body.plugin-card-view-mode { 78 | --cardview-card-boarder-radius: ${this.settings.cardCornerRadius}px; 79 | --cardview-embedded-title-boarder-radius: ${this.settings.cardTitleCornerRadius}px; 80 | } 81 | body.plugin-card-view-mode.theme-light{ 82 | --cardview-card-color-active: rgb(${this.settings.colorActiveCardLight}); 83 | --cardview-card-color-non-active: rgb(${this.settings.colorNonActiveCardLight}); 84 | --cardview-background-color-default: rgb(${this.settings.colorBackGroundLight}); 85 | --header-color-background: rgb(${this.settings.colorTitleCardBackGroundLight}); 86 | --cardview-border-color: rgb(${this.settings.colorCardBorderLight}); 87 | --cardview-embedded-title-border-right-color-edit: rgb(${this.settings.colorTitleCardEdgeLight}); 88 | --cardview-embedded-title-border-right-color-preview: rgb(${this.settings.colorTitleCardEdgeLight}); 89 | } 90 | body.plugin-card-view-mode.theme-dark{ 91 | --cardview-card-color-active: rgb(${this.settings.colorActiveCardDark}); 92 | --cardview-card-color-non-active: rgb(${this.settings.colorNonActiveCardDark}); 93 | --cardview-background-color-default: rgb(${this.settings.colorBackGroundDark}); 94 | --header-color-background: rgb(${this.settings.colorTitleCardBackGroundDark}); 95 | --cardview-border-color: rgb(${this.settings.colorCardBorderDark}); 96 | --cardview-embedded-title-border-right-color-edit: rgb(${this.settings.colorTitleCardEdgeDark}); 97 | --cardview-embedded-title-border-right-color-preview: rgb(${this.settings.colorTitleCardEdgeDark}); 98 | } 99 | `; 100 | } 101 | } 102 | 103 | } 104 | 105 | -------------------------------------------------------------------------------- /src/settings.ts: -------------------------------------------------------------------------------- 1 | import { 2 | App, 3 | ButtonComponent, 4 | Plugin, 5 | PluginSettingTab, 6 | Setting, 7 | } from 'obsidian'; 8 | 9 | 10 | declare class CardViewModePlugin extends Plugin { 11 | settings: CardViewModeSettings; 12 | disable(): void; 13 | enable(): void; 14 | refresh(): void; 15 | } 16 | 17 | 18 | export interface CardViewModeSettings { 19 | disabled: boolean; 20 | cardTitle: boolean; 21 | cardCornerRadius: number; 22 | cardTitleCornerRadius: number; 23 | cardDropShadow: boolean; 24 | removePaneBoundaries: boolean; 25 | hideScrollBar: boolean; 26 | colorBackGroundLight: string; 27 | colorBackGroundDark: string; 28 | colorActiveCardLight: string; 29 | colorActiveCardDark: string; 30 | colorNonActiveCardDark: string; 31 | colorNonActiveCardLight: string; 32 | colorTitleCardEdgeDark: string; 33 | colorTitleCardEdgeLight: string; 34 | colorTitleCardBackGroundLight: string; 35 | colorTitleCardBackGroundDark: string; 36 | colorDiffBetweenActive: number; 37 | colorCardBorderLight: string; 38 | colorCardBorderDark: string; 39 | } 40 | 41 | export const DEFAULT_SETTINGS: CardViewModeSettings = { 42 | disabled: true, 43 | cardTitle: false, 44 | cardCornerRadius: 10, 45 | cardTitleCornerRadius: 5, 46 | cardDropShadow: true, 47 | removePaneBoundaries: true, 48 | hideScrollBar: true, 49 | colorBackGroundLight: "255, 255, 255", 50 | colorBackGroundDark: "145, 145, 145", 51 | colorActiveCardLight: "255, 255, 255", 52 | colorActiveCardDark: "71, 71, 71", 53 | colorNonActiveCardDark: "71, 71, 71", 54 | colorNonActiveCardLight: "255, 255, 255", 55 | colorTitleCardEdgeDark: "227, 76, 38", 56 | colorTitleCardEdgeLight: "123, 230, 1", 57 | colorTitleCardBackGroundLight: "242, 242, 242", 58 | colorTitleCardBackGroundDark: "0, 0, 0", 59 | colorDiffBetweenActive: 0, 60 | colorCardBorderLight: "255, 255, 255", 61 | colorCardBorderDark: "0, 0, 0" 62 | } 63 | 64 | export class CardViewModeSettingTab extends PluginSettingTab { 65 | plugin: CardViewModePlugin; 66 | constructor(app: App, plugin: CardViewModePlugin) { 67 | super(app, plugin); 68 | this.plugin = plugin; 69 | } 70 | 71 | display(): void { 72 | this.containerEl.empty(); 73 | 74 | 75 | this.containerEl.createEl("h3", { 76 | text: "General Settings", 77 | }); 78 | this.addSettingToggleCardView(); 79 | this.addSettingToggleCardTitle(); 80 | 81 | this.containerEl.createEl("h3", { 82 | text: "Card View Designer", 83 | }); 84 | this.addSettingToggleRemovePaneBoundariies(); 85 | this.addSettingHideScrollbar(); 86 | this.addSettingToggleDropShadow(); 87 | this.addSettingCardCornerRadius(); 88 | this.addSettingCardTitleCornerRadius(); 89 | 90 | this.containerEl.createEl("h4", { 91 | text: "Dark Mode Color", 92 | }); 93 | this.addSettingBackgroundColorDark(); 94 | this.addSettingActiveCardColorDark(); 95 | this.addSettingCardBorderColorDark(); 96 | this.addSettingCardTitleBackgroundColorDark(); 97 | this.addSettingCardTitleEdgeColorDark(); 98 | 99 | // detail summary 100 | // this.containerEl.createEl("details", { 101 | // text: "" 102 | // }).createEl("summary", { 103 | // text: "Dark mode", 104 | // }); 105 | 106 | 107 | 108 | this.containerEl.createEl("h4", { 109 | text: "Light Mode Color" 110 | }); 111 | this.addSettingBackgroundColorLight(); 112 | this.addSettingActiveCardColorLight(); 113 | this.addSettingCardBorderColorLight(); 114 | this.addSettingCardTitleBackgroundColorLight(); 115 | this.addSettingCardTitleEdgeColorLight(); 116 | 117 | 118 | this.containerEl.createEl("h3", { 119 | text: "Attention Pane", 120 | }); 121 | this.addSettingDiffBetActiveNonactive(); 122 | 123 | } 124 | 125 | addSettingToggleCardView(): void { 126 | new Setting(this.containerEl) 127 | .setName("Toggle Card View") 128 | .setDesc("Turns card view mode on or off globally.") 129 | .addToggle(toggle => toggle.setValue(!this.plugin.settings.disabled) 130 | .onChange((value) => { 131 | this.plugin.settings.disabled = !value; 132 | this.plugin.saveData(this.plugin.settings); 133 | if (this.plugin.settings.disabled) { 134 | this.plugin.disable(); 135 | } 136 | else { 137 | this.plugin.enable(); 138 | } 139 | }) 140 | ); 141 | } 142 | 143 | addSettingToggleCardTitle(): void { 144 | new Setting(this.containerEl) 145 | .setName("Toggle Title Card") 146 | .setDesc("View note titles as cards. Enable this option with Embedded Note Title Plugin.") 147 | .addToggle(toggle => toggle.setValue(this.plugin.settings.cardTitle) 148 | .onChange((value) => { 149 | this.plugin.settings.cardTitle = value; 150 | this.plugin.saveData(this.plugin.settings); 151 | this.plugin.refresh(); 152 | } 153 | ) 154 | ); 155 | } 156 | 157 | addSettingToggleRemovePaneBoundariies(): void { 158 | new Setting(this.containerEl) 159 | .setName("Remove Pane Boundaries") 160 | .setDesc("When toggled, pane boundaries will be removed.") 161 | .addToggle(toggle => toggle.setValue(this.plugin.settings.removePaneBoundaries) 162 | .onChange((value) => { 163 | this.plugin.settings.removePaneBoundaries = value; 164 | this.plugin.saveData(this.plugin.settings); 165 | this.plugin.refresh(); 166 | } 167 | ) 168 | ); 169 | } 170 | 171 | addSettingHideScrollbar(): void { 172 | new Setting(this.containerEl) 173 | .setName("Hide scrollbar") 174 | .setDesc("When toggled, scrollbar will be removed.") 175 | .addToggle(toggle => toggle.setValue(this.plugin.settings.hideScrollBar) 176 | .onChange((value) => { 177 | this.plugin.settings.hideScrollBar = value; 178 | this.plugin.saveData(this.plugin.settings); 179 | this.plugin.refresh(); 180 | } 181 | ) 182 | ); 183 | } 184 | 185 | addSettingToggleDropShadow(): void { 186 | new Setting(this.containerEl) 187 | .setName("Drop Shadow") 188 | .setDesc("When toggled, dropping shadow to cards will be activated.") 189 | .addToggle(toggle => toggle.setValue(this.plugin.settings.cardDropShadow) 190 | .onChange((value) => { 191 | this.plugin.settings.cardDropShadow = value; 192 | this.plugin.saveData(this.plugin.settings); 193 | this.plugin.refresh(); 194 | } 195 | ) 196 | ); 197 | } 198 | 199 | addSettingCardCornerRadius(): void { 200 | new Setting(this.containerEl) 201 | .setName('Card Corner Radius') 202 | .setDesc('Set number to adjust card corner radius. Default radius is 10px.') 203 | .addText(text => text.setPlaceholder('Default: 10px') 204 | .setValue((this.plugin.settings.cardCornerRadius || '') + '') 205 | .onChange((value) => { 206 | let nu = Number(value) 207 | this.plugin.settings.cardCornerRadius = nu; 208 | this.plugin.saveData(this.plugin.settings); 209 | this.plugin.refresh(); 210 | }) 211 | ); 212 | } 213 | 214 | addSettingCardTitleCornerRadius(): void { 215 | new Setting(this.containerEl) 216 | .setName('Title Card Corner Radius') 217 | .setDesc('Set number to adjust title card corner radius. Default radius is 5px.') 218 | .addText(text => text.setPlaceholder('Default: 5px') 219 | .setValue((this.plugin.settings.cardTitleCornerRadius || '') + '') 220 | .onChange((value) => { 221 | let nu = Number(value) 222 | this.plugin.settings.cardTitleCornerRadius = nu; 223 | this.plugin.saveData(this.plugin.settings); 224 | this.plugin.refresh(); 225 | }) 226 | ); 227 | } 228 | 229 | addSettingCardBorderColorLight(): void { 230 | new Setting(this.containerEl) 231 | .setName("Card Border Color") 232 | .controlEl.createEl( 233 | "input", 234 | { 235 | type: "color", 236 | value: rgbToHex(this.plugin.settings.colorCardBorderLight) 237 | }, 238 | (el) => { 239 | el.value = rgbToHex(this.plugin.settings.colorCardBorderLight); 240 | el.oninput = ({ target }) => { 241 | let color = hexToRgb((target as HTMLInputElement).value); 242 | 243 | if (!color) return; 244 | this.plugin.settings.colorCardBorderLight = `${color.r}, ${color.g}, ${color.b}`; 245 | this.plugin.saveData(this.plugin.settings) 246 | this.plugin.refresh(); 247 | }; 248 | } 249 | ); 250 | } 251 | 252 | addSettingCardBorderColorDark(): void { 253 | new Setting(this.containerEl) 254 | .setName("Card Border Color") 255 | .controlEl.createEl( 256 | "input", 257 | { 258 | type: "color", 259 | value: rgbToHex(this.plugin.settings.colorCardBorderDark) 260 | }, 261 | (el) => { 262 | el.value = rgbToHex(this.plugin.settings.colorCardBorderDark); 263 | el.oninput = ({ target }) => { 264 | let color = hexToRgb((target as HTMLInputElement).value); 265 | 266 | if (!color) return; 267 | this.plugin.settings.colorCardBorderDark = `${color.r}, ${color.g}, ${color.b}`; 268 | this.plugin.saveData(this.plugin.settings) 269 | this.plugin.refresh(); 270 | }; 271 | } 272 | ); 273 | } 274 | 275 | addSettingBackgroundColorLight(): void { 276 | new Setting(this.containerEl) 277 | .setName("Background Color") 278 | .controlEl.createEl( 279 | "input", 280 | { 281 | type: "color", 282 | value: rgbToHex(this.plugin.settings.colorBackGroundLight) 283 | }, 284 | (el) => { 285 | el.value = rgbToHex(this.plugin.settings.colorBackGroundLight); 286 | el.oninput = ({ target }) => { 287 | let color = hexToRgb((target as HTMLInputElement).value); 288 | 289 | if (!color) return; 290 | this.plugin.settings.colorBackGroundLight = `${color.r}, ${color.g}, ${color.b}`; 291 | this.plugin.saveData(this.plugin.settings) 292 | this.plugin.refresh(); 293 | }; 294 | } 295 | ); 296 | } 297 | 298 | addSettingBackgroundColorDark(): void { 299 | new Setting(this.containerEl) 300 | .setName("Background Color") 301 | .controlEl.createEl( 302 | "input", 303 | { 304 | type: "color", 305 | value: rgbToHex(this.plugin.settings.colorBackGroundDark) 306 | }, 307 | (el) => { 308 | el.value = rgbToHex(this.plugin.settings.colorBackGroundDark); 309 | el.oninput = ({ target }) => { 310 | let color = hexToRgb((target as HTMLInputElement).value); 311 | 312 | if (!color) return; 313 | this.plugin.settings.colorBackGroundDark = `${color.r}, ${color.g}, ${color.b}`; 314 | this.plugin.saveData(this.plugin.settings) 315 | this.plugin.refresh(); 316 | }; 317 | } 318 | ); 319 | } 320 | 321 | addSettingActiveCardColorLight(): void { 322 | new Setting(this.containerEl) 323 | .setName("Active Card Color") 324 | .controlEl.createEl( 325 | "input", 326 | { 327 | type: "color", 328 | value: rgbToHex(this.plugin.settings.colorActiveCardLight) 329 | }, 330 | (el) => { 331 | el.value = rgbToHex(this.plugin.settings.colorActiveCardLight); 332 | el.oninput = ({ target }) => { 333 | let color = hexToRgb((target as HTMLInputElement).value); 334 | 335 | if (!color) return; 336 | this.plugin.settings.colorActiveCardLight = `${color.r}, ${color.g}, ${color.b}`; 337 | this.plugin.settings.colorNonActiveCardLight = `${color.r - this.plugin.settings.colorDiffBetweenActive}, ${color.g - this.plugin.settings.colorDiffBetweenActive}, ${color.b - this.plugin.settings.colorDiffBetweenActive}`; 338 | this.plugin.saveData(this.plugin.settings) 339 | this.plugin.refresh(); 340 | }; 341 | } 342 | ); 343 | } 344 | 345 | addSettingActiveCardColorDark(): void { 346 | new Setting(this.containerEl) 347 | .setName("Active Card Color") 348 | .controlEl.createEl( 349 | "input", 350 | { 351 | type: "color", 352 | value: rgbToHex(this.plugin.settings.colorActiveCardDark) 353 | }, 354 | (el) => { 355 | el.value = rgbToHex(this.plugin.settings.colorActiveCardDark); 356 | el.oninput = ({ target }) => { 357 | let color = hexToRgb((target as HTMLInputElement).value); 358 | 359 | if (!color) return; 360 | this.plugin.settings.colorActiveCardDark = `${color.r}, ${color.g}, ${color.b}`; 361 | this.plugin.settings.colorNonActiveCardDark = `${color.r - this.plugin.settings.colorDiffBetweenActive}, ${color.g - this.plugin.settings.colorDiffBetweenActive}, ${color.b - this.plugin.settings.colorDiffBetweenActive}`; 362 | this.plugin.saveData(this.plugin.settings) 363 | this.plugin.refresh(); 364 | }; 365 | } 366 | ); 367 | } 368 | 369 | addSettingCardTitleEdgeColorDark(): void { 370 | new Setting(this.containerEl) 371 | .setName("Title Card Edge Color") 372 | .controlEl.createEl( 373 | "input", 374 | { 375 | type: "color", 376 | value: rgbToHex(this.plugin.settings.colorTitleCardEdgeDark) 377 | }, 378 | (el) => { 379 | el.value = rgbToHex(this.plugin.settings.colorTitleCardEdgeDark); 380 | el.oninput = ({ target }) => { 381 | let color = hexToRgb((target as HTMLInputElement).value); 382 | 383 | if (!color) return; 384 | this.plugin.settings.colorTitleCardEdgeDark = `${color.r}, ${color.g}, ${color.b}`; 385 | this.plugin.saveData(this.plugin.settings) 386 | this.plugin.refresh(); 387 | }; 388 | } 389 | ); 390 | } 391 | 392 | addSettingCardTitleEdgeColorLight(): void { 393 | new Setting(this.containerEl) 394 | .setName("Title Card Edge Color") 395 | .controlEl.createEl( 396 | "input", 397 | { 398 | type: "color", 399 | value: rgbToHex(this.plugin.settings.colorTitleCardEdgeLight) 400 | }, 401 | (el) => { 402 | el.value = rgbToHex(this.plugin.settings.colorTitleCardEdgeLight); 403 | el.oninput = ({ target }) => { 404 | let color = hexToRgb((target as HTMLInputElement).value); 405 | 406 | if (!color) return; 407 | this.plugin.settings.colorTitleCardEdgeLight = `${color.r}, ${color.g}, ${color.b}`; 408 | this.plugin.saveData(this.plugin.settings) 409 | this.plugin.refresh(); 410 | }; 411 | } 412 | ); 413 | } 414 | 415 | addSettingCardTitleBackgroundColorLight(): void{ 416 | new Setting(this.containerEl) 417 | .setName("Title Card Background Color") 418 | .controlEl.createEl( 419 | "input", 420 | { 421 | type: "color", 422 | value: rgbToHex(this.plugin.settings.colorTitleCardBackGroundLight) 423 | }, 424 | (el) => { 425 | el.value = rgbToHex(this.plugin.settings.colorTitleCardBackGroundLight); 426 | el.oninput = ({ target }) => { 427 | let color = hexToRgb((target as HTMLInputElement).value); 428 | 429 | if (!color) return; 430 | this.plugin.settings.colorTitleCardBackGroundLight = `${color.r}, ${color.g}, ${color.b}`; 431 | this.plugin.saveData(this.plugin.settings) 432 | this.plugin.refresh(); 433 | }; 434 | } 435 | ); 436 | } 437 | 438 | addSettingCardTitleBackgroundColorDark(): void { 439 | new Setting(this.containerEl) 440 | .setName("Title Card Background Color") 441 | .controlEl.createEl( 442 | "input", 443 | { 444 | type: "color", 445 | value: rgbToHex(this.plugin.settings.colorTitleCardBackGroundDark) 446 | }, 447 | (el) => { 448 | el.value = rgbToHex(this.plugin.settings.colorTitleCardBackGroundDark); 449 | el.oninput = ({ target }) => { 450 | let color = hexToRgb((target as HTMLInputElement).value); 451 | 452 | if (!color) return; 453 | this.plugin.settings.colorTitleCardBackGroundDark = `${color.r}, ${color.g}, ${color.b}`; 454 | this.plugin.saveData(this.plugin.settings) 455 | this.plugin.refresh(); 456 | }; 457 | } 458 | ); 459 | } 460 | 461 | // SLIDER setting 462 | // new Setting(containerEl) 463 | // .setName('Diff Between Active & NonActive Cards') 464 | // .setDesc('Spcifiy Color difference between active & non active cards. Set 0 to diable "Attention pane"') 465 | // .addSlider(slider => slider 466 | // .setLimits(100, 100, 5) 467 | // .setValue(this.plugin.settings.colorDiffBetweenActive) 468 | // .onChange((value) => { 469 | // this.plugin.settings.colorDiffBetweenActive = value; 470 | // let activeColorLight = hexToRgb(rgbToHex(this.plugin.settings.colorActiveCardDark)); 471 | // let activeColorDark = hexToRgb(rgbToHex(this.plugin.settings.colorActiveCardDark)); 472 | // this.plugin.settings.colorNonActiveCardLight = `${activeColorLight.r - value}, ${activeColorLight.g - value}, ${activeColorLight.b - value}`; 473 | // this.plugin.settings.colorNonActiveCardDark = `${activeColorDark.r - value}, ${activeColorDark.g - value}, ${activeColorDark.b - value}`; 474 | // this.plugin.saveData(this.plugin.settings); 475 | // this.plugin.refresh(); 476 | // }) 477 | // ); 478 | 479 | addSettingDiffBetActiveNonactive(): void { 480 | new Setting(this.containerEl) 481 | .setName('Diff Between Active & NonActive Cards') 482 | .setDesc('Set Color difference between active & non active cards. Set this value 0 to diable "Attention pane". Value range: "-255~255".') 483 | .addText(text => text.setPlaceholder('Default: 0') 484 | .setValue((this.plugin.settings.colorDiffBetweenActive || '') + '') 485 | .onChange((value) => { 486 | let nu = Number(value) 487 | this.plugin.settings.colorDiffBetweenActive = nu; 488 | let activeColorLight = hexToRgb(rgbToHex(this.plugin.settings.colorActiveCardLight)); 489 | let activeColorDark = hexToRgb(rgbToHex(this.plugin.settings.colorActiveCardDark)); 490 | this.plugin.settings.colorNonActiveCardLight = `${activeColorLight.r - nu}, ${activeColorLight.g - nu}, ${activeColorLight.b - nu}`; 491 | this.plugin.settings.colorNonActiveCardDark = `${activeColorDark.r - nu}, ${activeColorDark.g - nu}, ${activeColorDark.b - nu}`; 492 | this.plugin.saveData(this.plugin.settings); 493 | this.plugin.refresh(); 494 | }) 495 | ); 496 | } 497 | 498 | } 499 | 500 | export class CardViewModeCommands { 501 | plugin: CardViewModePlugin; 502 | constructor(plugin: CardViewModePlugin) { 503 | this.plugin = plugin; 504 | } 505 | 506 | addToggleSettingCommand(id:string, name:string, settingName:string) { 507 | this.plugin.addCommand({ 508 | id: id, 509 | name: name, 510 | callback: () => { 511 | // switch the setting, save and refresh 512 | //@ts-ignore 513 | this.plugin.settings[settingName] = !this.plugin.settings[settingName]; 514 | this.plugin.saveData(this.plugin.settings); 515 | this.plugin.refresh(); 516 | } 517 | }); 518 | } 519 | 520 | addCommands(): void { 521 | this.plugin.addCommand({ 522 | id: 'toggle-card-view-mode', 523 | name: 'Toggle Card View', 524 | callback: () => { 525 | // switch the disabled setting and save 526 | this.plugin.settings.disabled = !this.plugin.settings.disabled; 527 | this.plugin.saveData(this.plugin.settings); 528 | 529 | this.plugin.settings.disabled ? this.plugin.disable() : this.plugin.enable(); 530 | } 531 | }); 532 | 533 | this.addToggleSettingCommand('toggle-card-title', 'Toggle Title Card', 'cardTitle'); 534 | } 535 | } 536 | 537 | 538 | function hexToRgb(hex: string) { 539 | let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); 540 | 541 | return result 542 | ? { 543 | r: parseInt(result[1], 16), 544 | g: parseInt(result[2], 16), 545 | b: parseInt(result[3], 16) 546 | } 547 | : null; 548 | } 549 | function componentToHex(c: number) { 550 | var hex = c.toString(16); 551 | return hex.length == 1 ? "0" + hex : hex; 552 | } 553 | function rgbToHex(rgb: string) { 554 | let result = /^(\d+),\s?(\d+),\s?(\d+)/i.exec(rgb); 555 | if (!result || !result.length) { 556 | return ""; 557 | } 558 | return `#${componentToHex(Number(result[1]))}${componentToHex( 559 | Number(result[2]) 560 | )}${componentToHex(Number(result[3]))}`; 561 | } 562 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* ---------------------------------------------- */ 2 | /* SCSS "Card View & Attention Pane" */ 3 | /* ---------------------------------------------- */ 4 | /* 5 | # changelog 6 | ## v0.4.0 7 | - fixed sidebar tab background color 8 | ## v0.4.1 9 | - modidified background-color to make outline & link panes or etc. clearly visible 10 | - main colors(background & cards) can be changed in the setting tab 11 | ## v0.4.5 12 | - fixed note title width 13 | ## v0.4.6 14 | - fixed note title card width in edit mode 15 | ## v0.4.7 16 | - made style compatible with Banner plugin 17 | ## v0.4.8 18 | - fixed banner style 19 | ## v0.4.9 20 | - added several option items(drop shadow, title edge color in the both mode) 21 | */ 22 | 23 | 24 | /* ---------------------------------------------- */ 25 | /* custom css properties */ 26 | /* ---------------------------------------------- */ 27 | :root { 28 | --cardview-side-padding: 0px; 29 | --cardview-preview-mode-minimum-size: 15px; 30 | --cardview-card-boarder-radius: 8px; 31 | 32 | // disable font matching → changed them to '--default-font' 33 | --cardview-embedded-title-font-size: 27px; 34 | --cardview-embedded-title-border-right-width: 6px; 35 | --cardview-embedded-title-boarder-radius: 5px; 36 | --cardview-embedded-title-border-padding-top: 0px; 37 | --cardview-embedded-title-border-padding-bottom: 0px; 38 | 39 | --cardview-embedded-title-space-btw-card: -1px; 40 | --cardview-embedded-title-border-right-color: rgb(227, 76, 38); 41 | --cardview-embedded-title-border-right-color-edit: red; 42 | --cardview-embedded-title-border-right-color-preview: green; 43 | --cardview-debug-color-embedded-note-title-edit: red; 44 | --cardview-border-color: white; 45 | 46 | /* for debugging */ 47 | --cardview-shadow: 0px 10px 50px rgba(0, 0, 0, 0.5); 48 | /* --cardview-debug-color-embedded-note-title-preview: #198415; */ 49 | // --test-color: rgb(123, 230, 1); 50 | 51 | // tool 52 | // var(--background-modifier-border); 53 | // --background-modifier-border 54 | 55 | } 56 | 57 | .theme-dark { 58 | // --cardview-card-color-active: rgb(71, 71, 71); 59 | // --cardview-card-color-non-active: rgb(37, 37, 37); 60 | // --cardview-background-color-default: rgb(94, 94, 94); 61 | 62 | --cardview-shadow-active: 0px 0px 10px rgba(0, 0, 0, 0.5); 63 | --cardview-shadow-non-active: 0px 0px 0px rgba(0, 0, 0, 0.7); 64 | 65 | --header-color-background: rgb(0, 0, 0); 66 | } 67 | 68 | .theme-light { 69 | // these colors can be changed in the setting tab 70 | // --cardview-card-color-active: rgb(255, 255, 255); 71 | // --cardview-card-color-non-active: rgb(230, 230, 230); 72 | // --cardview-background-color-default: rgb(255, 255, 255); 73 | 74 | --cardview-shadow-active: 0px 0px 10px rgba(128, 128, 128, 0.3); 75 | --cardview-shadow-non-active: 0px 0px 15px rgba(128, 128, 128, 0.25); 76 | 77 | --header-color-background: rgb(242, 242, 242); 78 | } 79 | 80 | 81 | body.plugin-card-view-mode { 82 | 83 | /* ---------------------------------------------- */ 84 | /* card view basic feature */ 85 | /* ---------------------------------------------- */ 86 | .CodeMirror-sizer .CodeMirror-lines>div[role="presentation"], 87 | .markdown-preview-view .markdown-preview-sizer.markdown-preview-section { 88 | /* sepfify how to color padding */ 89 | background-clip: border-box; 90 | background-color: var(--cardview-background-color-default); 91 | border-radius: var(--cardview-card-boarder-radius); 92 | 93 | /* modify space between card and embeded-note-title's header */ 94 | margin-top: 15px !important; 95 | /* space under card */ 96 | padding-bottom: var(--cardview-preview-mode-minimum-size) !important; 97 | } 98 | 99 | /* ---------------------------------------------- */ 100 | /* preview mode */ 101 | /* ---------------------------------------------- */ 102 | /* preview mode modificaition */ 103 | .markdown-preview-view .markdown-preview-sizer.markdown-preview-section { 104 | padding-right: 20px; 105 | padding-left: 18px; 106 | border: 1px solid var(--cardview-border-color); 107 | } 108 | 109 | /* preview mode margin*/ 110 | .markdown-preview-view { 111 | padding-right: calc(var(--cardview-side-padding) + 26px); 112 | padding-left: calc(var(--cardview-side-padding) + 15px); 113 | } 114 | 115 | /* for metadata */ 116 | .markdown-preview-view .markdown-preview-sizer.markdown-preview-section { 117 | padding-top: 15px; 118 | } 119 | 120 | 121 | 122 | /* ---------------------------------------------- */ 123 | /* editor mode */ 124 | /* ---------------------------------------------- */ 125 | /* edit mode modification */ 126 | .CodeMirror-sizer .CodeMirror-lines>div[role="presentation"] { 127 | padding-right: 5px; 128 | margin-left: 15px; 129 | margin-right: 26px; 130 | border: 1px solid var(--cardview-border-color); 131 | } 132 | 133 | /* editor mode margin */ 134 | .view-content .markdown-source-view.mod-cm5 { 135 | padding-right: var(--cardview-side-padding); 136 | padding-left: var(--cardview-side-padding); 137 | } 138 | 139 | 140 | /* ---------------------------------------------- */ 141 | /* attention-pane */ 142 | /* ---------------------------------------------- */ 143 | /* change color of active pane */ 144 | /* background color of active pane */ 145 | .workspace-leaf.mod-active .view-content { 146 | background-color: var(--cardview-background-color-default); 147 | } 148 | 149 | /* background color of non-active pane */ 150 | /* workspace tabs have data-type properties, it's necessary to deny them */ 151 | .workspace-split:not(.mod-right-split) .workspace-leaf:not(.mod-active) .workspace-leaf-content .view-content { 152 | background-color: var(--cardview-background-color-default); 153 | } 154 | 155 | /* active pane card color and shadow */ 156 | .workspace-leaf.mod-active .view-content .CodeMirror-sizer .CodeMirror-lines>div[role="presentation"], 157 | .workspace-leaf.mod-active .view-content .markdown-preview-view .markdown-preview-sizer.markdown-preview-section { 158 | background-color: var(--cardview-card-color-active); 159 | } 160 | 161 | /* non-active pane card color and shadow */ 162 | .workspace-leaf:not(.mod-active) .view-content .CodeMirror-sizer .CodeMirror-lines>div[role="presentation"], 163 | .workspace-leaf:not(.mod-active) .view-content .markdown-preview-view .markdown-preview-sizer.markdown-preview-section { 164 | background-color: var(--cardview-card-color-non-active); 165 | } 166 | 167 | 168 | /* ---------------------------------------------- */ 169 | /* embeded note modification */ 170 | /* ---------------------------------------------- */ 171 | /* title position modification */ 172 | .markdown-embed-title { 173 | margin-top: 0px; 174 | padding-bottom: 0px; 175 | text-align: center; 176 | font-size: 20px; 177 | height: 2.3rem; 178 | } 179 | 180 | /* boundary margin */ 181 | .markdown-embed .markdown-preview-view { 182 | padding: 0px 10px 10px 10px; 183 | } 184 | 185 | /* link icon */ 186 | .file-embed-link svg, 187 | .markdown-embed-link svg { 188 | width: 16px; 189 | opacity: 1; 190 | } 191 | 192 | 193 | /* ---------------------------------------------- */ 194 | /* horizontal line modification */ 195 | /* ---------------------------------------------- */ 196 | .markdown-preview-view hr::after { 197 | content: '§'; 198 | display: inline-block; 199 | position: absolute; 200 | left: 50%; 201 | transform: translate(-50%, -50%) rotate(60deg); 202 | transform-origin: 50% 50%; 203 | padding: 0.5rem; 204 | color: var(--text-sub-accent); 205 | } 206 | 207 | .workspace-leaf.mod-active .view-content .markdown-preview-view hr::after { 208 | background-color: var(--cardview-card-color-active) !important; 209 | } 210 | 211 | .workspace-leaf:not(.mod-active) .view-content .markdown-preview-view hr::after { 212 | background-color: var(--cardview-card-color-non-active) !important; 213 | } 214 | 215 | /* ---------------------------------------------- */ 216 | /* popover modification */ 217 | /* ---------------------------------------------- */ 218 | .popover.hover-popover { 219 | background-color: var(--cardview-background-color-default); 220 | 221 | .markdown-embed .markdown-preview-view .markdown-preview-sizer.markdown-preview-section { 222 | background-color: var(--cardview-card-color-non-active); 223 | } 224 | 225 | hr::after { 226 | background-color: var(--cardview-card-color-non-active) !important; 227 | } 228 | } 229 | 230 | // Credits to https://github.com/TClark1011 231 | img { 232 | border-radius: 4px; 233 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 234 | background-color: var(--background-secondary); 235 | /* Background color so PNGs with transparent backgrounds don't look weird */ 236 | } 237 | 238 | /* ---------------------------------------------- */ 239 | /* banner plugin modification */ 240 | /* ---------------------------------------------- */ 241 | .obsidian-banner-wrapper { 242 | margin-top: calc(var(--banner-height) - 30px); 243 | 244 | &>.obsidian-banner { 245 | // images fit with card size 246 | padding-left: 15px !important; 247 | padding-right: 26px !important; 248 | padding-top: 35px !important; 249 | margin-top: 0px; 250 | 251 | img.banner-image { 252 | border-radius: var(--cardview-card-boarder-radius) var(--cardview-card-boarder-radius) 0px 0px !important; 253 | } 254 | } 255 | } 256 | 257 | &.embedded-note-titles { 258 | .obsidian-banner-wrapper { 259 | &>.obsidian-banner { 260 | margin-top: 64px; 261 | } 262 | } 263 | } 264 | 265 | &.plugin-card-view-mode-remove-pane-boudaries { 266 | 267 | /* ---------------------------------------------- */ 268 | /* remove pane boundaries */ 269 | /* ---------------------------------------------- */ 270 | .workspace-split.mod-vertical>*>.workspace-leaf-resize-handle, 271 | .workspace-split.mod-left-split>.workspace-leaf-resize-handle { 272 | background: transparent; 273 | border-right: 1px solid var(--background-modifier-border); 274 | width: 2px !important; 275 | } 276 | 277 | /* right boundary */ 278 | .workspace-split.mod-vertical>.workspace-leaf { 279 | padding: 0px; 280 | } 281 | 282 | /* space between header titles */ 283 | .workspace-split.mod-vertical>*>.workspace-leaf-resize-handle { 284 | border-right: 0px !important; 285 | } 286 | 287 | } 288 | 289 | &.plugin-card-view-mode-hide-scrollbar { 290 | /* hide scrollbar */ 291 | ::-webkit-scrollbar { 292 | display: none !important; 293 | } 294 | } 295 | 296 | &.plugin-card-view-mode-dropshadow { 297 | 298 | .CodeMirror-sizer .CodeMirror-lines>div[role="presentation"], 299 | .markdown-preview-view .markdown-preview-sizer.markdown-preview-section { 300 | box-shadow: var(--cardview-shadow); 301 | } 302 | 303 | /* active pane card shadow */ 304 | .workspace-leaf.mod-active .view-content .CodeMirror-sizer .CodeMirror-lines>div[role="presentation"], 305 | .workspace-leaf.mod-active .view-content .markdown-preview-view .markdown-preview-sizer.markdown-preview-section { 306 | box-shadow: var(--cardview-shadow-active); 307 | } 308 | 309 | /* non-active pane card shadow */ 310 | .workspace-leaf:not(.mod-active) .view-content .CodeMirror-sizer .CodeMirror-lines>div[role="presentation"], 311 | .workspace-leaf:not(.mod-active) .view-content .markdown-preview-view .markdown-preview-sizer.markdown-preview-section { 312 | box-shadow: var(--cardview-shadow-active); 313 | } 314 | } 315 | } 316 | 317 | 318 | body.plugin-card-view-mode-cardtitle { 319 | 320 | &.plugin-card-view-mode-dropshadow { 321 | h1[id*="edit"] { 322 | box-shadow: var(--cardview-shadow-active); 323 | } 324 | 325 | .markdown-preview-view.is-readable-line-width>h1 { 326 | box-shadow: var(--cardview-shadow-active); 327 | } 328 | } 329 | 330 | /* ---------------------------------------------- */ 331 | /* embeded note title plugin modification */ 332 | /* ---------------------------------------------- */ 333 | 334 | /* editor mode title */ 335 | &.embedded-note-titles { 336 | 337 | .CodeMirror-scroll>h1 { 338 | width: calc(100% - 91px); // this value is sepcific to my emvironment? 339 | 340 | margin-left: 15px !important; 341 | margin-right: 20px !important; 342 | padding-top: 5px; 343 | padding-bottom: 5px; 344 | padding-right: 20px !important; 345 | // background-color: var(--cardview-card-color-non-active); 346 | } 347 | 348 | /* editor mode title card */ 349 | h1[id*="edit"] { 350 | // color: var(--cardview-debug-color-embedded-note-title-edit); 351 | 352 | font-family: var(--default-font); 353 | font-size: var(--cardview-embedded-title-font-size) !important; 354 | font-weight: bold; 355 | 356 | /* margin-bottom: calc(var(--cardview-embedded-title-space-btw-card) - 40px) !important; */ 357 | margin-top: 15px; 358 | 359 | 360 | padding-top: var(--cardview-embedded-title-border-padding-top); 361 | padding-bottom: var(--cardview-embedded-title-border-padding-bottom); 362 | padding-left: 18px !important; 363 | 364 | 365 | background: var(--header-color-background); 366 | border-left: var(--cardview-embedded-title-border-right-width) solid var(--cardview-embedded-title-border-right-color-edit); 367 | border-radius: var(--cardview-embedded-title-boarder-radius); 368 | } 369 | 370 | // /* preview mode title card */ 371 | .markdown-preview-view.is-readable-line-width>h1 { 372 | color: var(--cardview-debug-color-embedded-note-title-preview); 373 | 374 | font-family: var(--default-font); 375 | font-size: var(--cardview-embedded-title-font-size) !important; 376 | font-weight: bold !important; 377 | 378 | 379 | margin-bottom: calc(var(--cardview-embedded-title-space-btw-card) + 11px) !important; 380 | margin-top: -5px; 381 | margin-left: 0px; 382 | 383 | padding-top: var(--cardview-embedded-title-border-padding-top); 384 | padding-bottom: calc(var(--cardview-embedded-title-border-padding-bottom) + 0px); 385 | padding-left: 18px !important; 386 | padding-right: 0px !important; 387 | 388 | background: var(--header-color-background); 389 | border-left: var(--cardview-embedded-title-border-right-width) solid var(--cardview-embedded-title-border-right-color-preview); 390 | border-radius: var(--cardview-embedded-title-boarder-radius); 391 | } 392 | 393 | // /* margin around fontmatter box */ 394 | .frontmatter-container { 395 | margin-bottom: 13px; 396 | } 397 | 398 | .obsidian-banner-wrapper { 399 | &>.obsidian-banner { 400 | margin-top: 35px; 401 | } 402 | } 403 | } 404 | } 405 | 406 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "inlineSourceMap": true, 5 | "inlineSources": true, 6 | "module": "ESNext", 7 | "target": "es5", 8 | "allowJs": true, 9 | "noImplicitAny": true, 10 | "moduleResolution": "node", 11 | "importHelpers": true, 12 | "lib": [ 13 | "dom", 14 | "es5", 15 | "scripthost", 16 | "es2015" 17 | ] 18 | }, 19 | "include": [ 20 | "**/*.ts" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /versions.json: -------------------------------------------------------------------------------- 1 | { 2 | "0.4.10": "0.12.13", 3 | "0.4.9": "0.12.13", 4 | "0.4.8": "0.12.13", 5 | "0.4.7": "0.12.13", 6 | "0.4.6": "0.12.13", 7 | "0.4.5": "0.12.13", 8 | "0.4.4": "0.12.13", 9 | "0.4.3": "0.12.13", 10 | "0.4.2": "0.12.13", 11 | "0.4.1": "0.12.13", 12 | "0.4.0": "0.12.13" 13 | } 14 | --------------------------------------------------------------------------------