Lungo.theme.default.less 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  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: inset 0px 1px rgba(0,0,0,0.5);
  29. }
  30. .title {
  31. color: #fff;
  32. text-shadow: rgba(0,0,0,0.5) 0 -1px 0px;
  33. }
  34. /* @end */
  35. /* @group <nav> */
  36. nav a {
  37. color: rgba(0,0,0,0.5);
  38. text-shadow: rgba(255,255,255,0.35) 0 1px 1px;
  39. }
  40. header:not(.toolbar) nav a, footer:not(.toolbar) nav a {
  41. line-height: 38px;
  42. }
  43. nav a.current {
  44. color: #fff;
  45. text-shadow: 0px 1px 0px #000 !important;
  46. }
  47. .toolbar a.current{
  48. background: rgba(255,255,255,0.15);
  49. }
  50. /* @end */
  51. /* @group <aside> */
  52. aside {
  53. background: #252525;
  54. -webkit-box-shadow: inset -1px 0px 0px #000, inset -4px 0px 8px rgba(0,0,0, 0.5);
  55. }
  56. aside a{
  57. color: #fff !important;
  58. text-shadow: 0px 1px 0px #000 !important;
  59. border-bottom: 1px inset rgba(0,0,0,0.3);
  60. border-top: 1px inset rgba(255,255,255,0.1);
  61. }
  62. aside a.current {
  63. background: rgba(255,255,255,0.1);
  64. }
  65. aside a .icon {
  66. opacity: 0.5;
  67. }
  68. /* @end */
  69. /* @group .list */
  70. .list {
  71. background: #e2e2e2;
  72. color: #787878;
  73. }
  74. .list li:not(.info) {
  75. background: #fff;
  76. border-bottom: 1px inset #e6e6e6;
  77. color: #333;
  78. }
  79. .list li:last-child {
  80. border-bottom: none;
  81. }
  82. .list li.toolbar {
  83. border-bottom-color: rgba(0,0,0,0.2);
  84. }
  85. .list li:not(.toolbar) a {
  86. color: #787878;
  87. text-shadow: #fff 0px 1px 1px;
  88. -webkit-tap-highlight-color: #242525;
  89. }
  90. .list strong {
  91. color: #333;
  92. }
  93. .list .bubble {
  94. border: 1px solid rgba(0,0,0,0.15);
  95. .border-radius(2px);
  96. background: #ccc;
  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. /* @end */