FindBanner.css 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. /*
  2. * Copyright (C) 2013 Apple Inc. All rights reserved.
  3. *
  4. * Redistribution and use in source and binary forms, with or without
  5. * modification, are permitted provided that the following conditions
  6. * are met:
  7. * 1. Redistributions of source code must retain the above copyright
  8. * notice, this list of conditions and the following disclaimer.
  9. * 2. Redistributions in binary form must reproduce the above copyright
  10. * notice, this list of conditions and the following disclaimer in the
  11. * documentation and/or other materials provided with the distribution.
  12. *
  13. * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
  14. * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  15. * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  16. * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
  17. * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  18. * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  19. * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  20. * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  21. * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  22. * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
  23. * THE POSSIBILITY OF SUCH DAMAGE.
  24. */
  25. .find-banner {
  26. border-bottom: 1px solid rgb(153, 153, 153);
  27. font-family: "Lucida Grande", sans-serif;
  28. font-size: 11px;
  29. position: absolute;
  30. top: -22px;
  31. left: 0;
  32. right: 0;
  33. height: 22px;
  34. text-align: right;
  35. white-space: nowrap;
  36. overflow: hidden;
  37. -webkit-transition-property: top;
  38. -webkit-transition-duration: 200ms;
  39. -webkit-transition-timing-function: ease-in;
  40. z-index: 500;
  41. }
  42. .find-banner.showing {
  43. top: 0;
  44. -webkit-transition-timing-function: ease-out;
  45. }
  46. .find-banner.no-find-banner-transition,
  47. .supports-find-banner.no-find-banner-transition {
  48. -webkit-transition-duration: 0 !important;
  49. }
  50. .supports-find-banner {
  51. -webkit-transition-property: top;
  52. -webkit-transition-duration: 200ms;
  53. -webkit-transition-timing-function: ease-in;
  54. }
  55. .supports-find-banner.showing-find-banner {
  56. top: 22px !important;
  57. -webkit-transition-timing-function: ease-out;
  58. }
  59. .find-banner > :first-child {
  60. margin-left: 8px !important;
  61. }
  62. .find-banner > :last-child {
  63. margin-right: 8px !important;
  64. }
  65. .find-banner > input[type="search"] {
  66. margin: 1px 4px;
  67. width: 143px;
  68. height: 19px;
  69. vertical-align: top;
  70. -webkit-appearance: none;
  71. outline: none;
  72. border: 1px solid rgb(146, 146, 146);
  73. border-radius: 4px;
  74. background-color: white;
  75. box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
  76. }
  77. .find-banner > button {
  78. margin: 1px 4px;
  79. padding-left: 6px;
  80. padding-right: 6px;
  81. -webkit-appearance: none;
  82. border-radius: 4px;
  83. border: 1px solid rgb(146, 146, 146);
  84. background-color: white;
  85. background-image: none;
  86. box-shadow: none;
  87. line-height: 11px;
  88. height: 19px;
  89. text-align: center;
  90. vertical-align: top;
  91. outline-offset: -2px;
  92. }
  93. .find-banner > button > .glyph {
  94. display: inline-block;
  95. width: 7px;
  96. height: 7px;
  97. }
  98. .find-banner > button:disabled > .glyph {
  99. opacity: 0.65;
  100. }
  101. .find-banner > button:active:not(:disabled) {
  102. border: 1px solid rgb(141, 141, 141);
  103. background-image: -webkit-linear-gradient(top, rgb(200, 200, 200), rgb(218, 218, 218));
  104. box-shadow: rgba(255, 255, 255, 0.33) 0 1px 0, inset rgb(165, 165, 165) 0 1px 1px;
  105. }
  106. .find-banner > button:disabled {
  107. border: 1px solid rgb(195, 195, 195);
  108. background-image: none;
  109. }
  110. .find-banner > button.segmented.left {
  111. border-top-right-radius: 0;
  112. border-bottom-right-radius: 0;
  113. margin-right: 0;
  114. padding-left: 6px;
  115. padding-right: 6px;
  116. }
  117. .find-banner > button.segmented.left > .glyph {
  118. background-image: -webkit-canvas(find-banner-previous-arrow-normal);
  119. background-size: 7px 7px;
  120. background-repeat: no-repeat;
  121. }
  122. .find-banner > button.segmented.left:active:not(:disabled) > .glyph {
  123. background-image: -webkit-canvas(find-banner-previous-arrow-normal-active);
  124. }
  125. .find-banner > button.segmented.right {
  126. border-top-left-radius: 0;
  127. border-bottom-left-radius: 0;
  128. margin-left: -1px;
  129. padding-left: 5px;
  130. padding-right: 7px;
  131. }
  132. .find-banner > button.segmented.right > .glyph {
  133. background-image: -webkit-canvas(find-banner-next-arrow-normal);
  134. background-size: 7px 7px;
  135. background-repeat: no-repeat;
  136. }
  137. .find-banner > button.segmented.right:active:not(:disabled) > .glyph {
  138. background-image: -webkit-canvas(find-banner-next-arrow-normal-active);
  139. }
  140. .find-banner > button.segmented {
  141. min-width: 22px;
  142. }
  143. .find-banner > button.segmented:active {
  144. z-index: 100;
  145. position: relative;
  146. }
  147. .find-banner > label {
  148. margin: 0 6px;
  149. line-height: 21px;
  150. }