MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

← Older edit

@@ Line 2: / Line 2: @@
   * gr_annotations.css  —  grantha.io inline Notes + Bookmarks + Feedback  (v3)
   */
-/* ── Icon base ──────────────────────────────────────────────────── */
-.gra-icon {
-  display: inline-block;
-  width:  20px;
-  height: 20px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  flex-shrink: 0;
-}
-/* comment.svg → Feedback (flag/report)  */
-.gra-icon-feedback { background-image: url('/images/feedback.svg'); }
-/* notes.svg   → Notes                  */
-.gra-icon-note     { background-image: url('/images/notes.svg'); }
-.gra-icon-bookmark { background-image: url('/images/bookmark.svg'); }
-.gra-icon-copy     { background-image: url('/images/copy.svg'); }
-.gra-icon-search { background-image: url('/images/search.svg'); }
 /* ══════════════════════════════════════════════════════════════════
@@ Line 160: / Line 142: @@
 .gra-tab .gra-icon { width: 16px; height: 16px; opacity: 0.5; }
 .gra-tab:hover { color: #333; }
-.gra-tab.gra-tab-active { color: #1a73e8; border-bottom-color: #1a73e8; }
+.gra-tab.gra-tab-active { color: #B14A2E; border-bottom-color: #B14A2E; }
 .gra-tab.gra-tab-active .gra-icon {
    opacity: 1;
-   filter: invert(30%) sepia(100%) saturate(500%) hue-rotate(190deg);
+   filter: invert(33%) sepia(52%) saturate(1104%) hue-rotate(333deg) brightness(93%) contrast(90%);}
-}
 #gra-panel-body {
@@ Line 198: / Line 179: @@
 }
 .gra-composer.gra-composer-visible { display: flex; }
 /* Feedback composer header row */
@@ Line 207: / Line 193: @@
 .gra-composer-header strong {
    flex: 1;
-   font-size: 14px;
+   font-weight: 600;
-   color: #202124;
+   color: #1C1A17;
+  font-size: 16px;
+  font-family: "Noto Sans Devanagari"
 }
 .gra-btn-x {
@@ Line 326: / Line 314: @@
 }
 .gra-composer-input::placeholder { color: #aaa; }
-.gra-composer-input:focus { border-color: #1a73e8; }
+.gra-composer-input:focus { border-color: #B14A2E; }
 .gra-composer-actions {
@@ Line 339: / Line 327: @@
    cursor: pointer;
    color: #5f6368;
-   font-size: 13px;
+   font-size: 14px;
-   font-family: inherit;
+   font-family:"Noto Sans Devanagari";
    font-weight: 500;
-   padding: 6px 12px;
+   padding: 8px 12px;
    border-radius: 4px;
 }
 .gra-btn-cancel:hover { background: #f5f5f5; }
 .gra-btn-submit {
-   background: #1a73e8;
+   background: transparent;
-   color: #fff;
+   color: #B14A2E;
    border: none;
    cursor: pointer;
-   font-size: 13px;
+   font-size: 14px;
-   font-family: inherit;
+   font-family:"Noto Sans Devanagari";
    font-weight: 500;
-   padding: 6px 16px;
+   padding: 8px 12px;
    border-radius: 4px;
+  gap: 8px;
    transition: background 0.15s;
 }
-.gra-btn-submit:hover { background: #1557b0; }
+.gra-btn-submit:hover { color: #8A351F; }
-.gra-btn-submit:disabled { background: #c5d8f8; cursor: default; }
+.gra-btn-submit:disabled { opacity: 0.4;
+  cursor: not-allowed; }
 /* ── Note cards ── */
@@ Line 490: / Line 480: @@
 .gra-bm-composer.gra-composer-visible { display: flex; }
 .gra-bm-composer-label {
-  font-weight: 600;
+   color: #1C1A17;
-   color: #202124;
+   font-size: 16px;
-   font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
+}
+.gra-bm-composer-label .gra-icon, .gra-composer-header .gra-icon, .gra-tab .gra-icon, .gra-note-card .gra-icon, .gra-bookmark-card .gra-icon {filter: brightness(0) saturate(100%) invert(7%) sepia(8%) saturate(894%) hue-rotate(357deg) brightness(97%) contrast(92%);
 }
@@ Line 814: / Line 805: @@
    .gra-composer-actions .gra-btn-submit,
    .gra-composer-actions .gra-btn-cancel { flex: 1; min-height: 44px; }
+}
+@media (max-width: 767px) {
+  /* Docked toolbar below the reader header */
+  #gra-fab.gra-fab-mobile-docked {
+    position: fixed !important;
+    top: var(--gr-toc-top, 99px) !important;  /* sits just below reader toolbar */
+    left: 0 !important;
+    right: 0 !important;
+    height: 52px !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: space-around !important;
+    border-radius: 0 !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
+    z-index: 2147483646 !important;       /* below native menu, above content */
+  }
+  #gra-fab.gra-fab-mobile-docked .gra-fab-btn {
+    flex: 1;
+    flex-direction: column;
+    height: 44px;
+    background: transparent !important;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  #gra-fab.gra-fab-mobile-docked .gra-fab-btn-label {
+    display: block;
+    font-size: 10px;
+    margin-top: 2px;
+  }
 }