diff --git a/sharebar-style.css b/sharebar-style.css new file mode 100644 index 0000000..cd9685d --- /dev/null +++ b/sharebar-style.css @@ -0,0 +1,154 @@ +/* CSS sharebar 5.4.3 */ + +.eg-sharebar { + display: flex; + gap: 14px; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + margin: 24px auto 0; + max-width: 1100px; +} +.share-masto-col { + display: flex; + flex-direction: column; + align-items: center; + gap: 7px; +} + +/* Tutti i bottoni, select, input stesse dimensioni */ +.share-btn, +.masto-select, +.masto-input { + min-width: 170px; + max-width: 200px; + height: 48px; + border-radius: 13px; + font-size: 1.09em; + border: none; + box-shadow: 0 1px 3px #0001; + font-weight: 600; + cursor: pointer; + transition: filter .18s; + margin: 0; + padding: 0 20px; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + background: #f4f4f7; + color: #23272f; +} +.share-btn.mastodon, .masto-select, .masto-input { + background: #6364ff; + color: #fff; +} +.masto-select, .masto-input { + font-size: 1em; + font-weight: 400; + padding: 0 16px; + box-shadow: none; + border: 1.5px solid #4442; + outline: none; + width: 100%; + max-width: 200px; +} +.masto-select option { + background: #fff; + color: #23272f; +} +.masto-select:focus, .masto-input:focus { + border-color: #7c3aed; + background: #ecefff; +} +.masto-input::placeholder { + color: #b8b8cc; + opacity: 1; +} +.share-btn.x { background: #111; color: #fff; } +.share-btn.bluesky { background: #0277fd; color: #fff; } +.share-btn.telegram { background: #229ed9; color: #fff; } +.share-btn.link { background: #10b981; color: #fff; } +.share-btn .icon { + width: 22px; + height: 22px; + display: inline-block; + vertical-align: middle; +} +.share-btn:hover, +.masto-select:hover, +.masto-input:hover { + filter: brightness(0.93); +} + +@media (max-width: 900px) { + .eg-sharebar { + gap: 12px; + flex-wrap: wrap; + max-width: 700px; + } + .share-masto-col { + margin-bottom: 8px; + } +} +@media (max-width: 700px) { + .eg-sharebar { + flex-direction: column; + align-items: stretch; + gap: 16px; + max-width: 430px; + } + .share-btn, .masto-select, .masto-input { + width: 100%; + min-width: 0; + max-width: none; + } + .share-masto-col { + width: 100%; + align-items: stretch; + } +} + +/* ======================================== + TOOLTIP - VERSIONE CORRETTA 5.4.3 + ======================================== */ + +.eg-sharebar .share-btn { + position: relative; +} + +/* Tooltip di base (nascosto) */ +.eg-sharebar .share-btn[data-tooltip]::after { + content: attr(data-tooltip); + position: absolute; + bottom: 110%; + left: 50%; + transform: translateX(-50%); + background: #222; + color: #fff; + padding: 6px 12px; + border-radius: 6px; + white-space: nowrap; + font-size: 0.95em; + opacity: 0; + pointer-events: none; + z-index: 999; + transition: opacity 0.2s; +} + +/* Mostra tooltip SOLO su hover */ +.eg-sharebar .share-btn[data-tooltip]:hover::after { + opacity: 1; +} + +/* ✅ Nascondi durante il click (active) */ +.eg-sharebar .share-btn[data-tooltip]:active::after { + opacity: 0; +} + +/* ✅ Fix per dispositivi touch (mobile/tablet) */ +@media (hover: none) and (pointer: coarse) { + .eg-sharebar .share-btn[data-tooltip]::after { + display: none !important; + } +} \ No newline at end of file