Vorlage:Gallery3.css: Unterschied zwischen den Versionen

Aktuelle Version vom 4. März 2024, 17:53 Uhr

/*** Beginn allgemeine Formatierungen ***/


.thumb {
  margin-bottom: 0px;
	}

.tright {
  margin: 0px;
	}

.thumbinner {
	max-width:		100%;
  border: 0px solid #c8ccd1;
  padding: 0px;
  background-color: #f8f9fa;
  font-size: 94%;
  text-align: left;
  overflow: hidden;
	}


body:not(.collapsed-menu) .thumbinner {
     color: unset;
}

@media (max-width: 767px) {

    .thumbinner {
      	width:		auto !important; /* override style attribute */
  	}

    .thumbinner .thumbimage {
      	width:		auto;
  	}
}

.flexbox {
	width: 100%;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	margin: 0px;
	}

 .flexelement {
	border: 		1px solid #c8ccd1;
	padding: 		6px;
	background-color: #f8f9fa;
	font-size: 		94%;
	text-align: 	left;
	margin:			3px 3px 3px 0px;
	display: 		flex;
	flex: 			1 0 250px;
	flex-wrap: 		wrap;
	flex-direction:	column;
	align-content:	baseline;
	align-items: 	stretch;
	}

.blank .flexelement {
	border:			none;
	}

.flexelement a.image {
	max-width:		max-content;
	}

.flexelement img {
	width:			100%;
	height:			auto;
	}

.flexelement .AWP.Menu > img {
	width:			20px;
	}


.flex_unten {
	display:		flex;
	justify-content: space-between;
	flex-direction:	column;
	flex-grow:		1;
	}

.flexelement.items_0 {
	max-width:		80%;
	float:			right;
	margin-left:	10px;
	margin-bottom:	10px;
	margin-top:		0px;
	}

.flexelement.items_1 {
	flex-basis: 100%;
	}

.flexelement.items_2 {
	/* flex-basis: 47%; */
	max-width: 49%;
	min-width: 300px;
	flex: 1 auto;
	}

.flexelement.items_3 {
	/* flex-basis: 31%; */
	max-width: 32%;
	min-width: 270px;
	flex: 1 1 450px;
	}

.flexelement.items_2-3 {
	/* flex-basis: 47%; */
	max-width: 66%;
	min-width: 300px;
	flex: 1 auto;
	}

.flexelement.items_4 {
	/* flex-basis: 24%; */
	max-width: 25%;
	min-width: 250px;
	}

.flexelement.items_3-4 {
	/* flex-basis: 47%; */
	max-width: 73%;
	min-width: 300px;
	flex: 1 auto;
	}

.flexelement.items_5 {
	/* flex-basis: 19%; */
	max-width: 20%;
	min-width: 150px;
	}

.flexelement.items_6 {
	width:		16%;
	max-width:		16%;
	}

.flexelement.items_7 {
	width:		13%;
	max-width:		13%;
	}

.flexelement.items_8 {
	width:		12%;
	max-width:		12%;
	}

.flexelement.items_9 {
	width:		11%;
	max-width:		11%;
	}

.flexelement.items_10 {
	width:		9%;
	max-width:		9%;
	}

.flexelement.items_left {
	flex-grow:		2;
	}

 .flexelement.none {
	display:		none;
	}

.whitecell {
	border:			1px solid white;
	background:		white;
	text-align:		left;
	}

/* Ende allgemeine Formatierungen */


/*** Beginn Formatierungen für Mobil-Geräte ***/


/*** Breakpoint lg ***/
@media (max-width: 992px) {




} /*** Ende Formatierungen für Breakpoint lg ***/




/***  Formatierungen für Breakpoint md ***/
@media (max-width: 768px) {

.flexelement.items_0 {
	max-width:		100%;
  float: right;
  margin-left: 10px;
  margin-bottom:10px;
  margin-top: 0px;
	}

.flexelement.items_1 {
	flex-basis: 100%;
	}

.flexelement.items_2 {
	flex-basis: 100%;
	}

.flexelement.items_3 {
	flex-basis: 100%
	/* max-width: 32%;   */
	/* min-width: 270px; */
	/* flex: 1 1 450px;  */
	}

.flexelement.items_4 {
	/* flex-basis: 24%; */
	max-width: 49%;
	min-width: 250px;
	}

.flexelement.items_5 {
	/* flex-basis: 19%; */
	max-width: 49%;
	min-width: 250px;
	}

.flexelement.items_6 {
	width:		33%;
	max-width:		33%;
	}

.flexelement.items_7 {
	width:		25%;
	max-width:		25%;
	}

.flexelement.items_8 {
	width:		25%;
	max-width:		25%;
	}

.flexelement.items_9 {
	width:		25%;
	max-width:		25%;
	}

.flexelement.items_10 {
	width:		25%;
	max-width:		25%;
	}


} /*** Ende Formatierungen für Breakpoint md ***/




/*** Formatierungen für Breakpoint sm ***/
@media (max-width: 576px) {


} /*** Ende Formatierungen für Mobil-Geräte ***/