Anandamakaranda

MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(49 intermediate revisions by 2 users 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/commentary.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'); }


/* ══════════════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════════
   1. FLOATING ACTION STRIP  (3 buttons)
   1. FLOATING ACTION STRIP  (desktop only)
   ══════════════════════════════════════════════════════════════════ */
   ══════════════════════════════════════════════════════════════════ */
#gra-fab {
#gra-fab {
Line 27: Line 10:
   z-index: 10200;
   z-index: 10200;
   display: none;
   display: none;
   flex-direction: column;
   flex-direction: row;
  gap: 4px;
   background: #B14A2E !important;
   background: #fff;
    border: none !important;
  border: 1px solid #e0e0e0;
    border-radius: 12px !important;
  border-radius: 24px;
    padding: 5px 4px !important;
  padding: 6px 5px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
    gap: 20px !important;
}
}
#gra-fab.gra-fab-visible { display: flex; }
#gra-fab.gra-fab-visible { display: flex; }


.gra-fab-btn {
.gra-fab-btn {
  width:  36px;
   height: 48px;
   height: 36px;
   width: 48px;
   border-radius: 50%;
   border: none;
   border: none;
   background: transparent;
   background: transparent;
   cursor: pointer;
   cursor: pointer;
   display: flex;
   display: flex;
  flex-direction: column;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
Line 50: Line 33:
   transition: background 0.15s;
   transition: background 0.15s;
}
}
.gra-fab-btn:hover { background: #f5f5f5; }
 
.gra-fab-btn-label {
font-family: 'Noto Sans Devanagari';
font-weight: 400;
font-size: 10px;
line-height: 100%;
letter-spacing: 0%;
color: #ffffff;
padding: 5px 0;
}
.gra-fab-btn:hover {  
background: rgba(255, 255, 255, 0.12) !important; border-radius: 12px;
}
.gra-fab-btn:hover .gra-fab-tooltip { opacity: 1; transform: translateX(0) translateY(-50%); }
.gra-fab-btn:hover .gra-fab-tooltip { opacity: 1; transform: translateX(0) translateY(-50%); }


Line 147: 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 185: 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 194: 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 313: 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 326: 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 458: Line 461:
   background: #fff;
   background: #fff;
   border: 1px solid #e0e0e0;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   border-radius: 12px;
   box-shadow: 0 4px 16px rgba(0,0,0,0.14);
   box-shadow: 0 8px 40px rgba(0,0,0,0.22);
   width: 300px;
   width: 420px;
   padding: 12px 14px 10px;
  max-width: calc(100vw - 32px);
   padding: 20px 24px 16px;
   position: fixed;
   position: fixed;
  /* Centered on screen — same as feedback composer */
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
   z-index: 10150;
   z-index: 10150;
   display: none;
   display: none;
Line 472: Line 480:
.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 511: Line 520:
#gra-toggle {
#gra-toggle {
   position: fixed;
   position: fixed;
   bottom: 80px;
   bottom: 78px;
   right: 20px;
   right: 20px;
   width: 48px;
   width: 48px;
Line 519: Line 528:
   border: none;
   border: none;
   cursor: pointer;
   cursor: pointer;
   z-index: 10050;
   z-index: 9998;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
Line 568: Line 577:
   right: 0;
   right: 0;
   z-index: 10200;
   z-index: 10200;
   /* Hidden below viewport by default */
   display: block !important;
   transform: translateY(100%);
   transform: translateY(100%);
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
Line 581: Line 590:
   border-top: 1px solid #e0e0e0;
   border-top: 1px solid #e0e0e0;
   border-radius: 16px 16px 0 0;
   border-radius: 16px 16px 0 0;
   box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
   box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
   display: flex;
   display: flex;
   align-items: stretch;
   align-items: stretch;
  /* Safe area for notched phones */
   padding-bottom: env(safe-area-inset-bottom, 0px);
   padding-bottom: env(safe-area-inset-bottom, 0px);
}
}
Line 614: Line 622:
.gra-mob-dismiss:active { background: #fff0f0; color: #e53935; }
.gra-mob-dismiss:active { background: #fff0f0; color: #e53935; }


/* On desktop — hide mobile bar entirely */
 
@media (min-width: 769px) {
  #gra-mobile-bar { display: none !important; }
}
/* On mobile — hide desktop FAB */
@media (max-width: 768px) {
  #gra-fab { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════════
Line 636: Line 637:
     transform: translate(-50%, -50%) !important;
     transform: translate(-50%, -50%) !important;
   }
   }
   .gra-bm-composer {
   /* bm-composer already centered via its base CSS */
     width: calc(100vw - 32px);
}
     left: 16px !important;
/* ══════════════════════════════════════════════════════════════════
     top: auto !important;
  REPLACE the entire additions block at the bottom of
     bottom: 80px !important;
  MediaWiki:Gadget-GrAnnotations.css with this content.
 
  FAB stack (right:20px desktop, right:16px mobile):
    22px  [📚] #se-docnav-btn  docs navigator
    78px  [↑]  #se-scrolltop    scroll to top
    134px  [✎]  #gra-toggle      notes panel  ← was wrongly 78px
  ══════════════════════════════════════════════════════════════════ */
 
/* ── #gra-toggle: sits above both siteNav FABs ─────────────────── */
#gra-toggle {
  bottom: 78px !important;
  right: 20px !important;
}
#gra-panel.gra-panel-open ~ #gra-toggle {
  right: 356px !important;
}
@media (max-width: 768px) {
  #gra-toggle {
    bottom: 78px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }
  #gra-panel.gra-panel-open ~ #gra-toggle {
    right: calc(100vw + 4px) !important;
  }
}
 
