Anandamakaranda

MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(16 intermediate revisions by the same user not shown)
Line 2: Line 2:
  * gr_annotations.css  —  grantha.io inline Notes + Bookmarks + Feedback  (v3)
  * 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 90: Line 72:
   position: fixed;
   position: fixed;
   top: 0;
   top: 0;
   right: -360px;
   right: -400px;
   width: 340px;
   width: 400px;
   height: 100vh;
   height: 100vh;
   background: #fff;
   background: #fff;
Line 160: Line 142:
.gra-tab .gra-icon { width: 16px; height: 16px; opacity: 0.5; }
.gra-tab .gra-icon { width: 16px; height: 16px; opacity: 0.5; }
.gra-tab:hover { color: #333; }
.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 {
.gra-tab.gra-tab-active .gra-icon {
   opacity: 1;
   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 {
#gra-panel-body {
Line 198: Line 179:
}
}
.gra-composer.gra-composer-visible { display: flex; }
.gra-composer.gra-composer-visible { display: flex; }


/* Feedback composer header row */
/* Feedback composer header row */
Line 207: Line 193:
.gra-composer-header strong {
.gra-composer-header strong {
   flex: 1;
   flex: 1;
   font-size: 14px;
   font-weight: 600;
   color: #202124;
   color: #1C1A17;
  font-size: 16px;
  font-family: "Noto Sans Devanagari"
}
}
.gra-btn-x {
.gra-btn-x {
Line 326: Line 314:
}
}
.gra-composer-input::placeholder { color: #aaa; }
.gra-composer-input::placeholder { color: #aaa; }
.gra-composer-input:focus { border-color: #1a73e8; }
.gra-composer-input:focus { border-color: #B14A2E; }


.gra-composer-actions {
.gra-composer-actions {
Line 339: Line 327:
   cursor: pointer;
   cursor: pointer;
   color: #5f6368;
   color: #5f6368;
   font-size: 13px;
   font-size: 14px;
   font-family: inherit;
   font-family:"Noto Sans Devanagari";
   font-weight: 500;
   font-weight: 500;
   padding: 6px 12px;
   padding: 8px 12px;
   border-radius: 4px;
   border-radius: 4px;
}
}
.gra-btn-cancel:hover { background: #f5f5f5; }
.gra-btn-cancel:hover { background: #f5f5f5; }
.gra-btn-submit {
.gra-btn-submit {
   background: #1a73e8;
   background: transparent;
   color: #fff;
   color: #B14A2E;
   border: none;
   border: none;
   cursor: pointer;
   cursor: pointer;
   font-size: 13px;
   font-size: 14px;
   font-family: inherit;
   font-family:"Noto Sans Devanagari";
   font-weight: 500;
   font-weight: 500;
   padding: 6px 16px;
   padding: 8px 12px;
   border-radius: 4px;
   border-radius: 4px;
  gap: 8px;
   transition: background 0.15s;
   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 ── */
/* ── Note cards ── */
Line 376: Line 366:
   border-color: #34a853;
   border-color: #34a853;
   box-shadow: 0 0 0 2px rgba(52,168,83,0.25);
   box-shadow: 0 0 0 2px rgba(52,168,83,0.25);
}
/* NEW: were missing entirely — confirmed the reported "highlight not
  happening" gap was exactly this: bookmark and footnote cards had no
  .gra-card-active rule at all, so clicking their highlight in the
  document correctly scrolled to the card but showed no visual flash.
  Matches each type's own established color (see section 6 below —
  blue for bookmark, yellow/amber for footnote) rather than inventing a
  new, inconsistent color. */
.gra-bookmark-card.gra-card-active {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26,115,232,0.25);
}
.gra-footnote-card.gra-card-active {
  border-color: #fbbc04;
  box-shadow: 0 0 0 2px rgba(251,188,4,0.35);
}
}
.gra-card-header {
.gra-card-header {
Line 490: Line 495:
.gra-bm-composer.gra-composer-visible { display: flex; }
.gra-bm-composer.gra-composer-visible { display: flex; }
.gra-bm-composer-label {
.gra-bm-composer-label {
  font-weight: 600;
   color: #1C1A17;
   color: #202124;
   font-size: 16px;
   font-size: 13px;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   gap: 8px;
   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 522: Line 528:
   transition: background 0.15s;
   transition: background 0.15s;
}
}
.gra-bookmark-highlight:hover { background: rgba(26, 115, 232, 0.22); }
/* NEW: was missing entirely — notes and footnotes already had their own
  .gra-hl-active rule, bookmarks had none, confirmed directly. */
.gra-bookmark-highlight:hover,
.gra-bookmark-highlight.gra-hl-active {
  background: rgba(26, 115, 232, 0.28);
  outline: 1.5px solid #1a73e8;
}
 
/* Footnote highlight — yellow tint */
.gra-qe-footnote-highlight {
  background: rgba(251, 188, 4, 0.28);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s;
}
.gra-qe-footnote-highlight:hover,
.gra-qe-footnote-highlight.gra-hl-active {
  background: rgba(251, 188, 4, 0.5);
  outline: 1.5px solid #fbbc04;
}
 
/* REMOVED: .gra-qe-sandarbha-highlight — Sandarbha was fully replaced by
  the real Ullekha citation-index feature (gr-reference class) earlier
  in the project. This class is never applied by any current code, so
  this was dead CSS. */


/* ══════════════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════════
Line 822: Line 852:
     left: 0 !important;
     left: 0 !important;
     right: 0 !important;
     right: 0 !important;
    width: 100% !important;
     height: 52px !important;
     height: 52px !important;
     flex-direction: row !important;
     flex-direction: row !important;
Line 828: Line 857:
     justify-content: space-around !important;
     justify-content: space-around !important;
     border-radius: 0 !important;
     border-radius: 0 !important;
    padding: 0 8px !important;
    background: #4A433A !important;      /* your toolbar colour */
     box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
     box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
     z-index: 2147483646 !important;      /* below native menu, above content */
     z-index: 2147483646 !important;      /* below native menu, above content */
    gap: 0 !important;
   }
   }


Line 848: Line 874:
     font-size: 10px;
     font-size: 10px;
     margin-top: 2px;
     margin-top: 2px;
  }
  /* Dismiss button visually separated on the right */
  #gra-fab.gra-fab-mobile-docked .gra-fab-btn-dismiss {
    flex: 0 0 44px;
    border-left: 1px solid rgba(255,255,255,0.2);
   }
   }
}
}
Retrieved from "https://dev.anandamakaranda.in/MediaWiki:Gadget-GrAnnotations.css"