mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-19 22:58:07 +02:00
Group and scope the findbar rules using CSS nesting
The findbar CSS rules predate the general availability of CSS nesting, which makes them more difficult to understand and change safely. The primary issues are that the findbar rules are spread all over the `viewer.css` file, they share blocks with non-findbar elements and the scope of the rules is sometimes bigger than necessary. This refactoring groups all findbar-related CSS rules together, scoped to the top-level `#findbar` element, for improved overview and isolation. Note that this patch only intends to move the existing rules around and not change any behavior yet, but it does lay the foundation for e.g. making the findbar respect the `browser.uidensity` preference in Firefox in follow-up work. Co-authored-by: Calixte Denizet <calixte.denizet@gmail.com>
This commit is contained in:
Tim van der Meij
parent
cd3d188f99
commit
1fcdcedee1
1 changed files with 128 additions and 90 deletions
218
web/viewer.css
218
web/viewer.css
|
|
@ -333,7 +333,7 @@ body {
|
|||
font: message-box;
|
||||
}
|
||||
|
||||
:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer)
|
||||
:is(.toolbar, .editorParamsToolbar, #sidebarContainer)
|
||||
:is(input, button, select),
|
||||
.secondaryToolbar :is(input, button, a, select) {
|
||||
outline: none;
|
||||
|
|
@ -362,7 +362,6 @@ body {
|
|||
}
|
||||
|
||||
#toolbarContainer,
|
||||
.findbar,
|
||||
.secondaryToolbar,
|
||||
.editorParamsToolbar {
|
||||
position: relative;
|
||||
|
|
@ -448,7 +447,6 @@ body {
|
|||
transition-duration: 0s;
|
||||
}
|
||||
|
||||
.findbar,
|
||||
.secondaryToolbar,
|
||||
.editorParamsToolbar {
|
||||
top: var(--toolbar-height);
|
||||
|
|
@ -464,64 +462,6 @@ body {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.findbar {
|
||||
inset-inline-start: 64px;
|
||||
min-width: 300px;
|
||||
background-color: var(--toolbar-bg-color);
|
||||
}
|
||||
.findbar > div {
|
||||
height: var(--toolbar-height);
|
||||
}
|
||||
.findbar > div#findbarInputContainer {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
.findbar.wrapContainers > div,
|
||||
.findbar.wrapContainers > div#findbarMessageContainer > * {
|
||||
clear: both;
|
||||
}
|
||||
.findbar.wrapContainers > div#findbarMessageContainer {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.findbar input[type="checkbox"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.findbar label {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.findbar label:hover,
|
||||
.findbar input:focus-visible + label {
|
||||
color: var(--toggled-btn-color);
|
||||
background-color: var(--button-hover-color);
|
||||
}
|
||||
|
||||
.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
|
||||
background-color: var(--toggled-btn-bg-color) !important;
|
||||
color: var(--toggled-btn-color);
|
||||
}
|
||||
|
||||
#findInput {
|
||||
width: 200px;
|
||||
|
||||
/*#if !MOZCENTRAL*/
|
||||
&::-webkit-input-placeholder {
|
||||
color: rgb(191 191 191);
|
||||
}
|
||||
/*#endif*/
|
||||
&::placeholder {
|
||||
font-style: normal;
|
||||
}
|
||||
.loadingInput:has(> &[data-status="pending"])::after {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
&[data-status="notFound"] {
|
||||
background-color: rgb(255 102 102);
|
||||
}
|
||||
}
|
||||
|
||||
.secondaryToolbar,
|
||||
.editorParamsToolbar {
|
||||
padding: 6px 0 10px;
|
||||
|
|
@ -654,22 +594,6 @@ body {
|
|||
margin-inline-end: -9px;
|
||||
}
|
||||
|
||||
#findResultsCount {
|
||||
background-color: rgb(217 217 217);
|
||||
color: rgb(82 82 82);
|
||||
text-align: center;
|
||||
padding: 4px 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#findMsg[data-status="notFound"] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:is(#findResultsCount, #findMsg):empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toolbarViewerMiddle {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
@ -689,8 +613,7 @@ body {
|
|||
#toolbarViewerMiddle > *,
|
||||
#toolbarViewerRight > *,
|
||||
#toolbarSidebarLeft *,
|
||||
#toolbarSidebarRight *,
|
||||
.findbar * {
|
||||
#toolbarSidebarRight * {
|
||||
position: relative;
|
||||
float: var(--inline-start);
|
||||
}
|
||||
|
|
@ -895,14 +818,6 @@ body {
|
|||
transform: scaleX(var(--dir-factor));
|
||||
}
|
||||
|
||||
#findPrevious::before {
|
||||
mask-image: var(--findbarButton-previous-icon);
|
||||
}
|
||||
|
||||
#findNext::before {
|
||||
mask-image: var(--findbarButton-next-icon);
|
||||
}
|
||||
|
||||
#previous::before {
|
||||
mask-image: var(--toolbarButton-pageUp-icon);
|
||||
}
|
||||
|
|
@ -1430,6 +1345,132 @@ dialog :link {
|
|||
z-index: 50000; /* should be higher than anything else in PDF.js! */
|
||||
}
|
||||
|
||||
#findbar {
|
||||
background-color: var(--toolbar-bg-color);
|
||||
cursor: default;
|
||||
font: message-box;
|
||||
font-size: 12px;
|
||||
height: auto;
|
||||
inset-inline-start: 64px;
|
||||
line-height: 14px;
|
||||
margin: 4px 2px;
|
||||
min-width: 300px;
|
||||
padding: 0 4px;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
top: var(--toolbar-height);
|
||||
z-index: 30000;
|
||||
|
||||
* {
|
||||
float: var(--inline-start);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> div {
|
||||
height: var(--toolbar-height);
|
||||
}
|
||||
|
||||
:is(button, input) {
|
||||
font: message-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="checkbox"] {
|
||||
pointer-events: none;
|
||||
|
||||
&:checked + .toolbarLabel {
|
||||
background-color: var(--toggled-btn-bg-color) !important;
|
||||
color: var(--toggled-btn-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:is(label:hover, input:focus-visible + label) {
|
||||
background-color: var(--button-hover-color);
|
||||
color: var(--toggled-btn-color);
|
||||
}
|
||||
|
||||
#findbarInputContainer {
|
||||
margin-inline-end: 4px;
|
||||
|
||||
#findInput {
|
||||
width: 200px;
|
||||
|
||||
/*#if !MOZCENTRAL*/
|
||||
&::-webkit-input-placeholder {
|
||||
color: rgb(191 191 191);
|
||||
}
|
||||
/*#endif*/
|
||||
|
||||
&::placeholder {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.loadingInput:has(> &[data-status="pending"])::after {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&[data-status="notFound"] {
|
||||
background-color: rgb(255 102 102);
|
||||
}
|
||||
}
|
||||
|
||||
#findPrevious::before {
|
||||
mask-image: var(--findbarButton-previous-icon);
|
||||
}
|
||||
|
||||
#findNext::before {
|
||||
mask-image: var(--findbarButton-next-icon);
|
||||
}
|
||||
}
|
||||
|
||||
#findbarMessageContainer {
|
||||
#findResultsCount {
|
||||
background-color: rgb(217 217 217);
|
||||
color: rgb(82 82 82);
|
||||
margin: 5px;
|
||||
padding: 4px 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#findMsg {
|
||||
&[data-status="notFound"] {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
*:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.wrapContainers {
|
||||
> div {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
> #findbarMessageContainer {
|
||||
height: auto;
|
||||
|
||||
> * {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 690px) {
|
||||
& {
|
||||
inset-inline-start: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1531,9 +1572,6 @@ dialog :link {
|
|||
.toolbarButtonSpacer {
|
||||
width: 0;
|
||||
}
|
||||
.findbar {
|
||||
inset-inline-start: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 560px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue