Шаблон:Modern Table: различия между версиями

Материал из Space Station 14 Вики
(Новая страница: «<includeonly> {| class="wikitable modern-table" style="float: {{{float|right}}}; width: {{{width|450px}}}; margin-left: {{{margin-left|1em}}};" ! colspan="2" class="modern-table-header" | {{{title|FAQ (Частые вопросы)}}} |- ! class="modern-table-question" | {{{q1|Вопрос 1}}} | class="modern-table-answer" | {{{a1|Ответ 1}}} |- ! class="modern-table-question" | {{{q2|Вопрос 2}}} | class="modern-table-answer" | {{{a2|Ответ 2}}...»)
 
Нет описания правки
Строка 1: Строка 1:
<includeonly>
<includeonly>
<div class="modern-table-container">
<div class="table-grid">
{| class="wikitable modern-table" style="float: {{{float|right}}}; width: {{{width|450px}}}; margin-left: {{{margin-left|1em}}};"
{| class="wikitable modern-table" style="float: {{{float|right}}}; width: {{{width|450px}}}; margin-left: {{{margin-left|1em}}};"
! colspan="2" class="modern-table-header" | {{{title|FAQ (Частые вопросы)}}}
! colspan="2" class="modern-table-header" |  
<div class="header-gradient">
    <span class="header-text">{{{title|FAQ (Частые вопросы)}}}</span>
    <div class="header-line"></div>
</div>
|-
|-
! class="modern-table-question" | {{{q1|Вопрос 1}}}
! class="modern-table-question" | {{{q1|Вопрос 1}}}
Строка 11: Строка 17:
! class="modern-table-question" | {{{q3|Вопрос 3}}}
! class="modern-table-question" | {{{q3|Вопрос 3}}}
| class="modern-table-answer" | {{{a3|Ответ 3}}}
| class="modern-table-answer" | {{{a3|Ответ 3}}}
|-
! class="modern-table-question" | {{{q4|Вопрос 4}}}
| class="modern-table-answer" | {{{a4|Ответ 4}}}
|}
|}
</div>
</div>
</includeonly><noinclude>
</includeonly><noinclude>
{{#css:
{{#css:
.modern-table-container {
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
}
.table-grid {
    transition: all 0.3s ease;
    transform: rotateX(3deg) rotateY(-2deg);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
.modern-table {
.modern-table {
     border-collapse: separate !important;
     border-collapse: separate !important;
     border-spacing: 0 10px !important;
     border-spacing: 0 10px !important;
     background: transparent !important;
     background: linear-gradient(135deg, rgba(30,30,40,0.9), rgba(20,20,30,0.9)) !important;
     font-family: 'Montserrat', sans-serif !important;
     font-family: 'Montserrat', sans-serif !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
}
.header-gradient {
    position: relative;
    background: linear-gradient(90deg, rgba(74,74,74,0.7), rgba(30,30,40,0.9));
    display: flex;
    align-items: center;
    padding: 10px;
}
.header-text {
    color: #d3d3d3 !important;
    z-index: 2;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.header-line {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #4a90e2, #9b59b6);
    opacity: 0.7;
}
}


.modern-table-header {
.modern-table-header {
     background-color: #4a4a4a !important;
     background: transparent !important;
    color: #d3d3d3 !important;
     padding: 0 !important;
    text-align: center !important;
     border: none !important;
    font-weight: bold !important;
     padding: 10px !important;
     border-radius: 5px 5px 0 0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}
}


.modern-table-question {
.modern-table-question {
     background-color: #3a3a3a !important;
     background-color: rgba(30,30,40,0.7) !important;
     color: #a0a0a0 !important;
     color: #a0a0a0 !important;
     text-align: right !important;
     text-align: right !important;
     padding: 10px !important;
     padding: 15px !important;
     font-weight: bold !important;
     font-weight: bold !important;
     width: 30% !important;
     width: 30% !important;
     border-right: 2px solid #4a4a4a !important;
     border: none !important;
    position: relative;
}
 
.modern-table-question::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(transparent, rgba(74,144,226,0.5), transparent);
}
}


.modern-table-answer {
.modern-table-answer {
     background-color: #2a2a2a !important;
     background-color: rgba(20,20,30,0.7) !important;
     color: #c0c0c0 !important;
     color: #c0c0c0 !important;
     padding: 10px !important;
     padding: 15px !important;
     text-align: left !important;
     text-align: left !important;
     border-left: 2px solid #4a4a4a !important;
     border: none !important;
    position: relative;
}
}


.modern-table tr:nth-child(even) .modern-table-question,
.modern-table-answer::before {
.modern-table tr:nth-child(even) .modern-table-answer {
    content: '';
     background-color: rgba(50,50,50,0.8) !important;
    position: absolute;
    left: -10px;
    top: 0;
    width: 2px;
    height: 100%;
     background: linear-gradient(transparent, rgba(155,89,182,0.5), transparent);
}
}
.table-grid:hover {
    transform: rotateX(2deg) rotateY(-1deg) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
}}
Пример использования:
{{Modern Table
|q1=Вопрос 1
|a1=Ответ 1
|q2=Вопрос 2
|a2=Ответ 2
}}
}}
</noinclude>

Версия от 22:39, 1 декабря 2024


Пример использования: 

   FAQ (Частые вопросы)
Вопрос 1 Ответ 1
Вопрос 2 Ответ 2
Вопрос 3 Ответ 3


Источник — https://station14.ru/index.php?title=Шаблон:Modern_Table&oldid=57153