Lungo.theme.default.css 4.6 KB

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