Marmelator/pdf.js.mirror
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2026-06-26 01:55:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #20923 from calixteman/bug2023138

Browse Source 
Make sure the menuitems are readable when hovering them (bug 2023138)
This commit is contained in:
calixteman 2026-03-20 16:30:34 +01:00 committed by GitHub
commit 0617e3e95f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 90 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
web/menu.css
View File

@ -105,10 +105,10 @@ button.hasPopupMenu {
--menu-mark-icon-size: 16px; --menu-mark-icon-size: 16px;
} }
> li { > button {
display: flex; display: flex;
align-items: center; align-items: center;
list-style: none; position: relative;
width: 100%; width: 100%;
height: 26px; height: 26px;
padding-inline: calc(var(--menu-mark-icon-size) + var(--menuitem-gap)) padding-inline: calc(var(--menu-mark-icon-size) + var(--menuitem-gap))
@ -119,7 +119,7 @@ button.hasPopupMenu {
border: 1px solid var(--menuitem-border-color); border: 1px solid var(--menuitem-border-color);
background: transparent; background: transparent;
&:has(button.selected)::before { &.selected::after {
content: ""; content: "";
display: inline-block; display: inline-block;
width: 11px; width: 11px;
@ -129,101 +129,88 @@ button.hasPopupMenu {
mask-image: var(--menuitem-checkmark-icon); mask-image: var(--menuitem-checkmark-icon);
background-color: var(--menu-text-color); background-color: var(--menu-text-color);
position: absolute; position: absolute;
margin-inline-start: -16px; inset-inline-start: var(--menuitem-gap);
top: 50%;
transform: translateY(-50%);
} }
&:has(button:disabled) { &:disabled {
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);
pointer-events: none;
&:has(button.selected)::before { &.selected::after {
background-color: var(--menu-text-disabled-color); background-color: var(--menu-text-disabled-color);
} }
}
&:hover {
background: var(--menuitem-hover-bg);
background-blend-mode: var(--menuitem-hover-background-blend-mode);
> button {
&:not(.noIcon)::before {
background-color: var(--menuitem-text-hover-fg);
}
> span {
color: var(--menuitem-text-hover-fg);
}
}
&:has(button.selected)::before {
background-color: var(--menuitem-text-hover-fg);
}
}
&:active {
background-color: var(--menuitem-active-bg);
border-color: var(--menuitem-active-border-color);
> button > span {
color: var(--menuitem-text-active-fg);
}
}
&:has(> button:focus-visible) {
border-color: var(--menuitem-focus-border-color);
background-color: var(--menuitem-focus-bg);
outline: 2px solid var(--menuitem-focus-outline-color);
outline-offset: 2px;
}
> button {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: auto;
padding: var(--menuitem-gap);
gap: var(--menuitem-gap);
background: transparent;
border: none;
&:not(.noIcon)::before { &:not(.noIcon)::before {
display: inline-block; background-color: var(--menu-text-disabled-color);
width: var(--menu-icon-size);
height: var(--menu-icon-size);
content: "";
mask-size: cover;
mask-position: center;
background-color: var(--menu-text-color);
}
&:focus-visible {
outline: none;
} }
> span { > span {
display: inline-block; color: var(--menu-text-disabled-color);
width: max-content;
height: auto;
text-align: start;
color: var(--menu-text-color);
user-select: none;
padding-inline-start: 6px;
font: menu;
font-size: 13px;
font-style: normal;
font-weight: 510;
line-height: normal;
} }
}
&:disabled { &:not(:disabled) {
pointer-events: none; &:hover {
background: var(--menuitem-hover-bg);
background-blend-mode: var(--menuitem-hover-background-blend-mode);
&:not(.noIcon)::before { &:not(.noIcon)::before {
background-color: var(--menu-text-disabled-color); background-color: var(--menuitem-text-hover-fg);
} }
> span { > span {
color: var(--menu-text-disabled-color); color: var(--menuitem-text-hover-fg);
}
&.selected::after {
background-color: var(--menuitem-text-hover-fg);
} }
} }
&:active {
background-color: var(--menuitem-active-bg);
border-color: var(--menuitem-active-border-color);
> span {
color: var(--menuitem-text-active-fg);
}
}
&:focus-visible {
border-color: var(--menuitem-focus-border-color);
background-color: var(--menuitem-focus-bg);
outline: 2px solid var(--menuitem-focus-outline-color);
outline-offset: 2px;
}
}
&:not(.noIcon)::before {
display: inline-block;
width: var(--menu-icon-size);
height: var(--menu-icon-size);
content: "";
mask-size: cover;
mask-position: center;
background-color: var(--menu-text-color);
}
> span {
display: flex;
align-items: center;
align-self: stretch;
width: 100%;
min-width: max-content;
text-align: start;
color: var(--menu-text-color);
user-select: none;
padding-inline-start: 6px;
font: menu;
font-size: 13px;
font-style: normal;
font-weight: 510;
line-height: normal;
} }
} }
} }

