/** * Stylesheet * * @namespace Lungo.Theme * @class Default * * @author Javier Jimenez Villar || @soyjavi */ @import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700"); @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); /* COLORS */ body { background: #000; font-family: "Open Sans", "Titillium Web", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 13px; line-height: 1.3em; letter-spacing: -0.05em; } .theme, li.theme, a.theme { background: THEME-light; } .theme:active, li.theme:active, a.theme:active { background: #0093d5; } [data-control="pull"] { color: #666; -webkit-text-shadow: 0 1px 0 #fff; -moz-text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff; } section > header { background-color: #0093d5; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5; box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5; } section > header .title { color: #fff; } section > footer { background-color: THEME-dark; -webkit-box-shadow: inset 0 3px 0 #333; -moz-box-shadow: inset 0 3px 0 #333; box-shadow: inset 0 3px 0 #333; } section > footer > nav a { -webkit-box-shadow: 1px 0 0 #151515; -moz-box-shadow: 1px 0 0 #151515; box-shadow: 1px 0 0 #151515; } section > footer > nav a.current { color: #fff; background: #111; -webkit-box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #0093d5; -moz-box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #0093d5; box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #0093d5; } section > article, section > [data-control="pull"] { background: #f4f5f5; } section.aside { -webkit-box-shadow: -1px 0 0 rgba(0,0,0,0.2); -moz-box-shadow: -1px 0 0 rgba(0,0,0,0.2); box-shadow: -1px 0 0 rgba(0,0,0,0.2); } section.aside.right { -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5); -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5); box-shadow: 4px 0 8px rgba(0,0,0,0.5); } aside { color: #fff; background: #191919; } aside header, aside footer { background: #111; -webkit-text-shadow: none; -moz-text-shadow: none; text-shadow: none; } aside header { -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); } aside article { background: none; } aside nav a.current .icon { color: #fff; } aside nav a:not(.current) .icon { color: #888; } aside .list li { background: none; border-bottom-color: #222 !important; } aside .list li.current { background: #0093d5; border-bottom-color: #0093d5; } aside .list li.current strong, aside .list li.current small, aside .list li.current .icon { color: #fff; } aside .list li strong { color: #999; } aside .list li small, aside .list li .icon { color: #666; } header nav a { color: #fff; } header nav.box:not(.right) a { -webkit-box-shadow: 1px 0 0 #03b1ff, inset -1px 0 0 #007db5; -moz-box-shadow: 1px 0 0 #03b1ff, inset -1px 0 0 #007db5; box-shadow: 1px 0 0 #03b1ff, inset -1px 0 0 #007db5; } header nav.box.right a { -webkit-box-shadow: -1px 0 0 #03b1ff, inset 1px 0 0 #007db5; -moz-box-shadow: -1px 0 0 #03b1ff, inset 1px 0 0 #007db5; box-shadow: -1px 0 0 #03b1ff, inset 1px 0 0 #007db5; } header nav.box a:active { background: rgba(0,0,0,0.1); } section > nav.groupbar { background-color: #222; } section > nav.groupbar > a.current { -webkit-box-shadow: inset 0 -3px 0 #0093d5; -moz-box-shadow: inset 0 -3px 0 #0093d5; box-shadow: inset 0 -3px 0 #0093d5; } footer > nav > a, nav.groupbar > a { color: #888; } footer > nav > a.current, nav.groupbar > a.current { color: #fff; } .list li { background: #fff; border-bottom: inset 1px #e5e5e5; } .list li.secondary { -webkit-box-shadow: inset 4px 0px 0px #ccc; -moz-box-shadow: inset 4px 0px 0px #ccc; box-shadow: inset 4px 0px 0px #ccc; } .list li.accept { -webkit-box-shadow: inset 4px 0px 0px #009600; -moz-box-shadow: inset 4px 0px 0px #009600; box-shadow: inset 4px 0px 0px #009600; } .list li.cancel { -webkit-box-shadow: inset 4px 0px 0px #e33100; -moz-box-shadow: inset 4px 0px 0px #e33100; box-shadow: inset 4px 0px 0px #e33100; } .list li, .list li a { color: #111; } .list li.dark, .list li a.dark { background: #444; } .list li.dark, .list li a.dark, .list li.dark a, .list li a.dark a { color: #fff; } .list li.selectable:active, .list li a.selectable:active, .list li.theme, .list li a.theme { background: #03b1ff; } .list li.selectable:active, .list li a.selectable:active, .list li.theme, .list li a.theme, .list li.selectable:active a, .list li a.selectable:active a, .list li.theme a, .list li a.theme a { color: #fff; } .list li.light, .list li a.light { background: #e5e5e5; -webkit-text-shadow: 0 1px 0 #eee; -moz-text-shadow: 0 1px 0 #eee; text-shadow: 0 1px 0 #eee; } .list li.light, .list li a.light, .list li.light a, .list li a.light a { color: #888; } .list li.anchor, .list li a.anchor { background: #222; border-bottom: none; } .list li.anchor, .list li a.anchor, .list li.anchor a, .list li a.anchor a { color: #fff !important; } .list li small, .list li a small, .list li .right:not(.tag), .list li a .right:not(.tag) { color: #555; } .list:not(.indented) li.dark, .list:not(.indented) li.theme, .list:not(.indented) li.light { border-bottom-color: rgba(0,0,0,0.1); } .splash { background: THEME-dark; color: #fff; -webkit-text-shadow: 0 1px 0px rgba(0,0,0,0.2); -moz-text-shadow: 0 1px 0px rgba(0,0,0,0.2); text-shadow: 0 1px 0px rgba(0,0,0,0.2); } /* ____________________ BUTTONS ____________________ */ a.button, button { -webkit-border-radius: FORM-border-radius; -moz-border-radius: FORM-border-radius; border-radius: FORM-border-radius; color: #fff; -webkit-border-radius: 2px; -moz-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); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); border: solid 1px rgba(0,0,0,0.1); } a.button:active, 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); box-shadow: inset 0 0 128px rgba(0,0,0,0.25); border-color: none; } a.button.secondary, button.secondary { color: #666 !important; } a.button[disabled], button[disabled] { background-color: #000; } button, .button, .tag { background-color: #007db5; } button.secondary, .button.secondary, .tag.secondary { background-color: #ccc; } button.accept, .button.accept, .tag.accept { background-color: #009600; } button.cancel, .button.cancel, .tag.cancel { background-color: #e33100; } form label, .form label { color: #999; } 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); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -webkit-border-radius: 0px; -moz-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)'; box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)'; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } form input[type=range]:not(.checkbox), .form input[type=range]:not(.checkbox) { background-color: #c7c7c7; } 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 { background-color: #03b1ff; } form input[type=range]::-webkit-slider-thumb, .form input[type=range]::-webkit-slider-thumb { -webkit-border-radius: FORM-border-radius; -moz-border-radius: FORM-border-radius; border-radius: FORM-border-radius; background: #fff; } form input[type=range]::-webkit-slider-thumb::after, .form input[type=range]::-webkit-slider-thumb::after { background: #ddd; } form .progress .labels, .form .progress .labels { font-size: 12px; line-height: 18px; color: #858585; } form .progress .bar, .form .progress .bar { background: #c7c7c7; } form .progress .bar .value, .form .progress .bar .value { background-color: THEME-light; } form .progress .bar .value .label, .form .progress .bar .value .label { float: right; margin-right: 3px; color: rgba(0,0,0,0.6); -webkit-text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important; -moz-text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important; font-size: 12px; } .tag { color: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-weight: 400 !important; } .tag.count { background: #0093d5; } .tag header .count { background: THEME-dark !important; } footer .tag { -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); box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5); } article .list .tag { -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3); -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3); box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3); } .notification { color: #fff; } .notification .window.confirm { background: #333; } .notification .window.notify { -webkit-text-shadow: 0 1px 0px rgba(0,0,0,0.1); -moz-text-shadow: 0 1px 0px rgba(0,0,0,0.1); text-shadow: 0 1px 0px rgba(0,0,0,0.1); } .notification .window.notify .box-shadow( inset 0 1px 0 rgba(255, .notification .window.notify 255, .notification .window.notify 255, .notification .window.notify 0.2), .notification .window.notify inset 0-1px0rgba(0, .notification .window.notify 0, .notification .window.notify 0, .notification .window.notify 0.2), .notification .window.notify 0px1px2pxrgba(0, .notification .window.notify 0, .notification .window.notify 0, .notification .window.notify 0.25) ), .notification .window.notify.error { background: NOTIFICATION-error; } .notification .window.notify.alert { background: NOTIFICATION-alert; } .notification .window.notify.success { background: NOTIFICATION-success; } .notification .window.url .close { background: #000; border: solid 2px #fff; -webkit-box-shadow: 0 0 4px #000; -moz-box-shadow: 0 0 4px #000; box-shadow: 0 0 4px #000; }