Lungo.theme.default.css 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. /**
  2. * Stylesheet
  3. *
  4. * @namespace LUNGO.Theme
  5. * @class Default
  6. *
  7. * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  8. */
  9. .app {
  10. background: #000000;
  11. }
  12. /* @group <header> & <footer> & <article> */
  13. header {
  14. background-color: #91bd09;
  15. border-top: 1px solid #b7de3f;
  16. border-bottom: 1px solid #758e29;
  17. box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  18. }
  19. footer {
  20. background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1c1c));
  21. border-top: 1px inset #1c1c1c;
  22. }
  23. .title {
  24. color: #ffffff;
  25. text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
  26. }
  27. article {
  28. background-color: #ededed;
  29. }
  30. article .title {
  31. color: #797979;
  32. text-shadow: 0px 1px 0px #fff;
  33. }
  34. /* @end */
  35. /* @group <nav> */
  36. nav a {
  37. color: rgba(255, 255, 255, 0.5);
  38. }
  39. nav a.current, nav a.active {
  40. color: #ffffff;
  41. }
  42. .toolbar a {
  43. color: rgba(255, 255, 255, 0.2);
  44. }
  45. .toolbar a.current, .toolbar a.active {
  46. background: #1c1c1c;
  47. box-shadow: inset 0px 0px 8px #101010;
  48. text-shadow: 0px 1px 4px #000;
  49. }
  50. /* @end */
  51. /* @group <aside> */
  52. aside {
  53. background: #252525;
  54. box-shadow: inset -1px 0 4px rgba(0, 0, 0, 0.2);
  55. }
  56. aside a {
  57. color: #fff;
  58. text-shadow: 0px 1px 0px #000;
  59. border-bottom: 1px inset #101010;
  60. border-top: 1px inset #868686;
  61. }
  62. aside a.current {
  63. background: #1c1c1c;
  64. box-shadow: inset 0px 0px 8px #101010;
  65. border-top: 1px inset #1c1c1c;
  66. }
  67. aside a .icon {
  68. text-shadow: none;
  69. color: #7a7a7a;
  70. }
  71. aside .anchor {
  72. background: #101010;
  73. color: #7a7a7a;
  74. }
  75. /* @end */
  76. /* @group .list */
  77. .list, .list li:not(.toolbar) a {
  78. color: #2a2a2a;
  79. }
  80. .list li {
  81. background: #fff;
  82. border-bottom: 1px inset #e1e1e1;
  83. }
  84. .list li:last-child {
  85. border-bottom: none;
  86. }
  87. .list li.selectable:active {
  88. background: #c1de6a;
  89. color: #5d7b03;
  90. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  91. }
  92. .list li.selectable:active small, .list li.selectable:active .onright:not(.bubble) {
  93. color: #ffffff;
  94. text-shadow: none;
  95. }
  96. .list li small, .list li .onright:not(.bubble) {
  97. color: #888;
  98. }
  99. .list .indented ul {
  100. border: 1px solid #e1e1e1;
  101. }
  102. .list .anchor {
  103. background: #c1de6a;
  104. color: #5d7b03;
  105. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  106. border: none;
  107. }
  108. .list .tip {
  109. color: #7a7a7a;
  110. }
  111. .list .tip.darker {
  112. background-color: #2c2c2d;
  113. color: #fff;
  114. text-shadow: 0px 1px 0px #000;
  115. }
  116. .list .tip.darker a {
  117. color: #fff !important;
  118. }
  119. .list .tip.dark {
  120. background-color: #f4f4f4;
  121. box-shadow: inset 0px 1px 0px #fff;
  122. text-shadow: 0px 1px 0px #fff;
  123. }
  124. .list .toolbar {
  125. border-bottom-color: rgba(0, 0, 0, 0.2);
  126. }
  127. .list .toolbar .toolbar a {
  128. box-shadow: 1px 0px 0px #d9d9d9;
  129. }
  130. .list .toolbar .toolbar a:last-child {
  131. box-shadow: none;
  132. }
  133. .list .toolbar .toolbar a.current {
  134. background: transparent;
  135. color: #333;
  136. text-shadow: none !important;
  137. }
  138. /* @end */
  139. /* @group widgets */
  140. .splash {
  141. background: #91bd09;
  142. color: #fff;
  143. text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
  144. }
  145. /* @group .button */
  146. .button {
  147. border-bottom: 1px inset rgba(0, 0, 0, 0.2);
  148. -webkit-border-radius: 1px;
  149. -moz-border-radius: 1px;
  150. border-radius: 1px;
  151. -webkit-background-clip: padding-box;
  152. -moz-background-clip: padding;
  153. background-clip: padding-box;
  154. -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2);
  155. font-weight: bold;
  156. }
  157. .button:active, .button.active {
  158. -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.2);
  159. border-bottom-color: rgba(0, 0, 0, 0);
  160. }
  161. header .button:active,
  162. footer .button:active,
  163. header .button:active,
  164. footer .button:active {
  165. height: 29px;
  166. position: relative;
  167. top: 1px;
  168. }
  169. .button.default {
  170. background: #5a5a5a;
  171. }
  172. .button.default:active, .button.default.active {
  173. background: #4b4b4b;
  174. }
  175. /* @end */
  176. /* @group <inputs> */
  177. input, textarea, select {
  178. border: 1px solid #e1e1e1;
  179. color: #858585;
  180. font-family: 'Roboto', Helvetica, Arial, sans-serif;
  181. }
  182. input:focus, textarea:focus, select:focus {
  183. border-color: #91bd09;
  184. color: #91bd09;
  185. }
  186. label {
  187. color: #91bd09;
  188. text-transform: uppercase;
  189. font-weight: bold;
  190. }
  191. .select:after {
  192. background: #858585;
  193. color: white;
  194. }
  195. input[type="checkbox"] + span, input[type="radio"] + span {
  196. color: #fff;
  197. background: #a0a0a0;
  198. }
  199. input[type="checkbox"] + span::before, input[type="radio"] + span::before {
  200. background: #c1c1c1;
  201. }
  202. input[type="checkbox"]:checked + span, input[type="radio"]:checked + span {
  203. background: #758e29;
  204. }
  205. /* @end */
  206. .bubble {
  207. color: #fff;
  208. -webkit-border-radius: 2px;
  209. -moz-border-radius: 2px;
  210. border-radius: 2px;
  211. -webkit-background-clip: padding-box;
  212. -moz-background-clip: padding;
  213. background-clip: padding-box;
  214. text-shadow: none;
  215. font-weight: bold !important;
  216. }
  217. header .bubble.count {
  218. background: #2c2c2d;
  219. }
  220. .bubble.count {
  221. background: #91bd09;
  222. }
  223. /* @end */