lungo.theme.default.css 5.0 KB

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