@silexlabs/silex-dashboard 1.0.37 → 1.0.38

package/_data/api-translations.json

@@ -17,7 +17,10 @@
         "Logging out": "Logging out",
         "Back to home": "< Back",
         "Welcome to Silex": "Welcome to Silex",
-        "Please login to continue": "Please login to continue"
+        "Please login to continue": "Please login to continue",
+        "New name for the duplicated website": "New name for the duplicated website",
+        "Failed to duplicate website": "Failed to duplicate website",
+        "Website duplicated successfully": "Website duplicated successfully"
     },
     "fr": {
         "Failed to start dashboard": "Erreur, impossible de démarrer le tableau de bord",
@@ -37,6 +40,9 @@
         "Logging out": "Déconnexion en cours",
         "Back to home": "< Retour",
         "Welcome to Silex": "Bienvenue sur Silex",
-        "Please login to continue": "Merci de vous connecter pour continuer"
+        "Please login to continue": "Merci de vous connecter pour continuer",
+        "New name for the duplicated website": "Nouveau nom pour votre site",
+        "Failed to duplicate website": "Erreur, le site n'a pas été dupliqué",
+        "Website duplicated successfully": "Le site a bien été dupliqué"
     }
 }

package/_includes/api-websites.js.html

@@ -13,10 +13,14 @@ window.addEventListener('load', function() {
     getUser,
     logout,
     websiteDelete,
+    websiteDuplicate,
     websiteList,
     websiteCreate,
     websiteMetaWrite,
   } = api
+  function toSafeId(name) {
+    return name.replace(/[/\\?%*:|"<>]/g, '_')
+  }
 
   const App = {
     data() {
@@ -92,7 +96,7 @@ window.addEventListener('load', function() {
         try {
           if (!this.newWebsiteName) throw new Error('{{ api-translations[lang]["You need to provide a website name"] }}')
           this.loading = true
-          const websiteId = this.newWebsiteName.replace(/[/\\?%*:|"<>]/g, '_')
+          const websiteId = toSafeId(this.newWebsiteName)
           const result = await websiteCreate({
             websiteId,
             data: {
@@ -136,6 +140,25 @@ window.addEventListener('load', function() {
         }
       },
 
+      async duplicateWebsite(fromId) {
+        const name = prompt('{{ api-translations[lang]["New name for the duplicated website"] }}')
+        if (!name) return
+        this.loading = true
+        try {
+          const toId = toSafeId(name)
+          await websiteDuplicate({fromId, toId, connectorId: this.user.storage.connectorId, data: { name }})
+          this.error = ''
+          this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.message = '{{ api-translations[lang]["Website duplicated successfully"] }}'
+          this.empty = this.websites.length === 0
+          this.loading = false
+        } catch (error) {
+          this.loading = false
+          this.error = `{{ api-translations[lang]["Failed to duplicate website"] }} - ${error.message}`
+          this.message = ''
+        }
+      },
+
       async renameWebsite(websiteId) {
         const website = this.websites.find(w => w.websiteId === websiteId)
         const name = prompt('{{ api-translations[lang]["New name for this website"] }}', website.name)

package/_includes/connectors.html

@@ -5,137 +5,148 @@
 <!--  font google -->
 <link rel="preconnect" href="https://fonts.gstatic.com" />
 <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap" rel="stylesheet">
-
 {% render "alternate.liquid" languages: languages lang: lang page: page %}
-
 <style>
-.before-js > * {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity .5s ease;
-}
-.after-js > * {
-  visibility: visible;
-  opacity: 1;
-}
-.before-js:before {
-  content: 'Loading';
-  position: absolute;
-  top: 49%;
-  left: 49%;
-}
-.after-js:before {
-  content: none;
-}
-
-/*BTNS*/
-.button, .pointer { cursor: pointer!important}
-.button{min-width:110px;}
-/*BTNS*/
-a { 
-	text-decoration: none;
-	color:#8873FE;}
-a:hover { text-decoration: underline; }
-.uppercase  {text-transform: uppercase;}
-.underline:hover{ 
-  text-decoration: underline;
-	text-decoration-thickness: from-font;
-  text-underline-position: under;}
-
-/*footer position*/
-.main-min-height {min-height: calc(100vh - 560px);}
-/*footer position*/
-
-/*label*/
-::placeholder {color: #8873FE;}
-input:focus {
-	border: 2px solid ##9977FE;
-	background-color:#ffffff;}
-:focus { outline: none;}
-/*label*/
-.skeleton-anim:after {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  content: "";
-  background: 
-    linear-gradient(0.25turn, transparent, rgba(255,255,255,.75), transparent),
-    linear-gradient(transparent, transparent),
-    radial-gradient(38px circle at 19px 19px, transparent 50%, transparent 51%),
-    linear-gradient(transparent, transparent);  
-  background-repeat: no-repeat;
-  background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px; 
-  background-position: -315px 0, 0 0, 0px 190px, 50px 195px; 
-  animation: loading 1.5s infinite;
-}
-
-@keyframes loading {  
-  to {
-    background-position: 200% 0, 0 0, 0 190px, 50px 195px;
-  }
-}
-/*FX ANIMATIONS*/
-/*scale-round-inside_pour-BTN*/
-.fx-scale-round {
-	position:relative;
-	  z-index: 10;
-  overflow: hidden;
-}
-.fx-scale-round::after {
-  content: "";
-  background: #ffffff;
-  position: absolute;
-  z-index: -1;
-  border-radius: 50%;
-  left: -50%;
-  right: -50%;
-  top: -100%;
-  bottom: -100%;
-  transform: scale(0, 0);
-	transform-origin: center bottom;
-  transition: all 0.3s ease-out;
-
-}
-.fx-scale-round:hover {
-	transform-origin: center bottom;
-	transform: scale(1.1);
-	transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
-} 
-.fx-scale-round:hover::after {
-  transform: scale(1, 1);
-	transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
-}
-/*scale-round-inside_pour-BTN*/
-/*scale*/
-.fx-scale:hover  {
-	transform-origin: center bottom;
-	transform: scale(1.1);
-	transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
-}
-/*flash*/
-.fx-flash:hover {
-	        animation: flash-in .5s ;
-}
-
-/*flash-in animation*/
-      @keyframes flash-in{
-        0% {opacity:0;}
-        100% {opacity:1;}
-      }
-/*flash-in animation*/
-
-/*FX ANIMATIONS*/
+  .before-js > * {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .5s ease;
+  }
+  .after-js > * {
+    visibility: visible;
+    opacity: 1;
+  }
+  .before-js:before {
+    content: 'Loading';
+    position: absolute;
+    top: 49%;
+    left: 49%;
+  }
+  .after-js:before {
+    content: none;
+  }
+  /*BTNS*/
+  .button, .pointer {
+    cursor: pointer!important}
+  .button{
+    min-width:110px;
+  }
+  /*BTNS*/
+  a {
+    text-decoration: none;
+    color:#8873FE;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+  .uppercase  {
+    text-transform: uppercase;
+  }
+  .underline:hover{
+    text-decoration: underline;
+    text-decoration-thickness: from-font;
+    text-underline-position: under;
+  }
+  /*footer position*/
+  .main-min-height {
+    min-height: calc(100vh - 560px);
+  }
+  /*footer position*/
+  /*label*/
+  ::placeholder {
+    color: #8873FE;
+  }
+  input:focus {
+    border: 2px solid ##9977FE;
+    background-color:#ffffff;
+  }
+  :focus {
+    outline: none;
+  }
+  /*label*/
+  .skeleton-anim:after {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: "";
+    background: 
+      linear-gradient(0.25turn, transparent, rgba(255,255,255,.75), transparent),
+      linear-gradient(transparent, transparent),
+      radial-gradient(38px circle at 19px 19px, transparent 50%, transparent 51%),
+      linear-gradient(transparent, transparent);
+    background-repeat: no-repeat;
+    background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
+    background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
+    animation: loading 1.5s infinite;
+  }
+  @keyframes loading {
+    to {
+      background-position: 200% 0, 0 0, 0 190px, 50px 195px;
+    }
+  }
+  /*FX ANIMATIONS*/
+  /*scale-round-inside_pour-BTN*/
+  .fx-scale-round {
+    position:relative;
+    z-index: 10;
+    overflow: hidden;
+  }
+  .fx-scale-round::after {
+    content: "";
+    background: #ffffff;
+    position: absolute;
+    z-index: -1;
+    border-radius: 50%;
+    left: -50%;
+    right: -50%;
+    top: -100%;
+    bottom: -100%;
+    transform: scale(0, 0);
+    transform-origin: center bottom;
+    transition: all 0.3s ease-out;
+  }
+  .fx-scale-round:hover {
+    transform-origin: center bottom;
+    transform: scale(1.1);
+    transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
+  }
+  .fx-scale-round:hover::after {
+    transform: scale(1, 1);
+    transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
+  }
+  /*scale-round-inside_pour-BTN*/
+  /*scale*/
+  .fx-scale:hover  {
+    transform-origin: center bottom;
+    transform: scale(1.1);
+    transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
+  }
+  /*flash*/
+  .fx-flash:hover {
+    animation: flash-in .5s ;
+  }
+  /*flash-in animation*/
+  @keyframes flash-in{
+    0% {
+      opacity:0;
+    }
+    100% {
+      opacity:1;
+    }
+  }
+  /*flash-in animation*/
+  /*FX ANIMATIONS*/
 </style>
 {% render "api-connectors.js.html" frontmatter: frontmatter page: page site: site api-translations: api-translations lang: lang %}
 
 <title>{{ title }}</title>
-<link rel="icon" href="" />
-<meta property="description" content=""/>
-<meta property="og:title" content=""/>
-<meta property="og:description" content=""/>
-<meta property="og:image" content=""/>
+<link rel="icon" href="/assets/favicon-32x32.png" />
+<meta name="description" property="description" content=""/>
+<meta name="og:title" property="og:title" content=""/>
+<meta name="og:description" property="og:description" content=""/>
+<meta name="og:image" property="og:image" content=""/>
 </head>
 <body
             id="i2hcfw"

package/_includes/websites.html

@@ -5,137 +5,148 @@
 <!--  font google -->
 <link rel="preconnect" href="https://fonts.gstatic.com" />
 <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap" rel="stylesheet">
-
 {% render "alternate.liquid" languages: languages lang: lang page: page %}
-
 <style>
-.before-js > * {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity .5s ease;
-}
-.after-js > * {
-  visibility: visible;
-  opacity: 1;
-}
-.before-js:before {
-  content: 'Loading';
-  position: absolute;
-  top: 49%;
-  left: 49%;
-}
-.after-js:before {
-  content: none;
-}
-
-/*BTNS*/
-.button, .pointer { cursor: pointer!important}
-.button{min-width:110px;}
-/*BTNS*/
-a { 
-	text-decoration: none;
-	color:#8873FE;}
-a:hover { text-decoration: underline; }
-.uppercase  {text-transform: uppercase;}
-.underline:hover{ 
-  text-decoration: underline;
-	text-decoration-thickness: from-font;
-  text-underline-position: under;}
-
-/*footer position*/
-.main-min-height {min-height: calc(100vh - 560px);}
-/*footer position*/
-
-/*label*/
-::placeholder {color: #8873FE;}
-input:focus {
-	border: 2px solid ##9977FE;
-	background-color:#ffffff;}
-:focus { outline: none;}
-/*label*/
-.skeleton-anim:after {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  content: "";
-  background: 
-    linear-gradient(0.25turn, transparent, rgba(255,255,255,.75), transparent),
-    linear-gradient(transparent, transparent),
-    radial-gradient(38px circle at 19px 19px, transparent 50%, transparent 51%),
-    linear-gradient(transparent, transparent);  
-  background-repeat: no-repeat;
-  background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px; 
-  background-position: -315px 0, 0 0, 0px 190px, 50px 195px; 
-  animation: loading 1.5s infinite;
-}
-
-@keyframes loading {  
-  to {
-    background-position: 200% 0, 0 0, 0 190px, 50px 195px;
+  .before-js > * {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .5s ease;
   }
-}
-/*FX ANIMATIONS*/
-/*scale-round-inside_pour-BTN*/
-.fx-scale-round {
-	position:relative;
-	  z-index: 10;
-  overflow: hidden;
-}
-.fx-scale-round::after {
-  content: "";
-  background: #ffffff;
-  position: absolute;
-  z-index: -1;
-  border-radius: 50%;
-  left: -50%;
-  right: -50%;
-  top: -100%;
-  bottom: -100%;
-  transform: scale(0, 0);
-	transform-origin: center bottom;
-  transition: all 0.3s ease-out;
-
-}
-.fx-scale-round:hover {
-	transform-origin: center bottom;
-	transform: scale(1.1);
-	transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
-} 
-.fx-scale-round:hover::after {
-  transform: scale(1, 1);
-	transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
-}
-/*scale-round-inside_pour-BTN*/
-/*scale*/
-.fx-scale:hover  {
-	transform-origin: center bottom;
-	transform: scale(1.1);
-	transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
-}
-/*flash*/
-.fx-flash:hover {
-	        animation: flash-in .5s ;
-}
-
-/*flash-in animation*/
-      @keyframes flash-in{
-        0% {opacity:0;}
-        100% {opacity:1;}
-      }
-/*flash-in animation*/
-
-/*FX ANIMATIONS*/
+  .after-js > * {
+    visibility: visible;
+    opacity: 1;
+  }
+  .before-js:before {
+    content: 'Loading';
+    position: absolute;
+    top: 49%;
+    left: 49%;
+  }
+  .after-js:before {
+    content: none;
+  }
+  /*BTNS*/
+  .button, .pointer {
+    cursor: pointer!important}
+  .button{
+    min-width:110px;
+  }
+  /*BTNS*/
+  a {
+    text-decoration: none;
+    color:#8873FE;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+  .uppercase  {
+    text-transform: uppercase;
+  }
+  .underline:hover{
+    text-decoration: underline;
+    text-decoration-thickness: from-font;
+    text-underline-position: under;
+  }
+  /*footer position*/
+  .main-min-height {
+    min-height: calc(100vh - 560px);
+  }
+  /*footer position*/
+  /*label*/
+  ::placeholder {
+    color: #8873FE;
+  }
+  input:focus {
+    border: 2px solid ##9977FE;
+    background-color:#ffffff;
+  }
+  :focus {
+    outline: none;
+  }
+  /*label*/
+  .skeleton-anim:after {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: "";
+    background: 
+      linear-gradient(0.25turn, transparent, rgba(255,255,255,.75), transparent),
+      linear-gradient(transparent, transparent),
+      radial-gradient(38px circle at 19px 19px, transparent 50%, transparent 51%),
+      linear-gradient(transparent, transparent);
+    background-repeat: no-repeat;
+    background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
+    background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
+    animation: loading 1.5s infinite;
+  }
+  @keyframes loading {
+    to {
+      background-position: 200% 0, 0 0, 0 190px, 50px 195px;
+    }
+  }
+  /*FX ANIMATIONS*/
+  /*scale-round-inside_pour-BTN*/
+  .fx-scale-round {
+    position:relative;
+    z-index: 10;
+    overflow: hidden;
+  }
+  .fx-scale-round::after {
+    content: "";
+    background: #ffffff;
+    position: absolute;
+    z-index: -1;
+    border-radius: 50%;
+    left: -50%;
+    right: -50%;
+    top: -100%;
+    bottom: -100%;
+    transform: scale(0, 0);
+    transform-origin: center bottom;
+    transition: all 0.3s ease-out;
+  }
+  .fx-scale-round:hover {
+    transform-origin: center bottom;
+    transform: scale(1.1);
+    transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
+  }
+  .fx-scale-round:hover::after {
+    transform: scale(1, 1);
+    transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
+  }
+  /*scale-round-inside_pour-BTN*/
+  /*scale*/
+  .fx-scale:hover  {
+    transform-origin: center bottom;
+    transform: scale(1.1);
+    transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
+  }
+  /*flash*/
+  .fx-flash:hover {
+    animation: flash-in .5s ;
+  }
+  /*flash-in animation*/
+  @keyframes flash-in{
+    0% {
+      opacity:0;
+    }
+    100% {
+      opacity:1;
+    }
+  }
+  /*flash-in animation*/
+  /*FX ANIMATIONS*/
 </style>
 {% render "api-websites.js.html" frontmatter: frontmatter page: page site: site api-translations: api-translations lang: lang %}
 
 <title>{{ title }}</title>
-<link rel="icon" href="" />
-<meta property="description" content=""/>
-<meta property="og:title" content=""/>
-<meta property="og:description" content=""/>
-<meta property="og:image" content=""/>
+<link rel="icon" href="/assets/favicon-32x32.png" />
+<meta name="description" property="description" content=""/>
+<meta name="og:title" property="og:title" content=""/>
+<meta name="og:description" property="og:description" content=""/>
+<meta name="og:image" property="og:image" content=""/>
 </head>
 <body
             id="ik0i"
@@ -354,7 +365,12 @@ input:focus {
             @click="renameWebsite(website.websiteId, '{{lang}}')"
             
             >{{ list-rename }}</BUTTON><BUTTON
-            id="iol4h"
+            id="iol4h" title="{{ list-duplicate }}"
+            class="button-bar__item--link pointer fx-flash fx-scale button-bar__item--icon "
+            @click="duplicateWebsite(website.websiteId, '{{lang}}')"
+            
+            >{{ list-duplicate-icon }}</BUTTON><BUTTON
+            
             class="button-bar__item--link pointer fx-flash fx-scale "
             @click="deleteWebsite(website.websiteId)" title="{{ list-delete }}"
             

package/_site/css/connectors.css

@@ -1 +1 @@
-* { box-sizing: border-box; } body {margin: 0;}.nav__item{margin:0px 10px 0px 10px;font-size:0.8rem;padding:24px 0px 24px 0px;color:#4a4a4a;}.body{font-family:"Ubuntu", sans-serif;background-color:#f0f0f0;color:#2b1b63;}.menu-bar{display:flex;align-items:center;justify-content:space-between;background-color:#ffffff;height:94px;padding:0px 100px 0px 100px;width:100%;}.nav{width:100%;margin:0px 20px 0px 20px;}.subtitle-16{font-size:1rem;margin:0px 0px 20px 0px;}.subtitle-16.color--light{color:#636363;font-weight:700;}.button{font-size:0.8rem;padding:10px 20px 10px 20px;display:inline-block;border:2px solid #8873fe;transition:all 0.18s ease-out;font-weight:700;line-height:1.2rem;}.button.button--primary{background-color:#8873fe;color:white;}.button-bar{margin:20px 0px 20px 0px;display:flex;padding:30px 30px 30px 30px;align-items:center;justify-content:space-between;border-radius:4px 4px 4px 4px;background-color:#ffffff;}.button-bar.button-bar--full-width{justify-content:space-between;align-items:center;}.button-bar_item.button-bar__item--secondary{font-size:0.8rem;}.button.button--secondary{font-weight:400;color:#8873fe;border:2px solid #8873fe;}.nav__item.active{color:black;}.box{border-radius:4px 4px 4px 4px;background-color:#ffffff;}.box.flex-between{align-items:center;}.h-space{margin:0px 10px 0px 0px;}.button--tertiary{background-color:transparent;font-weight:400;}.lang__item{margin:0px 5px 0px 5px;}.nav__logo{height:50px;}.button:hover{color:#8873fe;border:2px solid #8873fe;}.button.button--secondary:hover{background-color:white;border:2px solid rgba(136,115,254,0.5);}#imgx81{min-height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;}#in62y2{width:100%;display:flex;justify-content:center;}.big-button{border-radius:5px 5px 5px 5px;font-size:15px;margin:10px 10px 10px 10px;padding:15px 30px 15px 30px;font-weight:700;background-color:#ffffff;}#i9msnk{padding:10px;display:inline;}#i6akll{padding:10px;display:inline;}#ixzhcr{padding:10px;position:absolute;display:none;}.title-40{margin:0 0 10px 0;font-size:2.5rem;font-weight:700;}#in5jeq{display:flex;}#ij139z{position:absolute;}.bg-silex-purpel{background-repeat:repeat-y;background-position:center top;background-attachment:scroll;background-size:contain;background-image:url(/assets/bg-purpel-silex.webp);}.text-centered{text-align:center;}.text-white{color:#ffffff;}.box.box_transp{background-color:rgba(255,255,255,0.5);}.padding-100-30{padding:100px 30px 80px 30px;}.top-space-20{margin:20px 0 0 0;}.button.button--tertiary{border:2px solid transparent;background-color:rgba(221,221,221,0.5);}.box_login{max-width:880px;width:100%;}.button-bar__item--link.text-white{color:#ffffff;}.button.big-button{border:2px solid transparent;}.button.button--tertiary:hover{border:2px solid #8873fe;color:#8873fe;background-color:white;}.button-bar__item__icon{float:left;height:40px;width:40px;margin:5px 5px 5px 5px;}.button-bar__item--secondary{font-size:0.8rem;}
+* { box-sizing: border-box; } body {margin: 0;}.nav__item{margin:0px 10px 0px 10px;font-size:0.8rem;padding:24px 0px 24px 0px;color:#4a4a4a;}.body{font-family:"Ubuntu", sans-serif;background-color:#f0f0f0;color:#2b1b63;}.menu-bar{display:flex;align-items:center;justify-content:space-between;background-color:#ffffff;height:94px;padding:0px 100px 0px 100px;width:100%;}.nav{width:100%;margin:0px 20px 0px 20px;}.subtitle-16{font-size:1rem;margin:0px 0px 20px 0px;}.subtitle-16.color--light{color:#636363;font-weight:700;}.button{font-size:0.8rem;padding:10px 20px 10px 20px;display:inline-block;border:2px solid #8873fe;transition:all 0.18s ease-out;font-weight:700;line-height:1.2rem;}.button.button--primary{background-color:#8873fe;color:white;}.button-bar{margin:20px 0px 20px 0px;display:flex;padding:30px 30px 30px 30px;align-items:center;justify-content:space-between;border-radius:4px 4px 4px 4px;background-color:#ffffff;}.button-bar.button-bar--full-width{justify-content:space-between;align-items:center;}.button-bar_item.button-bar__item--secondary{font-size:0.8rem;}.button.button--secondary{font-weight:400;color:#8873fe;border:2px solid #8873fe;}.nav__item.active{color:black;}.box{border-radius:4px 4px 4px 4px;background-color:#ffffff;}.box.flex-between{align-items:center;}.h-space{margin:0px 10px 0px 0px;}.button--tertiary{background-color:transparent;font-weight:400;}.lang__item{margin:0px 5px 0px 5px;}.nav__logo{height:50px;}.button:hover{color:#8873fe;border:2px solid #8873fe;}.button.button--secondary:hover{background-color:white;border:2px solid rgba(136,115,254,0.5);}#imgx81{min-height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;}#in62y2{width:100%;display:flex;justify-content:center;}.big-button{border-radius:5px 5px 5px 5px;font-size:15px;margin:10px 10px 10px 10px;padding:15px 30px 15px 30px;font-weight:700;background-color:#ffffff;}#i9msnk{padding:10px;display:inline;}#i6akll{padding:10px;display:inline;}#ixzhcr{padding:10px;position:absolute;display:none;}.title-40{margin:0 0 10px 0;font-size:2.5rem;font-weight:700;}#in5jeq{display:flex;}#ij139z{position:absolute;}.bg-silex-purpel{background-repeat:repeat-y;background-position:center top;background-attachment:scroll;background-size:contain;background-image:url(../assets/bg-purpel-silex.webp);}.text-centered{text-align:center;}.text-white{color:#ffffff;}.box.box_transp{background-color:rgba(255,255,255,0.5);}.padding-100-30{padding:100px 30px 80px 30px;}.top-space-20{margin:20px 0 0 0;}.button.button--tertiary{border:2px solid transparent;background-color:rgba(221,221,221,0.5);}.box_login{max-width:880px;width:100%;}.button-bar__item--link.text-white{color:#ffffff;}.button.big-button{border:2px solid transparent;}.button.button--tertiary:hover{border:2px solid #8873fe;color:#8873fe;background-color:white;}.button-bar__item__icon{float:left;height:40px;width:40px;margin:5px 5px 5px 5px;}.button-bar__item--secondary{font-size:0.8rem;}