MediaWiki:Gadget-GrAnnotations.css - Revision history

Chandrashekars at 18:25, 25 April 2026

2026-04-25T18:25:40Z

← Older revision		Revision as of 18:25, 25 April 2026
Line 445:		Line 445:
	#gra-toggle {		#gra-toggle {
	position: fixed;		position: fixed;
	bottom: ~~138px~~; /* sits above scroll-to-top (80px) which is above docs (22px) */		bottom: 80px; /* sits above scroll-to-top (80px) which is above docs (22px) */
	right: 20px;		right: 20px;
	width: 48px;		width: 48px;

Chandrashekars at 18:22, 25 April 2026

2026-04-25T18:22:22Z

← Older revision		Revision as of 18:22, 25 April 2026
Line 36:		Line 36:
	#gra-fab {		#gra-fab {
	position: fixed; /* fixed so it stays next to selection even on scroll */		position: fixed; /* fixed so it stays next to selection even on scroll */
	z-index: ~~1200~~;		z-index: 10200;
	display: none;		display: none;
	flex-direction: column;		flex-direction: column;
Line 97:		Line 97:
	background: #fff;		background: #fff;
	box-shadow: -3px 0 20px rgba(0,0,0,0.15);		box-shadow: -3px 0 20px rgba(0,0,0,0.15);
	z-index: ~~1100~~;		z-index: 10100;
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 112:		Line 112:
	inset: 0;		inset: 0;
	background: rgba(0,0,0,0.18);		background: rgba(0,0,0,0.18);
	z-index: ~~1099~~;		z-index: 10099;
	display: none;		display: none;
	cursor: pointer;		cursor: pointer;
Line 193:		Line 193:
	padding: 12px 14px 10px;		padding: 12px 14px 10px;
	position: fixed;		position: fixed;
	z-index: ~~1150~~;		z-index: 10150;
	display: none;		display: none;
	flex-direction: column;		flex-direction: column;
Line 383:		Line 383:
	padding: 12px 14px 10px;		padding: 12px 14px 10px;
	position: fixed;		position: fixed;
	z-index: ~~1150~~;		z-index: 10150;
	display: none;		display: none;
	flex-direction: column;		flex-direction: column;
Line 453:		Line 453:
	border: none;		border: none;
	cursor: pointer;		cursor: pointer;
	z-index: ~~1050~~;		z-index: 10050;
	display: flex;		display: flex;
	align-items: center;		align-items: center;

Chandrashekars at 18:13, 25 April 2026

2026-04-25T18:13:16Z

@@ Line 445: / Line 445: @@
 #gra-toggle {
    position: fixed;
-   bottom: 80px;  /* sits above docs (22px) */
+   bottom: 138px;  /* sits above scroll-to-top (80px) which is above docs (22px) */
    right: 20px;
    width: 48px;
@@ Line 494: / Line 494: @@
    right: 356px;
    transition: right 0.28s cubic-bezier(0.4,0,0.2,1), background 0.15s;
+}

Chandrashekars at 17:49, 25 April 2026

2026-04-25T17:49:04Z

← Older revision		Revision as of 17:49, 25 April 2026
Line 445:		Line 445:
	#gra-toggle {		#gra-toggle {
	position: fixed;		position: fixed;
	bottom: ~~138px~~; /* sits ~~above scroll-to-top (80px) which is~~ above docs (22px) */		bottom: 80px; /* sits above docs (22px) */
	right: 20px;		right: 20px;
	width: 48px;		width: 48px;

Chandrashekars at 17:45, 25 April 2026

2026-04-25T17:45:00Z

← Older revision		Revision as of 17:45, 25 April 2026
Line 445:		Line 445:
	#gra-toggle {		#gra-toggle {
	position: fixed;		position: fixed;
	bottom: ~~80px~~; /* sits above scroll-to-top (80px) which is above docs (22px) */		bottom: 138px; /* sits above scroll-to-top (80px) which is above docs (22px) */
	right: 20px;		right: 20px;
	width: 48px;		width: 48px;

