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.scss1805
1 files changed, 1 insertions, 1804 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index d50316366..497b66b3e 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -1,1807 +1,4 @@
-.app-body {
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-
-.animated-number {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: stretch;
-  overflow: hidden;
-  position: relative;
-}
-
-.link-button {
-  display: block;
-  font-size: 15px;
-  line-height: 20px;
-  color: $highlight-text-color;
-  border: 0;
-  background: transparent;
-  padding: 0;
-  cursor: pointer;
-  text-decoration: none;
-
-  &--destructive {
-    color: $error-value-color;
-  }
-
-  &:hover,
-  &:active {
-    text-decoration: underline;
-  }
-
-  &:disabled {
-    color: $ui-primary-color;
-    cursor: default;
-  }
-}
-
-.button {
-  background-color: darken($ui-highlight-color, 3%);
-  border: 10px none;
-  border-radius: 4px;
-  box-sizing: border-box;
-  color: $primary-text-color;
-  cursor: pointer;
-  display: inline-block;
-  font-family: inherit;
-  font-size: 15px;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 22px;
-  overflow: hidden;
-  padding: 7px 18px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: auto;
-
-  &:active,
-  &:focus,
-  &:hover {
-    background-color: $ui-highlight-color;
-  }
-
-  &--destructive {
-    &:active,
-    &:focus,
-    &:hover {
-      background-color: $error-red;
-      transition: none;
-    }
-  }
-
-  &:disabled {
-    background-color: $ui-primary-color;
-    cursor: default;
-  }
-
-  &.button-alternative {
-    color: $inverted-text-color;
-    background: $ui-primary-color;
-
-    &:active,
-    &:focus,
-    &:hover {
-      background-color: lighten($ui-primary-color, 4%);
-    }
-  }
-
-  &.button-alternative-2 {
-    background: $ui-base-lighter-color;
-
-    &:active,
-    &:focus,
-    &:hover {
-      background-color: lighten($ui-base-lighter-color, 4%);
-    }
-  }
-
-  &.button-secondary {
-    font-size: 16px;
-    line-height: 36px;
-    height: auto;
-    color: $darker-text-color;
-    text-transform: none;
-    background: transparent;
-    padding: 6px 17px;
-    border: 1px solid $ui-primary-color;
-
-    &:active,
-    &:focus,
-    &:hover {
-      border-color: lighten($ui-primary-color, 4%);
-      color: lighten($darker-text-color, 4%);
-      text-decoration: none;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-    }
-  }
-
-  &.button-tertiary {
-    background: transparent;
-    padding: 6px 17px;
-    color: $highlight-text-color;
-    border: 1px solid $highlight-text-color;
-
-    &:active,
-    &:focus,
-    &:hover {
-      background: $ui-highlight-color;
-      color: $primary-text-color;
-      border: 0;
-      padding: 7px 18px;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-    }
-
-    &.button--confirmation {
-      color: $valid-value-color;
-      border-color: $valid-value-color;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background: $valid-value-color;
-        color: $primary-text-color;
-      }
-    }
-
-    &.button--destructive {
-      color: $error-value-color;
-      border-color: $error-value-color;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background: $error-value-color;
-        color: $primary-text-color;
-      }
-    }
-  }
-
-  &.button--block {
-    display: block;
-    width: 100%;
-  }
-
-  .layout-multiple-columns &.button--with-bell {
-    font-size: 12px;
-    padding: 0 8px;
-  }
-}
-
-.icon-button {
-  display: inline-block;
-  padding: 0;
-  color: $action-button-color;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  cursor: pointer;
-  transition: all 100ms ease-in;
-  transition-property: background-color, color;
-  text-decoration: none;
-
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: lighten($action-button-color, 7%);
-    background-color: rgba($action-button-color, 0.15);
-    transition: all 200ms ease-out;
-    transition-property: background-color, color;
-  }
-
-  &:focus {
-    background-color: rgba($action-button-color, 0.3);
-  }
-
-  &.disabled {
-    color: darken($action-button-color, 13%);
-    background-color: transparent;
-    cursor: default;
-  }
-
-  &.active {
-    color: $highlight-text-color;
-  }
-
-  &.copyable {
-    transition: background 300ms linear;
-  }
-
-  &.copied {
-    background: $valid-value-color;
-    transition: none;
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-
-  &.inverted {
-    color: $lighter-text-color;
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: darken($lighter-text-color, 7%);
-      background-color: rgba($lighter-text-color, 0.15);
-    }
-
-    &:focus {
-      background-color: rgba($lighter-text-color, 0.3);
-    }
-
-    &.disabled {
-      color: lighten($lighter-text-color, 7%);
-      background-color: transparent;
-    }
-
-    &.active {
-      color: $highlight-text-color;
-
-      &.disabled {
-        color: lighten($highlight-text-color, 13%);
-      }
-    }
-  }
-
-  &.overlayed {
-    box-sizing: content-box;
-    background: rgba($base-overlay-background, 0.6);
-    color: rgba($primary-text-color, 0.7);
-    border-radius: 4px;
-    padding: 2px;
-
-    &:hover {
-      background: rgba($base-overlay-background, 0.9);
-    }
-  }
-
-  &--with-counter {
-    display: inline-flex;
-    align-items: center;
-    width: auto !important;
-    padding: 0 4px 0 2px;
-  }
-
-  &__counter {
-    display: inline-block;
-    width: auto;
-    margin-left: 4px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-}
-
-.text-icon,
-.text-icon-button {
-  font-weight: 600;
-  font-size: 11px;
-  line-height: 27px;
-  cursor: default;
-}
-
-.text-icon-button {
-  color: $lighter-text-color;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  cursor: pointer;
-  padding: 0 3px;
-  outline: 0;
-  transition: all 100ms ease-in;
-  transition-property: background-color, color;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: darken($lighter-text-color, 7%);
-    background-color: rgba($lighter-text-color, 0.15);
-    transition: all 200ms ease-out;
-    transition-property: background-color, color;
-  }
-
-  &:focus {
-    background-color: rgba($lighter-text-color, 0.3);
-  }
-
-  &.disabled {
-    color: lighten($lighter-text-color, 20%);
-    background-color: transparent;
-    cursor: default;
-  }
-
-  &.active {
-    color: $highlight-text-color;
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-}
-
-body > [data-popper-placement] {
-  z-index: 3;
-}
-
-.invisible {
-  font-size: 0;
-  line-height: 0;
-  display: inline-block;
-  width: 0;
-  height: 0;
-  position: absolute;
-
-  img,
-  svg {
-    margin: 0 !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 0 !important;
-    height: 0 !important;
-  }
-}
-
-.ellipsis {
-  &::after {
-    content: "…";
-  }
-}
-
-.notification__favourite-icon-wrapper {
-  left: 0;
-  position: absolute;
-
-  .fa.star-icon {
-    color: $gold-star;
-  }
-}
-
-.icon-button.star-icon.active {
-  color: $gold-star;
-}
-
-.icon-button.bookmark-icon.active {
-  color: $red-bookmark;
-}
-
-.no-reduce-motion .icon-button.star-icon {
-  &.activate {
-    & > .fa-star {
-      animation: spring-rotate-in 1s linear;
-    }
-  }
-
-  &.deactivate {
-    & > .fa-star {
-      animation: spring-rotate-out 1s linear;
-    }
-  }
-}
-
-.notification__display-name {
-  color: inherit;
-  font-weight: 500;
-  text-decoration: none;
-
-  &:hover {
-    color: $primary-text-color;
-    text-decoration: underline;
-  }
-}
-
-.display-name {
-  display: block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  strong {
-    display: block;
-  }
-
-  > a:hover {
-    strong {
-      text-decoration: underline;
-    }
-  }
-
-  &.inline {
-    padding: 0;
-    height: 18px;
-    font-size: 15px;
-    line-height: 18px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-
-    strong {
-      display: inline;
-      height: auto;
-      font-size: inherit;
-      line-height: inherit;
-    }
-
-    span {
-      display: inline;
-      height: auto;
-      font-size: inherit;
-      line-height: inherit;
-    }
-  }
-}
-
-.display-name__html {
-  font-weight: 500;
-}
-
-.display-name__account {
-  font-size: 14px;
-}
-
-.image-loader {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  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;
-    max-height: $media-modal-media-max-height;
-    background: url('~images/void.png') repeat;
-    object-fit: contain;
-  }
-
-  .loading-bar__container {
-    position: relative;
-  }
-
-  .loading-bar {
-    position: absolute;
-  }
-
-  &.image-loader--amorphous .image-loader__preview-canvas {
-    display: none;
-  }
-}
-
-.zoomable-image {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    max-width: $media-modal-media-max-width;
-    max-height: $media-modal-media-max-height;
-    width: auto;
-    height: auto;
-    object-fit: contain;
-  }
-}
-
-.dropdown-animation {
-  animation: dropdown 300ms cubic-bezier(0.1, 0.7, 0.1, 1);
-
-  @keyframes dropdown {
-    from {
-      opacity: 0;
-      transform: scaleX(0.85) scaleY(0.75);
-    }
-
-    to {
-      opacity: 1;
-      transform: scaleX(1) scaleY(1);
-    }
-  }
-
-  &.top {
-    transform-origin: bottom;
-  }
-
-  &.right {
-    transform-origin: left;
-  }
-
-  &.bottom {
-    transform-origin: top;
-  }
-
-  &.left {
-    transform-origin: right;
-  }
-
-  .reduce-motion & {
-    animation: none;
-  }
-}
-
-.dropdown {
-  display: inline-block;
-}
-
-.dropdown__content {
-  display: none;
-  position: absolute;
-}
-
-.dropdown-menu__separator {
-  border-bottom: 1px solid darken($ui-secondary-color, 8%);
-  margin: 5px 7px 6px;
-  height: 0;
-}
-
-.dropdown-menu {
-  background: $ui-secondary-color;
-  padding: 4px 0;
-  border-radius: 4px;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-  z-index: 9999;
-
-  &__text-button {
-    display: inline;
-    color: inherit;
-    background: transparent;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-
-    &:focus {
-      outline: 1px dotted;
-    }
-  }
-
-  &__container {
-    &__header {
-      border-bottom: 1px solid darken($ui-secondary-color, 8%);
-      padding: 4px 14px;
-      padding-bottom: 8px;
-      font-size: 13px;
-      line-height: 18px;
-      color: $inverted-text-color;
-    }
-
-    &__list {
-      list-style: none;
-
-      &--scrollable {
-        max-height: 300px;
-        overflow-y: scroll;
-      }
-    }
-
-    &--loading {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 30px 45px;
-    }
-  }
-}
-
-.dropdown-menu__arrow {
-  position: absolute;
-
-  &::before {
-    content: '';
-    display: block;
-    width: 14px;
-    height: 5px;
-    background-color: $ui-secondary-color;
-    mask-image: url("data:image/svg+xml;utf8,<svg width='14' height='5' xmlns='http://www.w3.org/2000/svg'><path d='M7 0L0 5h14L7 0z' fill='white'/></svg>");
-  }
-
-  &.top {
-    bottom: -5px;
-
-    &::before {
-      transform: rotate(180deg);
-    }
-  }
-
-  &.right {
-    left: -9px;
-
-    &::before {
-      transform: rotate(-90deg);
-    }
-  }
-
-  &.bottom {
-    top: -5px;
-  }
-
-  &.left {
-    right: -9px;
-
-    &::before {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.dropdown-menu__item {
-  font-size: 13px;
-  line-height: 18px;
-  display: block;
-  color: $inverted-text-color;
-
-  a,
-  button {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    display: block;
-    width: 100%;
-    padding: 4px 14px;
-    border: 0;
-    margin: 0;
-    box-sizing: border-box;
-    text-decoration: none;
-    background: $ui-secondary-color;
-    color: inherit;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: inherit;
-
-    &:focus,
-    &:hover,
-    &:active {
-      background: $ui-highlight-color;
-      color: $secondary-text-color;
-      outline: 0;
-    }
-  }
-}
-
-.dropdown-menu__item--text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 4px 14px;
-}
-
-.dropdown-menu__item.edited-timestamp__history__item {
-  border-bottom: 1px solid darken($ui-secondary-color, 8%);
-
-  &:last-child {
-    border-bottom: 0;
-  }
-
-  &.dropdown-menu__item--text,
-  a,
-  button {
-    padding: 8px 14px;
-  }
-}
-
-.inline-account {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: top;
-
-  .account__avatar {
-    margin-right: 5px;
-    border-radius: 50%;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-}
-
-.dropdown--active .dropdown__content {
-  display: block;
-  line-height: 18px;
-  max-width: 311px;
-  right: 0;
-  text-align: left;
-  z-index: 9999;
-
-  & > ul {
-    list-style: none;
-    background: $ui-secondary-color;
-    padding: 4px 0;
-    border-radius: 4px;
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
-    min-width: 140px;
-    position: relative;
-  }
-
-  &.dropdown__right {
-    right: 0;
-  }
-
-  &.dropdown__left {
-    & > ul {
-      left: -98px;
-    }
-  }
-
-  & > ul > li > a {
-    font-size: 13px;
-    line-height: 18px;
-    display: block;
-    padding: 4px 14px;
-    box-sizing: border-box;
-    text-decoration: none;
-    background: $ui-secondary-color;
-    color: $inverted-text-color;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    &:focus {
-      outline: 0;
-    }
-
-    &:hover {
-      background: $ui-highlight-color;
-      color: $secondary-text-color;
-    }
-  }
-}
-
-.dropdown__icon {
-  vertical-align: middle;
-}
-
-.static-content {
-  padding: 10px;
-  padding-top: 20px;
-  color: $dark-text-color;
-
-  h1 {
-    font-size: 16px;
-    font-weight: 500;
-    margin-bottom: 40px;
-    text-align: center;
-  }
-
-  p {
-    font-size: 13px;
-    margin-bottom: 20px;
-  }
-}
-
-.column,
-.drawer {
-  flex: 1 1 100%;
-  overflow: hidden;
-}
-
-@media screen and (min-width: 631px) {
-  .columns-area {
-    padding: 0;
-  }
-
-  .column,
-  .drawer {
-    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,
-    .drawer {
-      padding-left: 5px;
-      padding-right: 5px;
-    }
-  }
-}
-
-.tabs-bar {
-  box-sizing: border-box;
-  display: flex;
-  background: lighten($ui-base-color, 8%);
-  flex: 0 0 auto;
-  overflow-y: auto;
-}
-
-.tabs-bar__link {
-  display: block;
-  flex: 1 1 auto;
-  padding: 15px 10px;
-  padding-bottom: 13px;
-  color: $primary-text-color;
-  text-decoration: none;
-  text-align: center;
-  font-size: 14px;
-  font-weight: 500;
-  border-bottom: 2px solid lighten($ui-base-color, 8%);
-  transition: all 50ms linear;
-  transition-property: border-bottom, background, color;
-
-  .fa {
-    font-weight: 400;
-    font-size: 16px;
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    @include multi-columns('screen and (min-width: 631px)') {
-      background: lighten($ui-base-color, 14%);
-      border-bottom-color: lighten($ui-base-color, 14%);
-    }
-  }
-
-  &.active {
-    border-bottom: 2px solid $ui-highlight-color;
-    color: $highlight-text-color;
-  }
-
-  span {
-    margin-left: 5px;
-    display: none;
-  }
-
-  span.icon {
-    margin-left: 0;
-    display: inline;
-  }
-}
-
-.icon-with-badge {
-  position: relative;
-
-  &__badge {
-    position: absolute;
-    left: 9px;
-    top: -13px;
-    background: $ui-highlight-color;
-    border: 2px solid lighten($ui-base-color, 8%);
-    padding: 1px 6px;
-    border-radius: 6px;
-    font-size: 10px;
-    font-weight: 500;
-    line-height: 14px;
-    color: $primary-text-color;
-  }
-
-  &__issue-badge {
-    position: absolute;
-    left: 11px;
-    bottom: 1px;
-    display: block;
-    background: $error-red;
-    border-radius: 50%;
-    width: 0.625rem;
-    height: 0.625rem;
-  }
-}
-
-.column-link--transparent .icon-with-badge__badge {
-  border-color: darken($ui-base-color, 8%);
-}
-
-.scrollable {
-  overflow-y: scroll;
-  overflow-x: hidden;
-  flex: 1 1 auto;
-  -webkit-overflow-scrolling: touch;
-
-  &.optionally-scrollable {
-    overflow-y: auto;
-  }
-
-  @supports(display: grid) { // hack to fix Chrome <57
-    contain: strict;
-  }
-
-  &--flex {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__append {
-    flex: 1 1 auto;
-    position: relative;
-    min-height: 120px;
-  }
-
-  .scrollable {
-    flex: 1 1 auto;
-  }
-}
-
-.scrollable.fullscreen {
-  @supports(display: grid) { // hack to fix Chrome <57
-    contain: none;
-  }
-}
-
-.react-toggle {
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  padding: 0;
-  user-select: none;
-  -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.react-toggle-screenreader-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.react-toggle--disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  transition: opacity 0.25s;
-}
-
-.react-toggle-track {
-  width: 50px;
-  height: 24px;
-  padding: 0;
-  border-radius: 30px;
-  background-color: $ui-base-color;
-  transition: background-color 0.2s ease;
-}
-
-.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
-  background-color: darken($ui-base-color, 10%);
-}
-
-.react-toggle--checked .react-toggle-track {
-  background-color: darken($ui-highlight-color, 2%);
-}
-
-.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
-  background-color: $ui-highlight-color;
-}
-
-.react-toggle-track-check {
-  position: absolute;
-  width: 14px;
-  height: 10px;
-  top: 0;
-  bottom: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-  line-height: 0;
-  left: 8px;
-  opacity: 0;
-  transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-check {
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-.react-toggle-track-x {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  top: 0;
-  bottom: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-  line-height: 0;
-  right: 10px;
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-x {
-  opacity: 0;
-}
-
-.react-toggle-thumb {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 22px;
-  height: 22px;
-  border: 1px solid $ui-base-color;
-  border-radius: 50%;
-  background-color: darken($simple-background-color, 2%);
-  box-sizing: border-box;
-  transition: all 0.25s ease;
-  transition-property: border-color, left;
-}
-
-.react-toggle--checked .react-toggle-thumb {
-  left: 27px;
-  border-color: $ui-highlight-color;
-}
-
-.getting-started__wrapper,
-.getting_started,
-.flex-spacer {
-  background: $ui-base-color;
-}
-
-.getting-started__wrapper {
-  position: relative;
-  overflow-y: auto;
-}
-
-.flex-spacer {
-  flex: 1 1 auto;
-}
-
-.getting-started {
-  background: $ui-base-color;
-  flex: 1 0 auto;
-
-  p {
-    color: $secondary-text-color;
-  }
-
-  a {
-    color: $dark-text-color;
-  }
-
-  &__trends {
-    flex: 0 1 auto;
-    opacity: 1;
-    animation: fade 150ms linear;
-    margin-top: 10px;
-
-    h4 {
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
-      padding: 10px;
-      font-size: 12px;
-      text-transform: uppercase;
-      font-weight: 500;
-
-      a {
-        color: $darker-text-color;
-        text-decoration: none;
-      }
-    }
-
-    @media screen and (max-height: 810px) {
-      .trends__item:nth-of-type(3) {
-        display: none;
-      }
-    }
-
-    @media screen and (max-height: 720px) {
-      .trends__item:nth-of-type(2) {
-        display: none;
-      }
-    }
-
-    @media screen and (max-height: 670px) {
-      display: none;
-    }
-
-    .trends__item {
-      border-bottom: 0;
-      padding: 10px;
-
-      &__current {
-        color: $darker-text-color;
-      }
-    }
-  }
-}
-
-.column-link__badge {
-  display: inline-block;
-  border-radius: 4px;
-  font-size: 12px;
-  line-height: 19px;
-  font-weight: 500;
-  background: $ui-base-color;
-  padding: 4px 8px;
-  margin: -6px 10px;
-}
-
-.keyboard-shortcuts {
-  padding: 8px 0 0;
-  overflow: hidden;
-
-  thead {
-    position: absolute;
-    left: -9999px;
-  }
-
-  td {
-    padding: 0 10px 8px;
-  }
-
-  kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    background-color: lighten($ui-base-color, 8%);
-    border: 1px solid darken($ui-base-color, 4%);
-  }
-}
-
-.setting-text {
-  color: $darker-text-color;
-  background: transparent;
-  border: 0;
-  border-bottom: 2px solid $ui-primary-color;
-  outline: 0;
-  box-sizing: border-box;
-  display: block;
-  font-family: inherit;
-  margin-bottom: 10px;
-  padding: 7px 0;
-  width: 100%;
-
-  &:focus,
-  &:active {
-    color: $primary-text-color;
-    border-bottom-color: $ui-highlight-color;
-  }
-
-  @include limited-single-column('screen and (max-width: 600px)') {
-    font-size: 16px;
-  }
-
-  &.light {
-    color: $inverted-text-color;
-    border-bottom: 2px solid lighten($ui-base-color, 27%);
-
-    &:focus,
-    &:active {
-      color: $inverted-text-color;
-      border-bottom-color: $ui-highlight-color;
-    }
-  }
-}
-
-button.icon-button i.fa-retweet {
-  background-position: 0 0;
-  height: 19px;
-  transition: background-position 0.9s steps(10);
-  transition-duration: 0s;
-  vertical-align: middle;
-  width: 22px;
-
-  &::before {
-    display: none !important;
-  }
-}
-
-button.icon-button.active i.fa-retweet {
-  transition-duration: 0.9s;
-  background-position: 0 100%;
-}
-
-.reduce-motion button.icon-button i.fa-retweet,
-.reduce-motion button.icon-button.active i.fa-retweet {
-  transition: none;
-}
-
-.reduce-motion button.icon-button.disabled i.fa-retweet {
-  color: darken($action-button-color, 13%);
-}
-
-.load-more {
-  display: block;
-  color: $dark-text-color;
-  background-color: transparent;
-  border: 0;
-  font-size: inherit;
-  text-align: center;
-  line-height: inherit;
-  margin: 0;
-  padding: 15px;
-  box-sizing: border-box;
-  width: 100%;
-  clear: both;
-  text-decoration: none;
-
-  &:hover {
-    background: lighten($ui-base-color, 2%);
-  }
-}
-
-.load-gap {
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-}
-
-.timeline-hint {
-  text-align: center;
-  color: $darker-text-color;
-  padding: 15px;
-  box-sizing: border-box;
-  width: 100%;
-  cursor: default;
-
-  strong {
-    font-weight: 500;
-  }
-
-  a {
-    color: $highlight-text-color;
-    text-decoration: none;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
-      color: lighten($highlight-text-color, 4%);
-    }
-  }
-}
-
-.missing-indicator {
-  padding-top: 20px + 48px;
-
-  .regeneration-indicator__figure {
-    background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg');
-  }
-}
-
-.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy {
-  border-top: 1px solid $ui-base-color;
-}
-
-.notification__dismiss-overlay {
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: -1px;
-  padding-left: 15px; // space for the box shadow to be visible
-
-  z-index: 999;
-  align-items: center;
-  justify-content: flex-end;
-  cursor: pointer;
-
-  display: flex;
-
-  .wrappy {
-    width: $dismiss-overlay-width;
-    align-self: stretch;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: lighten($ui-base-color, 8%);
-    border-left: 1px solid lighten($ui-base-color, 20%);
-    box-shadow: 0 0 5px black;
-    border-bottom: 1px solid $ui-base-color;
-  }
-
-  .ckbox {
-    border: 2px solid $ui-primary-color;
-    border-radius: 2px;
-    width: 30px;
-    height: 30px;
-    font-size: 20px;
-    color: $darker-text-color;
-    text-shadow: 0 0 5px black;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  &:focus {
-    outline: 0 !important;
-
-    .ckbox {
-      box-shadow: 0 0 1px 1px $ui-highlight-color;
-    }
-  }
-}
-
-.text-btn {
-  display: inline-block;
-  padding: 0;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-}
-
-.loading-indicator {
-  color: $dark-text-color;
-  font-size: 12px;
-  font-weight: 400;
-  text-transform: uppercase;
-  overflow: visible;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.circular-progress {
-  color: lighten($ui-base-color, 26%);
-  animation: 1.4s linear 0s infinite normal none running simple-rotate;
-
-  circle {
-    stroke: currentColor;
-    stroke-dasharray: 80px, 200px;
-    stroke-dashoffset: 0;
-    animation: circular-progress 1.4s ease-in-out infinite;
-  }
-}
-
-@keyframes circular-progress {
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
-  }
-
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
-  }
-
-  100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
-  }
-}
-
-@keyframes simple-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes spring-rotate-in {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  30% {
-    transform: rotate(-484.8deg);
-  }
-
-  60% {
-    transform: rotate(-316.7deg);
-  }
-
-  90% {
-    transform: rotate(-375deg);
-  }
-
-  100% {
-    transform: rotate(-360deg);
-  }
-}
-
-@keyframes spring-rotate-out {
-  0% {
-    transform: rotate(-360deg);
-  }
-
-  30% {
-    transform: rotate(124.8deg);
-  }
-
-  60% {
-    transform: rotate(-43.27deg);
-  }
-
-  90% {
-    transform: rotate(15deg);
-  }
-
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
-.spoiler-button {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 100;
-
-  &--minified {
-    display: flex;
-    left: 4px;
-    top: 4px;
-    width: auto;
-    height: auto;
-    align-items: center;
-  }
-
-  &--click-thru {
-    pointer-events: none;
-  }
-
-  &--hidden {
-    display: none;
-  }
-
-  &__overlay {
-    display: block;
-    background: transparent;
-    width: 100%;
-    height: 100%;
-    border: 0;
-
-    &__label {
-      display: inline-block;
-      background: rgba($base-overlay-background, 0.5);
-      border-radius: 8px;
-      padding: 8px 12px;
-      color: $primary-text-color;
-      font-weight: 500;
-      font-size: 14px;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      .spoiler-button__overlay__label {
-        background: rgba($base-overlay-background, 0.8);
-      }
-    }
-
-    &:disabled {
-      .spoiler-button__overlay__label {
-        background: rgba($base-overlay-background, 0.5);
-      }
-    }
-  }
-}
-
-.setting-toggle {
-  display: block;
-  line-height: 24px;
-}
-
-.setting-toggle__label,
-.setting-meta__label {
-  color: $darker-text-color;
-  display: inline-block;
-  margin-bottom: 14px;
-  margin-left: 8px;
-  vertical-align: middle;
-}
-
-.column-settings__row .radio-button {
-  display: block;
-}
-
-.setting-meta__label {
-  float: right;
-}
-
-@keyframes heartbeat {
-  from {
-    transform: scale(1);
-    transform-origin: center center;
-    animation-timing-function: ease-out;
-  }
-
-  10% {
-    transform: scale(0.91);
-    animation-timing-function: ease-in;
-  }
-
-  17% {
-    transform: scale(0.98);
-    animation-timing-function: ease-out;
-  }
-
-  33% {
-    transform: scale(0.87);
-    animation-timing-function: ease-in;
-  }
-
-  45% {
-    transform: scale(1);
-    animation-timing-function: ease-out;
-  }
-}
-
-.pulse-loading {
-  animation: heartbeat 1.5s ease-in-out infinite both;
-}
-
-.upload-area {
-  align-items: center;
-  background: rgba($base-overlay-background, 0.8);
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  visibility: hidden;
-  width: 100%;
-  z-index: 2000;
-
-  * {
-    pointer-events: none;
-  }
-}
-
-.upload-area__drop {
-  width: 320px;
-  height: 160px;
-  display: flex;
-  box-sizing: border-box;
-  position: relative;
-  padding: 8px;
-}
-
-.upload-area__background {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: -1;
-  border-radius: 4px;
-  background: $ui-base-color;
-  box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
-}
-
-.upload-area__content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: $secondary-text-color;
-  font-size: 18px;
-  font-weight: 500;
-  border: 2px dashed $ui-base-lighter-color;
-  border-radius: 4px;
-}
-
-.dropdown--active .emoji-button img {
-  opacity: 1;
-  filter: none;
-}
-
-.loading-bar {
-  background-color: $ui-highlight-color;
-  height: 3px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-}
-
-.icon-badge-wrapper {
-  position: relative;
-}
-
-.icon-badge {
-  position: absolute;
-  display: block;
-  right: -.25em;
-  top: -.25em;
-  background-color: $ui-highlight-color;
-  border-radius: 50%;
-  font-size: 75%;
-  width: 1em;
-  height: 1em;
-}
-
-.conversation {
-  display: flex;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-  padding: 5px;
-  padding-bottom: 0;
-
-  &:focus {
-    background: lighten($ui-base-color, 2%);
-    outline: 0;
-  }
-
-  &__avatar {
-    flex: 0 0 auto;
-    padding: 10px;
-    padding-top: 12px;
-    position: relative;
-    cursor: pointer;
-  }
-
-  &__unread {
-    display: inline-block;
-    background: $highlight-text-color;
-    border-radius: 50%;
-    width: 0.625rem;
-    height: 0.625rem;
-    margin: -.1ex .15em .1ex;
-  }
-
-  &__content {
-    flex: 1 1 auto;
-    padding: 10px 5px;
-    padding-right: 15px;
-    overflow: hidden;
-
-    &__info {
-      overflow: hidden;
-      display: flex;
-      flex-direction: row-reverse;
-      justify-content: space-between;
-    }
-
-    &__relative-time {
-      font-size: 15px;
-      color: $darker-text-color;
-      padding-left: 15px;
-    }
-
-    &__names {
-      color: $darker-text-color;
-      font-size: 15px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-bottom: 4px;
-      flex-basis: 90px;
-      flex-grow: 1;
-
-      a {
-        color: $primary-text-color;
-        text-decoration: none;
-
-        &:hover,
-        &:focus,
-        &:active {
-          text-decoration: underline;
-        }
-      }
-    }
-
-    .status__content {
-      margin: 0;
-    }
-  }
-
-  &--unread {
-    background: lighten($ui-base-color, 2%);
-
-    &:focus {
-      background: lighten($ui-base-color, 4%);
-    }
-
-    .conversation__content__info {
-      font-weight: 700;
-    }
-
-    .conversation__content__relative-time {
-      color: $primary-text-color;
-    }
-  }
-}
-
-.ui .flash-message {
-  margin-top: 10px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 0;
-  min-width: 75%;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 0;
-}
-
-noscript {
-  text-align: center;
-
-  img {
-    width: 200px;
-    opacity: 0.5;
-    animation: flicker 4s infinite;
-  }
-
-  div {
-    font-size: 14px;
-    margin: 30px auto;
-    color: $secondary-text-color;
-    max-width: 400px;
-
-    a {
-      color: $highlight-text-color;
-      text-decoration: underline;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    a {
-      word-break: break-word;
-    }
-  }
-}
-
-@keyframes flicker {
-  0% { opacity: 1; }
-  30% { opacity: 0.75; }
-  100% { opacity: 1; }
-}
-
+@import 'misc';
 @import 'boost';
 @import 'accounts';
 @import 'domains';
generated by cgit-pink (git 2.37.1) at 2024-05-06 01:09:24 +0000