Skip to content

Commit

Permalink
🌠 Fixes, design improvements
Browse files Browse the repository at this point in the history 
Fixes #83
Fixes #82
Fixes #81
+ new styling and stuff
  • Loading branch information
@ceciliamay
ceciliamay committed Mar 6, 2022
1 parent 262aa51 commit 72e40bc
Show file tree
Hide file tree
Showing 19 changed files with 1,207 additions and 580 deletions.
893 changes: 582 additions & 311 deletions obsidian.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion obsidian.css.map
View file

Large diffs are not rendered by default.

15 changes: 0 additions & 15 deletions scss/10_base/_var__global.scss
View file
Expand Up @@ -44,21 +44,6 @@
/* Based on Standard 16px, Ratio 1.388 */
--line-width: 700px;

// --font-scale-000: 0.547em;
// --font-scale-00: 0.676em;
// --font-scale-0: 0.81em;
// --font-scale-0-5: 0.875em;
// --font-scale-1: 1em;
// --font-scale-2: 1.198em;
// --font-scale-3: 1.48em;
// --font-scale-4: 1.774em;
// --font-scale-5: 2.19em;
// --font-scale-6: 2.625em;
// --font-scale-7: 3.242em;
// --font-scale-8: 3.885em;
// --font-scale-9: 4.798em;
// --font-scale-10: 5.75em;

--font-scale-000: 0.547em;
--font-scale-00: 0.676em;
--font-scale-0: 0.81em;
Expand Down
103 changes: 48 additions & 55 deletions scss/20_workspace/_tab-content.scss
View file
Expand Up @@ -38,6 +38,13 @@
}
}

.pane-empty {
color: var(--text-faint);
font-style: italic;
margin: auto auto;
width: 17ch;
}

/*─────────Node Insert Event──────────*/
// Container for Outgoing Links and Backlinks Tab and more
.workspace-split.mod-left-split,
Expand Down Expand Up @@ -67,11 +74,6 @@
overflow: auto;
}

/*─────────Outline Tab──────────*/
.outline {
font-size: var(--font-scale-0-5);
}

/*─────────Search Results──────────*/
.search-result {
&-container:not(.mod-global-search) {
Expand All @@ -85,13 +87,6 @@
var(--scale-0-0)
var(--scale-0-0)
var(--scale-2-8);

.backlink-pane & {
margin: var(--scale-0-0)
var(--scale-0-0)
var(--scale-0-0)
var(--scale-2-8);
}
}

&.search-result {
Expand Down Expand Up @@ -186,8 +181,11 @@
}
}

/*─────────Tree Items for Tabs──────────*/
.search-input-container .search-input-clear-button {
top: 9px;
}

/*─────────Tree Items for Tabs──────────*/
.tree-item-self {
line-height: var(--line-height-0-5);
padding: calc(1px + var(--scale-2-2))
Expand All @@ -204,10 +202,6 @@
font-family: var(--font-code);
font-size: var(--font-scale-0);
}

.outgoing-link-pane & {
font-size: var(--font-scale-0-5);
}
}

& .tree-item-icon {
Expand All @@ -226,43 +220,6 @@
}
}

/* Items in Outline Pane */
.workspace-leaf-content[data-type="outline"] {
.tree-item-self {
padding: calc(1px + var(--scale-2-2))
var(--scale-2-2)
calc(1px + var(--scale-2-2))
calc(5px + var(--scale-8-3));

& .tree-item-icon {
margin-left: -21px;
}
}
}


/* Items in Outgoing Links Pane */
.outgoing-link-item {
font-size: var(--font-scale-0-5);
margin: var(--scale-0-0)
var(--scale-0-0)
var(--scale-0-0)
var(--scale-2-2);

.search-result-container &
.tree-item-self span.tree-item-icon {
margin: var(--scale-0-0)
var(--scale-0-0)
var(--scale-0-0)
calc(-1 * var(--scale-2-2));
}
}

/* Items in Backlinks Pane */
.backlink-pane {
font-size: var(--font-scale-0-5);
}

/*~ Tree Items for Tabs for Light Mode ~*/
.theme-light .tree-item-self {
color: var(--color-l-gray-80);
Expand All @@ -275,7 +232,7 @@

& .tree-item-flair {
color: var(--color-gray-50);
background: var(--color-l-gray-20);
background: var(--color-l-whiter);
}
}

Expand Down Expand Up @@ -327,4 +284,40 @@
}
}
}
}