Chandrashekars at 09:26, 24 April 2026

2026-04-24T09:26:51Z

← Older revision		Revision as of 09:26, 24 April 2026
Line 445:		Line 445:
	#gra-toggle {		#gra-toggle {
	position: fixed;		position: fixed;
	bottom: ~~138px~~; /* sits above scroll-to-top (80px) which is above docs (22px) */		bottom: 80px; /* sits above scroll-to-top (80px) which is above docs (22px) */
	right: 20px;		right: 20px;
	width: 48px;		width: 48px;

Chandrashekars at 09:20, 24 April 2026

2026-04-24T09:20:15Z

← Older revision		Revision as of 09:20, 24 April 2026
Line 445:		Line 445:
	#gra-toggle {		#gra-toggle {
	position: fixed;		position: fixed;
	bottom: ~~82px~~; /* sits above ~~the Docs button~~ (~~fixed at bottom:~~22px~~, height ~46px + gap~~) */		bottom: 138px; /* sits above scroll-to-top (80px) which is above docs (22px) */
	right: 20px;		right: 20px;
	width: 48px;		width: 48px;

Chandrashekars at 09:02, 24 April 2026

2026-04-24T09:02:48Z

← Older revision		Revision as of 09:02, 24 April 2026
Line 445:		Line 445:
	#gra-toggle {		#gra-toggle {
	position: fixed;		position: fixed;
	bottom: ~~28px~~;		bottom: 82px; /* sits above the Docs button (fixed at bottom:22px, height ~46px + gap) */
	right: 20px;		right: 20px;
	width: 48px;		width: 48px;

Chandrashekars at 09:00, 24 April 2026

2026-04-24T09:00:29Z

@@ Line 436: / Line 436: @@
      left: 16px !important;
+   }
+}

Chandrashekars: Created page with "/* * gr_annotations.css — grantha.io inline comments + bookmarks * ═══════════════════════════════════════════════════════════════ * Standalone file. Include in MediaWiki:Common.css or via * ResourceModules in extension.json. * * Covers: * 1. Floating action strip (appears right of selection) * 2. Right panel (collapsible overlay,..."

2026-04-23T17:22:52Z

Created page with "/* * gr_annotations.css — grantha.io inline comments + bookmarks * ═══════════════════════════════════════════════════════════════ * Standalone file. Include in MediaWiki:Common.css or via * ResourceModules in extension.json. * * Covers: * 1. Floating action strip (appears right of selection) * 2. Right panel (collapsible overlay,..."

New page

/*
* gr_annotations.css — grantha.io inline comments + bookmarks
* ═══════════════════════════════════════════════════════════════
* Standalone file. Include in MediaWiki:Common.css or via
* ResourceModules in extension.json.
*
* Covers:
* 1. Floating action strip (appears right of selection)
* 2. Right panel (collapsible overlay, two tabs: Comments / Bookmarks)
* 3. Comment cards (Google Docs style)
* 4. Bookmark cards
* 5. Highlighted anchor spans
* 6. Mobile-safe overlay behaviour
* ═══════════════════════════════════════════════════════════════
*/

/* ── Icon base (reuses /images/*.svg already on Hostinger) ──────── */
.gra-icon {
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
.gra-icon-comment { background-image: url('/images/commentary.svg'); }
.gra-icon-bookmark { background-image: url('/images/bookmark.svg'); }
.gra-icon-copy { background-image: url('/images/copy.svg'); }

/* ══════════════════════════════════════════════════════════════════
1. FLOATING ACTION STRIP
Appears to the right of the content column on text selection.
Vertically stacked pill — mirrors Google Docs behaviour.
══════════════════════════════════════════════════════════════════ */
#gra-fab {
position: fixed; /* fixed so it stays next to selection even on scroll */
z-index: 1200;
display: none;
flex-direction: column;
gap: 4px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 24px;
padding: 6px 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.14);
/* position set by JS via top/left */
}
#gra-fab.gra-fab-visible { display: flex; }

