first commit

web/css/backend/beta/animations.css

@@ -0,0 +1,135 @@
+/* ----------------------------------------------
+ * Generated by Animista on 2022-1-3 10:45:31
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation heartbeat
+ * ----------------------------------------
+ */
+ @-webkit-keyframes heartbeat {
+    from {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+      -webkit-transform-origin: center center;
+              transform-origin: center center;
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+    10% {
+      -webkit-transform: scale(0.91);
+              transform: scale(0.91);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    17% {
+      -webkit-transform: scale(0.98);
+              transform: scale(0.98);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+    33% {
+      -webkit-transform: scale(0.77);
+              transform: scale(0.77);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    45% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+  }
+  @keyframes heartbeat {
+    from {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+      -webkit-transform-origin: center center;
+              transform-origin: center center;
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+    10% {
+      -webkit-transform: scale(0.91);
+              transform: scale(0.91);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    17% {
+      -webkit-transform: scale(0.98);
+              transform: scale(0.98);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+    33% {
+      -webkit-transform: scale(0.77);
+              transform: scale(0.77);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    45% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+  }
+  
+/* ----------------------------------------------
+ * Generated by Animista on 2022-1-3 11:24:9
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation shake-bottom
+ * ----------------------------------------
+ */
+  @keyframes shake-top {
+    0%{
+        transform: rotate(0deg);
+        transform-origin: 50% 0;
+      }
+      2%{
+        transform: rotate(2deg);
+      }
+      4%{
+        transform: rotate(-8deg);
+      }
+      6%{
+        transform: rotate(8deg);
+      }
+      8%{
+        transform: rotate(-8deg);
+      }
+      10%{
+        transform: rotate(8deg);
+      }
+      12%{
+        transform: rotate(-8deg);
+      }
+      14%{
+        transform: rotate(8deg);
+      }
+      16%{
+        transform: rotate(-2deg);
+      }
+      18%{
+        transform: rotate(2deg);
+      }
+      20%{
+        transform: rotate(0deg);
+        transform-origin: 50% 0;
+      }
+  }
+
+  .shake-top {
+	        animation: shake-top 6s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
+}
+  

web/css/backend/beta/dashboard.css

@@ -0,0 +1,343 @@
+#dashboard {
+   padding-top: 20px;
+   background-color: #F8F8F8;
+}
+
+#dashboard > .tabs
+{
+   margin-bottom: 15px;
+   display: flex;
+}
+
+#dashboard > .tabs > li {
+   margin-right: 8px;
+}
+
+#dashboard > .tabs > li > a {
+   display: block;
+   background-color: #eee;
+   color: #444;
+   padding: 11px 15px;
+   /*border: 1px solid #ccc;*/
+   border-bottom: none;
+   text-decoration: none;
+}
+
+#dashboard > .tabs > li:hover > a {
+   color: #000;
+   background-color: #ddd;
+
+}
+
+#dashboard > .tabs > li:hover > a .svg-icon {
+   background-color: var(--color-dark);
+}
+
+#dashboard > .tabs > li > a.current {
+   color: #000;
+   background-color: #fff;
+   margin-bottom: -1px;
+}
+
+#dashboard > .tabs > li > a[href="#new"] {
+   font-weight: bold;
+}
+
+#dashboard > .panes {
+   background-color: #FFFFFF;
+}
+
+#dashboard > .panes > div {
+   min-height: 222px;
+   margin-bottom: 30px;
+   background: #f8f8f8;
+}
+
+#dashboard > .menu {
+   text-align: right;
+   float: right;
+   padding-right: 10px;
+}
+
+#dashboard > .menu > li {
+   float: left;
+   margin-left: 5px;
+   position: relative;
+}
+
+#dashboard > .menu .dropdown_menu {
+   width: 150px;
+   right: 0;
+}
+
+#dashboard > .menu > li > a {
+   background-position: right center;
+   background-repeat: no-repeat;
+   color: #6F7170;
+   text-decoration: none;
+   padding-right: 20px;
+}
+
+#dashboard > .menu > li > a:hover {
+   background-color: #fff;
+}
+
+#dashboard > .menu > li >a[rel="#gadgets_directory"] {
+   background-image: url("/images/backend/beta/icons/22x22/add.png");
+}
+
+#dashboard > .menu > .config > a {
+   background-image: url("/images/backend/beta/icons/22x22/config.png");
+}
+
+#dashboard .dropdown_menu {
+   display: none;
+   text-align: right;
+   position: absolute;
+   background-color: #fff;
+   width: 170px;
+   box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
+   z-index: 1000;
+   right: 0;
+}
+
+#dashboard li:hover > .dropdown_menu {
+   display: block;
+}
+
+#dashboard .column {
+   min-height: 222px;
+   background-color: #fff;
+   background-clip: content-box;
+}
+
+#dashboard .gadget:hover {
+   /*-moz-box-shadow: 5px 5px 3px #888;
+   -webkit-box-shadow: 5px 5px 3px #888;
+   box-shadow: 2px 2px 3px 0px #CCCCCC;*/
+}
+
+#dashboard .gadget {
+   padding-bottom: 10px;
+   background: #fff;
+   padding-left: 20px;
+   padding-right: 20px;
+   position: relative;
+}
+
+#dashboard .gadget .moveable {
+   cursor: move;
+}
+
+#dashboard .gadget h2
+{
+   margin: 0;
+   font-size: 17px;
+   font-weight: 400;
+   padding: 21px 0px 15px 3px;
+   color: #000;
+}
+
+#dashboard .gadget h2 a {
+   display: inline-block;
+}
+
+#dashboard .gadget .menu {
+   display: none;
+   position: absolute;
+   right: 20px;
+   top: 20px;
+}
+
+#dashboard .gadget:hover .menu {
+   display: block;
+}
+
+#dashboard .gadget .menu > li {
+   float: left;
+   margin-left: 5px;
+   position: relative;
+}
+
+#dashboard .gadget .admin_form .row>label, 
+#dashboard .gadget  .admin_form .row>.label {
+   min-width: 140px;
+}
+
+#dashboard .gadget .config {
+   padding-right: 2px;
+
+   padding-left: 2px;
+
+   padding-bottom: 2px;
+}
+
+#gadgets_configuration {
+   width: 500px;
+}
+
+#gadgets_configuration > .content {
+   padding: 10px;
+}
+
+#gadgets_configuration .colors li {
+   float: left;
+   margin-right: 5px;
+   border: 1px solid #bababa;
+}
+
+#gadgets_configuration .colors li.current,
+#gadgets_configurationn .colors li:hover {
+   border-color: #424242;
+}
+
+#gadgets_configuration .colors a {
+   display: block;
+   width: 15px;
+   height: 15px;
+   border: 1px solid #fff;
+}
+
+#dashboard .gadget > .content {
+   min-height: 100px;
+   padding-top: 5px;
+}
+
+#dashboard .gadget > .content iframe {
+   overflow: auto;
+}
+
+#dashboard .gadget > .minimized {
+   display: none;
+}
+
+#dashboard .column .add-gadget-placeholder,
+#dashboard .column .placeholder {
+   background-color: #fff;
+   /*border: 1px dashed #ccc;*/
+   padding-bottom: 10px;
+   /*margin-left: 10px;
+   margin-right: 10px;*/
+}
+
+#dashboard .column .add-gadget-placeholder {
+    font-size: 16px;
+    padding: 10px;
+    text-align: left;
+}
+
+
+#dashboard .admin_actions,
+#dashboard_configuration admin_actions {
+   float: left;
+}
+
+#dashboard_configuration {
+   width: 530px;
+}
+
+#dashboard_configuration .content {
+   background-color: #fff;
+   padding: 10px;
+}
+#dashboard_configuration .layouts {
+   max-width: 250px;
+}
+
+#dashboard_configuration .layouts a {
+   border: 1px solid #ccc;
+   display: block;
+   padding: 2px;
+   display: inline-block;
+}
+
+#dashboard_configuration .layouts a img {
+   display: block;
+}
+
+#dashboard_configuration .layouts li.current a,
+#dashboard_configuration .layouts a:hover {
+   border-color: #444;
+}
+
+#dashboard_configuration .layouts li {
+   float: left;
+   margin-right: 5px;
+   margin-bottom: 5px;
+}
+
+/*
+#dashboard_navbar {
+   border-top: 1px solid #ccc;
+   background-color: #eee;
+   position: fixed;
+   bottom: 0px;
+   width: 100%;
+   opacity: 0.8;
+}
+
+#dashboard_navbar > .menu {
+   line-height: 0px;
+   float: right;
+   padding:10px;
+}
+
+#dashboard_navbar > .menu li {
+   display: inline;
+   padding-left: 5px;
+}
+
+#dashboard_navbar > .menu li.clr {
+   padding: 0;
+}
+
+#dashboard_navbar > .menu a {
+   opacity: 0.6;
+}
+
+#dashboard_navbar .menu a:hover {
+   opacity: 1;
+}
+*/
+
+#gadgets_directory {
+   max-width: 800px;
+   min-height: 500px;
+   width: 100%;
+   min-width: 250px;
+}
+
+#gadgets_directory.preloader_160x24 {
+   background-color: #fff;
+   display: none;
+}
+
+#gadgets_directory > .content {
+   background-color: #fff;
+   clear: left;
+   max-height: 650px;
+   overflow-y: auto;
+}
+
+#gadgets_directory .gadget:nth-child(even) {
+   background-color: var(--color-super-light);
+}
+
+#gadgets_directory .gadget h3 {
+   font-size: 17px;
+   font-weight: 400;
+   color: #000;
+}
+
+#gadgets_directory .gadget:hover {
+   background-color: var(--highlight-color) !important;
+}
+
+#gadgets_directory .gadget:hover a.button {
+   border: 1px solid var(--color-light-hover);
+}
+
+
+#gadgets_directory a.button:hover .svg-icon {
+   /*background-color: #fff;*/
+}

