Шаблон:Tabs/styles.css: различия между версиями
Материал из YastreWiki
Дополнительные действия
Нет описания правки Метка: отменено |
Нет описания правки Метка: ручная отмена |
||
| Строка 1: | Строка 1: | ||
.tab-container { | .tab-container { | ||
max-height: 600px; | max-height: 600px; | ||
height: auto; | |||
max-width: 400px; | max-width: 400px; | ||
width: 300px; | |||
margin: 1em 0; | |||
background: #12141A; | |||
border: 1px solid #3A3D4A; | |||
border-radius: 0.25rem; | |||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.tabs-nav { | .tabs-nav { | ||
display: flex; | |||
flex-wrap: wrap; | |||
background: #1A1D26; | |||
} | } | ||
.tab-link { | .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 | .tab-link:hover { | ||
background: #222631; | |||
color: #fff; | |||
} | } | ||
.tab-link | .tab-link.active { | ||
background: #12141A; | |||
color: #fff; | |||
border-bottom-color: #2962ff; | |||
} | } | ||
.tab-link | .tab-link:last-child { | ||
border-right: none; | |||
} | } | ||
.tab-content { | .tab-content { | ||
padding: 15px; | |||
color: #e0e0e0; | |||
} | } | ||
.tab-pane { | .tab-pane { | ||
display: none; | |||
} | } | ||
.tab-pane.active { | .tab-pane.active { | ||
display: block; | |||
} | } | ||
Текущая версия от 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;
}