.gra-fab-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: background 0.15s;
}
.gra-fab-btn:hover { background: #f5f5f5; }
.gra-fab-btn:hover .gra-fab-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Tooltip */
.gra-fab-tooltip {
position: absolute;
right: calc(100% + 8px);
top: 50%;
transform: translateX(0) translateY(-50%);
white-space: nowrap;
background: rgba(30,30,30,0.82);
color: #fff;
font-size: 11px;
font-family: system-ui, sans-serif;
font-weight: 500;
padding: 3px 9px;
border-radius: 999px;
pointer-events: none;
opacity: 0;
transition: opacity 0.18s, transform 0.18s;
}

/* ══════════════════════════════════════════════════════════════════
2. RIGHT PANEL
Slides in from the right as an overlay.
On mobile it covers the full viewport width.
══════════════════════════════════════════════════════════════════ */
#gra-panel {
position: fixed;
top: 0;
right: -360px; /* hidden off-screen */
width: 340px;
height: 100vh;
background: #fff;
box-shadow: -3px 0 20px rgba(0,0,0,0.15);
z-index: 1100;
display: flex;
flex-direction: column;
transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
font-family: system-ui, sans-serif;
font-size: 13px;
overflow: hidden;
}
#gra-panel.gra-panel-open { right: 0; }

/* Backdrop (mobile + wide screens when panel overlaps content) */
#gra-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.18);
z-index: 1099;
display: none;
cursor: pointer;
}
#gra-backdrop.gra-backdrop-visible { display: block; }

/* ── Panel header ── */
#gra-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 0;
flex-shrink: 0;
}
#gra-panel-close {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: #666;
padding: 2px 6px;
border-radius: 4px;
line-height: 1;
}
#gra-panel-close:hover { background: #f5f5f5; color: #222; }

/* ── Tabs ── */
#gra-tabs {
display: flex;
border-bottom: 2px solid #f0f0f0;
margin: 10px 16px 0;
flex-shrink: 0;
}
.gra-tab {
flex: 1;
padding: 8px 4px;
background: none;
border: none;
cursor: pointer;
font-size: 13px;
font-family: inherit;
color: #777;
font-weight: 500;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: color 0.15s, border-color 0.15s;
}
.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 .gra-icon { opacity: 1; filter: invert(30%) sepia(100%) saturate(500%) hue-rotate(190deg); }

/* ── Tab content panes ── */
#gra-panel-body {
flex: 1;
overflow-y: auto;
padding: 12px 16px 16px;
}
.gra-pane { display: none; }
.gra-pane.gra-pane-active { display: block; }

/* ══════════════════════════════════════════════════════════════════
3. COMMENT CARDS (Google Docs style)
══════════════════════════════════════════════════════════════════ */

/* Inline composer — appears anchored to selection, right side */
.gra-composer {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.14);
width: 300px;
padding: 12px 14px 10px;
position: fixed;
z-index: 1150;
display: none;
flex-direction: column;
gap: 10px;
font-family: system-ui, sans-serif;
font-size: 13px;
}
.gra-composer.gra-composer-visible { display: flex; }

