more styles cleanup

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/styles/_mixins.scss

@@ -1,26 +0,0 @@
-// THEME MIXINS
-
-// standard container drop shadow
-@mixin standard-panel-shadow {
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-}
-
-// common properties for all standard containers
-@mixin standard-panel {
-  @include standard-panel-shadow;
-  border-radius: 10px;
-}
-
-// SHORTCUTS
-@mixin avatar-radius {
-  border-radius: 50%;
-  background: transparent no-repeat;
-  background-position: 50%;
-  background-clip: padding-box;
-}
-
-@mixin avatar-size($size: 48px) {
-  width: $size;
-  height: $size;
-  background-size: $size $size;
-}

app/styles/autosuggest.scss

@@ -1,8 +1,3 @@
-.autosuggest-input {
-  position: relative;
-}
-
-.autosuggest-input input,
 .react-datepicker__input-container input {
   // display: block;
   // box-sizing: border-box;

app/styles/basics.scss

@@ -8,54 +8,6 @@ body.with-modals {
   @apply overflow-hidden;
 }
 
-body {
-  &.player {
-    text-align: center;
-  }
-
-  &.embed {
-    margin: 0;
-    padding-bottom: 0;
-
-    .container {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-  }
-
-  &.admin {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-  }
-
-  &.error {
-    @apply text-gray-400;
-    position: absolute;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .dialog {
-      vertical-align: middle;
-      margin: 20px;
-
-      h1 {
-        font-size: 20px;
-        line-height: 28px;
-        font-weight: 400;
-      }
-    }
-  }
-}
-
 // Note: this is needed for React HotKeys performance. Removing this
 // will cause severe performance degradation on Safari.
 div[tabindex='-1']:focus {
@@ -68,27 +20,6 @@ div[tabindex='-1']:focus {
 
 noscript {
   text-align: center;
-
-  img {
-    width: 200px;
-    opacity: 0.5;
-    animation: flicker 4s infinite;
-  }
-
-  div {
-    @apply text-gray-400;
-    font-size: 14px;
-    margin: 30px auto;
-    max-width: 400px;
-
-    a {
-      text-decoration: underline;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
 }
 
 .emojione {

app/styles/components/columns.scss

@@ -1,29 +1,3 @@
-.column {
-  width: 350px;
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 100%;
-}
-
-@media screen and (min-width: 631px) {
-  .column {
-    flex: 0 0 auto;
-    padding: 10px;
-    padding-left: 5px;
-    padding-right: 5px;
-
-    &:first-child {
-      padding-left: 10px;
-    }
-
-    &:last-child {
-      padding-right: 10px;
-    }
-  }
-}
-
 .empty-column-indicator,
 .error-column {
   @apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;

app/styles/components/compose-form.scss

@@ -28,150 +28,152 @@
     @apply text-gray-900 text-sm;
     font-family: inherit;
   }
-}
 
-.compose-form__upload-wrapper { overflow: hidden; }
+  &__upload-wrapper { overflow: hidden; }
 
-.compose-form__uploads-wrapper {
+  &__uploads-wrapper {
-  display: flex;
+    display: flex;
-  flex-direction: row;
+    flex-direction: row;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
 
-  &.contains-media {
+    &.contains-media {
-    padding: 5px;
+      padding: 5px;
-  }
-}
-
-.compose-form__upload {
-  flex: 1 1 0;
-  min-width: 40%;
-  margin: 5px;
-  position: relative;
-  border-radius: 4px;
-  overflow: hidden;
-
-  &__actions {
-    @apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear;
-
-    &.active {
-      @apply opacity-100;
-    }
-
-    .icon-button {
-      @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center;
     }
   }
 
-  &-description {
+  &__upload {
-    @apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear;
+    flex: 1 1 0;
+    min-width: 40%;
+    margin: 5px;
+    position: relative;
+    border-radius: 4px;
+    overflow: hidden;
 
-    &.active {
+    &__actions {
-      @apply opacity-100;
+      @apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear;
-    }
 
-    textarea {
+      &.active {
-      @apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
+        @apply opacity-100;
+      }
 
-      &::placeholder {
+      .icon-button {
-        @apply text-white/60;
+        @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center;
       }
     }
-  }
 
-  &-preview {
+    &-description {
-    position: absolute;
+      @apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
 
-    video {
+      &.active {
+        @apply opacity-100;
+      }
+
+      textarea {
+        @apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
+
+        &::placeholder {
+          @apply text-white/60;
+        }
+      }
+    }
+
+    &-preview {
+      position: absolute;
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  &__upload-thumbnail {
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    height: 160px;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+
+    &.video {
+      background-image: url('../assets/images/video-placeholder.png');
+      background-size: cover;
+    }
+
+    &.audio {
+      background-image: url('../assets/images/audio-placeholder.png');
+      background-size: cover;
     }
   }
 }
 
-.compose-form__upload-thumbnail {
+.privacy-dropdown {
-  background-position: center;
-  background-size: contain;
-  background-repeat: no-repeat;
-  height: 160px;
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-
-  &.video {
-    background-image: url('../assets/images/video-placeholder.png');
-    background-size: cover;
-  }
-
-  &.audio {
-    background-image: url('../assets/images/audio-placeholder.png');
-    background-size: cover;
-  }
-}
-
-.privacy-dropdown__dropdown {
-  @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden;
-
-  &.top {
-    transform-origin: 50% 100%;
-  }
-
-  &.bottom {
-    transform-origin: 50% 0;
-  }
-}
-
-.privacy-dropdown__option {
-  @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer;
-
   &.active {
-    @apply bg-gray-100 dark:bg-gray-800;
+    &.top .privacy-dropdown__value {
-  }
+      @apply rounded-t-md;
+    }
 
-  &:hover,
+    .privacy-dropdown__dropdown {
-  &.active {
+      @apply block shadow-md;
-    .privacy-dropdown__option__content,
-    .privacy-dropdown__option__content strong {
-      @apply text-black dark:text-white;
     }
   }
 
-  &.active {
+  &__dropdown {
-    @apply hover:bg-gray-200 dark:hover:bg-gray-700;
+    @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden;
+
+    &.top {
+      transform-origin: 50% 100%;
+    }
+
+    &.bottom {
+      transform-origin: 50% 0;
+    }
   }
-}
 
-.privacy-dropdown__option__icon {
+  &__option {
-  @apply flex items-center justify-center mr-2.5 rtl:mr-0 rtl:ml-2.5;
+    @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer;
-}
 
-.privacy-dropdown__option__content {
+    &.active {
-  @apply flex-auto text-primary-600 dark:text-primary-400;
+      @apply bg-gray-100 dark:bg-gray-800;
+    }
 
-  strong {
+    &:hover,
-    @apply block font-medium text-black dark:text-white;
+    &.active {
+      .privacy-dropdown__option__content,
+      .privacy-dropdown__option__content strong {
+        @apply text-black dark:text-white;
+      }
+    }
 
-    @each $lang in $cjk-langs {
+    &.active {
-      &:lang(#{$lang}) {
+      @apply hover:bg-gray-200 dark:hover:bg-gray-700;
-        @apply font-bold;
+    }
+
+    &__icon {
+      @apply flex items-center justify-center mr-2.5 rtl:mr-0 rtl:ml-2.5;
+    }
+
+    &__content {
+      @apply flex-auto text-primary-600 dark:text-primary-400;
+
+      strong {
+        @apply block font-medium text-black dark:text-white;
+
+        @each $lang in $cjk-langs {
+          &:lang(#{$lang}) {
+            @apply font-bold;
+          }
+        }
       }
     }
   }
 }
-
-.privacy-dropdown.active {
-  &.top .privacy-dropdown__value {
-    @apply rounded-t-md;
-  }
-
-  .privacy-dropdown__dropdown {
-    @apply block shadow-md;
-  }
-}

app/styles/components/media-gallery.scss

@@ -1,3 +1,5 @@
+$media-compact-size: 50px;
+
 .media-gallery {
   box-sizing: border-box;
   overflow: hidden;
@@ -6,147 +8,145 @@
   position: relative;
   width: 100%;
   height: auto;
-}
 
-.media-gallery__item {
+  &__item {
-  border: 0;
+    border: 0;
-  box-sizing: border-box;
+    box-sizing: border-box;
-  display: block;
+    display: block;
-  float: left;
+    float: left;
-  position: relative;
+    position: relative;
-  border-radius: 10px;
+    border-radius: 10px;
-  overflow: hidden;
+    overflow: hidden;
 
-  &__icons {
+    &__icons {
-    position: absolute;
+      position: absolute;
-    top: 50%;
+      top: 50%;
-    left: 50%;
+      left: 50%;
-    transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
 
-    .svg-icon {
+      .svg-icon {
-      @apply h-24 w-24;
+        @apply h-24 w-24;
+      }
+    }
+
+    &-overflow {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.75);
+      z-index: 2;
+      color: #333;
+      text-align: center;
+      font-weight: bold;
+      font-size: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+    }
+
+    &-thumbnail {
+      @apply text-gray-400;
+      cursor: zoom-in;
+      display: block;
+      text-decoration: none;
+      line-height: 0;
+      position: relative;
+      z-index: 1;
+      height: 100%;
+      width: 100%;
+
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
     }
   }
 
-  &-overflow {
+  &__preview {
-    position: absolute;
+    @apply bg-gray-200 dark:bg-gray-900 rounded-lg;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.75);
-    z-index: 2;
-    color: #333;
-    text-align: center;
-    font-weight: bold;
-    font-size: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-  }
-}
-
-.media-gallery__item-thumbnail {
-  @apply text-gray-400;
-  cursor: zoom-in;
-  display: block;
-  text-decoration: none;
-  line-height: 0;
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  width: 100%;
-
-  video {
     width: 100%;
     height: 100%;
     object-fit: cover;
-  }
+    position: absolute;
-}
+    top: 0;
+    left: 0;
+    z-index: 0;
 
-.media-gallery__preview {
+    &--hidden {
-  @apply bg-gray-200 dark:bg-gray-900 rounded-lg;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-
-  &--hidden {
-    display: none;
-  }
-}
-
-.media-gallery__gifv {
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-}
-
-.media-gallery__item-gifv-thumbnail {
-  @apply rounded-md;
-  cursor: zoom-in;
-  height: 100%;
-  object-fit: cover;
-  position: relative;
-  width: 100%;
-  z-index: 1;
-  transform: none;
-  top: 0;
-}
-
-.media-gallery__gifv__label,
-.media-gallery__filename__label,
-.media-gallery__file-extension__label {
-  @apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90;
-  font-size: 11px;
-  transition: opacity 0.1s ease;
-  line-height: 18px;
-}
-
-.media-gallery__gifv {
-  &.autoplay {
-    .media-gallery__gifv__label {
       display: none;
     }
   }
 
-  &:hover {
+  &__gifv {
-    .media-gallery__gifv__label {
+    height: 100%;
-      opacity: 1;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+
+  &__item-gifv-thumbnail {
+    @apply rounded-md;
+    cursor: zoom-in;
+    height: 100%;
+    object-fit: cover;
+    position: relative;
+    width: 100%;
+    z-index: 1;
+    transform: none;
+    top: 0;
+  }
+
+  &__gifv__label,
+  &__filename__label,
+  &__file-extension__label {
+    @apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90;
+    font-size: 11px;
+    transition: opacity 0.1s ease;
+    line-height: 18px;
+  }
+
+  &__gifv {
+    &.autoplay {
+      .media-gallery__gifv__label {
+        display: none;
+      }
+    }
+
+    &:hover {
+      .media-gallery__gifv__label {
+        opacity: 1;
+      }
     }
   }
-}
 
-$media-compact-size: 50px;
+  &--compact {
-
-.media-gallery--compact {
-  height: $media-compact-size !important;
-  background: transparent;
-
-  .media-gallery__item {
-    width: $media-compact-size !important;
     height: $media-compact-size !important;
-    inset: auto !important;
+    background: transparent;
-    float: left !important;
-    margin-right: 5px;
 
-    &-overflow {
+    .media-gallery__item {
-      font-size: 20px;
+      width: $media-compact-size !important;
+      height: $media-compact-size !important;
+      inset: auto !important;
+      float: left !important;
+      margin-right: 5px;
+
+      &-overflow {
+        font-size: 20px;
+      }
+
+      &__icons .svg-icon {
+        @apply h-8 w-8;
+      }
     }
 
-    &__icons .svg-icon {
+    .media-gallery__file-extension__label {
-      @apply h-8 w-8;
+      display: none;
     }
   }
-
-  .media-gallery__file-extension__label {
-    display: none;
-  }
 }

app/styles/components/modal.scss

@@ -254,11 +254,6 @@
 
           svg {
             stroke-width: 1.5;
-
-            &.feather {
-              // Feather icons are a little larger
-              transform: scale(0.9);
-            }
           }
         }
       }

app/styles/components/status.scss

@@ -116,8 +116,9 @@ a.status-card {
   padding-bottom: 10px;
 
   &__status {
-    @include standard-panel;
     padding: 15px 0 10px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
   }
 
   .status {

app/styles/fonts.scss

@@ -2,21 +2,6 @@
 
 // TYPEOGRAPHY MIXINS
 
-// declare the font family using these shortcuts
-@mixin font-inter { font-family: Inter, Arial, sans-serif !important; }
-
-// Declare font weights as a numerical value in rendered output
-// Prevents certain browsers which do not play nice with "light, medium" textual declarations
-// Numeical values always work more consistently across browsers
-// Each font-weight is linked with the @font-face declaration to the actual font file
-@mixin font-weight($weight) {
-  @if $weight == 'light' { font-weight: 300; }
-  @if $weight == 'normal' { font-weight: 400; }
-  @if $weight == 'medium' { font-weight: 500; }
-  @if $weight == 'bold' { font-weight: 700; }
-  @if $weight == 'extrabold' { font-weight: 800; }
-}
-
 // Use these mixins to define font-size and line-height
 // html and body declaration allows developer to pass px value as argument
 // Rendered css will default to "rem" and fall back to "px" for unsupported browsers
@@ -26,10 +11,3 @@
   font-size: #{$px + 'px'};
   font-size: #{$rem + 'rem'};
 }
-
-@mixin line-height($size) {
-  $rem: math.div($size, 10);
-  $px: $size;
-  line-height: #{$px + 'px'};
-  line-height: #{$rem + 'rem'};
-}

app/styles/forms.scss

@@ -22,26 +22,8 @@ select {
   margin-left: -1px;
 }
 
-.captcha {
-  background-color: #fff;
-  border-radius: 4px;
-
-  img {
-    display: table;
-    margin: 0 auto;
-  }
-
-  input[type='text'] {
-    border-radius: 0 0 4px 4px;
-  }
-}
-
 .input.with_label.toggle .label_input {
   display: flex;
   font-size: 14px;
   align-items: center;
-
-  .theme-toggle {
-    margin-left: 10px;
-  }
 }

app/styles/ui.scss

@@ -125,12 +125,6 @@
   font-family: inherit;
   padding: 7px 0;
 
-  &:focus,
-  &:active {
-    @apply text-gray-900;
-    border-bottom-color: var(--highlight-text-color);
-  }
-
   @media screen and (max-width: 600px) {
     font-size: 16px;
   }