about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/styles/components/index.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/index.scss')
-rw-r--r--app/javascript/flavours/glitch/styles/components/index.scss727
1 files changed, 6 insertions, 721 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 21c2b89de..5bc1c98e0 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -81,28 +81,6 @@
   }
 }
 
-.column__wrapper {
-  display: flex;
-  flex: 1 1 auto;
-  position: relative;
-}
-
-.column-icon {
-  background: lighten($ui-base-color, 4%);
-  color: $ui-primary-color;
-  cursor: pointer;
-  font-size: 16px;
-  padding: 15px;
-  position: absolute;
-  right: 0;
-  top: -48px;
-  z-index: 3;
-
-  &:hover {
-    color: lighten($ui-primary-color, 7%);
-  }
-}
-
 .icon-button {
   display: inline-block;
   padding: 0;
@@ -264,20 +242,6 @@
   color: $ui-base-color;
 }
 
-.emojione {
-  display: inline-block;
-  font-size: inherit;
-  vertical-align: middle;
-  object-fit: contain;
-  margin: -.2ex .15em .2ex;
-  width: 16px;
-  height: 16px;
-
-  img {
-    width: auto;
-  }
-}
-
 .notification__favourite-icon-wrapper {
   left: -26px;
   position: absolute;
@@ -564,121 +528,6 @@
   }
 }
 
-.columns-area {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: row;
-  justify-content: flex-start;
-  overflow-x: auto;
-  position: relative;
-}
-
-@include limited-single-column('screen and (max-width: 360px)', $parent: null) {
-  .columns-area {
-    padding: 10px;
-  }
-
-  .react-swipeable-view-container .columns-area {
-    height: calc(100% - 20px) !important;
-  }
-}
-
-.react-swipeable-view-container {
-  &,
-  .columns-area,
-  .drawer,
-  .column {
-    height: 100%;
-  }
-}
-
-.react-swipeable-view-container > * {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.column {
-  width: 330px;
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-
-  > .scrollable {
-    background: $ui-base-color;
-  }
-}
-
-.ui {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background: darken($ui-base-color, 7%);
-}
-
-.column {
-  overflow: hidden;
-}
-
-@include limited-single-column('screen and (max-width: 360px)', $parent: null) {
-  .tabs-bar {
-    margin: 0;
-  }
-}
-
-:root {  //  Overrides .wide stylings for mobile view
-  @include single-column('screen and (max-width: 630px)', $parent: null) {
-    .column {
-      flex: auto;
-      width: 100%;
-      min-width: 0;
-      max-width: none;
-      padding: 0;
-    }
-
-    .columns-area {
-      flex-direction: column;
-    }
-
-    .search__input,
-    .autosuggest-textarea__textarea {
-      font-size: 16px;
-    }
-  }
-}
-
-@include multi-columns('screen and (min-width: 631px)', $parent: null) {
-  .columns-area {
-    padding: 0;
-  }
-
-  .column {
-    flex: 0 0 auto;
-    padding: 10px;
-    padding-left: 5px;
-    padding-right: 5px;
-
-    &:first-child {
-      padding-left: 10px;
-    }
-
-    &:last-child {
-      padding-right: 10px;
-    }
-  }
-
-  .columns-area > div {
-    .column {
-      padding-left: 5px;
-      padding-right: 5px;
-    }
-  }
-}
-
 .drawer__pager {
   box-sizing: border-box;
   padding: 0;
@@ -798,62 +647,6 @@
   }
 }
 
