diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index ce94fac410..aae93a3871 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -6724,9 +6724,10 @@ a.status-card { max-width: 90vw; width: 480px; height: 80vh; - background: lighten($ui-secondary-color, 8%); - color: $inverted-text-color; - border-radius: 8px; + background: var(--background-color); + color: $primary-text-color; + border-radius: 4px; + border: 1px solid var(--background-border-color); overflow: hidden; position: relative; flex-direction: column; @@ -6734,7 +6735,7 @@ a.status-card { &__container { box-sizing: border-box; - border-top: 1px solid $ui-secondary-color; + border-top: 1px solid var(--background-border-color); padding: 20px; flex-grow: 1; display: flex; @@ -6764,7 +6765,7 @@ a.status-card { &__lead { font-size: 17px; line-height: 22px; - color: lighten($inverted-text-color, 16%); + color: $secondary-text-color; margin-bottom: 30px; a { @@ -6799,7 +6800,7 @@ a.status-card { .status__content, .status__content p { - color: $inverted-text-color; + color: $primary-text-color; } .status__content__spoiler-link { @@ -6844,7 +6845,7 @@ a.status-card { .poll__option.dialog-option { padding: 15px 0; flex: 0 0 auto; - border-bottom: 1px solid $ui-secondary-color; + border-bottom: 1px solid var(--background-border-color); &:last-child { border-bottom: 0; @@ -6852,13 +6853,13 @@ a.status-card { & > .poll__option__text { font-size: 13px; - color: lighten($inverted-text-color, 16%); + color: $secondary-text-color; strong { font-size: 17px; font-weight: 500; line-height: 22px; - color: $inverted-text-color; + color: $primary-text-color; display: block; margin-bottom: 4px; @@ -6877,22 +6878,19 @@ a.status-card { display: block; box-sizing: border-box; width: 100%; - color: $inverted-text-color; - background: $simple-background-color; + color: $primary-text-color; + background: $ui-base-color; padding: 10px; font-family: inherit; font-size: 17px; line-height: 22px; resize: vertical; border: 0; + border: 1px solid var(--background-border-color); outline: 0; border-radius: 4px; margin: 20px 0; - &::placeholder { - color: $dark-text-color; - } - &:focus { outline: 0; } @@ -6913,16 +6911,16 @@ a.status-card { } .button.button-secondary { - border-color: $inverted-text-color; - color: $inverted-text-color; + border-color: $ui-button-destructive-background-color; + color: $ui-button-destructive-background-color; flex: 0 0 auto; &:hover, &:focus, &:active { - background: transparent; - border-color: $ui-button-background-color; - color: $ui-button-background-color; + background: $ui-button-destructive-background-color; + border-color: $ui-button-destructive-background-color; + color: $white; } } diff --git a/app/javascript/flavours/glitch/styles/emoji_picker.scss b/app/javascript/flavours/glitch/styles/emoji_picker.scss index 68e016d44b..3189000588 100644 --- a/app/javascript/flavours/glitch/styles/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/emoji_picker.scss @@ -111,7 +111,6 @@ &:focus { outline: none !important; border-width: 1px !important; - border-color: $ui-button-background-color; } &::-webkit-search-cancel-button { diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index abf5d5ef35..4fccbe9867 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -618,3 +618,7 @@ a.sparkline { .setting-text { background: darken($ui-base-color, 10%); } + +.report-dialog-modal__textarea { + background: darken($ui-base-color, 10%); +}