Шаблон:FlexBox/styles.css: различия между версиями
Aylong (обсуждение | вклад) Новая страница: «.flexbox-container { position: relative; display: flex; flex: 1 0 30rem; flex-direction: column; border-radius: var(--border-radius-medium); } .flexbox-container .tgui-background:before { border-radius: var(--border-radius-medium); } .flexbox-title { display: flex; align-items: center; min-height: 1.75rem; font-size: 1.1rem; font-weight: bold; border-bottom: 2px solid; border-radius: var(--border-radius-medium) var(--border-radius...» |
Aylong (обсуждение | вклад) Нет описания правки |
||
(не показано 7 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
.flexbox-container { | .flexbox-container { | ||
display: flex; | |||
flex: 1 0 30rem; | |||
flex-direction: column; | |||
background-color: var(--tmp-10); | |||
border-radius: var(--border-radius-medium); | |||
box-shadow: var(--template-shadow--small) -1px var(--tmp-50); | |||
} | } | ||
.flexbox-container . | .flexbox-container:before { | ||
border-radius: var(--border-radius-medium); | |||
} | |||
@media (max-width: 719px) { | |||
.flexbox-container { | |||
flex: 1 0 100%; | |||
} | |||
} | |||
.flexbox-header { | |||
display: flex; | |||
align-items: center; | |||
min-height: 1.75rem; | |||
font-weight: bold; | |||
font-size: 1.1rem; | |||
background-color: var(--tmp-25); | |||
border-bottom: 2px solid var(--tmp-100); | |||
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; | |||
} | |||
.flexbox-header hr { | |||
display: none; | |||
} | } | ||
.flexbox-title { | .flexbox-title { | ||
padding-top: 2px; | |||
margin: 0 0.5em; | |||
font-size: 0.85em; | |||
line-height: 1.1rem; | |||
} | } | ||
.flexbox- | .flexbox-subtitle { | ||
display: inline-flex; | |||
justify-content: center; | |||
align-items: center; | |||
height: 100%; | |||
min-width: 2.5rem; | |||
padding: 0 0.25em; | |||
background-color: var(--tmp-100); | |||
color: var(--color-white); | |||
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; | |||
} | } | ||
.flexbox-subtitle { | .flexbox-subtitle.alone { | ||
width: 100%; | |||
margin: 0; | |||
padding: 2px 0.25em 0; | |||
text-align: center; | |||
line-height: 1.1rem; | |||
font-size: 1.1em; | |||
} | } | ||
.flexbox-content { | .flexbox-content { | ||
flex: 1; | |||
display: flex; | |||
} | } | ||
.flexbox-image { | .flexbox-image { | ||
overflow: hidden; | |||
align-content: center; | |||
border: 2px solid var(--tmp-100); | |||
border-top: 0; | |||
border-bottom-left-radius: var(--border-radius-medium); | |||
} | } | ||
.flexbox- | .flexbox-text { | ||
border: solid var(--tmp-25); | |||
border-width: 0px 1px 1px 0; | |||
border-bottom-right-radius: var(--border-radius-medium); | |||
} | } | ||
.flexbox-desc { | .flexbox-desc { | ||
flex: 1; | |||
padding: 0.33rem; | |||
line-height: 1.125rem; | |||
} | |||
.flexbox-text, | |||
.flexbox-desc{ | |||
flex: 1; | |||
display: flex; | |||
flex-direction: column; | |||
} | } |
Текущая версия от 10:05, 2 июня 2025
.flexbox-container {
display: flex;
flex: 1 0 30rem;
flex-direction: column;
background-color: var(--tmp-10);
border-radius: var(--border-radius-medium);
box-shadow: var(--template-shadow--small) -1px var(--tmp-50);
}
.flexbox-container:before {
border-radius: var(--border-radius-medium);
}
@media (max-width: 719px) {
.flexbox-container {
flex: 1 0 100%;
}
}
.flexbox-header {
display: flex;
align-items: center;
min-height: 1.75rem;
font-weight: bold;
font-size: 1.1rem;
background-color: var(--tmp-25);
border-bottom: 2px solid var(--tmp-100);
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}
.flexbox-header hr {
display: none;
}
.flexbox-title {
padding-top: 2px;
margin: 0 0.5em;
font-size: 0.85em;
line-height: 1.1rem;
}
.flexbox-subtitle {
display: inline-flex;
justify-content: center;
align-items: center;
height: 100%;
min-width: 2.5rem;
padding: 0 0.25em;
background-color: var(--tmp-100);
color: var(--color-white);
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}
.flexbox-subtitle.alone {
width: 100%;
margin: 0;
padding: 2px 0.25em 0;
text-align: center;
line-height: 1.1rem;
font-size: 1.1em;
}
.flexbox-content {
flex: 1;
display: flex;
}
.flexbox-image {
overflow: hidden;
align-content: center;
border: 2px solid var(--tmp-100);
border-top: 0;
border-bottom-left-radius: var(--border-radius-medium);
}
.flexbox-text {
border: solid var(--tmp-25);
border-width: 0px 1px 1px 0;
border-bottom-right-radius: var(--border-radius-medium);
}
.flexbox-desc {
flex: 1;
padding: 0.33rem;
line-height: 1.125rem;
}
.flexbox-text,
.flexbox-desc{
flex: 1;
display: flex;
flex-direction: column;
}