MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

← Older edit Newer edit →

@@ Line 768: / Line 768: @@
    color: rgba(255,255,255,0.70) !important;
 }
-/* ── Mobile: composers as bottom sheets ─────────────────────── */
 @media (max-width: 767px) {
-   /* Base (hidden) state: parked below the viewport */
+   /* Bottom sheet — pinned to bottom via inset, animated via transform */
-   .gra-composer,
+   #gra-fb-composer.gra-composer,
-   .gra-bm-composer {
+  #gra-nt-composer.gra-composer,
+   #gra-bm-composer.gra-bm-composer {
      position: fixed !important;
-     top: auto !important;
+     inset: auto 0 0 0 !important;          /* top:auto right:0 bottom:0 left:0 */
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
@@ Line 786: / Line 783: @@
      padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) !important;
      box-sizing: border-box !important;
-     transform: translateY(100%);
+     transform: translateY(100%) !important;
-     transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+     transition: transform 0.28s cubic-bezier(0.32,0.72,0,1) !important;
      z-index: 10600 !important;
    }
-   /* Visible state: slide up into place */
+   /* Slide up when visible */
-   .gra-composer.gra-composer-visible,
+   #gra-fb-composer.gra-composer-visible,
-   .gra-bm-composer.gra-composer-visible {
+  #gra-nt-composer.gra-composer-visible,
-     transform: translateY(0);
+   #gra-bm-composer.gra-composer-visible {
+     transform: translateY(0) !important;
    }
-   /* Grab handle at the top of the sheet */
+   /* Grab handle */
-   .gra-composer::before,
+   #gra-fb-composer::before,
-   .gra-bm-composer::before {
+  #gra-nt-composer::before,
+   #gra-bm-composer::before {
      content: "";
      display: block;
-     width: 36px;
+     width: 36px; height: 4px;
-    height: 4px;
      border-radius: 2px;
      background: #d0d0d0;
@@ Line 809: / Line 807: @@
    }
-  /* Inputs comfortable for touch */
    .gra-composer .gra-composer-input,
    .gra-bm-composer .gra-composer-input {
-     font-size: 16px !important;   /* prevents iOS zoom-on-focus */
+     font-size: 16px !important;   /* no 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; }
-   #gra-backdrop {
+   .gra-composer-actions .gra-btn-submit,
-   transition: opacity 0.25s ease;
+   .gra-composer-actions .gra-btn-cancel { flex: 1; min-height: 44px; }
-  opacity: 0;
-  pointer-events: none;
-}
-#gra-backdrop.gra-backdrop-visible {
-  opacity: 1;
-  pointer-events: auto;
-}
 }