|
|
@@ -41,27 +41,28 @@ html.kb-page, .kb-page body { height: 100vh; overflow: hidden; }
|
|
|
.kb-body-inner { position:relative; width:100%; max-width:700px; height:100%; display:flex; align-items:center; justify-content:center; }
|
|
|
.kb-body-img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:var(--radius-lg); box-shadow:0 8px 40px rgba(74,155,215,0.08); }
|
|
|
|
|
|
- .kb-marker { position:absolute; z-index:2; pointer-events:none; }
|
|
|
- .kb-marker-card { pointer-events:auto; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:12px; padding:10px 14px; border:1.5px solid var(--m-color,var(--color-border-light)); box-shadow:0 4px 16px rgba(0,0,0,0.06); min-width:170px; max-width:220px; transition:box-shadow var(--transition-fast), transform var(--transition-fast); }
|
|
|
+ .kb-marker { position:absolute; z-index:2; }
|
|
|
+ .kb-marker-card { pointer-events:auto; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:12px; padding:10px 14px; border:1.5px solid var(--m-color,var(--color-border-light)); box-shadow:0 4px 16px rgba(0,0,0,0.06); min-width:170px; max-width:220px; transition:box-shadow .2s, transform .2s; }
|
|
|
.kb-marker-card:hover { box-shadow:0 6px 24px rgba(0,0,0,0.10); transform:translateY(-1px); }
|
|
|
.kb-marker-dot { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--m-color); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.15); top:50%; margin-top:-6px; pointer-events:none; }
|
|
|
.kb-marker--right .kb-marker-dot { left:-6px; }
|
|
|
.kb-marker--left .kb-marker-dot { right:-6px; }
|
|
|
.kb-marker-head { display:flex; align-items:center; gap:6px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid var(--color-border-light); }
|
|
|
.kb-marker-label { font-size:0.8125rem; font-weight:700; color:var(--m-color,var(--color-text-primary)); }
|
|
|
- .kb-marker-card a { display:flex; align-items:center; gap:6px; padding:5px 0; text-decoration:none; color:var(--color-text-secondary); font-size:0.8125rem; line-height:1.3; border-bottom:1px solid var(--color-border-light); transition:color var(--transition-fast); }
|
|
|
+ .kb-marker .kb-more-btn { font-size:0.75rem; font-weight:700; color:var(--m-color); cursor:pointer; opacity:0.5; transition:opacity .2s; user-select:none; margin-left:auto; }
|
|
|
+ .kb-marker .kb-more-btn:hover { opacity:1; }
|
|
|
+ .kb-marker .kb-hidden-items { display:none; position:absolute; top:0; z-index:3; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-radius:12px; padding:10px 14px; border:1.5px solid var(--m-color); box-shadow:0 4px 16px rgba(0,0,0,0.06); min-width:170px; max-width:220px; pointer-events:auto; }
|
|
|
+ .kb-marker:hover .kb-hidden-items { display:block; }
|
|
|
+ .kb-marker--right .kb-hidden-items { right:calc(100% + 8px); }
|
|
|
+ .kb-marker--left .kb-hidden-items { left:calc(100% + 8px); }
|
|
|
+ .kb-marker-card a { display:flex; align-items:center; gap:6px; padding:5px 0; text-decoration:none; color:var(--color-text-secondary); font-size:0.8125rem; line-height:1.3; border-bottom:1px solid var(--color-border-light); transition:color .2s; }
|
|
|
.kb-marker-card a:last-child { border-bottom:none; }
|
|
|
.kb-marker-card a:hover { color:var(--m-color,var(--color-primary)); }
|
|
|
.kb-marker-card a .ma-icon { font-size:1rem; flex-shrink:0; }
|
|
|
.kb-marker-card a .ma-title { flex:1; min-width:0; }
|
|
|
- .kb-marker-card a .ma-arrow { flex-shrink:0; font-size:0.75rem; opacity:0.3; transition:transform var(--transition-fast); }
|
|
|
+ .kb-marker-card a .ma-arrow { flex-shrink:0; font-size:0.75rem; opacity:0.3; transition:transform .2s; }
|
|
|
.kb-marker-card a:hover .ma-arrow { transform:translateX(3px); opacity:0.7; }
|
|
|
.kb-marker-card .ma-coming { opacity:0.5; cursor:default; pointer-events:none; font-size:0.75rem; padding:4px 0; }
|
|
|
- .kb-marker-card .kb-more-wrap { position:relative; }
|
|
|
- .kb-marker-card .kb-more-btn { display:block; text-align:center; font-size:0.875rem; font-weight:700; color:var(--m-color); padding:2px 0 0; cursor:pointer; opacity:0.5; transition:opacity .2s; letter-spacing:1px; user-select:none; }
|
|
|
- .kb-marker-card .kb-more-btn:hover { opacity:1; }
|
|
|
- .kb-marker-card .kb-hidden-items { max-height:0; overflow:hidden; transition:max-height .25s ease; }
|
|
|
- .kb-marker-card .kb-more-wrap:hover .kb-hidden-items { max-height:300px; }
|
|
|
|
|
|
.kb-m-pos-brain { top:13%; left:56%; }
|
|
|
.kb-m-pos-heart { top:33%; right:54%; }
|
|
|
@@ -196,36 +197,30 @@ html.kb-page, .kb-page body { height: 100vh; overflow: hidden; }
|
|
|
var c = document.getElementById('kbBodyInner');
|
|
|
for (var i = 0; i < DIMS.length; i++) {
|
|
|
var d = DIMS[i], pos = MARKER_POS[d.bodyPart], arts = ARTICLES[d.key] || [];
|
|
|
+ var sideCls = pos.side==='left' ? 'kb-marker--right' : 'kb-marker--left';
|
|
|
var m = document.createElement('div');
|
|
|
- m.className = 'kb-marker';
|
|
|
+ m.className = 'kb-marker ' + sideCls;
|
|
|
m.style.cssText = 'top:'+pos.top+';'+(pos.side==='left'?'left:'+pos.offset:'right:'+pos.offset);
|
|
|
- var side = pos.side==='left' ? 'kb-marker--right' : 'kb-marker--left';
|
|
|
var card = document.createElement('div');
|
|
|
- card.className = 'kb-marker-card '+side;
|
|
|
+ card.className = 'kb-marker-card';
|
|
|
card.style.setProperty('--m-color', d.color);
|
|
|
var hd = document.createElement('div');
|
|
|
hd.className = 'kb-marker-head';
|
|
|
hd.innerHTML = '<span class="kb-marker-label">'+d.label+' · '+d.subtitle+'</span>';
|
|
|
+ var maxVis = 3, hiddenDiv = null;
|
|
|
+ if (arts.length > maxVis) {
|
|
|
+ var moreBtn = document.createElement('span');
|
|
|
+ moreBtn.className = 'kb-more-btn';
|
|
|
+ moreBtn.textContent = '>>';
|
|
|
+ hd.appendChild(moreBtn);
|
|
|
+ hiddenDiv = document.createElement('div');
|
|
|
+ hiddenDiv.className = 'kb-hidden-items';
|
|
|
+ m.appendChild(hiddenDiv);
|
|
|
+ }
|
|
|
card.appendChild(hd);
|
|
|
- var maxVis = 3;
|
|
|
for (var j = 0; j < arts.length; j++) {
|
|
|
- if (j === maxVis && arts.length > maxVis) {
|
|
|
- var moreWrap = document.createElement('div');
|
|
|
- moreWrap.className = 'kb-more-wrap';
|
|
|
- var btn = document.createElement('div');
|
|
|
- btn.className = 'kb-more-btn';
|
|
|
- btn.textContent = '>>';
|
|
|
- moreWrap.appendChild(btn);
|
|
|
- var hiddenDiv = document.createElement('div');
|
|
|
- hiddenDiv.className = 'kb-hidden-items';
|
|
|
- moreWrap.appendChild(hiddenDiv);
|
|
|
- card.appendChild(moreWrap);
|
|
|
- }
|
|
|
var a = arts[j], el, container = card;
|
|
|
- if (j >= maxVis && arts.length > maxVis) {
|
|
|
- var mw = card.querySelector('.kb-hidden-items');
|
|
|
- if (mw) container = mw;
|
|
|
- }
|
|
|
+ if (j >= maxVis && hiddenDiv) container = hiddenDiv;
|
|
|
if (a.coming) {
|
|
|
el = document.createElement('div');
|
|
|
el.className = 'ma-coming';
|
