You are here

quickbar.css in Quickbar 7

Same filename and directory in other branches
  1. 6 theme/quickbar.css
  2. 7.2 theme/quickbar.css
/**
 * Aggressive resets so we can achieve a consistent look in
 * hostile CSS environments.
 */
#quickbar,
#quickbar * {
  border: 0;
  font-size: 100%;
  line-height: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  text-align: left;
  vertical-align: baseline;
}

/**
 * Base styles
 */
#quickbar {
  background: url(sprite.png) 0 -20px repeat-x;
  color: #ccc;
  font: normal 11px/20px "Lucida Grande", Verdana, sans-serif;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 550;
}

.quickbar-float #quickbar {
  position: absolute;
}

.quickbar-enabled.quickbar-sticky {
  margin-top: 30px;
}

.quickbar-enabled.quickbar-sticky #quickbar {
  position: fixed;
  top: 0;
  width: 100%;
}

#quickbar .collapsed {
  display: none;
}

#quickbar div.shadow {
  background: url(sprite.png) 0 -100px repeat-x;
  bottom: -10px;
  height: 10px;
  left: 0;
  position: absolute;
  right: 0;
}

#quickbar a {
  color: #fff;
  text-decoration: none;
}

#quickbar ul.links {
  /* Some themes (like Bartik) override the styling of ul.links
     for consistency when switching back and forth between themes
     we set the font again here */
  font: 11px/20px "Lucida Grande", Verdana, sans-serif;
}
#quickbar ul.links li,
#quickbar ul.links li a {
  float: left; /* LTR */
}
#quickbar ul.links li {
  list-style-type: none;
  list-style-image: none;
}
#quickbar ul.links li:hover a {
  background-color: #666;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}


/**
 * First level menus
 */
#quickbar div.depth-0 {
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  padding: 5px 10px;
}

#quickbar div.depth-0 #quickbar-admin {
  float: left; /* LTR */
}

#quickbar div.depth-0 #quickbar-user {
  float: right; /* LTR */
}

#quickbar div.depth-0 ul.links li a {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 0 10px;
}

#quickbar div.depth-0 ul.links li a.active {
  background: url(sprite.png) 0 0 repeat-x;
  text-shadow: #333 0 1px 0;
}

#quickbar div.depth-0 .icon {
  display: none;
}

/**
 * Second level menus
 */
#quickbar div.depth-1 {
  padding: 0 10px;
  position: relative;
}

#quickbar div.depth-1 span.close {
  background: url(sprite.png) 0 -135px no-repeat;
  cursor: pointer;
  height: 20px;
  overflow: hidden;
  position: absolute;
  right: 10px; /* LTR */
  text-indent: -9999px;
  top: 15px;
  width: 20px;
}

#quickbar div.depth-1 ul.links {
  float: left; /* LTR */
  height: 40px;
  line-height: 30px;
  overflow: hidden;
  padding: 5px 0;
}

#quickbar div.depth-1 ul.links li.view-all {
  background-color: transparent;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  right: 40px; /* LTR */
  top: 5px;
}

#quickbar div.depth-1 ul.links li.view-all a,
#quickbar div.depth-1 ul.links li.view-all a.active {
  background: #333 url(sprite.png) 100% -135px no-repeat;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font-size: 9px;
  line-height: 20px;
  margin: 0;
  padding: 0 15px 0 10px;
  text-transform: uppercase;
}
#quickbar div.depth-1 ul.links li a {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-right: 5px;
  padding: 5px 15px 5px 5px;
}

#quickbar div.depth-1 ul.links li a.active {
  background-color: #333;
}

#quickbar div.depth-1 span.icon {
  float: left; /* LTR */
  height: 30px;
  margin-right: 5px; /* LTR */
  width: 30px;
}

/* Overlay module support */
#quickbar ~ #overlay-container {
  margin-top: 30px;
}

File

