[go: up one dir, main page]

Przejdź do zawartości

Szablon:Tooltip/styles.css

Z Wikipedii, wolnej encyklopedii
/**
 * Na urządzeniach dotykowych nie da się zobaczyć zawartości atrybutu title,
 * dlatego należy go wyświetlić "ręcznie".
 * Na podstawie [[wikt:Szablon:potencjalnie/styles.css]]
 */
@media (pointer: coarse), (hover: none) {
	.rt-commentedText {
		display: inline-flex;
		position: relative;
		justify-content: center;
	}
	
	/* Trójkąt do góry, wskazująca na kotwicę dymku */
	.rt-commentedText:focus::before {
    	border: 8px solid transparent;
    	border-top-width: 0;
    	border-bottom-color: #222;
    	content: '';
    	position: absolute;
    	margin-top: calc(1.5em - 2px);
    	z-index: 2;
	}
	
	.rt-commentedText:focus::after {
		content: attr(title);
		position: absolute;
		background-color: #222;
		color: #eee;
		border: 1px solid #444;
		border-radius: 4px;
		width: max-content;
		max-width: 60vw;
		padding: 2px 12px;
		z-index: 1;
		margin-top: calc(1.5em + 5px);
		box-shadow: 1px 2px 6px 1px rgba(0, 0, 0, 0.15);
		left: -12px;
	}
}