|
Поговорим о...
|
|
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{/* Используем ваш существующий shortcode icon */}}
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
{{/* Если иконка не найдена, используем placeholder */}}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
{{/* Если data.icons не существует */}}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon" title="Показать информацию">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* ===== ОСНОВНЫЕ СТИЛИ КАРТОЧЕК ===== */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть с иконкой и заголовком */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* ===== ПРАВАЯ СЕКЦИЯ ===== */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* ===== ТЕГИ ===== */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default {
background: #f0f0f0;
color: #666666;
border-color: #ddd;
}
.info-card-tag-info {
background: #e3f2fd;
color: #1565c0;
border-color: #90caf9;
}
.info-card-tag-warning {
background: #fff3e0;
color: #e65100;
border-color: #ffcc80;
}
.info-card-tag-success {
background: #e8f5e9;
color: #2e7d32;
border-color: #a5d6a7;
}
.info-card-tag-error {
background: #ffebee;
color: #c62828;
border-color: #ef9a9a;
}
/* ===== ИКОНКА И ТУЛТИП ===== */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-icon {
width: 16px;
height: 16px;
}
/* ===== ВСПЛЫВАЮЩАЯ ПОДСКАЗКА ===== */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%) translateY(0);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-8px);
}
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
/* СТИЛИ ДЛЯ HTML В ОПИСАНИИ */
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar {
width: 6px;
}
.tooltip-description::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 3px;
}
.tooltip-description::-webkit-scrollbar-thumb {
background: #b0b0b0;
border-radius: 3px;
transition: background 0.2s;
}
.tooltip-description::-webkit-scrollbar-thumb:hover {
background: #909090;
}
.tooltip-description p {
margin: 0 0 10px 0;
}
.tooltip-description p:last-child {
margin-bottom: 0;
}
.tooltip-description br {
content: "";
display: block;
margin-bottom: 6px;
}
.tooltip-description strong,
.tooltip-description b {
font-weight: 700;
color: #333;
}
.tooltip-description em,
.tooltip-description i {
font-style: italic;
}
.tooltip-description u {
text-decoration: underline;
}
.tooltip-description code {
background: #f7f7f7;
padding: 3px 6px;
border-radius: 4px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.88em;
border: 1px solid #e0e0e0;
}
.tooltip-description pre {
background: #f7f7f7;
padding: 12px;
border-radius: 6px;
overflow-x: auto;
margin: 10px 0;
font-size: 0.88em;
border: 1px solid #e0e0e0;
line-height: 1.5;
}
.tooltip-description ul,
.tooltip-description ol {
margin: 10px 0;
padding-left: 24px;
}
.tooltip-description li {
margin-bottom: 6px;
line-height: 1.5;
}
.tooltip-description a {
color: #4a90e2;
text-decoration: none;
border-bottom: 1px dotted #4a90e2;
transition: all 0.2s;
}
.tooltip-description a:hover {
text-decoration: none;
border-bottom: 1px solid #4a90e2;
color: #357abd;
}
.tooltip-description h1,
.tooltip-description h2,
.tooltip-description h3,
.tooltip-description h4 {
margin: 15px 0 10px 0;
color: #333;
font-weight: 600;
line-height: 1.3;
}
.tooltip-description h1 { font-size: 1.3em; }
.tooltip-description h2 { font-size: 1.2em; }
.tooltip-description h3 { font-size: 1.1em; }
.tooltip-description h4 { font-size: 1em; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ИСПРАВЛЕНИЕ: ИКОНКИ ВЫРОВНЕНЫ ПО ЦЕНТРУ ВЕРТИКАЛЬНО С ТЕКСТОМ */
.tooltip-row {
display: flex;
align-items: center; /* ВЫРАВНИВАНИЕ ПО ЦЕНТРУ ВЕРТИКАЛЬНО */
gap: 10px;
margin-bottom: 8px;
line-height: 1.5;
min-height: 20px; /* Минимальная высота для строки */
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
opacity: 0.8;
/* Убираем все margin-top, теперь выравнивание через flex */
}
.tooltip-row-text {
line-height: 1.5;
flex: 1;
/* Убираем padding-top, теперь выравнивание через flex */
}
/* ===== ТЕМНАЯ ТЕМА ===== */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-description a:hover {
color: #90cdf4;
border-bottom-color: #90cdf4;
}
body.dark .tooltip-description h1,
body.dark .tooltip-description h2,
body.dark .tooltip-description h3,
body.dark .tooltip-description h4,
html.dark .tooltip-description h1,
html.dark .tooltip-description h2,
html.dark .tooltip-description h3,
html.dark .tooltip-description h4 {
color: #f7fafc;
}
body.dark .tooltip-description::-webkit-scrollbar-track {
background: #2d3748;
}
body.dark .tooltip-description::-webkit-scrollbar-thumb {
background: #4a5568;
}
body.dark .tooltip-description::-webkit-scrollbar-thumb:hover {
background: #5a6576;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
bottom: auto;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center; /* Сохраняем центрирование на мобильных */
min-height: 18px; /* Немного меньше на мобильных */
}
.tooltip-description p {
margin-bottom: 8px;
}
.tooltip-description br {
margin-bottom: 4px;
}
.tooltip-description ul,
.tooltip-description ol {
padding-left: 20px;
}
.tooltip-description h1 { font-size: 1.2em; }
.tooltip-description h2 { font-size: 1.1em; }
.tooltip-description h3 { font-size: 1em; }
.tooltip-description h4 { font-size: 0.95em; }
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
.tooltip-description code {
font-size: 0.85em;
padding: 2px 4px;
}
.tooltip-description pre {
padding: 10px;
font-size: 0.85em;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
(function() {
document.addEventListener('DOMContentLoaded', function() {
initCardInfoTooltips();
});
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initCardInfoTooltips);
} else {
initCardInfoTooltips();
}
function initCardInfoTooltips() {
const tooltipWrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
tooltipWrappers.forEach(wrapper => {
if (wrapper.dataset.initialized === 'true') return;
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
wrapper.dataset.initialized = 'true';
wrapper.addEventListener('mouseenter', function() {
positionTooltip(wrapper, tooltip);
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
tooltip.style.pointerEvents = 'auto';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
tooltip.style.pointerEvents = 'none';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
positionTooltip(wrapper, tooltip);
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
}
function positionTooltip(wrapper, tooltip) {
if (window.innerWidth <= 768) {
tooltip.style.position = 'fixed';
tooltip.style.top = '50%';
tooltip.style.left = '50%';
tooltip.style.right = 'auto';
tooltip.style.bottom = 'auto';
tooltip.style.transform = 'translate(-50%, -50%)';
return;
}
const wrapperRect = wrapper.getBoundingClientRect();
const tooltipRect = tooltip.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const centerX = wrapperRect.left + (wrapperRect.width / 2);
let left = centerX - (tooltipRect.width / 2);
const minMargin = 15;
if (left < minMargin) {
left = minMargin;
} else if (left + tooltipRect.width > viewportWidth - minMargin) {
left = viewportWidth - tooltipRect.width - minMargin;
}
const top = wrapperRect.top - tooltipRect.height - 12;
if (top < minMargin) {
tooltip.style.top = (wrapperRect.bottom + 12) + 'px';
tooltip.style.bottom = 'auto';
} else {
tooltip.style.top = top + 'px';
tooltip.style.bottom = 'auto';
}
tooltip.style.left = left + 'px';
tooltip.style.right = 'auto';
tooltip.style.transform = 'none';
tooltip.style.position = 'fixed';
}
window.addEventListener('resize', function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(wrapper => {
if (wrapper.dataset.initialized === 'true') {
const tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
positionTooltip(wrapper, tooltip);
}
}
});
});
let lastDarkMode = document.body.classList.contains('dark');
function checkThemeChange() {
const currentDarkMode = document.body.classList.contains('dark');
if (currentDarkMode !== lastDarkMode) {
lastDarkMode = currentDarkMode;
setTimeout(function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(wrapper => {
if (wrapper.dataset.initialized === 'true') {
const tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
positionTooltip(wrapper, tooltip);
}
}
});
}, 50);
}
}
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
checkThemeChange();
}
});
});
observer.observe(document.body, { attributes: true });
observer.observe(document.documentElement, { attributes: true });
setInterval(checkThemeChange, 1000);
})();
</script>
|
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon" title="Показать информацию">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%) translateY(0);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-8px);
}
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК - ГЛАВНОЕ ИСПРАВЛЕНИЕ */
.tooltip-row {
display: flex;
align-items: center; /* Центрируем по вертикали */
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
display: flex;
align-items: center; /* Центрируем иконку */
margin-top: 0; /* Убираем старый отступ */
}
.tooltip-row-text {
line-height: 1.5;
flex: 1;
display: flex;
align-items: center; /* Центрируем текст */
min-height: 18px; /* Минимальная высота для выравнивания */
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
bottom: auto;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
wrapper.addEventListener('mouseenter', function() {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>
|
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon" title="Показать информацию">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%) translateY(0);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-8px);
}
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК - ТОЛЬКО ЭТО ИСПРАВЛЕНИЕ */
.tooltip-row {
display: flex;
align-items: center; /* Центрирование по вертикали */
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center; /* Центрирование иконки */
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center; /* Центрирование текста */
min-height: 20px; /* Минимальная высота для выравнивания */
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
bottom: auto;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center; /* Сохраняем центрирование на мобильных */
}
.tooltip-row-text {
min-height: 18px; /* Немного меньше на мобильных */
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
wrapper.addEventListener('mouseenter', function() {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>
|
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon"> <!-- Убрал title="Показать информацию" -->
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help; /* Курсор help остается, чтобы показать что есть дополнительная информация */
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%) translateY(0);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-8px);
}
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК */
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
bottom: auto;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center;
}
.tooltip-row-text {
min-height: 18px;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
wrapper.addEventListener('mouseenter', function() {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>
|
style="width: {{ $iconsize }}; height: {{ $iconsize }};"Добавлено (2026-01-13, 08:52)
---------------------------------------------
Напиши онвертер на html, я буду предоставлять такой список на пример:
{{<card link="http://AnomalyGis" title="Аномалии по ГИС" >}}
{{<card link="http://SS_GLUB_GIS_PLAST" title="Выборка интервалов залегания геофизических пластов GL-40 - GL-52 по объектам" >}}
а получать на выходе такой перобразованный вид
{{< cardinfo
link="http://AnomalyGis"
title="Аномалии по ГИС"
desc=""
date=""
audience="Геофизики"
tag=""
tagtype=""
icon="table"
iconsize="24" >}}
{{< cardinfo
link="http://SS_GLUB_GIS_PLAST"
title="Выборка интервалов залегания геофизических пластов GL-40 - GL-52 по объектам"
desc=""
date=""
audience="Геофизики"
tag=""
tagtype=""
icon="table"
iconsize="24" >}}
при этом необходимо добавить отдельный параметр ввода audience, после нажатия на конвертирование я также должен знать сколько штук в результате получилось преобразовать
|
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Конвертер карточек</title>
<style>
* {
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
margin: 0;
padding: 20px;
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.header {
background-color: #2c3e50;
color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.header h1 {
margin-top: 0;
margin-bottom: 10px;
}
.header p {
margin-bottom: 0;
opacity: 0.9;
}
.content {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.input-section, .output-section {
flex: 1;
min-width: 300px;
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.section-title {
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
color: #2c3e50;
}
.audience-control {
margin-bottom: 20px;
}
.audience-control label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
.audience-control select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
textarea {
width: 100%;
min-height: 300px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 14px;
resize: vertical;
}
.output-textarea {
background-color: #f8f9fa;
}
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
font-weight: 600;
}
button:hover {
background-color: #2980b9;
}
.result-info {
background-color: #e8f4fc;
border-left: 4px solid #3498db;
padding: 15px;
border-radius: 4px;
margin-top: 15px;
font-weight: 600;
display: flex;
justify-content: space-between;
}
.examples {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.example-title {
margin-top: 0;
color: #2c3e50;
}
.example-input, .example-output {
background-color: #f8f9fa;
padding: 15px;
border-radius: 4px;
margin-bottom: 15px;
border-left: 3px solid #3498db;
font-family: 'Courier New', monospace;
font-size: 14px;
white-space: pre-wrap;
}
.example-output {
border-left-color: #27ae60;
}
.footer {
text-align: center;
margin-top: 20px;
padding: 15px;
color: #7f8c8d;
font-size: 14px;
border-top: 1px solid #eee;
}
@media (max-width: 768px) {
.content {
flex-direction: column;
}
.input-section, .output-section {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Конвертер списка карточек</h1>
<p>Преобразует карточки из формата <code>{{<card link="..." title="..." >}}</code> в формат <code>{{< cardinfo ... >}}</code> с дополнительными параметрами</p>
</div>
<div class="content">
<div class="input-section">
<h2 class="section-title">Входные данные</h2>
<div class="audience-control">
<label for="audience">Выберите аудиторию:</label>
<select id="audience">
<option value="Геофизики">Геофизики</option>
<option value="Геологи">Геологи</option>
<option value="Инженеры">Инженеры</option>
<option value="Технологи">Технологи</option>
<option value="Экономисты">Экономисты</option>
<option value="Менеджеры">Менеджеры</option>
</select>
</div>
<label for="inputText">Вставьте список карточек для преобразования:</label>
<textarea id="inputText" placeholder="Вставьте список карточек здесь, например:
{{<card link="http://AnomalyGis" title="Аномалии по ГИС" >}}
{{<card link="http://SS_GLUB_GIS_PLAST" title="Выборка интервалов залегания геофизических пластов GL-40 - GL-52 по объектам" >}}"></textarea>
<div class="button-container">
<button id="convertBtn">Конвертировать</button>
</div>
</div>
<div class="output-section">
<h2 class="section-title">Результат преобразования</h2>
<label for="outputText">Преобразованный список карточек:</label>
<textarea id="outputText" class="output-textarea" readonly placeholder="Здесь появится результат преобразования"></textarea>
<div id="resultInfo" class="result-info" style="display: none;">
<span>Преобразовано карточек:</span>
<span id="cardCount">0</span>
</div>
</div>
</div>
<div class="examples">
<h2 class="example-title">Пример преобразования</h2>
<div class="example-input">
{{<card link="http://AnomalyGis" title="Аномалии по ГИС" >}}
{{<card link="http://SS_GLUB_GIS_PLAST" title="Выборка интервалов залегания геофизических пластов GL-40 - GL-52 по объектам" >}}
</div>
<div class="example-output">
{{< cardinfo
link="http://AnomalyGis"
title="Аномалии по ГИС"
desc=""
date=""
audience="Геофизики"
tag=""
tagtype=""
icon="table"
iconsize="24" >}}
{{< cardinfo
link="http://SS_GLUB_GIS_PLAST"
title="Выборка интервалов залегания геофизических пластов GL-40 - GL-52 по объектам"
desc=""
date=""
audience="Геофизики"
tag=""
tagtype=""
icon="table"
iconsize="24" >}}
</div>
</div>
<div class="footer">
<p>Конвертер карточек для форматирования данных © 2023</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const convertBtn = document.getElementById('convertBtn');
const inputText = document.getElementById('inputText');
const outputText = document.getElementById('outputText');
const audienceSelect = document.getElementById('audience');
const resultInfo = document.getElementById('resultInfo');
const cardCount = document.getElementById('cardCount');
// Заполним textarea примером для удобства
inputText.value = `{{<card link="http://AnomalyGis" title="Аномалии по ГИС" >}}
{{<card link="http://SS_GLUB_GIS_PLAST" title="Выборка интервалов залегания геофизических пластов GL-40 - GL-52 по объектам" >}}`;
convertBtn.addEventListener('click', function() {
const input = inputText.value.trim();
const audience = audienceSelect.value;
if (!input) {
alert('Пожалуйста, введите данные для преобразования');
return;
}
// Разделяем входные данные на строки
const lines = input.split('\n');
let convertedCards = [];
let count = 0;
// Регулярное выражение для поиска карточек в формате {{<card link="..." title="..." >}}
const cardRegex = /\{\{<card\s+link="([^"]+)"\s+title="([^"]+)"\s*>}}/g;
for (const line of lines) {
const trimmedLine = line.trim();
if (!trimmedLine) continue;
// Используем регулярное выражение для поиска карточек
const match = cardRegex.exec(trimmedLine);
if (match) {
const link = match[1];
const title = match[2];
// Формируем новую карточку в нужном формате
const newCard = `{{< cardinfo
link="${link}"
title="${title}"
desc=""
date=""
audience="${audience}"
tag=""
tagtype=""
icon="table"
iconsize="24" >}}`;
convertedCards.push(newCard);
count++;
// Сбрасываем lastIndex для поиска следующей карточки
cardRegex.lastIndex = 0;
}
}
if (convertedCards.length === 0) {
// Если не найдено совпадений с регулярным выражением, попробуем найти вручную
const manualMatches = input.match(/\{\{<card[^>]*>}}/g);
if (manualMatches) {
for (const card of manualMatches) {
// Извлекаем link и title вручную
const linkMatch = card.match(/link="([^"]+)"/);
const titleMatch = card.match(/title="([^"]+)"/);
if (linkMatch && titleMatch) {
const link = linkMatch[1];
const title = titleMatch[1];
const newCard = `{{< cardinfo
link="${link}"
title="${title}"
desc=""
date=""
audience="${audience}"
tag=""
tagtype=""
icon="table"
iconsize="24" >}}`;
convertedCards.push(newCard);
count++;
}
}
}
}
if (count === 0) {
outputText.value = 'Не удалось найти карточки для преобразования. Проверьте формат входных данных.';
resultInfo.style.display = 'none';
} else {
outputText.value = convertedCards.join('\n\n');
cardCount.textContent = count;
resultInfo.style.display = 'flex';
}
});
// Добавляем возможность копирования результата по клику
outputText.addEventListener('click', function() {
if (outputText.value) {
outputText.select();
document.execCommand('copy');
// Временное уведомление о копировании
const originalBtnText = convertBtn.textContent;
convertBtn.textContent = 'Скопировано!';
convertBtn.style.backgroundColor = '#27ae60';
setTimeout(() => {
convertBtn.textContent = originalBtnText;
convertBtn.style.backgroundColor = '#3498db';
}, 1500);
}
});
});
</script>
</body>
</html>Добавлено (2026-01-13, 13:50)
---------------------------------------------
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
{{/* Используем вашу иконку edit */}}
{{ if .Site.Data.icons }}
{{ $editIconData := index .Site.Data.icons "edit" }}
{{ if $editIconData }}
{{ $editSvg := replaceRE "<svg" "<svg width='16' height='16'" $editIconData }}
<span class="custom-edit-icon">{{ $editSvg | safeHTML }}</span>
{{ else }}
{{/* Если иконка edit не найдена, используем fallback */}}
<svg class="info-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
</svg>
{{ end }}
{{ else }}
{{/* Fallback SVG иконка редактирования */}}
<svg class="info-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
</svg>
{{ end }}
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
/* Стили для иконки редактирования */
.info-card-icon .custom-edit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-icon .custom-edit-icon svg {
width: 16px;
height: 16px;
fill: currentColor;
color: inherit;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%) translateY(0);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-8px);
}
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК */
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
bottom: auto;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center;
}
.tooltip-row-text {
min-height: 18px;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
wrapper.addEventListener('mouseenter', function() {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script> Добавлено (2026-01-13, 13:56)
---------------------------------------------
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
{{/* Простая замена на иконку edit через вашу систему */}}
{{ if .Site.Data.icons }}
{{ $editIcon := index .Site.Data.icons "edit" }}
{{ if $editIcon }}
{{ $editIcon = replaceRE "<svg" "<svg width='16' height='16'" $editIcon }}
<span class="custom-icon">{{ $editIcon | safeHTML }}</span>
{{ else }}
{{/* Fallback если edit не найден - используем карандаш */}}
<svg class="info-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
</svg>
{{ end }}
{{ else }}
{{/* Fallback если нет data.icons */}}
<svg class="info-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
</svg>
{{ end }}
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-card-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-icon .custom-icon svg {
width: 16px;
height: 16px;
fill: currentColor;
color: inherit;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%) translateY(0);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-8px);
}
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК */
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
bottom: auto;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center;
}
.tooltip-row-text {
min-height: 18px;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
wrapper.addEventListener('mouseenter', function() {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script> Добавлено (2026-01-13, 14:04)
---------------------------------------------
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
{{/* Используем иконку "information-circle" */}}
{{ if .Site.Data.icons }}
{{ $infoIcon := index .Site.Data.icons "information-circle" }}
{{ if $infoIcon }}
{{ $infoIcon = replaceRE "<svg" "<svg width='16' height='16'" $infoIcon }}
<span class="custom-icon">{{ $infoIcon | safeHTML }}</span>
{{ else }}
{{/* Fallback если information-circle не найден */}}
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
{{ end }}
{{ else }}
{{/* Fallback если нет data.icons */}}
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
{{ end }}
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-card-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-icon .custom-icon svg {
width: 16px;
height: 16px;
fill: currentColor;
color: inherit;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%) translateY(0);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-8px);
}
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК */
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
bottom: auto;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center;
}
.tooltip-row-text {
min-height: 18px;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
wrapper.addEventListener('mouseenter', function() {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script> Добавлено (2026-01-13, 14:10)
---------------------------------------------
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
{{/* Используем иконку information-circle */}}
{{ if .Site.Data.icons }}
{{ $infoIcon := index .Site.Data.icons "information-circle" }}
{{ if $infoIcon }}
{{/* Обрабатываем stroke иконки - добавляем fill если нужно */}}
{{ $infoIcon = replaceRE "<svg" "<svg width='16' height='16'" $infoIcon }}
{{/* Если иконка использует stroke, добавляем fill='currentColor' для правильного отображения */}}
{{ if findRE "stroke=" $infoIcon }}
{{ $infoIcon = replaceRE "<path" "<path fill='none'" $infoIcon }}
{{ end }}
<span class="custom-icon">{{ $infoIcon | safeHTML }}</span>
{{ else }}
{{/* Fallback если information-circle не найден */}}
<svg class="info-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
</svg>
{{ end }}
{{ else }}
{{/* Fallback если нет data.icons */}}
<svg class="info-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
</svg>
{{ end }}
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
/* Стили для иконок с stroke - делаем их более тонкими */
.info-card-icon .custom-icon svg {
width: 16px;
height: 16px;
color: inherit;
/* Для stroke иконок - настраиваем толщину линии */
stroke-width: 1.5;
}
/* Если иконка использует stroke вместо fill */
.info-card-icon .custom-icon svg[stroke] {
fill: none;
stroke: currentColor;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%) translateY(0);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-8px);
}
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК */
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
bottom: auto;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center;
}
.tooltip-row-text {
min-height: 18px;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
wrapper.addEventListener('mouseenter', function() {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>
|
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
[{
"resource": "/z:/GDB/HUGO_SITE/hugo/example/layouts/shortcodes/cardinfo.html",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-propertyvalueexpected",
"severity": 8,
"message": "ожидается значение свойства",
"source": "css",
"startLineNumber": 24,
"startColumn": 40,
"endLineNumber": 24,
"endColumn": 41
},{
"resource": "/z:/GDB/HUGO_SITE/hugo/example/layouts/shortcodes/cardinfo.html",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-ruleorselectorexpected",
"severity": 8,
"message": "ожидается оператор at-rule или селектор",
"source": "css",
"startLineNumber": 24,
"startColumn": 54,
"endLineNumber": 24,
"endColumn": 55
},{
"resource": "/z:/GDB/HUGO_SITE/hugo/example/layouts/shortcodes/cardinfo.html",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-lcurlyexpected",
"severity": 8,
"message": "Требуется \"{\"",
"source": "css",
"startLineNumber": 24,
"startColumn": 63,
"endLineNumber": 24,
"endColumn": 64
},{
"resource": "/z:/GDB/HUGO_SITE/hugo/example/layouts/shortcodes/cardinfo.html",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-ruleorselectorexpected",
"severity": 8,
"message": "ожидается оператор at-rule или селектор",
"source": "css",
"startLineNumber": 24,
"startColumn": 79,
"endLineNumber": 24,
"endColumn": 80
},{
"resource": "/z:/GDB/HUGO_SITE/hugo/example/layouts/shortcodes/cardinfo.html",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-ruleorselectorexpected",
"severity": 8,
"message": "ожидается оператор at-rule или селектор",
"source": "css",
"startLineNumber": 24,
"startColumn": 81,
"endLineNumber": 24,
"endColumn": 82
},{
"resource": "/z:/GDB/HUGO_SITE/hugo/example/layouts/shortcodes/cardinfo.html",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-propertyvalueexpected",
"severity": 8,
"message": "ожидается значение свойства",
"source": "css",
"startLineNumber": 29,
"startColumn": 40,
"endLineNumber": 29,
"endColumn": 41
},{
"resource": "/z:/GDB/HUGO_SITE/hugo/example/layouts/shortcodes/cardinfo.html",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-ruleorselectorexpected",
"severity": 8,
"message": "ожидается оператор at-rule или селектор",
"source": "css",
"startLineNumber": 29,
"startColumn": 54,
"endLineNumber": 29,
"endColumn": 55
},{
"resource": "/z:/GDB/HUGO_SITE/hugo/example/layouts/shortcodes/cardinfo.html",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-lcurlyexpected",
"severity": 8,
"message": "Требуется \"{\"",
"source": "css",
"startLineNumber": 29,
"startColumn": 63,
"endLineNumber": 29,
"endColumn": 64
},{
"resource": "/z:/GDB/HUGO_SITE/hugo/example/layouts/shortcodes/cardinfo.html",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-ruleorselectorexpected",
"severity": 8,
"message": "ожидается оператор at-rule или селектор",
"source": "css",
"startLineNumber": 29,
"startColumn": 79,
"endLineNumber": 29,
"endColumn": 80
},{
"resource": "/z:/GDB/HUGO_SITE/hugo/example/layouts/shortcodes/cardinfo.html",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-ruleorselectorexpected",
"severity": 8,
"message": "ожидается оператор at-rule или селектор",
"source": "css",
"startLineNumber": 29,
"startColumn": 81,
"endLineNumber": 29,
"endColumn": 82
}]
|
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
{{/* Иконка по умолчанию - исправлен inline стиль */}}
<svg class="custom-icon" style='width: {{ $iconsize }}px; height: {{ $iconsize }}px;' viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
{{/* Иконка по умолчанию - исправлен inline стиль */}}
<svg class="custom-icon" style='width: {{ $iconsize }}px; height: {{ $iconsize }}px;' viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%) translateY(0);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-8px);
}
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК */
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
bottom: auto;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center;
}
.tooltip-row-text {
min-height: 18px;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
wrapper.addEventListener('mouseenter', function() {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>Добавлено (2026-01-13, 14:26)
---------------------------------------------
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24" }}
{{/* Создаем переменную со стилями для иконки */}}
{{ $iconStyle := printf "width: %spx; height: %spx;" $iconsize $iconsize }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
{{/* Иконка по умолчанию */}}
<svg class="custom-icon" style="{{ $iconStyle }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
{{/* Иконка по умолчанию */}}
<svg class="custom-icon" style="{{ $iconStyle }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Остальной CSS код остается БЕЗ ИЗМЕНЕНИЙ */
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%) translateY(0);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-8px);
}
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК */
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
bottom: auto;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center;
}
.tooltip-row-text {
min-height: 18px;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
wrapper.addEventListener('mouseenter', function() {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script> Добавлено (2026-01-13, 15:54)
---------------------------------------------
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка */
.info-card-tooltip {
position: absolute;
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Стрелка тултипа - позиция будет задана через JS */
.info-card-tooltip::before {
content: '';
position: absolute;
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК */
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center;
}
.tooltip-row-text {
min-height: 18px;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Инициализация тултипов с умным позиционированием
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
// Функция для позиционирования тултипа
function positionTooltip() {
if (window.innerWidth <= 768) {
// На мобильных - центрируем
tooltip.style.position = 'fixed';
tooltip.style.top = '50%';
tooltip.style.left = '50%';
tooltip.style.right = 'auto';
tooltip.style.bottom = 'auto';
tooltip.style.transform = 'translate(-50%, -50%)';
tooltip.style.transformOrigin = 'center center';
return;
}
const wrapperRect = wrapper.getBoundingClientRect();
const tooltipRect = tooltip.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Определяем доступное пространство
const spaceAbove = wrapperRect.top;
const spaceBelow = viewportHeight - wrapperRect.bottom;
const spaceLeft = wrapperRect.left;
const spaceRight = viewportWidth - wrapperRect.right;
// Определяем лучшую позицию по вертикали
let verticalPosition, arrowPosition;
if (spaceAbove >= tooltipRect.height + 20) {
// Помещаем сверху, если есть место
verticalPosition = 'top';
tooltip.style.top = 'auto';
tooltip.style.bottom = 'calc(100% + 10px)';
} else if (spaceBelow >= tooltipRect.height + 20) {
// Помещаем снизу, если сверху нет места
verticalPosition = 'bottom';
tooltip.style.top = 'calc(100% + 10px)';
tooltip.style.bottom = 'auto';
} else {
// Если места мало и сверху и снизу, центрируем по вертикали
verticalPosition = 'center';
const centerY = wrapperRect.top + (wrapperRect.height / 2) - (tooltipRect.height / 2);
tooltip.style.top = Math.max(10, Math.min(centerY, viewportHeight - tooltipRect.height - 10)) + 'px';
tooltip.style.bottom = 'auto';
}
// Определяем лучшую позицию по горизонтали
let horizontalPosition;
const centerX = wrapperRect.left + (wrapperRect.width / 2);
if (spaceRight >= tooltipRect.width / 2 && spaceLeft >= tooltipRect.width / 2) {
// Центрируем относительно иконки
horizontalPosition = 'center';
let left = centerX - (tooltipRect.width / 2);
left = Math.max(10, Math.min(left, viewportWidth - tooltipRect.width - 10));
tooltip.style.left = left + 'px';
tooltip.style.right = 'auto';
} else if (spaceRight >= tooltipRect.width + 20) {
// Помещаем справа
horizontalPosition = 'right';
tooltip.style.left = (wrapperRect.right + 10) + 'px';
tooltip.style.right = 'auto';
} else if (spaceLeft >= tooltipRect.width + 20) {
// Помещаем слева
horizontalPosition = 'left';
tooltip.style.left = 'auto';
tooltip.style.right = (viewportWidth - wrapperRect.left + 10) + 'px';
} else {
// Центрируем, если места мало
horizontalPosition = 'center';
let left = Math.max(10, (viewportWidth - tooltipRect.width) / 2);
tooltip.style.left = left + 'px';
tooltip.style.right = 'auto';
}
// Позиционируем стрелку
positionArrow(tooltip, verticalPosition, horizontalPosition, centerX, wrapperRect);
tooltip.style.position = 'fixed';
tooltip.style.transform = 'none';
tooltip.style.transformOrigin = 'center center';
}
// Функция для позиционирования стрелки
function positionArrow(tooltip, verticalPos, horizontalPos, centerX, wrapperRect) {
let arrowCSS = '';
if (verticalPos === 'top') {
// Стрелка внизу (тултип сверху)
arrowCSS = `
bottom: -7px;
transform: translateX(-50%) rotate(45deg);
`;
if (horizontalPos === 'center') {
arrowCSS += `left: 50%;`;
} else if (horizontalPos === 'right') {
arrowCSS += `left: 20px;`;
} else if (horizontalPos === 'left') {
arrowCSS += `right: 20px; left: auto;`;
}
} else if (verticalPos === 'bottom') {
// Стрелка сверху (тултип снизу)
arrowCSS = `
top: -7px;
transform: translateX(-50%) rotate(-135deg);
`;
if (horizontalPos === 'center') {
arrowCSS += `left: 50%;`;
} else if (horizontalPos === 'right') {
arrowCSS += `left: 20px;`;
} else if (horizontalPos === 'left') {
arrowCSS += `right: 20px; left: auto;`;
}
} else {
// Центрированное положение - убираем стрелку
tooltip.style.setProperty('--arrow-display', 'none');
return;
}
tooltip.style.setProperty('--arrow-display', 'block');
tooltip.style.setProperty('--arrow-css', arrowCSS);
}
// Применяем стили стрелки
function applyArrowStyles() {
const arrowCSS = tooltip.style.getPropertyValue('--arrow-css') || '';
const display = tooltip.style.getPropertyValue('--arrow-display') || 'block';
tooltip.style.setProperty('--arrow-css-display', display);
}
// Обновляем стили стрелки в CSS
const style = document.createElement('style');
style.textContent = `
.info-card-tooltip::before {
display: var(--arrow-css-display, block);
${tooltip.style.getPropertyValue('--arrow-css') || ''}
}
`;
document.head.appendChild(style);
wrapper.addEventListener('mouseenter', function() {
positionTooltip();
applyArrowStyles();
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
positionTooltip();
applyArrowStyles();
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
// Перепозиционирование при изменении размера окна
window.addEventListener('resize', function() {
if (tooltip.style.opacity === '1') {
positionTooltip();
applyArrowStyles();
}
});
// Перепозиционирование при скролле
window.addEventListener('scroll', function() {
if (tooltip.style.opacity === '1') {
positionTooltip();
applyArrowStyles();
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Перепозиционирование при изменении темы
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
setTimeout(function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
// Перезапускаем позиционирование
wrapper.dispatchEvent(new Event('mouseenter'));
}
});
}, 50);
}
});
});
observer.observe(document.body, { attributes: true });
observer.observe(document.documentElement, { attributes: true });
});
</script> Добавлено (2026-01-13, 16:07)
---------------------------------------------
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка - базовая позиция сверху */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
/* Альтернативная позиция - снизу (будет применяться через JS при необходимости) */
.info-card-tooltip.tooltip-bottom {
bottom: auto;
top: calc(100% + 10px);
transform: translateX(50%);
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-5px);
}
.info-card-tooltip.tooltip-bottom:hover {
transform: translateX(50%) translateY(5px);
}
/* Стрелка тултипа - для позиции сверху */
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
/* Стрелка для позиции снизу */
.info-card-tooltip.tooltip-bottom::before {
bottom: auto;
top: -7px;
transform: translateX(-50%) rotate(-135deg);
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК */
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
bottom: auto !important;
right: auto !important;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center;
}
.tooltip-row-text {
min-height: 18px;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов с умным позиционированием
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
// Функция для определения лучшей позиции
function adjustTooltipPosition() {
if (window.innerWidth <= 768) return; // На мобильных не меняем
const wrapperRect = wrapper.getBoundingClientRect();
const tooltipRect = tooltip.getBoundingClientRect();
const viewportHeight = window.innerHeight;
// Вычисляем доступное пространство сверху и снизу
const spaceAbove = wrapperRect.top;
const spaceBelow = viewportHeight - wrapperRect.bottom;
const tooltipHeight = tooltipRect.height;
// Если сверху мало места для тултипа, показываем снизу
if (spaceAbove < tooltipHeight + 20 && spaceBelow >= tooltipHeight + 20) {
tooltip.classList.add('tooltip-bottom');
} else {
tooltip.classList.remove('tooltip-bottom');
}
}
wrapper.addEventListener('mouseenter', function() {
adjustTooltipPosition();
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Перепозиционирование при скролле
let scrollTimer;
window.addEventListener('scroll', function() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
// Просто переключаем класс для перепозиционирования
const isBottom = tooltip.classList.contains('tooltip-bottom');
tooltip.classList.remove('tooltip-bottom');
setTimeout(() => {
const wrapperRect = wrapper.getBoundingClientRect();
const tooltipRect = tooltip.getBoundingClientRect();
const viewportHeight = window.innerHeight;
const spaceAbove = wrapperRect.top;
const spaceBelow = viewportHeight - wrapperRect.bottom;
if (spaceAbove < tooltipRect.height + 20 && spaceBelow >= tooltipRect.height + 20) {
tooltip.classList.add('tooltip-bottom');
}
}, 10);
}
});
}, 50);
});
// Перепозиционирование при изменении размера окна
window.addEventListener('resize', function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
// Сбросим и заново применим позиционирование
tooltip.style.opacity = '0';
setTimeout(() => {
tooltip.style.opacity = '1';
}, 10);
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>
|
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
{{ else }}
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка - базовая позиция сверху */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
/* Альтернативная позиция - снизу (будет применяться через JS при необходимости) */
.info-card-tooltip.tooltip-bottom {
bottom: auto;
top: calc(100% + 10px);
transform: translateX(50%);
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-5px);
}
.info-card-tooltip.tooltip-bottom:hover {
transform: translateX(50%) translateY(5px);
}
/* Стрелка тултипа - для позиции сверху */
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
/* Стрелка для позиции снизу */
.info-card-tooltip.tooltip-bottom::before {
bottom: auto;
top: -7px;
transform: translateX(-50%) rotate(-135deg);
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК */
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
bottom: auto !important;
right: auto !important;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center;
}
.tooltip-row-text {
min-height: 18px;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов с умным позиционированием
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
// Функция для определения лучшей позиции
function adjustTooltipPosition() {
if (window.innerWidth <= 768) return; // На мобильных не меняем
const wrapperRect = wrapper.getBoundingClientRect();
const tooltipRect = tooltip.getBoundingClientRect();
const viewportHeight = window.innerHeight;
// Вычисляем доступное пространство сверху и снизу
const spaceAbove = wrapperRect.top;
const spaceBelow = viewportHeight - wrapperRect.bottom;
const tooltipHeight = tooltipRect.height;
// Если сверху мало места для тултипа, показываем снизу
if (spaceAbove < tooltipHeight + 20 && spaceBelow >= tooltipHeight + 20) {
tooltip.classList.add('tooltip-bottom');
} else {
tooltip.classList.remove('tooltip-bottom');
}
}
wrapper.addEventListener('mouseenter', function() {
adjustTooltipPosition();
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Перепозиционирование при скролле
let scrollTimer;
window.addEventListener('scroll', function() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
// Просто переключаем класс для перепозиционирования
const isBottom = tooltip.classList.contains('tooltip-bottom');
tooltip.classList.remove('tooltip-bottom');
setTimeout(() => {
const wrapperRect = wrapper.getBoundingClientRect();
const tooltipRect = tooltip.getBoundingClientRect();
const viewportHeight = window.innerHeight;
const spaceAbove = wrapperRect.top;
const spaceBelow = viewportHeight - wrapperRect.bottom;
if (spaceAbove < tooltipRect.height + 20 && spaceBelow >= tooltipRect.height + 20) {
tooltip.classList.add('tooltip-bottom');
}
}, 10);
}
});
}, 50);
});
// Перепозиционирование при изменении размера окна
window.addEventListener('resize', function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
// Сбросим и заново применим позиционирование
tooltip.style.opacity = '0';
setTimeout(() => {
tooltip.style.opacity = '1';
}, 10);
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>Добавлено (2026-01-14, 10:15)
---------------------------------------------
<svg class="custom-icon" style="width: {{ $iconsize }}; height: {{ $iconsize }};" viewBox="0 0 24 24" fill="currentColor">
|
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* Основные стили */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка - базовая позиция сверху */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
/* Альтернативная позиция - снизу (будет применяться через JS при необходимости) */
.info-card-tooltip.tooltip-bottom {
bottom: auto;
top: calc(100% + 10px);
transform: translateX(50%);
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-5px);
}
.info-card-tooltip.tooltip-bottom:hover {
transform: translateX(50%) translateY(5px);
}
/* Стрелка тултипа - для позиции сверху */
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
/* Стрелка для позиции снизу */
.info-card-tooltip.tooltip-bottom::before {
bottom: auto;
top: -7px;
transform: translateX(-50%) rotate(-135deg);
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
/* HTML в описании */
.tooltip-description p { margin: 0 0 10px 0; }
.tooltip-description p:last-child { margin-bottom: 0; }
.tooltip-description br { margin-bottom: 6px; }
.tooltip-description strong, .tooltip-description b { font-weight: 700; color: #333; }
.tooltip-description em, .tooltip-description i { font-style: italic; }
.tooltip-description u { text-decoration: underline; }
.tooltip-description code { background: #f7f7f7; padding: 3px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; border: 1px solid #e0e0e0; }
.tooltip-description pre { background: #f7f7f7; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; font-size: 0.88em; border: 1px solid #e0e0e0; line-height: 1.5; }
.tooltip-description ul, .tooltip-description ol { margin: 10px 0; padding-left: 24px; }
.tooltip-description li { margin-bottom: 6px; line-height: 1.5; }
.tooltip-description a { color: #4a90e2; text-decoration: none; border-bottom: 1px dotted #4a90e2; }
.tooltip-description a:hover { text-decoration: none; border-bottom: 1px solid #4a90e2; color: #357abd; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
/* ФИКС ВЫРАВНИВАНИЯ ИКОНОК */
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* Темная тема */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-link,
html.dark .info-card-link {
color: #e2e8f0;
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before,
html.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-description strong,
body.dark .tooltip-description b,
html.dark .tooltip-description strong,
html.dark .tooltip-description b {
color: #f7fafc;
}
body.dark .tooltip-description code,
html.dark .tooltip-description code {
background: #2d3748;
color: #e2e8f0;
border: 1px solid #4a5568;
}
body.dark .tooltip-description pre,
html.dark .tooltip-description pre {
background: #2d3748;
border: 1px solid #4a5568;
color: #e2e8f0;
}
body.dark .tooltip-description a,
html.dark .tooltip-description a {
color: #63b3ed;
border-bottom-color: #63b3ed;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.info-card-left {
width: 100%;
padding-right: 0;
}
.info-card-right-section {
width: 100%;
justify-content: space-between;
}
.info-card-tooltip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
overflow-y: auto;
bottom: auto !important;
right: auto !important;
}
.info-card-tooltip::before {
display: none;
}
.info-card {
margin: 0.5rem 0;
}
.info-card-link {
padding: 0.75rem 1rem;
}
.tooltip-description {
max-height: 40vh;
font-size: 0.9rem;
}
.tooltip-row {
align-items: center;
}
.tooltip-row-text {
min-height: 18px;
}
}
@media (max-width: 480px) {
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
.tooltip-description {
font-size: 0.88rem;
}
.tooltip-details {
font-size: 0.82rem;
}
.info-card-left {
gap: 8px;
}
}
@media (min-width: 1200px) {
.info-card-tooltip {
width: 450px;
}
}
@media (min-width: 1400px) {
.info-card-tooltip {
width: 480px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Простая инициализация тултипов с умным позиционированием
const wrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
wrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
// Функция для определения лучшей позиции
function adjustTooltipPosition() {
if (window.innerWidth <= 768) return; // На мобильных не меняем
const wrapperRect = wrapper.getBoundingClientRect();
const tooltipRect = tooltip.getBoundingClientRect();
const viewportHeight = window.innerHeight;
// Вычисляем доступное пространство сверху и снизу
const spaceAbove = wrapperRect.top;
const spaceBelow = viewportHeight - wrapperRect.bottom;
const tooltipHeight = tooltipRect.height;
// Если сверху мало места для тултипа, показываем снизу
if (spaceAbove < tooltipHeight + 20 && spaceBelow >= tooltipHeight + 20) {
tooltip.classList.add('tooltip-bottom');
} else {
tooltip.classList.remove('tooltip-bottom');
}
}
wrapper.addEventListener('mouseenter', function() {
adjustTooltipPosition();
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
});
wrapper.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
}
});
});
// Перепозиционирование при скролле
let scrollTimer;
window.addEventListener('scroll', function() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
// Просто переключаем класс для перепозиционирования
const isBottom = tooltip.classList.contains('tooltip-bottom');
tooltip.classList.remove('tooltip-bottom');
setTimeout(() => {
const wrapperRect = wrapper.getBoundingClientRect();
const tooltipRect = tooltip.getBoundingClientRect();
const viewportHeight = window.innerHeight;
const spaceAbove = wrapperRect.top;
const spaceBelow = viewportHeight - wrapperRect.bottom;
if (spaceAbove < tooltipRect.height + 20 && spaceBelow >= tooltipRect.height + 20) {
tooltip.classList.add('tooltip-bottom');
}
}, 10);
}
});
}, 50);
});
// Перепозиционирование при изменении размера окна
window.addEventListener('resize', function() {
document.querySelectorAll('.info-card-tooltip-wrapper').forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
if (tooltip && tooltip.style.opacity === '1') {
// Сбросим и заново применим позиционирование
tooltip.style.opacity = '0';
setTimeout(() => {
tooltip.style.opacity = '1';
}, 10);
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>
|
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
{{ $view := .Get "view" | default "list" }} <!-- Новый параметр: list или grid -->
{{ if eq $view "grid" }}
<!-- КАРТОЧНЫЙ ВИД (GRID) -->
<div class="info-card info-card-grid">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-grid-content">
<!-- Верхняя часть карточки -->
<div class="info-card-grid-header">
{{ if $icon }}
<div class="info-card-grid-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<div class="custom-icon-grid">{{ $iconSvg | safeHTML }}</div>
{{ else }}
<div class="custom-icon-grid">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</div>
{{ end }}
{{ else }}
<div class="custom-icon-grid">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</div>
{{ end }}
</div>
{{ end }}
<div class="info-card-grid-title-section">
<h4 class="info-card-grid-title">{{ $title }}</h4>
{{ if $tag }}
<span class="info-card-grid-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
</div>
</div>
<!-- Описание (укороченное) -->
{{ if $desc }}
<div class="info-card-grid-description">
{{ $desc | plainify | truncate 100 }}
</div>
{{ end }}
<!-- Нижняя часть с метаданными -->
<div class="info-card-grid-footer">
{{ if $date }}
<div class="info-card-grid-meta">
<svg class="grid-meta-icon" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span>{{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="info-card-grid-meta">
<svg class="grid-meta-icon" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span>{{ $audience }}</span>
</div>
{{ end }}
{{ if $desc }}
<div class="info-card-grid-tooltip-trigger">
<svg class="grid-info-icon" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
<div class="info-card-grid-tooltip">
<div class="grid-tooltip-content">
<div class="grid-tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="grid-tooltip-details">
{{ if $date }}
<div class="grid-tooltip-row">
<svg class="grid-tooltip-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span>Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="grid-tooltip-row">
<svg class="grid-tooltip-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span>Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
{{ else }}
<!-- СТАРЫЙ СПИСОЧНЫЙ ВИД (list) -->
<!-- (вставьте сюда ваш оригинальный код из предыдущего ответа) -->
{{ end }}
<style>
/* ОБЩИЕ СТИЛИ ДЛЯ ОБОИХ ВИДОВ */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
/* ТЕГИ (общие стили) */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* ============ ГРИД-ВИД (КАРТОЧКИ) ============ */
.info-card-grid {
height: 100%;
min-height: 180px;
display: flex;
flex-direction: column;
}
.info-card-grid-content {
padding: 1.25rem;
display: flex;
flex-direction: column;
height: 100%;
}
/* Шапка карточки */
.info-card-grid-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.info-card-grid-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #f7f9fc;
border-radius: 8px;
border: 1px solid #e8ecef;
}
.custom-icon-grid {
display: flex;
align-items: center;
justify-content: center;
}
.custom-icon-grid svg {
width: 24px;
height: 24px;
color: #4a90e2;
}
.info-card-grid-title-section {
flex: 1;
min-width: 0; /* Для обрезки длинного текста */
}
.info-card-grid-title {
margin: 0 0 6px 0;
font-size: 1.1rem;
font-weight: 600;
color: #333;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.info-card-grid-tag {
display: inline-block;
font-size: 0.7rem;
padding: 0.1rem 0.4rem;
border-radius: 6px;
}
/* Описание */
.info-card-grid-description {
font-size: 0.9rem;
line-height: 1.5;
color: #666;
margin-bottom: 16px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Подвал карточки */
.info-card-grid-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
margin-top: auto;
}
.info-card-grid-meta {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.8rem;
color: #888;
}
.grid-meta-icon {
flex-shrink: 0;
width: 12px;
height: 12px;
}
/* Инфо-иконка и тултип в гриде */
.info-card-grid-tooltip-trigger {
position: relative;
display: flex;
align-items: center;
cursor: help;
}
.grid-info-icon {
width: 14px;
height: 14px;
color: #888;
transition: color 0.2s;
}
.info-card-grid-tooltip-trigger:hover .grid-info-icon {
color: #4a90e2;
}
.info-card-grid-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 0;
width: 320px;
max-width: 90vw;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s ease;
pointer-events: none;
}
.info-card-grid-tooltip-trigger:hover .info-card-grid-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(-5px);
}
.grid-tooltip-content {
padding: 16px;
max-height: 300px;
overflow-y: auto;
}
.grid-tooltip-description {
font-size: 0.9rem;
line-height: 1.5;
color: #444;
margin-bottom: 12px;
}
.grid-tooltip-details {
font-size: 0.85rem;
color: #666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
.grid-tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.grid-tooltip-row:last-child {
margin-bottom: 0;
}
.grid-tooltip-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* ============ ТЕМНАЯ ТЕМА ДЛЯ ГРИДА ============ */
body.dark .info-card-grid,
html.dark .info-card-grid {
background: #2d3748;
border-color: #4a5568;
}
body.dark .info-card-grid:hover,
html.dark .info-card-grid:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.2);
}
body.dark .info-card-grid-icon,
html.dark .info-card-grid-icon {
background: #374151;
border-color: #4b5563;
}
body.dark .custom-icon-grid svg,
html.dark .custom-icon-grid svg {
color: #63b3ed;
}
body.dark .info-card-grid-title,
html.dark .info-card-grid-title {
color: #f7fafc;
}
body.dark .info-card-grid-description,
html.dark .info-card-grid-description {
color: #cbd5e0;
}
body.dark .info-card-grid-footer,
html.dark .info-card-grid-footer {
border-top-color: #4a5568;
}
body.dark .info-card-grid-meta,
html.dark .info-card-grid-meta {
color: #a0aec0;
}
body.dark .grid-info-icon,
html.dark .grid-info-icon {
color: #a0aec0;
}
body.dark .info-card-grid-tooltip-trigger:hover .grid-info-icon,
html.dark .info-card-grid-tooltip-trigger:hover .grid-info-icon {
color: #63b3ed;
}
body.dark .info-card-grid-tooltip,
html.dark .info-card-grid-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .grid-tooltip-description,
html.dark .grid-tooltip-description {
color: #e2e8f0;
}
body.dark .grid-tooltip-details,
html.dark .grid-tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
/* ============ ОБЕРТКА ДЛЯ СЕТКИ ============ */
.info-cards-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
}
@media (max-width: 768px) {
.info-cards-grid-container {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
.info-card-grid {
min-height: 160px;
}
.info-card-grid-content {
padding: 1rem;
}
}
@media (max-width: 480px) {
.info-cards-grid-container {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.info-card-grid-tooltip {
width: 280px;
max-width: calc(100vw - 40px);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
right: auto !important;
bottom: auto !important;
}
}
/* Стили для спискового вида (уже есть в вашем коде) */
/* ... ваш существующий CSS для спискового вида ... */
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Обработчики для грид-карточек
const gridTooltipTriggers = document.querySelectorAll('.info-card-grid-tooltip-trigger');
gridTooltipTriggers.forEach(trigger => {
const tooltip = trigger.querySelector('.info-card-grid-tooltip');
if (!tooltip) return;
// На десктопе - ховер
trigger.addEventListener('mouseenter', function() {
if (window.innerWidth > 768) {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
});
trigger.addEventListener('mouseleave', function() {
if (window.innerWidth > 768) {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
}
});
// На мобильных - тап
trigger.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
// Закрыть другие открытые тултипы
document.querySelectorAll('.info-card-grid-tooltip').forEach(t => {
if (t !== tooltip) {
t.style.opacity = '0';
t.style.visibility = 'hidden';
}
});
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
// Позиционирование на мобильных
if (window.innerWidth <= 768) {
tooltip.style.position = 'fixed';
tooltip.style.top = '50%';
tooltip.style.left = '50%';
tooltip.style.transform = 'translate(-50%, -50%)';
tooltip.style.right = 'auto';
tooltip.style.bottom = 'auto';
}
}
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-grid-tooltip-trigger') &&
!e.target.closest('.info-card-grid-tooltip')) {
document.querySelectorAll('.info-card-grid-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-grid-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
});
</script>
|
{{/* layouts/shortcodes/cardinfo.html */}}
{{ $link := .Get "link" }}
{{ $title := .Get "title" }}
{{ $desc := .Get "desc" | default "" }}
{{ $date := .Get "date" }}
{{ $audience := .Get "audience" }}
{{ $tag := .Get "tag" }}
{{ $tagtype := .Get "tagtype" | default "default" }}
{{ $icon := .Get "icon" }}
{{ $iconsize := .Get "iconsize" | default "24px" }}
<div class="info-card">
<a href="{{ $link }}" class="info-card-link" target="_blank">
<div class="info-card-header">
<div class="info-card-left">
{{ if $icon }}
<span class="info-card-title-icon">
{{ if .Site.Data.icons }}
{{ $iconData := index .Site.Data.icons $icon }}
{{ if $iconData }}
{{ $iconSvg := replaceRE "<svg" (printf "<svg width='%s' height='%s'" $iconsize $iconsize) $iconData }}
<span class="custom-icon">{{ $iconSvg | safeHTML }}</span>
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
{{ else }}
<span class="custom-icon">
<svg width="{{ $iconsize }}" height="{{ $iconsize }}" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
</span>
{{ end }}
</span>
{{ end }}
<span class="info-card-title">{{ $title }}</span>
</div>
<div class="info-card-right-section">
{{ if $tag }}
<span class="info-card-tag info-card-tag-{{ $tagtype }}">
{{ $tag }}
</span>
{{ end }}
{{ if $desc }}
<div class="info-card-tooltip-wrapper">
<span class="info-card-icon">
<svg class="info-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
<path d="M7 11h2v2H7zm0-8h2v6H7z"/>
</svg>
</span>
<div class="info-card-tooltip">
<div class="tooltip-description">{{ $desc | safeHTML }}</div>
{{ if or $date $audience }}
<div class="tooltip-details">
{{ if $date }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
</svg>
<span class="tooltip-row-text">Добавлено: {{ $date }}</span>
</div>
{{ end }}
{{ if $audience }}
<div class="tooltip-row">
<svg class="tooltip-row-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
<span class="tooltip-row-text">Для кого: {{ $audience }}</span>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</a>
</div>
<style>
/* ============ ОБЩИЕ СТИЛИ КАРТОЧКИ ============ */
.info-card {
margin: 0.75rem 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
position: relative;
}
.info-card:hover {
border-color: #4a90e2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}
.info-card-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: #333333;
}
.info-card-link:hover {
text-decoration: none;
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
}
/* Левая часть */
.info-card-left {
display: flex;
align-items: center;
flex: 1;
padding-right: 12px;
min-height: 24px;
gap: 10px;
}
.info-card-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-card-title-icon .custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.info-card-title-icon .custom-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
color: #666666;
vertical-align: middle;
}
.info-card-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* Правая часть */
.info-card-right-section {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Теги */
.info-card-tag {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
}
.info-card-tag-default { background: #f0f0f0; color: #666666; border-color: #ddd; }
.info-card-tag-info { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.info-card-tag-warning { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.info-card-tag-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.info-card-tag-error { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
/* Иконка и тултип */
.info-card-tooltip-wrapper {
position: relative;
display: flex;
align-items: center;
}
.info-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: help;
color: #666666;
border-radius: 50%;
transition: all 0.15s;
}
.info-card-icon:hover {
background: #f0f0f0;
color: #4a90e2;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Всплывающая подсказка */
.info-card-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%);
width: 420px;
max-width: 90vw;
padding: 18px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
/* Альтернативная позиция - снизу */
.info-card-tooltip.tooltip-bottom {
bottom: auto;
top: calc(100% + 10px);
transform: translateX(50%);
}
.info-card-tooltip-wrapper:hover .info-card-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(50%) translateY(-5px);
}
.info-card-tooltip.tooltip-bottom:hover {
transform: translateX(50%) translateY(5px);
}
/* Стрелка тултипа */
.info-card-tooltip::before {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: white;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
z-index: -1;
}
.info-card-tooltip.tooltip-bottom::before {
bottom: auto;
top: -7px;
transform: translateX(-50%) rotate(-135deg);
}
.tooltip-description {
font-size: 0.92rem;
line-height: 1.6;
color: #444444;
margin-bottom: 14px;
max-height: 250px;
overflow-y: auto;
padding-right: 6px;
}
.tooltip-description::-webkit-scrollbar { width: 6px; }
.tooltip-description::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.tooltip-description::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 3px; }
.tooltip-details {
font-size: 0.85rem;
color: #666666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
.tooltip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tooltip-row:last-child {
margin-bottom: 0;
}
.tooltip-row-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-row-text {
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
min-height: 20px;
}
/* ============ СТИЛИ ДЛЯ РЕЖИМА GRID ============ */
/* Эти стили применяются только когда у body есть класс .grid-view */
body.grid-view .info-card {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
body.grid-view .info-card-link {
height: 100%;
display: flex;
flex-direction: column;
padding: 1.5rem;
}
body.grid-view .info-card-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
flex: 1;
}
body.grid-view .info-card-left {
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
padding-right: 0;
gap: 1rem;
}
body.grid-view .info-card-title-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
border-radius: 16px;
border: 1px solid #e1e8ff;
}
body.grid-view .info-card-title-icon .custom-icon svg {
width: 32px;
height: 32px;
color: #4a90e2;
}
body.grid-view .info-card-title {
font-size: 1.2rem;
text-align: center;
width: 100%;
margin-bottom: 0.75rem;
}
body.grid-view .info-card-right-section {
width: 100%;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid #f0f0f0;
}
/* Короткое описание для grid режима (скрыто по умолчанию) */
.info-card-short-desc {
display: none;
font-size: 0.9rem;
line-height: 1.5;
color: #666;
text-align: center;
margin: 0.75rem 0;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.grid-view .info-card-short-desc {
display: block;
}
/* Тултип в grid режиме */
body.grid-view .info-card-tooltip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
right: auto;
bottom: auto;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 80vh;
overflow-y: auto;
}
body.grid-view .info-card-tooltip-wrapper:hover .info-card-tooltip {
transform: translate(-50%, -50%) scale(1);
}
body.grid-view .info-card-tooltip::before {
display: none;
}
/* ============ ТЕМНАЯ ТЕМА ============ */
body.dark .info-card,
html.dark .info-card {
background: #2d3748;
border-color: #4a5568;
}
body.dark .info-card:hover,
html.dark .info-card:hover {
border-color: #63b3ed;
box-shadow: 0 2px 8px rgba(99, 179, 237, 0.15);
}
body.dark .info-card-title,
html.dark .info-card-title {
color: #f7fafc;
}
body.dark .info-card-title-icon .custom-icon svg {
color: #a0aec0;
}
body.dark .info-card-icon,
html.dark .info-card-icon {
color: #a0aec0;
}
body.dark .info-card-icon:hover,
html.dark .info-card-icon:hover {
background: #4a5568;
color: #63b3ed;
}
body.dark .info-card-tooltip,
html.dark .info-card-tooltip {
background: #1a202c;
border-color: #4a5568;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
body.dark .info-card-tooltip::before {
background: #1a202c;
border-color: #4a5568;
}
body.dark .tooltip-description,
html.dark .tooltip-description {
color: #e2e8f0;
}
body.dark .tooltip-details,
html.dark .tooltip-details {
color: #a0aec0;
border-top-color: #4a5568;
}
body.dark .info-card-tag-default,
html.dark .info-card-tag-default {
background: #4a5568;
color: #cbd5e0;
border-color: #718096;
}
body.dark .info-card-tag-info,
html.dark .info-card-tag-info {
background: #2c5282;
color: #bee3f8;
border-color: #3182ce;
}
body.dark .info-card-tag-warning,
html.dark .info-card-tag-warning {
background: #975a16;
color: #feebc8;
border-color: #d69e2e;
}
body.dark .info-card-tag-success,
html.dark .info-card-tag-success {
background: #276749;
color: #c6f6d5;
border-color: #38a169;
}
body.dark .info-card-tag-error,
html.dark .info-card-tag-error {
background: #9b2c2c;
color: #fed7d7;
border-color: #e53e3e;
}
/* Темная тема для grid режима */
body.dark.grid-view .info-card-title-icon,
html.dark.grid-view .info-card-title-icon {
background: linear-gradient(135deg, #2c5282 0%, #3182ce 100%);
border-color: #4299e1;
}
body.dark.grid-view .info-card-title-icon .custom-icon svg,
html.dark.grid-view .info-card-title-icon .custom-icon svg {
color: #bee3f8;
}
body.dark.grid-view .info-card-short-desc,
html.dark.grid-view .info-card-short-desc {
color: #cbd5e0;
}
body.dark.grid-view .info-card-right-section,
html.dark.grid-view .info-card-right-section {
border-top-color: #4a5568;
}
/* ============ ПЕРЕКЛЮЧАТЕЛЬ ВИДА ============ */
.cardinfo-view-toggle {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: #4a90e2;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
transition: all 0.3s ease;
}
.toggle-btn:hover {
background: #357abd;
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(74, 144, 226, 0.4);
}
.toggle-btn svg {
width: 24px;
height: 24px;
}
body.dark .toggle-btn,
html.dark .toggle-btn {
background: #4299e1;
}
body.dark .toggle-btn:hover,
html.dark .toggle-btn:hover {
background: #3182ce;
}
/* Контейнер для grid режима */
.cardinfo-grid-container {
display: none;
}
body.grid-view .cardinfo-list-container {
display: none;
}
body.grid-view .cardinfo-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
}
/* Адаптивность */
@media (max-width: 768px) {
.info-card-tooltip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 40px);
max-width: 500px;
max-height: 70vh;
bottom: auto !important;
right: auto !important;
}
.info-card-tooltip::before {
display: none;
}
body.grid-view .cardinfo-grid-container {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
.toggle-btn {
width: 45px;
height: 45px;
bottom: 15px;
right: 15px;
}
}
@media (max-width: 480px) {
body.grid-view .cardinfo-grid-container {
grid-template-columns: 1fr;
}
.info-card-tooltip {
width: calc(100vw - 20px);
padding: 14px;
}
body.grid-view .info-card-title-icon {
width: 56px;
height: 56px;
}
body.grid-view .info-card-title-icon .custom-icon svg {
width: 28px;
height: 28px;
}
}
</style>
<!-- Добавляем короткое описание в HTML (скрыто по умолчанию) -->
{{ if $desc }}
<div class="info-card-short-desc">
{{ $desc | plainify | truncate 120 }}
</div>
{{ end }}
<script>
// Добавляем переключатель вида на страницу
document.addEventListener('DOMContentLoaded', function() {
// Проверяем, есть ли уже переключатель
if (!document.querySelector('.cardinfo-view-toggle')) {
// Создаем кнопку переключения
const toggleBtn = document.createElement('button');
toggleBtn.className = 'toggle-btn';
toggleBtn.title = 'Переключить вид';
toggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M4 4h4v4H4zm0 6h4v4H4zm0 6h4v4H4zm6-12h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4zm6-12h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4z"/>
</svg>
`;
// Создаем контейнер для кнопки
const toggleContainer = document.createElement('div');
toggleContainer.className = 'cardinfo-view-toggle';
toggleContainer.appendChild(toggleBtn);
document.body.appendChild(toggleContainer);
// Создаем контейнеры для grid режима
const cards = document.querySelectorAll('.info-card');
if (cards.length > 0) {
// Находим общего родителя карточек
let parent = cards[0].parentNode;
// Создаем контейнер для grid режима
const gridContainer = document.createElement('div');
gridContainer.className = 'cardinfo-grid-container';
// Клонируем карточки в grid контейнер
cards.forEach(card => {
gridContainer.appendChild(card.cloneNode(true));
});
// Добавляем grid контейнер после обычных карточек
parent.appendChild(gridContainer);
// Добавляем контейнеру обычных карточек класс
parent.classList.add('cardinfo-list-container');
}
// Обработчик клика на кнопку
toggleBtn.addEventListener('click', function() {
const isGridView = document.body.classList.toggle('grid-view');
// Меняем иконку
if (isGridView) {
toggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
</svg>
`;
toggleBtn.title = 'Переключить на список';
} else {
toggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M4 4h4v4H4zm0 6h4v4H4zm0 6h4v4H4zm6-12h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4zm6-12h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4z"/>
</svg>
`;
toggleBtn.title = 'Переключить на плитки';
}
// Сохраняем выбор в localStorage
localStorage.setItem('cardinfo-view', isGridView ? 'grid' : 'list');
});
// Загружаем сохраненное предпочтение
const savedView = localStorage.getItem('cardinfo-view');
if (savedView === 'grid') {
document.body.classList.add('grid-view');
toggleBtn.innerHTML = `
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
</svg>
`;
toggleBtn.title = 'Переключить на список';
}
}
// Обработчики для тултипов в grid режиме
function initTooltips() {
const tooltipWrappers = document.querySelectorAll('.info-card-tooltip-wrapper');
tooltipWrappers.forEach(wrapper => {
const tooltip = wrapper.querySelector('.info-card-tooltip');
const icon = wrapper.querySelector('.info-card-icon');
if (!tooltip || !icon) return;
// На десктопе - ховер для list режима, клик для grid режима
wrapper.addEventListener('mouseenter', function() {
if (window.innerWidth > 768 && !document.body.classList.contains('grid-view')) {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
});
wrapper.addEventListener('mouseleave', function() {
if (window.innerWidth > 768 && !document.body.classList.contains('grid-view')) {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
}
});
// Клик для мобильных и grid режима
wrapper.addEventListener('click', function(e) {
if (window.innerWidth <= 768 || document.body.classList.contains('grid-view')) {
e.preventDefault();
e.stopPropagation();
// Закрыть другие тултипы
document.querySelectorAll('.info-card-tooltip').forEach(t => {
if (t !== tooltip) {
t.style.opacity = '0';
t.style.visibility = 'hidden';
}
});
if (tooltip.style.opacity === '1') {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
} else {
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
// Позиционирование для мобильных и grid
if (window.innerWidth <= 768 || document.body.classList.contains('grid-view')) {
tooltip.style.position = 'fixed';
tooltip.style.top = '50%';
tooltip.style.left = '50%';
tooltip.style.transform = 'translate(-50%, -50%)';
tooltip.style.right = 'auto';
tooltip.style.bottom = 'auto';
}
}
}
});
});
// Закрытие тултипов при клике вне
document.addEventListener('click', function(e) {
if (!e.target.closest('.info-card-tooltip-wrapper') &&
!e.target.closest('.info-card-tooltip')) {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.info-card-tooltip').forEach(tooltip => {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
});
}
});
}
// Инициализация тултипов при загрузке
initTooltips();
// Переинициализация при переключении вида
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class' && mutation.target === document.body) {
setTimeout(initTooltips, 100);
}
});
});
observer.observe(document.body, { attributes: true });
});
</script>
|
к примеру на эти иконки ошибка он неможет их найти
{{<cards cols="2">}}
{{<card link="./docs/manuals" title="Документация" icon="book-open" >}}
{{<card link="./news" title="Новости" icon="globe-alt" >}}
{{<card link="./reports" title="Отчеты" icon="clipboard-check" >}}
{{<card link="./downloads" title="Загрузки" icon="download" >}}
{{</cards>}}
а вот код самого cards.html
{{- $cols := .Get "cols" | default 3 -}}
{{- partial "shortcodes/cards" (dict "cols" $cols "content" .Inner) -}}
и второй файл card.html
{{- $cols := .Get "cols" | default 3 -}}
{{- partial "shortcodes/cards" (dict "cols" $cols "content" .Inner) -}}Добавлено (2026-01-14, 12:40)
---------------------------------------------
к примеру на эти иконки ошибка он неможет их найти
{{<cards cols="2">}}
{{<card link="./docs/manuals" title="Документация" icon="book-open" >}}
{{<card link="./news" title="Новости" icon="globe-alt" >}}
{{<card link="./reports" title="Отчеты" icon="clipboard-check" >}}
{{<card link="./downloads" title="Загрузки" icon="download" >}}
{{</cards>}}
а вот код самого cards.html
{{- $cols := .Get "cols" | default 3 -}}
{{- partial "shortcodes/cards" (dict "cols" $cols "content" .Inner) -}}
и второй файл card.html
к примеру на эти иконки ошибка он неможет их найти
{{<cards cols="2">}}
{{<card link="./docs/manuals" title="Документация" icon="book-open" >}}
{{<card link="./news" title="Новости" icon="globe-alt" >}}
{{<card link="./reports" title="Отчеты" icon="clipboard-check" >}}
{{<card link="./downloads" title="Загрузки" icon="download" >}}
{{</cards>}}
а вот код самого cards.html
{{- $cols := .Get "cols" | default 3 -}}
{{- partial "shortcodes/cards" (dict "cols" $cols "content" .Inner) -}}
и второй файл card.html
{{- $context := . -}}
{{- $link := .Get "link" -}}
{{- $title := .Get "title" -}}
{{- $icon := .Get "icon" -}}
{{- $subtitle := .Get "subtitle" -}}
{{- $image := .Get "image" -}}
{{- $width := 0 -}}
{{- $height := 0 -}}
{{- $imageStyle := .Get "imageStyle" -}}
{{- $tag := .Get "tag" -}}
{{- $tagType := .Get "tagType" -}}
{{/* Image processing options */}}
{{- $method := .Get "method" | default "Resize" | humanize -}}
{{- $options := .Get "options" | default "800x webp q80" -}}
{{- $process := .Get "process" | default (printf "%s %s" $method $options) -}}
{{- if and $image (not (urls.Parse $image).Scheme) -}}
{{- with or (.Page.Resources.Get $image) (resources.Get $image) -}}
{{/* .Process does not work on svgs */}}
{{- if (not (eq .MediaType.SubType "svg")) -}}
{{/* Retrieve the $image resource from local or global resources */}}
{{- $processed := .Process $process -}}
{{- $width = $processed.Width -}}
{{- $height = $processed.Height -}}
{{- $image = $processed.RelPermalink -}}
{{- end -}}
{{ else }}
{{/* Otherwise, use relative link of the image */}}
{{- if hasPrefix $image "/" -}}
{{- $image = relURL (strings.TrimPrefix "/" $image) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- partial "shortcodes/card" (dict
"page" .Page
"link" $link
"title" $title
"icon" $icon
"subtitle" $subtitle
"image" $image
"width" $width
"height" $height
"imageStyle" $imageStyle
"tag" $tag
"tagType" $tagType
)
-}} Добавлено (2026-01-14, 12:43)
---------------------------------------------
к примеру на эти иконки ошибка он неможет их найти
{{<cards cols="2">}}
{{<card link="./docs/manuals" title="Документация" icon="book-open" >}}
{{<card link="./news" title="Новости" icon="globe-alt" >}}
{{<card link="./reports" title="Отчеты" icon="clipboard-check" >}}
{{<card link="./downloads" title="Загрузки" icon="download" >}}
{{</cards>}}
а вот код самого cards.html
{{- $cols := .Get "cols" | default 3 -}}
{{- partial "shortcodes/cards" (dict "cols" $cols "content" .Inner) -}}
а вот код самого card.html
{{- $context := . -}}
{{- $link := .Get "link" -}}
{{- $title := .Get "title" -}}
{{- $icon := .Get "icon" -}}
{{- $subtitle := .Get "subtitle" -}}
{{- $image := .Get "image" -}}
{{- $width := 0 -}}
{{- $height := 0 -}}
{{- $imageStyle := .Get "imageStyle" -}}
{{- $tag := .Get "tag" -}}
{{- $tagType := .Get "tagType" -}}
{{/* Image processing options */}}
{{- $method := .Get "method" | default "Resize" | humanize -}}
{{- $options := .Get "options" | default "800x webp q80" -}}
{{- $process := .Get "process" | default (printf "%s %s" $method $options) -}}
{{- if and $image (not (urls.Parse $image).Scheme) -}}
{{- with or (.Page.Resources.Get $image) (resources.Get $image) -}}
{{/* .Process does not work on svgs */}}
{{- if (not (eq .MediaType.SubType "svg")) -}}
{{/* Retrieve the $image resource from local or global resources */}}
{{- $processed := .Process $process -}}
{{- $width = $processed.Width -}}
{{- $height = $processed.Height -}}
{{- $image = $processed.RelPermalink -}}
{{- end -}}
{{ else }}
{{/* Otherwise, use relative link of the image */}}
{{- if hasPrefix $image "/" -}}
{{- $image = relURL (strings.TrimPrefix "/" $image) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- partial "shortcodes/card" (dict
"page" .Page
"link" $link
"title" $title
"icon" $icon
"subtitle" $subtitle
"image" $image
"width" $width
"height" $height
"imageStyle" $imageStyle
"tag" $tag
"tagType" $tagType
)
-}}
|
{{- $context := . -}}
{{- $link := .Get "link" -}}
{{- $title := .Get "title" -}}
{{- $iconName := .Get "icon" -}}
{{- $icon := "" -}}
{{- $subtitle := .Get "subtitle" -}}
{{- $image := .Get "image" -}}
{{- $width := 0 -}}
{{- $height := 0 -}}
{{- $imageStyle := .Get "imageStyle" -}}
{{- $tag := .Get "tag" -}}
{{- $tagType := .Get "tagType" -}}
{{/* ========== ДОБАВЬТЕ ЭТОТ КОД ========== */}}
{{/* Получение SVG иконки из data/icons.yaml */}}
{{- if $iconName -}}
{{- with index site.Data.icons $iconName -}}
{{- $icon = . | safeHTML -}}
{{- else -}}
{{- warnf "Иконка '%s' не найдена в site.Data.icons" $iconName -}}
{{- $icon = printf "<!-- Иконка %s не найдена -->" $iconName -}}
{{- end -}}
{{- end -}}
{{/* ========== КОНЕЦ ДОБАВЛЕННОГО КОДА ========== */}}
{{/* Image processing options */}}
{{- $method := .Get "method" | default "Resize" | humanize -}}
{{- $options := .Get "options" | default "800x webp q80" -}}
{{- $process := .Get "process" | default (printf "%s %s" $method $options) -}}
{{- if and $image (not (urls.Parse $image).Scheme) -}}
{{- with or (.Page.Resources.Get $image) (resources.Get $image) -}}
{{/* .Process does not work on svgs */}}
{{- if (not (eq .MediaType.SubType "svg")) -}}
{{/* Retrieve the $image resource from local or global resources */}}
{{- $processed := .Process $process -}}
{{- $width = $processed.Width -}}
{{- $height = $processed.Height -}}
{{- $image = $processed.RelPermalink -}}
{{- end -}}
{{ else }}
{{/* Otherwise, use relative link of the image */}}
{{- if hasPrefix $image "/" -}}
{{- $image = relURL (strings.TrimPrefix "/" $image) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- partial "shortcodes/card" (dict
"page" .Page
"link" $link
"title" $title
"icon" $icon /* Теперь здесь будет SVG код */
"subtitle" $subtitle
"image" $image
"width" $width
"height" $height
"imageStyle" $imageStyle
"tag" $tag
"tagType" $tagType
)
-}}
|
{{- $context := . -}}
{{- $link := .Get "link" -}}
{{- $title := .Get "title" -}}
{{- $iconName := .Get "icon" -}}
{{- $icon := "" -}}
{{- $subtitle := .Get "subtitle" -}}
{{- $image := .Get "image" -}}
{{- $width := 0 -}}
{{- $height := 0 -}}
{{- $imageStyle := .Get "imageStyle" -}}
{{- $tag := .Get "tag" -}}
{{- $tagType := .Get "tagType" -}}
{{/* Получение SVG иконки из data/icons.yaml */}}
{{- if $iconName -}}
{{- with index site.Data.icons $iconName -}}
{{- $icon = . | safeHTML -}}
{{- else -}}
{{- warnf "Иконка '%s' не найдена в site.Data.icons" $iconName -}}
{{- $icon = (printf "<!-- Иконка %s не найдена -->" $iconName) -}}
{{- end -}}
{{- end -}}
{{/* Image processing options */}}
{{- $method := .Get "method" | default "Resize" | humanize -}}
{{- $options := .Get "options" | default "800x webp q80" -}}
{{- $process := .Get "process" | default (printf "%s %s" $method $options) -}}
{{- if and $image (not (urls.Parse $image).Scheme) -}}
{{- with or (.Page.Resources.Get $image) (resources.Get $image) -}}
{{- /* .Process does not work on svgs */ -}}
{{- if (not (eq .MediaType.SubType "svg")) -}}
{{- /* Retrieve the $image resource from local or global resources */ -}}
{{- $processed := .Process $process -}}
{{- $width = $processed.Width -}}
{{- $height = $processed.Height -}}
{{- $image = $processed.RelPermalink -}}
{{- end -}}
{{- else -}}
{{- /* Otherwise, use relative link of the image */ -}}
{{- if hasPrefix $image "/" -}}
{{- $image = relURL (strings.TrimPrefix "/" $image) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- partial "shortcodes/card" (dict
"page" .Page
"link" $link
"title" $title
"icon" $icon
"subtitle" $subtitle
"image" $image
"width" $width
"height" $height
"imageStyle" $imageStyle
"tag" $tag
"tagType" $tagType
) -}}
|
