new-css

css/muuri.css

@@ -186,6 +186,12 @@ input[type="search"]{
     overflow: auto;
     height: calc(100vh - 4.375rem);
 }
+.grid2 {
+  position: relative;
+  overflow: auto;
+  height: calc(100vh - 4.375rem);
+}
+
 @media screen and (max-width: 800px) {
     .grid {
         position: relative;
@@ -193,6 +199,12 @@ input[type="search"]{
         overflow-y: scroll;
         height: calc(100vh - 4.375rem);
     }
+    .grid2 {
+      position: relative;
+      width:100vw;
+      overflow-y: scroll;
+      height: calc(100vh - 4.375rem);
+  }
 }
 
 @keyframes fade-in {  
@@ -496,3 +508,17 @@ input{
   padding-top:0;
   padding-bottom: 0;
 }
+
+.ui-popup-backdrop{
+  pointer-events: none;
+}
+
+
+.button-7colors {
+  background: conic-gradient(#e74a3b, #fd7e14, #f6c23e, #1cc88a, #36b9cc, #4e73df, #9b59b6, #e74a3b);
+  border: none;
+}
+
+.button-7colors:hover{
+  filter: brightness(0.95);
+}

css/widgets.css

@@ -226,15 +226,15 @@
   }
 
   .mid_screen{
-    width:11rem;
+    width:calc(100% - 3rem);
-    height:9rem;
+    height:calc(100% - 5rem);
-    line-height:1rem;
+    line-height:1.2rem;
     padding:0.5rem;
     word-break:break-all;
     background-color: #eeeeee;
     color:black;
     font-weight:bold;
-    font-size: 0.8rem;
+    font-size: 1rem;
     border-radius:10px;
     border:solid gray 2px;
   }
@@ -317,3 +317,8 @@
 	-webkit-transform: rotate3d(0,0,1,22.5deg);
 	transform: rotate3d(0,0,1,22.5deg);
 }
+
+.cameraDiv{
+  width: calc(100% - 2rem);
+  height: calc(100% - 4.5rem);
+}