You are here

Home » API reference » Mobile sliding menu 7.3

theme-light.css in Mobile sliding menu 7.3 

.mm-menu.mm-theme-light {
  background: #f3f3f3;
  color: #000;
  font-family: Helvetica, sans-serif;
  z-index: 10000;
}
.mm-menu.mm-theme-light > .mm-navbar {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ededed), color-stop(100%, #cccccc));
  background-image: -moz-linear-gradient(top, #ededed 0%, #cccccc 100%);
  background-image: -webkit-linear-gradient(top, #ededed 0%, #cccccc 100%);
  background-image: linear-gradient(to bottom, #ededed 0%, #cccccc 100%);
}
.mm-menu.mm-theme-light > .mm-navbar a.mm-title {
  font-size: 1.5em;
  color: #000;
}
.mm-menu.mm-theme-light > .mm-navbar a.mm-prev {
  color: #000;
}
.mm-menu.mm-theme-light > .mm-navbar a.mm-prev:before {
  border-color: #000;
}
.mm-menu.mm-theme-light > .mm-navbar a.mm-next {
  color: #000;
}
.mm-menu.mm-theme-light > .mm-navbar a.mm-next:after {
  border-color: #000;
}
.mm-menu.mm-theme-light.mm-hasnavbar-top-1 {
  border-bottom: 1px solid #a6a6a6;
}
.mm-menu.mm-theme-light.mm-hasnavbar-top-1 > .mm-navbar-top {
  height: 50px;
  line-height: 50px;
}
.mm-menu.mm-theme-light.mm-hasnavbar-top-1 > .mm-navbar-top > * {
  padding: 0;
  height: 50px;
  line-height: 50px;
}
.mm-menu.mm-theme-light.mm-hasnavbar-top-1 > .mm-panels {
  top: 50px;
}
.mm-menu.mm-theme-light.mm-hasnavbar-bottom-1 {
  border-top: 1px solid #a6a6a6;
}
.mm-menu.mm-theme-light.mm-hasnavbar-bottom-1 > .mm-navbar-bottom {
  height: 30px;
  line-height: 30px;
}
.mm-menu.mm-theme-light.mm-hasnavbar-bottom-1 > .mm-navbar-bottom > * {
  padding: 0;
  height: 30px;
  line-height: 30px;
}
.mm-menu.mm-theme-light.mm-hasnavbar-bottom-1 > .mm-navbar-bottom .mm-title {
  font-size: 1em;
  color: #000;
}
.mm-menu.mm-theme-light.mm-hasnavbar-bottom-1 > .mm-panels {
  bottom: 30px;
}
.mm-menu.mm-theme-light .mm-panel > .mm-search {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #ccc;
}
.mm-menu.mm-theme-light .mm-listview > li {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #ccc;
}
.mm-menu.mm-theme-light .mm-listview > li:after {
  border: none;
}
.mm-menu.mm-theme-light .mm-listview > li .mm-arrow:after, .mm-menu.mm-theme-light .mm-listview > li .mm-next:after {
  right: 15px;
  border-color: #000;
  width: 5px;
  height: 5px;
}
.mm-menu.mm-theme-light .mm-listview li.mmenu-expanded {
  border-top: 1px solid white;
  border-bottom: 1px solid #a6a6a6;
}
.mm-menu.mm-theme-light .mm-listview li.mmenu-expanded .mmenu-block-expanded {
  padding: 5px 10px 5px 10px !important;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ededed), color-stop(100%, #cccccc));
  background-image: -moz-linear-gradient(top, #ededed 0%, #cccccc 100%);
  background-image: -webkit-linear-gradient(top, #ededed 0%, #cccccc 100%);
  background-image: linear-gradient(to bottom, #ededed 0%, #cccccc 100%);
}
.mm-menu.mm-theme-light em.mm-counter {
  color: #000;
  right: 30px;
}
.mm-menu.mm-theme-light em.mm-counter + a.mm-next {
  width: 60px;
}
.mm-menu.mm-theme-light i {
  margin-right: 10px;
}

File

extensions/themes/theme-light/styles/theme-light.css
View source 
  1. .mm-menu.mm-theme-light {

  2.   background: #f3f3f3;

  3.   color: #000;

  4.   font-family: Helvetica, sans-serif;

  5.   z-index: 10000;

  6. }

  7. .mm-menu.mm-theme-light > .mm-navbar {

  8.   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

  9.   background-size: 100%;

  10.   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ededed), color-stop(100%, #cccccc));

  11.   background-image: -moz-linear-gradient(top, #ededed 0%, #cccccc 100%);

  12.   background-image: -webkit-linear-gradient(top, #ededed 0%, #cccccc 100%);

  13.   background-image: linear-gradient(to bottom, #ededed 0%, #cccccc 100%);

  14. }

  15. .mm-menu.mm-theme-light > .mm-navbar a.mm-title {

  16.   font-size: 1.5em;

  17.   color: #000;

  18. }

  19. .mm-menu.mm-theme-light > .mm-navbar a.mm-prev {

  20.   color: #000;

  21. }

  22. .mm-menu.mm-theme-light > .mm-navbar a.mm-prev:before {

  23.   border-color: #000;

  24. }

  25. .mm-menu.mm-theme-light > .mm-navbar a.mm-next {

  26.   color: #000;

  27. }

  28. .mm-menu.mm-theme-light > .mm-navbar a.mm-next:after {

  29.   border-color: #000;

  30. }

  31. .mm-menu.mm-theme-light.mm-hasnavbar-top-1 {

  32.   border-bottom: 1px solid #a6a6a6;

  33. }

  34. .mm-menu.mm-theme-light.mm-hasnavbar-top-1 > .mm-navbar-top {

  35.   height: 50px;

  36.   line-height: 50px;

  37. }

  38. .mm-menu.mm-theme-light.mm-hasnavbar-top-1 > .mm-navbar-top > * {

  39.   padding: 0;

  40.   height: 50px;

  41.   line-height: 50px;

  42. }

  43. .mm-menu.mm-theme-light.mm-hasnavbar-top-1 > .mm-panels {

  44.   top: 50px;

  45. }

  46. .mm-menu.mm-theme-light.mm-hasnavbar-bottom-1 {

  47.   border-top: 1px solid #a6a6a6;

  48. }

  49. .mm-menu.mm-theme-light.mm-hasnavbar-bottom-1 > .mm-navbar-bottom {

  50.   height: 30px;

  51.   line-height: 30px;

  52. }

  53. .mm-menu.mm-theme-light.mm-hasnavbar-bottom-1 > .mm-navbar-bottom > * {

  54.   padding: 0;

  55.   height: 30px;

  56.   line-height: 30px;

  57. }

  58. .mm-menu.mm-theme-light.mm-hasnavbar-bottom-1 > .mm-navbar-bottom .mm-title {

  59.   font-size: 1em;

  60.   color: #000;

  61. }

  62. .mm-menu.mm-theme-light.mm-hasnavbar-bottom-1 > .mm-panels {

  63.   bottom: 30px;

  64. }

  65. .mm-menu.mm-theme-light .mm-panel > .mm-search {

  66.   border-top: 1px solid #fff;

  67.   border-bottom: 1px solid #ccc;

  68. }

  69. .mm-menu.mm-theme-light .mm-listview > li {

  70.   border-top: 1px solid #fff;

  71.   border-bottom: 1px solid #ccc;

  72. }

  73. .mm-menu.mm-theme-light .mm-listview > li:after {

  74.   border: none;

  75. }

  76. .mm-menu.mm-theme-light .mm-listview > li .mm-arrow:after, .mm-menu.mm-theme-light .mm-listview > li .mm-next:after {

  77.   right: 15px;

  78.   border-color: #000;

  79.   width: 5px;

  80.   height: 5px;

  81. }

  82. .mm-menu.mm-theme-light .mm-listview li.mmenu-expanded {

  83.   border-top: 1px solid white;

  84.   border-bottom: 1px solid #a6a6a6;

  85. }

  86. .mm-menu.mm-theme-light .mm-listview li.mmenu-expanded .mmenu-block-expanded {

  87.   padding: 5px 10px 5px 10px !important;

  88.   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

  89.   background-size: 100%;

  90.   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ededed), color-stop(100%, #cccccc));

  91.   background-image: -moz-linear-gradient(top, #ededed 0%, #cccccc 100%);

  92.   background-image: -webkit-linear-gradient(top, #ededed 0%, #cccccc 100%);

  93.   background-image: linear-gradient(to bottom, #ededed 0%, #cccccc 100%);

  94. }

  95. .mm-menu.mm-theme-light em.mm-counter {

  96.   color: #000;

  97.   right: 30px;

  98. }

  99. .mm-menu.mm-theme-light em.mm-counter + a.mm-next {

  100.   width: 60px;

  101. }

  102. .mm-menu.mm-theme-light i {

  103.   margin-right: 10px;

  104. }