/* ── Mobile annotation bar above all Minerva overlays ──────────── */
#gra-mobile-bar {
  z-index: 99999 !important;
}
 
/* ── CSS custom property fallbacks ─────────────────────────────── */
/* readerToolbar.js writes these at runtime; these are initial values */
:root {
  --gr-header-height: 50px;
  --gr-bar-h: 48px;
  --gr-bar-top: 50px;
}
 
/* ── Scroll-margin: TOC anchor links clear the fixed bar ────────── */
/* Vector: header + bar both fixed */
body.skin-vector #mw-content-text .mw-parser-output h1[id],
body.skin-vector #mw-content-text .mw-parser-output h2[id],
body.skin-vector #mw-content-text .mw-parser-output h3[id],
body.skin-vector #mw-content-text .mw-parser-output h4[id],
body.skin-vector #mw-content-text .mw-parser-output h5[id],
body.skin-vector #mw-content-text .mw-parser-output h6[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h1[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h2[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h3[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h4[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h5[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h6[id] {
  scroll-margin-top: calc(var(--gr-header-height) + var(--gr-bar-h) + 12px);
}
/* Minerva: only bar is fixed once header scrolls away */
body.skin-minerva #mw-content-text .mw-parser-output h1[id],
body.skin-minerva #mw-content-text .mw-parser-output h2[id],
body.skin-minerva #mw-content-text .mw-parser-output h3[id],
body.skin-minerva #mw-content-text .mw-parser-output h4[id],
body.skin-minerva #mw-content-text .mw-parser-output h5[id],
body.skin-minerva #mw-content-text .mw-parser-output h6[id] {
  scroll-margin-top: calc(var(--gr-bar-h) + 12px);
}
#mw-content-text .mw-parser-output > *:first-child {
  scroll-margin-top: calc(var(--gr-header-height) + var(--gr-bar-h) + 8px);
}
body.skin-minerva #mw-content-text .mw-parser-output > *:first-child {
  scroll-margin-top: calc(var(--gr-bar-h) + 8px);
}
 
/* Search icon in FAB using an inline SVG data-URI */
.gra-icon-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='22' y2='22'/%3E%3C/svg%3E") !important;
}
/* ══════════════════════════════════════════════════════════════════
  MOBILE BOTTOM BAR — terracotta theme
  ══════════════════════════════════════════════════════════════════ */
#gra-mobile-bar-inner {
  background: #b5451b !important;
  border-top: none !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -4px 20px rgba(181,69,27,0.35) !important;
}
.gra-mob-btn {
  color: rgba(255,255,255,0.92) !important;
  border-right-color: rgba(255,255,255,0.18) !important;
  min-height: 76px !important;
  padding: 16px 8px !important;
  font-size: 12px !important;
}
.gra-mob-btn:active {
  background: rgba(0,0,0,0.12) !important;
}
.gra-mob-btn .gra-icon {
  width: 26px !important;
  height: 26px !important;
  filter: brightness(0) invert(1) !important;
}
.gra-mob-label {
  color: rgba(255,255,255,0.88) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.gra-mob-dismiss {
  color: rgba(255,255,255,0.70) !important;
}
.gra-mob-dismiss .gra-mob-label {
  color: rgba(255,255,255,0.60) !important;
}
.gra-mob-dismiss span[style] {
  color: rgba(255,255,255,0.70) !important;
}
@media (max-width: 767px) {
 
  /* Bottom sheet — pinned to bottom via inset, animated via transform */
  #gra-fb-composer.gra-composer,
  #gra-nt-composer.gra-composer,
  #gra-bm-composer.gra-bm-composer {
    position: fixed !important;
    inset: auto 0 0 0 !important;          /* top:auto right:0 bottom:0 left:0 */
     width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18) !important;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    transform: translateY(100%) !important;
    transition: transform 0.28s cubic-bezier(0.32,0.72,0,1) !important;
     z-index: 10600 !important;
  }
 
  /* Slide up when visible */
  #gra-fb-composer.gra-composer-visible,
  #gra-nt-composer.gra-composer-visible,
  #gra-bm-composer.gra-composer-visible {
    transform: translateY(0) !important;
  }
 
  /* Grab handle */
  #gra-fb-composer::before,
  #gra-nt-composer::before,
  #gra-bm-composer::before {
    content: "";
    display: block;
    width: 36px; height: 4px;
    border-radius: 2px;
    background: #d0d0d0;
    margin: -6px auto 14px;
  }
 
  .gra-composer .gra-composer-input,
  .gra-bm-composer .gra-composer-input {
    font-size: 16px !important;   /* no iOS zoom on focus */
  }
  .gra-composer-actions { display: flex; gap: 10px; }
  .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;
   }
   }
}
}
Retrieved from "https://dev.anandamakaranda.in/MediaWiki:Gadget-GrAnnotations.css"