|
@@ -1,203 +1,166 @@
|
|
|
/**
|
|
/**
|
|
|
- *
|
|
|
|
|
- * /$$
|
|
|
|
|
- * | $$
|
|
|
|
|
- * | $$ /$$ /$$ /$$$$$$$ /$$$$$$ /$$$$$$
|
|
|
|
|
- * | $$ | $$ | $$| $$__ $$ /$$__ $$ /$$__ $$
|
|
|
|
|
- * | $$ | $$ | $$| $$ \ $$| $$ \ $$| $$ \ $$
|
|
|
|
|
- * | $$ | $$ | $$| $$ | $$| $$ | $$| $$ | $$
|
|
|
|
|
- * | $$$$$$$$| $$$$$$/| $$ | $$| $$$$$$$| $$$$$$/
|
|
|
|
|
- * |________/ \______/ |__/ |__/ \____ $$ \______/
|
|
|
|
|
- * /$$ \ $$
|
|
|
|
|
- * | $$$$$$/
|
|
|
|
|
- * \______/
|
|
|
|
|
- *
|
|
|
|
|
- * @copyright 2011 TapQuo Inc (c)
|
|
|
|
|
- * @license http://www.github.com/tapquo/lungo/blob/master/LICENSE.txt
|
|
|
|
|
- * @version 1.0.3
|
|
|
|
|
- * @link https://github.com/TapQuo/Lungo.js
|
|
|
|
|
- *
|
|
|
|
|
* Stylesheet
|
|
* Stylesheet
|
|
|
*
|
|
*
|
|
|
* @namespace LUNGO.Theme
|
|
* @namespace LUNGO.Theme
|
|
|
* @class Default
|
|
* @class Default
|
|
|
*
|
|
*
|
|
|
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
|
|
|
|
|
|
|
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
|
|
|
*/
|
|
*/
|
|
|
|
|
|
|
|
-/* @group layout */
|
|
|
|
|
.app {
|
|
.app {
|
|
|
- font-size: 13px;
|
|
|
|
|
- background: #000;
|
|
|
|
|
|
|
+ background: #000000;
|
|
|
}
|
|
}
|
|
|
-article {
|
|
|
|
|
- background: #fff;
|
|
|
|
|
-}
|
|
|
|
|
-/* @group <header> & <footer> */
|
|
|
|
|
|
|
+/* @group <header> & <footer> & <article> */
|
|
|
header {
|
|
header {
|
|
|
background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
|
|
background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
|
|
|
- -webkit-border-radius: 6px 6px 0 0;
|
|
|
|
|
- -moz-border-radius: 6px 6px 0 0;
|
|
|
|
|
- border-radius: 6px 6px 0 0;
|
|
|
|
|
- -webkit-background-clip: padding-box;
|
|
|
|
|
- -moz-background-clip: padding;
|
|
|
|
|
- background-clip: padding-box;
|
|
|
|
|
- -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), inset 0px -1px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
|
+ border-top: 1px solid #6dc0a1;
|
|
|
|
|
+ border-bottom: 1px solid #063322;
|
|
|
}
|
|
}
|
|
|
footer {
|
|
footer {
|
|
|
background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d));
|
|
background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d));
|
|
|
- -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.5), 0px -1px 2px rgba(0, 0, 0, 0.4);
|
|
|
|
|
|
|
+ border-top: 1px inset #1c1c1c;
|
|
|
}
|
|
}
|
|
|
.title {
|
|
.title {
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
- text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0px;
|
|
|
|
|
|
|
+ text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
|
|
|
|
|
+}
|
|
|
|
|
+article {
|
|
|
|
|
+ background-color: #e2e2e2;
|
|
|
|
|
+}
|
|
|
|
|
+article .title {
|
|
|
|
|
+ color: #797979;
|
|
|
|
|
+ text-shadow: 0px 1px 0px #fff;
|
|
|
}
|
|
}
|
|
|
/* @end */
|
|
/* @end */
|
|
|
/* @group <nav> */
|
|
/* @group <nav> */
|
|
|
nav a {
|
|
nav a {
|
|
|
color: rgba(0, 0, 0, 0.5);
|
|
color: rgba(0, 0, 0, 0.5);
|
|
|
- text-shadow: rgba(255, 255, 255, 0.35) 0 1px 1px;
|
|
|
|
|
-}
|
|
|
|
|
-header:not(.toolbar) nav a, footer:not(.toolbar) nav a {
|
|
|
|
|
- line-height: 38px;
|
|
|
|
|
}
|
|
}
|
|
|
nav a.current {
|
|
nav a.current {
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
- text-shadow: 0px 1px 0px #000 !important;
|
|
|
|
|
}
|
|
}
|
|
|
.toolbar a.current {
|
|
.toolbar a.current {
|
|
|
- background: rgba(255, 255, 255, 0.15);
|
|
|
|
|
|
|
+ background: #1c1c1c;
|
|
|
|
|
+ box-shadow: inset 0px 0px 8px #101010;
|
|
|
|
|
+ text-shadow: 0px 1px 4px #000;
|
|
|
}
|
|
}
|
|
|
/* @end */
|
|
/* @end */
|
|
|
/* @group <aside> */
|
|
/* @group <aside> */
|
|
|
aside {
|
|
aside {
|
|
|
background: #252525;
|
|
background: #252525;
|
|
|
- -webkit-box-shadow: inset -1px 0px 0px #000000, inset -4px 0px 8px rgba(0, 0, 0, 0.5);
|
|
|
|
|
}
|
|
}
|
|
|
aside a {
|
|
aside a {
|
|
|
- color: #fff !important;
|
|
|
|
|
- text-shadow: 0px 1px 0px #000 !important;
|
|
|
|
|
- border-bottom: 1px inset rgba(0, 0, 0, 0.3);
|
|
|
|
|
- border-top: 1px inset rgba(255, 255, 255, 0.1);
|
|
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ text-shadow: 0px 1px 0px #000;
|
|
|
|
|
+ border-bottom: 1px inset #101010;
|
|
|
|
|
+ border-top: 1px inset #868686;
|
|
|
}
|
|
}
|
|
|
aside a.current {
|
|
aside a.current {
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
|
|
|
|
+ background: #1c1c1c;
|
|
|
|
|
+ box-shadow: inset 0px 0px 8px #101010;
|
|
|
|
|
+ border-top: 1px inset #1c1c1c;
|
|
|
}
|
|
}
|
|
|
aside a .icon {
|
|
aside a .icon {
|
|
|
- opacity: 0.5;
|
|
|
|
|
|
|
+ text-shadow: none;
|
|
|
|
|
+ color: #7a7a7a;
|
|
|
|
|
+}
|
|
|
|
|
+aside .anchor {
|
|
|
|
|
+ background: #101010;
|
|
|
|
|
+ color: #7a7a7a;
|
|
|
|
|
+}
|
|
|
|
|
+aside ~ article {
|
|
|
|
|
+ box-shadow: -1px 0px 4px #000000;
|
|
|
}
|
|
}
|
|
|
/* @end */
|
|
/* @end */
|
|
|
/* @group .list */
|
|
/* @group .list */
|
|
|
-.list {
|
|
|
|
|
- background: #c5c5c5;
|
|
|
|
|
|
|
+.list, .list li:not(.toolbar) a {
|
|
|
|
|
+ color: #333;
|
|
|
}
|
|
}
|
|
|
-.list li:not(.info) {
|
|
|
|
|
|
|
+.list li {
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
- border-bottom: 1px inset #c3c4c6;
|
|
|
|
|
- color: #333;
|
|
|
|
|
|
|
+ border-bottom: 1px inset #e6e6e6;
|
|
|
}
|
|
}
|
|
|
-.list li.toolbar {
|
|
|
|
|
- border-bottom-color: rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
|
+.list li:last-child {
|
|
|
|
|
+ border-bottom: none;
|
|
|
}
|
|
}
|
|
|
-.list li:not(.toolbar) a {
|
|
|
|
|
- color: #333;
|
|
|
|
|
- text-shadow: #fff 0px 1px 1px;
|
|
|
|
|
- -webkit-tap-highlight-color: #242525;
|
|
|
|
|
|
|
+.indented ul {
|
|
|
|
|
+ border: 1px solid #c5c5c5;
|
|
|
}
|
|
}
|
|
|
-.list strong {
|
|
|
|
|
- color: #2343be;
|
|
|
|
|
|
|
+.list .darker {
|
|
|
|
|
+ background-color: #2c2c2d;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ text-shadow: 0px 1px 0px #000;
|
|
|
}
|
|
}
|
|
|
-.list small {
|
|
|
|
|
- opacity: 0.75;
|
|
|
|
|
|
|
+.list li.darker a {
|
|
|
|
|
+ color: #fff !important;
|
|
|
}
|
|
}
|
|
|
-.list .bubble {
|
|
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
|
|
- -webkit-border-radius: 2px;
|
|
|
|
|
- -moz-border-radius: 2px;
|
|
|
|
|
- border-radius: 2px;
|
|
|
|
|
- -webkit-background-clip: padding-box;
|
|
|
|
|
- -moz-background-clip: padding;
|
|
|
|
|
- background-clip: padding-box;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
|
+.list .dark {
|
|
|
|
|
+ background-color: #f4f4f4;
|
|
|
|
|
+ box-shadow: inset 0px 1px 0px #fff;
|
|
|
|
|
+ text-shadow: 0px 1px 0px #fff;
|
|
|
}
|
|
}
|
|
|
-.list .button {
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
|
+.list small, .list .onright:not(.bubble) {
|
|
|
|
|
+ color: #999;
|
|
|
}
|
|
}
|
|
|
-.list .arrow:before {
|
|
|
|
|
- color: #a9a9a9;
|
|
|
|
|
|
|
+.list .tip {
|
|
|
|
|
+ color: #7a7a7a;
|
|
|
}
|
|
}
|
|
|
-/* @group .anchor */
|
|
|
|
|
.list li.anchor {
|
|
.list li.anchor {
|
|
|
background: #f4f4f4;
|
|
background: #f4f4f4;
|
|
|
color: #222;
|
|
color: #222;
|
|
|
}
|
|
}
|
|
|
-/* @end */
|
|
|
|
|
-/* @group .anchor */
|
|
|
|
|
-.list li.search {
|
|
|
|
|
- border: none;
|
|
|
|
|
- -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.25);
|
|
|
|
|
|
|
+.list .toolbar {
|
|
|
|
|
+ border-bottom-color: rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
}
|
|
|
-/* @end */
|
|
|
|
|
-/* @group .info */
|
|
|
|
|
-.list li.info {
|
|
|
|
|
- border: none;
|
|
|
|
|
- -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.25);
|
|
|
|
|
- background: #cbcbcb;
|
|
|
|
|
|
|
+.list .arrow:before {
|
|
|
|
|
+ color: #a9a9a9;
|
|
|
}
|
|
}
|
|
|
-.list .info strong {
|
|
|
|
|
- color: #333;
|
|
|
|
|
|
|
+.list .toolbar a {
|
|
|
|
|
+ box-shadow: 1px 0px 0px #d9d9d9;
|
|
|
}
|
|
}
|
|
|
-.list .info.contrast strong {
|
|
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+.list .toolbar a:last-child {
|
|
|
|
|
+ box-shadow: none;
|
|
|
}
|
|
}
|
|
|
-/* @end */
|
|
|
|
|
-/* @end */
|
|
|
|
|
-.list .contrast {
|
|
|
|
|
- background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
|
|
|
|
|
- text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
|
|
|
|
|
- color: #fff;
|
|
|
|
|
-}
|
|
|
|
|
-.list .highlight {
|
|
|
|
|
- background: #499dc4 -webkit-gradient(linear, left top, left bottom, color-stop(0, #499dc4), color-stop(1, #0e8eb6)) !important;
|
|
|
|
|
|
|
+.list .toolbar a.current {
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ text-shadow: none !important;
|
|
|
}
|
|
}
|
|
|
/* @end */
|
|
/* @end */
|
|
|
/* @group widgets */
|
|
/* @group widgets */
|
|
|
-/* @group <section>.splash */
|
|
|
|
|
-.splash article {
|
|
|
|
|
- background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
|
|
|
|
|
|
|
+.splash {
|
|
|
|
|
+ background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
- text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
|
|
|
|
|
|
|
+ text-shadow: 0px 1px 1px #000;
|
|
|
}
|
|
}
|
|
|
-/* @end */
|
|
|
|
|
/* @group <inputs> */
|
|
/* @group <inputs> */
|
|
|
input, textarea, select {
|
|
input, textarea, select {
|
|
|
- border: 1px solid #ccc;
|
|
|
|
|
|
|
+ border: 1px solid #c5c5c5;
|
|
|
|
|
+ background: #ffffff -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(0.25, #ffffff));
|
|
|
|
|
+}
|
|
|
|
|
+.rounded input, textarea, select {
|
|
|
-webkit-border-radius: 2px;
|
|
-webkit-border-radius: 2px;
|
|
|
- -moz-border-radius: 2px;
|
|
|
|
|
border-radius: 2px;
|
|
border-radius: 2px;
|
|
|
-webkit-background-clip: padding-box;
|
|
-webkit-background-clip: padding-box;
|
|
|
- -moz-background-clip: padding;
|
|
|
|
|
background-clip: padding-box;
|
|
background-clip: padding-box;
|
|
|
- background: #ffffff -webkit-gradient(linear, left top, left bottom, color-stop(0, #dddddd), color-stop(0.15, #ffffff));
|
|
|
|
|
}
|
|
}
|
|
|
input:focus, textarea:focus, select:focus {
|
|
input:focus, textarea:focus, select:focus {
|
|
|
border: 1px solid #058cf5;
|
|
border: 1px solid #058cf5;
|
|
|
- -webkit-box-shadow: 0 0 4px 1px #058cf5;
|
|
|
|
|
- -moz-box-shadow: 0 0 4px 1px #058cf5;
|
|
|
|
|
- box-shadow: 0 0 4px 1px #058cf5;
|
|
|
|
|
|
|
+ -webkit-box-shadow: 0px 0px 4px 0px #058cf5;
|
|
|
|
|
+ box-shadow: 0px 0px 4px 0px #058cf5;
|
|
|
background: #e8fefe;
|
|
background: #e8fefe;
|
|
|
}
|
|
}
|
|
|
.select:after {
|
|
.select:after {
|
|
|
background: #ccc;
|
|
background: #ccc;
|
|
|
color: white;
|
|
color: white;
|
|
|
- -webkit-border-radius: 0 2px 2px 0;
|
|
|
|
|
- -moz-border-radius: 0 2px 2px 0;
|
|
|
|
|
- border-radius: 0 2px 2px 0;
|
|
|
|
|
- -webkit-background-clip: padding-box;
|
|
|
|
|
- -moz-background-clip: padding;
|
|
|
|
|
- background-clip: padding-box;
|
|
|
|
|
}
|
|
}
|
|
|
/* @end */
|
|
/* @end */
|
|
|
|
|
+.bubble {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ text-shadow: none;
|
|
|
|
|
+ box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.7);
|
|
|
|
|
+}
|
|
|
|
|
+.bubble.count {
|
|
|
|
|
+ background: #e33100;
|
|
|
|
|
+}
|
|
|
/* @end */
|
|
/* @end */
|