[ADD] theme 9.0

2021-05-11 15:45:12 +02:00
commit ab6e6bb96c
3795 changed files with 143023 additions and 0 deletions
@@ -0,0 +1,192 @@
+<section class="container">
+    <h2 class="text-muted mt16">Html5 Responsive Bootstrap Theme for Odoo CMS</h2>
+    <hr>
+    <p class="lead">Kiddo is a professional responsive HTML5 theme, built using Bootstrap3,
+    the most popular front-end framework for developing responsive, mobile
+    first projects on the web. Just drag &amp; drop the new building blocks
+    you need to easily build your layout. All layouts are made of sections,
+    that you can easily combine to fit your specific project.</p>
+    <img src="Kiddo_description.png" class="img-responsive center-block">
+    <hr>
+
+    <h2 class="mt32 text-muted">Kiddo Customization Tool</h2>
+    <p class="mb32">Theme Kiddo comes with customization tools.&nbsp;You can easily change the background, the colors and the font combination of your website or you a preset.</p>
+    <div class="row">
+        <div class="col-md-4">
+            <img src="customtool.jpg" class="img-responsive center-block">
+        </div>
+        <div class="col-md-8">
+            <h3>Theme Kiddo comes with a lot of options</h3>
+            <ul>
+                <li>6 PRESETS</li>
+                <li>WIDE OR BOXED LAYOUT</li>
+                <li>CUSTOM FOOTER</li>
+                <li>6 COLOR SCHEMES</li>
+                <li>8 BACKGROUND SHADES OR USE YOUR OWN</li>
+                <li>6 FONT COMBINATIONS</li>
+                <li>10 BACKGROUND PATTERNS</li>
+            </ul>
+            <br/>
+            <p>All the background, color and font combinations were made to work together. You can not go wrong with the settings.</p>
+
+            <h3>Minimalistic Flat Design</h3>
+            <p>Kiddo was made with easy customization and branding in mind. Based on simple, modern and typographical elements, it allows you to easily customize your website.</p>
+
+            <h3>6 Prebuild Presets</h3>
+            <p>You don't have the time to play with options? Don't worry, Kiddo gives you six full presets wich combine colors, fonts and background.</p>
+
+            <p>This theme has an <a href="https://apps.odoo.com/apps/9.0/theme_kiddo_sale/">additional eCommerce plugin</a>.</p>
+        </div>
+    </div>
+    <hr/>
+
+    <h2 class="text-muted">Kiddo Building Blocks</h2>
+    <p class="mb32">You get a new complete range of building blocks.</p>
+    <div class="row">
+        <div class="col-md-4">
+            <h4 class="text-muted">CONTENT BLOCKS</h4>
+            <ul class="mb16">
+                <li>Title</li>
+                <li>1 Column Text</li>
+                <li>2 Column Text</li>
+                <li>3 Column Text</li>
+                <li>4 Column Text</li>
+                <li>Custom Button</li>
+                <li>Separator Block</li>
+            </ul>
+            <h4 class="text-muted mb16">STRUCTURE BLOCKS</h4>
+            <ul class="mb16">
+                <li>Custom Banner</li>
+                <li>Big Picture + Text</li>
+                <li>Text + Big Picture</li>
+                <li>Cubes</li>
+                <li>Features Carousel</li>
+                <li>Header + Text + Picture</li>
+                <li>Product List</li>
+                <li>Text + Image + Text</li>
+            </ul>
+        </div>
+        <div class="col-md-4">
+            <h4 class="text-muted">FEATURES BLOCKS</h4>
+            <ul class="mb16">
+                <li>Slide Banner</li>
+            </ul>
+            <h4 class="text-muted">EFFECTS BLOCKS</h4>
+            <ul class="mb16">
+                <li>Big Image Parallax</li>
+            </ul>
+        </div>
+        <div class="col-md-4">
+            <h3>Customize Your Blocks</h3>
+            <p class="mb16">Each building blocks comes with its own options.&nbsp;</p>
+            <img src="customtool2.jpg"
+            class="img-responsive center-block">
+        </div>
+    </div>
+    <p>Some fonts might not work with extended charsets.</p>
+    <p>The images in the theme are copyrighted and can't be used outside of the odoo.com domain.</p>
+    <hr>
+
+    <h1 class="text-center">CONTRIBUTORS LIST</h1>
+    <br/>
+    <p class="strong text-center">This theme was created with the help of our user community.</p>
+
+    <h3 class="text-center">Thanks to our backers the Indiegogo campaign was a success!</h3>
+    <p class="text-center"><a>https://www.indiegogo.com/projects/bootstrap-themes-for-odoo-cms/</a></p>
+    <br/>
+
+    <h1 class="text-center"><u>Main Sponsor</u></h1>
+    <br/>
+    <div class="row">
+        <div class="col-md-2">
+            <a href="http://www.aselcis.com/" target="blank">
+                <img src="contributors/aselcis.jpg" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="http://www.bas-solutions.nl/" target="blank">
+                <img src="contributors/bas-solutions.png" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="http://www.bloopark.de/" target="blank">
+                <img src="contributors/bloopark.png" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="http://www.brouwland.com" target="blank">
+                <img src="contributors/brouwland.jpg" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="http://www.catsanddogs.com/" target="blank">
+                <img src="contributors/catsdogs.png" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="https://www.hucke-media.de/" target="blank">
+                <img src="contributors/huckemedia.png" class="img-responsive center-block"/>
+            </a>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-2">
+            <a href="http://www.datadialog.net/" target="blank">
+                <img src="contributors/dialognet.png" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="http://www.dynapps.be/" target="blank">
+                <img src="contributors/dynapps.jpg" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="http://opusvl.com/" target="blank">
+                <img src="contributors/opusvl.png" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="http://oxenworkwear.com/" target="blank">
+                <img src="contributors/oxen.jpg" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="http://www.simplit.co/" target="blank">
+                <img src="contributors/simplitco.jpg" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="http://www.sodexis.com/" target="blank">
+                <img src="contributors/sodexis.jpg" class="img-responsive center-block"/>
+            </a>
+        </div>
+    </div>
+    <div class="row mb32">
+        <div class="col-md-2 col-md-offset-3">
+            <a href="https://www.techreceptives.com" target="blank">
+                <img src="contributors/tech-receptives.png" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="http://www.applicatour.com/" target="blank">
+                <img src="contributors/applicatour.jpg" class="img-responsive center-block"/>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <a href="https://vauxoo.com" target="blank">
+                <img src="contributors/vauxoo.png" class="img-responsive center-block"/>
+            </a>
+        </div>
+    </div>
+    <br/>
+
+    <p>Ross Whiting, Oxenworkwear - Hans Balis - Stephan Keller, Sodexis, Inc. - Michael Hucke, Hucke Media GmbH & Co. KG - Joachim Grubelnik, DaDi EDV GmbH datadialog.net - DynApps - Cats&Dogs bvba - Bloopark systems GmbH & Co. KG - Parthiv Patel, Tech Receptives Solutions Pvt. Ltd. - Stuart Mackintosh, OpusVL - Erwin van der Ploeg, BAS Solutions - ali Zuaby, simplit co - Aselcis Consulting - Nhomar Hernandez, Vauxoo</p>
+
+    <h1 class="text-center"><u>Sponsor</u></h1>
+    <br/>
+    <p>Robert Baumgartner, datenpol gmbh - openBIG - Russell Phillippe, Protogenos Ltd - Julien Allo, Julius - EasyPME - Jonathan Wilson, WillowIT Pty Ltd - Xavier Mallein, MAallein - Pedro M. Baeza, Serv. Tecnol. Avanzados - Daniel Dico, OERP Canada - Jantz Business Group b.v. - LogicaSoft Consulting  - Eric Caudal, Elico Corp - Ermin Trevisan, Twanda - Jean-François Mattler, OpenFid SAS - Alex Ferrer, Lannex IT Solutions - Tony Gu, Shine IT Co. Ltd. 先安科技 - TaPo-IT OG - Jos De Graeve, Apertoso - Nicolas Rigo, eezee-it - Luis Miguel Varón E, Colorisa S.A - OpenBias - Stanislas Drouin Applicatour
+
+    <h1 class="text-center"><u>Power Designer</u></h1>
+    <br/>
+    <p>Rohit Thakral - François Dhommeaux, Ubic Informatique - Judson Alves, Market Home Delivery - Eric Flaux, ABF Osiell - Gilles Dupont - Arnis Putniņš - Johnson Martt, GetOpenERP (Part of OpenStow Technologies) - Gianluca Milano - Daniel Stolovich, ATEL S.A. - Equitania Software GmbH - Senthilnathan G - Houssine Bakkali - Arend Trip - Kevin Woolf, Baba Kevin's American Barbecue Co., Ltd. - toodoo sàrl - Zoltan Gabor 'Apersis' - Tom De Decker, WEB2GO LTD - Nicolás Cavalier Montenegro, STOREGUD CORPORATION SAC - Keirse Jerome - REAL Solutions S.A. - Davide Corio - Brice Muangkhot - Melvin Miguel Martinez, Mendoza Hernandez - Auditores - Chua Wen Ching - Tran Minh Tri working, ungdungtinhoc.com - Badisheng Morena - Sogexis - Josh Wardini - The Tee Shirt Bakery - Bruce Letterle, Red Lab Media - Benoit Vankoningsloo - Francisco Manuel Garcia Claramonte. - Paulina Mikolajczak-Blasco - Collectiv - Tony Fernando - Herbert Riener, rigaConcepts - Kalmen Chia, E-Global SCM Solution Sdn Bhd - Rob North, Pair A Dice Games - David E. Vargas, CloudShop - François Le Gal - Calin Chete (24h Solutions) - Maria Gabriela Fong, MAGA Systems & Consulting - Pascal Behr, Cytosurge AG - Marc Antwertinger - Opencloud Unipessoal, Lda - Ruchir Shukla, BizzAppDev - Michael Hucke, Hucke Media GmbH & Co. KG - Mathias Neef, copadoMEDIA UG - Pablo Arias - Same Motion - livingprocess.de - Habib Ayob - Igor Jovanovic - Liangming Wang, Weixuan Inc. - Jason Au Yeung, Binary System Limited - Fredrik Arvas, Arvas International AB - Martin Temmink, Zigaret - Mathieu Vanneste, Flockdesign - Filip Fruru, Instant Media - Marianne Wilmsmeier, Fabrik Fünf GmbH - Vertex Group Enterprises - Bingen Eguzkitza - Herczeg Péter, InnOpen Group Kft  - Giles Hohnen - Luis Felipe Miléo, KMEE - Maria Gabriela Fong, MAGA Systems & Consulting - Aaron Magon, Web Industries - Andrew Trueman, B.M. Trueman & Partners - Sven Petersen, Conexus - Nous Cambas - Oliver Yuan, OpenStone - Henri Ibowili, A-YANT.COM - Nicolas JEUDY - Helmut Drewes - Maik Steinfeld, Streward - Hans Henrik Gabelgaard - AJ Rosman - Eduard - Patrick Darribet, SUDOKEYS - Camptocamp - Cyril Morisse - Alejandro Santana - Eva Pinter, YBO - Mathias Neef, copadoMEDIA UG - Jean-Christophe Perrot, LOGICASOFT - Zarshed Ali, HiTechnologia - Stefan Reisich - Maxime Chambreuil, Savoir-faire Linux - Mario Gielissen, Openworx - Nicholas Burdic, Aptoworks LLC - Olivier Lenoir
+</section>
@@ -0,0 +1,102 @@
+// Events
+
+#left_column {
+    > .nav-pills > li {
+        &.active > a {
+            background-color: rgba(0, 0, 0, 0);
+            color: @color-beta;
+        }
+        > a:hover {
+            background-color: rgba(0, 0, 0, 0);
+        }
+    }
+}
+
+// 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: rgba(0, 0, 0, 0);
+            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: rgba(0, 0, 0, 0);
+                    border: none;
+                    .panel-title {
+                        font-size: 20px;
+                    }
+                }
+                &.note-editor {
+                    text-align: initial;
+                }
+            }
+        }
+        .question .mt16 {
+            padding: 10px;
+            background: rgb(230, 230, 230);
+        }
+        .alert .close {
+            background: rgba(0, 0, 0, 0);
+        }
+    }
+}
+
+.forum_docs {
+    margin-top: 30px;
+    padding: 10px 35px;
+    background-color: white;
+}
@@ -0,0 +1,198 @@
+
+/* ================== 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
+@white:         #ffffff;
+@black:         #000000;
+@color-alpha:   @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%);
+
+/* ========================= BLACK ========================= */
+
+.black {
+    .SetDisplayColor (@black, @gray);
+}
+
+/* ========================= WHITE ========================= */
+
+.white {
+    .SetDisplayColor (@white, @gray);
+}
+
+/* ========================= GRAY ========================= */
+
+.gray {
+    .SetDisplayColor (@gray, @white);
+    h1, h2, h3, h4, h5, h6 {
+        .SetTextShadow (2px, @black);
+    }
+}
+
+/* ========================= LIGHTGRAY ========================= */
+
+.lightgray {
+    .SetDisplayColor (@gray-lighter, @gray);
+    h1, h2, h3, h4, h5, h6 {
+        .SetTextShadow (1px, @white);
+    }
+    .menublock {
+        border-bottom: 2px solid @gray-light;
+    }
+}
+
+/* ========================= DARKGRAY ========================= */
+
+.darkgray {
+    .SetDisplayColor (@gray-dark, @white);
+    h1, h2, h3, h4, h5, h6 {
+        .SetTextShadow (2px, @black);
+    }
+}
+
+/* ================== FONT COLORS IN THE EDITOR ================= */
+
+.text-blue {color: @black;}
+.bg-blue {background-color: @black;}
+
+.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: @white;}
+.bg-purple {background-color: @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: @white;
+                    text-align: left;
+                }
+                h6, p {
+                    color: @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: @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: @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: @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: @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: @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: @white;}
+                            &:nth-child(4) {background-color: @colorPreset6_color3;}
+                            &:nth-child(5) {background-color: @colorPreset6_color4;}
+                        }
+                    }
+                }
+
+                #bgcolor {
+                    .bg-white {background-color: @white;}
+                    .bg-beige {background-color: @colorPreset6_color4;}
+                    .bg-gray {background-color: @gray-light;}
+                    .bg-black {background-color: @black;}
+                    .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: @black;
+}
@@ -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: @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");
+}
--- a/Show More
+++ b/Show More