옵시디언 가이드
추천 플러그인
노트관리방법론
플러그인 사전

다다

옵시디언 활용, 개인 지식 관리

분류 전체보기 (352)

로그인

로그아웃 글쓰기 관리

csssnippet 24

[CSS Snippet] 파일 탐색기 폴더 색상 변경하기 파일 탐색기 폴더 색상 변경하는 CSS Snippet입니다. 예시 CSS Snippet .theme-light, .theme-dark { --Fold0: #ffe2e2; --Fold1: #ffdee9; --Fold2: #f6e1ff; --Fold3: #e9dfff; --Fold4: #e1e5ff; --Fold5: #d4eaff; --Fold6: #cdedff; --Fold7: #ccf2f7; --Fold8: #d5f8f4; --Fold9: #d8f8da; --FoldA: #ecffdb; --FoldB: #f4fbd2; } /* ===folder-colorful-order ============ */ .nav-folder.mod-root>.nav-folder-children .nav-folder-title..
Homemade Source/Css Snippets 2024.04.02 1
[CSS Snippet] 이미지 확대기능 구현하기 이미지 확대을 CSS Snippet으로 구현 예시 CSS Snippet @media (hover: hover) { .image-embed.is-loaded img, .markdown-preview-view .internal-embed:not(:has(> img)) img { line-height: 0; background-color: transparent; } img:not(.callout-content img):not(.thumbnailImage):not( img .community-item-screenshot ) { max-width: 100%; cursor: zoom-in; } body img:active:not(.callout-content img):not(.thumbnailImage) { bac..
Homemade Source/Css Snippets 2024.04.01 0
[CSS Snippet] 선택한 텍스트의 색상 변경하기 선택한 텍스트의 색상 변경하는 CSS Snippet입니다. 예시 CSS Snippet ::selection { color: white !important; background: deeppink !important; }
Homemade Source/Css Snippets 2024.03.29 0
[CSS Snippet] 편집모드에서 현재 줄 강조하기 Obsidian의 기본 테마에는 편집 모드에서 현재 줄 강조하는 기능이 없습니다. CSS Snippet을 통해 변경할 수 있습니다. 예시 Css Snippet .markdown-source-view.mod-cm6 .cm-line.cm-active{ background-color: rgba(var(--mono-rgb-100), 0.05) } .markdown-source-view.mod-cm6 .cm-lineNumbers .cm-gutterElement.cm-active { font-weight: 600; color: grey; }
Homemade Source/Css Snippets 2024.03.24 0
[CSS Snippet] Task 완료시 취소선 안보이게 하기 Task 완료시 취소선 안보이게 하는 CSS Snippet입니다. 예시 CSS Snippet .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"], .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"] { text-decoration: unset !important; } ul > li.task-list-item[data-task="x"], ul > li.task-list-item[data-task="X"] { text-decoration: unset !important; }
Homemade Source/Css Snippets 2024.02.29 0
[Css Snippet] 상태바 스타일 변경하기 상태 표시줄에 투명도를 추가하여 눈에 띄지 않게 만듭니다. 마우스를 올리면 투명도가 복원됩니다. 테두리 제거, 호버 복원 예시 Css Snippet .status-bar { border-width: 0; opacity: .5; transition: all .2s linear; } .status-bar:hover { opacity: 1; border-width: var(--status-bar-border-width); }
Homemade Source/Css Snippets 2024.02.29 0
[CSS Snippet] 외부 링크 아이콘 표시하기 외부 링크 아이콘 표시하는 CSS Snippet입니다. 예시 CSS 코드 .external-link::before { padding-right: 3px; vertical-align: middle; height: 16px; width: 16px; padding-top: 0px; } .external-link[href*="."]::before { content: url("data:image/svg+xml,%3Csvg t='1631866977643' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='32115' data-darkreader-inline-fill='' width='20' height..
Homemade Source/Css Snippets 2024.02.29 0
[CSS Snippet] 체크박스를 원으로 변경하기 옵시디언의 체크박스 스타일을 원으로 변경하는 CSS snippet입니다. 예시 CSS 코드 input[type="checkbox"], .cm-formatting-task { -webkit-appearance: none; appearance: none; border-radius: 50%; border: 1px solid var(--text-faint); padding: 0; vertical-align: middle; } .cm-s-obsidian span.cm-formatting-task { color: transparent; width: 1.25em !important; height: 1.25em; display: inline-block; } .markdown-preview-view .task-list-..
Homemade Source/Css Snippets 2024.02.28 0
[CSS Snippet] Preview 박스 사이즈 변경하기 Preview 박스 사이즈 변경하는 CSS Snippet입니다. 예시 CSS 코드 .popover.hover-popover > .markdown-embed{ width: 500px; height: 700px; } width와 height의 크기를 원하는대로 변경해서 사용하세요.
Homemade Source/Css Snippets 2024.02.28 0
[CSS Snippet] 이미지 정렬하기 이미지 링크에 구분자를 넣어서 이미지 정렬하는 CSS snippet입니다. 예시 CSS .markdown-preview-view .image-embed[src*="#center"] { display: block; margin-left: auto; margin-right: auto; width: 50%; } .markdown-preview-view .image-embed[src*="#left"] { display: block; margin-left: 0; margin-right: auto; width: 50%; } .markdown-preview-view .image-embed[src*="#right"] { display: block; margin-left: auto; margin-right: 0; wid..
Homemade Source/Css Snippets 2024.02.28 0
[CSS Snippet] 구분선(---) 스타일 변경하기 구분선(hr) 스타일을 변경하는 CSS Snippet 입니다. 예시 CSS 코드 .markdown-preview-view hr, .markdown-source-view div.hr.cm-line hr { border-top: 1px solid; border-image: linear-gradient(to right, #ef201c, #e96036,#e6ef82, #e09a29, #41e249, #26c6da, #4e5ff2, #7e57c2, #de5fb8) 7; }
Homemade Source/Css Snippets 2024.02.28 0
[CSS Snippet] 클래식 스타일 callout 옵시디언 초기 버전의 callout 스타일입니다. 예시 CSS 코드 .callout { --callout-radius: 2px; padding: 0; background-color:var(--admonition-bg-color); border-left: solid 4px rgb(var(--callout-color)); } .callout .callout-title { padding: 6px; background-color: rgba(var(--callout-color), 0.4); } .callout .callout-content { padding: 5px 15px; background-color: rgba(var(--callout-color), 0.1); }
Homemade Source/Css Snippets 2024.02.26 0
[CSS Snippet] 윈도우 스타일 callout 윈도우 스타일 callout Snippet 입니다. 예시 CSS 코드 .callout { border:none; box-shadow: inset 0 0 0 2px rgba(var(--callout-color), 0.25), 0px 0.5px 1px 0.5px rgba(0, 0, 0, 0.1) !important; padding: 0; background-color:var(--admonition-bg-color); } .callout .callout-title { padding: 6px; background-color: rgba(var(--callout-color), 0.4); } .callout .callout-content { padding: 5px 15px; background-color: rgba(..
Homemade Source/Css Snippets 2024.02.26 0
[CSS Snippet] Vicious 테마 callout Vicious 테마 callout 스타일 CSS Snippet입니다. 예시 CSS 코드 .theme-dark, .theme-light { --callout-title-padding: 4px 12px; --callout-padding: 0; --callout-radius: var(--radius-m); } /*================================================*/ /* Root Colors /*================================================*/ :root { --800: #000000e0; --800-RGB: 8, 9, 14; --700: #17181e; --700-RGB: 23, 24, 30; --600: #292a2f; --60..
Homemade Source/Css Snippets 2024.02.25 0
[CSS Snippet] 단락 앞과 뒤의 간격을 사용자 정의 단락 앞과 뒤의 간격을 Style Settings으로 정의하는 Css snippet입니다. 이 스니펫은 Things 테마의 단락조절부분만 떼내온 것으로 편집모드에서 단락을 조절할 수 있습니다. Style Settings 에서 조절할 수 있다는 장점이 있습니다. 예시 Css Snippet body { --paragraph-margin-top:10px; --paragraph-margin-bottom:5px; } div:not(.HyperMD-header,.HyperMD-list-line).cm-line { padding-top:var(--paragraph-margin-top) !important; padding-bottom:var(--paragraph-margin-bottom) !important; } di..
Homemade Source/Css Snippets 2024.02.24 0

1 2

Obsidian Page

옵시디언 기초 가이드

노트 관리 방법론

플러그인 가이드

플러그인 사전

최근 글

인기 글

© Copyright 2024 Jnik

Uploading...

티스토리툴바