MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

(5 intermediate revisions by the same user not shown)

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'); }~~

~~.gra-icon-dismiss { background-image: url('/images/close.svg'); }~~

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

Line 161:

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 500:

Line 480:

.gra-bm-composer.gra-composer-visible { display: flex; }

.gra-bm-composer-label {

~~font-weight: 600;~~

color: #1C1A17;

font-size: 16px;

Line 506:

Line 485:

align-items: center;

gap: 8px;

~~font-family: "Noto Sans Devanagari"~~

}

.gra-bm-composer-label .gra-icon, .gra-composer-header .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 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'); }
-.gra-icon-dismiss { background-image: url('/images/close.svg'); }
 /* ══════════════════════════════════════════════════════════════════
@@ Line 161: / 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 500: / Line 480: @@
 .gra-bm-composer.gra-composer-visible { display: flex; }
 .gra-bm-composer-label {
-  font-weight: 600;
    color: #1C1A17;
    font-size: 16px;
@@ Line 506: / Line 485: @@
    align-items: center;
    gap: 8px;
-  font-family: "Noto Sans Devanagari"
 }
-.gra-bm-composer-label .gra-icon, .gra-composer-header .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%);
 }