MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

No edit summary
No edit summary
 
(2 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'); }
.gra-icon-dismiss { background-image: url('/images/close.svg'); }


/* ══════════════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════════
Line 505: Line 486:
   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 {
.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%);
margin-top: -3px;
filter: brightness(0) saturate(100%) invert(7%) sepia(8%) saturate(894%) hue-rotate(357deg) brightness(97%) contrast(92%);
}
}


Line 535: Line 514:
}
}
.gra-bookmark-highlight:hover { background: rgba(26, 115, 232, 0.22); }
.gra-bookmark-highlight:hover { background: rgba(26, 115, 232, 0.22); }
/* 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;
}


/* ══════════════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════════