mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-19 14:48:08 +02:00
Code Activity

Merge pull request #18568 from timvandermeij/css-findbar

Browse source 
Group and scope the findbar rules using CSS nesting
This commit is contained in:
Tim van der Meij 2024-08-08 20:27:14 +02:00 • committed by GitHub
commit 4569e88778
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 128 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

218
web/viewer.css
View file

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