.gra-composer-user {
display: flex;
align-items: center;
gap: 10px;
}
.gra-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: #1a73e8;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
overflow: hidden;
}
.gra-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gra-composer-name { font-weight: 600; color: #202124; font-size: 13px; }

.gra-composer-input {
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 8px 10px;
font-size: 13px;
font-family: inherit;
resize: none;
width: 100%;
box-sizing: border-box;
min-height: 56px;
line-height: 1.5;
color: #202124;
outline: none;
transition: border-color 0.15s;
}
.gra-composer-input::placeholder { color: #aaa; }
.gra-composer-input:focus { border-color: #1a73e8; }

.gra-composer-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.gra-btn-cancel {
background: none;
border: none;
cursor: pointer;
color: #5f6368;
font-size: 13px;
font-family: inherit;
font-weight: 500;
padding: 6px 12px;
border-radius: 4px;
}
.gra-btn-cancel:hover { background: #f5f5f5; }
.gra-btn-submit {
background: #1a73e8;
color: #fff;
border: none;
cursor: pointer;
font-size: 13px;
font-family: inherit;
font-weight: 500;
padding: 6px 16px;
border-radius: 4px;
transition: background 0.15s;
}
.gra-btn-submit:hover { background: #1557b0; }
.gra-btn-submit:disabled { background: #c5d8f8; cursor: default; }

/* Saved comment cards in panel */
.gra-comment-card {
border: 1px solid #e8eaed;
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 10px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.07);
cursor: pointer;
transition: box-shadow 0.15s;
}
.gra-comment-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.gra-comment-card.gra-card-active {
border-color: #fbbc04;
box-shadow: 0 0 0 2px rgba(251,188,4,0.3);
}
.gra-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.gra-card-meta { flex: 1; }
.gra-card-author { font-weight: 600; color: #202124; font-size: 12px; }
.gra-card-ts { font-size: 11px; color: #80868b; margin-top: 1px; }
.gra-card-quote {
font-size: 12px;
color: #5f6368;
border-left: 3px solid #fbbc04;
padding-left: 8px;
margin-bottom: 6px;
font-style: italic;
line-height: 1.4;
/* clamp to 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gra-card-text {
font-size: 13px;
color: #202124;
line-height: 1.5;
}
.gra-empty-state {
color: #9aa0a6;
font-size: 13px;
text-align: center;
padding: 32px 16px;
line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════
4. BOOKMARK CARDS
══════════════════════════════════════════════════════════════════ */
.gra-bookmark-card {
border: 1px solid #e8eaed;
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 10px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.07);
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
transition: box-shadow 0.15s;
}
.gra-bookmark-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.gra-bookmark-card .gra-icon { margin-top: 2px; flex-shrink: 0; }
.gra-bookmark-info { flex: 1; min-width: 0; }
.gra-bookmark-name {
font-weight: 600;
color: #202124;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gra-bookmark-quote {
font-size: 11px;
color: #80868b;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gra-bookmark-del {
background: none;
border: none;
cursor: pointer;
color: #ccc;
font-size: 15px;
padding: 0 2px;
line-height: 1;
flex-shrink: 0;
}
.gra-bookmark-del:hover { color: #e53935; }

/* Bookmark composer (same structure as comment composer) */
.gra-bm-composer {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.14);
width: 300px;
padding: 12px 14px 10px;
position: fixed;
z-index: 1150;
display: none;
flex-direction: column;
gap: 10px;
font-family: system-ui, sans-serif;
font-size: 13px;
}
.gra-bm-composer.gra-composer-visible { display: flex; }
.gra-bm-composer-label {
font-weight: 600;
color: #202124;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
}

/* ══════════════════════════════════════════════════════════════════
5. ANCHOR HIGHLIGHTS
══════════════════════════════════════════════════════════════════ */
.gra-comment-highlight {
background: rgba(251, 188, 4, 0.35);
border-radius: 2px;
cursor: pointer;
transition: background 0.15s;
}
.gra-comment-highlight:hover,
.gra-comment-highlight.gra-hl-active {
background: rgba(251, 188, 4, 0.6);
outline: 1.5px solid #fbbc04;
}
.gra-bookmark-highlight {
background: rgba(26, 115, 232, 0.12);
border-radius: 2px;
cursor: pointer;
border-bottom: 1.5px solid #1a73e8;
transition: background 0.15s;
}
.gra-bookmark-highlight:hover { background: rgba(26, 115, 232, 0.22); }

/* ══════════════════════════════════════════════════════════════════
6. RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
#gra-panel {
width: 100vw;
right: -100vw;
}
.gra-composer,
.gra-bm-composer {
width: calc(100vw - 32px);
left: 16px !important;
}
}