Update locale.admin.css

core/modules/locale/css/locale.admin.css

+
+:root {
+  --local-admin--translate-edit-form-changed-bg-color: #ffb;
+  --local-admin--translate-update-wrapper-color: #5c5c5b;
+  --local-admin--translate-update-detail-color: #666;
+}
+
 .locale-translate-filter-form .form-item-langcode,
 .locale-translate-filter-form .form-item-translation,
 .locale-translate-filter-form .form-item-customized {
@@ -8,26 +15,23 @@
    * its immediate child is floated without an explicit width set.
    */
   width: 15em;
-  margin-right: 1em; /* LTR */
-  margin-bottom: 0;
+  margin-block-end: 0;
+  margin-inline-end: 1em;
 }
 [dir="rtl"] .locale-translate-filter-form .form-item-langcode,
 [dir="rtl"] .locale-translate-filter-form .form-item-translation,
 [dir="rtl"] .locale-translate-filter-form .form-item-customized {
   float: right;
-  margin-right: 0;
-  margin-left: 1em;
 }
 .locale-translate-filter-form .form-type-select select {
   width: 100%;
 }
 .locale-translate-filter-form .form-actions {
   float: left; /* LTR */
-  padding: 3.8ex 0 0 0; /* LTR */
+  padding: 3.8ex 0 0 0;
 }
 [dir="rtl"] .locale-translate-filter-form .form-actions {
   float: right;
-  padding: 3.5ex 0 0 0;
 }
 .locale-translate-edit-form th {
   width: 50%;
@@ -38,7 +42,7 @@
 }
 
 .locale-translate-edit-form tr.changed {
-  background: #ffb;
+  background: var(--local-admin--translate-edit-form-changed-bg-color);
 }
 
 .locale-translate-edit-form tr .form-type-item .ajax-changed {
@@ -46,26 +50,26 @@
 }
 
 .locale-translate-filter-form .form-wrapper {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .locale-translate-edit-form table.changed {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 /**
  * Available translation updates page.
  */
-#locale-translation-status-form table {
+.locale-translation-status-form table {
   table-layout: fixed;
 }
-#locale-translation-status-form th.select-all {
+.locale-translation-status-form th.select-all {
   width: 4%;
 }
-#locale-translation-status-form th.title {
+.locale-translation-status-form th.title {
   width: 25%;
 }
-#locale-translation-status-form td {
+.locale-translation-status-form td {
   vertical-align: top;
 }
 .locale-translation-update__wrapper {
@@ -74,22 +78,22 @@
   background: transparent url(../../../misc/menu-collapsed.png) left 0.6em no-repeat; /* LTR */
 }
 [dir="rtl"] .locale-translation-update__wrapper {
-  background: transparent url(../../../misc/menu-collapsed-rtl.png) right 0.6em no-repeat; /* LTR */
+  background: transparent url(../../../misc/menu-collapsed-rtl.png) right 0.6em no-repeat;
 }
 .expanded .locale-translation-update__wrapper {
-  background: transparent url(../../../misc/menu-expanded.png) left 0.6em no-repeat;
+  background: transparent url(../../../misc/menu-expanded.png) left 0.6em no-repeat; /* LTR */
 }
 [dir="rtl"] .expanded .locale-translation-update__wrapper {
   background-position: right 0.6em;
 }
-#locale-translation-status-form .description {
+.locale-translation-status-form .description {
   cursor: pointer;
 }
 .locale-translation-update__wrapper {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #5c5c5b;
+  color: var(--local-admin--translate-update-wrapper-color);
   line-height: 20px;
 }
 .expanded .locale-translation-update__wrapper {
@@ -113,7 +117,7 @@
   max-width: 490px;
   padding: 5px 0;
   white-space: normal;
-  color: #666;
+  color: var(--local-admin--translate-update-detail-color);
   font-size: 0.9em;
 }
 .locale-translation-update__details ul {
@@ -126,10 +130,10 @@
 }
 
 @media screen and (max-width: 40em) {
-  #locale-translation-status-form th.title {
+  .locale-translation-status-form th.title {
     width: 20%;
   }
-  #locale-translation-status-form th.status {
+  .locale-translation-status-form th.status {
     width: 40%;
   }
 }