diff --git a/core/modules/outside_in/css/outside_in.messages.css b/core/modules/outside_in/css/outside_in.messages.css
index a317469..cde8707 100644
--- a/core/modules/outside_in/css/outside_in.messages.css
+++ b/core/modules/outside_in/css/outside_in.messages.css
@@ -3,40 +3,36 @@
  * Visual styling for messages in the Outside-In modules off canvas tray.
  */
 
-/* Style messages for dark background. */
+/* Style messages for offcanvas tray. */
 .ui-dialog-offcanvas .messages {
   box-shadow: none;
-  background-color: #000;
   background-repeat: no-repeat;
   /* Y value aligns icon with the first line of text so icon doesn't get pushed down on long messages. */
   background-position: 10px 18px; /* LTR */
   padding-top: 15px;
   padding-right: 10px; /* LTR */
   padding-bottom: 15px;
-  /* Provide space for both icon and asterisk. */
+  /* Provide space for icon and asterisk. */
   padding-left: 35px; /* LTR */
-  /* Negative margins left and right cancel out padding on the parent. */
+  /* Negative margins cancel out padding on the parent. */
   margin-top: 10px;
   margin-right: -20px;
   margin-bottom: 10px;
   margin-left: -20px;
-  border-top: 0;
+  border-top: 1px solid transparent;
   border-right: 0;
-  border-bottom: 0;
+  border-bottom: 1px solid transparent;
   border-left: 0;
   border-radius: 0;
   /* Wide left border for message type color strip. */
   border-left-width: 5px; /* LTR */
   border-style: solid;
   word-wrap: break-word;
-  color: #fff;
 }
 [dir="rtl"] .ui-dialog-offcanvas .messages {
   background-position: 93% 18px;
   padding-left: 10px;
   padding-right: 35px;
-  border-top: 0;
-  border-bottom: 0;
   border-left-width: 0;
   border-right-width: 5px;
   text-align: right;
diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css
index 6741d34..98e668a 100644
--- a/core/modules/outside_in/css/outside_in.theme.css
+++ b/core/modules/outside_in/css/outside_in.theme.css
@@ -74,7 +74,7 @@
   background: #444;
   border: 0px solid transparent;
   border-radius: 0;
-  box-shadow: 0 0 1px 2px rgba(126, 126, 126, .5);
+  box-shadow: 0 0 1px 2px rgba(126, 126, 126, 0.5);
   padding: 0;
   color: #ddd;
   /* Layer the dialog just under the toolbar. */
@@ -182,9 +182,9 @@
 }
 
 /* Override default styling from jquery UI. */
-.ui-state-default,
-.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default {
+.ui-dialog-offcanvas .ui-state-default,
+.ui-dialog-offcanvas .ui-widget-content .ui-state-default,
+.ui-dialog-offcanvas .ui-widget-header .ui-state-default {
   border: 0;
   font-weight: normal;
   font-size: 14px;
@@ -309,7 +309,7 @@
   overflow: hidden;
   color: #fff;
 }
-.js .dropbutton-toggle .dropbutton-arrow:hover {
+.ui-dialog-offcanvas .js .dropbutton-toggle .dropbutton-arrow:hover {
   background: transparent;
 }
 .ui-dialog-offcanvas td .dropbutton-multiple {
diff --git a/core/modules/outside_in/outside_in.libraries.yml b/core/modules/outside_in/outside_in.libraries.yml
index 41799d7..579cd84 100644
--- a/core/modules/outside_in/outside_in.libraries.yml
+++ b/core/modules/outside_in/outside_in.libraries.yml
@@ -3,18 +3,17 @@ drupal.outside_in:
   js:
     js/outside_in.js: {}
   css:
-    theme:
-      css/outside_in.module.css: {}
-      css/outside_in.motion.css: {}
-      css/outside_in.form.css: {}
-      css/outside_in.table.css: {}
-      css/outside_in.details.css: {}
-      css/outside_in.tabledrag.css: {}
-      # @todo Set the group higher than CSS_AGGREGATE_THEME so that it overrides
-      #   both jQuery UI and Classy's dialog.css, remove in
-      #   https://www.drupal.org/node/1945262.
-      css/outside_in.messages.css: { group: 200 }
-      css/outside_in.theme.css: { group: 200 }
+    - css/outside_in.module.css: {}
+    - css/outside_in.form.css: {}
+    - css/outside_in.table.css: {}
+    - css/outside_in.details.css: {}
+    - css/outside_in.tabledrag.css: {}
+    - css/outside_in.motion.css: {}
+    - css/outside_in.messages.css: {}
+    # @todo Set the group higher than CSS_AGGREGATE_THEME so that it overrides
+    #   both jQuery UI and Classy's dialog.css, remove in
+    #   https://www.drupal.org/node/1945262.
+    - css/outside_in.theme.css: { group: 200 }
   dependencies:
     - core/jquery
     - core/drupal