[ADD] theme saas-10

2021-05-11 16:02:06 +02:00
commit 4be329d397
3638 changed files with 104605 additions and 0 deletions
@@ -0,0 +1,102 @@
+// Events
+
+#left_column {
+    > .nav-pills > li {
+        &.active > a {
+            background-color: transparent;
+            color: @color-beta;
+        }
+        > a:hover {
+            background-color: transparent;
+        }
+    }
+}
+
+// Blog
+.website_blog {
+    #blog_right_column {
+        border-left: 1px solid @color-gamma;
+        padding: 0 15px 35px 30px;
+
+        h4 {
+            text-transform: uppercase;
+        }
+        .nav-stacked > li.active > a {
+            background-color: transparent;
+            color: @color-gamma;
+        }
+    }
+    .col-sm-8 {
+        padding: 0 15px 30px 35px;
+    }
+    .post-meta {
+        margin-top: 20px;
+        text-align: left;
+    }
+    .blog_title .post-meta {
+        text-align: center;
+    }
+    #main_column {
+        h4 {
+            font-size: 18px;
+        }
+        h2 {
+            font-size: 25px;
+        }
+    }
+}
+
+// Forum
+.website_forum {
+    width: 100%;
+    margin-top: 0px !important;
+    background: rgba(255, 255, 255, 0.8);
+    li.active > a {
+        background-color: @color-alpha!important;
+    }
+
+    + #wrap {
+        padding: 35px;
+        margin-bottom: 0!important;
+
+        #right-column {
+            border-left: 1px solid @gray-lighter;
+            > .btn {
+                background-color: @color-beta !important;
+                color: white;
+                &:hover {
+                    border-color: @color-zeta;
+                }
+            }
+
+            .panel {
+                text-align: center;
+                border: none;
+                box-shadow: none;
+                .panel-heading {
+                    background-color: transparent;
+                    border: none;
+                    .panel-title {
+                        font-size: 20px;
+                    }
+                }
+                &.note-editor {
+                    text-align: initial;
+                }
+            }
+        }
+        .question .mt16 {
+            padding: 10px;
+            background: rgb(230, 230, 230);
+        }
+        .alert .close {
+            background: transparent;
+        }
+    }
+}
+
+.forum_docs {
+    margin-top: 30px;
+    padding: 10px 35px;
+    background-color: white;
+}
@@ -0,0 +1,182 @@
+
+/* ================== BOOTSTRAP GRAYS ================= */
+
+@gray-darker:   lighten(#000, 13.5%); // #222
+@gray-dark:     lighten(#000, 20%);   // #333
+@gray:          lighten(#000, 33.5%); // #555
+@gray-light:    lighten(#000, 46.7%); // #777
+@gray-lighter:  lighten(#000, 85%); // #eee
+@gray-white:         #ffffff;
+@gray-base:         #000000;
+@color-alpha:   @gray-white;
+
+/* ================== COLOR PRESET 1 ================= */
+
+@colorPreset1_color1:           #47464b; //gray
+@colorPreset1_color1_dark:      darken(@colorPreset1_color1, 10%);
+@colorPreset1_color1_light:     lighten(@colorPreset1_color1, 5%);
+@colorPreset1_color2:           #f3997b; //orange
+@colorPreset1_color2_dark:      #cd7d63;
+@colorPreset1_color2_darker:    lighten(#cd7d63, 10%);
+@colorPreset1_color2_light:     lighten(@colorPreset1_color2, 5%);
+@colorPreset1_color3:           #add3ce; //green
+@colorPreset1_color3_dark:      darken(@colorPreset1_color3, 10%);
+@colorPreset1_color3_light:     lighten(@colorPreset1_color3, 10%);
+@colorPreset1_color4:           #a7c7d5; //blue
+@colorPreset1_color4_dark:      darken(@colorPreset1_color4, 10%);
+@colorPreset1_color4_light:     lighten(@colorPreset1_color4, 5%);
+
+/* ================== COLOR PRESET 2 ================= */
+
+@colorPreset2_color1:           #d699ae; // claret
+@colorPreset2_color1_dark:      darken(@colorPreset2_color1, 10%);
+@colorPreset2_color1_light:     lighten(@colorPreset2_color1, 5%);
+@colorPreset2_color2:           #B24774; // purple
+@colorPreset2_color2_dark:      darken(@colorPreset2_color2, 10%);
+@colorPreset2_color2_darker:    darken(@colorPreset2_color2, 15%);
+@colorPreset2_color2_light:     lighten(@colorPreset2_color2, 10%);
+@colorPreset2_color3:           #72c2d0; // blue
+@colorPreset2_color3_dark:      darken(@colorPreset2_color3, 10%);
+@colorPreset2_color3_light:     lighten(@colorPreset2_color3, 10%);
+@colorPreset2_color4:           #ed8354; // orange
+@colorPreset2_color4_dark:      darken(@colorPreset2_color4, 10%);
+@colorPreset2_color4_light:     lighten(@colorPreset2_color4, 5%);
+
+/* ================== COLOR PRESET 3 ================= */
+
+@colorPreset3_color1:           #79CCC2; // middle green
+@colorPreset3_color1_dark:      darken(@colorPreset3_color1, 10%);
+@colorPreset3_color1_light:     lighten(@colorPreset3_color1, 5%);
+@colorPreset3_color2:           #F05A12; // orange
+@colorPreset3_color2_dark:      darken(@colorPreset3_color2, 10%);
+@colorPreset3_color2_light:     lighten(@colorPreset3_color2, 10%);
+@colorPreset3_color3:           #C5FFF8; // light green
+@colorPreset3_color3_dark:      darken(@colorPreset3_color3, 10%);
+@colorPreset3_color3_darker:    darken(@colorPreset3_color3, 15%);
+@colorPreset3_color3_light:     lighten(@colorPreset3_color3, 10%);
+@colorPreset3_color4:           #0F7F72; // dark green
+@colorPreset3_color4_dark:      darken(@colorPreset3_color4, 10%);
+@colorPreset3_color4_light:     lighten(@colorPreset3_color4, 5%);
+
+/* ================== COLOR PRESET 4 ================= */
+
+@colorPreset4_color1:           #53a1cc; // l.blue
+@colorPreset4_color1_dark:      darken(@colorPreset4_color1, 10%);
+@colorPreset4_color1_darker:    darken(@colorPreset4_color1, 15%);
+@colorPreset4_color1_light:     lighten(@colorPreset4_color1, 5%);
+@colorPreset4_color2:           #116899; // d.blue
+@colorPreset4_color2_dark:      darken(@colorPreset4_color2, 10%);
+@colorPreset4_color2_light:     lighten(@colorPreset4_color2, 10%);
+@colorPreset4_color3:           #aab3ca; // green
+@colorPreset4_color3_dark:      darken(@colorPreset4_color3, 10%);
+@colorPreset4_color3_light:     lighten(@colorPreset4_color3, 10%);
+@colorPreset4_color4:           #ffc9c1; // rose
+@colorPreset4_color4_dark:      darken(@colorPreset4_color4, 10%);
+@colorPreset4_color4_light:     lighten(@colorPreset4_color4, 5%);
+
+/* ================== COLOR PRESET 5 ================= */
+
+@colorPreset5_color1:           #3b2c3c;
+@colorPreset5_color1_dark:      darken(@colorPreset5_color1, 10%);
+@colorPreset5_color1_light:     lighten(@colorPreset5_color1, 5%);
+@colorPreset5_color1_lighter:   lighten(@colorPreset5_color1, 10%);
+@colorPreset5_color2:           #D2546D;
+@colorPreset5_color2_dark:      darken(@colorPreset5_color2, 10%);
+@colorPreset5_color2_light:     lighten(@colorPreset5_color2, 10%);
+@colorPreset5_color3:           #303347;
+@colorPreset5_color3_dark:      darken(@colorPreset5_color3, 10%);
+@colorPreset5_color3_light:     lighten(@colorPreset5_color3, 10%);
+@colorPreset5_color4:           #171827;
+@colorPreset5_color4_dark:      darken(@colorPreset5_color4, 10%);
+@colorPreset5_color4_light:     lighten(@colorPreset5_color4, 5%);
+
+/* ================== COLOR PRESET 6 ================= */
+
+@colorPreset6_color1:           #2F343B; // Gray
+@colorPreset6_color1_dark:      darken(@colorPreset6_color1, 10%);
+@colorPreset6_color1_light:     lighten(@colorPreset6_color1, 5%);
+@colorPreset6_color2:           #C77966; // Orange
+@colorPreset6_color2_dark:      darken(@colorPreset6_color2, 5%);
+@colorPreset6_color2_darker:    darken(@colorPreset6_color2, 10%);
+@colorPreset6_color2_light:     lighten(@colorPreset6_color2, 5%);
+@colorPreset6_color3:           #703030; // Claret
+@colorPreset6_color3_dark:      darken(@colorPreset6_color3, 10%);
+@colorPreset6_color3_light:     lighten(@colorPreset6_color3, 10%);
+@colorPreset6_color4:           #E3CDA4; // Cream
+@colorPreset6_color4_dark:      darken(@colorPreset6_color4, 10%);
+@colorPreset6_color4_light:     lighten(@colorPreset6_color4, 5%);
+
+/* ========================= GRAYSCALE ========================= */
+
+.o-create-color-classes(~'black', @gray-base, @gray);
+.o-create-color-classes(~'gray-dark', @gray-dark, @gray-white);
+.bg-gray-dark {
+    h1, h2, h3, h4, h5, h6 {
+        .SetTextShadow (2px, @gray-base);
+    }
+}
+.o-create-color-classes(~'gray', @gray, @gray-white);
+.bg-gray {
+    h1, h2, h3, h4, h5, h6 {
+        .SetTextShadow(2px, @gray-base);
+    }
+}
+.o-create-color-classes(~'gray-light', @gray-lighter, @gray);
+.bg-gray-light {
+    h1, h2, h3, h4, h5, h6 {
+        .SetTextShadow(1px, @gray-white);
+    }
+    .menublock {
+        border-bottom: 2px solid @gray-light;
+    }
+}
+.o-create-color-classes(~'white', @gray-white, @gray);
+
+/* ================== FONT COLORS IN THE EDITOR ================= */
+
+.text-blue {color: @gray-base;}
+.bg-blue {background-color: @gray-base;}
+
+.text-turquoise{color: @gray-darker;}
+.bg-turquoise {background-color: @gray-darker;}
+
+.text-green {color: @gray-dark;}
+.bg-green {background-color: @gray-dark;}
+
+.text-yellow {color: @gray;}
+.bg-yellow {background-color: @gray;}
+
+.text-red {color: @gray-light;}
+.bg-red {background-color: @gray-light;}
+
+.text-pink {color: @gray-lighter;}
+.bg-pink {background-color: @gray-lighter;}
+
+.text-purple {color: @gray-white;}
+.bg-purple {background-color: @gray-white;}
+
+.text-brown {}
+
+.text-blue2 {color: #1e3370;}
+.bg-blue2 {background-color: #1e3370;}
+
+.text-turquoise2 {color: #1993a5;}
+.bg-turquoise2 {background-color: #1993a5;}
+
+.text-green2 {color: #4f8640;}
+.bg-green2 {background-color: #4f8640;}
+
+.text-yellow2 {color: #e6d123;}
+.bg-yellow2 {background-color: #e6d123;}
+
+.text-red2 {color: #c22e2e;}
+.bg-red2 {background-color: #c22e2e;}
+
+.text-lightblue2 {color: #5ea7db;}
+.bg-lightblue2 {background-color: #5ea7db;}
+
+.text-purple2 {color: #8458a7;}
+.bg-purple2 {background-color: #8458a7;}
+
+.text-brown2 {color: #725a4c;}
+.bg-brown2 {color: #725a4c;}
@@ -0,0 +1,225 @@
+/* ================== MODAL COLORS ================= */
+
+@modalGreen: #328e7f;
+@modalGreenDark: darken(@modalGreen, 5%);
+@modalGreenLight: lighten(@modalGreen, 15%);
+@modalOrange: #ea5800;
+@modalBlue: #151C24;
+@modalLightBlue: lighten(@modalBlue, 20%);
+
+body #theme_customize_modal {
+    background: rgba(0, 0, 0, 0) !important;
+
+    .modal-header .close {
+        color: white;
+        position: absolute;
+        top: 0.25em;
+        right: 0.4em;
+        opacity: .9;
+    }
+
+    .modal-body.interface {
+        width: 360px;
+        height: 430px;
+
+        padding-top: 0;
+        padding-bottom: 0;
+
+        background-color: @gray;
+        position: relative;
+        font-family: ProximaRegular;
+
+        > .row {
+            height: 100%;
+
+            .left-content {
+                height: 100%;
+                padding: 0;
+                background-color: @modalGreen;
+
+                ul.nav-tabs {
+                    height: 100%;
+                    border: none;
+
+                    > li {
+                        height: percentage(1/6);
+                        float: none;
+
+                        &:hover {
+                            background-color: @modalBlue;
+                        }
+
+                        > a {
+                            display: block;
+                            text-decoration: none;
+                            cursor: pointer;
+                            font-size: 12px;
+
+                            height: 100%;
+                            margin-right: 0px;
+                            padding: 15px 5px;
+                            color: white;
+
+                            border-radius: 0px;
+                            border: none;
+
+                            span {
+                                margin-bottom: 13px;
+                            }
+                        }
+
+                        .a-mixin-orange() {
+                            background-color: @gray;
+                            color: @modalOrange;
+                            border: none;
+                            outline: none;
+                        }
+
+                        &, &.active {
+                            > a {
+                                &:hover, &:focus {
+                                    .a-mixin-orange;
+                                }
+                            }
+                        }
+                        &.active > a {
+                            .a-mixin-orange;
+                        }
+                    }
+                }
+            }
+
+            .right-content {
+                max-height: 100%;
+                overflow: auto;
+                padding-top: 15px;
+                padding-bottom: 15px;
+
+                h4 {
+                    color: @gray-white;
+                    text-align: left;
+                }
+                h6, p {
+                    color: @gray-white;
+                }
+
+                label {
+                    width: 100%;
+                    cursor: pointer;
+
+                    > img {
+                        width: 100%;
+                        height: auto;
+                    }
+
+                    > div, > img, > h6, > h4 {
+                        border: none;
+                        padding: 3px;
+                    }
+
+                    &.checked {
+                        background-color: @modalLightBlue;
+                        > div, > img, > h6, > h4 {
+                            box-shadow: none;
+                        }
+                    }
+                }
+
+                #color {
+                    > p {
+                        margin-top: 15px;
+                    }
+                    .color-combi {
+                        > div {
+                            display: inline-block;
+                            width: 37px;
+                            height: 37px;
+                            padding: 0px;
+                        }
+
+                        /* ======================= COLOR PRESET 1 ====================== */
+
+                        &.colorPreset1 > div {
+                            &:nth-child(1) {background-color: @gray-white;}
+                            &:nth-child(2) {background-color: @colorPreset1_color1;}
+                            &:nth-child(3) {background-color: @colorPreset1_color2;}
+                            &:nth-child(4) {background-color: @colorPreset1_color3;}
+                            &:nth-child(5) {background-color: @colorPreset1_color4;}
+                        }
+
+                        /* ======================= COLOR PRESET 2 ====================== */
+
+                        &.colorPreset2 > div {
+                            &:nth-child(1) {background-color: @colorPreset2_color1;}
+                            &:nth-child(2) {background-color: @colorPreset2_color2;}
+                            &:nth-child(3) {background-color: @gray-white;}
+                            &:nth-child(4) {background-color: @colorPreset2_color3;}
+                            &:nth-child(5) {background-color: @colorPreset2_color4;}
+                        }
+
+                        /* ======================= COLOR PRESET 3 ====================== */
+
+                        &.colorPreset3 > div {
+                            &:nth-child(1) {background-color: @colorPreset3_color1;}
+                            &:nth-child(2) {background-color: @colorPreset3_color2;}
+                            &:nth-child(3) {background-color: @gray-white;}
+                            &:nth-child(4) {background-color: @colorPreset3_color3;}
+                            &:nth-child(5) {background-color: @colorPreset3_color4;}
+                        }
+
+                        /* ======================= COLOR PRESET 4 ====================== */
+
+                        &.colorPreset4 > div {
+                            &:nth-child(1) {background-color: @colorPreset4_color1;}
+                            &:nth-child(2) {background-color: @colorPreset4_color2;}
+                            &:nth-child(3) {background-color: @gray-white;}
+                            &:nth-child(4) {background-color: @colorPreset4_color3;}
+                            &:nth-child(5) {background-color: @colorPreset4_color4;}
+                        }
+
+                        /* ======================= COLOR PRESET 5 ====================== */
+
+                        &.colorPreset5 > div {
+                            &:nth-child(1) {background-color: @colorPreset5_color1;}
+                            &:nth-child(2) {background-color: @colorPreset5_color2;}
+                            &:nth-child(3) {background-color: @gray-white;}
+                            &:nth-child(4) {background-color: @colorPreset5_color3;}
+                            &:nth-child(5) {background-color: @colorPreset5_color4;}
+                        }
+
+                        /* ======================= COLOR PRESET 6 ====================== */
+
+                        &.colorPreset6 > div {
+                            &:nth-child(1) {background-color: @colorPreset6_color1;}
+                            &:nth-child(2) {background-color: @colorPreset6_color2;}
+                            &:nth-child(3) {background-color: @gray-white;}
+                            &:nth-child(4) {background-color: @colorPreset6_color3;}
+                            &:nth-child(5) {background-color: @colorPreset6_color4;}
+                        }
+                    }
+                }
+
+                #bgcolor {
+                    .bg-white {background-color: @gray-white;}
+                    .bg-beige {background-color: @colorPreset6_color4;}
+                    .bg-gray {background-color: @gray-light;}
+                    .bg-black {background-color: @gray-base;}
+                    .bg-green {background-color: @colorPreset1_color3;}
+                    .bg-blue {background-color: @colorPreset1_color4;}
+                    .bg-indigo {background-color: @colorPreset4_color3;}
+                    .bg-rose {background-color: @colorPreset4_color4;}
+
+                    > label {
+                        height: 45px;
+                    }
+                }
+            }
+        }
+    }
+
+    .modal-footer {
+        height: 38px;
+        background-color: @modalGreen;
+        border: none;
+    }
+}
@@ -0,0 +1,15 @@
+
+@bg-img-01: url("/web/image/theme_common.image_content_11");
+@bg-img-02: url("/web/image/theme_common.image_content_09");
+@bg-img-03: url("/web/image/theme_common.image_content_10");
+@bg-img-04: url("/web/image/theme_common.image_content_12");
+
+.o-generate-bg-img-options(4);
+.o-generate-bg-img-options(@n, @i: 1) when (@i =< @n) {
+    .bg-img-0@{i} {
+        background-image: ~"@{bg-img-0@{i}}";
+        background-size: cover;
+        background-position: center center;
+    }
+    .o-generate-bg-img-options(@n, @i + 1);
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-color: @colorPreset6_color4;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-color: @gray-base;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-color: @colorPreset1_color4;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-color: @gray-light;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-color: @colorPreset1_color3;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-color: @colorPreset4_color3;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-color: @colorPreset4_color4;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-color: @gray-white;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-image: url("/web/image/theme_kiddo.bg_img_01");
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-image: url("/web/image/theme_kiddo.bg_img_02");
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-image: url("/web/image/theme_kiddo.bg_img_03");
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-image: url("/web/image/theme_kiddo.bg_img_04");
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-image: url("/web/image/theme_kiddo.bg_img_05");
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-image: url("/web/image/theme_kiddo.bg_img_06");
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-image: url("/web/image/theme_kiddo.bg_img_07");
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-image: url("/web/image/theme_kiddo.bg_img_08");
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-image: url("/web/image/theme_kiddo.bg_img_09");
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background-image: url("/web/image/theme_kiddo.bg_img_10");
+}
@@ -0,0 +1,88 @@
+@color-alpha: @gray-white;
+@color-beta: @colorPreset1_color3; //green
+@color-gamma: @colorPreset1_color2; //orange
+@color-delta: @colorPreset1_color4; //blue
+@color-epsilon: @colorPreset1_color1; //gray
+@color-zeta: @colorPreset1_color3_dark;
+@color-eta: @colorPreset1_color3_light;
+@color-theta: @colorPreset1_color2_dark;
+@color-iota: @colorPreset1_color2_light;
+@color-kappa: @colorPreset1_color4_dark;
+@color-lambda: @colorPreset1_color4_light;
+@color-mu: @colorPreset1_color1_dark;
+@color-nu: @colorPreset1_color1_light;
+
+/* ============= FONT COLORS ================== */
+
+.text-alpha {color: @gray-white;}
+.text-beta {color: @colorPreset1_color1;}
+.text-gamma {color: @colorPreset1_color2;}
+.text-delta {color: @colorPreset1_color3;}
+.text-epsilon {color: @colorPreset1_color4;}
+
+.text-primary {color: @color-alpha;}
+.text-success {color: @color-epsilon;}
+.text-info {color: @color-gamma;}
+.text-warning {color: @color-beta;}
+.text-danger {color: @color-delta;}
+
+/* ============= THEMES BUTTONS =============== */
+
+@btn-default-bg: @color-alpha;
+@btn-primary-bg: @color-beta;
+@btn-success-bg: @color-gamma;
+@btn-info-bg: @color-delta;
+@btn-warning-bg: @color-epsilon;
+@btn-danger-bg: @gray-base;
+
+/* ============= BG USED FOR NAV ============== */
+
+.bgrgba(0, 0, 0, 0) {
+    background: rgba(255, 255, 255, 0.8);
+}
+
+/* ============= BGCOLORS ===================== */
+
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-gamma, @color-epsilon);
+    .fa {color: @gray;}
+}
+
+.bg-beta {
+    .SetDisplayColor (@color-epsilon, @color-alpha);
+    .LinkColor (@color-gamma, @color-gamma);
+}
+
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @color-alpha);
+    .LinkColor (@color-epsilon, @color-epsilon);
+}
+
+.bg-delta {
+    .SetDisplayColor (@color-beta, @color-alpha);
+    .LinkColor (#db771f, #db771f);
+}
+
+.bg-epsilon {
+    .SetDisplayColor (@color-delta, @color-alpha);
+    .LinkColor (#3080d1, #3080d1);
+}
+
+/* ============= TYPO ========================= */
+
+a {
+    color: @color-gamma;
+    &:hover, &:focus {
+        color: @color-beta;
+    }
+}
+
+/* ============= STRUCTURE ==================== */
+
+#wrapwrap > footer #footer h3 {
+    color: @color-beta;
+}
+.in, .collapsing {
+    background-color: @color-alpha !important;
+}
@@ -0,0 +1,79 @@
+@color-alpha: @gray-white;
+@color-beta: @colorPreset2_color1;  // claret
+@color-gamma: @colorPreset2_color2; // purple
+@color-delta: @colorPreset2_color3; // blue
+@color-epsilon: @colorPreset2_color4; // orange
+@color-zeta: @colorPreset2_color1_dark;
+@color-eta: @colorPreset2_color1_light;
+@color-theta: @colorPreset2_color2_dark;
+@color-iota: @colorPreset2_color2_light;
+@color-kappa: @colorPreset2_color3_dark;
+@color-lambda: @colorPreset2_color3_light;
+@color-mu: @colorPreset2_color4_dark;
+@color-nu: @colorPreset2_color4_light;
+
+/* ============= FONT COLORS ================== */
+
+.text-alpha {color: @gray-white;}
+.text-beta {color: @colorPreset2_color1;}
+.text-gamma {color: @colorPreset2_color2;}
+.text-delta {color: @colorPreset2_color3;}
+.text-epsilon {color: @colorPreset2_color4;}
+
+.text-primary {color: @color-alpha;}
+.text-success {color: @color-beta;}
+.text-info {color: @color-gamma;}
+.text-warning {color: @color-delta;}
+.text-danger {color: @color-epsilon;}
+
+/* ============= THEMES BUTTONS =============== */
+
+@btn-default-bg: @color-alpha;
+@btn-primary-bg: @color-beta;
+@btn-success-bg: @color-gamma;
+@btn-info-bg: @color-delta;
+@btn-warning-bg: @color-epsilon;
+@btn-danger-bg: @gray-base;
+
+/* ============= BG USED FOR NAV ============== */
+
+.bgrgba(0, 0, 0, 0) {
+    background: rgba(255, 255, 255, 0.8);
+}
+
+/* ============= BGCOLORS ===================== */
+
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-epsilon, @color-mu);
+    .fa {color: @gray;}
+}
+
+.bg-beta {
+    .SetDisplayColor (@color-beta, @color-alpha);
+    .LinkColor (@color-gamma, @color-theta);
+}
+
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @color-alpha);
+    .LinkColor (@color-epsilon, @color-nu);
+}
+
+.bg-delta {
+    .SetDisplayColor (@color-delta, @color-alpha);
+    .LinkColor (#0172d2, #0141d2);
+}
+
+.bg-epsilon {
+    .SetDisplayColor (@color-epsilon, @color-alpha);
+    .LinkColor (@color-gamma, @color-theta);
+}
+
+/* ============= TYPO ========================= */
+
+a {
+    color: @color-epsilon;
+    &:hover, &:focus {
+        color: @color-mu;
+    }
+}
@@ -0,0 +1,128 @@
+@color-alpha: @gray-white;
+@color-beta: @colorPreset3_color1; // middle green
+@color-gamma: @colorPreset3_color2; // orange
+@color-delta: @colorPreset3_color3; // light green
+@color-epsilon: @colorPreset3_color4; // dark green
+@color-zeta: @colorPreset3_color1_dark;
+@color-eta: @colorPreset3_color1_light;
+@color-theta: @colorPreset3_color2_dark;
+@color-iota: @colorPreset3_color2_light;
+@color-kappa: @colorPreset3_color3_dark;
+@color-lambda: @colorPreset3_color3_light;
+@color-mu: @colorPreset3_color4_dark;
+@color-nu: @colorPreset3_color4_light;
+
+/* ============= FONT COLORS ================== */
+
+.text-alpha {color: @gray-white;}
+.text-beta {color: @colorPreset3_color1;}
+.text-gamma {color: @colorPreset3_color2;}
+.text-delta {color: @colorPreset3_color3;}
+.text-epsilon {color: @colorPreset3_color4;}
+
+.text-primary {color: @color-alpha;}
+.text-success {color: @color-beta;}
+.text-info {color: @color-gamma;}
+.text-warning {color: @color-delta;}
+.text-danger {color: @color-epsilon;}
+
+/* ============= THEMES BUTTONS =============== */
+
+@btn-default-bg: @color-alpha;
+@btn-primary-bg: @color-beta;
+@btn-success-bg: @color-gamma;
+@btn-info-bg: @color-delta;
+@btn-warning-bg: @color-epsilon;
+@btn-danger-bg: @gray-base;
+
+/* ============= BG USED FOR NAV ============== */
+
+.bgrgba(0, 0, 0, 0) {
+    background: rgba(255, 255, 255, 0.9);
+}
+
+/* ============= BGCOLORS ===================== */
+
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-epsilon, @color-mu);
+    .fa {color: @gray;}
+}
+
+.bg-beta {
+    .SetDisplayColor (@color-beta, @gray);
+    .LinkColor (@color-gamma, @color-iota);
+}
+
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @color-alpha);
+    .LinkColor (@gray-dark, @gray-base);
+}
+
+.bg-delta {
+    .SetDisplayColor (@color-delta, @gray);
+    .LinkColor (@color-gamma, @color-iota);
+}
+
+.bg-epsilon {
+    .SetDisplayColor (@color-epsilon, @color-alpha);
+    .LinkColor (@color-delta, @color-kappa);
+}
+
+/* ============= TYPO ========================= */
+
+a {
+    color: @color-epsilon;
+    &:hover, &:focus {
+        color: @color-delta;
+    }
+}
+
+/* ============= STRUCTURE ==================== */
+
+#wrapwrap {
+    .navbar-default .container .navbar-collapse #top_menu {
+        > li {
+            a, span {
+                color: @color-gamma !important;
+            }
+            &:after {
+                background: none repeat scroll 0% 0% @color-mu;
+            }
+        }
+
+        .dropdown-menu > li > a {
+            color: @color-alpha;
+        }
+    }
+
+    > footer {
+        #footer, .container {
+            .LinearGradient (@color-beta, @color-zeta);
+
+            h3, h4 {
+                color: @gray-dark !important;
+            }
+            a {
+                color: @gray;
+                &:hover {
+                    color: @color-alpha;
+                }
+            }
+        }
+    }
+}
+
+.header-info {
+    border-bottom-color: @color-gamma;
+}
+.in, .collapsing {
+    background-color: @color-alpha !important;
+}
+.chart a {
+    color: @color-gamma;
+}
+.copyright {
+    background-color: @color-kappa;
+    color: @gray;
+}
@@ -0,0 +1,124 @@
+@color-alpha: @gray-white;
+@color-beta: @colorPreset4_color1; // l.blue
+@color-gamma: @colorPreset4_color2; // d.blue
+@color-delta: @colorPreset4_color3; // purple
+@color-epsilon: @colorPreset4_color4; // rose
+@color-zeta: @colorPreset4_color1_dark;
+@color-eta: @colorPreset4_color1_light;
+@color-theta: @colorPreset4_color2_dark;
+@color-iota: @colorPreset4_color2_light;
+@color-kappa: @colorPreset4_color3_dark;
+@color-lambda: @colorPreset4_color3_light;
+@color-mu: @colorPreset4_color4_dark;
+@color-nu: @colorPreset4_color4_light;
+
+/* ============= FONT COLORS ================== */
+
+.text-alpha {color: @gray-white;}
+.text-beta {color: @colorPreset4_color1;}
+.text-gamma {color: @colorPreset4_color2;}
+.text-delta {color: @colorPreset4_color3;}
+.text-epsilon {color: @colorPreset4_color4;}
+
+.text-primary {color: @color-alpha;}
+.text-success {color: @color-beta;}
+.text-info {color: @color-gamma;}
+.text-warning {color: @color-delta;}
+.text-danger {color: @color-epsilon;}
+
+/* ============= THEMES BUTTONS =============== */
+
+@btn-default-bg: @color-alpha;
+@btn-primary-bg: @color-beta;
+@btn-success-bg: @color-gamma;
+@btn-info-bg: @color-delta;
+@btn-warning-bg: @color-epsilon;
+@btn-danger-bg: @gray-base;
+
+/* ============= BG USED FOR NAV ============== */
+
+.bgrgba(0, 0, 0, 0) {
+    background: rgba(255, 255, 255, 0.8);
+}
+
+/* ============= BGCOLORS ===================== */
+
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-gamma, @color-theta);
+    .fa {color: @gray;}
+}
+
+.bg-beta {
+    .SetDisplayColor (@color-beta, @color-alpha);
+    .LinkColor (@color-epsilon, @gray);
+}
+
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @color-alpha);
+    .LinkColor (@color-epsilon, @color-mu);
+}
+
+.bg-delta {
+    .SetDisplayColor (@color-delta, @color-alpha);
+    .LinkColor (@color-epsilon, @gray);
+}
+
+.bg-epsilon {
+    .SetDisplayColor (@color-epsilon, @gray);
+    .LinkColor (@color-gamma, @color-theta);
+}
+
+/* ============= TYPO ========================= */
+
+a {
+    color: @color-delta;
+    &:hover, &:focus {
+        color: @color-epsilon;
+    }
+}
+
+/* ============= STRUCTURE ==================== */
+
+#wrapwrap {
+    .navbar-default .container .navbar-collapse #top_menu {
+        background-color: transparent;
+
+        > li {
+            a, span {
+                color: @color-gamma !important;
+            }
+        }
+        .dropdown-menu {
+            background-color: @color-alpha;
+            > li {
+                color: @color-alpha !important;
+            }
+        }
+    }
+
+    > footer {
+        #footer, .container {
+            background-color: @color-beta !important;
+
+            h3, h4 {
+                color: @color-alpha !important;
+            }
+            a {
+                color: @color-epsilon;
+                &:hover {
+                    color: @color-alpha;
+                }
+            }
+        }
+    }
+}
+
+.header-info {
+    background-color: transparent;
+    border-color: transparent;
+}
+.copyright {
+    background-color: @color-theta;
+    color: @color-alpha;
+}
@@ -0,0 +1,166 @@
+@color-alpha: @gray-white;
+@color-beta: @colorPreset5_color1;
+@color-gamma: @colorPreset5_color2;
+@color-delta: @colorPreset5_color3;
+@color-epsilon: @colorPreset5_color4;
+@color-zeta: @colorPreset5_color1_dark;
+@color-eta: @colorPreset5_color1_light;
+@color-theta: @colorPreset5_color2_dark;
+@color-iota: @colorPreset5_color2_light;
+@color-kappa: @colorPreset5_color3_dark;
+@color-lambda: @colorPreset5_color3_light;
+@color-mu: @colorPreset5_color4_dark;
+@color-nu: @colorPreset5_color4_light;
+
+/* ============= FONT COLORS ================== */
+
+.text-alpha {color: @gray-white;}
+.text-beta {color: @colorPreset5_color1;}
+.text-gamma {color: @colorPreset5_color2;}
+.text-delta {color: @colorPreset5_color3;}
+.text-epsilon {color: @colorPreset5_color4;}
+
+.text-primary {color: @color-alpha;}
+.text-success {color: @color-beta;}
+.text-info {color: @color-gamma;}
+.text-warning {color: @color-delta;}
+.text-danger {color: @color-epsilon;}
+
+/* ============= THEMES BUTTONS =============== */
+
+@btn-default-bg: @color-alpha;
+@btn-primary-bg: @color-beta;
+@btn-success-bg: @color-gamma;
+@btn-info-bg: @color-delta;
+@btn-warning-bg: @color-epsilon;
+@btn-danger-bg: @gray-base;
+
+/* ============= BG USED FOR NAV ============== */
+
+.bgrgba(0, 0, 0, 0) {
+    background: rgba(255, 255, 255, 0.8);
+}
+
+/* ============= BGCOLORS ===================== */
+
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-gamma, @color-iota);
+    .fa {color: @gray;}
+}
+
+.bg-beta {
+    .SetDisplayColor (@color-beta, @color-alpha);
+    .LinkColor (@color-gamma, @color-theta);
+}
+
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @color-alpha);
+    .LinkColor (@color-beta, @color-zeta);
+}
+
+.bg-delta {
+    .SetDisplayColor (@color-delta, @color-alpha);
+    .LinkColor (@color-gamma, @color-theta);
+}
+
+.bg-epsilon {
+    .SetDisplayColor (@color-epsilon, @color-alpha);
+    .LinkColor (@color-gamma, @color-theta);
+}
+
+/* ============= TYPO ========================= */
+
+a {
+    color: @color-gamma;
+    &:hover, &:focus {
+        color: @color-iota;
+    }
+}
+
+/* ============= STRUCTURE ==================== */
+
+// Nav
+.in, .collapsing {
+    background-color: @color-epsilon !important;
+}
+
+#wrapwrap {
+    li.active ul {
+        background-color: @color-eta;
+    }
+
+    .navbar-default .container {
+        background-color: @color-epsilon;
+
+        .navbar-collapse #top_menu {
+            li a .label-primary {
+                background-color: @color-gamma;
+            }
+
+            .dropdown-menu, .navbar-collapse {
+                background-color: @color-epsilon;
+            }
+        }
+    }
+
+    > main > #wrap {
+        background-color: @color-zeta!important;
+        color: @color-alpha;
+    }
+
+    > footer {
+        #footer, .container {
+            background-color: @color-delta !important;
+            h3, h4 {
+                color: @color-alpha !important;
+            }
+            p, li {
+                color: @color-alpha !important;
+            }
+        }
+    }
+}
+
+.panel, .panel-body {
+    color: @gray;
+}
+#table_search {
+    background-color: white !important;
+}
+
+// Forum
+.website_forum {
+    background: rgba(23, 24, 39, 0.8);
+    margin-top: 0px !important;
+    width: 100%;
+
+    a {
+        color: @color-alpha !important;
+    }
+    li.active > a {
+        background-color: @color-delta !important;
+    }
+
+    + #wrap {
+        .oe_grey {
+            background: transparent !important;
+        }
+        .panel {
+            background: transparent !important;
+            .panel-heading, .panel-body {
+                color: @color-alpha !important;
+            }
+        }
+
+        .question .mt16 {
+            background: transparent !important;
+        }
+        tbody {
+            color: @gray;
+        }
+        #right-column > .btn {
+            background-color: @color-gamma !important;
+        }
+    }
+}
@@ -0,0 +1,100 @@
+@color-alpha: @gray-white;
+@color-beta: @colorPreset6_color3; // Claret
+@color-gamma: @colorPreset6_color2; // Orange
+@color-delta: @colorPreset6_color4; // Cream
+@color-epsilon: @colorPreset6_color1; // Gray
+@color-zeta: @colorPreset6_color3_dark;
+@color-eta: @colorPreset6_color3_light;
+@color-theta: @colorPreset6_color2_dark;
+@color-iota: @colorPreset6_color2_light;
+@color-kappa: @colorPreset6_color4_dark;
+@color-lambda: @colorPreset6_color4_light;
+@color-mu: @colorPreset6_color1_dark;
+@color-nu: @colorPreset6_color1_light;
+
+/* ============= FONT COLORS ================== */
+
+.text-alpha {color: @gray-white;}
+.text-beta {color: @colorPreset6_color1;}
+.text-gamma {color: @colorPreset6_color2;}
+.text-delta {color: @colorPreset6_color3;}
+.text-epsilon {color: @colorPreset6_color4;}
+
+.text-primary {color: @color-alpha;}
+.text-success {color: @color-epsilon;}
+.text-info {color: @color-gamma;}
+.text-warning {color: @color-beta;}
+.text-danger {color: @color-delta;}
+
+/* ============= THEMES BUTTONS =============== */
+
+@btn-default-bg: @color-alpha;
+@btn-primary-bg: @color-epsilon;
+@btn-success-bg: @color-gamma;
+@btn-info-bg: @color-beta;
+@btn-warning-bg: @color-delta;
+@btn-danger-bg: @gray-base;
+
+/* ============= BG USED FOR NAV ============== */
+
+.bgrgba(0, 0, 0, 0) {
+    background: rgba(255, 255, 255, 0.8);
+}
+
+/* ============= BGCOLORS ===================== */
+
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-gamma, @color-theta);
+    .fa {color: @gray;}
+}
+
+.bg-beta {
+    .SetDisplayColor (@color-epsilon, @color-alpha);
+    .LinkColor (@color-gamma, @color-gamma);
+}
+
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @color-alpha);
+    .LinkColor (@color-delta, @color-kappa);
+}
+
+.bg-delta {
+    .SetDisplayColor (@color-beta, @color-alpha);
+    .LinkColor (#db771f, #db771f);
+}
+
+.bg-epsilon {
+    .SetDisplayColor (@color-delta, @gray);
+    .LinkColor (#3080d1, #3080d1);
+}
+
+/* ============= TYPO ========================= */
+
+a {
+    color: @color-gamma;
+    &:hover, &:focus {
+        color: @color-beta;
+    }
+}
+
+/* ============= STRUCTURE ==================== */
+
+#wrapwrap {
+    .navbar-default .container .navbar-collapse #top_menu li:not(.active):hover {
+        border-bottom-color: @color-gamma;
+    }
+
+    > footer {
+        #footer, .container {
+            background-color: @color-delta !important;
+            h3, h4 {
+                color: @colorPreset6_color3;
+            }
+        }
+    }
+}
+
+.contact-box {
+    color: @color-alpha;
+}
@@ -0,0 +1,27 @@
+body {
+    font-size: 16px;
+}
+#wrapwrap {
+    font-family: "Oxygen-Regular";
+
+    .navbar-default .container .navbar-collapse #top_menu li > a > span {
+        font-size: 14px;
+    }
+
+    h1, h2, h3 {
+        font-family: "ComicBold";
+    }
+    h4, h5, h6 {
+        font-family: "ComicRegular";
+    }
+    #top_menu > li > a {
+        font-family: "ComicBold";
+    }
+    .category-name {
+        font-family: "ComicBold";
+        font-size: 50px;
+    }
+    .products_pager {
+        font-size: 13px;
+    }
+}
@@ -0,0 +1,21 @@
+body {
+    font-size: 14px;
+}
+#wrapwrap {
+    font-family: 'Cabin-Regular';
+
+    h1, h2, h3, h4, h5, h6 {
+        font-family: "DinRegular";
+    }
+    #top_menu > li > a {
+        font-family: "DinRegular";
+        font-size: 20px;
+    }
+    .category-name {
+        font-family: "DinCondensed";
+        font-size: 4vw;
+    }
+    .products_pager {
+        font-size: 13px;
+    }
+}
@@ -0,0 +1,34 @@
+body {
+    font-size: 18px;
+}
+#wrapwrap {
+    font-family: "Fontastique";
+
+    h1, h2, h3 {
+        font-weight: bold;
+    }
+    p {
+        font-family: "Abel-Regular";
+    }
+    .category-name {
+        font-family: 'AdventPro-Bold';
+        font-size: 2.5vw;
+        text-transform: uppercase;
+    }
+    #products_grid_before {
+        > ul > li > a, .main-category {
+            font-family: "Abel-Regular";
+        }
+    }
+    .basket {
+        font-family: "Abel-Regular";
+    }
+    .products_pager {
+        font-size: 13px;
+    }
+    .custom-footer {
+        a, .contact-box {
+            font-family: "Abel-Regular";
+        }
+    }
+}
@@ -0,0 +1,21 @@
+body {
+    font-size: 16px;
+}
+#wrapwrap {
+    font-family: "Muli-Light";
+
+    .navbar-default .container .navbar-collapse #top_menu li > a > span {
+        font-size: 15px;
+    }
+
+    h1, h2, h3 {
+        font-weight: bold;
+    }
+    .category-name {
+        font-family: "LuminariRegular";
+        font-size: 3vw;
+    }
+    .products_pager {
+        font-size: 13px;
+    }
+}
@@ -0,0 +1,56 @@
+body {
+    font-size: 14px;
+}
+#wrapwrap {
+    font-family: "NotoRegular";
+    font-size: 14px;
+
+    h1, h2, h3 {
+        font-family: "NotoBold";
+        font-weight: bold;
+        margin-bottom: 30px;
+    }
+    h4, h5, h6 {
+        font-family: "NotoRegular";
+        margin-bottom: 30px;
+    }
+    h1 {
+        font-size: 47px;
+    }
+    h2 {
+        font-size: 40px;
+    }
+    h3 {
+        font-size: 32px;
+    }
+    h4 {
+        font-size: 27px;
+    }
+    h5 {
+        font-size: 22px;
+    }
+    h6 {
+        font-size: 18px;
+    }
+    #top_menu > li > a {
+        font-family: "Fecske";
+    }
+    .category-name {
+        font-family: "Fecske";
+        font-size: 4vw;
+    }
+    .basket a {
+        font-size: 12px;
+    }
+    #products_grid_before {
+        .main-category {
+            font-weight: bold;
+        }
+    }
+    .products_pager {
+        font-size: 13px;
+    }
+}
+#footer h3 {
+    font-size: 25px;
+}
@@ -0,0 +1,19 @@
+#wrapwrap {
+    font-family: "ProximaRegular";
+
+    h1, h2, h3 {
+        font-family: "ProximaBold";
+    }
+    #top_menu > li > a {
+        font-family: "ProximaLight";
+    }
+    .category-name {
+        font-family: "DinCondensed";
+        font-size: 4vw;
+    }
+    #products_grid_before {
+        > ul > li > a, .main-category {
+            font-family: "ProximaBold";
+        }
+    }
+}
@@ -0,0 +1,17 @@
+#wrapwrap {
+    > main > #wrap {
+        @media (min-width: @screen-md-min) {
+            width: @screen-md-min - 50;
+            margin: 50px auto;
+        }
+
+        &.container {
+            width: @screen-md-min;
+            max-width: 100%;
+        }
+    }
+    .container {
+        width: @screen-md-min;
+        max-width: 100%;
+    }
+}
@@ -0,0 +1,3 @@
+#wrapwrap > main .website_forum {
+    margin-bottom: 50px;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background: url("/theme_kiddo/static/src/img/pattern/pineapplecut.png") repeat fixed;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background: url("/theme_kiddo/static/src/img/pattern/pattern_02.png") repeat fixed;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background: url("/theme_kiddo/static/src/img/pattern/skulls.png") repeat fixed;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background: url("/theme_kiddo/static/src/img/pattern/sprinkles.png") repeat fixed;
+}
@@ -0,0 +1,3 @@
+#wrapwrap {
+    background: url("/theme_kiddo/static/src/img/pattern/tileable_wood_texture.png") repeat fixed;
+}
--- a/Show More
+++ b/Show More