about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authorTakeshi Umeda <noel.yoshiba@gmail.com>2020-11-13 01:43:12 +0900
committerGitHub <noreply@github.com>2020-11-12 17:43:12 +0100
commit148ce97e21092500a2abeb87f6dc3c0adf5f28e4 (patch)
treec9f457d49e7de6f90b3901f318b92609574a3560 /app/javascript
parent2b1a6e734ff42c17fb971cf909509b6b2ad84879 (diff)
Add interrelationship icon (#15149)
* Add interrelationship icon

* Fix arrow for rtl

* Fix to predefined color
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/styles/mastodon/variables.scss2
-rw-r--r--app/javascript/styles/mastodon/widgets.scss20
2 files changed, 22 insertions, 0 deletions
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 8602c3dde..f463419c8 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -36,6 +36,8 @@ $dark-text-color: $ui-base-lighter-color !default;
 $secondary-text-color: $ui-secondary-color !default;
 $highlight-text-color: $ui-highlight-color !default;
 $action-button-color: $ui-base-lighter-color !default;
+$passive-text-color: $gold-star !default;
+$active-passive-text-color: $success-green !default;
 // For texts on inverted backgrounds
 $inverted-text-color: $ui-base-color !default;
 $lighter-text-color: $ui-base-lighter-color !default;
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 47e02d41d..5ee4d104b 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -446,6 +446,26 @@
     vertical-align: initial !important;
   }
 
+  &__interrelationships {
+    width: 21px;
+  }
+
+  .fa {
+    font-size: 16px;
+
+    &.active {
+      color: $highlight-text-color;
+    }
+
+    &.passive {
+      color: $passive-text-color;
+    }
+
+    &.active.passive {
+      color: $active-passive-text-color;
+    }
+  }
+
   @media screen and (max-width: $no-gap-breakpoint) {
     tbody td.optional {
       display: none;