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 { .findbar {
top: 40px; top: 32px;
left: 40px; left: 68px;
position: absolute; position: absolute;
z-index: 100; z-index: 10000;
height: 20px; height: 20px;
min-width: 16px; min-width: 16px;
padding: 3px 6px 3px 6px; padding: 3px 6px 3px 6px;
margin: 4px 2px 4px 0; margin: 4px 2px 4px 0;
border: 1px solid transparent;
border-radius: 2px;
color: hsl(0,0%,85%); color: hsl(0,0%,85%);
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -290,6 +288,33 @@ html[dir='rtl'] #sidebarContent {
-moz-user-select:none; -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 { #findMsg {
font-style: italic; font-style: italic;
color: #A6B7D0; color: #A6B7D0;
@ -1317,7 +1342,7 @@ canvas {
} }
@media all and (max-width: 600px) { @media all and (max-width: 600px) {
#toolbarViewerRight { #toolbarViewerRight, #findbar, #viewFind {
display: none; 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"> <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> <span data-l10n-id="outline_label">Document Outline</span>
</button> </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>
<div id="sidebarContent"> <div id="sidebarContent">
<div id="thumbnailView"> <div id="thumbnailView">
@ -103,7 +98,7 @@ limitations under the License.
</div> <!-- sidebarContainer --> </div> <!-- sidebarContainer -->
<div id="mainContainer"> <div id="mainContainer">
<div class="findbar hidden" id="findbar"> <div class="findbar hidden doorHanger" id="findbar">
<label for="findInput">Find: </label> <label for="findInput">Find: </label>
<input id="findInput" type="search"> <input id="findInput" type="search">
<button id="findPrevious">&lt;</button> <button id="findPrevious">&lt;</button>
@ -118,10 +113,15 @@ limitations under the License.
<div id="toolbarContainer"> <div id="toolbarContainer">
<div id="toolbarViewer"> <div id="toolbarViewer">
<div id="toolbarViewerLeft"> <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> <span data-l10n-id="toggle_slider_label">Toggle Sidebar</span>
</button> </button>
<div class="toolbarButtonSpacer"></div> <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"> <div class="splitToolbarButton">
<button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="5" data-l10n-id="previous"> <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="5" data-l10n-id="previous">
<span data-l10n-id="previous_label">Previous</span> <span data-l10n-id="previous_label">Previous</span>