Browse Source

CSS: tweak padding for avatar in message

JC Brand 3 years ago
parent
commit
2e9f478c87
2 changed files with 11 additions and 6 deletions
  1. 5 2
      src/shared/styles/messages.scss
  2. 6 4
      src/shared/styles/themes/dracula.scss

+ 5 - 2
src/shared/styles/messages.scss

@@ -108,7 +108,11 @@
             display: inline-flex;
             display: inline-flex;
             width: 100%;
             width: 100%;
             flex-direction: row;
             flex-direction: row;
-            padding: 0.125rem 1rem;
+            padding: 0 1rem;
+
+            &.chat-msg--with-avatar {
+                padding-top: 0.25rem;
+            }
 
 
             &.onload {
             &.onload {
                 animation: colorchange-chatmessage 1s;
                 animation: colorchange-chatmessage 1s;
@@ -245,7 +249,6 @@
             .chat-msg__heading {
             .chat-msg__heading {
                 width: 100%;
                 width: 100%;
                 padding-right: 0.25rem;
                 padding-right: 0.25rem;
-                padding-bottom: 0.25rem;
 
 
                 .badge {
                 .badge {
                     margin-left: 0.5em;
                     margin-left: 0.5em;

+ 6 - 4
src/shared/styles/themes/dracula.scss

@@ -22,6 +22,8 @@
 
 
     // ---
     // ---
 
 
+    --gray-color: var(--comment);
+
     --highlight-color: var(--foreground);
     --highlight-color: var(--foreground);
     --highlight-color-darker: var(--comment);
     --highlight-color-darker: var(--comment);
 
 
@@ -123,13 +125,13 @@
     --warning-color-dark: var(--orange);
     --warning-color-dark: var(--orange);
     --warning-color: var(--orange);
     --warning-color: var(--orange);
 
 
-    --list-toggle-color: #818479; // $gray-color
-    --list-toggle-hover-color: #585B51; // $dark-gray-color
+    --list-toggle-color: var(--comment);
+    --list-toggle-hover-color: var(--comment);
     --list-item-hover-color: var(--current-line);
     --list-item-hover-color: var(--current-line);
-    --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
+    --list-item-action-color: var(--cyan);
     --list-item-link-color: var(--foreground);
     --list-item-link-color: var(--foreground);
     --list-item-link-hover-color: var(--link-color);
     --list-item-link-hover-color: var(--link-color);
     --list-item-open-color: var(--current-line);
     --list-item-open-color: var(--current-line);
     --list-item-open-hover-color: var(--controlbox-head-color);
     --list-item-open-hover-color: var(--controlbox-head-color);
-    --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
+    --list-dot-circle-color: var(--orange);
 }
 }