Ticket #4674 - Studio: Layout changes.

studio/template/css/launcher.css

@@ -100,19 +100,19 @@ div.bx-std-widget-empty {
 .bx-std-widget-icon {
     position: relative;
     top: 0px;
-    width: 5.0rem;
-    height: 5.0rem;
+    width: 6.0rem;
+    height: 6.0rem;
 
-    background-color:transparent;
+    background-color: transparent;
 
-    line-height: 5.0rem;
+    line-height: 6.0rem;
 }
 
 .bx-std-widget-icon i.sys-icon {
     position: absolute;
     z-index: 2;
     left: 0px;
-    width: 5.0rem;
+    width: 6.0rem;
 
     font-size: 48px;
     text-align: center;
@@ -120,17 +120,6 @@ div.bx-std-widget-empty {
     color: white;
 }
 
-.bx-std-widget-icon-trans {
-    -webkit-transition: all 0.15s ease-out;
-    -moz-transition: all 0.15s ease-out;
-    -ms-transition: all 0.15s ease-out;
-    -o-transition: all 0.15s ease-out;
-}
-
-.bx-std-widget-icon:hover {
-    top:3px;
-}
-
 .bx-std-widget-icon-disabled {
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
     filter: alpha(opacity=40);
@@ -143,8 +132,8 @@ div.bx-std-widget-empty {
     position:relative;
     z-index:2;
 
-    width: 5.0rem;
-    height: 5.0rem;
+    width: 6.0rem;
+    height: 6.0rem;
 
     background-color: transparent;
     background-position:0px 0px;
@@ -155,8 +144,8 @@ div.bx-std-widget-icon-jitter {
     position: absolute;
     top: 24px;
     left: 24px;
-    width: 5.0rem;
-    height: 5.0rem;
+    width: 6.0rem;
+    height: 6.0rem;
     z-index: 5;
 
     background-color: transparent;
@@ -166,7 +155,7 @@ div.bx-std-widget-icon-jitter img {
     position:absolute;
 
     bottom: -0.125rem;
-    left: 1.375rem;
+    left: 1.875rem;
     width: 2.25rem;
     height: 1.25rem;
 
@@ -243,7 +232,7 @@ div.bx-std-widget-action i.sys-icon {
     position: absolute;
     top: 6.75rem;
     left: 1.5rem;
-    width: 5.0rem;
+    width: 6.0rem;
     height: 0.75rem;
 
     background-image: url(../images/loading.gif);
@@ -256,17 +245,17 @@ div.bx-std-widget-action i.sys-icon {
 }
 div.bx-std-widget-caption {
     position: relative;
-    width: 5.0rem;
-    height: 1.25rem;
+    width: 6.0rem;
+    height: 2rem;
 
-    line-height: 1.25rem;
+    line-height: 2rem;
     white-space: nowrap;
     text-align: center; 
     text-overflow: ellipsis;
     overflow: hidden;
 
     font-stretch: condensed;
-    font-weight: 500;
+    font-weight: 400;
     font-size: 0.75rem;
 }
 div.bx-std-widget-caption-jitter {
@@ -278,8 +267,7 @@ div.bx-std-widget-caption-jitter {
 }
 div.bx-std-widget-caption,
 div.bx-std-widget-caption a {
-    color: #ffffff;
-    font-weight:normal;
+    color: rgba(107, 114, 128, 1);
 }
 
 /**

studio/template/widget.html

@@ -1,6 +1,6 @@
 <div id="bx-std-widget-__id__" class="bx-std-widget __widget_disabled_class__ __widget_featured_class__" style="__widget_styles__" data-name="__name__">
     <div class="bx-std-widget-cont">
-        <div class="bx-std-widget-icon bx-std-widget-icon-trans rounded-2xl overflow-hidden">
+        <div class="bx-std-widget-icon bx-std-widget-icon-trans rounded-2xl overflow-hidden hover:ring hover:ring-blue-600 hover:ring-offset-2 hover:ring-offset-black hover:scale-105 active:scale-100 active:opacity-80 duration-300">
             <a class="bx-std-widget-link" href="__url__" <bx_if:show_click_icon>onClick="__content__"</bx_if:show_click_icon>>
                 <bx_if:icon>
                     <img src="<bx_icon_url:wi-empty.png />" />