ThePjotyr o 21:34, 12 paź 2026

2026-10-12T21:34:36Z

← poprzednia wersja		Wersja z 12 paź 2026, 21:34
Linia 1:		Linia 1:
	.ubp-tile ~~details~~ {		.ubp-tile-container {
			position: relative;
	width: 100%;		width: 100%;
	height: ~~100%~~;		height: 180px; /* Stała wysokość kafelka */
	border-radius: 6px;		border-radius: 6px;
	overflow: hidden;		overflow: hidden;
			border: 1px solid var(--border-color-base);
			box-shadow: 0 4px 6px rgba(0,0,0,0.3);
			}

			.ubp-tile-bg {
			position: absolute;
			top: 0; left: 0; width: 100%; height: 100%;
			background-size: cover;
			background-position: center;
			transition: transform 0.5s ease;
			}

			.ubp-tile-container:hover .ubp-tile-bg {
			transform: scale(1.1); /* Delikatny zoom obrazka przy najechaniu */
	}		}

	.ubp-tile ~~summary~~ {		.ubp-tile-content {
	~~font-weight~~: ~~bold~~;		position: absolute;
	~~font-size~~: ~~1.4em~~;		bottom: 0; left: 0; width: 100%;
	~~cursor~~: ~~pointer~~;		background: linear-gradient(transparent, rgba(0,0,0,0.9)); /* Ciemny gradient od dołu */
	~~list-style~~: ~~none~~;		padding: 20px 15px 15px;
	~~padding~~: ~~20px;~~		box-sizing: border-box;
	~~background~~-~~color:~~ rgba(0, 0, 0, 0.6);		transform: translateY(calc(100% - 60px)); /* Ukrywa treść, zostawia sam tytuł (60px) */
	~~color~~: ~~white !important~~;		transition: transform 0.4s ease-in-out;
	~~text~~-~~shadow~~: ~~2px 2px 4px rgba~~(0,~~0,0,0.8~~);
	transition: ~~background-color~~ 0.3s ease;
	~~border~~-~~radius: 6px~~;
	}		}

	.ubp-tile ~~summary:~~:-~~webkit-details~~-~~marker~~ {		.ubp-tile-container:hover .ubp-tile-content {
	~~display~~: ~~none~~;		transform: translateY(0); /* Wysuwa tekst po najechaniu */
			background: rgba(0,0,0,0.85); /* Ciemniejsze tło ułatwiające czytanie */
	}		}

	.ubp-tile ~~summary~~:~~hover {~~		.ubp-tile-title {
	~~background~~-~~color~~: rgba(0, 0, 0, 0.4);		margin: 0 0 10px 0;
			color: #fff;
			font-size: 1.3em;
			font-weight: bold;
			text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
	}		}

	~~/* Opened tile content */~~		.ubp-tile-desc {
	.ubp-~~tile .~~tile-~~content~~ {		color: #ddd;
	~~padding~~: ~~15px~~;		font-size: 0.9em;
	~~background~~-~~color~~: ~~var(~~-~~-background-color-base)~~;		line-height: 1.4;
	~~border~~-~~top~~: ~~1px solid var(--border-color-quiet)~~;		margin-bottom: 10px;
	opacity: 0;		opacity: 0;
	~~transform~~: ~~translateY(-10px)~~;		transition: opacity 0.3s ease;
	transition: ~~all~~ 0.~~4s ease-in-out~~;		transition-delay: 0.1s;
	}		}

	~~/* Animation activation when details is opened */~~		.ubp-tile-container:hover .ubp-tile-desc {
	.ubp-tile ~~details[open]~~ .tile-~~content~~ {		opacity: 1; /* Pojawia się płynnie z małym opóźnieniem */
	opacity: 1;
	~~transform: translateY(0);~~
	}		}

	~~/* Responsive iframe for YouTube */~~		.ubp-tile-link {
	.~~video~~-~~container~~ {		color: #66ccff !important;
	~~position~~: ~~relative~~;		font-weight: bold;
	~~padding~~-~~bottom~~: ~~56.25%~~;		text-decoration: none;
	~~height~~: 0;		font-size: 0.9em;
	~~overflow~~: ~~hidden~~;		opacity: 0;
	~~max-width~~: ~~100%~~;		transition: opacity 0.3s ease;
	~~border~~-~~radius~~: ~~8px~~;		transition-delay: 0.2s;
	}		}
	.~~video~~-container ~~iframe,~~ .~~video~~-~~container object, .video~~-~~container embed~~ {
	~~position: absolute;~~		.ubp-tile-container:hover .ubp-tile-link {
	~~top: 0;~~		opacity: 1;
	~~left: 0;~~
	~~width: 100%;~~
	~~height~~: ~~100%~~;
	}		}

ThePjotyr: Utworzono nową stronę „.ubp-tile details { width: 100%; height: 100%; border-radius: 6px; overflow: hidden; } .ubp-tile summary { font-weight: bold; font-size: 1.4em; cursor: pointer; list-style: none; padding: 20px; background-color: rgba(0, 0, 0, 0.6); color: white !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); transition: background-color 0.3s ease; border-radius: 6px; } .ubp-tile summary::-webkit-details-marker {…”

2026-10-12T21:28:21Z

Utworzono nową stronę „.ubp-tile details { width: 100%; height: 100%; border-radius: 6px; overflow: hidden; } .ubp-tile summary { font-weight: bold; font-size: 1.4em; cursor: pointer; list-style: none; padding: 20px; background-color: rgba(0, 0, 0, 0.6); color: white !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); transition: background-color 0.3s ease; border-radius: 6px; } .ubp-tile summary::-webkit-details-marker {…”

Nowa strona

.ubp-tile details {
width: 100%;
height: 100%;
border-radius: 6px;
overflow: hidden;
}

.ubp-tile summary {
font-weight: bold;
font-size: 1.4em;
cursor: pointer;
list-style: none;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
color: white !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
transition: background-color 0.3s ease;
border-radius: 6px;
}

.ubp-tile summary::-webkit-details-marker {
display: none;
}

.ubp-tile summary:hover {
background-color: rgba(0, 0, 0, 0.4);
}

/* Opened tile content */
.ubp-tile .tile-content {
padding: 15px;
background-color: var(--background-color-base);
border-top: 1px solid var(--border-color-quiet);
opacity: 0;
transform: translateY(-10px);
transition: all 0.4s ease-in-out;
}

/* Animation activation when details is opened */
.ubp-tile details[open] .tile-content {
opacity: 1;
transform: translateY(0);
}

/* Responsive iframe for YouTube */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
border-radius: 8px;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

MediaWiki:Common.css - Historia wersji

ThePjotyr o 21:34, 12 paź 2026