Шаблон:Схема годоса/hodoscheme.css: различия между версиями
пока просто упомянул классы и иды, которые используются |
изменил поведение элементов группы, шоб по центру были |
||
(не показано 56 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
.hsBody li, | |||
.hsBody ol{ | |||
list-style-type: none; | list-style-type: none; | ||
margin: 0; | |||
} | } | ||
# | #hsTitle{ | ||
font-size: x-large; | |||
} | |||
/* структура схемы */ | |||
.hsBody, | |||
#hsCaption, | |||
#hsTitle{ | |||
width: 100%; | width: 100%; | ||
} | } | ||
#hsBeforeStart{ | .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{ | #hsStartTop{ | ||
Строка 17: | Строка 90: | ||
} | } | ||
li.budynek{ | |||
.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{
}