about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/styles
diff options
context:
space:
mode:
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
-rw-r--r--app/javascript/flavours/glitch/styles/components/columns.scss7
-rw-r--r--app/javascript/flavours/glitch/styles/components/index.scss14
-rw-r--r--app/javascript/flavours/glitch/styles/components/media.scss30
-rw-r--r--app/javascript/flavours/glitch/styles/components/modal.scss19
-rw-r--r--app/javascript/flavours/glitch/styles/components/status.scss1
-rw-r--r--app/javascript/flavours/glitch/styles/statuses.scss7
-rw-r--r--app/javascript/flavours/glitch/styles/variables.scss2
-rw-r--r--app/javascript/flavours/glitch/styles/widgets.scss20
8 files changed, 74 insertions, 26 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index be32ae52e..2550f50f4 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -702,6 +702,13 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
+
+  &__close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
 
   h2 {
     font-size: 16px;
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 0614278e2..3e67754c5 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -425,6 +425,20 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;  /* IE 10+ */
+
+  * {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;  /* IE 10+ */
+  }
+
+  &::-webkit-scrollbar,
+  *::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    background: transparent; /* Chrome/Safari/Webkit */
+  }
 
   .image-loader__preview-canvas {
     max-width: $media-modal-media-max-width;
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 58bdb642f..f504fa91e 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -385,7 +385,6 @@
   }
 
   .video-player__controls {
-    padding: 0 15px;
     padding-top: 10px;
     background: transparent;
   }
@@ -512,7 +511,8 @@
   &__buttons-bar {
     display: flex;
     justify-content: space-between;
-    padding-bottom: 10px;
+    padding-bottom: 8px;
+    margin: 0 -5px;
 
     .video-player__download__icon {
       color: inherit;
@@ -536,22 +536,13 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
-    &.left {
-      button {
-        padding-left: 0;
-      }
-    }
-
-    &.right {
-      button {
-        padding-right: 0;
-      }
-    }
+    .player-button {
+      display: inline-block;
+      outline: 0;
 
-    button {
       flex: 0 0 auto;
       background: transparent;
-      padding: 2px 10px;
+      padding: 5px;
       font-size: 16px;
       border: 0;
       color: rgba($white, 0.75);
@@ -569,6 +560,7 @@
     flex: 0 1 auto;
     overflow: hidden;
     text-overflow: ellipsis;
+    margin: 0 5px;
   }
 
   &__time-sep,
@@ -688,7 +680,7 @@
       display: block;
       position: absolute;
       height: 4px;
-      top: 10px;
+      top: 14px;
     }
 
     &__progress,
@@ -697,7 +689,7 @@
       position: absolute;
       height: 4px;
       border-radius: 4px;
-      top: 10px;
+      top: 14px;
       background: lighten($ui-highlight-color, 8%);
     }
 
@@ -712,7 +704,7 @@
       border-radius: 50%;
       width: 12px;
       height: 12px;
-      top: 6px;
+      top: 10px;
       margin-left: -6px;
       background: lighten($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
@@ -736,7 +728,7 @@
   &.detailed,
   &.fullscreen {
     .video-player__buttons {
-      button {
+      .player-button {
         padding-top: 10px;
         padding-bottom: 10px;
       }
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index 85f216887..bc0965864 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -40,6 +40,21 @@
   z-index: 9999;
 }
 
+.media-modal__zoom-button {
+  position: absolute;
+  right: 64px;
+  top: 8px;
+  z-index: 100;
+  pointer-events: auto;
+  transition: opacity 0.3s linear;
+  will-change: opacity;
+}
+
+.media-modal__zoom-button--hidden {
+  pointer-events: none;
+  opacity: 0;
+}
+
 .onboarding-modal,
 .error-modal,
 .embed-modal {
@@ -427,10 +442,8 @@
 
   .status__visibility-icon {
     color: $dark-text-color;
-    float: right;
     font-size: 14px;
-    margin-left: 4px;
-    margin-right: 4px;
+    padding: 0 4px;
   }
 
   .status__display-name {
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 03acd72d8..7ca1ae423 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -55,6 +55,7 @@
   font-weight: 400;
   overflow: visible;
   padding-top: 5px;
+  clear: both;
 
   &:focus {
     outline: 0;
diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss
index 982a1ab9a..58f74f954 100644
--- a/app/javascript/flavours/glitch/styles/statuses.scss
+++ b/app/javascript/flavours/glitch/styles/statuses.scss
@@ -201,19 +201,18 @@
       display: initial;
     }
 
-    .status__relative-time,
-    .status__visibility-icon {
+    .status__relative-time {
       color: $dark-text-color;
       float: right;
       font-size: 14px;
       width: auto;
       margin: initial;
       padding: initial;
+      padding-bottom: 1px;
     }
 
     .status__visibility-icon {
-      margin-left: 4px;
-      margin-right: 4px;
+      padding: 0 4px;
     }
 
     .status__info .status__display-name {
diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss
index 1ed1a5778..6e242281b 100644
--- a/app/javascript/flavours/glitch/styles/variables.scss
+++ b/app/javascript/flavours/glitch/styles/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/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss
index 531425573..b397844a2 100644
--- a/app/javascript/flavours/glitch/styles/widgets.scss
+++ b/app/javascript/flavours/glitch/styles/widgets.scss
@@ -437,6 +437,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;