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

Материал из Янтарной ноосферы, доступной интернет-энциклопедии
на самом деле флекс просто чуть более красивые костыли, чем было до этого
изменил поведение элементов группы, шоб по центру были
 
(не показано 17 промежуточных версий этого же участника)
Строка 3: Строка 3:
list-style-type: none;
list-style-type: none;
margin: 0;
margin: 0;
}
#hsTitle{
font-size: x-large;
}
}
/* структура схемы */
/* структура схемы */
Строка 14: Строка 17:
flex-wrap: wrap;
flex-wrap: wrap;
row-gap: 0.5em;
row-gap: 0.5em;
background: sienna;
font-size: small;
line-height: 1;
}
.hsGroup{
background: lightgray;
background: lightgray;
font-size: small;
border-width: 1px 0 1px;
border-style: solid;
border-color: black;
}
}
.hsElements > li{
.hsElements > li{
Строка 22: Строка 32:
flex-grow: 1;
flex-grow: 1;
}
}
li#hsBeforeStart,
li#hsStart,
li#hsStart,
li.hsCross,
li.hsCross,
li#hsEnd,
li#hsEnd{
li#hsAfterEnd{
display: inline flex;
display: inline flex;
align-items: center;
align-items: center;
width: 6em;
width: 6em;
justify-content: center;
text-align: center;
background-color: lightgray;
}
li#hsBeforeStart,
li#hsAfterEnd{
background-color: sienna;
}
}
.hsGroup > ol{
.hsGroup > ol{
display: flex;
display: flex;
height: 50%;
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,
.hsGroupLeft > li,
.hsGroupRight > li{
.hsGroupRight > li{
display: block;
display: flex;
float: left;
align-items: center;
margin: 0 auto;
justify-content: center;
background-color: sienna;
height: 100%;
height: 100%;
max-width: 11em;
max-width: 11em;
text-align: center;
text-align: center;
flex: 1 0 auto;
flex: 1 1 auto;
}
}
#hsStartTop{
#hsStartTop{
Строка 51: Строка 90:


}
}
.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{
.hsElements a{
color: black;
color: black;
text-decoration: none;
display: inline-block;
display: inline-block;
margin: 0 auto;
margin: 0 auto;

Текущая версия от 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{

}