1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-20 15:18:08 +02:00

[Editor] Add a divider before the show all button

I overlooked it when implementing the toggle button.
This commit is contained in:
Calixte Denizet 2024-03-22 21:40:13 +01:00
parent 3fbd6b5a77
commit 77b2a456d1
2 changed files with 32 additions and 4 deletions

View file

@ -1251,8 +1251,33 @@
#editorHighlightVisibility {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
.divider {
--divider-color: #d7d7db;
@media (prefers-color-scheme: dark) {
--divider-color: #8f8f9d;
}
@media screen and (forced-colors: active) {
--divider-color: CanvasText;
}
margin-block: 4px;
width: 100%;
height: 1px;
background-color: var(--divider-color);
}
.toggler {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
}
}

View file

@ -185,8 +185,11 @@ See https://github.com/adobe-type-tools/cmap-resources
</div>
</div>
<div id="editorHighlightVisibility">
<label for="editorHighlightShowAll" class="editorParamsLabel" data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
<button id="editorHighlightShowAll" class="toggle-button" data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
<div class="divider"></div>
<div class="toggler">
<label for="editorHighlightShowAll" class="editorParamsLabel" data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
<button id="editorHighlightShowAll" class="toggle-button" data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
</div>
</div>
</div>
</div>