new inputs, missing boolean input yet and treeview

examples/css/page.css

@@ -1,10 +1,295 @@
 html {
-	overflow: hidden;
-	width: 100%;
-	height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+  height: auto;
+  padding-bottom: 200px;
 }
 
 body {
-	background-color: #262626;
-	background-image: url(../../media/background.jpg);
+  background-color: #262626;
+  background-image: url(../../media/background.jpg);
 }
+
+f-node{
+  margin-top: 250px;
+}
+
+f-group {
+  position: relative;
+  width:100%;
+  background: rgba(45, 45, 48, 0.95);
+  pointer-events: auto;
+  border-bottom: 2px solid #232323;
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: calc(100% + 14px);
+  margin: 0 0 0 -15px;
+  height: 24px;
+  background: none;
+  box-shadow: none;
+  cursor: default;
+  z-index: +1;
+}
+
+#groupBox {
+  opacity: 0;
+}
+
+#groupBox:hover {
+  cursor: pointer;
+}
+
+input {
+  writing-mode: horizontal-tb !important;
+  text-rendering: auto;
+  letter-spacing: normal;
+  word-spacing: normal;
+  line-height: normal;
+  text-transform: none;
+  text-indent: 0px;
+  text-shadow: none;
+  display: inline-block;
+  text-align: start;
+  appearance: auto;
+  -webkit-rtl-ordering: logical;
+  cursor: text;
+  margin: 0em;
+  padding: 1px 2px;
+  border-width: 2px;
+  border-style: inset;
+  border-color: -internal-light-dark(
+    rgb(118, 118, 118),
+    rgb(133, 133, 133)
+  );
+  border-image: initial;
+}
+
+f-group input[type="checkbox"]:checked ~ f-elements {
+  max-height: 100vh;
+  width: 100%;
+  transition: all 500ms ease;
+  padding: 0;
+  margin: 0;
+}
+
+f-group f-elements {
+  position: relative;
+  padding: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: all 100ms ease;
+}
+
+f-group f-info {
+    position: relative;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    min-height: 24px;
+    padding-left: 11px;
+    line-height: 24px;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 13px;
+    text-transform: capitalize;
+    color: #eeeeee;
+}
+
+f-group input[type="checkbox"]:checked ~ f-info {
+  border-bottom: 2px solid #232323;
+}
+
+f-group input[type="checkbox"] ~ f-info::after {
+  content: url(../../media/arrowDown.svg);
+  transform: scale(0.015);
+  height: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: -96.5px;
+}
+
+f-group input[type="checkbox"]:checked ~ f-info::after {
+  transform: rotate(180deg) scale(0.015);
+  color: #eeeeee;
+}
+
+f-group f-element:nth-last-child(1) {
+  border-bottom: none;
+}
+
+f-treeview {
+  width: 100%;
+  padding-top: 1px;
+  padding-bottom: 3px;
+  padding-left: 16px;
+  margin-top: 2px;
+  margin-left: 2px;
+  height: calc( 100% - 8px );
+  max-height: 300px;
+  border-radius: 2px;
+  resize: none;
+  box-shadow: inset 0px 1px 1px rgb(0 0 0 / 20%), 0px 1px 0px rgb(255 255 255 / 5%);
+  background-color: #232324d1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  position: relative;
+}
+
+f-treeview f-files {
+  position: relative;
+  display: block;
+}
+f-treeview * {
+  box-sizing: border-box;
+
+}
+
+f-treeview f-file {
+  position: relative;
+  display: block;
+  white-space: nowrap;
+  min-height: 32px;
+
+}
+
+f-treeview input[type='checkbox'] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: calc(100% + 14px);
+  margin: 0 0 0 -15px;
+  height: 32px;
+  background: none;
+  box-shadow: none;
+  cursor: default;
+  z-index: 3;
+  border: solid 1px rgba(43,153,255,0);
+  border-radius: 4px;
+  transition: all 0.5s ease;
+}
+
+f-treeview input[type='checkbox']:hover {
+border: 1px solid #1e90ff;
+}
+
+f-treeview input[type='checkbox']:checked ~ f-files {
+  display: block;
+}
+
+f-treeview f-file f-info {
+  position: absolute;
+  top: 15px;
+  left: 16px;
+  line-height: 30px;
+}
+
+f-treeview f-file f-files:before {
+  content: '';
+  width: 1px;
+  height: calc(100% - 35px);
+  background: rgba(255,255,255,0.1);
+  position: absolute;
+  top: 25px;
+  left: 27px;
+}
+
+f-treeview f-file f-files {
+  display: none;
+  position: relative;
+  padding-top: 32px;
+  padding-left: 25px;
+}
+
+f-treeview f-file f-files:before {
+    content: '';
+    width: 1px;
+    height: calc(100% - 40px);
+    background: rgba(255,255,255,0.1);
+    position: absolute;
+    top: 25px;
+    left: 27px;
+}
+f-treeview f-file f-files f-file:after {
+  content: '';
+  width: 14px;
+  height: 1px;
+  background: rgba(255,255,255,0.1);
+  position: absolute;
+  top: 16px;
+  left: 3px;
+}
+
+f-treeview f-file f-files:not(:empty) + f-info f-icon {
+  width: 14px;
+  height: 14px;
+  border: solid 1px rgba(255,255,255,0.1);
+  box-shadow: 0 0 0 2px #242426;
+  border-radius: 4px;
+  position: absolute;
+  left: -20px;
+  top: -8px;
+  background: #242426;
+  z-index: 2;
+}
+
+f-treeview f-file f-info f-icon p{
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-top: -9px;
+  padding-left: 2px;
+  color: rgba(255,255,255,0.1);
+}
+
+.wrap{
+  background-color:#232324d1;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
+  grid-gap: 0.7rem;
+  padding: 30px 15px 15px 15px;
+}
+
+.gallery-item{
+  width:80px;
+  height:80px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.gallery-image{
+  width:100%;
+  height:100%;
+  border-radius: 10px;
+}
+
+.gallery-image:hover{
+  transform: scale(1.2);
+  transition: all 200ms ease-in-out;
+  cursor: pointer;
+}
+
+.btnX{
+  margin-left:93%;
+}
+
+
+
+
+
+
+
+
+