-.column-back-button {
-  background: lighten($ui-base-color, 4%);
-  color: $ui-highlight-color;
-  cursor: pointer;
-  flex: 0 0 auto;
-  font-size: 16px;
-  border: 0;
-  text-align: unset;
-  padding: 15px;
-  margin: 0;
-  z-index: 3;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.column-header__back-button {
-  background: lighten($ui-base-color, 4%);
-  border: 0;
-  font-family: inherit;
-  color: $ui-highlight-color;
-  cursor: pointer;
-  flex: 0 0 auto;
-  font-size: 16px;
-  padding: 0 5px 0 0;
-  z-index: 3;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:last-child {
-    padding: 0 15px 0 0;
-  }
-}
-
-.column-back-button__icon {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.column-back-button--slim {
-  position: relative;
-}
-
-.column-back-button--slim-button {
-  cursor: pointer;
-  flex: 0 0 auto;
-  font-size: 16px;
-  padding: 15px;
-  position: absolute;
-  right: 0;
-  top: -48px;
-}
-
 .react-toggle {
   display: inline-block;
   position: relative;
@@ -960,34 +753,6 @@
   border-color: $ui-highlight-color;
 }
 
-.column-link {
-  background: lighten($ui-base-color, 8%);
-  color: $primary-text-color;
-  display: block;
-  font-size: 16px;
-  padding: 15px;
-  text-decoration: none;
-
-  &:hover {
-    background: lighten($ui-base-color, 11%);
-  }
-}
-
-.column-link__icon {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.column-subheading {
-  background: $ui-base-color;
-  color: $ui-base-lighter-color;
-  padding: 8px 20px;
-  font-size: 12px;
-  font-weight: 500;
-  text-transform: uppercase;
-  cursor: default;
-}
-
 .getting-started__wrapper,
 .getting_started {
   background: $ui-base-color;
@@ -1066,8 +831,6 @@
   }
 }
 
-@import 'boost';
-
 .no-reduce-motion button.icon-button i.fa-retweet {
   background-position: 0 0;
   height: 19px;
@@ -1132,112 +895,6 @@
   }
 }
 
-.column-header__wrapper {
-  position: relative;
-  flex: 0 0 auto;
-
-  &.active {
-    &::before {
-      display: block;
-      content: "";
-      position: absolute;
-      top: 35px;
-      left: 0;
-      right: 0;
-      margin: 0 auto;
-      width: 60%;
-      pointer-events: none;
-      height: 28px;
-      z-index: 1;
-      background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
-    }
-  }
-}
-
-.column-header {
-  display: flex;
-  padding: 15px;
-  font-size: 16px;
-  background: lighten($ui-base-color, 4%);
-  flex: 0 0 auto;
-  cursor: pointer;
-  position: relative;
-  z-index: 2;
-  outline: 0;
-
-  &.active {
-    box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);
-
-    .column-header__icon {
-      color: $ui-highlight-color;
-      text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
-    }
-  }
-
-  &:focus,
-  &:active {
-    outline: 0;
-  }
-}
-
-.column {
-  width: 330px;
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .wide & {
-    flex: auto;
-    min-width: 330px;
-    max-width: 400px;
-  }
-
-  > .scrollable {
-    background: $ui-base-color;
-  }
-}
-
-.column-header__buttons {
-  height: 48px;
-  display: flex;
-  margin: -15px;
-  margin-left: 0;
-}
-
-.column-header__links .text-btn {
-  margin-right: 10px;
-}
-
-.column-header__button {
-  background: lighten($ui-base-color, 4%);
-  border: 0;
-  color: $ui-primary-color;
-  cursor: pointer;
-  font-size: 16px;
-  padding: 0 15px;
-
-  &:hover {
-    color: lighten($ui-primary-color, 7%);
-  }
-
-  &.active {
-    color: $primary-text-color;
-    background: lighten($ui-base-color, 8%);
-
-    &:hover {
-      color: $primary-text-color;
-      background: lighten($ui-base-color, 8%);
-    }
-  }
-
-  // glitch - added focus ring for keyboard navigation
-  &:focus {
-    text-shadow: 0 0 4px darken($ui-highlight-color, 5%);
-  }
-}
-
 .scrollable > div > :first-child .notification__dismiss-overlay > .wrappy {
   border-top: 1px solid $ui-base-color;
 }
@@ -1292,96 +949,6 @@
   }
 }
 
