Шаблон:RulesBox: различия между версиями
Материал из Space Station 14 Вики
|
|
| (не показаны 3 промежуточные версии этого же участника) |
| Строка 1: |
Строка 1: |
| <div class="rules__block" style="margin: {{{margin|20px 5px}}};border-left: {{{border-size|5px}}} solid {{{border-color|#2B30BD}}};padding: {{{padding|12px}}};color: {{{color|lightgrey}}};> | | <div class="rules__block" style="margin:{{{margin|20px 5px}}};border-left:{{{border-size|5px}}} solid {{{border-color|#404053}}};padding:{{{padding|12px}}};color:{{{color|lightgrey}}};> |
| <div class="rules__container"> | | <div class="rules__container"> |
| {{#if: {{{title|}}} | | | {{#if: {{{title|}}} | |
| Строка 5: |
Строка 5: |
| }} | | }} |
| {{#if: {{{content|}}} | | | {{#if: {{{content|}}} | |
| <div class="rules__content" style="margin-top: {{{margin-top-content|10px}}};>{{{content}}}</div> | | <div class="rules__content" style="margin-top:{{{margin-top-content|10px}}};>{{{content}}}</div> |
| }} | | }} |
| </div> | | </div> |
| Строка 32: |
Строка 32: |
| } | | } |
| .rules__block li { | | .rules__block li { |
| margin-top: 12px; | | margin-top: {{{margin-li|8px}}}; |
| } | | } |
| .rules__container { | | .rules__container { |
| Строка 62: |
Строка 62: |
| box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); | | box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); |
| transition: background 0.3s ease; | | transition: background 0.3s ease; |
| }
| |
| .rules__container--addition:hover {
| |
| background: #373743;
| |
| } | | } |
| .rules__content--addition { | | .rules__content--addition { |
Текущая версия от 11:23, 7 сентября 2024
.rules__block {
position: relative;
display: flex;
justify-content: space-between;
text-align: left;
background-color: #282831;
border-radius: 0.3em;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.rules__block:hover {
background: #2b2b35;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.rules__block li {
margin-top: 8px;
}
.rules__container {
}
.rules__title {
font-size: 1.3em;
}
.rules__content {
}
.rules__title--addition {
font-size: 1em;
display: flex;
align-items: center;
}
.rules__container--addition {
position: absolute;
display: flex;
flex-direction: column;
max-height: 90%;
top: 0;
right: 0;
width: min(35%, 300px);
padding: 12px;
border-radius: 0.3em;
background: #34343f;
border-left: 4px solid #434353;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease;
}
.rules__content--addition {
flex-grow: 1;
overflow-y: auto;
margin-top: 10px;
}
.mw-collapsible-toggle {
position: absolute;
top: 12px;
right: 12px;
}
/* Адаптивные стили для мобильных устройств */
@media (max-width: 700px) {
.rules__block {
flex-direction: column;
margin: 20px 0;
}
.rules__container--addition {
position: static;
display: block;
box-sizing: border-box;
width: 100%;
border-left: none;
box-shadow: none;
margin-top: 20px;
}
.rules__container--addition:hover {
background: #33333b;
}
.rules__block:hover {
background: #27272e;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.15);
}
.mw-collapsible-toggle {
position: static;
top: 12px;
right: 12px;
}
}
