@silexlabs/silex 3.0.0-alpha.97 → 3.0.0

package/dist/client/css/admin.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+/* Normalize css */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
@@ -314,9 +316,11 @@ template {
   --quaternaryColor: #A291FF;
   --darkerPrimaryColor: #292929;
   --lighterPrimaryColor: #575757;
+  --viewsPanelWidth: 25%;
 }
 
-/* stylelint-disable */ /* BASICS */
+/* stylelint-disable */
+/* BASICS */
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
@@ -1885,7 +1889,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-cv-canvas {
-  background-color: rgba(0, 0, 0, 0.15);
   box-sizing: border-box;
   width: 85%;
   height: calc(100% - 40px);
@@ -1897,6 +1900,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   top: 40px;
   /* This simulate body behaviour */
 }
+.gjs-cv-canvas-bg {
+  background-color: rgba(0, 0, 0, 0.15);
+}
 .gjs-cv-canvas.gjs-cui {
   width: 100%;
   height: 100%;
@@ -1912,6 +1918,11 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   width: 100%;
   height: 100%;
 }
+.gjs-cv-canvas__spots {
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+}
 .gjs-cv-canvas .gjs-ghost {
   display: none;
   pointer-events: none;
@@ -3821,6 +3832,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   color: #ffffff;
 }
 
+/* Silex styles imports */
 .silex-workspace {
   position: absolute;
   top: 0;
@@ -3853,10 +3865,29 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   width: 100%;
 }
 
+.silex-workspace .gjs-pn-viewsOptions {
+  z-index: 5;
+  right: 0;
+  left: auto;
+}
+.silex-workspace .gjs-pn-viewsOptions .viewsOptions__size-btn::before {
+  content: "←";
+}
+
+.silex-hidden {
+  /* do not really hide, because it breaks the code editor init in the site settings + for animation */
+  visibility: hidden;
+  position: absolute;
+  opacity: 0;
+  height: 10px;
+  width: 10px;
+  overflow: hidden;
+}
+
 .settings-dialog > div {
   max-width: none;
   width: 100%;
-  max-height: 100vh;
+  height: 100vh;
   overflow: auto;
 }
 .settings-dialog > div form.silex-form {
@@ -3887,6 +3918,10 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   padding: 0 15px;
   font-size: x-small;
 }
+.settings-dialog > div .CodeMirror {
+  min-height: 400px;
+  height: auto;
+}
 
 button.silex-button,
 input.silex-button[type=button],
@@ -3906,6 +3941,7 @@ input.silex-button[type=submit] {
   padding: 5px;
 }
 
