MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

← Older edit Newer edit →

@@ Line 767: / Line 767: @@
 .gra-mob-dismiss span[style] {
    color: rgba(255,255,255,0.70) !important;
+}
+/* ── Mobile: composers as bottom sheets ─────────────────────── */
+@media (max-width: 767px) {
+  /* Base (hidden) state: parked below the viewport */
+  .gra-composer,
+  .gra-bm-composer {
+    position: fixed !important;
+    top: auto !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    border-radius: 16px 16px 0 0 !important;
+    box-shadow: 0 -4px 24px rgba(0,0,0,0.18) !important;
+    padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) !important;
+    box-sizing: border-box !important;
+    transform: translateY(100%);
+    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+    z-index: 10600 !important;
+  }
+  /* Visible state: slide up into place */
+  .gra-composer.gra-composer-visible,
+  .gra-bm-composer.gra-composer-visible {
+    transform: translateY(0);
+  }
+  /* Grab handle at the top of the sheet */
+  .gra-composer::before,
+  .gra-bm-composer::before {
+    content: "";
+    display: block;
+    width: 36px;
+    height: 4px;
+    border-radius: 2px;
+    background: #d0d0d0;
+    margin: -6px auto 14px;
+  }
+  /* Inputs comfortable for touch */
+  .gra-composer .gra-composer-input,
+  .gra-bm-composer .gra-composer-input {
+    font-size: 16px !important;   /* prevents iOS zoom-on-focus */
+    min-height: 44px;
+  }
+  .gra-composer .gra-btn-submit,
+  .gra-composer .gra-btn-cancel,
+  .gra-bm-composer .gra-btn-submit,
+  .gra-bm-composer .gra-btn-cancel {
+    min-height: 44px;
+    flex: 1;
+  }
+  .gra-composer-actions { display: flex; gap: 10px; }
 }