Lungo.js/example/components/lungo/theme.lungo.css

/**
 * Stylesheet
 *
 * @namespace Lungo.Theme
 * @class Default
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */
/* @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl") */
/* -------------------------- THEME -------------------------- */
/* -------------------------- DEFAULTS -------------------------- */
body {
  background-color: #000;
  color: #333;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3em;
  letter-spacing: -0.05em;
}
body .theme {
  background-color: THEME-light;
}
body .theme:active {
  background-color: #0093d5;
}
/* -------------------------- LAYOUT COLORS -------------------------- */
section {
  background-color: #222;
}
section > header {
  background-color: #0093d5;
  -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
  -moz-box-shadow: 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
  -ms-box-shadow: 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
  -o-box-shadow: 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
  color: #fff;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -ms-border-radius: 4px 4px 0 0;
  -o-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}
section > footer,
section nav.groupbar {
  background-color: #222;
  -webkit-box-shadow: inset 0 3px 0 #1d1d1d;
  -moz-box-shadow: inset 0 3px 0 #1d1d1d;
  -ms-box-shadow: inset 0 3px 0 #1d1d1d;
  -o-box-shadow: inset 0 3px 0 #1d1d1d;
  box-shadow: inset 0 3px 0 #1d1d1d;
}
section > article,
section > [data-control="pull"] {
  background-color: #f4f5f5;
}
section > article.splash,
section > [data-control="pull"].splash {
  background: #222;
  color: #fff;
}
section.aside {
  -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
  -moz-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
  -ms-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
  -o-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
  box-shadow: -1px 0 2px rgba(0,0,0,0.2);
}
section.aside.right {
  -webkit-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
  -ms-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
  -o-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
  box-shadow: 1px 0 2px rgba(0,0,0,0.2);
}
aside {
  background-color: #1d1d1d;
  color: #fff;
}
aside > header,
aside > footer {
  background-color: #181818;
}
aside > header {
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
  -ms-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
  -o-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
}
/* -------------------------- NAVIGATION -------------------------- */
section > header > nav a:not(.button) {
  color: #00608a;
  -webkit-text-shadow: 0 1px 0 #20baff;
  -moz-text-shadow: 0 1px 0 #20baff;
  -ms-text-shadow: 0 1px 0 #20baff;
  -o-text-shadow: 0 1px 0 #20baff;
  text-shadow: 0 1px 0 #20baff;
}
section > header > nav a:not(.button):active {
  color: #004a6b;
}
section > nav.groupbar > a.active {
  -webkit-box-shadow: inset 0 -3px 0 #0093d5;
  -moz-box-shadow: inset 0 -3px 0 #0093d5;
  -ms-box-shadow: inset 0 -3px 0 #0093d5;
  -o-box-shadow: inset 0 -3px 0 #0093d5;
  box-shadow: inset 0 -3px 0 #0093d5;
}
section > footer > nav > a,
nav.groupbar > a {
  color: #888;
}
section > footer > nav > a.active,
nav.groupbar > a.active {
  color: #fff;
}
section > footer > nav > a {
  -webkit-box-shadow: 1px 0 0 #1d1d1d;
  -moz-box-shadow: 1px 0 0 #1d1d1d;
  -ms-box-shadow: 1px 0 0 #1d1d1d;
  -o-box-shadow: 1px 0 0 #1d1d1d;
  box-shadow: 1px 0 0 #1d1d1d;
}
section > footer > nav > a.active {
  color: #fff;
  background-color: #1d1d1d;
  -webkit-box-shadow: inset 0 3px 0 #0093d5;
  -moz-box-shadow: inset 0 3px 0 #0093d5;
  -ms-box-shadow: inset 0 3px 0 #0093d5;
  -o-box-shadow: inset 0 3px 0 #0093d5;
  box-shadow: inset 0 3px 0 #0093d5;
}
aside nav a {
  color: #4e4e4e;
}
aside nav a:active {
  color: #919191;
}
nav[data-control=menu] {
  background: #222;
  -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.15);
  -moz-box-shadow: 0 2px 0 rgba(0,0,0,0.15);
  -ms-box-shadow: 0 2px 0 rgba(0,0,0,0.15);
  -o-box-shadow: 0 2px 0 rgba(0,0,0,0.15);
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
nav[data-control=menu] > a {
  color: #fff;
  -webkit-text-shadow: 0 1px 0 #111;
  -moz-text-shadow: 0 1px 0 #111;
  -ms-text-shadow: 0 1px 0 #111;
  -o-text-shadow: 0 1px 0 #111;
  text-shadow: 0 1px 0 #111;
  font-weight: 700;
  border-bottom: 1px solid #141414;
  border-top: 1px solid #2d2d2d;
}
nav[data-control=menu] > a:active {
  background: #111;
  border-color: transparent;
}
nav[data-control=menu] > a > .icon {
  color: #595959;
}
/* -------------------------- LISTS -------------------------- */
section .list li {
  background: #fff;
}
section .list li:not(.anchor) {
  border-bottom: inset 1px #ebebeb;
}
section .list li.secondary {
  -webkit-box-shadow: inset 4px 0px 0px #bfbfbf;
  -moz-box-shadow: inset 4px 0px 0px #bfbfbf;
  -ms-box-shadow: inset 4px 0px 0px #bfbfbf;
  -o-box-shadow: inset 4px 0px 0px #bfbfbf;
  box-shadow: inset 4px 0px 0px #bfbfbf;
}
section .list li.accept {
  -webkit-box-shadow: inset 4px 0px 0px #3fb58e;
  -moz-box-shadow: inset 4px 0px 0px #3fb58e;
  -ms-box-shadow: inset 4px 0px 0px #3fb58e;
  -o-box-shadow: inset 4px 0px 0px #3fb58e;
  box-shadow: inset 4px 0px 0px #3fb58e;
}
section .list li.cancel {
  -webkit-box-shadow: inset 4px 0px 0px #ee6557;
  -moz-box-shadow: inset 4px 0px 0px #ee6557;
  -ms-box-shadow: inset 4px 0px 0px #ee6557;
  -o-box-shadow: inset 4px 0px 0px #ee6557;
  box-shadow: inset 4px 0px 0px #ee6557;
}
section .list li.arrow::after {
  border-color: #bfbfbf;
}
section .list li,
section .list li a {
  color: #3d3d3d;
}
section .list li.anchor,
section .list li a.anchor {
  background: #222;
}
section .list li.dark,
section .list li a.dark {
  background: #595959;
}
section .list li.selectable:active,
section .list li a.selectable:active,
section .list li.theme,
section .list li a.theme,
section .list li.active,
section .list li a.active {
  background: #03b1ff;
}
section .list li.light,
section .list li a.light {
  background: #ebebeb;
  color: #7a7a7a;
}
section .list li.dark,
section .list li a.dark,
section .list li.selectable:active,
section .list li a.selectable:active,
section .list li.theme,
section .list li a.theme,
section .list li.anchor,
section .list li a.anchor,
section .list li.dark small,
section .list li a.dark small,
section .list li.selectable:active small,
section .list li a.selectable:active small,
section .list li.theme small,
section .list li a.theme small,
section .list li.anchor small,
section .list li a.anchor small,
section .list li.dark .right:not(.tag),
section .list li a.dark .right:not(.tag),
section .list li.selectable:active .right:not(.tag),
section .list li a.selectable:active .right:not(.tag),
section .list li.theme .right:not(.tag),
section .list li a.theme .right:not(.tag),
section .list li.anchor .right:not(.tag),
section .list li a.anchor .right:not(.tag),
section .list li.dark strong,
section .list li a.dark strong,
section .list li.selectable:active strong,
section .list li a.selectable:active strong,
section .list li.theme strong,
section .list li a.theme strong,
section .list li.anchor strong,
section .list li a.anchor strong,
section .list li.dark .arrow::after,
section .list li a.dark .arrow::after,
section .list li.selectable:active .arrow::after,
section .list li a.selectable:active .arrow::after,
section .list li.theme .arrow::after,
section .list li a.theme .arrow::after,
section .list li.anchor .arrow::after,
section .list li a.anchor .arrow::after {
  color: #fff;
}
section .list li.dark.arrow::after,
section .list li a.dark.arrow::after,
section .list li.selectable:active.arrow::after,
section .list li a.selectable:active.arrow::after,
section .list li.theme.arrow::after,
section .list li a.theme.arrow::after,
section .list li.anchor.arrow::after,
section .list li a.anchor.arrow::after {
  border-color: #fff;
}
section .list li small,
section .list li a small,
section .list li .right:not(.tag),
section .list li a .right:not(.tag) {
  color: #7a7a7a;
}
.list:not(.indented) li.dark,
.list:not(.indented) li.theme,
.list:not(.indented) li.light {
  border-bottom-color: rgba(0,0,0,0.1);
}
aside .list li {
  background: none;
}
aside .list li:not(:first-child) {
  border-top: solid 1px #222;
}
aside .list li:not(:last-child) {
  border-bottom: solid 1px #141414;
}
aside .list li:active {
  background: #181818;
}
aside .list li.active {
  background: #0093d5;
}
aside .list li.active,
aside .list li:active {
  border-color: transparent;
}
aside .list li.active strong,
aside .list li:active strong,
aside .list li.active small,
aside .list li:active small,
aside .list li.active .icon,
aside .list li:active .icon {
  color: #fff;
}
aside .list li strong {
  color: #999;
}
aside .list li small,
aside .list li .icon {
  color: #666;
}
/* -------------------------- TAG -------------------------- */
.tag:not(.icon) {
  color: #fff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  font-weight: 700 !important;
}
.tag:not(.icon).count {
  background-color: #0093d5;
}
.tag:not(.icon) header .count {
  background-color: THEME-dark !important;
}
footer .tag:not(.icon) {
  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
  -ms-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
  -o-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
}
[data-control="pull"] {
  -webkit-text-shadow: 0 1px 0 #fff;
  -moz-text-shadow: 0 1px 0 #fff;
  -ms-text-shadow: 0 1px 0 #fff;
  -o-text-shadow: 0 1px 0 #fff;
  text-shadow: 0 1px 0 #fff;
}
/* -------------------------- NOTIFICATION -------------------------- */
.notification {
  color: #fff;
  background-color: rgba(0,0,0,0.75);
}
.notification .window.growl {
  background: rgba(0,0,0,0.8);
}
.notification .window:not(.growl) {
  background: #e6e6e6;
  color: #222;
  -webkit-box-shadow: 0 0 8px #000;
  -moz-box-shadow: 0 0 8px #000;
  -ms-box-shadow: 0 0 8px #000;
  -o-box-shadow: 0 0 8px #000;
  box-shadow: 0 0 8px #000;
}
.notification .window:not(.growl) button,
.notification .window:not(.growl) .button {
  background: #fff !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
  color: #007db5 !important;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  -ms-border-radius: 0px !important;
  -o-border-radius: 0px !important;
  border-radius: 0px !important;
  border: none !important;
  margin-bottom: 1px;
}
.notification .window:not(.growl).error {
  background: #dd2916;
  color: #fff;
}
.notification .window:not(.growl).success {
  background: #2f886b;
  color: #fff;
}
/* -------------------------- BUTTONS -------------------------- */
header .button,
header button {
  background-color: #007db5;
  -webkit-box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
  -moz-box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
  -ms-box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
  -o-box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
  box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
header .button:active,
header button:active {
  background-color: #005880;
}
article .button,
article button {
  -webkit-border-radius: FORM-border-radius;
  -moz-border-radius: FORM-border-radius;
  -ms-border-radius: FORM-border-radius;
  -o-border-radius: FORM-border-radius;
  border-radius: FORM-border-radius;
  color: #fff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  -ms-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  -o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  border: solid 1px rgba(0,0,0,0.1);
}
article .button:active,
article button:active {
  -webkit-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
  -moz-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
  -ms-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
  -o-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
  box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
  border-color: none;
}
article .button.secondary,
article button.secondary {
  color: #666 !important;
}
article .button[disabled],
article button[disabled] {
  background-color: #000;
}
article button,
article .button,
article .tag:not(.icon) {
  background-color: #007db5;
}
article button.secondary,
article .button.secondary,
article .tag:not(.icon).secondary {
  background-color: #bfbfbf;
}
article button.accept,
article .button.accept,
article .tag:not(.icon).accept {
  background-color: #3fb58e;
}
article button.cancel,
article .button.cancel,
article .tag:not(.icon).cancel {
  background-color: #ee6557;
}
/* -------------------------- FORMS -------------------------- */
form label,
.form label {
  color: #aaa;
  font-weight: 300;
}
form fieldset,
.form fieldset {
  background: #fff;
  border-bottom: solid 1px #eee;
}
form fieldset .icon,
.form fieldset .icon {
  color: #ccc;
}
form input[type="text"],
.form input[type="text"],
form input[type="password"],
.form input[type="password"],
form input[type="date"],
.form input[type="date"],
form input[type="datetime"],
.form input[type="datetime"],
form input[type="email"],
.form input[type="email"],
form input[type="number"],
.form input[type="number"],
form input[type="search"],
.form input[type="search"],
form input[type="tel"],
.form input[type="tel"],
form input[type="time"],
.form input[type="time"],
form input[type="url"],
.form input[type="url"],
form select,
.form select,
form textarea,
.form textarea {
  background-color: #fff;
  color: rgba(0,0,0,0.75);
  border: 1px solid #ddd;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -ms-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -o-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
}
form input[type="text"].error,
.form input[type="text"].error,
form input[type="password"].error,
.form input[type="password"].error,
form input[type="date"].error,
.form input[type="date"].error,
form input[type="datetime"].error,
.form input[type="datetime"].error,
form input[type="email"].error,
.form input[type="email"].error,
form input[type="number"].error,
.form input[type="number"].error,
form input[type="search"].error,
.form input[type="search"].error,
form input[type="tel"].error,
.form input[type="tel"].error,
form input[type="time"].error,
.form input[type="time"].error,
form input[type="url"].error,
.form input[type="url"].error,
form select.error,
.form select.error,
form textarea.error,
.form textarea.error,
form input[type="text"]:required,
.form input[type="text"]:required,
form input[type="password"]:required,
.form input[type="password"]:required,
form input[type="date"]:required,
.form input[type="date"]:required,
form input[type="datetime"]:required,
.form input[type="datetime"]:required,
form input[type="email"]:required,
.form input[type="email"]:required,
form input[type="number"]:required,
.form input[type="number"]:required,
form input[type="search"]:required,
.form input[type="search"]:required,
form input[type="tel"]:required,
.form input[type="tel"]:required,
form input[type="time"]:required,
.form input[type="time"]:required,
form input[type="url"]:required,
.form input[type="url"]:required,
form select:required,
.form select:required,
form textarea:required,
.form textarea:required {
  border-color: color_alert;
  color: color_alert;
  background-color: rgba(198,15,19,0.1);
}
form input[type="text"]:focus,
.form input[type="text"]:focus,
form input[type="password"]:focus,
.form input[type="password"]:focus,
form input[type="date"]:focus,
.form input[type="date"]:focus,
form input[type="datetime"]:focus,
.form input[type="datetime"]:focus,
form input[type="email"]:focus,
.form input[type="email"]:focus,
form input[type="number"]:focus,
.form input[type="number"]:focus,
form input[type="search"]:focus,
.form input[type="search"]:focus,
form input[type="tel"]:focus,
.form input[type="tel"]:focus,
form input[type="time"]:focus,
.form input[type="time"]:focus,
form input[type="url"]:focus,
.form input[type="url"]:focus,
form select:focus,
.form select:focus,
form textarea:focus,
.form textarea:focus {
  background: #fafafa;
  border-color: #0093d5;
  color: rgba(0,0,0,0.75);
}
form input[type="text"][disabled],
.form input[type="text"][disabled],
form input[type="password"][disabled],
.form input[type="password"][disabled],
form input[type="date"][disabled],
.form input[type="date"][disabled],
form input[type="datetime"][disabled],
.form input[type="datetime"][disabled],
form input[type="email"][disabled],
.form input[type="email"][disabled],
form input[type="number"][disabled],
.form input[type="number"][disabled],
form input[type="search"][disabled],
.form input[type="search"][disabled],
form input[type="tel"][disabled],
.form input[type="tel"][disabled],
form input[type="time"][disabled],
.form input[type="time"][disabled],
form input[type="url"][disabled],
.form input[type="url"][disabled],
form select[disabled],
.form select[disabled],
form textarea[disabled],
.form textarea[disabled] {
  background: #eee;
  border-color: #aaa;
  color: #999;
}
form .select:after,
.form .select:after {
  background: #d0d4c6;
  color: #fff;
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
}
form input[type=range],
.form input[type=range] {
  -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
  -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
  -ms-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
  -o-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
  box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
}
form input[type=range]:not(.checkbox),
.form input[type=range]:not(.checkbox) {
  background-color: #ddd;
}
form input[type=range]:not(.checkbox):active,
.form input[type=range]:not(.checkbox):active {
  background-color: #03b1ff;
}
form input[type=range].checkbox,
.form input[type=range].checkbox {
  background-color: #aaa;
  color: rgba(255,255,255,0.6);
}
form input[type=range].checkbox.active,
.form input[type=range].checkbox.active {
  color: #fff;
  background-color: #03b1ff;
}
form input[type=range]::-webkit-slider-thumb,
.form input[type=range]::-webkit-slider-thumb {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  background-color: #e7eae2;
  border: solid 1px #d0d4c6;
}
form input[type=range]::-webkit-slider-thumb::after,
.form input[type=range]::-webkit-slider-thumb::after {
  background: #d0d4c6;
}
form .progress .bar,
.form .progress .bar {
  background-color: #ddd;
}
form .progress .bar .value,
.form .progress .bar .value {
  background-color: #03b1ff;
}