1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-19 22:58:07 +02:00

Fix the rendering of the different separators we've in the UI

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.
This commit is contained in:
Calixte Denizet 2024-09-19 14:31:04 +02:00
parent 19151feb5f
commit b29278efb8
4 changed files with 21 additions and 14 deletions

View file

@ -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;
}

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {