|
|
@@ -1,325 +0,0 @@
|
|
|
-/**
|
|
|
- * Stylesheet
|
|
|
- *
|
|
|
- * @namespace Lungo.Theme
|
|
|
- * @class Default
|
|
|
- *
|
|
|
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
|
|
|
- */
|
|
|
-
|
|
|
-@import "constants.less";
|
|
|
-@import "mixins.less";
|
|
|
-
|
|
|
-@theme: #999;
|
|
|
- @theme-light: #ccc;
|
|
|
- @theme-dark: #333;
|
|
|
-
|
|
|
- @theme-highlight: #93d6e7;
|
|
|
- @theme-highlight-color: #1b6777;
|
|
|
- @theme-highlight-text-shadow: 0 1px 0 rgba(255,255,255,0.2);
|
|
|
-
|
|
|
-@color-border: #2566a4;
|
|
|
- @color-border-light: #64b9e2;
|
|
|
-
|
|
|
-@color-main: #2c8bca;
|
|
|
- @color-main-dark: #154f93;
|
|
|
-
|
|
|
-@color-secondary: #353b42;
|
|
|
- @color-secondary-dark: #272a2d;
|
|
|
-
|
|
|
-@background-secondary: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(100%, #272a2d));
|
|
|
-
|
|
|
-.app {
|
|
|
- background: @black;
|
|
|
- font-family: Helvetica, Arial, sans-serif;
|
|
|
-}
|
|
|
-
|
|
|
-/* @group <header> & <footer> & <article> */
|
|
|
-section > header {
|
|
|
- background: @theme;
|
|
|
- .box-shadow(~"inset 0 1px 0 "@theme-light~", inset 0 -1px 0 "@theme-dark);
|
|
|
- z-index: 2;
|
|
|
- & .title , .subtitle { color: @white; }
|
|
|
-}
|
|
|
-
|
|
|
-section > footer {
|
|
|
- background: @theme-dark;
|
|
|
- border-top: 1px inset @black;
|
|
|
- color: @white; }
|
|
|
-
|
|
|
-article {
|
|
|
- background: @theme-light; }
|
|
|
-/* @end */
|
|
|
-
|
|
|
-/* @group <nav> */
|
|
|
-header nav {
|
|
|
- & a { color: @white; }
|
|
|
-
|
|
|
- &:not(.plain) {
|
|
|
- & a {
|
|
|
- .box-shadow(~"1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2)");
|
|
|
- &.accept { background: rgba(0, 255, 0, 0.4); }
|
|
|
- &.cancel { background: rgba(255, 0, 0, 0.4); }
|
|
|
-
|
|
|
- &:active {
|
|
|
- &.accept { background: rgba(0, 255, 0, 0.2); }
|
|
|
- &.cancel { background: rgba(255, 0, 0, 0.2); }
|
|
|
- &:not(.accept):not(.cancel) { background: rgba(0,0,0,0.25); }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.right a {
|
|
|
- .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)");
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
|
|
|
-}
|
|
|
-
|
|
|
-footer nav {
|
|
|
- & a {
|
|
|
- color: @theme-light;
|
|
|
-
|
|
|
- &.current, &.active {
|
|
|
- color: @white;
|
|
|
- background: @black;
|
|
|
- .box-shadow(~"-1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)"); }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.groupbar {
|
|
|
- background: @theme-dark;
|
|
|
- & a {
|
|
|
- color: @theme;
|
|
|
- &.current {
|
|
|
- color: @white;
|
|
|
- .box-shadow(inset 0 -3px 0 @white); }
|
|
|
- }
|
|
|
-}
|
|
|
-/* @end */
|
|
|
-
|
|
|
-/* @group <aside> */
|
|
|
-aside {
|
|
|
- color: #fff;
|
|
|
- background: #333;
|
|
|
-
|
|
|
- & header, footer {
|
|
|
- .box-shadow(~"inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1)");
|
|
|
- background: #272727; }
|
|
|
-
|
|
|
- & article {
|
|
|
- background: none; }
|
|
|
-
|
|
|
- & .list {
|
|
|
- & ul {
|
|
|
- background: none; }
|
|
|
-
|
|
|
- & li {
|
|
|
- color: #F0F0F0;
|
|
|
- border-bottom: 1px solid #2f2f2f;
|
|
|
- &.current { background: @theme-light; }
|
|
|
- & strong {
|
|
|
- text-shadow: 0 1px 1px black;
|
|
|
- color: @white; }
|
|
|
- & small { color: rgba(255,255,255,0.3); }
|
|
|
- }
|
|
|
- }
|
|
|
- & a { color: @theme; }
|
|
|
-
|
|
|
- & a.current {
|
|
|
- background: @theme-light;
|
|
|
- color: @white; }
|
|
|
-}
|
|
|
-
|
|
|
-section.aside {
|
|
|
- .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
|
|
|
- &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
|
|
|
-}
|
|
|
-
|
|
|
-@media handheld, only screen and (min-width: 768px) {
|
|
|
- section.current, section.show {
|
|
|
- .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
|
|
|
- &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
|
|
|
- }
|
|
|
-}
|
|
|
-/* @end */
|
|
|
-
|
|
|
-/* @group .list */
|
|
|
-.list, .list li a { color: #2a2a2a; }
|
|
|
-
|
|
|
-section .list {
|
|
|
- & ul, & li { background: #fff; }
|
|
|
- & li {
|
|
|
- border-bottom: 1px inset @theme-light;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.list {
|
|
|
- & li {
|
|
|
- &:last-child { border-bottom: none; }
|
|
|
-
|
|
|
- &.selectable:active {
|
|
|
- background: @theme-light;
|
|
|
- color: @theme-dark;
|
|
|
-
|
|
|
- & small, & .right:not(.bubble), & strong {
|
|
|
- color: @white;
|
|
|
- text-shadow: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- & small, & .right:not(.bubble) {
|
|
|
- color: @theme;
|
|
|
- }
|
|
|
-
|
|
|
- & strong {
|
|
|
- color: @theme-dark;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- & .anchor {
|
|
|
- color: @theme-dark;
|
|
|
- background: @theme-light;
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
-
|
|
|
- & .contrast {
|
|
|
- background: @theme-dark;
|
|
|
- color: @theme-light;
|
|
|
- }
|
|
|
-}
|
|
|
-/* @end */
|
|
|
-
|
|
|
-/* @group widgets */
|
|
|
-.splash {
|
|
|
- background: @theme-dark;
|
|
|
- color: #fff;
|
|
|
- text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
|
|
|
-}
|
|
|
-
|
|
|
-&.indented {
|
|
|
- & ul {
|
|
|
- border: 1px solid @theme;
|
|
|
- .box-shadow(0 1px 1px rgba(0,0,0,0.05));
|
|
|
- }
|
|
|
- & li {
|
|
|
- &:first-child {
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-/* @group .button */
|
|
|
-.button {
|
|
|
- color: @white;
|
|
|
- font-weight: bold;
|
|
|
- &:active { }
|
|
|
-
|
|
|
- &.default {
|
|
|
- background: @theme;
|
|
|
- &:active, &.active { background: @theme-dark;}
|
|
|
- }
|
|
|
-}
|
|
|
-/* @end */
|
|
|
-
|
|
|
-/* @group <form> */
|
|
|
-form {
|
|
|
- & label {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
-}
|
|
|
-input:not([type=checkbox]), textarea, select {
|
|
|
- border: 1px solid #ccc;
|
|
|
- color: @theme-dark;
|
|
|
- border-radius: 0px;
|
|
|
- font-family: Helvetica, Arial, sans-serif;
|
|
|
-
|
|
|
- &:focus {
|
|
|
- background: @theme-light;
|
|
|
- border-color: @theme-dark;
|
|
|
- }
|
|
|
-
|
|
|
- &.rounded {
|
|
|
- border-top: none;
|
|
|
- &:last-of-type { border-bottom: none; }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.select:after {
|
|
|
- background: #ccc;
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-/* @group .range */
|
|
|
-input[type="checkbox"] + span, input[type="radio"] + span {
|
|
|
- color: #fff;
|
|
|
- background: @theme;
|
|
|
-}
|
|
|
- input[type="checkbox"] + span::before,
|
|
|
- input[type="radio"] + span::before {
|
|
|
- background: @theme-light;
|
|
|
- }
|
|
|
-
|
|
|
- input[type="checkbox"]:checked + span,
|
|
|
- input[type="radio"]:checked + span {
|
|
|
- background: @theme-dark;
|
|
|
- }
|
|
|
-/* @end */
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-/* @group range */
|
|
|
-input[type="range"] {
|
|
|
- background-color: @theme-light;
|
|
|
-
|
|
|
- &:active {
|
|
|
- background: @theme;
|
|
|
- }
|
|
|
- &::-webkit-slider-thumb {
|
|
|
- background: @theme;
|
|
|
- }
|
|
|
- &:active::-webkit-slider-thumb {
|
|
|
- background: @theme-dark;
|
|
|
- }
|
|
|
-}
|
|
|
-/* @end */
|
|
|
-
|
|
|
-/* @group .progress */
|
|
|
-.progress {
|
|
|
- .labels {
|
|
|
- font-weight: bold;
|
|
|
- color: @theme;
|
|
|
- }
|
|
|
-
|
|
|
- & .bar {
|
|
|
- background: @theme-light;
|
|
|
- & .value {
|
|
|
- background: @theme-dark;
|
|
|
- & .label {
|
|
|
- font-weight: bold;
|
|
|
- color: @white;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-/* @end */
|
|
|
-
|
|
|
-
|
|
|
-/* @end */
|
|
|
-.bubble {
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- &.count { background: @theme; }
|
|
|
-}
|
|
|
- header .bubble.count { background: @theme-dark; }
|
|
|
-
|
|
|
- article .list .bubble {
|
|
|
- .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)');
|
|
|
- }
|
|
|
-
|
|
|
- aside .list .bubble { background: rgba(0,0,0,0.25); }
|
|
|
-
|
|
|
-/* @end */
|