From dd0cb37f38d4ebb22f16198f4051fc29cea33452 Mon Sep 17 00:00:00 2001 From: Brendan Dahl Date: Fri, 28 Sep 2012 12:30:07 -0700 Subject: [PATCH] Add some door hanger styling for the find bar --- web/viewer.css | 37 +++++++++++++++++++++++++++++++------ web/viewer.html | 14 +++++++------- 2 files changed, 38 insertions(+), 13 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 95b4dc5ab..30877a6d6 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -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; } } diff --git a/web/viewer.html b/web/viewer.html index 73c4cb87a..e59120471 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -88,11 +88,6 @@ limitations under the License. - - -
@@ -103,7 +98,7 @@ limitations under the License.
-