MediaWiki:Common.css: Różnice pomiędzy wersjami
Strona MediaWiki
Inne akcje
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 {…” |
Nie podano opisu zmian |
||
| Linia 1: | Linia 1: | ||
.ubp-tile | .ubp-tile-container { | ||
position: relative; | |||
width: 100%; | width: 100%; | ||
height: | 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 | .ubp-tile-content { | ||
position: absolute; | |||
bottom: 0; left: 0; width: 100%; | |||
background: linear-gradient(transparent, rgba(0,0,0,0.9)); /* Ciemny gradient od dołu */ | |||
padding: 20px 15px 15px; | |||
box-sizing: border-box; | |||
transform: translateY(calc(100% - 60px)); /* Ukrywa treść, zostawia sam tytuł (60px) */ | |||
transition: transform 0.4s ease-in-out; | |||
transition: | |||
} | } | ||
.ubp-tile | .ubp-tile-container:hover .ubp-tile-content { | ||
transform: translateY(0); /* Wysuwa tekst po najechaniu */ | |||
background: rgba(0,0,0,0.85); /* Ciemniejsze tło ułatwiające czytanie */ | |||
} | } | ||
.ubp-tile | .ubp-tile-title { | ||
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); | |||
} | } | ||
.ubp-tile-desc { | |||
.ubp- | color: #ddd; | ||
font-size: 0.9em; | |||
line-height: 1.4; | |||
margin-bottom: 10px; | |||
opacity: 0; | opacity: 0; | ||
transition: opacity 0.3s ease; | |||
transition: | transition-delay: 0.1s; | ||
} | } | ||
.ubp-tile-container:hover .ubp-tile-desc { | |||
.ubp-tile | opacity: 1; /* Pojawia się płynnie z małym opóźnieniem */ | ||
opacity: 1; | |||
} | } | ||
.ubp-tile-link { | |||
. | color: #66ccff !important; | ||
font-weight: bold; | |||
text-decoration: none; | |||
font-size: 0.9em; | |||
opacity: 0; | |||
transition: opacity 0.3s ease; | |||
transition-delay: 0.2s; | |||
} | } | ||
. | |||
.ubp-tile-container:hover .ubp-tile-link { | |||
opacity: 1; | |||
} | } | ||
Aktualna wersja z 12 paź 2026, 21:34
.ubp-tile-container {
position: relative;
width: 100%;
height: 180px; /* Stała wysokość kafelka */
border-radius: 6px;
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-content {
position: absolute;
bottom: 0; left: 0; width: 100%;
background: linear-gradient(transparent, rgba(0,0,0,0.9)); /* Ciemny gradient od dołu */
padding: 20px 15px 15px;
box-sizing: border-box;
transform: translateY(calc(100% - 60px)); /* Ukrywa treść, zostawia sam tytuł (60px) */
transition: transform 0.4s ease-in-out;
}
.ubp-tile-container:hover .ubp-tile-content {
transform: translateY(0); /* Wysuwa tekst po najechaniu */
background: rgba(0,0,0,0.85); /* Ciemniejsze tło ułatwiające czytanie */
}
.ubp-tile-title {
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);
}
.ubp-tile-desc {
color: #ddd;
font-size: 0.9em;
line-height: 1.4;
margin-bottom: 10px;
opacity: 0;
transition: opacity 0.3s ease;
transition-delay: 0.1s;
}
.ubp-tile-container:hover .ubp-tile-desc {
opacity: 1; /* Pojawia się płynnie z małym opóźnieniem */
}
.ubp-tile-link {
color: #66ccff !important;
font-weight: bold;
text-decoration: none;
font-size: 0.9em;
opacity: 0;
transition: opacity 0.3s ease;
transition-delay: 0.2s;
}
.ubp-tile-container:hover .ubp-tile-link {
opacity: 1;
}