-.column-header__notif-cleaning-buttons {
-  display: flex;
-  align-items: stretch;
-  justify-content: space-around;
-
-  button {
-    @extend .column-header__button;
-    background: transparent;
-    text-align: center;
-    padding: 10px 0;
-    white-space: pre-wrap;
-  }
-
-  b {
-    font-weight: bold;
-  }
-}
-
-// The notifs drawer with no padding to have more space for the buttons
-.column-header__collapsible-inner.nopad-drawer {
-  padding: 0;
-}
-
-.column-header__collapsible {
-  max-height: 70vh;
-  overflow: hidden;
-  overflow-y: auto;
-  color: $ui-primary-color;
-  transition: max-height 150ms ease-in-out, opacity 300ms linear;
-  opacity: 1;
-
-  &.collapsed {
-    max-height: 0;
-    opacity: 0.5;
-  }
-
-  &.animating {
-    overflow-y: hidden;
-  }
-
-  hr {
-    height: 0;
-    background: transparent;
-    border: 0;
-    border-top: 1px solid lighten($ui-base-color, 12%);
-    margin: 10px 0;
-  }
-
-  // notif cleaning drawer
-  &.ncd {
-    transition: none;
-    &.collapsed {
-      max-height: 0;
-      opacity: 0.7;
-    }
-  }
-}
-
-.column-header__collapsible-inner {
-  background: lighten($ui-base-color, 8%);
-  padding: 15px;
-}
-
-.column-header__setting-btn {
-  &:hover {
-    color: lighten($ui-primary-color, 4%);
-    text-decoration: underline;
-  }
-}
-
-.column-header__setting-arrows {
-  float: right;
-
-  .column-header__setting-btn {
-    padding: 0 10px;
-
-    &:last-child {
-      padding-right: 0;
-    }
-  }
-}
-
-.column-header__title {
-  display: inline-block;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  flex: 1;
-}
-
 .text-btn {
   display: inline-block;
   padding: 0;
@@ -1393,11 +960,6 @@
   cursor: pointer;
 }
 
-.column-header__icon {
-  display: inline-block;
-  margin-right: 5px;
-}
-
 .loading-indicator {
   color: lighten($ui-base-color, 26%);
   font-size: 12px;
@@ -1499,37 +1061,6 @@
   float: right;
 }
 