theme/quickbar.css
View source
  1. /**
  2. * Aggressive resets so we can achieve a consistent look in
  3. * hostile CSS environments.
  4. */
  5. #quickbar,
  6. #quickbar * {
  7. border: 0;
  8. font-size: 100%;
  9. line-height: inherit;
  10. margin: 0;
  11. outline: 0;
  12. padding: 0;
  13. text-align: left;
  14. vertical-align: baseline;
  15. }
  16. /**
  17. * Base styles
  18. */
  19. #quickbar {
  20. background: url(sprite.png) 0 -20px repeat-x;
  21. color: #ccc;
  22. font: normal 11px/20px "Lucida Grande", Verdana, sans-serif;
  23. position: relative;
  24. top: 0;
  25. width: 100%;
  26. z-index: 550;
  27. }
  28. .quickbar-float #quickbar {
  29. position: absolute;
  30. }
  31. .quickbar-enabled.quickbar-sticky {
  32. margin-top: 30px;
  33. }
  34. .quickbar-enabled.quickbar-sticky #quickbar {
  35. position: fixed;
  36. top: 0;
  37. width: 100%;
  38. }
  39. #quickbar .collapsed {
  40. display: none;
  41. }
  42. #quickbar div.shadow {
  43. background: url(sprite.png) 0 -100px repeat-x;
  44. bottom: -10px;
  45. height: 10px;
  46. left: 0;
  47. position: absolute;
  48. right: 0;
  49. }
  50. #quickbar a {
  51. color: #fff;
  52. text-decoration: none;
  53. }
  54. #quickbar ul.links {
  55. /* Some themes (like Bartik) override the styling of ul.links
  56. for consistency when switching back and forth between themes
  57. we set the font again here */
  58. font: 11px/20px "Lucida Grande", Verdana, sans-serif;
  59. }
  60. #quickbar ul.links li,
  61. #quickbar ul.links li a {
  62. float: left; /* LTR */
  63. }
  64. #quickbar ul.links li {
  65. list-style-type: none;
  66. list-style-image: none;
  67. }
  68. #quickbar ul.links li:hover a {
  69. background-color: #666;
  70. -moz-border-radius: 10px;
  71. -webkit-border-radius: 10px;
  72. border-radius: 10px;
  73. }
  74. /**
  75. * First level menus
  76. */
  77. #quickbar div.depth-0 {
  78. height: 20px;
  79. line-height: 20px;
  80. overflow: hidden;
  81. padding: 5px 10px;
  82. }
  83. #quickbar div.depth-0 #quickbar-admin {
  84. float: left; /* LTR */
  85. }
  86. #quickbar div.depth-0 #quickbar-user {
  87. float: right; /* LTR */
  88. }
  89. #quickbar div.depth-0 ul.links li a {
  90. -moz-border-radius: 10px;
  91. -webkit-border-radius: 10px;
  92. border-radius: 10px;
  93. padding: 0 10px;
  94. }
  95. #quickbar div.depth-0 ul.links li a.active {
  96. background: url(sprite.png) 0 0 repeat-x;
  97. text-shadow: #333 0 1px 0;
  98. }
  99. #quickbar div.depth-0 .icon {
  100. display: none;
  101. }
  102. /**
  103. * Second level menus
  104. */
  105. #quickbar div.depth-1 {
  106. padding: 0 10px;
  107. position: relative;
  108. }
  109. #quickbar div.depth-1 span.close {
  110. background: url(sprite.png) 0 -135px no-repeat;
  111. cursor: pointer;
  112. height: 20px;
  113. overflow: hidden;
  114. position: absolute;
  115. right: 10px; /* LTR */
  116. text-indent: -9999px;
  117. top: 15px;
  118. width: 20px;
  119. }
  120. #quickbar div.depth-1 ul.links {
  121. float: left; /* LTR */
  122. height: 40px;
  123. line-height: 30px;
  124. overflow: hidden;
  125. padding: 5px 0;
  126. }
  127. #quickbar div.depth-1 ul.links li.view-all {
  128. background-color: transparent;
  129. margin: 0;
  130. padding: 10px 0;
  131. position: absolute;
  132. right: 40px; /* LTR */
  133. top: 5px;
  134. }
  135. #quickbar div.depth-1 ul.links li.view-all a,
  136. #quickbar div.depth-1 ul.links li.view-all a.active {
  137. background: #333 url(sprite.png) 100% -135px no-repeat;
  138. -moz-border-radius: 10px;
  139. -webkit-border-radius: 10px;
  140. border-radius: 10px;
  141. font-size: 9px;
  142. line-height: 20px;
  143. margin: 0;
  144. padding: 0 15px 0 10px;
  145. text-transform: uppercase;
  146. }
  147. #quickbar div.depth-1 ul.links li a {
  148. -moz-border-radius: 5px;
  149. -webkit-border-radius: 5px;
  150. border-radius: 5px;
  151. margin-right: 5px;
  152. padding: 5px 15px 5px 5px;
  153. }
  154. #quickbar div.depth-1 ul.links li a.active {
  155. background-color: #333;
  156. }
  157. #quickbar div.depth-1 span.icon {
  158. float: left; /* LTR */
  159. height: 30px;
  160. margin-right: 5px; /* LTR */
  161. width: 30px;
  162. }
  163. /* Overlay module support */
  164. #quickbar ~ #overlay-container {
  165. margin-top: 30px;
  166. }