about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/styles/components
diff options
context:
space:
mode:
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
-rw-r--r--app/javascript/flavours/glitch/styles/components/about.scss38
-rw-r--r--app/javascript/flavours/glitch/styles/components/compose_form.scss (renamed from app/javascript/flavours/glitch/styles/components/composer.scss)355
-rw-r--r--app/javascript/flavours/glitch/styles/components/index.scss39
-rw-r--r--app/javascript/flavours/glitch/styles/components/modal.scss4
-rw-r--r--app/javascript/flavours/glitch/styles/components/signed_out.scss14
-rw-r--r--app/javascript/flavours/glitch/styles/components/single_column.scss6
6 files changed, 235 insertions, 221 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss
index ca9ba3ebf..c6cc6c615 100644
--- a/app/javascript/flavours/glitch/styles/components/about.scss
+++ b/app/javascript/flavours/glitch/styles/components/about.scss
@@ -30,6 +30,34 @@
   }
 }
 
+.link-footer {
+  flex: 0 0 auto;
+  padding: 10px;
+  padding-top: 20px;
+  z-index: 1;
+  font-size: 13px;
+
+  p {
+    color: $dark-text-color;
+    margin-bottom: 20px;
+
+    strong {
+      font-weight: 500;
+    }
+
+    a {
+      color: $dark-text-color;
+      text-decoration: underline;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
 .about {
   padding: 20px;
 
@@ -37,6 +65,14 @@
     border-radius: 4px;
   }
 
+  &__footer {
+    color: $dark-text-color;
+    text-align: center;
+    font-size: 15px;
+    line-height: 22px;
+    margin-top: 20px;
+  }
+
   &__header {
     margin-bottom: 30px;
 
@@ -157,7 +193,7 @@
     }
   }
 
-  .getting-started__footer {
+  .link-footer {
     padding: 0;
     margin-top: 60px;
     text-align: center;
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss
index da086833c..72d3aad1d 100644
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -1,4 +1,4 @@
-.composer {
+.compose-form {
   padding: 10px;
 
   .emoji-picker-dropdown {
@@ -25,16 +25,16 @@
   }
 }
 
-.no-reduce-motion .composer--spoiler {
+.no-reduce-motion .spoiler-input {
   transition: height 0.4s ease, opacity 0.4s ease;
 }
 
-.composer--spoiler {
+.spoiler-input {
   height: 0;
   transform-origin: bottom;
   opacity: 0.0;
 
-  &.composer--spoiler--visible {
+  &.spoiler-input--visible {
     height: 36px;
     margin-bottom: 11px;
     opacity: 1.0;
@@ -64,7 +64,7 @@
   }
 }
 
-.composer--warning {
+.compose-form__warning {
   color: $inverted-text-color;
   margin-bottom: 15px;
   background: $ui-primary-color;
@@ -123,7 +123,7 @@
   }
 }
 
-.composer--reply {
+.reply-indicator {
   margin: 0 0 10px;
   border-radius: 4px;
   padding: 10px;
@@ -131,117 +131,117 @@
   min-height: 23px;
   overflow-y: auto;
   flex: 0 2 auto;
+}
 
-  & > header {
-    margin-bottom: 5px;
-    overflow: hidden;
+.reply-indicator__header {
+  margin-bottom: 5px;
+  overflow: hidden;
 
-    & > .account.small { color: $inverted-text-color; }
+  & > .account.small { color: $inverted-text-color; }
+}
 
-    & > .cancel {
-      float: right;
-      line-height: 24px;
-    }
-  }
+.reply-indicator__cancel {
+  float: right;
+  line-height: 24px;
+}
 
-  & > .content {
-    position: relative;
-    margin: 10px 0;
-    padding: 0 12px;
-    font-size: 14px;
-    line-height: 20px;
-    color: $inverted-text-color;
-    word-wrap: break-word;
-    font-weight: 400;
-    overflow: visible;
-    white-space: pre-wrap;
-    padding-top: 5px;
-    overflow: hidden;
+.reply-indicator__content {
+  position: relative;
+  margin: 10px 0;
+  padding: 0 12px;
+  font-size: 14px;
+  line-height: 20px;
+  color: $inverted-text-color;
+  word-wrap: break-word;
+  font-weight: 400;
+  overflow: visible;
+  white-space: pre-wrap;
+  padding-top: 5px;
+  overflow: hidden;
 
-    p, pre, blockquote {
-      margin-bottom: 20px;
-      white-space: pre-wrap;
+  p, pre, blockquote {
+    margin-bottom: 20px;
+    white-space: pre-wrap;
 
-      &:last-child {
-        margin-bottom: 0;
-      }
+    &:last-child {
+      margin-bottom: 0;
     }
+  }
 
-    h1, h2, h3, h4, h5 {
-      margin-top: 20px;
-      margin-bottom: 20px;
-    }
+  h1, h2, h3, h4, h5 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
 
-    h1, h2 {
-      font-weight: 700;
-      font-size: 18px;
-    }
+  h1, h2 {
+    font-weight: 700;
+    font-size: 18px;
+  }
 
-    h2 {
-      font-size: 16px;
-    }
+  h2 {
+    font-size: 16px;
+  }
 
-    h3, h4, h5 {
-      font-weight: 500;
-    }
+  h3, h4, h5 {
+    font-weight: 500;
+  }
 
-    blockquote {
-      padding-left: 10px;
-      border-left: 3px solid $inverted-text-color;
-      color: $inverted-text-color;
-      white-space: normal;
+  blockquote {
+    padding-left: 10px;
+    border-left: 3px solid $inverted-text-color;
+    color: $inverted-text-color;
+    white-space: normal;
 
-      p:last-child {
-        margin-bottom: 0;
-      }
+    p:last-child {
+      margin-bottom: 0;
     }
+  }
 
-    b, strong {
-      font-weight: 700;
-    }
+  b, strong {
+    font-weight: 700;
+  }
 
-    em, i {
-      font-style: italic;
-    }
+  em, i {
+    font-style: italic;
+  }
 
-    sub {
-      font-size: smaller;
-      vertical-align: sub;
-    }
+  sub {
+    font-size: smaller;
+    vertical-align: sub;
+  }
 
-    sup {
-      font-size: smaller;
-      vertical-align: super;
-    }
+  sup {
+    font-size: smaller;
+    vertical-align: super;
+  }
 
-    ul, ol {
-      margin-left: 1em;
+  ul, ol {
+    margin-left: 1em;
 
-      p {
-        margin: 0;
-      }
+    p {
+      margin: 0;
     }
+  }
 
-    ul {
-      list-style-type: disc;
-    }
+  ul {
+    list-style-type: disc;
+  }
 
-    ol {
-      list-style-type: decimal;
-    }
+  ol {
+    list-style-type: decimal;
+  }
 
-    a {
-      color: $lighter-text-color;
-      text-decoration: none;
+  a {
+    color: $lighter-text-color;
+    text-decoration: none;
 
-      &:hover { text-decoration: underline }
+    &:hover { text-decoration: underline }
 
-      &.mention {
-        &:hover {
-          text-decoration: none;
+    &.mention {
+      &:hover {
+        text-decoration: none;
 
-          span { text-decoration: underline }
-        }
+        span { text-decoration: underline }
       }
     }
   }
@@ -253,8 +253,12 @@
   }
 }
 
-.compose-form__autosuggest-wrapper,
-.autosuggest-input {
+.compose-form .compose-form__autosuggest-wrapper {
+  position: relative;
+}
+
+.compose-form .autosuggest-textarea,
+.compose-form .autosuggest-input {
   position: relative;
   width: 100%;
 
@@ -284,10 +288,6 @@
         all: unset;
       }
 
-      &:disabled {
-        background: $ui-secondary-color;
-      }
-
       &:focus {
         outline: 0;
       }
@@ -304,7 +304,7 @@
   }
 }
 
-.composer--textarea--icons {
+.compose-form__textarea-icons {
   display: block;
   position: absolute;
   top: 29px;
@@ -401,25 +401,25 @@
   }
 }
 
-.composer--upload_form {
+.compose-form__upload-wrapper {
   overflow: hidden;
+}
 
-  & > .content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    font-family: inherit;
-    padding: 5px;
-    overflow: hidden;
-  }
+.compose-form__uploads-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-family: inherit;
+  padding: 5px;
+  overflow: hidden;
 }
 
-.composer--upload_form--item {
+.compose-form__upload {
   flex: 1 1 0;
   margin: 5px;
   min-width: 40%;
 
-  & > div {
+  .compose-form__upload-thumbnail {
     position: relative;
     border-radius: 4px;
     height: 140px;
@@ -459,52 +459,52 @@
   }
 }
 
-.composer--upload_form--actions {
+.compose-form__upload__actions {
   background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
 }
 
-.composer--upload_form--progress {
+.upload-progress {
   display: flex;
   padding: 10px;
   color: $darker-text-color;
   overflow: hidden;
 
-  & > .fa {
+  .fa {
     font-size: 34px;
     margin-right: 10px;
   }
 
-  & > .message {
-    flex: 1 1 auto;
+  span {
+    display: block;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+}
 
-    & > span {
-      display: block;
-      font-size: 12px;
-      font-weight: 500;
-      text-transform: uppercase;
-    }
+.upload-progress__message {
+  flex: 1 1 auto;
+}
 
-    & > .backdrop {
-      position: relative;
-      margin-top: 5px;
-      border-radius: 6px;
-      width: 100%;
-      height: 6px;
-      background: $ui-base-lighter-color;
-
-      & > .tracker {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 6px;
-        border-radius: 6px;
-        background: $ui-highlight-color;
-      }
-    }
-  }
+.upload-progress__backdrop {
+  position: relative;
+  margin-top: 5px;
+  border-radius: 6px;
+  width: 100%;
+  height: 6px;
+  background: $ui-base-lighter-color;
+}
+
+.upload-progress__tracker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 6px;
+  border-radius: 6px;
+  background: $ui-highlight-color;
 }
 
 .compose-form__modifiers {
@@ -514,7 +514,7 @@
   background: $simple-background-color;
 }
 
-.composer--options-wrapper {
+.compose-form__buttons-wrapper {
   padding: 10px;
   background: darken($simple-background-color, 8%);
   border-radius: 0 0 4px 4px;
@@ -524,7 +524,7 @@
   flex: 0 0 auto;
 }
 
-.composer--options {
+.compose-form__buttons {
   display: flex;
   flex: 0 0 auto;
 
@@ -551,30 +551,41 @@
   }
 }
 
-.compose--counter-wrapper {
+.character-counter__wrapper {
   align-self: center;
   margin-right: 4px;
 }
 
-.composer--options--dropdown {
-  &.open {
-    & > .value {
-      border-radius: 4px 4px 0 0;
-      box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
-      color: $primary-text-color;
-      background: $ui-highlight-color;
+.privacy-dropdown.active {
+  .privacy-dropdown__value {
+    background: $simple-background-color;
+    border-radius: 4px 4px 0 0;
+    box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
+
+    .icon-button {
       transition: none;
     }
-    &.top {
-      & > .value {
-        border-radius: 0 0 4px 4px;
-        box-shadow: 0 4px 4px rgba($base-shadow-color, 0.1);
+
+    &.active {
+      background: $ui-highlight-color;
+
+      .icon-button {
+        color: $primary-text-color;
       }
     }
   }
+
+  &.top .privacy-dropdown__value {
+    border-radius: 0 0 4px 4px;
+  }
+
+  .privacy-dropdown__dropdown {
+    display: block;
+    box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
+  }
 }
 
-.composer--options--dropdown--content {
+.privacy-dropdown__dropdown {
   position: absolute;
   border-radius: 4px;
   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
@@ -583,14 +594,14 @@
   transform-origin: 50% 0;
 }
 
-.composer--options--dropdown--content--item {
+.privacy-dropdown__option {
   display: flex;
   align-items: center;
   padding: 10px;
   color: $inverted-text-color;
   cursor: pointer;
 
-  & > .content {
+  .privacy-dropdown__option__content {
     flex: 1 1 auto;
     color: $lighter-text-color;
 
@@ -608,7 +619,7 @@
     background: $ui-highlight-color;
     color: $primary-text-color;
 
-    & > .content {
+    .privacy-dropdown__option__content {
       color: $primary-text-color;
 
       strong { color: $primary-text-color }
@@ -618,31 +629,25 @@
   &.active:hover { background: lighten($ui-highlight-color, 4%) }
 }
 
-.composer--publisher {
-  padding-top: 10px;
-  text-align: right;
-  white-space: nowrap;
-  overflow: hidden;
+.compose-form__publish {
+  display: flex;
   justify-content: flex-end;
+  min-width: 0;
   flex: 0 0 auto;
+  column-gap: 5px;
 
-  & > .primary {
-    display: inline-block;
-    margin: 0;
-    padding: 7px 10px;
-    text-align: center;
-  }
+  .compose-form__publish-button-wrapper {
+    overflow: hidden;
+    padding-top: 10px;
 
-  & > .side_arm {
-    display: inline-block;
-    margin: 0 5px;
-    padding: 7px 0;
-    width: 36px;
-    text-align: center;
-  }
+    button {
+      padding: 7px 10px;
+      text-align: center;
+    }
 
-  &.over {
-    & > .count { color: $warning-red }
+    & > .side_arm {
+      width: 36px;
+    }
   }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 28f93018d..b00038afd 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -1044,43 +1044,6 @@
     color: $dark-text-color;
   }
 
-  &__footer {
-    flex: 0 0 auto;
-    padding: 10px;
-    padding-top: 20px;
-    z-index: 1;
-    font-size: 13px;
-
-    ul {
-      margin-bottom: 10px;
-    }
-
-    ul li {
-      display: inline;
-    }
-
-    p {
-      color: $dark-text-color;
-      margin-bottom: 20px;
-
-      a {
-        color: $dark-text-color;
-        text-decoration: underline;
-      }
-    }
-
-    a {
-      text-decoration: none;
-      color: $darker-text-color;
-
-      &:hover,
-      &:focus,
-      &:active {
-        text-decoration: underline;
-      }
-    }
-  }
-
   &__trends {
     flex: 0 1 auto;
     opacity: 1;
@@ -1775,7 +1738,7 @@ noscript {
 @import 'domains';
 @import 'status';
 @import 'modal';
-@import 'composer';
+@import 'compose_form';
 @import 'columns';
 @import 'regeneration_indicator';
 @import 'directory';
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index cd96f83d6..711d4d5b2 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -1290,11 +1290,11 @@
   }
 }
 
-.modal-root__container .composer--options--dropdown {
+.modal-root__container .privacy-dropdown {
   flex-grow: 0;
 }
 
-.modal-root__container .composer--options--dropdown--content {
+.modal-root__container .privacy-dropdown__dropdown {
   pointer-events: auto;
   z-index: 9999;
 }
diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss
index 1051b2f32..efb49305d 100644
--- a/app/javascript/flavours/glitch/styles/components/signed_out.scss
+++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss
@@ -4,6 +4,20 @@
   p {
     color: $darker-text-color;
     margin-bottom: 20px;
+
+    a {
+      color: $secondary-text-color;
+      text-decoration: none;
+      unicode-bidi: isolate;
+
+      &:hover {
+        text-decoration: underline;
+
+        .fa {
+          color: lighten($dark-text-color, 7%);
+        }
+      }
+    }
   }
 
   .button {
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index 1f1d7d68d..d91306151 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -41,7 +41,7 @@
     flex: 0 1 48px;
   }
 
-  .composer {
+  .compose-form {
     flex: 1;
     overflow-y: hidden;
     display: flex;
@@ -59,10 +59,6 @@
   .autosuggest-textarea__textarea {
     overflow-y: hidden;
   }
-
-  .compose-form__upload-thumbnail {
-    height: 80px;
-  }
 }
 
 .navigation-panel {
generated by cgit-pink (git 2.37.1) at 2024-07-08 08:27:25 +0000