Шаблон:Схема годоса/hodoscheme.css: различия между версиями

Материал из Янтарной ноосферы, свободной интернет-энциклопедии
почему тело это флекс?
очередная версия стиля, смоделированная в голове
Строка 4: Строка 4:
margin: 0;
margin: 0;
}
}
.hsBody > li{
/* структура схемы */
display: inline flex;
}
.hsBody,
.hsBody,
#hsCaption,
#hsCaption,
#hsTitle{
#hsTitle{
width: 100%;
width: 100%;
}
#hsElements{
display: flex;
flex-wrap: wrap;
row-gap: 0.5em;
background: lightgray;
}
}
#hsBeforeStart > ol,
#hsBeforeStart > ol,
Строка 17: Строка 21:
#hsEnd > ol,
#hsEnd > ol,
#hsAfterEnd > ol{
#hsAfterEnd > ol{
display: flex;
display: inline-block;
align-items: center;
height: 6em;
height: 6em;
max-height: 6em;
max-width: 8em;
max-width: 8em;
}
.hsGroup > ol{
display: block;
}
.hsGroupLeft > li,
.hsGroupRight > li{
display: inline-block;
margin: 0 auto;
}
}
#hsStartTop{
#hsStartTop{
Строка 27: Строка 39:
#hsStartBottom{
#hsStartBottom{


}
#hsElements{
display: flex;
flex-wrap: wrap;
height: 100%;
row-gap: 1em;
align-items: center;
}
.hsGroup > ol{
display: flex;
flex-direction: column;
height: 100%;
row-gap: 0.5em;
background: lightgray;
}
.hsGroupLeft > ol,
.hsGroupRight > ol{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100%;
flex-wrap: wrap;
}
.hsGroupLeft li,
.hsGroupRight li{
padding: 1em;
}
.hsGroupLeft,
.hsGroupRight{
flex-grow: 1;
}
}
.budynek{
.budynek{

Версия от 22:36, 30 ноября 2024

.hsBody li,
.hsBody ol{
	list-style-type: none;
	margin: 0;
}
/* структура схемы */
.hsBody,
#hsCaption,
#hsTitle{
	width: 100%;
}
#hsElements{
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.5em;
	background: lightgray;
}
#hsBeforeStart > ol,
#hsStart > ol,
#hsCross > ol,
#hsEnd > ol,
#hsAfterEnd > ol{
	display: inline-block;
	height: 6em;
	max-height: 6em;
	max-width: 8em;
}
.hsGroup > ol{
	display: block;
}
.hsGroupLeft > li,
.hsGroupRight > li{
	display: inline-block;
	margin: 0 auto;
}
#hsStartTop{

}
#hsStartBottom{

}
.budynek{
	background-color: yellow;
}
.park{
	background-color: green;
}
.hydro{
	background-color: blue;
}
.terytorium{
	background-color: gray;
}
.budynek a,
.park a,
.hydro a,
.terytorium a{
	color: black;
	text-decoration: none;
}
#hsEnd{

}
#hsEndTop{

}
#hsEndBottom{

}
#hsAfterEnd{

}