You are here

Home » API reference » The Better Mega Menu 2.x

black.css in The Better Mega Menu 2.x

Same filename and directory in other branches
  1. 8 css/styles/black.css
  2. 7 css/styles/black.css
.tb-megamenu {
  background-color: #333;
  background-image: -moz-linear-gradient(top,#333,#444);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#333),to(#444));
  background-image: -webkit-linear-gradient(top,#333,#444);
  background-image: -o-linear-gradient(top,#333,#444);
  background-image: linear-gradient(to bottom,#333,#444);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff444444', GradientType=0);
  color: #aaa;
}
.tb-megamenu .nav > li > a,
.tb-megamenu .nav > li > span.tb-megamenu-no-link {
  background: url(../../images/line.png) no-repeat 100% 0;
  border-right: none;
  color: #aaa;
  font-weight: bold;
}
.tb-megamenu .nav > li > a:focus,
.tb-megamenu .nav > li > a:hover,
.tb-megamenu .nav > li > span.tb-megamenu-no-link:focus,
.tb-megamenu .nav > li > span.tb-megamenu-no-link:hover {
  background-color: #222;
  color: #7bb9e0;
}
.tb-megamenu .nav > .active > a,
.tb-megamenu .nav > .active > a:hover,
.tb-megamenu .nav > .active > a:focus,
.tb-megamenu .nav > .active > span.tb-megamenu-no-link,
.tb-megamenu .nav > .active > span.tb-megamenu-no-link:hover,
.tb-megamenu .nav > .active > span.tb-megamenu-no-link:focus {
  background-color: inherit;
  color: #7bb9e0;
}
.tb-megamenu .nav-collapse .nav > li.active > a:hover,
.tb-megamenu .nav-collapse .nav > li.active > a:focus,
.tb-megamenu .nav-collapse .nav > li.active > span.tb-megamenu-no-link:hover,
.tb-megamenu .nav-collapse .nav > li.active > span.tb-megamenu-no-link:focus {
  background-color: inherit;
  color: #7bb9e0;
}
.tb-megamenu .row-fluid + .row-fluid {
  border-color: #333;
}
.tb-megamenu .dropdown .caret {
  margin-left: 5px;
}
.tb-megamenu .dropdown-menu {
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.tb-megamenu .dropdown-menu li > a,
.tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link {
  border-top: 1px solid #444;
  padding: 5px 20px;
  text-shadow: none;
}
.tb-megamenu .dropdown-menu li:first-child > a,
.tb-megamenu .dropdown-menu li:first-child > span.tb-megamenu-no-link {
  border-top: 0;
}
.tb-megamenu .navbar .nav > li > .dropdown-menu:before {
  display: none;
}
.tb-megamenu .navbar .nav > li > .dropdown-menu:after {
  display: none;
}
.tb-megamenu .dropdown-menu .disabled > a,
.tb-megamenu .dropdown-menu .disabled > a:hover,
.tb-megamenu .dropdown-menu .disabled > span.tb-megamenu-no-link,
.tb-megamenu .dropdown-menu .disabled > span.tb-megamenu-no-link:hover {
  color: #999;
}
.tb-megamenu .dropdown-menu .disabled > a:hover,
.tb-megamenu .dropdown-menu .disabled > span.tb-megamenu-no-link:hover {
  background-color: transparent;
}
.tb-megamenu .nav li.dropdown.open > .dropdown-toggle {
  background-color: #666;
  color: #aaa;
}
.tb-megamenu .nav li.dropdown.active > .dropdown-toggle {
  background-color: inherit;
  color: #7bb9e0;
}
.tb-megamenu .nav > li.dropdown.open.active > a:hover,
.tb-megamenu .nav > li.dropdown.open.active > a:focus,
.tb-megamenu .nav > li.dropdown.open.active > span.tb-megamenu-no-link:hover,
.tb-megamenu .nav > li.dropdown.open.active > span.tb-megamenu-no-link:focus {
  background-color: #222;
  color: #7bb9e0;
}
.tb-megamenu .dropdown-menu {
  background-color: #222;
  border: none;
}
.tb-megamenu .dropdown-menu li > a,
.tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link {
  color: #aaa;
  border-top: 1px solid #333;
}
.tb-megamenu .dropdown-menu li > a:hover,
.tb-megamenu .dropdown-menu li > a:focus,
.tb-megamenu .dropdown-submenu:hover > a,
.tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link:hover,
.tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link:focus,
.tb-megamenu .dropdown-submenu:hover > span.tb-megamenu-no-link {
  background: none;
  color: #7bb9e0;
}
.tb-megamenu .nav li.dropdown.open > .dropdown-toggle,
.tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle {
  background-color: #222;
  color: #7bb9e0;
}
.tb-megamenu .mega-nav .mega-group > .mega-group-title,
.tb-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title,
.tb-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title {
  color: #ddd;
}
.tb-megamenu .tb-block {
  background: transparent;
  color: inherit;
}
.tb-megamenu .tb-block .block-inner {
  padding: 0;
}
.tb-megamenu .tb-block .block-title {
  background: inherit;
  color: #ddd;
}
.tb-megamenu .block-ct {
  background: inherit;
  color: inherit;
  padding: 0;
  *zoom: 1;
}
.tb-megamenu .block-ct:before,
.tb-megamenu .block-ct:after {
  display: table;
  content: "";
  line-height: 0;
}
.tb-megamenu .block-ct:after {
  clear: both;
}
.tb-megamenu .tb-block ul.unstyled,
.tb-megamenu .tb-block ol.unstyled,
.tb-megamenu .tb-block ul.nav,
.tb-megamenu .tb-block ol.nav {
  margin-left: 0;
}
.tb-megamenu .block_menu .nav {
  margin-bottom: 20px;
}
.tb-megamenu .block_menu .nav > li {
  border-top: 1px solid #444;
}
.tb-megamenu .block_menu .nav > li > a,
.tb-megamenu .block_menu .nav > li > span.tb-megamenu-no-link {
  padding: 5px;
}
.tb-megamenu .block_menu .nav > li:first-child {
  border-top: 0;
}
.tb-megamenu .block_menu .nav > li:first-child > a,
.tb-megamenu .block_menu .nav > li:first-child > span.tb-megamenu-no-link {
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 979px) {
  .tb-megamenu {
    background-image: none;
    background-color: inherit;
}

  .tb-megamenu .nav-collapse,
  .tb-megamenu .nav-collapse .dropdown-menu {
    background-color: #333;
}
  .tb-megamenu .nav-collapse .nav > li > a,
  .tb-megamenu .nav-collapse .dropdown-menu a,
  .tb-megamenu .nav-collapse .nav > li > span.tb-megamenu-no-link,
  .tb-megamenu .nav-collapse .dropdown-menu span.tb-megamenu-no-link {
    border-bottom-color: #444;
    border-top-color: #444;
    color: #eee;
}
  .tb-megamenu .nav > li > a,
  .tb-megamenu .nav > li > span.tb-megamenu-no-link {
    color: #eee;
    border-right: 1px solid #444;
}
}

@media (max-width: 738px) {
  .tb-megamenu .nav-collapse .nav li a,
  .tb-megamenu .nav-collapse .nav li span.tb-megamenu-no-link {
    border-top-color: #444;
  }
  .tb-megamenu .nav-collapse .nav > li > a,
  .tb-megamenu .nav-collapse .dropdown-menu a,
  .tb-megamenu .nav-collapse .nav > li > span.tb-megamenu-no-link,
  .tb-megamenu .nav-collapse .dropdown-menu span.tb-megamenu-no-link {
    border-bottom: none;
    border-top-color: #444;
    color: #eee;
  }
  .tb-megamenu .row-fluid + .row-fluid {
    border-top-color: #444;
  }
}

.block-view-demo .views-field-field-image img {
  border: 1px solid #333;
}

.block-view-demo .item-list ul li {
  border-bottom: 1px solid #333;
}

.block-view-demo .views-field-title a:hover,
.block-view-demo .views-field-title a:focus {
  color: #7bb9e0;
}

File

css/styles/black.css
View source 
  1. .tb-megamenu {

  2.   background-color: #333;

  3.   background-image: -moz-linear-gradient(top,#333,#444);

  4.   background-image: -webkit-gradient(linear,0 0,0 100%,from(#333),to(#444));

  5.   background-image: -webkit-linear-gradient(top,#333,#444);

  6.   background-image: -o-linear-gradient(top,#333,#444);

  7.   background-image: linear-gradient(to bottom,#333,#444);

  8.   background-repeat: repeat-x;

  9.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff444444', GradientType=0);

  10.   color: #aaa;

  11. }

  12. .tb-megamenu .nav > li > a,

  13. .tb-megamenu .nav > li > span.tb-megamenu-no-link {

  14.   background: url(../../images/line.png) no-repeat 100% 0;

  15.   border-right: none;

  16.   color: #aaa;

  17.   font-weight: bold;

  18. }

  19. .tb-megamenu .nav > li > a:focus,

  20. .tb-megamenu .nav > li > a:hover,

  21. .tb-megamenu .nav > li > span.tb-megamenu-no-link:focus,

  22. .tb-megamenu .nav > li > span.tb-megamenu-no-link:hover {

  23.   background-color: #222;

  24.   color: #7bb9e0;

  25. }

  26. .tb-megamenu .nav > .active > a,

  27. .tb-megamenu .nav > .active > a:hover,

  28. .tb-megamenu .nav > .active > a:focus,

  29. .tb-megamenu .nav > .active > span.tb-megamenu-no-link,

  30. .tb-megamenu .nav > .active > span.tb-megamenu-no-link:hover,

  31. .tb-megamenu .nav > .active > span.tb-megamenu-no-link:focus {

  32.   background-color: inherit;

  33.   color: #7bb9e0;

  34. }

  35. .tb-megamenu .nav-collapse .nav > li.active > a:hover,

  36. .tb-megamenu .nav-collapse .nav > li.active > a:focus,

  37. .tb-megamenu .nav-collapse .nav > li.active > span.tb-megamenu-no-link:hover,

  38. .tb-megamenu .nav-collapse .nav > li.active > span.tb-megamenu-no-link:focus {

  39.   background-color: inherit;

  40.   color: #7bb9e0;

  41. }

  42. .tb-megamenu .row-fluid + .row-fluid {

  43.   border-color: #333;

  44. }

  45. .tb-megamenu .dropdown .caret {

  46.   margin-left: 5px;

  47. }

  48. .tb-megamenu .dropdown-menu {

  49.   -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);

  50.   -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);

  51.   box-shadow: 0 5px 10px rgba(0,0,0,0.2);

  52. }

  53. .tb-megamenu .dropdown-menu li > a,

  54. .tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link {

  55.   border-top: 1px solid #444;

  56.   padding: 5px 20px;

  57.   text-shadow: none;

  58. }

  59. .tb-megamenu .dropdown-menu li:first-child > a,

  60. .tb-megamenu .dropdown-menu li:first-child > span.tb-megamenu-no-link {

  61.   border-top: 0;

  62. }

  63. .tb-megamenu .navbar .nav > li > .dropdown-menu:before {

  64.   display: none;

  65. }

  66. .tb-megamenu .navbar .nav > li > .dropdown-menu:after {

  67.   display: none;

  68. }

  69. .tb-megamenu .dropdown-menu .disabled > a,

  70. .tb-megamenu .dropdown-menu .disabled > a:hover,

  71. .tb-megamenu .dropdown-menu .disabled > span.tb-megamenu-no-link,

  72. .tb-megamenu .dropdown-menu .disabled > span.tb-megamenu-no-link:hover {

  73.   color: #999;

  74. }

  75. .tb-megamenu .dropdown-menu .disabled > a:hover,

  76. .tb-megamenu .dropdown-menu .disabled > span.tb-megamenu-no-link:hover {

  77.   background-color: transparent;

  78. }

  79. .tb-megamenu .nav li.dropdown.open > .dropdown-toggle {

  80.   background-color: #666;

  81.   color: #aaa;

  82. }

  83. .tb-megamenu .nav li.dropdown.active > .dropdown-toggle {

  84.   background-color: inherit;

  85.   color: #7bb9e0;

  86. }

  87. .tb-megamenu .nav > li.dropdown.open.active > a:hover,

  88. .tb-megamenu .nav > li.dropdown.open.active > a:focus,

  89. .tb-megamenu .nav > li.dropdown.open.active > span.tb-megamenu-no-link:hover,

  90. .tb-megamenu .nav > li.dropdown.open.active > span.tb-megamenu-no-link:focus {

  91.   background-color: #222;

  92.   color: #7bb9e0;

  93. }

  94. .tb-megamenu .dropdown-menu {

  95.   background-color: #222;

  96.   border: none;

  97. }

  98. .tb-megamenu .dropdown-menu li > a,

  99. .tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link {

  100.   color: #aaa;

  101.   border-top: 1px solid #333;

  102. }

  103. .tb-megamenu .dropdown-menu li > a:hover,

  104. .tb-megamenu .dropdown-menu li > a:focus,

  105. .tb-megamenu .dropdown-submenu:hover > a,

  106. .tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link:hover,

  107. .tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link:focus,

  108. .tb-megamenu .dropdown-submenu:hover > span.tb-megamenu-no-link {

  109.   background: none;

  110.   color: #7bb9e0;

  111. }

  112. .tb-megamenu .nav li.dropdown.open > .dropdown-toggle,

  113. .tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle {

  114.   background-color: #222;

  115.   color: #7bb9e0;

  116. }

  117. .tb-megamenu .mega-nav .mega-group > .mega-group-title,

  118. .tb-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title,

  119. .tb-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title {

  120.   color: #ddd;

  121. }

  122. .tb-megamenu .tb-block {

  123.   background: transparent;

  124.   color: inherit;

  125. }

  126. .tb-megamenu .tb-block .block-inner {

  127.   padding: 0;

  128. }

  129. .tb-megamenu .tb-block .block-title {

  130.   background: inherit;

  131.   color: #ddd;

  132. }

  133. .tb-megamenu .block-ct {

  134.   background: inherit;

  135.   color: inherit;

  136.   padding: 0;

  137.   *zoom: 1;

  138. }

  139. .tb-megamenu .block-ct:before,

  140. .tb-megamenu .block-ct:after {

  141.   display: table;

  142.   content: "";

  143.   line-height: 0;

  144. }

  145. .tb-megamenu .block-ct:after {

  146.   clear: both;

  147. }

  148. .tb-megamenu .tb-block ul.unstyled,

  149. .tb-megamenu .tb-block ol.unstyled,

  150. .tb-megamenu .tb-block ul.nav,

  151. .tb-megamenu .tb-block ol.nav {

  152.   margin-left: 0;

  153. }

  154. .tb-megamenu .block_menu .nav {

  155.   margin-bottom: 20px;

  156. }

  157. .tb-megamenu .block_menu .nav > li {

  158.   border-top: 1px solid #444;

  159. }

  160. .tb-megamenu .block_menu .nav > li > a,

  161. .tb-megamenu .block_menu .nav > li > span.tb-megamenu-no-link {

  162.   padding: 5px;

  163. }

  164. .tb-megamenu .block_menu .nav > li:first-child {

  165.   border-top: 0;

  166. }

  167. .tb-megamenu .block_menu .nav > li:first-child > a,

  168. .tb-megamenu .block_menu .nav > li:first-child > span.tb-megamenu-no-link {

  169.   padding-top: 0;

  170.   border-top: 0;

  171. }

  172. 

  173. @media (max-width: 979px) {

  174.   .tb-megamenu {

  175.     background-image: none;

  176.     background-color: inherit;

  177. }

  178. 

  179.   .tb-megamenu .nav-collapse,

  180.   .tb-megamenu .nav-collapse .dropdown-menu {

  181.     background-color: #333;

  182. }

  183.   .tb-megamenu .nav-collapse .nav > li > a,

  184.   .tb-megamenu .nav-collapse .dropdown-menu a,

  185.   .tb-megamenu .nav-collapse .nav > li > span.tb-megamenu-no-link,

  186.   .tb-megamenu .nav-collapse .dropdown-menu span.tb-megamenu-no-link {

  187.     border-bottom-color: #444;

  188.     border-top-color: #444;

  189.     color: #eee;

  190. }

  191.   .tb-megamenu .nav > li > a,

  192.   .tb-megamenu .nav > li > span.tb-megamenu-no-link {

  193.     color: #eee;

  194.     border-right: 1px solid #444;

  195. }

  196. }

  197. 

  198. @media (max-width: 738px) {

  199.   .tb-megamenu .nav-collapse .nav li a,

  200.   .tb-megamenu .nav-collapse .nav li span.tb-megamenu-no-link {

  201.     border-top-color: #444;

  202.   }

  203.   .tb-megamenu .nav-collapse .nav > li > a,

  204.   .tb-megamenu .nav-collapse .dropdown-menu a,

  205.   .tb-megamenu .nav-collapse .nav > li > span.tb-megamenu-no-link,

  206.   .tb-megamenu .nav-collapse .dropdown-menu span.tb-megamenu-no-link {

  207.     border-bottom: none;

  208.     border-top-color: #444;

  209.     color: #eee;

  210.   }

  211.   .tb-megamenu .row-fluid + .row-fluid {

  212.     border-top-color: #444;

  213.   }

  214. }

  215. 

  216. .block-view-demo .views-field-field-image img {

  217.   border: 1px solid #333;

  218. }

  219. 

  220. .block-view-demo .item-list ul li {

  221.   border-bottom: 1px solid #333;

  222. }

  223. 

  224. .block-view-demo .views-field-title a:hover,

  225. .block-view-demo .views-field-title a:focus {

  226.   color: #7bb9e0;

  227. }