mamweb/galerie/static/css/galerie.css

@charset "utf-8"; /* vynuť utf-8 */

/* Galerie */


/* velká fotka */
/* zmenšování spolu s oknem prohlížeče */
.galerie .obrazek, .titulni_obrazek {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

.predchozi_obrazek{
	position: absolute;
	z-index: 1;
	width: 33%;
	height: 100%;
	left: 0;
	top: 0;
}
.predchozi_obrazek:hover{
	background-image: url("/static/galerie/prvky/predchozi.svg");
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
	background-position: left center;
	background-repeat: no-repeat;
}
.dalsi_obrazek{
	position: absolute;
	z-index: 1;
	width: 33%;
	height: 100%;
	left: 67%;
	top: 0;
}
.dalsi_obrazek:hover{
	background-image: url("/static/galerie/prvky/dalsi.svg");
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
	background-position: right center;
	background-repeat: no-repeat;
}

.galerie {
	position: relative;
	text-align: center;
	margin: 20px auto 0 auto;
}

.galerie h1 {
	text-align: center;
}

.galerie_hlavicka {
	margin: 30px auto 30px auto;
}

.popis {
	margin: 10px 10px 30px 0px;
	text-align: center;
}

#nahoru {
	text-align: center;
}

/* titulní obrázek hlavní galerie soustředění */

.galerie_nahledy{
	/*margin: 1em 0;*/
	margin: auto;
	padding: 10px;
	text-align: center;
	overflow: auto;
}

.galerie_nahledy img {
	margin: 10px;
}

.galerie_nahledy div.navigace {
	display: inline-block;
}

.galerie_nahled, .podgalerie_nahled { /* frame */
	display: block;
	position: relative;
	float: left;
	width: 200px;
	height: 200px;
	text-align: center;
	border: solid;
	border-width: 1px;
	border-radius: 4px;
	border-color: var(--svetla-oranzova);
	background-color: var(--barva-pozadi);
	white-space: nowrap;
	margin: 10px;
	font-weight: bold;
}

.galerie_nahled:hover, .podgalerie_nahled:hover {
	background-color: var(--svetla-oranzova);
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
	color: var(--tmava-oranzova);
}

.vystredeno{ /* helper */
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.galerie_nahled img {
	vertical-align: middle;
	max-height: 180px;
	max-width: 180px;
}

.galerie_nahled div {
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: center;
}

.podgalerie_nahled img {
	margin-top: 20px;
	margin-bottom: 15px;
	max-height: 125px;
	max-width: 167px;
}

.podgalerie_nahled .nazev_galerie {
	position: absolute;
	width: 100%;
	top: 160px;
}


/* Odkazy na předchozí a následující podgalerii */
.galerie_predchozi_nasledujici {
	overflow: auto;
	margin: 10px auto 10px auto;
}

.galerie_predchozi_nasledujici .predchozi {
	float: left;
}

.galerie_predchozi_nasledujici .nasledujici {
	float: right;
}

/* posune kotvu obrázku v galerii o oranžový pruh dolu, aby se pod ním obrázek neschovával */
/* https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header */
.kotva_obrazku {
	position: absolute;
	width: 0;
	height: 55px; /* viz #title */
	margin-top: -55px; /* viz #title */
}
@media(max-width: 860px) {
	.kotva_obrazku {
		height: 3em; /* #FIXME nemám páru, jak zjistit výšku toho elementu */
		margin-top: -3em; /* #FIXME */
	}
}


/* plus a minus tlacitka */
.mam-org-only-galerie {
	background: var(--orgovska-svetla-fialova);
	padding: 10px;
	margin: 10px 10px 10px -20px;
	border: #333 2px dashed;
	float: left;
}

.mam-org-only-galerie a{
	padding: 3px 5px;
	margin: 5px;
	border-radius: 20px;
	background-color: var(--tmava-oranzova);;
	color: var(--barva-pozadi);
	float: left;
}