/** * Stylesheet * * @namespace Lungo.Theme * @class Default * * @author Javier Jimenez Villar || @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, section .list li a { color: LIST_color; } 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) { 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; } .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; }