Beanz/pdf.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/annotation_editor_layer_builder.css
View File

@ -309,11 +309,12 @@
height: 100%; height: 100%;
.divider { .divider {
width: 1px; width: 0;
height: calc( height: calc(
2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height) 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; display: inline-block;
margin-inline: 2px; margin-inline: 2px;
} }

5
web/dialog.css
View File

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

5
web/viewer-geckoview.css
View File

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

20
web/viewer.css
View File

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