small design fixes

mrmegatelo · Dec 15, 2024 · f2fce71 · f2fce71
1 parent f0e8b9e
commit f2fce71
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/feed/static/feed/styles/main.css b/feed/static/feed/styles/main.css
@@ -217,6 +217,11 @@ a:hover {
     background-color: var(--sidebar-bg);
     max-height: 100vh;
     overflow: auto;
+    color: var(--color-grey-900);
+
+    & a {
+        color: inherit;
+    }
 }
 
 .subgrid {
@@ -612,7 +617,7 @@ a:hover {
 .sidebar-block-header-buttons {
     display: flex;
     gap: 8px;
-    color: var(--color-grey-500)
+    color: var(--color-grey-400)
 }
 
 .sidebar-block__sticky {
@@ -696,6 +701,7 @@ a:hover {
     cursor: pointer;
     transition: background-color 0.15s;
     gap: 8px;
+    flex-shrink: 0;
 
     .button__icon {
         width: 1.5rem;
@@ -727,6 +733,7 @@ a:hover {
 
     &.button--text {
         padding: 0;
+        border-radius: 0;
     }
 
     .loader {
@@ -1188,7 +1195,7 @@ a:hover {
 .openable {
 
     &[open] {
-        & .openable-control__icon svg {
+        & .openable-control__indicator svg {
             transform: rotate(90deg);
         }
     }
@@ -1207,7 +1214,7 @@ a:hover {
     &:hover {
         & .openable-control__icon {
             opacity: 1;
-            color: inherit;
+            color: var(--color-grey-400);
         }
     }
 }
@@ -1219,15 +1226,19 @@ a:hover {
     border-radius: 6px;
     opacity: 0;
     transition: opacity 0.05s, color 0.15s ease 0.05s, background-color 0.15s;
-    position: absolute;
-    left: 10px;
-    top: 6px;
+
     background-color: var(--color-grey-100);
     color: var(--color-grey-100);
 
     &:hover {
         background-color: var(--color-grey-200);
     }
+}
+
+.openable-control__indicator {
+    position: absolute;
+    left: 10px;
+    top: 6px;
 
     & > svg {
         transition: transform 0.15s;

diff --git a/feed/templates/blocks/feed/feeds_full.html b/feed/templates/blocks/feed/feeds_full.html
@@ -3,7 +3,7 @@
 {% for collection in collections %}
     <details class="openable">
         <summary class="button button--ghost button--sm openable-control">
-            <span class="button__icon openable-control__icon">
+            <span class="button__icon openable-control__icon openable-control__indicator">
                 {% include 'icons/chevron_right.svg' %}
             </span>
             <span class="button__icon">
@@ -23,7 +23,7 @@
                     hx-get="{% url 'api_dialog_collection_edit' collection_id=collection.id %}"
                     title="Edit collection"
             >
-                 <span class="button__icon">
+                 <span class="button__icon openable-control__icon">
                 {% include 'icons/settings.svg' %}
             </span>
             </button>