/* Tree Item Self Light and Dark Mode for Backlink and Outgoing Pane */
body.theme-light .backlink-pane .tree-item-self,
body.theme-light .outgoing-link-pane .tree-item-self,
body.theme-dark .backlink-pane .tree-item-self,
body.theme-dark .outgoing-link-pane .tree-item-self {
color: var(--md-color-text-muted);
background: transparent;

&.is-clickable {
&:hover {
color: var(--md-color-text-normal);
background: transparent;

& .tree-item-flair {
color: var(--md-color-text-normal);
background: transparent;
}
}

& .tree-item-flair {
color: var(--md-color-text-muted);
background: transparent;
}

&:active {
color: var(--md-color-text-faint);
background: transparent;

& .tree-item-flair {
color: var(--md-color-text-faint);
background: transparent;
}
}
}
}
23 changes: 16 additions & 7 deletions scss/30_note/_md-active-line.scss
View file
@@ -1,4 +1,19 @@
/*──────────Active Line──────────*/
:root {
.theme-light {
--md-color-activeline: rgba(255, 255, 255, 0.4);
}

.theme-dark {
--md-color-activeline: rgba(0, 0, 0, 0.18);
}
}

.no-md-activeline.theme-light,
.no-md-activeline.theme-dark {
--md-color-activeline: transparent !important;
}

.workspace-leaf:not(.workspace-leaf.mod-active) {
& .cm-active,
& .CodeMirror-activeline .CodeMirror-linebackground,
Expand All @@ -10,13 +25,7 @@
.CodeMirror-activeline .CodeMirror-linebackground,
.CodeMirror-activeline-gutter,
.cm-active:not(.cm-gutterElement) {
.theme-light & {
background-color: var(--color-l-gray-10);
}

.theme-dark & {
background-color: var(--color-d-black);
}
background: var(--md-color-activeline);
}

// Activeline on Gutter Color (Live Preview)
Expand Down
11 changes: 7 additions & 4 deletions scss/30_note/_md-checkboxes.scss
View file
Expand Up @@ -4,13 +4,12 @@ input[type=checkbox] {
appearance: none;
filter: none;

height: 1.5em;
width: 1.5em;
height: calc(3px + var(--editor-font-size));
width: calc(3px + var(--editor-font-size));
border-radius: var(--scale-2-2);
border: 1px solid var(--text-faint);
padding: 0;
margin: 0;
margin-top: -3px;
margin-left: 6px;

&:hover {
Expand All @@ -20,7 +19,7 @@ input[type=checkbox] {
}

&:checked {
background-position: 3px, center;
background-position: center;
background-size: 72%;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill: %23fff' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/%3E%3C/svg%3E");
Expand Down Expand Up @@ -64,6 +63,10 @@ input[type=checkbox] {
}

/* Source View Checkbox Fix */
.markdown-source-view input.task-list-item-checkbox {
margin-top: -3px;
}

.cm-s-obsidian span.cm-formatting-task {
font-family: var(--font-code);
}
Expand Down
105 changes: 105 additions & 0 deletions scss/30_note/_md-find-replace.scss
View file
@@ -0,0 +1,105 @@
/*──────────Document Search and Replace──────────*/
.markdown-reading-view.is-searching,
.markdown-source-view.is-replacing,
.markdown-source-view.is-searching {
flex-direction: column-reverse;
}

.document {
&-search-container {
height: 44px;
width: 97%;
max-width: 600px;

padding: 1px 2px;
border: 1px solid var(--background-modifier-border);
border-radius: var(--scale-2-4);

margin: var(--scale-2-4) auto;

&.mod-replace-mode {
height: 82px;
padding: 0;
}

.theme-light & {
background: var(--color-l-gray-10);
}

.theme-dark & {
background: var(--color-d-gray-80);
}
}

&-replace {
border-top: 1px solid var(--background-modifier-border);
}

&-search-input.document-search-input,
&-replace-input.document-replace-input {
width: 20%;
margin: var(--scale-2-3)
var(--scale-2-3)
var(--scale-2-3)
var(--scale-2-3);
}

&-search-button.document-search-button {
line-height: 0;
border-radius: var(--scale-2-2);
padding: var(--scale-2-2)
var(--scale-2-3)
var(--scale-2-3)
var(--scale-2-3) !important;
margin: calc(1px + var(--scale-2-3))
var(--scale-2-1)
var(--scale-0-0)
var(--scale-2-1);

&:last-child {
margin-right: var(--scale-2-3);
}

// Styling for Light and Dark Mode
body.theme-light .workspace & {
color: var(--text-on-accent);
background: var(--interactive-accent);

&:hover {
background: var(--interactive-accent-hover);
}
}

body.theme-dark .workspace & {
color: var(--text-on-accent);
background: var(--interactive-accent);

&:hover {
background: var(--interactive-accent-hover);
}
}
}
}

.document-search-close-button {
font-family: Inter, sans-serif;
font-weight: 300;
font-size: var(--scale-8-3);

height: var(--scale-2-8);
width: var(--scale-2-8);
top: 2px;
margin-right: 2px;

transition: var(--duration-superfast)
var(--motion-smooth);
&:before {
&:hover {
color: var(--text-muted);
}

&:active {
color: var(--text-faint);
}
}
}

0 comments on commit 72e40bc

Please sign in to comment.