-.empty-column-indicator,
-.error-column {
-  color: lighten($ui-base-color, 20%);
-  background: $ui-base-color;
-  text-align: center;
-  padding: 20px;
-  font-size: 15px;
-  font-weight: 400;
-  cursor: default;
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
-  justify-content: center;
-  @supports(display: grid) { // hack to fix Chrome <57
-    contain: strict;
-  }
-
-  a {
-    color: $ui-highlight-color;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-.error-column {
-  flex-direction: column;
-}
-
 @keyframes heartbeat {
   from {
     transform: scale(1);
@@ -1562,64 +1093,6 @@
   animation: heartbeat 1.5s ease-in-out infinite both;
 }
 
-.emoji-picker-dropdown__menu {
-  background: $simple-background-color;
-  position: absolute;
-  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-  border-radius: 4px;
-  margin-top: 5px;
-
-  .emoji-mart-scroll {
-    transition: opacity 200ms ease;
-  }
-
-  &.selecting .emoji-mart-scroll {
-    opacity: 0.5;
-  }
-}
-
-.emoji-picker-dropdown__modifiers {
-  position: absolute;
-  top: 60px;
-  right: 11px;
-  cursor: pointer;
-}
-
-.emoji-picker-dropdown__modifiers__menu {
-  position: absolute;
-  z-index: 4;
-  top: -4px;
-  left: -8px;
-  background: $simple-background-color;
-  border-radius: 4px;
-  box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-  overflow: hidden;
-
-  button {
-    display: block;
-    cursor: pointer;
-    border: 0;
-    padding: 4px 8px;
-    background: transparent;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background: rgba($ui-secondary-color, 0.4);
-    }
-  }
-
-  .emoji-mart-emoji {
-    height: 22px;
-  }
-}
-
-.emoji-mart-emoji {
-  span {
-    background-repeat: no-repeat;
-  }
-}
-
 .upload-area {
   align-items: center;
   background: rgba($base-overlay-background, 0.8);
@@ -1672,151 +1145,11 @@
   border-radius: 4px;
 }
 
-.emoji-button {
-  display: block;
-  font-size: 24px;
-  line-height: 24px;
-  margin-left: 2px;
-  width: 24px;
-  outline: 0;
-  cursor: pointer;
-
-  &:active,
-  &:focus {
-    outline: 0 !important;
-  }
-
-  img {
-    filter: grayscale(100%);
-    opacity: 0.8;
-    display: block;
-    margin: 0;
-    width: 22px;
-    height: 22px;
-    margin-top: 2px;
-  }
-
-  &:hover,
-  &:active,
-  &:focus {
-    img {
-      opacity: 1;
-      filter: none;
-    }
-  }
-}
-
 .dropdown--active .emoji-button img {
   opacity: 1;
   filter: none;
 }
 
-.search {
-  position: relative;
-}
-
-.search__input {
-  outline: 0;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  border: none;
-  padding: 10px;
-  padding-right: 30px;
-  font-family: inherit;
-  background: $ui-base-color;
-  color: $ui-primary-color;
-  font-size: 14px;
-  margin: 0;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-
-  &:focus {
-    background: lighten($ui-base-color, 4%);
-  }
-
-  @media screen and (max-width: 600px) {
-    font-size: 16px;
-  }
-}
-
-.search__icon {
-  .fa {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 2;
-    display: inline-block;
-    opacity: 0;
-    transition: all 100ms linear;
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-    color: $ui-secondary-color;
-    cursor: default;
-    pointer-events: none;
-
-    &.active {
-      pointer-events: auto;
-      opacity: 0.3;
-    }
-  }
-
-  .fa-search {
-    transform: rotate(90deg);
-
-    &.active {
-      pointer-events: none;
-      transform: rotate(0deg);
-    }
-  }
-
-  .fa-times-circle {
-    top: 11px;
-    transform: rotate(0deg);
-    cursor: pointer;
-
-    &.active {
-      transform: rotate(90deg);
-    }
-
-    &:hover {
-      color: $primary-text-color;
-    }
-  }
-}
-
-.search-results__header {
-  color: $ui-base-lighter-color;
-  background: lighten($ui-base-color, 2%);
-  border-bottom: 1px solid darken($ui-base-color, 4%);
-  padding: 15px 10px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.search-results__hashtag {
-  display: block;
-  padding: 10px;
-  color: $ui-secondary-color;
-  text-decoration: none;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: lighten($ui-secondary-color, 4%);
-    text-decoration: underline;
-  }
-}
-
 .loading-bar {
   background-color: $ui-highlight-color;
   height: 3px;
@@ -1861,58 +1194,6 @@ noscript {
   100% { opacity: 1; }
 }
 
-// more fixes for the navbar-under mode
-@mixin fix-margins-for-navbar-under {
-  .tabs-bar {
-    margin-top: 0 !important;
-    margin-bottom: -6px !important;
-  }
-}
-
-.single-column.navbar-under {
-  @include fix-margins-for-navbar-under;
-}
-
-.auto-columns.navbar-under {
-  @media screen and (max-width: 360px) {
-    @include fix-margins-for-navbar-under;
-  }
-}
-
-.auto-columns.navbar-under .react-swipeable-view-container .columns-area,
-.single-column.navbar-under .react-swipeable-view-container .columns-area {
-  @media screen and (max-width: 360px) {
-    height: 100% !important;
-  }
-}
-
-.column-inline-form {
-  padding: 7px 15px;
-  padding-right: 5px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  background: lighten($ui-base-color, 4%);
-
-  label {
-    flex: 1 1 auto;
-
-    input {
-      width: 100%;
-      margin-bottom: 6px;
-
-      &:focus {
-        outline: 0;
-      }
-    }
-  }
-
-  .icon-button {
-    flex: 0 0 auto;
-    margin-left: 5px;
-  }
-}
-
 .drawer__backdrop {
   cursor: pointer;
   position: absolute;
@@ -1923,15 +1204,19 @@ noscript {
   background: rgba($base-overlay-background, 0.5);
 }
 
-@import 'account';
+@import 'boost';
+@import 'accounts';
 @import 'status';
 @import 'modal';
 @import 'metadata';
 @import 'composer';
+@import 'columns';
+@import 'search';
+@import 'emoji';
 @import 'doodle';
 @import 'drawer';
 @import 'media';
 @import 'sensitive';
-@import 'list';
+@import 'lists';
 @import 'emoji_picker';
 @import 'local_settings';
generated by cgit-pink (git 2.37.1) at 2024-07-05 17:00:16 +0000