Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add some door hanger styling for the find bar

Browse Source
This commit is contained in:
Brendan Dahl 2012-09-28 12:30:07 -07:00
parent 53672af0f7
commit dd0cb37f38
2 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/viewer.css
View File

@ -267,17 +267,15 @@ html[dir='rtl'] #sidebarContent {
}
.findbar {
top: 40px;
left: 40px;
top: 32px;
left: 68px;
position: absolute;
z-index: 100;
z-index: 10000;
height: 20px;
min-width: 16px;
padding: 3px 6px 3px 6px;
margin: 4px 2px 4px 0;
border: 1px solid transparent;
border-radius: 2px;
color: hsl(0,0%,85%);
font-size: 12px;
line-height: 14px;
@ -290,6 +288,33 @@ html[dir='rtl'] #sidebarContent {
-moz-user-select:none;
}
.doorHanger {
border: 1px solid hsla(0,0%,0%,.5);
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.doorHanger:after, .doorHanger:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.doorHanger:after {
border-bottom-color: hsla(0,0%,32%,.99);
border-width: 8px;
left: 16px;
margin-left: -8px;
}
.doorHanger:before {
border-bottom-color: hsla(0,0%,0%,.5);
border-width: 9px;
left: 16px;
margin-left: -9px;
}
#findMsg {
font-style: italic;
color: #A6B7D0;
@ -1317,7 +1342,7 @@ canvas {
}
@media all and (max-width: 600px) {
#toolbarViewerRight {
#toolbarViewerRight, #findbar, #viewFind {
display: none;
}
}

14
web/viewer.html
View File

@ -88,11 +88,6 @@ limitations under the License.
<button id="viewOutline" class="toolbarButton group" title="Show Document Outline" tabindex="2" data-l10n-id="outline">
<span data-l10n-id="outline_label">Document Outline</span>
</button>
<!--#if !MOZCENTRAL-->
<button id="viewFind" class="toolbarButton group" title="Find in Document" tabindex="3" data-l10n-id="find_panel">
<span data-l10n-id="find_panel_label">Find in Document</span>
</button>
<!--#endif-->
</div>
<div id="sidebarContent">
<div id="thumbnailView">
@ -103,7 +98,7 @@ limitations under the License.
</div> <!-- sidebarContainer -->
<div id="mainContainer">
<div class="findbar hidden" id="findbar">
<div class="findbar hidden doorHanger" id="findbar">
<label for="findInput">Find: </label>
<input id="findInput" type="search">
<button id="findPrevious">&lt;</button>
@ -118,10 +113,15 @@ limitations under the License.
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerLeft">
<button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="4" data-l10n-id="toggle_slider">
<button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="3" data-l10n-id="toggle_slider">
<span data-l10n-id="toggle_slider_label">Toggle Sidebar</span>
</button>
<div class="toolbarButtonSpacer"></div>
<!--#if !MOZCENTRAL-->
<button id="viewFind" class="toolbarButton group" title="Find in Document" tabindex="4" data-l10n-id="find_panel">
<span data-l10n-id="find_panel_label">Find in Document</span>
</button>
<!--#endif-->
<div class="splitToolbarButton">
<button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="5" data-l10n-id="previous">
<span data-l10n-id="previous_label">Previous</span>