+.silex-button.disabled,
 .silex-button[disabled] {
   opacity: 0.8;
   cursor: unset;
@@ -3921,6 +3957,7 @@ input.silex-button[type=submit] {
 
 .silex-button--size {
   max-height: 30px;
+  margin: 0 10px;
 }
 
 .silex-button--small {
@@ -3936,25 +3973,29 @@ input.silex-button[type=submit] {
   display: block;
 }
 
+.silex-sidebar-dialog,
 .silex-bar {
   display: flex;
 }
+.silex-sidebar-dialog > *,
 .silex-bar > * {
   margin: 5px;
 }
+.silex-sidebar-dialog main,
+.silex-bar main {
+  width: 100%;
+}
 
 ol.silex-list,
 ul.silex-list {
   list-style: none;
   margin: 0;
   padding: 0;
-  background-color: #575757;
 }
 ol.silex-list > li,
 ul.silex-list > li {
   padding: 5px;
   border-bottom: 1px solid #575757;
-  background-color: #444;
   margin: 5px;
 }
 ol.silex-list fieldset,
@@ -3987,6 +4028,26 @@ ul.silex-list .silex-list__item__footer button {
   padding-top: 8px;
 }
 
+ol.silex-list--menu > li,
+ul.silex-list--menu > li {
+  padding: 15px;
+  margin: 0;
+  border: 1px solid transparent;
+  border-bottom-color: #575757;
+  text-align: center;
+  cursor: pointer;
+}
+ol.silex-list--menu > li:first-child,
+ul.silex-list--menu > li:first-child {
+  border-top-color: #575757;
+}
+ol.silex-list--menu .active, ol.silex-list--menu > li:hover,
+ul.silex-list--menu .active,
+ul.silex-list--menu > li:hover {
+  color: #8873FE;
+  background-color: #292929;
+}
+
 form.silex-form {
   display: flex;
   flex-direction: column;
@@ -4034,7 +4095,7 @@ form.silex-form .silex-form__group.col2 {
 .gjs-pn-footer {
   bottom: 0;
   left: 35px;
-  right: 15%;
+  right: var(--viewsPanelWidth);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -4043,17 +4104,17 @@ form.silex-form .silex-form__group.col2 {
 }
 
 .silex-main {
-  transition: opacity 0.35s 0.5s ease;
+  transition: opacity 0.15s 0.5s ease;
 }
 
 .silex-dialog {
-  transition: opacity 0.35s ease;
+  transition: opacity 0.15s ease;
 }
 
 .silex-dialog-hide {
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.35s ease, visibility 0.5s 1s ease;
+  transition: opacity 0.15s ease, visibility 0.3s 1s ease;
 }
 
 .silex-dialog-inline {
@@ -4061,20 +4122,25 @@ form.silex-form .silex-form__group.col2 {
   background-color: #333333;
   z-index: 10;
   border-radius: 3px;
-  border: 2px solid rgba(0, 0, 0, 0.25);
+  border: 2px solid #575757;
+  box-shadow: 0 0 10px 0 #575757;
   display: flex;
   flex-direction: column;
 }
 .silex-dialog-inline header {
   padding: 10px;
+  border-bottom: 1px solid #575757;
 }
 .silex-dialog-inline main {
   flex-grow: 1;
   padding: 10px;
+  max-height: 50vh;
+  overflow-y: auto;
 }
 .silex-dialog-inline footer {
   padding: 10px;
   text-align: right;
+  border-top: 1px solid #575757;
 }
 .silex-dialog-inline a {
   color: #A291FF;
@@ -4083,14 +4149,55 @@ form.silex-form .silex-form__group.col2 {
   margin: 0;
 }
 
-iframe.enable-squeeze.gjs-frame {
-  transition: width 0.35s, height 0.35s, left 0.35s;
+.silex-help {
+  margin: 10px 0;
+  padding: 10px;
+  border: 1px solid #575757;
+  border-radius: 3px;
+  background-color: #575757;
+  color: #ddd;
+  font-size: small;
+}
+.silex-help p {
+  margin: 0;
+}
+.silex-help a {
+  color: #A291FF;
+}
+
+.fonts-dialog .gjs-mdl-dialog {
+  width: 100%;
+  max-width: unset;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.fonts-dialog .gjs-mdl-content {
+  flex: 1 1 auto;
+}
+.fonts-dialog .silex-form__element {
+  margin-bottom: 80px;
+}
+.fonts-dialog .silex-list li {
+  border-bottom: none;
+}
+.fonts-dialog h2 {
+  border-radius: 0;
+  background-color: transparent;
+}
+.fonts-dialog footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20px !important;
+  background-color: #333333;
 }
 
-iframe.enable-squeeze.silex-squeeze-left {
-  --project-panel-width: max(150px, 15.7%); /* Why 16? Also sass vars do not work here */
-  left: var(--project-panel-width);
-  width: calc(100% - var(--project-panel-width));
+.silex-squeeze-left .gjs-cv-canvas {
+  left: calc(13% + 35px);
+  width: auto;
+  right: var(--viewsPanelWidth);
 }
 
 .gjs-pn-project-bar-panel {
@@ -4119,6 +4226,7 @@ iframe.enable-squeeze.silex-squeeze-left {
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent;
+  background-size: contain;
 }
 
 .gjs-pn-project-bar-container {
@@ -4252,6 +4360,132 @@ iframe.enable-squeeze.silex-squeeze-left {
   background-color: #292929;
 }
 
+.grp-wrapper {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
+}
+
+.grp-preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: crosshair;
+}
+
+.grp-handler {
+  width: 4px;
+  margin-left: -2px;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  height: 100%;
+}
+
+.grp-handler-close {
+  color: rgba(0, 0, 0, 0.4);
+  border-radius: 100%;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+  background-color: #fff;
+  text-align: center;
+  width: 15px;
+  height: 15px;
+  margin-left: -5px;
+  line-height: 10px;
+  font-size: 21px;
+  cursor: pointer;
+}
+
+.grp-handler-close-c {
+  position: absolute;
+  top: -17px;
+}
+
+.grp-handler-drag {
+  background-color: rgba(0, 0, 0, 0.5);
+  cursor: col-resize;
+  width: 100%;
+  height: 100%;
+}
+
+.grp-handler-selected .grp-handler-drag {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.grp-handler-cp-c {
+  display: none;
+}
+
+.grp-handler-selected .grp-handler-cp-c {
+  display: block;
+}
+
+.grp-handler-cp-wrap {
+  width: 15px;
+  height: 15px;
+  margin-left: -8px;
+  border: 3px solid #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+  border-radius: 100%;
+  cursor: pointer;
+}
+
+.grp-handler-cp-wrap input[type=color] {
+  opacity: 0;
+  cursor: pointer;
+}
+
+.fa-arrows::before {
+  display: block;
+  content: "" !important;
+  border: 2px solid #8873FE;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-color: #ddd;
+}
+
+.fa-long-arrow-up::before {
+  display: block;
+  content: "" !important;
+  border: 2px solid #8873FE;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-top-color: #ddd;
+}
+
+.fa-long-arrow-down::before {
+  display: block;
+  content: "" !important;
+  border: 2px solid #8873FE;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-bottom-color: #ddd;
+}
+
+.fa-long-arrow-left::before {
+  display: block;
+  content: "" !important;
+  border: 2px solid #8873FE;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-left-color: #ddd;
+}
+
+.fa-long-arrow-right::before {
+  display: block;
+  content: "" !important;
+  border: 2px solid #8873FE;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-right-color: #ddd;
+}
+
 #gjs {
   flex: 1 1 auto;
 }
@@ -4307,7 +4541,7 @@ iframe.enable-squeeze.silex-squeeze-left {
 }
 
 .gjs-cv-canvas {
-  width: calc(85% - 35px);
+  width: calc(100% - var(--viewsPanelWidth) - 35px);
 }
 
 .gjs-pn-devices-c {
@@ -4317,15 +4551,21 @@ iframe.enable-squeeze.silex-squeeze-left {
   display: none;
 }
 
-.gjs-pn-views-container {
-  width: 15%;
-}
-
 .gjs-editor {
   font-family: "Ubuntu", sans-serif;
   font-size: 0.75rem;
 }
 
+.gjs-mdl-header {
+  background-color: #333333;
+  color: #ddd;
+  padding: 20px;
+  border-bottom: 1px solid #575757;
+}
+.gjs-mdl-header .gjs-mdl-btn-close {
+  top: 15px;
+}
+
 .gjs-toolbar {
   background-color: #8873FE;
 }
@@ -4342,6 +4582,18 @@ iframe.enable-squeeze.silex-squeeze-left {
   outline: 1px solid #8873FE;
 }
 
+.gjs-pn-buttons {
+  justify-content: unset;
+}
+
+.gjs-pn-views-container, .gjs-pn-views {
+  width: var(--viewsPanelWidth);
+}
+
+.gjs-pn-options {
+  right: var(--viewsPanelWidth);
+}
+
 /*
 */
 .gjs-editor-cont .fa {
@@ -4415,15 +4667,6 @@ iframe.enable-squeeze.silex-squeeze-left {
   content: "\f3a5";
 }
 
-/*
-.fa-plus:before {
-	content: "+";
-  font-size: 35px;
-}
-// .fa-plus {
-//   background-image: svg(<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>);
-// }
-*/
 /* ubuntu-cyrillic-ext-400-normal */
 @font-face {
   font-family: "Ubuntu";
@@ -4478,8 +4721,6 @@ iframe.enable-squeeze.silex-squeeze-left {
   src: url(./files/ubuntu-latin-400-normal.woff2) format("woff2"), url(./files/ubuntu-latin-400-normal.woff) format("woff");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
-/* Normalize css */
-/* Silex styles imports */
 .container-png::before {
   content: " ";
   background-image: url("../assets/container.png");

package/dist/client/index.html

@@ -6,4 +6,5 @@
   display: none;
 }
 </style></head><body class="silex-loading"><div class="silex-loader silex-dialog">Loading...
-</div><link rel="stylesheet" type="text/css" href="css/admin.css"><main class="silex-workspace"><div class="silex-main silex-dialog-hide silex-ui-full" id="gjs"></div></main><script src="js/main.js"></script><!-- Here you can use silex.config to hook into silex options before silex starts--><script>window.silex.start()</script></body></html>
+</div><link rel="stylesheet" type="text/css" href="css/admin.css"><main class="silex-workspace"><div class="silex-main silex-dialog-hide silex-ui-full" id="gjs"></div></main><script src="js/main.js"></script><script>silex.start()
+// From here silex.config is available and Silex is getting started</script></body></html>