Obsidian Custom CSS Snippet: Card view & Attention pane (extend note area based on the contents) ノートの情報量に応じて表示領域を拡大していくカード表示スニペット

_card-view&attention-pane.css

/* === custome css property === */
:root {
    --cardnote-side-padding: 18px;
    --cardnote-preview-mode-minimum-size: 15px;

    /* for debugging */
    --cardnote-debugging-color: #ee2b86;
    --cardnote-shadow: 0px 10px 50px rgba(0, 0, 0, 0.5);
}

.theme-dark {
    --cardnote-card-color: #000000;
    --cardnote-card-color-active: #474747;
    --cardnote-card-color-non-active: #252525;

    --cardnote-background-color-active: #919191;
    --cardnote-background-color-non-active: #050505;
    --cardnote-shadow-active: 0px 0px 10px rgba(0, 0, 0, 0.5);
    --cardnote-shadow-non-active: 0px 0px 0px rgba(0, 0, 0, 0.7);
}

.theme-light {
    --cardnote-card-color: #e6e6e6;
    --cardnote-card-color-active: #ffffff;
    --cardnote-card-color-non-active: #e6e6e6;

    --cardnote-background-color-active: #ffffff;
    --cardnote-background-color-non-active: #dfdfdf;
    --cardnote-shadow-active: 0px 0px 10px rgba(128, 128, 128, 0.3);
    --cardnote-shadow-non-active: 0px 0px 15px rgba(128, 128, 128, 0.25);
}

/* === custome css property === */


.CodeMirror-sizer .CodeMirror-lines>div[role="presentation"],
.markdown-preview-view .markdown-preview-sizer.markdown-preview-section {
    /* sepfify how to color padding */
    background-clip: border-box;
    /* card background color */
    background-color: var(--cardnote-background-color-active);
    /* default card shadow */
    box-shadow: var(--cardnote-shadow);

    /* modify space between card and embeded-note-title's header */
    margin-top: 15px;
    /* space under card */
    padding-bottom: var(--cardnote-preview-mode-minimum-size) !important;

    border-radius: 8px;
}


/* === preview mode === */
/* preview mode modificaition */
.markdown-preview-view .markdown-preview-sizer.markdown-preview-section {
    padding-right: 20px;
    padding-left: 20px;
}

/* preview mode margin*/
.markdown-preview-view {
    padding-right: var(--cardnote-side-padding);
    padding-left: var(--cardnote-side-padding);
}

/* for metadata */
.markdown-preview-view .markdown-preview-sizer.markdown-preview-section {
    padding-top: 15px;
}

/* === preview mode === */



/* === editor mode === */
/* edit mode modification */
.CodeMirror-sizer .CodeMirror-lines>div[role="presentation"] {
    padding-right: 5px;
    margin-left: 15px;
    margin-right: 15px;

}

/* editor mode margin */
.view-content .markdown-source-view.mod-cm5 {
    padding-left: 0px;
    padding-right: 0px;
}

/* editor mode title (embeded-note-title) */
.CodeMirror-scroll>h1 {
    margin-left: 15px !important;
    margin-right: 15px !important;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 83%;
    background-color: var(--cardnote-card-color-non-active);
}

/* === editor mode === */


/* === delete pane boundary === */
.workspace-split.mod-vertical>*>.workspace-leaf-resize-handle,
.workspace-split.mod-left-split>.workspace-leaf-resize-handle {
    background: transparent;
    border-right: 1px solid var(--background-modifier-border);
    width: 2px !important;
}

/* right boundary */
.workspace-split.mod-vertical>.workspace-leaf {
    padding: 0px;
}

/* space between header titles */
.workspace-split.mod-vertical>*>.workspace-leaf-resize-handle {
    border-right: 0px !important;
}

/* hide scrollbar */
::-webkit-scrollbar {
    display: none !important;
}

/* ===  delete pane boundary === */




/* ============================ attention-pane ========================== */
/* 
change color of active pane 
*/
/* background color of active pane */
.workspace-leaf.mod-active .view-content {
    background-color: var(--cardnote-background-color-active);
}

/* background color of non-active pane */
.workspace-leaf:not(.mod-active) .view-content {
    background-color: var(--cardnote-background-color-active);
}

/* active pane card color and shadow */
.workspace-leaf.mod-active .view-content .CodeMirror-sizer .CodeMirror-lines>div[role="presentation"],
.workspace-leaf.mod-active .view-content .markdown-preview-view .markdown-preview-sizer.markdown-preview-section {
    background-color: var(--cardnote-card-color-active);
    box-shadow: var(--cardnote-shadow-active);
}

/* non-active pane card color and shadow */
.workspace-leaf:not(.mod-active) .view-content .CodeMirror-sizer .CodeMirror-lines>div[role="presentation"],
.workspace-leaf:not(.mod-active) .view-content .markdown-preview-view .markdown-preview-sizer.markdown-preview-section {
    background-color: var(--cardnote-card-color-non-active);
    box-shadow: var(--cardnote-shadow-active);
}

/* ============================ attention-pane ========================== */




/* === embeded note modification↓ === */
/* title position modification */
.markdown-embed-title {
    margin-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    font-size: 20px;
    height: 2.3rem;
}

/* boundary margin */
.markdown-embed .markdown-preview-view {
    padding: 0px 10px 10px 10px;
}

/* link icon */
.file-embed-link svg,
.markdown-embed-link svg {
    width: 16px;
    opacity: 1;
}

/* === embeded note modification↑ === */


/* === horizontal line modification↓ === */
.workspace-leaf.mod-active .view-content .markdown-preview-view hr::after {
    background-color: var(--cardnote-card-color-active) !important;
}

.workspace-leaf:not(.mod-active) .view-content .markdown-preview-view hr::after {
    background-color: var(--cardnote-card-color-non-active) !important;
}

/* === horizontal line modification↑ === */

card-view&attention-pane v0.3 update

• Light mode & Dark mode
• Attention pane(focus on the active pane & gray out other notes)
• Embedded note card style
• Fixed cursor position
• Hide Pane boundaries
• Compatible with Embedded note title plugin & Sliding Pane plugin