Merge pull request #18761 from calixteman/fix_separator_color

Fix the rendering of the different separators we've in the UI
mozilla · Sep 19, 2024 · 6222359 · 6222359
2 parents 652e3e0 + b29278e
commit 6222359
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
@@ -309,11 +309,12 @@
       height: 100%;
 
       .divider {
-        width: 1px;
+        width: 0;
         height: calc(
           2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height)
         );
-        background-color: var(--editor-toolbar-border-color);
+        border-left: 1px solid var(--editor-toolbar-border-color);
+        border-right: none;
         display: inline-block;
         margin-inline: 2px;
       }

diff --git a/web/dialog.css b/web/dialog.css
@@ -140,9 +140,10 @@
 
     .dialogSeparator {
       width: 100%;
-      height: 1px;
+      height: 0;
       margin-block: 4px;
-      background-color: var(--separator-color);
+      border-top: 1px solid var(--separator-color);
+      border-bottom: none;
     }
 
     .dialogButtonsGroup {

diff --git a/web/viewer-geckoview.css b/web/viewer-geckoview.css
@@ -272,9 +272,10 @@ dialog .toolbarField {
 dialog .separator {
   display: block;
   margin: 4px 0;
-  height: 1px;
+  height: 0;
   width: 100%;
-  background-color: var(--separator-color);
+  border-top: 1px solid var(--separator-color);
+  border-bottom: none;
 }
 
 dialog .buttonRow {

diff --git a/web/viewer.css b/web/viewer.css
@@ -662,9 +662,10 @@ body {
 .splitToolbarButtonSeparator {
   float: var(--inline-start);
   margin: 4px 0;
-  width: 1px;
+  width: 0;
   height: 20px;
-  background-color: var(--separator-color);
+  border-left: 1px solid var(--separator-color);
+  border-right: none;
 }
 
 .toolbarButton,
@@ -870,16 +871,18 @@ body {
 .verticalToolbarSeparator {
   display: block;
   margin: 5px 2px;
-  width: 1px;
+  width: 0;
   height: 22px;
-  background-color: var(--separator-color);
+  border-left: 1px solid var(--separator-color);
+  border-right: none;
 }
 .horizontalToolbarSeparator {
   display: block;
   margin: 6px 0;
-  height: 1px;
+  border-top: 1px solid var(--doorhanger-separator-color);
+  border-bottom: none;
+  height: 0;
   width: 100%;
-  background-color: var(--doorhanger-separator-color);
 }
 
 .toolbarField {
@@ -1153,9 +1156,10 @@ dialog .toolbarField {
 dialog .separator {
   display: block;
   margin: 4px 0;
-  height: 1px;
+  height: 0;
   width: 100%;
-  background-color: var(--separator-color);
+  border-top: 1px solid var(--separator-color);
+  border-bottom: none;
 }
 
 dialog .buttonRow {