Lungo.theme.default.less 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. /**
  2. * Stylesheet
  3. *
  4. * @namespace LUNGO.Theme
  5. * @class Default
  6. *
  7. * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  8. */
  9. @import "mixins.less";
  10. /* @group layout */
  11. .app {
  12. font-size:13px;
  13. background: #000;
  14. }
  15. article {
  16. background: #fff;
  17. }
  18. /* @group <header> & <footer> */
  19. header {
  20. background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
  21. .border-radius(6px, 6px, 0, 0);
  22. -webkit-box-shadow:
  23. inset 0px 1px 0px rgba(255,255,255,0.4),
  24. inset 0px -1px rgba(0,0,0,0.5)
  25. }
  26. footer {
  27. background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d));
  28. -webkit-box-shadow:
  29. inset 0px 1px rgba(0,0,0,0.5),
  30. 0px -1px 2px rgba(0,0,0,0.4);
  31. }
  32. .title {
  33. color: #fff;
  34. text-shadow: rgba(0,0,0,0.5) 0 -1px 0px;
  35. }
  36. /* @end */
  37. /* @group <nav> */
  38. nav a {
  39. color: rgba(0,0,0,0.5);
  40. text-shadow: rgba(255,255,255,0.35) 0 1px 1px;
  41. }
  42. header:not(.toolbar) nav a, footer:not(.toolbar) nav a {
  43. line-height: 38px;
  44. }
  45. nav a.current {
  46. color: #fff;
  47. text-shadow: 0px 1px 0px #000 !important;
  48. }
  49. .toolbar a.current{
  50. background: rgba(255,255,255,0.15);
  51. }
  52. /* @end */
  53. /* @group <aside> */
  54. aside {
  55. background: #252525;
  56. -webkit-box-shadow: inset -1px 0px 0px #000, inset -4px 0px 8px rgba(0,0,0, 0.5);
  57. }
  58. aside a{
  59. color: #fff !important;
  60. text-shadow: 0px 1px 0px #000 !important;
  61. border-bottom: 1px inset rgba(0,0,0,0.3);
  62. border-top: 1px inset rgba(255,255,255,0.1);
  63. }
  64. aside a.current {
  65. background: rgba(255,255,255,0.1);
  66. }
  67. aside a .icon {
  68. opacity: 0.5;
  69. }
  70. /* @end */
  71. /* @group .list */
  72. .list {
  73. background: #c5c5c5;
  74. }
  75. .list li:not(.info) {
  76. background: #fff;
  77. border-bottom: 1px inset #c3c4c6;
  78. color: #333;
  79. }
  80. .list li.toolbar {
  81. border-bottom-color: rgba(0,0,0,0.2);
  82. }
  83. .list li:not(.toolbar) a {
  84. color: #333;
  85. text-shadow: #fff 0px 1px 1px;
  86. -webkit-tap-highlight-color: #242525;
  87. }
  88. .list strong {
  89. color: #2343be;
  90. }
  91. .list small {
  92. opacity: 0.75;
  93. }
  94. .list .bubble {
  95. border: 1px solid rgba(0,0,0,0.15);
  96. .border-radius(2px);
  97. color: #fff;
  98. text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  99. }
  100. .list .button {
  101. color: #fff;
  102. text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  103. }
  104. .list .arrow:before {
  105. color: #a9a9a9;
  106. }
  107. /* @group .anchor */
  108. .list li.anchor {
  109. background: #f4f4f4;
  110. color: #222;
  111. }
  112. /* @end */
  113. /* @group .anchor */
  114. .list li.search {
  115. border: none;
  116. -webkit-box-shadow:
  117. inset 0px 1px 0px rgba(255,255,255,0.1),
  118. inset 0px -1px 0px rgba(0,0,0,0.25);
  119. }
  120. /* @end */
  121. /* @group .info */
  122. .list li.info {
  123. border: none;
  124. -webkit-box-shadow:
  125. inset 0px 1px 0px rgba(255,255,255,0.1),
  126. inset 0px -1px 0px rgba(0,0,0,0.25);
  127. background: #cbcbcb;
  128. }
  129. .list .info strong{
  130. color: #333;
  131. }
  132. .list .info.contrast strong {
  133. color: #fff;
  134. }
  135. /* @end */
  136. /* @end */
  137. .list .contrast {
  138. background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
  139. text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
  140. color: #fff;
  141. }
  142. .list .highlight {
  143. background: #499dc4 -webkit-gradient(linear, left top, left bottom, color-stop(0, #499dc4), color-stop(1, #0e8eb6)) !important;
  144. }
  145. /* @end */
  146. /* @group widgets */
  147. /* @group <section>.splash */
  148. .splash article {
  149. background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
  150. color: #fff;
  151. text-shadow: rgba(0,0,0,0.5) 0 1px 1px;
  152. }
  153. /* @end */
  154. /* @group <inputs> */
  155. input, textarea, select {
  156. border: 1px solid #ccc;
  157. .border-radius(2px);
  158. background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(0.15, #fff));
  159. }
  160. input:focus, textarea:focus, select:focus {
  161. border: 1px solid #058cf5;
  162. .box-shadow(0 0 4px 1px #058cf5);
  163. background: #e8fefe;
  164. }
  165. .select:after {
  166. background: #ccc;
  167. color: white;
  168. .border-radius(0 2px 2px 0);
  169. }
  170. /* @end */
  171. /* @group .counter (BETA) */
  172. .counter{
  173. background: #ee2c23;
  174. .border-radius(2px);
  175. color: #fff;
  176. }
  177. /* @end */
  178. /* @end */