Pdf file view redesign (#7188)

* [pdf file view] added 'find' operation icon; redesigned the 'find' bar

* [pdf file view] the 'find' bar: updated the 'find previous/next' buttons; added a 'clear query' function

* [pdf file view] 'print': redesigned the 'Preparing document for printing' dialog

* [pdf file view] the 'find' bar: updated the styles of the border & the 'input'

* [pdf file view] 'preparing document for printing' dialog: updated UI details

* [pdf file view] 'preparing document for printing' dialog: modified the border & the backdrop

frontend/src/css/pdf-file-view.css

@@ -1,5 +1,5 @@
 .pdf-file-view {
-  overflow: hidden;
+  /*overflow: hidden; */
   position: relative;
   z-index: 0;
 }
@@ -35,7 +35,141 @@
 }
 
 #findbar {
-  top: -3px;
+  top: -7px;
+  right: 10px;
+  inset-inline-start: auto;
+  background: #fff;
+  padding: 8px;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+  margin: 0;
+}
+
+#findbar::before {
+  border-bottom-color: rgba(0, 40, 100, 0.12);
+  inset-inline-start: auto;
+  margin-inline-start: auto;
+  right: 272px;
+}
+
+#findbar::after {
+  inset-inline-start: auto;
+  margin-inline-start: auto;
+  border-bottom-color: #fff;
+  right: 273px;
+}
+
+#findbar * {
+  float: none;
+}
+
+#findbarInputContainer,
+#findbarOptionsOneContainer,
+#findbarOptionsTwoContainer {
+  height: auto;
+}
+
+#findInput {
+  margin: 0;
+  width: 300px;
+  height: 30px;
+  font-size: .875rem;
+}
+
+input#findInput {
+  font-size: .875rem;
+}
+
+#findInput[data-status="notFound"] {
+  background: inherit;
+}
+
+#findbarMiscContainer {
+  right: 5px;
+  top: 5px;
+}
+
+#findResultsCount {
+  background: inherit;
+  font-size: .75rem;
+  line-height: 20px;
+  color: #666666;
+  padding: 0 8px;
+  margin: 0;
+}
+
+#findPrevious,
+#findNext,
+#findClearQuery {
+  font-size: .75rem!important;
+  color: #666666;
+  width: 20px;
+  height: 20px;
+  background: transparent;
+  border-radius: 3px;
+}
+
+#findPrevious {
+  transform: rotate(180deg);
+}
+
+#findClearQuery {
+  font-size: .875rem!important;
+}
+
+#findPrevious:hover,
+#findNext:hover,
+#findClearQuery:hover {
+  background: #efefef;
+}
+
+#findPrevious::before,
+#findNext::before {
+  mask-image: none;
+}
+
+#findPrevious .find-label,
+#findNext .find-label {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+#findbar .toolbarLabel {
+  margin: 0 0 0 .5rem;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 8px;
+  font-size: .875rem;
+  color: inherit;
+}
+
+.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
+  background: #e9e9e9!important;
+}
+
+#findbar .toolbarLabel:hover {
+  background: #f5f5f5;
+}
+
+#printServiceDialog {
+  font-size: inherit;
+}
+
+#printServiceDialog .modal-close {
+  outline: none;
+}
+
+#printServiceDialog .progress,
+#printServiceDialog .progress-bar {
+  height: 10px;
+  border-radius: 5px;
+}
+
+.pdf-file-view dialog::backdrop {
+  background-color: rgba(0, 0, 0);
+  opacity: 0.5;
 }
 
 .pdfViewer .page {