Fix media editing modal and profile directory in light theme (#12059)

Also:

- Fix embed modal in light theme
- Fix confirmation modal in light theme

1 files changed, 72 insertions, 8 deletions

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 45305d696..05e52966b 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -14,15 +14,49 @@ html {
   }
 }
 
+.status-card__actions button,
+.status-card__actions a {
+  color: rgba($white, 0.8);
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $white;
+  }
+}
+
 // Change default background colors of columns
 .column > .scrollable,
 .getting-started,
-.column-inline-form {
+.column-inline-form,
+.error-column,
+.regeneration-indicator {
   background: $white;
   border: 1px solid lighten($ui-base-color, 8%);
   border-top: 0;
 }
 
+.directory__card__img {
+  background: lighten($ui-base-color, 12%);
+}
+
+.filter-form,
+.directory__card__bar {
+  background: $white;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+}
+
+.scrollable .directory__list {
+  width: calc(100% + 2px);
+  margin-left: -1px;
+  margin-right: -1px;
+}
+
+.directory__card,
+.table-of-contents {
+  border: 1px solid lighten($ui-base-color, 8%);
+}
+
 .column-back-button,
 .column-header {
   background: $white;
@@ -33,16 +67,16 @@ html {
   }
 
   &--slim-button {
-    border: 0;
-    top: -49px;
-    right: 1px;
+    top: -50px;
+    right: 0;
   }
 }
 
 .column-header__back-button,
 .column-header__button,
 .column-header__button.active,
-.account__header__bar {
+.account__header__bar,
+.directory__card__extra {
   background: $white;
 }
 
@@ -66,6 +100,19 @@ html {
   text-decoration: underline;
 }
 
+.confirmation-modal__secondary-button,
+.confirmation-modal__cancel-button,
+.mute-modal__cancel-button,
+.block-modal__cancel-button {
+  color: lighten($ui-base-color, 26%);
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: $primary-text-color;
+  }
+}
+
 .column-subheading {
   background: darken($ui-base-color, 4%);
   border-bottom: 1px solid lighten($ui-base-color, 8%);
@@ -314,8 +361,19 @@ html {
 .report-modal,
 .embed-modal,
 .error-modal,
-.onboarding-modal {
-  background: $ui-base-color;
+.onboarding-modal,
+.report-modal__comment .setting-text__wrapper,
+.report-modal__comment .setting-text {
+  background: $white;
+  border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.report-modal__comment {
+  border-right-color: lighten($ui-base-color, 8%);
+}
+
+.report-modal__container {
+  border-top-color: lighten($ui-base-color, 8%);
 }
 
 .column-header__collapsible-inner {
@@ -324,6 +382,10 @@ html {
   border-top: 0;
 }
 
+.focal-point__preview strong {
+  color: $white;
+}
+
 .boost-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar,
@@ -348,9 +410,11 @@ html {
 
 .embed-modal .embed-modal__container .embed-modal__html {
   background: $white;
+  border: 1px solid lighten($ui-base-color, 8%);
 
   &:focus {
-    background: darken($ui-base-color, 6%);
+    border-color: lighten($ui-base-color, 12%);
+    background: $white;
   }
 }