5htp-core 0.0.8 → 0.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "5-HTP, scientifically called 5-Hydroxytryptophan, is the precursor of happiness neurotransmitter.",
-	"version": "0.0.8",
+	"version": "0.1.0",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/assets/css/components/button.less

@@ -1,3 +1,12 @@
+/*----------------------------------
+- CONFIG
+----------------------------------*/
+
+@sizeActiveIndicator: 0.3rem;
+
+/*----------------------------------
+- BUTTON
+----------------------------------*/
 .btn {
 
     // Layout
@@ -18,8 +27,26 @@
     font-weight: 600;
 
     // Colors
-    background: transparent;
-    color: var(--cTxtBase); 
+    color: var(--cTxtAccent);  
+        
+    // Hover
+    transition: all .5s linear;
+    &:hover,
+    &.selected,
+    li:hover > & {
+
+        color: var(--cTxtImportant);
+        transition: all .1s linear;
+        
+        > i {
+            color: var(--cAccent)
+        }
+    }
+
+    // Click
+    &.pressed {
+        transform: scale(0.9);
+    }
 
     &,
     > .label {
@@ -44,12 +71,9 @@
         }
     }
 
-    &:not(.color):not(.icon) > i {
-        color: var(--c2);
-    }
-
     > i {
         font-size: 1.2em;
+        color: inherit;
     }
 
     > img {
@@ -68,36 +92,11 @@
     /*----------------------------------
     - THEME
     ----------------------------------*/
-    
-    // Hover / Click
-    transition: all .5s linear;
-    &:not([disabled]) {
-        
-        &:hover,
-        &.selected,
-        li:hover > & {
-            background: var(--cBgHover);
-            color: var(--cTxtImportant);
-            transition: all .1s linear;
-        }
-
-        &.pressed {
-            transform: scale(0.9);
-        }
-    }
-
-    // On donne moins d'importance à chaque bouton lorsqu'ils sont dans une liste (ex: menu)
-    /*li > &,
-    .menu > & {
-
-        &:not(.primary):not(.selected) {
-            color: inherit;
-        }
-    }*/
 
-    &.primary {
+    &.bg {
 
         background: var(--cBg);
+        color: var(--cTxtBase);
         
         &:not(:disabled) {
             &:hover,
@@ -126,13 +125,6 @@
 
     cursor: pointer;
 
-    &:not(.primary):hover,
-    &:not(.primary).selected {
-        &, & > i {
-            color: var(--cTxtImportant);
-        }
-    }
-
     &:not(.primary).selected {
 
         &.col {
@@ -206,7 +198,7 @@
 }
 
 /*----------------------------------
-- sHOW BUBBLE ON HOVER
+- BUTTON IN LISTS
 ----------------------------------*/
 
 ul.col,
@@ -215,9 +207,20 @@ ul.row {
     &.menu > .btn, 
     &.menu > li > .btn {
 
+        // Give less imortance to buttons which are in lists
+        color: var(--cTxtBase);  
         box-shadow: none;
+        border: none;
         width: 100%;
+        background: transparent;
+
+        &.selected,
+        &:hover {
+            background: var(--cBg2);
+            color: var(--cTxtImportant);
+        }
 
+        // All the list items label must be aligned
         > .label {
             justify-content: flex-start;
         }
@@ -327,8 +330,8 @@ ul.col {
                 position: absolute;
 
                 top: -@sizeComponent;
-                left: calc(0em - @spacingComponent);
-                right: calc(0em - @spacingComponent);
+                left: calc(0em - @spacing);
+                right: calc(0em - @spacing);
 
                 height: 100%;
             }
@@ -345,7 +348,7 @@ ul.col {
             left: auto;
             margin-left: 0;
             right: 100%;
-            margin-right: @spacingComponent;
+            margin-right: @spacing;
         }
     }
 }

package/src/client/assets/css/components/card.less

@@ -1,18 +1,25 @@
-.card {
-   
+@import (reference) "../theme.less";
+
+.card,
+.msg {
     position: relative; // For .overlay
-    padding: @spacing;
-    background-color: var(--cBg);
     color: var(--cTxtBase);  
     border-radius: @radius;
+}
+
+.card {
+
+    background-color: var(--cBg);
+    padding: @spacing;
 
-    &.clickable {
-        cursor: pointer;
+    &.bg {
+        --cBg: difference(@cBgPage, #0a0a0a);
+        --cBg2: difference(@cBgPage, #111);
+        background: var(--cBg);
 
-        &:hover {
-            > * {
-                --cTxtImportant: @c1;
-            }
+        &.img {
+            background-position: center;
+            background-size: cover;
         }
     }
 
@@ -52,25 +59,25 @@
 
     > .cov-t {
 
-        margin-top: calc( -1 * @spacingComponent );
+        margin-top: calc( -1 * @spacing );
     }
 
     > .cover,
     > .table {
 
-        margin-left: calc( -1 * @spacingComponent );
-        margin-right: calc( -1 * @spacingComponent );
+        margin-left: calc( -1 * @spacing );
+        margin-right: calc( -1 * @spacing );
 
         &:first-child {
             border-top-left-radius: @radius;
             border-top-right-radius: @radius;
-            margin-top: calc( -1 * @spacingComponent );
+            margin-top: calc( -1 * @spacing );
         }
 
         &:last-child {
             border-bottom-left-radius: @radius;
             border-bottom-right-radius: @radius;
-            margin-bottom: calc( -1 * @spacingComponent );
+            margin-bottom: calc( -1 * @spacing );
         }
     }
 
@@ -81,15 +88,30 @@
     }
 }
 
-iframe {
-    border: none;
+.msg, .card.bg.info {
+    
+    padding: @spacing @spacing * 2;
+
+    .build-theme( lighten(@cInfo, 35%), darken(@cInfo, 20%));
+
 }
 
-header.card {
-    > i {
-        font-size: 3em;
-        line-height: 1em;
+.msg, .card.bg {
+    &.error {
+        .build-theme( lighten(@cInfo, 35%), darken(@cInfo, 20%));
     }
+
+    &.warn {
+        .build-theme( lighten(@cWarn, 25%), darken(@cWarn, 30%));
+    }
+
+    &.success {
+        .build-theme( lighten(@cSuccess, 50%), darken(@cSuccess, 30%));
+    }
+}
+
+iframe {
+    border: none;
 }
 
 .dropArea {

package/src/client/assets/css/components/components.less

@@ -0,0 +1,25 @@
+.card,
+.input.text,
+.btn,
+i.solid {
+
+    .build-theme( #fff, #8E8E8E);
+
+    &:not(.bg) {
+        background: white;
+        box-shadow: 0 10px 20px fade(#000, 10%);
+        border: solid 1px fade(#000, 10%);
+        border-radius: @radius;
+    }
+
+    .bg & {
+        box-shadow: none;
+        border: none;
+    }
+}
+
+.btn:hover,
+.input.text.focus {
+    z-index: 5;
+    box-shadow: 0 10px 50px fade(#000, 15%);
+}

package/src/client/assets/css/components/lists.less

@@ -1,4 +1,14 @@
-ul {
+/*----------------------------------
+- CONFIG
+----------------------------------*/
+
+@sizeStep: 2.2em;
+@itemLineHeight: 1.5em;
+
+/*----------------------------------
+- BASIC LISTS
+----------------------------------*/
+ul, ol {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -10,11 +20,8 @@ ul {
     }*/
 }
 
-/*----------------------------------
-- Liste classique
-----------------------------------*/
 ul.liste, 
-ol.liste {
+ol.steps {
     // Doit hériter des parents
     //line-height: 1.5em;
     text-align: left;
@@ -41,7 +48,7 @@ ul.liste {
         &:before {
             content: '➜';
             font-size: 1.4em;
-            color: var(--c2);
+            color: var(--cAccent);
         }
     }
 
@@ -71,7 +78,6 @@ ul.liste {
     }
 }
 
-@sizeStep: 3rem;
 ol.steps {
 
     counter-reset: step-counter;
@@ -81,11 +87,19 @@ ol.steps {
 
         &:before {
             content: counter(step-counter);
+            font-size: 0.8em;
         }
 
-        li.row {
+        &.active::before {
+            background-color: var(--cAccent);
+        }
+
+        // Stepnumber = at the left
+        &:not(.col) {
     
-            padding-left: 30px;
+            padding-left: @sizeStep + (@spacing / 2);
+            padding-top: (@sizeStep - @itemLineHeight) / 2;
+            line-height: @itemLineHeight;
             margin: 5px 0;
     
             &:before {
@@ -93,7 +107,8 @@ ol.steps {
             }
         }
     
-        li.col {
+        // Step number = at the top
+        &.col {
     
             /*padding-left: 30px;
             margin: 5px 0;*/
@@ -107,14 +122,14 @@ ol.steps {
 
 ol.steps > li:before,
 strong.step {
-    color: var(--c1);
-    font-weight: 700;
+    
     background: @c1SuperLight;
+    color: @c1;
 
     text-align: center;
-    width: @sizeStep;
-    height: @sizeStep;
-    line-height: @sizeStep;
+    width: @sizeStep * 1.2;
+    height: @sizeStep * 1.2;
+    line-height: @sizeStep * 1.2;
     border-radius: 50%;
 }
 

package/src/client/assets/css/components/other.less

@@ -52,9 +52,8 @@ img.bg-cover {
     height: @t_pastille;
     border-radius: 50%;
 
-    --color: #e243bc;
-    background: var(--color);
-    box-shadow: 0 0 25px var(--color);
+    background: var(--cBg);
+    box-shadow: 0 0 25px var(--cBg);
 
     &.l {
         width: 2rem;
@@ -117,7 +116,12 @@ strong.placeholder {
 }
 
 hr {
+
     border: none;
-    border-top: solid 1px var(--cLine2);
-    margin: 1.65rem 0;
+
+    &::before {
+        display: block;
+        content: '• • •';
+        color: var(--cTxtDesc);
+    }
 }

package/src/client/assets/css/core.less

@@ -7,6 +7,7 @@
 @import './text/icons.less';
 @import './text/titres.less';
 
+@import './components/components.less';
 @import './components/input.less';
 @import './components/button.less';
 @import './components/lists.less';

package/src/client/assets/css/layouts.less

@@ -83,6 +83,20 @@
             }
         }
     }
+
+    &.unibody {
+
+        gap: 0;
+        
+        > :not(:first-child) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+        > :not(:last-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
 }
 
 .row.champs {
@@ -217,6 +231,7 @@
     Déclarer une grid: grid x-3
     Placer un element: x1-3
 */
+@gridUnit: 6.66rem;
 .zones(@nb, @i: 1) when (@i <= @nb) {
 	/*----------------------------------
 	- ZONES DE LA GRILLE
@@ -287,23 +302,23 @@
     // Automatique
     .taille-auto(@min, @max) when (@min <= @max) {
 		&.xa@{min}-@{max} {
-			grid-template-columns: repeat(auto-fit, minmax(@min * 100px, @max * 100px))
+			grid-template-columns: repeat(auto-fit, minmax(@min * @gridUnit, @max * @gridUnit))
 		}
 		&.ya@{min}-@{max} {
-			grid-template-rows: repeat(auto-fit, minmax(@min * 100px, @max * 100px))
+			grid-template-rows: repeat(auto-fit, minmax(@min * @gridUnit, @max * @gridUnit))
 		}
 		.taille-auto(@min + 1, @max);
     }
     &.xa@{i} {
-        grid-template-columns: repeat(auto-fit, minmax(@i * 100px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(@i * @gridUnit, 1fr));
         &5 {
-            grid-template-columns: repeat(auto-fit, minmax(@i * 100px + 4.15rem, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(@i * @gridUnit + 4.15rem, 1fr));
         }
     }
     &.ya@{i} {
-        grid-template-rows: repeat(auto-fit, minmax(@i * 100px, 1fr));
+        grid-template-rows: repeat(auto-fit, minmax(@i * @gridUnit, 1fr));
         &5 {
-            grid-template-rows: repeat(auto-fit, minmax(@i * 100px + 4.15rem, 1fr));
+            grid-template-rows: repeat(auto-fit, minmax(@i * @gridUnit + 4.15rem, 1fr));
         }
     }
 	.taille-auto(1, @i);
@@ -347,10 +362,10 @@
         break-inside: avoid;
     }
 
-    &.xa1 { column-width: 100px;  }
-    &.xa2 { column-width: 200px;  }
+    &.xa1 { column-width: @gridUnit;  }
+    &.xa2 { column-width: @gridUnit * 2;  }
     &,
-    &.xa3 { column-width: 300px;  }
-    &.xa4 { column-width: 400px;  }
+    &.xa3 { column-width: @gridUnit * 3;  }
+    &.xa4 { column-width: @gridUnit * 4;  }
 
 }

package/src/client/assets/css/medias.less

@@ -4,8 +4,10 @@ img {
     max-width: 100%;
     display: block;
 
-    &.image {
+    &.img {
         border-radius: @radius;
         background: @cBgPage - #101010;
+        object-fit: cover;
+        object-position: center;
     }
 }

package/src/client/assets/css/spacing.less

@@ -6,8 +6,9 @@
     &.sp-0 { gap: 0px; }
     &.sp-05 { gap: @spacing / 2; }
     &, &.sp-1 { gap: @spacing }
-    &.sp-2 { gap: @spacingLayout; }
+    &.sp-2 { gap: @spacing * 2; }
     &.sp-3 { gap: @spacing * 3; }
+    &.sp-4 { gap: @spacing * 4; }
 }
 
 .pd { padding: @spacing; }

package/src/client/assets/css/text/icons.less

@@ -32,7 +32,7 @@ i {
     }
 
     &.solid {
-        color: var(--c2);
+        color: var(--cAccent2);
 
         width: @sizeComponent;
         flex: 0 0 @sizeComponent;

package/src/client/assets/css/text/text.less

@@ -5,6 +5,7 @@ a {
     color: inherit;
     cursor: pointer;
     text-decoration: underline;
+    text-decoration: none;
 
     &:not([disabled]):hover, 
     &.active {
@@ -12,12 +13,16 @@ a {
     }
 
     &.super {
-        position: absolute;
-        top: 0; left: 0; right: 0; bottom: 0;
-        z-index: 5;
-
-        ~ a, ~ * a, ~ button, ~ * button {
-            z-index: 6;
+        text-decoration: none;
+        &::after {
+            content: ' ';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            z-index: 5;
+    
+            ~ a, ~ * a, ~ button, ~ * button {
+                z-index: 6;
+            }
         }
     }
 }
@@ -27,7 +32,7 @@ a {
 }
 
 p, .p {
-    text-align: center;
+    text-align: justify;
     line-height: 1.8em;
     margin: 0; // Overwrite browser defaults
 }
@@ -70,10 +75,10 @@ p, .p {
 .txt-blanc { color: #fff !important; }
 
 .txtPrimary, .txtC1 {
-    color: var(--c1);
+    color: var(--cAccent);
 }
 
-.txtC2 { color: var(--c2); }
+.txtC2 { color: var(--cAccent2); }
 
 /*----------------------------------
 - TAILLE
@@ -142,11 +147,12 @@ em {
         content: ' ';
         display: block;
         height: 0.5em;
-        background: var(--c2);
+        border-radius: 0.25em;
+        background: var(--cAccent2);
 
         position: absolute;
         z-index: -1;
-        bottom: 0.15em;
+        bottom: 0.05em;
         left: -0.1em;
         right: -0.1em;
     }

package/src/client/assets/css/text/titres.less

@@ -18,24 +18,24 @@ h3 {
     }
 
     strong {
-        color: var(--c1);
+        color: var(--cAccent);
         font-weight: inherit;
     }
 }
 
 // sans input.h1, .h1 seul ne peut pas override le style par défaut des champs
 h1, .h1 {
-    font-size: 1.8rem;
+    font-size: @h1Size;
     line-height: 1.3em;
 }
 
 h2, .h2 {
-    font-size: 1.3rem;
+    font-size: @h2Size;
     line-height: 1.6em;
 }
 
 h3, 
 fieldset > legend {
-    font-size: 1.16rem;
-    line-height: 2rem;
+    font-size: @h3Size;
+    line-height: 2em;
 }

package/src/client/assets/css/theme.less

@@ -4,21 +4,30 @@
 .build-theme( 
     @bg, 
     @fg: if( lightness(@bg) >= 80%, @bg - @fgDelta, @bg + @fgDelta),
-    @apply: true,
-
-    @bgChild: @bg + @bgDelta,
-    @fgChild: if( lightness(@bgChild) >= 80%, @bgChild - @fgDelta, @bgChild + @fgDelta)
+    @cAccent: @c1,
+    @cAccent2: @c2,
+    @apply: true
 ) {
 
     @isLight: boolean( lightness(@bg) >= 80% );
 
+    --cAccent: @cAccent;
+    --cAccent2: @cAccent2;
+
     // Background
+    // TODO: Nettoyer
+    @bg2: @bg - #121212;
     @bgDark: darken(@bg, 5%);
     @bgDarkPlus: darken(@bg, 10%);
     --cBg: @bg; 
+    --cBg2: @bg2;
     --cBgAccent: @bgDark;
     --cBgAccentPlus: @bgDarkPlus;
     --cBgControl: if( @bg = #fff, @cBgPage, #fff );
+    --cBgHover: #f5f5f5;
+
+    @cBgHighlight: @bg + #111;
+    --cBgHighlight: @cBgHighlight;
 
     // Other
     @cLine: if( @isLight, @bg - #151515, @bg + #151515);
@@ -26,10 +35,6 @@
     --cLine: @cLine;
     --cLine2: @cLine2;
 
-    > * {
-        --c1: if( @isLight, @c1, #ffffff );
-    }
-
     // Text
     .build-theme-txt(@fg, @bg, @apply);
 
@@ -50,18 +55,15 @@
 
     @isLight: boolean( lightness(@bg) >= 70% );
     
-
     // Text
     @cTxtDiscret: if( @isLight, @bg - #444, @bg + #444);
     @cTxtDesc: if( @isLight, @cTxtBase + #222, @cTxtBase - #222);
     @cTxtImportant: if( @isLight, @cDark, #fff);
+    @cTxtAccent: if( @bg = @c1, @cTxtImportant, @c1);
 
     --cTxtDiscret: @cTxtDiscret;
     --cTxtDesc: @cTxtDesc;
     --cTxtBase: @cTxtBase;
     --cTxtImportant: @cTxtImportant;
-
-    /*& when (lightness(@bg) < 90%) {
-        --c1: @cTxtImportant;
-    }*/
+    --cTxtAccent: @cTxtAccent;
 }