64
web/viewer.html
View File

@ -142,26 +142,18 @@ See https://github.com/adobe-type-tools/cmap-resources
<span data-l10n-id="pdfjs-views-manager-view-selector-button-label"></span> <span data-l10n-id="pdfjs-views-manager-view-selector-button-label"></span>
</button> </button>
<menu id="viewsManagerSelectorOptions" role="listbox" class="popupMenu withMark"> <menu id="viewsManagerSelectorOptions" role="listbox" class="popupMenu withMark">
<li> <button id="thumbnailsViewMenu" role="option" type="button" tabindex="-1">
<button id="thumbnailsViewMenu" role="option" type="button" tabindex="-1"> <span data-l10n-id="pdfjs-views-manager-pages-option-label"></span>
<span data-l10n-id="pdfjs-views-manager-pages-option-label"></span> </button>
</button> <button id="outlinesViewMenu" role="option" type="button" tabindex="-1">
</li> <span data-l10n-id="pdfjs-views-manager-outlines-option-label"></span>
<li> </button>
<button id="outlinesViewMenu" role="option" type="button" tabindex="-1"> <button id="attachmentsViewMenu" role="option" type="button" tabindex="-1">
<span data-l10n-id="pdfjs-views-manager-outlines-option-label"></span> <span data-l10n-id="pdfjs-views-manager-attachments-option-label"></span>
</button> </button>
</li> <button id="layersViewMenu" role="option" type="button" tabindex="-1">
<li> <span data-l10n-id="pdfjs-views-manager-layers-option-label"></span>
<button id="attachmentsViewMenu" role="option" type="button" tabindex="-1"> </button>
<span data-l10n-id="pdfjs-views-manager-attachments-option-label"></span>
</button>
</li>
<li>
<button id="layersViewMenu" role="option" type="button" tabindex="-1">
<span data-l10n-id="pdfjs-views-manager-layers-option-label"></span>
</button>
</li>
</menu> </menu>
</div> </div>
<span id="viewsManagerHeaderLabel" class="viewsManagerLabel" role="heading" aria-level="2"></span> <span id="viewsManagerHeaderLabel" class="viewsManagerLabel" role="heading" aria-level="2"></span>
@ -217,26 +209,18 @@ See https://github.com/adobe-type-tools/cmap-resources
<span data-l10n-id="pdfjs-views-manager-pages-status-action-button-label"></span> <span data-l10n-id="pdfjs-views-manager-pages-status-action-button-label"></span>
</button> </button>
<menu id="viewsManagerStatusActionOptions" class="popupMenu"> <menu id="viewsManagerStatusActionOptions" class="popupMenu">
<li> <button id="viewsManagerStatusActionCopy" class="noIcon" role="menuitem" type="button" tabindex="-1" disabled>
<button id="viewsManagerStatusActionCopy" class="noIcon" role="menuitem" type="button" tabindex="-1" disabled> <span data-l10n-id="pdfjs-views-manager-pages-status-copy-button-label"></span>
<span data-l10n-id="pdfjs-views-manager-pages-status-copy-button-label"></span> </button>
</button> <button id="viewsManagerStatusActionCut" class="noIcon" role="menuitem" type="button" tabindex="-1" disabled>
</li> <span data-l10n-id="pdfjs-views-manager-pages-status-cut-button-label"></span>
<li> </button>
<button id="viewsManagerStatusActionCut" class="noIcon" role="menuitem" type="button" tabindex="-1" disabled> <button id="viewsManagerStatusActionDelete" class="noIcon" role="menuitem" type="button" tabindex="-1" disabled>
<span data-l10n-id="pdfjs-views-manager-pages-status-cut-button-label"></span> <span data-l10n-id="pdfjs-views-manager-pages-status-delete-button-label"></span>
</button> </button>
</li> <button id="viewsManagerStatusActionExport" class="noIcon" role="menuitem" type="button" tabindex="-1" disabled>
<li> <span data-l10n-id="pdfjs-views-manager-pages-status-export-selected-button-label"></span>
<button id="viewsManagerStatusActionDelete" class="noIcon" role="menuitem" type="button" tabindex="-1" disabled> </button>
<span data-l10n-id="pdfjs-views-manager-pages-status-delete-button-label"></span>
</button>
</li>
<li>
<button id="viewsManagerStatusActionExport" class="noIcon" role="menuitem" type="button" tabindex="-1" disabled>
<span data-l10n-id="pdfjs-views-manager-pages-status-export-selected-button-label"></span>
</button>
</li>
</menu> </menu>
</div> </div>
</div> </div>

2
web/views_manager.css
View File

@ -337,7 +337,7 @@
min-width: 182px; min-width: 182px;
z-index: 1; z-index: 1;
> li > button { > button {
&#thumbnailsViewMenu::before { &#thumbnailsViewMenu::before {
mask-image: var(--menuitem-thumbnailsView-icon); mask-image: var(--menuitem-thumbnailsView-icon);
} }