sync

examples/app_hub/hub.css

@@ -40,6 +40,18 @@
   margin-bottom: 8px;
 }
 
+.hub-title-with-thunder {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.hub-title-with-thunder .hub-title {
+  margin: 0;
+  position: relative;
+  z-index: 1;
+}
+
 .hub-logo-mark {
   width: 56px;
   height: 42px;
@@ -47,7 +59,7 @@
 }
 
 .hub-title {
-  margin: 0 0 8px;
+  margin: 0 0 4px;
   font-size: 2.45rem;
   font-weight: 800;
   line-height: 1.02;
@@ -55,9 +67,15 @@
 }
 
 .hub-thunder {
-  width: clamp(220px, 34vw, 340px);
+  position: absolute;
+  left: 50%;
+  top: 50px;
+  width: 150%;
   height: auto;
-  margin-top: -2px;
+  margin: 0;
+  transform: translateX(-50%);
+  z-index: 0;
+  pointer-events: none;
   filter: drop-shadow(0 0 8px rgba(170, 220, 255, 0.35));
 }
 
@@ -171,23 +189,52 @@
 
 .hub-clock-widget {
   position: fixed;
-  left: calc(50% + 290px);
+  right: 24px;
-  top: calc(50% - 300px);
+  top: 24px;
-  width: min(420px, 42vw);
+  left: auto;
-  min-width: 330px;
+  width: 420px;
   z-index: 3;
   border: 1px solid rgba(255, 255, 255, 0.72);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.48);
   border-radius: 18px;
-  overflow: hidden;
+  overflow: visible;
-  background: linear-gradient(180deg, rgba(18, 24, 34, 0.92), rgba(13, 18, 28, 0.9));
+  background: rgba(226, 34, 34, 0.5);
   backdrop-filter: blur(1.5px);
   transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
   cursor: move;
   user-select: none;
   touch-action: none;
-  padding: 30px;
+  padding: 60px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.cw-clock-inner {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border-radius: 12px;
+  overflow: hidden;
+  background: linear-gradient(180deg, rgba(18, 24, 34, 0.92), rgba(13, 18, 28, 0.9));
+}
+
+.cw-clock-inner > * {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.cw-line {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  text-align: center;
 }
 
 .hub-clock-widget:hover {
@@ -196,46 +243,40 @@
   filter: saturate(1.04);
 }
 
+.cw-primary-block {
+  padding: 0;
+  display: grid;
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+  overflow: hidden;
+  background: rgba(0, 180, 80, 0.35);
+}
+
 .cw-row {
   width: 100%;
-  display: grid;
+  min-height: 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.32);
+  box-sizing: border-box;
 }
 
-.cw-row:first-child { border-top: 0; }
+.cw-row-clock {
-.cw-row-main { grid-template-columns: 1fr; }
-.cw-row-mid { grid-template-columns: repeat(4, 1fr); }
-.cw-row-world { grid-template-columns: repeat(3, 1fr); }
-
-.cw-cell {
-  border-left: 1px solid rgba(255, 255, 255, 0.32);
-  min-height: 42px;
-  padding: 6px;
-}
-
-.cw-cell:first-child { border-left: 0; }
-
-.cw-main-cell {
-  min-height: 168px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 0;
-  background: linear-gradient(180deg, rgba(30, 40, 28, 0.85), rgba(20, 28, 20, 0.85));
-}
-
-.cw-line-time {
-  width: 100%;
   display: flex;
   justify-content: center;
+  align-items: end;
+  overflow: hidden;
+  container-type: inline-size;
+  padding: 16px 0 6px;
 }
 
 .cw-line-time .cw-time-main {
   font-weight: 800;
 }
 
+.cw-row-tz,
+.cw-row-date {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .cw-time-main {
   display: inline-flex;
   align-items: flex-end;
@@ -243,8 +284,13 @@
   gap: 2px;
   line-height: 1;
   font-weight: 700;
-  width: 100%;
+  width: fit-content;
   max-width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  border: 1px solid rgba(170, 255, 200, 0.95);
+  border-radius: 8px;
+  padding: 4px 6px;
 }
 
 .ot-lcd-line {
@@ -254,12 +300,28 @@
 }
 
 .ot-lcd-bold .ot-glyph-wrap--bold {
-  transform: scale(1.12, 1.2);
+  transform: scale(1.08, 1.12);
+  transform-origin: bottom center;
 }
 
 #cw-hm-lcd .ot-glyph {
-  height: 68px;
+  height: 136px;
   width: auto;
+  max-width: 100%;
+}
+
+@container (max-width: 300px) {
+  #cw-hm-lcd .ot-glyph {
+    height: 108px;
+  }
+
+  .ot-lcd-sec .ot-glyph {
+    height: 26px;
+  }
+
+  .ot-lcd-tz .ot-glyph {
+    height: 24px;
+  }
 }
 
 .ot-lcd-sec {
@@ -291,7 +353,8 @@
 }
 
 .ot-glyph-wrap--bold {
-  transform: scale(1.08, 1.14);
+  transform: scale(1.06, 1.1);
+  transform-origin: bottom center;
 }
 
 .ot-glyph {
@@ -318,8 +381,6 @@
   letter-spacing: 0.16em;
   font-weight: 300;
   text-transform: uppercase;
-  width: 100%;
-  text-align: center;
 }
 
 .cw-line-date {
@@ -328,22 +389,47 @@
   letter-spacing: 0.12em;
   font-weight: 400;
   text-transform: uppercase;
-  width: 100%;
-  text-align: center;
 }
 
-.cw-row-mid {
+.cw-separator {
-  display: none;
+  margin: 5px 0;
+  height: 2px;
+  width: 100%;
+  border: 0;
+  background: linear-gradient(
+    90deg,
+    rgba(239, 243, 252, 0) 0%,
+    rgba(239, 243, 252, 0.5) 50%,
+    rgba(239, 243, 252, 0) 100%
+  );
+}
+
+.cw-world-section {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  width: 100%;
+  max-width: 100%;
+  border-top: 0;
+  justify-items: center;
+  background: rgba(40, 110, 255, 0.35);
 }
 
 .cw-world-cell {
+  min-width: 0;
+  width: 100%;
   min-height: 178px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   gap: 5px;
-  padding: 25px 6px;
+  padding: 20px 4px;
   background: rgba(20, 28, 40, 0.62);
+  border-left: 1px solid rgba(255, 255, 255, 0.22);
+}
+
+.cw-world-cell:first-child {
+  border-left: 0;
 }
 
 .cw-world-label {
@@ -355,8 +441,11 @@
 }
 
 .cw-dial {
-  width: 95px;
+  width: 100%;
-  height: 95px;
+  max-width: 70px;
+  aspect-ratio: 1;
+  height: auto;
+  margin-inline: auto;
   border-radius: 50%;
   position: relative;
   border: 2px solid rgba(239, 243, 252, 0.8);
@@ -371,7 +460,7 @@
   width: 15px;
   height: 15px;
   margin: -7.5px;
-  transform: rotate(calc(var(--i) * 30deg)) translateY(-34px) rotate(calc(var(--i) * -30deg));
+  transform: rotate(calc(var(--i) * 30deg)) translateY(-30px) rotate(calc(var(--i) * -30deg));
   font-family: "Times New Roman", serif;
   font-size: 9px;
   font-weight: 700;
@@ -391,19 +480,34 @@
 
 .cw-resize-handle {
   position: absolute;
-  width: 32px;
+  width: 50px;
-  height: 32px;
+  height: 50px;
+  min-width: 50px;
+  min-height: 50px;
   z-index: 6;
-  display: grid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: rgba(220, 236, 255, 0.9);
   filter: drop-shadow(0 0 4px rgba(150, 200, 255, 0.35));
   pointer-events: auto;
-  background: transparent;
+  background: rgba(226, 34, 34, 0.5);
+  box-sizing: border-box;
 }
 
-.cw-resize-handle svg {
+.cw-resize-handle-visual {
-  width: 16px;
+  width: 5px;
-  height: 16px;
+  height: 5px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.cw-resize-handle-visual svg {
+  width: 100%;
+  height: 100%;
   fill: currentColor;
   pointer-events: none;
 }
@@ -412,14 +516,19 @@
   left: 0;
   bottom: 0;
   cursor: nesw-resize;
-  place-items: end start;
+}
+
+.cw-resize-sw .cw-resize-handle-visual {
+  transform: none;
 }
 
 .cw-resize-nw {
   left: 0;
   top: 0;
   cursor: nwse-resize;
-  place-items: start start;
+}
+
+.cw-resize-nw .cw-resize-handle-visual {
   transform: scaleY(-1);
 }
 
@@ -427,7 +536,9 @@
   right: 0;
   top: 0;
   cursor: nesw-resize;
-  place-items: start end;
+}
+
+.cw-resize-ne .cw-resize-handle-visual {
   transform: scale(-1, -1);
 }
 
@@ -435,8 +546,10 @@
   right: 0;
   bottom: 0;
   cursor: nwse-resize;
-  place-items: end end;
+}
-  transform: scale(-1, 1);
+
+.cw-resize-se .cw-resize-handle-visual {
+  transform: scaleX(-1);
 }
 
 .cw-hand {

examples/app_hub/index.html

@@ -11,7 +11,7 @@
     })();
   </script>
   <link rel="stylesheet" href="/app/androidcast_project/crashes/assets/css/app.css">
-  <link rel="stylesheet" href="hub.css?v=20260527t">
+  <link rel="stylesheet" href="hub.css?v=20260527v">
   <link rel="stylesheet" href="hub-logo-layers.css">
 </head>
 <body class="hub-page">
@@ -687,7 +687,7 @@
             widget.style.left = Math.max(0, ev.clientX - drag.dx) + 'px';
             widget.style.top = Math.max(0, ev.clientY - drag.dy) + 'px';
           } else {
-            var minW = 280, minH = 210;
+            var minW = 1, minH = 1;
             var dx = ev.clientX - drag.x;
             var dy = ev.clientY - drag.y;
             var left = drag.left, top = drag.top, width = drag.width, height = drag.height;
@@ -704,7 +704,7 @@
             widget.style.left = Math.max(0, left) + 'px';
             widget.style.top = Math.max(0, top) + 'px';
             widget.style.width = width + 'px';
-            widget.style.minWidth = width + 'px';
+            widget.style.minWidth = '';
             widget.style.transform = 'none';
           }
         });