about summary refs log tree commit diff
path: root/app/javascript/styles
diff options
context:
space:
mode:
Diffstat (limited to 'app/javascript/styles')
-rw-r--r--app/javascript/styles/contrast/diff.scss74
-rw-r--r--app/javascript/styles/contrast/variables.scss4
-rw-r--r--app/javascript/styles/mastodon-light/diff.scss42
-rw-r--r--app/javascript/styles/mastodon/components.scss271
4 files changed, 213 insertions, 178 deletions
diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss
index 27eb837df..4fa1a0361 100644
--- a/app/javascript/styles/contrast/diff.scss
+++ b/app/javascript/styles/contrast/diff.scss
@@ -1,4 +1,3 @@
-// components.scss
 .compose-form {
   .compose-form__modifiers {
     .compose-form__upload {
@@ -14,61 +13,66 @@
 }
 
 .status__content a,
-.reply-indicator__content a {
-  color: lighten($ui-highlight-color, 12%);
+.link-footer a,
+.reply-indicator__content a,
+.status__content__read-more-button {
   text-decoration: underline;
 
-  &.mention {
+  &:hover,
+  &:focus,
+  &:active {
     text-decoration: none;
   }
 
-  &.mention span {
-    text-decoration: underline;
+  &.mention {
+    text-decoration: none;
+
+    span {
+      text-decoration: underline;
+    }
 
     &:hover,
     &:focus,
     &:active {
-      text-decoration: none;
+      span {
+        text-decoration: none;
+      }
     }
   }
+}
 
-  &:hover,
-  &:focus,
-  &:active {
-    text-decoration: none;
-  }
+.status__content a {
+  color: $highlight-text-color;
+}
 
-  &.status__content__spoiler-link {
-    color: $secondary-text-color;
-    text-decoration: none;
-  }
+.nothing-here {
+  color: $darker-text-color;
 }
 
-.status__content__read-more-button {
-  text-decoration: underline;
+.compose-form__poll-wrapper .button.button-secondary,
+.compose-form .autosuggest-textarea__textarea::placeholder,
+.compose-form .spoiler-input__input::placeholder,
+.report-dialog-modal__textarea::placeholder,
+.language-dropdown__dropdown__results__item__common-name,
+.compose-form .icon-button {
+  color: $inverted-text-color;
+}
 
-  &:hover,
-  &:focus,
-  &:active {
-    text-decoration: none;
-  }
+.text-icon-button.active {
+  color: $ui-highlight-color;
 }
 
-.getting-started__footer a {
-  text-decoration: underline;
+.language-dropdown__dropdown__results__item.active {
+  background: $ui-highlight-color;
+  font-weight: 500;
+}
+
+.link-button:disabled {
+  cursor: not-allowed;
 
   &:hover,
   &:focus,
   &:active {
-    text-decoration: none;
+    text-decoration: none !important;
   }
 }
-
-.nothing-here {
-  color: $darker-text-color;
-}
-
-.compose-form .autosuggest-textarea__textarea::placeholder,
-.compose-form .spoiler-input__input::placeholder {
-  color: $inverted-text-color;
-}
diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss
index 9edfd6d8d..e38d24b27 100644
--- a/app/javascript/styles/contrast/variables.scss
+++ b/app/javascript/styles/contrast/variables.scss
@@ -14,8 +14,8 @@ $ui-highlight-color: $classic-highlight-color !default;
 $darker-text-color: lighten($ui-primary-color, 20%) !default;
 $dark-text-color: lighten($ui-primary-color, 12%) !default;
 $secondary-text-color: lighten($ui-secondary-color, 6%) !default;
-$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
-$action-button-color: #8d9ac2;
+$highlight-text-color: lighten($ui-highlight-color, 10%) !default;
+$action-button-color: lighten($ui-base-color, 50%);
 
 $inverted-text-color: $black !default;
 $lighter-text-color: darken($ui-base-color, 6%) !default;
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 20e973b8b..d928a55ed 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -41,7 +41,8 @@ html {
 }
 
 .about__meta,
-.about__section__title {
+.about__section__title,
+.interaction-modal {
   background: $white;
   border: 1px solid lighten($ui-base-color, 8%);
 }
@@ -414,6 +415,7 @@ html {
 
 .icon-with-badge__badge {
   border-color: $white;
+  color: $white;
 }
 
 .report-modal__comment {
@@ -430,10 +432,36 @@ html {
   border-top: 0;
 }
 
-.focal-point__preview strong {
+.dashboard__quick-access,
+.focal-point__preview strong,
+.admin-wrapper .content__heading__tabs a.selected {
   color: $white;
 }
 
+.button.button-tertiary {
+  &:hover,
+  &:focus,
+  &:active {
+    color: $white;
+  }
+}
+
+.button.button-secondary {
+  border-color: $darker-text-color;
+  color: $darker-text-color;
+
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: darken($darker-text-color, 8%);
+    color: darken($darker-text-color, 8%);
+  }
+}
+
+.flash-message.warning {
+  color: lighten($gold-star, 16%);
+}
+
 .boost-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar,
@@ -640,6 +668,16 @@ html {
   }
 }
 
+.reply-indicator {
+  background: transparent;
+  border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.dismissable-banner {
+  border-left: 1px solid lighten($ui-base-color, 8%);
+  border-right: 1px solid lighten($ui-base-color, 8%);
+}
+
 .status__content,
 .reply-indicator__content {
   a {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index b57f6802d..c50b74d23 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -742,6 +742,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 {
@@ -3120,43 +3134,6 @@ $ui-header-height: 55px;
   color: $dark-text-color;
   overflow: auto;
 
-  &__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;
@@ -3223,23 +3200,49 @@ $ui-header-height: 55px;
 .setting-text {
   display: block;
   box-sizing: border-box;
-  width: 100%;
   margin: 0;
-  color: $darker-text-color;
-  background: transparent;
-  padding: 7px 0;
+  color: $inverted-text-color;
+  background: $white;
+  padding: 7px 10px;
   font-family: inherit;
   font-size: 14px;
-  resize: vertical;
-  border: 0;
-  border-bottom: 2px solid $ui-primary-color;
-  outline: 0;
+  line-height: 22px;
+  border-radius: 4px;
+  border: 1px solid $white;
 
-  &:focus,
-  &:active {
-    color: $primary-text-color;
-    border-bottom-color: $ui-highlight-color;
+  &:focus {
     outline: 0;
+    border-color: lighten($ui-highlight-color, 12%);
+  }
+
+  &__wrapper {
+    background: $white;
+    border: 1px solid $ui-secondary-color;
+    margin-bottom: 10px;
+    border-radius: 4px;
+
+    .setting-text {
+      border: 0;
+      margin-bottom: 0;
+      border-radius: 0;
+
+      &:focus {
+        border: 0;
+      }
+    }
+
+    &__modifiers {
+      color: $inverted-text-color;
+      font-family: inherit;
+      font-size: 14px;
+      background: $white;
+    }
+  }
+
+  &__toolbar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
   }
 
   @media screen and (max-width: 600px) {
@@ -5526,59 +5529,6 @@ a.status-card.compact:hover {
     margin-bottom: 20px;
   }
 
-  .setting-text {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-    color: $inverted-text-color;
-    background: $white;
-    padding: 10px;
-    font-family: inherit;
-    font-size: 14px;
-    resize: none;
-    outline: 0;
-    border-radius: 4px;
-    border: 1px solid $ui-secondary-color;
-    min-height: 100px;
-    max-height: 50vh;
-    margin-bottom: 10px;
-
-    &:focus {
-      border: 1px solid darken($ui-secondary-color, 8%);
-    }
-
-    &__wrapper {
-      background: $white;
-      border: 1px solid $ui-secondary-color;
-      margin-bottom: 10px;
-      border-radius: 4px;
-
-      .setting-text {
-        border: 0;
-        margin-bottom: 0;
-        border-radius: 0;
-
-        &:focus {
-          border: 0;
-        }
-      }
-
-      &__modifiers {
-        color: $inverted-text-color;
-        font-family: inherit;
-        font-size: 14px;
-        background: $white;
-      }
-    }
-
-    &__toolbar {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 20px;
-    }
-  }
-
   .setting-text-label {
     display: block;
     color: $inverted-text-color;
@@ -5587,6 +5537,14 @@ a.status-card.compact:hover {
     margin-bottom: 10px;
   }
 
+  .setting-text {
+    width: 100%;
+    resize: none;
+    min-height: 100px;
+    max-height: 50vh;
+    border: 0;
+  }
+
   .setting-toggle {
     margin-top: 20px;
     margin-bottom: 24px;
@@ -6756,36 +6714,29 @@ noscript {
   }
 }
 
-.account__moved-note {
-  padding: 14px 10px;
-  padding-bottom: 16px;
+.moved-account-banner {
+  padding: 20px;
   background: lighten($ui-base-color, 4%);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 
   &__message {
-    position: relative;
-    margin-left: 58px;
-    color: $dark-text-color;
+    color: $darker-text-color;
     padding: 8px 0;
     padding-top: 0;
     padding-bottom: 4px;
     font-size: 14px;
-
-    > span {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &__icon-wrapper {
-    left: -26px;
-    position: absolute;
+    font-weight: 500;
+    text-align: center;
+    margin-bottom: 16px;
   }
 
-  .detailed-status__display-avatar {
-    position: relative;
+  &__action {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 15px;
   }
 
   .detailed-status__display-name {
@@ -6795,9 +6746,9 @@ noscript {
 
 .column-inline-form {
   padding: 15px;
-  padding-right: 0;
   display: flex;
   justify-content: flex-start;
+  gap: 15px;
   align-items: center;
   background: lighten($ui-base-color, 4%);
 
@@ -6806,17 +6757,8 @@ noscript {
 
     input {
       width: 100%;
-
-      &:focus {
-        outline: 0;
-      }
     }
   }
-
-  .icon-button {
-    flex: 0 0 auto;
-    margin: 0 10px;
-  }
 }
 
 .drawer__backdrop {
@@ -7180,12 +7122,27 @@ noscript {
         color: lighten($ui-highlight-color, 8%);
       }
 
-      dl:first-child .verified {
-        border-radius: 0 4px 0 0;
-      }
+      .verified {
+        border: 1px solid rgba($valid-value-color, 0.5);
+
+        &:first-child {
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+        }
+
+        &:last-child {
+          border-bottom-left-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
+
+        dt,
+        dd {
+          color: $valid-value-color;
+        }
 
-      .verified a {
-        color: $valid-value-color;
+        a {
+          color: $valid-value-color;
+        }
       }
     }
   }
@@ -8382,6 +8339,34 @@ noscript {
   }
 }
 
+.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;
 
@@ -8389,6 +8374,14 @@ noscript {
     border-radius: 4px;
   }
 
+  &__footer {
+    color: $dark-text-color;
+    text-align: center;
+    font-size: 15px;
+    line-height: 22px;
+    margin-top: 20px;
+  }
+
   &__header {
     margin-bottom: 30px;
 
@@ -8509,7 +8502,7 @@ noscript {
     }
   }
 
-  .getting-started__footer {
+  .link-footer {
     padding: 0;
     margin-top: 60px;
     text-align: center;
generated by cgit-pink (git 2.37.1) at 2024-07-03 00:33:07 +0000