Шаблон:Tabs/styles.css: различия между версиями
Материал из YastreWiki
Дополнительные действия
Нет описания правки |
Нет описания правки Метка: ручная отмена |
||
| (не показано 10 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
.tab-container { | .tab-container { | ||
max-height: 600px; | max-height: 600px; | ||
height: auto; | |||
max-width: 400px; | |||
width: 300px; | |||
margin: 1em 0; | margin: 1em 0; | ||
background: #12141A; | background: #12141A; | ||
border: 1px solid #3A3D4A; | border: 1px solid #3A3D4A; | ||
border-radius: | border-radius: 0.25rem; | ||
overflow: hidden; | |||
} | } | ||
.tabs-nav { | .tabs-nav { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | |||
background: #1A1D26; | background: #1A1D26; | ||
} | } | ||
| Строка 19: | Строка 22: | ||
color: #b0b0b0; | color: #b0b0b0; | ||
transition: 0.2s; | transition: 0.2s; | ||
border- | border-bottom: 2px solid #3A3D4A; | ||
white-space: nowrap; | white-space: nowrap; | ||
flex-grow: 1; | |||
text-align: center; | |||
} | } | ||
| Строка 31: | Строка 36: | ||
background: #12141A; | background: #12141A; | ||
color: #fff; | color: #fff; | ||
border-bottom-color: #2962ff; | border-bottom-color: #2962ff; | ||
} | |||
.tab-link:last-child { | |||
border-right: none; | |||
} | } | ||
Текущая версия от 06:59, 13 апреля 2026
.tab-container {
max-height: 600px;
height: auto;
max-width: 400px;
width: 300px;
margin: 1em 0;
background: #12141A;
border: 1px solid #3A3D4A;
border-radius: 0.25rem;
overflow: hidden;
}
.tabs-nav {
display: flex;
flex-wrap: wrap;
background: #1A1D26;
}
.tab-link {
padding: 10px 20px;
cursor: pointer;
color: #b0b0b0;
transition: 0.2s;
border-bottom: 2px solid #3A3D4A;
white-space: nowrap;
flex-grow: 1;
text-align: center;
}
.tab-link:hover {
background: #222631;
color: #fff;
}
.tab-link.active {
background: #12141A;
color: #fff;
border-bottom-color: #2962ff;
}
.tab-link:last-child {
border-right: none;
}
.tab-content {
padding: 15px;
color: #e0e0e0;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}