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

Материал из Янтарной ноосферы, доступной интернет-энциклопедии
стили под новую схему
изменил поведение элементов группы, шоб по центру были
 
(не показаны 52 промежуточные версии этого же участника)
Строка 1: Строка 1:
#hsBody{
.hsBody li,
.hsBody ol{
list-style-type: none;
margin: 0;
}
#hsTitle{
font-size: x-large;
}
/* структура схемы */
.hsBody,
#hsCaption,
#hsTitle{
width: 100%;
}
.hsElements{
display: flex;
display: flex;
flex-wrap: wrap;
row-gap: 0.5em;
background: sienna;
font-size: small;
line-height: 1;
}
}
#hsBody li{
.hsGroup{
list-style-type: none;
background: lightgray;
border-width: 1px 0 1px;
border-style: solid;
border-color: black;
}
.hsElements > li{
display: inline-block;
height: 9em;
flex-grow: 1;
}
}
#hsBody > li{
li#hsStart,
li.hsCross,
li#hsEnd{
display: inline flex;
display: inline flex;
align-items: center;
width: 6em;
justify-content: center;
text-align: center;
background-color: lightgray;
}
}
#hsBeforeStart{
li#hsBeforeStart,
 
li#hsAfterEnd{
background-color: sienna;
}
}
#hsStart{
.hsGroup > ol{
 
display: flex;
height: 4em;
justify-content: space-around;
}
}
#hsStartTop{
ol.hsGroupLeft{
 
margin-bottom: 1em;
}
}
#hsStartBottom{
.hsGroupLeft li.budynek,
 
.hsGroupLeft li.hydro,
.hsGroupLeft li.park,
.hsGroupLeft li.terytorium{
border-width: 0 1px 2px 1px;
border-style: solid;
border-color: black;
}
}
#hsElements{
ol.hsGroupRight{
display: flex;
margin-top: 0.5em;
}
}
.hsGroup{
.hsGroupRight li.budynek,
flex-direction: row;
.hsGroupRight li.hydro,
.hsGroupRight li.park,
.hsGroupRight li.terytorium{
border-width: 2px 1px 0 1px;
border-style: solid;
border-color: black;
}
}
.hsGroup ol{
.hsGroupLeft > li,
flex-direction: column;
.hsGroupRight > li{
display: flex;
align-items: center;
justify-content: center;
background-color: sienna;
height: 100%;
max-width: 11em;
text-align: center;
flex: 1 1 auto;
}
}
.hsGroupLeft{
#hsStartTop{


}
}
.hsGroupLeft li{
#hsStartBottom{


}
}
.budynek{
li.budynek{
background-color: yellow;
background-color: yellow;
}
}
.park{
li.park{
background-color: green;
background-color: green;
}
}
.hydro{
li.hydro{
background-color: blue;
background-color: blue;
}
}
.terytorium{
li.terytorium{
background-color: gray;
background-color: gray;
}
li.hodosturn{
background-color: lightgray;
border-width: 0;
}
.hsBody a,
.hsBody a:hover{
border-width: 0;
}
.hsElements a{
color: black;
display: inline-block;
margin: 0 auto;
}
}
#hsEnd{
#hsEnd{

Текущая версия от 20:46, 9 декабря 2024

.hsBody li,
.hsBody ol{
	list-style-type: none;
	margin: 0;
}
#hsTitle{
	font-size: x-large;
}
/* структура схемы */
.hsBody,
#hsCaption,
#hsTitle{
	width: 100%;
}
.hsElements{
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.5em;
	background: sienna;
	font-size: small;
	line-height: 1;
}
.hsGroup{
	background: lightgray;
	border-width: 1px 0 1px;
	border-style: solid;
	border-color: black;
}
.hsElements > li{
	display: inline-block;
	height: 9em;
	flex-grow: 1;
}
li#hsStart,
li.hsCross,
li#hsEnd{
	display: inline flex;
	align-items: center;
	width: 6em;
	justify-content: center;
	text-align: center;
	background-color: lightgray;
}
li#hsBeforeStart,
li#hsAfterEnd{
	background-color: sienna;
}
.hsGroup > ol{
	display: flex;
	height: 4em;
	justify-content: space-around;
}
ol.hsGroupLeft{
	margin-bottom: 1em;
}
.hsGroupLeft li.budynek,
.hsGroupLeft li.hydro,
.hsGroupLeft li.park,
.hsGroupLeft li.terytorium{
	border-width: 0 1px 2px 1px;
	border-style: solid;
	border-color: black;
}
ol.hsGroupRight{
	margin-top: 0.5em;
}
.hsGroupRight li.budynek,
.hsGroupRight li.hydro,
.hsGroupRight li.park,
.hsGroupRight li.terytorium{
	border-width: 2px 1px 0 1px;
	border-style: solid;
	border-color: black;
}
.hsGroupLeft > li,
.hsGroupRight > li{
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: sienna;
	height: 100%;
	max-width: 11em;
	text-align: center;
	flex: 1 1 auto;
}
#hsStartTop{

}
#hsStartBottom{

}
li.budynek{
	background-color: yellow;
}
li.park{
	background-color: green;
}
li.hydro{
	background-color: blue;
}
li.terytorium{
	background-color: gray;
}
li.hodosturn{
	background-color: lightgray;
	border-width: 0;
}
.hsBody a,
.hsBody a:hover{
	border-width: 0;
}
.hsElements a{
	color: black;
	display: inline-block;
	margin: 0 auto;
}
#hsEnd{

}
#hsEndTop{

}
#hsEndBottom{

}
#hsAfterEnd{

}