[ADD] theme saas-12

2021-05-11 16:11:13 +02:00
commit 656443f9d0
3593 changed files with 101105 additions and 0 deletions
@@ -0,0 +1,26 @@
+odoo.define('theme_treehouse.animation', function (require) {
+    'use strict';
+
+    var base = require('web_editor.base');
+
+    base.ready().then(function () {
+        // Back to Top
+        $('#copyright .top').click(function () {
+            $('html').animate({scrollTop : 0}, 800);
+            return false;
+        });
+
+        // Dropdown SHOW
+        $('.dropdown, .btn-group').on('show.bs.dropdown', function (e) {
+            $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
+        });
+
+        //  Dropdown HIDE
+        $('.dropdown, .btn-group').on('hide.bs.dropdown', function (e) {
+            e.preventDefault();
+            $(this).find('.dropdown-menu').first().stop(true, true).slideUp('', function () {
+                $(this).parent().removeClass('open');
+            });
+        });
+    });
+});
@@ -0,0 +1,42 @@
+
+// Scheme 01
+@color-01-alpha: #A3CC52;
+@color-01-beta: #CC4452;
+@color-01-gamma: #8e3557;
+@color-01-delta: #4a1a2c;
+@color-01-epsilon: #F7F2B2;
+
+// Scheme 02
+@color-02-alpha: darken(#F0C755, 5%);
+@color-02-beta: #E2AD3B;
+@color-02-gamma: #BF5C00;
+@color-02-delta: #901811;
+@color-02-epsilon: #77C4D3;
+
+// Scheme 03
+@color-03-alpha: #0092B2;
+@color-03-beta: #046380;
+@color-03-gamma: #A8C545;
+@color-03-delta: #ffd55c;
+@color-03-epsilon: #FFF6C5;
+
+// Scheme 04
+@color-04-alpha: darken(#79BD8F, 5%);
+@color-04-beta: #00A388;
+@color-04-gamma: #046380;
+@color-04-delta: #4BB5C1;
+@color-04-epsilon: #BEEB9F;
+
+// Scheme 05
+@color-05-alpha: #DD7E43;
+@color-05-beta: lighten(#CF4A30, 5%);
+@color-05-gamma: #911146;
+@color-05-delta: #306E73;
+@color-05-epsilon: #9CC264;
+
+// Scheme 06
+@color-06-alpha: #B7CA79;
+@color-06-beta: #677E52;
+@color-06-gamma: #B0CC99;
+@color-06-delta: #F6E8B1;
+@color-06-epsilon: #89725B;
@@ -0,0 +1,314 @@
+@shadow: none;
+@opacity: 1;
+@border-radius-small: 2px;
+@border-radius-base: 6px;
+@border-radius-large: 20px;
+@border-radius-circle: 50%;
+@body-bg: rgba(0, 0, 0, 0);
+
+// Customize Modal
+#theme_customize_modal {
+    &.modal.fade:not(.in) .modal-dialog {
+        .translate3d(50%, 0, 0);
+    }
+    .modal-dialog {
+        top: 0;
+        right: 0;
+        height: 100%;
+        text-transform: inherit;
+        .modal-content {
+            height: 100%;
+            border-radius: 0;
+            border: 0;
+            width: 480px;
+            background-color: #000;
+        }
+    }
+    .modal-header {
+        background-color: #000;
+        color: #fff;
+        padding: 10px 20px;
+        border: 0;
+    }
+    .modal-header {
+        .modal-title {
+            line-height: 1.2;
+            font-family: "Roboto", sans-serif;
+            font-size: 34px;
+        }
+        .close {
+            width: 30px;
+            height: 30px;
+            margin: 5px 0 0;
+            background-color: #fff;
+            color: @gray-darker;
+            text-shadow: @shadow;
+            opacity: 0.5;
+            border-radius: 50%;
+            font-size: 18px;
+            &:hover {
+                opacity: 1;
+                background-color: @brand-danger;
+                color: #000;
+            }
+        }
+    }
+    .panel-group .panel-heading+.panel-collapse > .panel-body {
+        border-top-color: #fff;
+    }
+    .panel {
+        border: 0;
+        box-shadow: @shadow;
+        font-family: "Roboto", sans-serif;
+    }
+    .panel-group {
+        margin-bottom: 0;
+    }
+    .panel-group .panel + .panel {
+        margin-top: 0;
+    }
+    .panel-heading {
+        padding: 0;
+        margin-bottom: 1px;
+        a {
+            display: block;
+            padding: 10px 20px;
+            background-color: @brand-success;
+            color: #fff;
+            font-size: 14px;
+            text-decoration: none;
+            text-transform: uppercase;
+            .fa {
+                width: 30px;
+                height: 30px;
+                line-height: 30px;
+                margin: 0 10px 0 0;
+                background-color: #fff;
+                color: @brand-success;
+                text-align: center;
+                border-radius: 50%;
+                font-size: 13px;
+            }
+            &.collapsed {
+                background-color: #eee;
+                color: #000;
+                .fa {
+                    color: #000;
+                }
+            }
+            &.collapsed:hover {
+                background-color: @brand-primary;
+                color: #fff;
+                .fa {
+                    background-color: #fff;
+                    color: @brand-primary;
+                }
+            }
+        }
+    }
+    .modal-body {
+        padding: 0;
+    }
+    #treehouse_fonts .panel-body {
+        span {
+            font-size: 18px;
+            line-height: 22px;
+        }
+        .icon:before {
+            margin-bottom: 20px;
+        }
+        .customize_abel {
+            font-family: "Abel";
+        }
+        .customize_lato {
+            font-family: "Lato";
+        }
+        .customize_karla {
+            font-family: "Karla";
+        }
+        .customize_laila {
+            font-family: "Laila";
+        }
+        .customize_dosis {
+            font-family: "Dosis";
+        }
+        .customize_raleway {
+            font-family: "Raleway";
+        }
+    }
+    .panel-group .panel {
+        border-radius: 0;
+    }
+    .panel-body {
+        h5 {
+            font-family: "Roboto", sans-serif;
+            font-size: 14px;
+        }
+        padding: 20px 26px;
+        border-bottom: 1px solid #000;
+        .icon {
+            text-align: left;
+            clear: both;
+            font-weight: normal;
+            font-size: 14px;
+        }
+        .icon:before {
+            content: "\f111";
+            font-family: "FontAwesome";
+            font-size: 18px;
+            margin-right: 8px;
+            margin-bottom: 10px;
+            color: #ccc;
+            float: left;
+        }
+        .icon:hover {
+            color: @gray-darker;
+            cursor: pointer;
+        }
+        .icon:hover:before {
+            content: "\f058";
+            font-family: "FontAwesome";
+            color: #000;
+        }
+        .icon.checked:before {
+            content: "\f058";
+            font-family: "FontAwesome";
+            color: @brand-success;
+        }
+        .icon span {
+            float: left;
+            width: 30px;
+            height: 30px;
+        }
+        .none {
+            background-image: url("/theme_treehouse/static/src/img/customize/customize_none.gif");
+            background-position: center;
+            border: 1px solid #000;
+        }
+        /* 01 */
+        .color-01-alpha { background-color: @color-01-alpha; }
+        .color-01-beta { background-color: @color-01-beta; }
+        .color-01-gamma { background-color: @color-01-gamma; }
+        .color-01-delta { background-color: @color-01-delta; }
+        .color-01-epsilon { background-color: @color-01-epsilon; }
+        /* 02 */
+        .color-02-alpha { background-color: @color-02-alpha; }
+        .color-02-beta { background-color: @color-02-beta; }
+        .color-02-gamma { background-color: @color-02-gamma; }
+        .color-02-delta { background-color: @color-02-delta; }
+        .color-02-epsilon { background-color: @color-02-epsilon; }
+        /* 03 */
+        .color-03-alpha { background-color: @color-03-alpha; }
+        .color-03-beta { background-color: @color-03-beta; }
+        .color-03-gamma { background-color: @color-03-gamma; }
+        .color-03-delta { background-color: @color-03-delta; }
+        .color-03-epsilon { background-color: @color-03-epsilon; }
+        /* 04 */
+        .color-04-alpha { background-color: @color-04-alpha; }
+        .color-04-beta { background-color: @color-04-beta; }
+        .color-04-gamma { background-color: @color-04-gamma; }
+        .color-04-delta { background-color: @color-04-delta; }
+        .color-04-epsilon { background-color: @color-04-epsilon; }
+        /* 05 */
+        .color-05-alpha { background-color: @color-05-alpha; }
+        .color-05-beta { background-color: @color-05-beta; }
+        .color-05-gamma { background-color: @color-05-gamma; }
+        .color-05-delta { background-color: @color-05-delta; }
+        .color-05-epsilon { background-color: @color-05-epsilon; }
+        /* 06 */
+        .color-06-alpha { background-color: @color-06-alpha; }
+        .color-06-beta { background-color: @color-06-beta; }
+        .color-06-gamma { background-color: @color-06-gamma; }
+        .color-06-delta { background-color: @color-06-delta; }
+        .color-06-epsilon { background-color: @color-06-epsilon; }
+    }
+}
+
+// Editor options
+.oe_overlay .oe_overlay_options .oe_options {
+    .dropdown-menu {
+        padding: 0;
+        margin: -1px 0 0;
+        min-width: 240px;
+
+        /* COLORPICKER */
+        .dropdown-menu.treehouse-colorpicker {
+            background-clip: inherit;
+            font-size: 0;
+            padding: 5px;
+            > li {
+                display: inline-block;
+                margin: 5px;
+                > a {
+                    width: 40px;
+                    height: 40px;
+                    padding: 0 !important;
+
+                    > div {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+            }
+            .none {
+                background-image: url("/theme_treehouse/static/src/img/customize/customize_none.gif")!important;
+                border: 1px solid @gray-darker!important;
+                background-position: center!important;
+            }
+        }
+        /* BACKGROUND IMAGES */
+        .dropdown-menu.treehouse-bg-img-selector {
+            width: 515px;
+            .inline {
+                margin: 10px 0 4px 10px;
+                display: block;
+                li {
+                    display: inline-block;
+                    a {
+                        display: block;
+                        position: relative;
+                        padding: 0;
+                        width: 120px;
+                        height: 70px;
+                        overflow: hidden;
+                        text-align: center;
+                    }
+                    &.active a:after, a:hover:after {
+                        background-color: #fff;
+                        right: auto;
+                        left: 45px;
+                        font-size: 16px;
+                        width: 30px;
+                        height: 30px;
+                        line-height: 32px;
+                        margin: 20px 0 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Publishing Buttons
+#wrapwrap .js_publish_management .btn {
+    border-radius: 0;
+    padding: 6px 12px;
+    text-transform: none;
+    font-size: 14px;
+    &.btn-success {
+        background-color: @brand-success;
+        &:hover {
+            background-color: darken(@brand-success, 10%);
+            border-color: darken(@brand-success, 10%);
+            color: #fff;
+        }
+    }
+    &.btn-danger {
+        background-color: @brand-danger;
+        &:hover {
+            background-color: darken(@brand-danger, 10%);
+            border-color: darken(@brand-danger, 10%);
+            color: #fff;
+        }
+    }
+}
@@ -0,0 +1,21 @@
+#wrapwrap h1.demo-title {
+    padding: 32px 0;
+    color: @gray-lighter;
+    font-family: "Lato", sans-serif;
+    font-weight: 400 !important;
+    font-size: 60px;
+}
+
+#wrapwrap h4.demo-subtitle {
+    padding: 10px 20px;
+    border-left: 5px solid @gray-dark;
+    background-image: url("/theme_treehouse/static/src/img/patterns/bg_pattern_demo.png");
+    color: @gray-dark;
+    font-family: "Lato", sans-serif;
+    font-weight: 400 !important;
+    font-size: 24px;
+}
+
+.demo-icons .fa-rocket {
+    margin-right: 15px;
+}
@@ -0,0 +1,356 @@
+
+// preHeader
+@preheader-background-color: @color-alpha;
+.preheader-style();
+
+#preheader {
+    vertical-align: middle;
+    font-size: @layout-font-size;
+    font-weight: @layout-font-weight;
+    padding: 8px 0;
+    background-color: @preheader-background-color;
+    color: @preheader-link-color;
+    #language, #social, .home {
+        > a .fa, button .fa {
+            box-sizing: content-box;
+            border: 2px solid rgba(0, 0, 0, 0);
+            border-radius: @border-radius-large;
+            color: @color-alpha;
+            background-color: @preheader-link-color;
+            &:hover {
+                background-color: rgba(0, 0, 0, 0);
+                border-color: @preheader-link-color;
+                color: @preheader-link-color;
+            }
+        }
+        .fa-size-generator(10px);
+    }
+    .list-inline {
+        display: inline-block;
+        margin: 0;
+        > li {
+            padding: 0;
+        }
+    }
+    #social {
+        text-align: right;
+        a {
+            text-decoration: none;
+        }
+    }
+    #contact {
+        li {
+            margin: 0 20px 0 0;
+            .fa:not(.fa-home) {
+                margin: 0 8px 0 0;
+                color: @preheader-link-color;
+                opacity: 0.5;
+            }
+            a, span:not(.fa) {
+                color: @preheader-text-color;
+                letter-spacing: 1px;
+            }
+        }
+    }
+    #language {
+        min-width: 10%;
+        text-align: right;
+        /* Button */
+        .btn-group {
+            button {
+                padding: 0;
+                border: 0;
+                background-color: rgba(0, 0, 0, 0);
+                .caret {
+                    margin: 0 0 0 5px;
+                    color: @preheader-link-color;
+                }
+            }
+            &.open > button {
+                box-shadow: @shadow;
+                .fa {
+                    background-color: rgba(0, 0, 0, 0);
+                    border-color: @preheader-link-color;
+                    color: @preheader-link-color;
+                }
+                .caret {
+                    border-bottom: 5px solid;
+                    border-top: 0;
+                }
+            }
+            /* First Level */
+            > .dropdown-menu {
+                top: 38px;
+                right: 0;
+                padding: 0;
+                border: 0;
+                border-radius: 0;
+                margin: 0;
+                min-width: 200px;
+                z-index: @zindex-dropdown + 1;
+                box-shadow: @shadow;
+                > li {
+                    margin: 0;
+                    &.active > a {
+                        background-color: @navbar-link-active-bg;
+                        color: @navbar-link-active-color;
+                    }
+                    > a {
+                        padding: 8px 18px;
+                        color: @navbar-link-color;
+                        font-size: @navbar-font-size;
+                        font-weight: @navbar-font-weight;
+                        text-align: right;
+                        text-transform: uppercase;
+                        .fa {
+                            margin: 0 5px;
+                            width: auto;
+                            height: auto;
+                            line-height: 0;
+                        }
+                        &:hover, &:hover .fa {
+                            background-color: @navbar-link-active-bg;
+                            color: @navbar-link-active-color;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Navbar
+#wrapwrap header {
+    .navbar {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .navbar-default {
+        border: 0;
+        font-size: @font-size-small;
+        font-weight: @font-bold;
+        .navbar-collapse {
+            border: 0;
+        }
+        .navbar-brand {
+            color: @navbar-link-color;
+        }
+        .navbar-nav {
+            /* Remove separator */
+            .divider {
+                display: none;
+            }
+            /* First Level */
+            .dropdown-menu {
+                border-radius: 0;
+            }
+            > li {
+                margin: 5px 0;
+                > a {
+                    letter-spacing: 1px;
+                    padding: 3px 14px;
+                    border: 2px solid rgba(0, 0, 0, 0);
+                    margin-left: 4px;
+                    color: @navbar-link-color;
+                    font-size: @navbar-font-size;
+                    font-weight: @navbar-font-weight;
+                    border-radius: @border-radius-large;
+                    text-transform: uppercase;
+                    &:hover {
+                        color: @navbar-link-hover-color;
+                        border: 2px solid @navbar-link-hover-color;
+                    }
+                }
+                &.active > a, &.active > a:focus, &.active > a:hover {
+                    background-color: @navbar-link-active-bg;
+                    border-color: @navbar-link-active-bg;
+                    border-radius: @border-radius-large;
+                    color: @navbar-link-active-color;
+                }
+                &.open {
+                     > a:focus, > a:hover, > a {
+                        background-color: rgba(0, 0, 0, 0);
+                        color: @navbar-link-hover-color;
+                        border-color: @navbar-link-hover-color;
+                        border-radius: @border-radius-large;
+                    }
+                    .caret {
+                        border-bottom: 5px solid;
+                        border-top: 0;
+                    }
+                }
+                /* Second Level */
+                > .dropdown-menu {
+                    top: 34px;
+                    left: 4px;
+                    padding: 0;
+                    border: 0;
+                    min-width: 200px;
+                    box-shadow: @shadow;
+                    > li {
+                        margin: 0;
+                        > a {
+                            padding: 8px 18px;
+                            font-size: @navbar-font-size;
+                            font-weight: @navbar-font-weight;
+                            text-transform: uppercase;
+                            &:before {
+                                content: "\f111";
+                                font-family: "FontAwesome";
+                                margin: 0 6px 0 0;
+                                line-height: 18px;
+                                font-size: 6px;
+                                vertical-align: top;
+                            }
+                            &:hover {
+                                background-color: rgba(0, 0, 0, 0);
+                                color: @navbar-link-hover-color;
+                            }
+                        }
+                        &.active > a, &.active > a:focus, &.active > a:hover {
+                            background-color: @navbar-link-active-bg;
+                            color: @navbar-link-active-color;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    @media (max-width: @screen-xs-max) {
+        .navbar-collapse {
+            margin: 0;
+            box-shadow: @shadow;
+        }
+        .navbar-default .navbar-nav > li {
+            > a {
+                margin: 0 0 5px;
+            }
+            .dropdown-menu > li {
+                > a {
+                    padding: 4px 20px;
+                    &:before {
+                        line-height: 24px;
+                    }
+                }
+                &.active > a, &.active > a:focus, &.active > a:hover {
+                    border-radius: @border-radius-large;
+                }
+                &:last-child {
+                    margin-bottom: 15px;
+                }
+            }
+        }
+    }
+    @media (min-width: @screen-sm-min) {
+        .navbar .container {
+            white-space: nowrap;
+        }
+        .navbar-collapse, .navbar-header {
+            float: none !important;
+            display: inline-block !important;
+            vertical-align: middle;
+        }
+        .navbar-header {
+            width: 20%;
+        }
+        .navbar-collapse {
+            width: 80%;
+        }
+    }
+
+}
+
+// Hamburger Button
+@media (max-width: @screen-sm-max) {
+    #wrapwrap #preheader li.visible-xs-inline-block .fa {
+        opacity: 1;
+        color: @color-alpha;
+        &:hover {
+            color: @navbar-link-color;
+        }
+    }
+    #wrapwrap .navbar-default .navbar-toggle {
+        border: 0;
+        padding: 8px 2px;
+        color: @gray-darker;
+        background-color: rgba(0, 0, 0, 0);
+        .icon-bar {
+            background-color: @navbar-link-color;
+            width: 25px;
+            height: 3px;
+            border-radius: @border-radius-small;
+        }
+        &:hover {
+            .icon-bar {
+                background-color: @color-alpha;
+            }
+        }
+    }
+}
+
+// Footer
+#footer {
+    padding: 20px 15px;
+}
+
+// Copyright
+#copyright {
+    background-color: @preheader-background-color;
+    color: @preheader-text-color;
+    font-size: @layout-font-size;
+    font-weight: @layout-font-weight;
+    #company {
+        padding: 10px 15px;
+    }
+    .top {
+        position: absolute;
+        top: -20px;
+        left: 0;
+        right: 0;
+        .fa-size-generator(20px);
+        .fa {
+            border-radius: @border-radius-large;
+        }
+    }
+    #odoo {
+        padding: 10px 15px;
+        text-align: right;
+        a {
+            color: @preheader-text-color;
+            &:hover {
+                color: @preheader-text-color;
+                text-decoration: underline;
+            }
+        }
+        .label {
+            padding: 2px 6px;
+            background-color: #fff;
+            color: @color-alpha;
+            font-size: 100%;
+        }
+    }
+}
+
+// Forum
+#wrapwrap .website_forum {
+    .navbar-default {
+        border: 0;
+    }
+    .navbar-brand {
+        padding: 18px;
+        font-weight: @font-bold;
+        color: @navbar-link-color;
+    }
+    .navbar li {
+        &.active a {
+            background-color: @color-alpha;
+        }
+        a {
+            padding: 18px 14px;
+            color: @navbar-link-color;
+            &:hover {
+                color: @navbar-link-hover-color;
+            }
+        }
+    }
+}
@@ -0,0 +1,335 @@
+
+// Background Colors
+.bg-mixin(@background; @color;) {
+    background-color: @background;
+    color: @color;
+     &.fa:not([class*="text-"]), .blockquote-text small, a:not(.btn) {
+        color: @color;
+    }
+}
+
+.bg-none(@background; @color) {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.white(@content-color) {
+    .bg-white {
+        .bg-mixin(#fff, @content-color);
+    }
+    .panel-white {
+        .panel-color(#fff, @content-color);
+    }
+    .well-white {
+        .well-color(#fff);
+    }
+}
+
+.gray-lighter(@content-color) {
+    .bg-gray-lighter {
+        .bg-mixin(@gray-lighter, @content-color);
+    }
+    .panel-gray-lighter {
+        .panel-color(@gray-lighter, @content-color);
+    }
+    .well-gray-lighter {
+        .well-color(@gray-lighter);
+    }
+}
+
+.gray(@content-color) {
+    .bg-gray {
+        .bg-mixin(@gray, @content-color);
+    }
+    .panel-gray {
+        .panel-color(@gray, @content-color);
+    }
+    .well-gray {
+        .well-color(@gray);
+    }
+}
+
+.gray-darker(@content-color) {
+    #wrapwrap {
+        .bg-gray-darker {
+            .bg-mixin(@gray-darker, @content-color);
+        }
+        .panel-gray-darker {
+            .panel-color(@gray-darker, @content-color);
+        }
+        .well-gray-darker {
+            .well-color(@gray-darker);
+        }
+        .btn.btn-default {
+            .btn-color(@gray-darker; @content-color);
+        }
+    }
+    #wrapwrap, .link-style .col-sm-10, .modal-body .dropdown-menu {
+        .btn.btn-default {
+            .btn-color(@gray-darker; @content-color);
+        }
+    }
+}
+
+.alpha(@content-color) {
+    #wrapwrap {
+        .bg-alpha {
+            .bg-mixin(@color-alpha, @content-color);
+        }
+        .panel-alpha {
+            .panel-color(@color-alpha, @content-color);
+        }
+        .panel-primary {
+            .panel-variant(@color-alpha; @content-color; @color-alpha; @color-alpha);
+        }
+        .well-alpha {
+            .well-color(@color-alpha);
+        }
+    }
+    #wrapwrap, .link-style .col-sm-10, .modal-body .dropdown-menu {
+        .btn.btn-primary {
+            .btn-color(@color-alpha; @content-color);
+        }
+    }
+}
+
+.beta(@content-color) {
+    #wrapwrap {
+        .bg-beta {
+            .bg-mixin(@color-beta, @content-color);
+        }
+        .panel-beta {
+            .panel-color(@color-beta, @content-color);
+        }
+        .panel-success {
+            .panel-variant(@color-beta; @content-color; @color-beta; @color-beta);
+        }
+        .well-beta {
+            .well-color(@color-beta);
+        }
+    }
+    #wrapwrap, .link-style .col-sm-10, .modal-body .dropdown-menu {
+        .btn.btn-success {
+            .btn-color(@color-beta; @content-color);
+        }
+    }
+}
+
+.gamma(@content-color) {
+    #wrapwrap {
+        .bg-gamma {
+            .bg-mixin(@color-gamma, @content-color);
+        }
+        .panel-gamma {
+            .panel-color(@color-gamma, @content-color);
+        }
+        .panel-info {
+            .panel-variant(@color-gamma; @content-color; @color-gamma; @color-gamma);
+        }
+        .well-gamma {
+            .well-color(@color-gamma);
+        }
+    }
+    #wrapwrap, .link-style .col-sm-10, .modal-body .dropdown-menu {
+        .btn.btn-info {
+            .btn-color(@color-gamma; @content-color);
+        }
+    }
+}
+
+.delta(@content-color) {
+    #wrapwrap {
+        .bg-delta {
+            .bg-mixin(@color-delta, @content-color);
+        }
+        .panel-delta {
+            .panel-color(@color-delta, @content-color);
+        }
+        .panel-warning {
+            .panel-variant(@color-delta; @content-color; @color-delta; @color-delta);
+        }
+        .well-delta {
+            .well-color(@color-delta);
+        }
+    }
+    #wrapwrap, .link-style .col-sm-10, .modal-body .dropdown-menu {
+        .btn.btn-warning {
+            .btn-color(@color-delta, @content-color);
+        }
+    }
+}
+
+.epsilon(@content-color) {
+    #wrapwrap {
+        .bg-epsilon {
+            .bg-mixin(@color-epsilon, @content-color);
+        }
+        .panel-epsilon {
+            .panel-color(@color-epsilon, @content-color);
+        }
+        .panel-danger {
+            .panel-variant(@color-epsilon; @content-color; @color-epsilon; @color-epsilon);
+        }
+        .well-epsilon {
+            .well-color(@color-epsilon);
+        }
+    }
+    #wrapwrap, .link-style .col-sm-10, .modal-body .dropdown-menu {
+        .btn.btn-danger {
+            .btn-color(@color-epsilon; @content-color);
+        }
+    }
+}
+
+// Unused Backgrounds Colors
+.bg-gray-light {
+    background-color: @gray-light;
+}
+.bg-gray-dark {
+    background-color: @gray-dark;
+}
+.bg-black {
+    background-color: #000;
+}
+
+// Buttons Colors
+.btn-color(@btn-color; @content-color) {
+    background-color: @btn-color;
+    color: @content-color;
+    &:hover {
+        background-color: rgba(0, 0, 0, 0);
+        border-color: @btn-color;
+        color: @btn-color;
+    }
+}
+
+// Panels Colors
+.panel-color(@color, @textcolor) {
+    border-color: @color;
+    .list-group li.active {
+        background-color: @color !important;
+        color: @textcolor;
+    }
+    > .panel-heading {
+        background-color: @color;
+        color: @textcolor;
+        .text-muted {
+            color: @textcolor;
+        }
+        > .panel-title, a {
+            color: @textcolor;
+        }
+    }
+    .tab-content {
+        border-left: 1px solid @color;
+        border-bottom: 1px solid @color;
+        border-right: 1px solid @color;
+        padding: 20px;
+    }
+    .nav-tabs {
+        border-bottom: 1px solid @color;
+        > li {
+            > a {
+                background-color: inherit;
+                color: @color;
+                &:focus, &:hover {
+                    background-color: @color;
+                    border: 1px solid @color;
+                    border-bottom-color: @color;
+                    color: @textcolor;
+                    .fa {
+                        color: @textcolor;
+                    }
+                }
+            }
+            &.active a, &.active a:focus, &.active a:hover {
+                border: 1px solid @color;
+                background-color: @color;
+                color: @textcolor;
+                .fa {
+                    color: @textcolor;
+                }
+            }
+        }
+    }
+}
+
+// Text Muted
+.text-muted(@color) {
+    color: @color;
+    opacity: (@opacity * 0.5);
+}
+
+/* Fix non-clickable input */
+#wrapwrap form div.text-muted {
+    opacity: 1;
+}
+
+// Thumbnails Colors
+.img-thumbnail(@first-border-color; @second-border-color) {
+    &.img-thumbnail, &.thumbnail {
+        box-shadow: 0 0 0 3px @first-border-color, 0 0 0 6px @second-border-color;
+    }
+}
+
+// Well Colors
+.well-color(@color) {
+    background-color: rgba(0, 0, 0, 0);
+    border-color: @color;
+    color: inherit;
+    .fa {
+        color: @color;
+    }
+}
+
+// Patterns
+.opt-pattern-mixin(@url) {
+    #wrapwrap {
+        background-image: @url;
+        background-repeat: repeat;
+    }
+}
+
+.opt-nav-style-mixin(@background-color; @color) {
+    #preheader #language .dropdown-menu {
+        background-color: @background-color;
+    }
+    #wrapwrap {
+        .navbar-default {
+            background-color: @background-color;
+            .navbar-nav > li {
+                > a {
+                    color: @color;
+                }
+                &.active > a {
+                    color: @background-color;
+                }
+                > .dropdown-menu {
+                    background-color: @background-color;
+                    > li {
+                        > a {
+                            color: @color;
+                        }
+                        &.active > a, &.active > a:focus, &.active > a:hover {
+                            color: @background-color;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.opt-footer-style-mixin(@background-color; @color) {
+    #wrapwrap footer {
+        background-color: @background-color;
+        color: @color;
+    }
+    #wrapwrap .top .fa {
+        background-color: @color-alpha;
+        color: @background-color;
+        &:hover {
+            background-color: @background-color;
+            color: @color-alpha;
+        }
+    }
+}
@@ -0,0 +1,3 @@
+body {
+    background-color: @color-alpha;
+}
@@ -0,0 +1,3 @@
+body {
+    background-color: @gray-darker;
+}
@@ -0,0 +1,3 @@
+body {
+    background-color: @gray-lighter;
+}
@@ -0,0 +1 @@
+.opt-pattern-mixin(url('/web/image/theme_treehouse.bg_pattern_01'));
@@ -0,0 +1 @@
+.opt-pattern-mixin(url('/web/image/theme_treehouse.bg_pattern_02'));
@@ -0,0 +1 @@
+.opt-pattern-mixin(url('/web/image/theme_treehouse.bg_pattern_03'));
@@ -0,0 +1 @@
+.opt-pattern-mixin(url('/web/image/theme_treehouse.bg_pattern_04'));
@@ -0,0 +1 @@
+.opt-pattern-mixin(url('/web/image/theme_treehouse.bg_pattern_05'));
@@ -0,0 +1 @@
+.opt-pattern-mixin(url('/web/image/theme_treehouse.bg_pattern_06'));
@@ -0,0 +1 @@
+.opt-pattern-mixin(url('/web/image/theme_treehouse.bg_pattern_07'));
@@ -0,0 +1 @@
+.opt-pattern-mixin(url('/web/image/theme_treehouse.bg_pattern_08'));
@@ -0,0 +1 @@
+.opt-pattern-mixin(url('/web/image/theme_treehouse.bg_pattern_09'));
@@ -0,0 +1,44 @@
+@color-alpha: @color-01-alpha;
+@color-beta: @color-01-beta;
+@color-gamma: @color-01-gamma;
+@color-delta: @color-01-delta;
+@color-epsilon: @color-01-epsilon;
+@gray-darker: #4C4545;
+@gray: #A39E96;
+@gray-lighter: #e3dcd1;
+@link-color: @color-alpha;
+@link-hover-color: darken(@color-alpha, 15%);
+.white(@gray-darker);
+.gray-lighter(@gray-darker);
+.gray(#fff);
+.gray-darker(#fff);
+.alpha(#fff);
+.beta(#fff);
+.gamma(#fff);
+.delta(#fff);
+.epsilon(@gray-darker);
+@preheader-text-color: #fff;
+
+.preheader-style() when (@nav-style-white = true) {
+    @preheader-link-color: #fff;
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: #fff;
+    @navbar-link-hover-color: @color-alpha;
+}
+
+.preheader-style() when (@nav-style-gray-lighter = true) {
+    @preheader-link-color: @gray-darker;
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: @gray-darker;
+    @navbar-link-active-color: @gray-lighter;
+    @navbar-link-hover-color: @gray-darker;
+}
+
+.preheader-style() when (@nav-style-gray-darker = true) {
+    @preheader-link-color: @gray-darker;
+    @navbar-link-color: #fff;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: @gray-darker;
+    @navbar-link-hover-color: @color-alpha;
+}
@@ -0,0 +1,45 @@
+@color-alpha: @color-02-alpha;
+@color-beta: @color-02-beta;
+@color-gamma: @color-02-gamma;
+@color-delta: @color-02-delta;
+@color-epsilon: @color-02-epsilon;
+@gray-darker: darken(#3E606F, 15%);
+@gray: #3E606F;
+@gray-lighter: lighten(#69A2BB, 20%);
+@link-color: @color-alpha;
+@link-hover-color: darken(@color-alpha, 15%);
+.white(@gray-darker);
+.gray-lighter(@gray-darker);
+.gray(#fff);
+.gray-darker(#fff);
+.alpha(@gray-darker);
+.beta(#fff);
+.gamma(#fff);
+.delta(#fff);
+.epsilon(@gray-darker);
+@preheader-text-color: @gray-darker;
+
+.preheader-style() when (@nav-style-white = true) {
+    @preheader-link-color: @gray-darker;
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: #fff;
+    @navbar-link-hover-color: @color-alpha;
+}
+
+.preheader-style() when (@nav-style-gray-lighter = true) {
+    @preheader-link-color: @gray-darker;
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: @gray-darker;
+    @navbar-link-active-color: @gray-lighter;
+    @navbar-link-hover-color: lighten(@gray, 10%);
+
+}
+
+.preheader-style() when (@nav-style-gray-darker = true) {
+    @preheader-link-color: @gray-darker;
+    @navbar-link-color: #fff;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: @gray-darker;
+    @navbar-link-hover-color: @color-alpha;
+}
@@ -0,0 +1,44 @@
+@color-alpha: @color-03-alpha;
+@color-beta: @color-03-beta;
+@color-gamma: @color-03-gamma;
+@color-delta: @color-03-delta;
+@color-epsilon: @color-03-epsilon;
+@gray-darker: #004460;
+@gray: #4BB5C1;
+@gray-lighter: #E4F8FF;
+@link-color: @color-alpha;
+@link-hover-color: darken(@color-alpha, 15%);
+.white(@gray-darker);
+.gray-lighter(@gray-darker);
+.gray(#fff);
+.gray-darker(#fff);
+.alpha(#fff);
+.beta(#fff);
+.gamma(@gray-darker);
+.delta(@gray-darker);
+.epsilon(@gray-darker);
+@preheader-text-color: #fff;
+
+.preheader-style() when (@nav-style-white = true) {
+    @preheader-link-color: #fff;
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: #fff;
+    @navbar-link-hover-color: @color-alpha;
+}
+
+.preheader-style() when (@nav-style-gray-lighter = true) {
+    @preheader-link-color: @gray-lighter;
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: @gray-lighter;
+    @navbar-link-hover-color: @color-alpha;
+}
+
+.preheader-style() when (@nav-style-gray-darker = true) {
+    @preheader-link-color: #fff;
+    @navbar-link-color: #fff;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: #fff;
+    @navbar-link-hover-color: @color-alpha;
+}
@@ -0,0 +1,46 @@
+@color-alpha: @color-04-alpha;
+@color-beta: @color-04-beta;
+@color-gamma: @color-04-gamma;
+@color-delta: @color-04-delta;
+@color-epsilon: @color-04-epsilon;
+@gray-darker: #1d2127;
+@gray: #AFAD94;
+@gray-lighter: #efecca;
+@link-color: @color-alpha;
+@link-hover-color: darken(@color-alpha, 15%);
+.white(@gray-darker);
+.gray-lighter(@gray-darker);
+.gray(#fff);
+.gray-darker(#fff);
+.alpha(#fff);
+.beta(#fff);
+.gamma(#fff);
+.delta(#fff);
+.epsilon(@gray-darker);
+
+.preheader-style() when (@nav-style-white = true) {
+    @preheader-link-color: #fff;
+    @preheader-text-color: #fff;
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: #fff;
+    @navbar-link-hover-color: darken(@color-alpha, 10%);
+}
+
+.preheader-style() when (@nav-style-gray-lighter = true) {
+    @preheader-link-color: @gray-lighter;
+    @preheader-text-color: @gray-lighter;
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: @gray-lighter;
+    @navbar-link-hover-color: @color-alpha;
+}
+
+.preheader-style() when (@nav-style-gray-darker = true) {
+    @preheader-link-color: @gray-darker;
+    @preheader-text-color: #fff;
+    @navbar-link-color: #fff;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: @gray-darker;
+    @navbar-link-hover-color: @color-alpha;
+}
@@ -0,0 +1,44 @@
+@color-alpha: @color-05-alpha;
+@color-beta: @color-05-beta;
+@color-gamma: @color-05-gamma;
+@color-delta: @color-05-delta;
+@color-epsilon: @color-05-epsilon;
+@gray-darker: darken(#68624D, 20%);
+@gray: lighten(#c59d5f, 10%);
+@gray-lighter: lighten(#c59d5f, 30%);
+@link-color: @color-alpha;
+@link-hover-color: darken(@color-alpha, 20%);
+.white(@gray-darker);
+.gray-lighter(@gray-darker);
+.gray(@gray-darker);
+.gray-darker(#fff);
+.alpha(#fff);
+.beta(#fff);
+.gamma(#fff);
+.delta(#fff);
+.epsilon(#fff);
+@preheader-text-color: #fff;
+
+.preheader-style() when (@nav-style-white = true) {
+    @preheader-link-color: lighten(@color-alpha, 50%);
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: #fff;
+    @navbar-link-hover-color: @color-alpha;
+}
+
+.preheader-style() when (@nav-style-gray-lighter = true) {
+    @preheader-link-color: #fff;
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: @gray-lighter;
+    @navbar-link-hover-color: @color-alpha;
+}
+
+.preheader-style() when (@nav-style-gray-darker = true) {
+    @preheader-link-color: #fff;
+    @navbar-link-color: #fff;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: #fff;
+    @navbar-link-hover-color: @color-alpha;
+}
@@ -0,0 +1,44 @@
+@color-alpha: @color-06-alpha;
+@color-beta: @color-06-beta;
+@color-gamma: @color-06-gamma;
+@color-delta: @color-06-delta;
+@color-epsilon: @color-06-epsilon;
+@gray-darker: #193441;
+@gray: #3E606F;
+@gray-lighter: lighten(#3E606F, 50%);
+@link-color: darken(@color-alpha, 10%);
+@link-hover-color: darken(@color-alpha, 25%);
+.white(@gray-darker);
+.gray-lighter(@gray-darker);
+.gray(#fff);
+.gray-darker(#fff);
+.alpha(@gray-darker);
+.beta(#fff);
+.gamma(@gray-darker);
+.delta(@gray-darker);
+.epsilon(#fff);
+@preheader-text-color: @gray-darker;
+
+.preheader-style() when (@nav-style-white = true) {
+    @preheader-link-color: #fff;
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: #fff;
+    @navbar-link-hover-color: darken(@color-alpha, 10%);
+}
+
+.preheader-style() when (@nav-style-gray-lighter = true) {
+    @preheader-link-color: #fff;
+    @navbar-link-color: @gray-darker;
+    @navbar-link-active-bg: darken(@gray-lighter, 30%);
+    @navbar-link-active-color: @gray-lighter;
+    @navbar-link-hover-color: darken(@gray-lighter, 30%);
+}
+
+.preheader-style() when (@nav-style-gray-darker = true) {
+    @preheader-link-color: @gray-darker;
+    @navbar-link-color: #fff;
+    @navbar-link-active-bg: @color-alpha;
+    @navbar-link-active-color: @gray-darker;
+    @navbar-link-hover-color: @color-alpha;
+}
@@ -0,0 +1,34 @@
+@headings-font-family: @font-family-base;
+@font-size-h1: 60px;
+@font-size-h2: 48px;
+@font-size-h3: 40px;
+@font-size-h4: 32px;
+@font-size-h5: 24px;
+@font-size-h6: 20px;
+@headings-font-weight: @font-normal;
+@headings-font-bold: @font-bold;
+@headings-line-height: 1.1;
+@headings-color: inherit;
+@headings-small-color: @color-alpha;
+
+/* Bodytext */
+@font-family-base: 'Abel', sans-serif;
+@text-color: @gray-darker;
+@font-size-large: 20px;
+@font-size-base: 16px;
+@font-size-small: 14px;
+@font-size-extra-small: 12px;
+@font-normal: 400;
+@font-bold: 700;
+@line-height-base: 1.4;
+@line-height-computed: 20px;
+
+/* Layout */
+@navbar-font-size: @font-size-small;
+@navbar-font-weight: 700;
+@layout-font-size: @font-size-small;
+@layout-font-weight: 400;
+
+/* Buttons */
+@btn-font-family: @font-family-base;
+@btn-font-weight: 700;
@@ -0,0 +1,34 @@
+@headings-font-family: @font-family-base;
+@font-size-h1: 60px;
+@font-size-h2: 48px;
+@font-size-h3: 40px;
+@font-size-h4: 32px;
+@font-size-h5: 24px;
+@font-size-h6: 20px;
+@headings-font-weight: @font-normal;
+@headings-font-bold: @font-bold;
+@headings-line-height: 1.1;
+@headings-color: inherit;
+@headings-small-color: @color-alpha;
+
+/* Bodytext */
+@font-family-base: 'Dosis', sans-serif;
+@text-color: @gray-darker;
+@font-size-large: 18px;
+@font-size-base: 16px;
+@font-size-small: 14px;
+@font-size-extra-small: 12px;
+@font-normal: 400;
+@font-bold: 700;
+@line-height-base: 1.4;
+@line-height-computed: 20px;
+
+/* Layout */
+@navbar-font-size: 13px;
+@navbar-font-weight: 700;
+@layout-font-size: @font-size-small;
+@layout-font-weight: 400;
+
+/* Buttons */
+@btn-font-family: @font-family-base;
+@btn-font-weight: 700;
@@ -0,0 +1,34 @@
+@headings-font-family: @font-family-base;
+@font-size-h1: 60px;
+@font-size-h2: 48px;
+@font-size-h3: 40px;
+@font-size-h4: 32px;
+@font-size-h5: 24px;
+@font-size-h6: 20px;
+@headings-font-weight: @font-normal;
+@headings-font-bold: @font-bold;
+@headings-line-height: 1.1;
+@headings-color: inherit;
+@headings-small-color: @color-alpha;
+
+/* Bodytext */
+@font-family-base: 'Karla', sans-serif;
+@text-color: @gray-darker;
+@font-size-large: 18px;
+@font-size-base: 16px;
+@font-size-small: 14px;
+@font-size-extra-small: 13px;
+@font-normal: 400;
+@font-bold: 700;
+@line-height-base: 1.4;
+@line-height-computed: 20px;
+
+/* Layout */
+@navbar-font-size: @font-size-extra-small;
+@navbar-font-weight: 700;
+@layout-font-size: @font-size-extra-small;
+@layout-font-weight: 400;
+
+/* Buttons */
+@btn-font-family: @font-family-base;
+@btn-font-weight: 700;
@@ -0,0 +1,38 @@
+@headings-font-family: @font-family-base;
+@font-size-h1: 60px;
+@font-size-h2: 48px;
+@font-size-h3: 40px;
+@font-size-h4: 32px;
+@font-size-h5: 24px;
+@font-size-h6: 20px;
+@headings-font-weight: @font-normal;
+@headings-font-bold: @font-bold;
+@headings-line-height: 1.1;
+@headings-color: inherit;
+@headings-small-color: @color-alpha;
+
+/* Bodytext */
+@font-family-base: 'Laila', sans-serif;
+@text-color: @gray-darker;
+@font-size-large: 18px;
+@font-size-base: 16px;
+@font-size-small: 14px;
+@font-size-extra-small: 12px;
+@font-normal: 300;
+@font-bold: 700;
+@line-height-base: 1.4;
+@line-height-computed: 20px;
+
+/* Layout */
+@navbar-font-size: 12px;
+@navbar-font-weight: 700;
+
+* {
+    letter-spacing: 0;
+}
+@layout-font-size: 13px;
+@layout-font-weight: 400;
+
+/* Buttons */
+@btn-font-family: @font-family-base;
+@btn-font-weight: 700;
@@ -0,0 +1,34 @@
+@headings-font-family: @font-family-base;
+@font-size-h1: 60px;
+@font-size-h2: 48px;
+@font-size-h3: 40px;
+@font-size-h4: 32px;
+@font-size-h5: 24px;
+@font-size-h6: 20px;
+@headings-font-weight: 400;
+@headings-font-bold: @font-bold;
+@headings-line-height: 1.1;
+@headings-color: inherit;
+@headings-small-color: @color-alpha;
+
+/* Bodytext */
+@font-family-base: 'Lato', sans-serif;
+@text-color: @gray-darker;
+@font-size-large: 18px;
+@font-size-base: 16px;
+@font-size-small: 14px;
+@font-size-extra-small: 12px;
+@font-normal: 300;
+@font-bold: 600;
+@line-height-base: 1.5;
+@line-height-computed: 20px;
+
+/* Layout */
+@navbar-font-size: @font-size-small;
+@navbar-font-weight: 600;
+@layout-font-size: @font-size-small;
+@layout-font-weight: 400;
+
+/* Buttons */
+@btn-font-family: @font-family-base;
+@btn-font-weight: 600;
@@ -0,0 +1,34 @@
+/* Headings */
+@headings-font-family: @font-family-base;
+@font-size-h1: 60px;
+@font-size-h2: 48px;
+@font-size-h3: 30px;
+@font-size-h4: 24px;
+@font-size-h5: 20px;
+@font-size-h6: 18px;
+@headings-font-weight: 400;
+@headings-font-bold: @font-bold;
+@headings-color: inherit;
+@headings-small-color: @color-alpha;
+
+/* Bodytext */
+@font-family-base: 'Raleway', sans-serif;
+@text-color: @gray-darker;
+@font-size-large: 18px;
+@font-size-base: 16px;
+@font-size-small: 14px;
+@font-size-extra-small: 12px;
+@font-normal: 300;
+@font-bold: 600;
+@line-height-base: 1.4;
+@line-height-computed: 20px;
+
+/* Layout */
+@navbar-font-size: @font-size-extra-small;
+@navbar-font-weight: 600;
+@layout-font-size: 13px;
+@layout-font-weight: 400;
+
+/* Buttons */
+@btn-font-family: @font-family-base;
+@btn-font-weight: 700;
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`.opt-pattern-mixin(url('/web/image/theme_treehouse.bg_pattern_01'));`