web/css/backend/beta/token_input.css

@@ -0,0 +1,90 @@
+.token-input-list-backend {
+   border: 1px solid #ddd;
+   padding-top: 3px;
+   padding-left: 3px;
+   overflow: auto;
+   box-sizing: border-box;
+   -webkit-box-sizing:border-box;
+   -moz-box-sizing: border-box;
+   -ms-box-sizing: border-box;   
+}
+
+
+.token-input-token-backend p {
+   display: inline;
+}
+
+.token-input-token-backend {
+   border: 1px solid #ddd;
+   padding: 7px 9px;
+   background: #eee;
+}
+
+.token-input-delete-token-backend {
+   color: #666;
+   cursor: pointer;
+   line-height: 8px;
+   margin-left: 5px;
+   padding: 3px;
+   display: block;
+}
+
+.token-input-delete-token-backend:hover,
+.token-input-selected-token-backend .token-input-delete-token-backend {
+   background-color: #D92929;
+}
+
+.token-input-delete-token-backend:hover .svg-icon,
+.token-input-selected-token-backend .token-input-delete-token-backend .svg-icon {
+   background-color: #fff;
+}
+
+.token-input-token-backend, .token-input-input-token-backend {
+   margin-right: 3px;
+   margin-bottom: 3px;
+   float: left;
+   display: flex;
+   flex-wrap: nowrap;
+   align-items: center;
+   min-height: 20px;
+   line-height: 1em;
+}
+
+.token-input-input-token-backend > input {
+   min-width: 100px;
+   max-width: 400px;
+   border-color: transparent;
+   padding: 8px 10px;
+}
+
+.token-input-input-token-backend > input:focus {
+   border-color: inherit;
+}
+
+div.token-input-dropdown-backend {
+   padding: 3px;
+   border: none;
+   background-color: #fff;
+   min-width: 150px;
+   box-shadow: 0 4px 5px rgb(0 0 0 / 15%);
+   margin-bottom: 10px;
+   max-height: 300px;
+   overflow-y: auto;
+}
+
+div.token-input-dropdown-backend ul li {
+   padding: 5px 10px;
+   cursor: pointer;
+}
+
+div.token-input-dropdown-backend > p {
+   padding: 3px 5px;
+}
+
+
+div.token-input-dropdown-backend ul li.token-input-selected-dropdown-item-backend {
+   background-color: #3875d7;
+   /* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #3875d7), color-stop(90%, #2a62bc)); */
+   background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
+   color: #fff;
+}