Bug 1592426 - Fix the background image on about:certificate when the certificate is corrupted or missing r=danielleleb

Also improve CSS code style/quality, and force `long-hex` to be LTR

Differential Revision: https://phabricator.services.mozilla.com/D61073

--HG--
extra : moz-landing-system : lando

toolkit/components/certviewer/content/components/error-section.css

@@ -16,6 +16,10 @@
   background-position: left center;
 }
 
+:host(:dir(rtl)) {
+  background-position-x: right;
+}
+
 h1 {
   text-align: center;
   font-size: 2.5em;

toolkit/components/certviewer/content/components/info-group.css

@@ -11,24 +11,17 @@
 }
 
 .info-group-title {
-  text-align: right;
+  text-align: end;
   font-weight: 700;
   color: var(--in-content-deemphasized-text);
   font-size: 1em;
 }
 
-.info-group-title:dir(rtl) {
-  text-align: left;
-}
-
 .info-group-title-hr {
   height: 1px;
   background-color: var(--in-content-deemphasized-text);
   width: calc(100% - 3.5em);
   position: relative;
   margin: auto 0;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
 }

toolkit/components/certviewer/content/components/info-item.css

@@ -12,23 +12,20 @@
 }
 
 label {
-  text-align: right;
+  text-align: end;
   margin-inline-end: 0;
   color: var(--in-content-text-color);
   font-weight: 700;
   font-size: 1em;
 }
 
-label:dir(rtl) {
-  text-align: left;
-}
-
 .long-hex {
   max-width: 100%;
   overflow: hidden;
   word-break: break-all;
   text-overflow: ellipsis;
   white-space: nowrap;
+  direction: ltr;
 }
 
 .download-link-chain {
@@ -36,8 +33,7 @@ label:dir(rtl) {
 }
 
 .long-hex:hover {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-block: 1px solid rgba(0, 0, 0, 0.1);
   background-color: rgba(0, 0, 0, 0.06);
   padding: 0px;
 }