5htp-core 0.0.9 → 0.1.1

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.9",
+	"version": "0.1.1",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -72,9 +72,7 @@
 		"uuid-by-string": "^3.0.4",
 		"validator": "^13.7.0",
 		"ws": "^8.2.2",
-		"yaml": "^1.10.2",
-        "preact": "^10.5.15",
-		"preact-render-to-string": "^5.1.19"
+		"yaml": "^1.10.2"
 	},
 	"devDependencies": {
 		"@types/cookie": "^0.4.1",
@@ -85,5 +83,9 @@
 		"@types/universal-analytics": "^0.4.5",
 		"@types/webpack-env": "^1.16.2",
 		"@types/ws": "^7.4.7"
-	}
+	},
+    "peerDependencies": {
+        "preact": "^10.5.15",
+		"preact-render-to-string": "^5.1.19"
+    }
 }

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 {
@@ -202,11 +194,17 @@
         height: auto;
         width: auto;
         padding: 0;
+
+        &, 
+        &:hover {
+            background: none;
+            box-shadow: none;
+        }
     }
 }
 
 /*----------------------------------
-- sHOW BUBBLE ON HOVER
+- BUTTON IN LISTS
 ----------------------------------*/
 
 ul.col,
@@ -215,9 +213,20 @@ ul.row {
     &.menu > .btn, 
     &.menu > li > .btn {
 
+        // Give less imortance to buttons which are in lists
+        color: var(--cTxtBase);  
         box-shadow: none;
-        width: 100%;
+        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 +336,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 +354,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,42 @@
-.card {
-   
+/*----------------------------------
+- CONFIG
+----------------------------------*/
+@import (reference) "../theme.less";
+
+@cardPadding: @spacing * 1.5;
+@cardPaddingLong: @spacing * 2;
+
+/*----------------------------------
+- COMPONENTS
+----------------------------------*/
+.card,
+.msg {
     position: relative; // For .overlay
-    padding: @spacing;
-    background-color: var(--cBg);
     color: var(--cTxtBase);  
     border-radius: @radius;
+}
+
+.card {
+
+    background-color: var(--cBg);
+    padding: @cardPadding;
+
+    &.row {
+        padding: @cardPadding @cardPaddingLong;
+    }
+
+    &.col {
+        padding: @cardPaddingLong @cardPadding;
+    }
 
-    &.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;
         }
     }
 
@@ -36,7 +60,7 @@
     ----------------------------------*/
 
     &.menu {
-        padding: @spacing * 2;
+        padding: @cardPaddingLong;
     }
 
     /*----------------------------------
@@ -52,25 +76,28 @@
 
     > .cov-t {
 
-        margin-top: calc( -1 * @spacingComponent );
+        margin-top: -1 * @spacing;
     }
 
-    > .cover,
-    > .table {
+    &.col > .cover {
 
-        margin-left: calc( -1 * @spacingComponent );
-        margin-right: calc( -1 * @spacingComponent );
+        margin-left: -1 * @cardPadding;
+        margin-right: -1 * @cardPadding;
+        padding-left: @cardPadding;
+        padding-right: @cardPadding;
 
         &:first-child {
             border-top-left-radius: @radius;
             border-top-right-radius: @radius;
-            margin-top: calc( -1 * @spacingComponent );
+            margin-top: -1 * @cardPaddingLong;
+            padding-top: @cardPaddingLong;
         }
 
         &:last-child {
             border-bottom-left-radius: @radius;
             border-bottom-right-radius: @radius;
-            margin-bottom: calc( -1 * @spacingComponent );
+            margin-bottom: -1 * @cardPaddingLong;
+            padding-bottom: @cardPaddingLong;
         }
     }
 
@@ -81,6 +108,28 @@
     }
 }
 
+.msg, .card.bg.info {
+    
+    padding: @spacing @cardPaddingLong;
+
+    .build-theme-bg( lighten(@cInfo, 35%), darken(@cInfo, 20%));
+
+}
+
+.msg, .card.bg {
+    &.error {
+        .build-theme-bg( lighten(@cInfo, 35%), darken(@cInfo, 20%));
+    }
+
+    &.warn {
+        .build-theme-bg( lighten(@cWarn, 25%), darken(@cWarn, 30%));
+    }
+
+    &.success {
+        .build-theme-bg( lighten(@cSuccess, 50%), darken(@cSuccess, 30%));
+    }
+}
+
 iframe {
     border: none;
 }

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

@@ -0,0 +1,27 @@
+.card,
+.input.text,
+.btn,
+.table,
+i.solid {
+
+    .build-theme-bg( #fff, #8E8E8E);
+
+    &:not(.bg) {
+        background: white;
+        box-shadow: 0 3px 2px fade(#000, 10%);
+        border: solid 1px fade(#000, 10%);
+        border-radius: @radius;
+    }
+
+    .bg & {
+        box-shadow: none;
+        border: none;
+    }
+}
+
+//.card.clickable:hover,
+.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/components/table.less

@@ -1,8 +1,9 @@
 table {
 
     width: 100%;
-    border-collapse: separate; 
     padding: 0;
+    border-collapse: separate; 
+    border-spacing: 0 0.5em;
 
     // By default, chrome disables text inherits
     line-height: inherit;

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 {

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

@@ -1,11 +1,36 @@
 @import (reference) "~@/client/assets/theme.less";
 
+img.img,
+.bg.img {
+    background: @cBgPage - #101010;
+}
+
+.bg.img {
+    .build-theme-bg(#000, #fff);
+    text-shadow: 0 0 10px fade(#000, 20%);
+}
+
 img {
     max-width: 100%;
     display: block;
 
-    &.image {
+    &.img {
         border-radius: @radius;
-        background: @cBgPage - #101010;
     }
+}
+
+/*----------------------------------
+- IMAGE CONFIG
+----------------------------------*/
+
+// Default: cover
+.bg.img {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+img.img {
+    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

@@ -32,7 +32,7 @@ a {
 }
 
 p, .p {
-    text-align: center;
+    text-align: justify;
     line-height: 1.8em;
     margin: 0; // Overwrite browser defaults
 }
@@ -75,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
@@ -147,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

@@ -2,7 +2,6 @@ h1, .h1,
 h2, 
 h3 {
 
-    font-family: "Rubik";
     font-weight: 600;
     text-align: inherit;
     color: var(--cTxtImportant);
@@ -18,24 +17,29 @@ h3 {
     }
 
     strong {
-        color: var(--c1);
+        color: var(--cAccent);
         font-weight: inherit;
     }
 }
 
+h1,
+h2 {
+    font-family: "Rubik";
+}
+
 // 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: 1.5em;
 }