Skip to content

Commit

Permalink
Fix the rendering of the different separators we've in the UI
Browse files Browse the repository at this point in the history
Currently, the css for a separator is something like { height: 1px; background-color: ... }.
But its rendering depends on its position on the screen.
So instead of setting the height to 1px, we just set something like { border-top: 1px solid ...; },
this way the final rendering is exactly the same for all the separators.
  • Loading branch information
calixteman committed Sep 19, 2024
1 parent 19151fe commit 1bb4dc0
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 14 deletions.
5 changes: 3 additions & 2 deletions web/annotation_editor_layer_builder.css
Original file line number Diff line number Diff line change
Expand Up @@ -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-top: 1px solid var(--editor-toolbar-border-color);
border-bottom: none;
display: inline-block;
margin-inline: 2px;
}
Expand Down
5 changes: 3 additions & 2 deletions web/dialog.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
5 changes: 3 additions & 2 deletions web/viewer-geckoview.css
Original file line number Diff line number Diff line change
Expand Up @@ -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: 0;
}

dialog .buttonRow {
Expand Down
20 changes: 12 additions & 8 deletions web/viewer.css
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 1bb4dc0

Please sign in to comment.