updated styling

varunneal · Jan 4, 2025 · 1ad4829 · 1ad4829
1 parent b595306
commit 1ad4829
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -33,6 +33,7 @@ This plugin is _not_ built to be compatible with any other calendar or journalin
 I recommend you disable or uninstall any before testing this plugin. 
 
 
+
 ### Daily Note Name and Location
 
 The name for Daily Notes is specified in the settings for your Daily Note. 
@@ -42,19 +43,36 @@ For reference, my date format looks like this: `YYYY/MMMM/MMM-D-YYYY`.
 
 ## Customization
 
-You can overwrite anything in `styles.css` in your `obsidian.css` file.
+I can't guarantee every accent color/light mode will look great.
+
+You can overwrite anything in `styles.css` in your `obsidian.css` file. Below are some defaults you may want to overwrite:
 
 ```css
 /* day-one-calendar-plugin */
 
 #calendar-container {
     --color-background-day: var(--interactive-normal);
+    --color-background-day-hover: var(--interactive-normal-hover);
+
+    --color-text-day: var(--text-normal);
+    --color-text-day-hover: var(--text-normal);
+
+    --color-background-day-note: var(--accent);
+    --color-background-day-note-hover: var(--accent-light);
+
+    --color-text-has-note: var(--text-on-accent);
+    --color-text-has-note-hover: var(--text-on-accent);
+
+    --color-today-dot: var(--color-base-100);
+
+    --color-border-day-active: var(--color-orange);
+    --color-border-day-hover: rgba(var(--color-orange-rgb), 0.8);
 }
 ```
 
