Dantes (обсуждение | вклад) Нет описания правки |
Dantes (обсуждение | вклад) Нет описания правки |
||
| Строка 1: | Строка 1: | ||
:root { | :root { | ||
--bg-secondary: #292929; | --bg-secondary: #292929; | ||
| Строка 8: | Строка 7: | ||
} | } | ||
/* | /* Контейнер всех таблиц */ | ||
.JobsTableContainer { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 20px; | |||
font-size: 12px; | |||
} | |||
/* Блок фракции/роли */ | |||
.JobsTable { | .JobsTable { | ||
background-color: var(--bg-secondary); | background-color: var(--bg-secondary); | ||
border: 2px solid var(--border-color); | border: 2px solid var(--border-color); | ||
border-radius: var(--radius); | border-radius: var(--radius); | ||
overflow: hidden; | overflow: hidden; | ||
transition: transform var(--transition), box-shadow var(--transition); | transition: transform var(--transition), box-shadow var(--transition); | ||
width: 300px; | |||
} | } | ||
.JobsTable:hover { | .JobsTable:hover { | ||
transform: scale(1.02); | transform: scale(1.02); | ||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); | box-shadow: 0 4px 12px rgba(0,0,0,0.6); | ||
} | } | ||
/* Заголовок | /* Заголовок блока */ | ||
.JobsTableHeadImg img { | .JobsTableHeadImg img { | ||
width: 48px; | width: 48px; | ||
| Строка 30: | Строка 37: | ||
} | } | ||
.JobsTableHeadLink { | .JobsTableHeadLink { | ||
font-size: | font-size: 14px; | ||
font-weight: bold; | font-weight: bold; | ||
color: var(--accent-color); | color: var(--accent-color); | ||
margin-left: 10px; | margin-left: 10px; | ||
cursor: pointer; | |||
} | } | ||
/* Collapsible */ | /* Collapsible-контейнер */ | ||
.mw-collapsible { | .mw-collapsible { | ||
max-height: 0; | max-height: 0; | ||
opacity: 0; | opacity: 0; | ||
overflow: hidden; | overflow: hidden; | ||
transition: max-height var(--transition), opacity var(--transition); | |||
} | } | ||
.mw-collapsible.open { | .mw-collapsible.open { | ||
max-height: | max-height: 800px; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
| Строка 52: | Строка 60: | ||
list-style: none; | list-style: none; | ||
padding: 10px 20px; | padding: 10px 20px; | ||
margin: 0; | |||
} | } | ||
.JobsTableList li { | .JobsTableList li { | ||
| Строка 57: | Строка 66: | ||
color: #ddd; | color: #ddd; | ||
position: relative; | position: relative; | ||
padding-left: | padding-left: 12px; | ||
} | } | ||
.JobsTableList li::before { | .JobsTableList li::before { | ||
| Строка 69: | Строка 78: | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.JobsTable { | .JobsTable { | ||
width: 100%; | |||
} | } | ||
} | } | ||
Версия от 17:14, 8 мая 2025
:root {
--bg-secondary: #292929;
--accent-color: #ffcc00;
--border-color: #555;
--transition: 0.3s ease;
--radius: 8px;
}
/* Контейнер всех таблиц */
.JobsTableContainer {
display: flex;
flex-wrap: wrap;
gap: 20px;
font-size: 12px;
}
/* Блок фракции/роли */
.JobsTable {
background-color: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
width: 300px;
}
.JobsTable:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
/* Заголовок блока */
.JobsTableHeadImg img {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 50%;
}
.JobsTableHeadLink {
font-size: 14px;
font-weight: bold;
color: var(--accent-color);
margin-left: 10px;
cursor: pointer;
}
/* Collapsible-контейнер */
.mw-collapsible {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height var(--transition), opacity var(--transition);
}
.mw-collapsible.open {
max-height: 800px;
opacity: 1;
}
/* Список внутри */
.JobsTableList {
list-style: none;
padding: 10px 20px;
margin: 0;
}
.JobsTableList li {
margin: 5px 0;
color: #ddd;
position: relative;
padding-left: 12px;
}
.JobsTableList li::before {
content: "•";
position: absolute;
left: 0;
color: var(--accent-color);
}
/* Адаптив */
@media (max-width: 768px) {
.JobsTable {
width: 100%;
}
}