toolbar.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. body.toolbar {
  2. padding-top: 2.2em;
  3. }
  4. body.toolbar-drawer {
  5. padding-top: 5.3em;
  6. }
  7. /**
  8. * Aggressive resets so we can achieve a consistent look in hostile CSS
  9. * environments.
  10. */
  11. #toolbar,
  12. #toolbar * {
  13. border: 0;
  14. font-size: 100%;
  15. line-height: inherit;
  16. list-style: none;
  17. margin: 0;
  18. outline: 0;
  19. padding: 0;
  20. text-align: left; /* LTR */
  21. vertical-align: baseline;
  22. }
  23. /**
  24. * Base styles.
  25. *
  26. * We use a keyword for the toolbar font size to make it display consistently
  27. * across different themes, while still allowing browsers to resize the text.
  28. */
  29. #toolbar {
  30. background: #666;
  31. color: #ccc;
  32. font: normal small "Lucida Grande", Verdana, sans-serif;
  33. left: 0;
  34. margin: 0 -20px;
  35. padding: 0 20px;
  36. position: fixed;
  37. right: 0;
  38. top: 0;
  39. -moz-box-shadow: 0 3px 20px #000;
  40. -webkit-box-shadow: 0 3px 20px #000;
  41. box-shadow: 0 3px 20px #000;
  42. filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10');
  43. -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10')";
  44. z-index: 600;
  45. }
  46. #toolbar div.collapsed {
  47. display: none;
  48. visibility: hidden;
  49. }
  50. #toolbar a {
  51. color: #fff;
  52. font-size: .846em;
  53. text-decoration: none;
  54. }
  55. #toolbar ul li,
  56. #toolbar ul li a {
  57. float: left; /* LTR */
  58. }
  59. /**
  60. * Administration menu.
  61. */
  62. #toolbar div.toolbar-menu {
  63. background: #000;
  64. line-height: 20px;
  65. padding: 5px 50px 5px 10px; /* LTR */
  66. position: relative;
  67. }
  68. #toolbar-home a span {
  69. background: url(toolbar.png) no-repeat 0 -45px;
  70. display: block;
  71. height: 14px;
  72. margin: 3px 0px;
  73. text-indent: -9999px;
  74. vertical-align: text-bottom;
  75. width: 11px;
  76. }
  77. #toolbar-user {
  78. float: right; /* LTR */
  79. }
  80. #toolbar-menu {
  81. float: left; /* LTR */
  82. }
  83. #toolbar div.toolbar-menu a.toggle {
  84. background: url(toolbar.png) 0 -20px no-repeat;
  85. bottom: 0;
  86. cursor: pointer;
  87. height: 25px;
  88. overflow: hidden;
  89. position: absolute;
  90. right: 10px; /* LTR */
  91. text-indent: -9999px;
  92. width: 25px;
  93. }
  94. #toolbar div.toolbar-menu a.toggle:focus,
  95. #toolbar div.toolbar-menu a.toggle:hover {
  96. background-position: -50px -20px;
  97. }
  98. #toolbar div.toolbar-menu a.toggle-active {
  99. background-position: -25px -20px;
  100. }
  101. #toolbar div.toolbar-menu a.toggle-active.toggle:focus,
  102. #toolbar div.toolbar-menu a.toggle-active.toggle:hover {
  103. background-position: -75px -20px;
  104. }
  105. #toolbar div.toolbar-menu ul li a {
  106. padding: 0 10px;
  107. -moz-border-radius: 10px;
  108. -webkit-border-radius: 10px;
  109. border-radius: 10px;
  110. }
  111. #toolbar div.toolbar-menu ul li a:focus,
  112. #toolbar div.toolbar-menu ul li a:hover,
  113. #toolbar div.toolbar-menu ul li a:active,
  114. #toolbar div.toolbar-menu ul li a.active:focus {
  115. background: #444;
  116. }
  117. #toolbar div.toolbar-menu ul li a.active:hover,
  118. #toolbar div.toolbar-menu ul li a.active:active,
  119. #toolbar div.toolbar-menu ul li a.active,
  120. #toolbar div.toolbar-menu ul li.active-trail a {
  121. background: url(toolbar.png) 0 0 repeat-x;
  122. text-shadow: #333 0 1px 0;
  123. }
  124. /**
  125. * Collapsed drawer of additional toolbar content.
  126. */
  127. #toolbar div.toolbar-drawer {
  128. position: relative;
  129. padding: 0 10px;
  130. }
  131. /**
  132. * IE 6 Fix.
  133. *
  134. * IE 6 shows elements with position:fixed as position:static so we replace
  135. * it with position:absolute; toolbar needs its z-index to stay above overlay.
  136. */
  137. * html #toolbar {
  138. left: -20px;
  139. margin: 0;
  140. padding-right: 0;
  141. position: absolute;
  142. right: 0;
  143. width: 100%;
  144. }