+[Obsidian CSS color vars](https://docs.obsidian.md/Reference/CSS+variables/Foundations/Colors#Extended+colors) for reference.
 
-> **Note:** It's especially important when overriding the classes to prefix them with `#calendar-container` to avoid any unexpected changes within Obsidian!
-
+> **Note:** Prefix vars/classes with `#calendar-container` to avoid any unexpected changes within Obsidian!
 
 
 ## To Do

diff --git a/src/components/ContextPanel.svelte b/src/components/ContextPanel.svelte
@@ -22,7 +22,6 @@
   $: if (currentNote) {
     if ($activeFile.uid === getDateUIDFromFile(currentNote)) {
       content = $activeFile.content;
-      console.log("active file content is", content);
     } else {
       loadNoteContent && loadNoteContent(currentNote).then((c) => {
         content = c;
@@ -77,14 +76,17 @@
     }
 
     .current-note:hover {
-        background: var(--interactive-hover);
-        border-color: var(--interactive-accent);
+        background-color: var(--interactive-hover);
+        /*background: var(--interactive-hover);*/
+        /*border-color: var(--interactive-accent);*/
     }
 
     .current-note:active {
-        background: var(--interactive-accent);
-        color: var(--text-on-accent);
-        transform: translateY(1px);
+        background: var(--interactive-normal);
+        border: 1px solid var(--color-base-70);
+        /*background: var(--interactive-accent);*/
+        /*color: var(--text-on-accent);*/
+        /*transform: translateY(1px);*/
     }
 
     .note-content {
@@ -122,19 +124,18 @@
     .current-note:not(:has(.note-content)) {
         background: var(--interactive-normal);
         border: 1px solid transparent;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     }
 
     .current-note:not(:has(.note-content)):hover {
         background: var(--interactive-hover);
-        border-color: var(--interactive-accent);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+        /*border-color: var(--interactive-accent);*/
+
     }
 
     .current-note:not(:has(.note-content)):active {
-        background: var(--interactive-accent);
-        color: var(--text-on-accent);
-        transform: translateY(1px);
-        box-shadow: none;
+        /*background: var(--interactive-accent);*/
+        /*color: var(--text-on-accent);*/
+        background: var(--interactive-normal);
+        border: 1px solid var(--color-base-70);
     }
 </style>
diff --git a/src/components/Day.svelte b/src/components/Day.svelte
@@ -70,43 +70,38 @@
     .day:hover {
         background-color: var(--color-background-day-hover);
         color: var(--color-text-day-hover);
-        border: 2px solid var(--background-modifier-border-hover);
+        border: 2px solid var(--color-border-day-hover);
     }
 
     .day.has-note {
         background-color: var(--color-background-day-note);
-        color: var(--color-text-day-note);
+        color: var(--color-text-has-note);
     }
 
-    .day.selected {
-        /*color: var(--color-text-day-note);*/
-        border: 2px solid var(--color-border-day-active);
-    }
 
     .day.has-note:hover {
         background-color: var(--color-background-day-note-hover);
-        color: var(--color-text-day-note-hover);
+        color: var(--color-text-has-note-hover);
     }
 
-
-    /* Today state - different text color */
-    .day.today {
-        /*color: var(--color-text-day-today);*/
-        border: 2px solid var(--color-base-100);
-        /*outline-offset: -3px;*/
-        /*border-radius: 25%;*/
-        font-weight: bold;
-    }
-    .day.today.selected {
-        /*color: var(--color-text-day-today-note);*/
+    .day.selected {
         border: 2px solid var(--color-border-day-active);
     }
 
-    .day.today:hover {
-        color: var(--color-text-day-today-hover);
+    .day.today::after {
+        content: '';
+        position: absolute;
+        bottom: 2px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 3px;
+        height: 3px;
+        background: var(--color-text-day);
+        border-radius: 50%;
     }
 
 
+
     .inactive-month {
         opacity: 0;
         pointer-events: none;

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -35,19 +35,22 @@
         border-radius: 15%;
         font-size: 1.0em;
         font-weight: 200;
-        border: none;
         cursor: pointer;
         border: 1px solid transparent;
         transition: all 0.05s ease;
         background: var(--background-secondary);
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     }
+
     .today-button.active {
         background: var(--interactive-normal);
-        border: 1px solid var(--color-base-70);
+        border-color: var(--color-base-50);
     }
+
     .today-button:hover {
         background-color: var(--interactive-hover);
-
         transition: all 0.2s ease;
     }
+
+
 </style>
diff --git a/src/components/MonthCalendar.svelte b/src/components/MonthCalendar.svelte
@@ -73,9 +73,6 @@
 
   <table class="calendar">
     <colgroup>
-      {#if showWeekNums}
-        <col />
-      {/if}
       {#each month[1].days as date}
         <col class:weekend="{isWeekend(date)}" />
       {/each}

diff --git a/src/components/OnThisDay.svelte b/src/components/OnThisDay.svelte
@@ -74,7 +74,7 @@
 <style>
     .on-this-day {
         padding: 1rem;
-        border-top: 1px solid var(--background-modifier-border);
+        /*border-top: 1px solid var(--background-modifier-border);*/
     }
 
     .on-this-day-header {

diff --git a/src/components/VirtualScroll.svelte b/src/components/VirtualScroll.svelte
@@ -67,8 +67,9 @@
   export function scrollToIndex(index, behavior='smooth') {
     if (!container) return;
 
+
     container.scrollTo({
-      top: index * height,
+      top: Math.max(index * height, 0.5),
       behavior: behavior
     });
   }

diff --git a/styles.css b/styles.css
@@ -9,7 +9,11 @@ body {
   --hue-split-two: calc(var(--accent-h) + 210);
 
   --accent: var(--interactive-accent);
-  --accent-light: var(--interactive-accent-hover);
+  --accent-light: hsl(
+          var(--accent-h),
+          var(--accent-s),
+          calc(var(--accent-l) + 2%)
+  );
 }
 
 .settings-banner {
@@ -25,36 +29,25 @@ body {
 }
 
 
-
 .month-container {
   --color-background-heading: transparent;
 
-
   --color-background-day: var(--interactive-normal);
   --color-background-day-hover: var(--interactive-normal-hover);
 
   --color-text-day: var(--text-normal);
-  --color-text-day-hover: var(--text-muted); /* might need correction */
-
-  --color-background-day-note: var(--interactive-accent);
-  --color-background-day-note-hover: var(--interactive-accent-hover);
-
-  --color-text-day-note: var(--text-on-accent);
-  --color-text-day-note-hover: var(--text-normal); /* might need correction */
-
-  --color-text-day-today:  var(--text-accent);
-  --color-text-day-today-hover: var(--text-normal);
-  --color-text-day-today-note: var(--text-on-accent);
+  --color-text-day-hover: var(--text-normal);
 
-  --color-border-day-active: hsl(var(--hue-split-one), var(--accent-s), var(--accent-l));
+  --color-background-day-note: var(--accent);
+  --color-background-day-note-hover: var(--accent-light);
 
+  --color-text-has-note: var(--text-on-accent);
+  --color-text-has-note-hover: var(--text-on-accent);
 
-  --color-text-title: var(--text-normal);
-  --color-text-heading: var(--text-muted);
+  --color-today-dot: var(--color-base-100);
 
-  --color-text-weeknum: var(--text-muted);
-  --color-background-weeknum: transparent;
-  --color-background-weekend: transparent;
+  --color-border-day-active: var(--color-orange);
+  --color-border-day-hover: rgba(var(--color-orange-rgb), 0.8);
 
   height: 250px;
   max-width: 350px;
@@ -70,18 +63,10 @@ body {
 }
 
 
-th {
-  text-align: center;
-}
-
-.weekend {
-  background-color: var(--color-background-weekend);
-}
 
 .calendar {
   border-collapse: collapse;
   width: 100%;
-  /*max-height: 10px;*/
 }
 
 .nav {
@@ -115,6 +100,7 @@ th {
 }
 
 
+
 .loading-bar {
   position: absolute;
   top: 0;
@@ -148,7 +134,6 @@ th {
 }
 
 
-
 .main-view {
   display: flex;
   flex-direction: column;
@@ -165,17 +150,6 @@ th {
   border-bottom: 2px solid var(--background-modifier-border);
 }
 
-.history-section {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
-}
-
-
-.months-wrapper {
-  display: flex;
-  flex-direction: column;
-}
 
 
 
@@ -186,4 +160,5 @@ th {
   letter-spacing: 1px;
   padding: 4px;
   text-transform: uppercase;
+  text-align: center;
 }