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

Материал из Space Station 14 Вики
Нет описания правки
Метка: ручная отмена
Нет описания правки
Строка 1: Строка 1:
<includeonly>
<includeonly>
<div class="modern-table-container">
{| class="wikitable" style="width: {{{width|100%}}}; margin-left: {{{margin-left|0}}}; float: {{{float|none}}}; background: linear-gradient(135deg, rgba(50,50,70,0.9), rgba(30,30,50,0.9)); border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.5);"
<div class="table-grid">
! colspan="2" style="background: linear-gradient(90deg, rgba(100,100,150,0.7), rgba(50,50,70,0.9)); color: white; padding: 15px; text-align: center; font-size: 1.5em;" | {{{title|Пример таблицы}}}
{| class="wikitable modern-table" style="float: {{{float|right}}}; width: {{{width|450px}}}; margin-left: {{{margin-left|1em}}};"
! 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}}}
! style="background-color: rgba(70,70,90,0.8); color: white; padding: 15px; text-align: right;" | {{{q1|Вопрос 1}}}
| class="modern-table-answer" | {{{a1|Ответ 1}}}
| style="background-color: rgba(30,30,50,0.8); color: #d3d3d3; padding: 15px;" | {{{a1|Ответ 1}}}
|-
|-
! class="modern-table-question" | {{{q2|Вопрос 2}}}
! style="background-color: rgba(70,70,90,0.8); color: white; padding: 15px; text-align: right;" | {{{q2|Вопрос 2}}}
| class="modern-table-answer" | {{{a2|Ответ 2}}}
| style="background-color: rgba(30,30,50,0.8); color: #d3d3d3; padding: 15px;" | {{{a2|Ответ 2}}}
|-
|-
! class="modern-table-question" | {{{q3|Вопрос 3}}}
! style="background-color: rgba(70,70,90,0.8); color: white; padding: 15px; text-align: right;" | {{{q3|Вопрос 3}}}
| class="modern-table-answer" | {{{a3|Ответ 3}}}
| style="background-color: rgba(30,30,50,0.8); color: #d3d3d3; padding: 15px;" | {{{a3|Ответ 3}}}
|}
|}
</div>
</div>
</includeonly><noinclude>
</includeonly><noinclude>
{{#css:
.modern-table-container {
    position: relative;
}
.table-grid {
    transition: all 0.3s ease;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
.modern-table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    background: linear-gradient(135deg, rgba(30,30,40,0.9), rgba(20,20,30,0.9)) !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 {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.modern-table-question {
    background-color: rgba(30,30,40,0.7) !important;
    color: #a0a0a0 !important;
    text-align: right !important;
    padding: 15px !important;
    font-weight: bold !important;
    width: 30% !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 {
    background-color: rgba(20,20,30,0.7) !important;
    color: #c0c0c0 !important;
    padding: 15px !important;
    text-align: left !important;
    border: none !important;
    position: relative;
}
.modern-table-answer::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(transparent, rgba(155,89,182,0.5), transparent);
}
}}
Пример использования:
Пример использования:
{{Modern Table  
{{Modern Table  
|q1=Вопрос 1
|title=Часто задаваемые вопросы
|a1=Ответ 1
|q1=Какой язык программирования лучше всего изучать?
|q2=Вопрос 2
|a1=Это зависит от ваших целей, но Python часто рекомендуется для начинающих.
|a2=Ответ 2
|q2=Что такое Open Source?
|a2=Open Source — это программное обеспечение, исходный код которого доступен для изучения, изменения и распространения.
|q3=Как начать изучать программирование?
|a3=Начните с онлайн-курсов, книг или видеоуроков, которые подходят вашему стилю обучения.
|float=left
|width=600px
|margin-left=2em
}}
}}
</noinclude>
</noinclude>

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

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

Часто задаваемые вопросы
Какой язык программирования лучше всего изучать? Это зависит от ваших целей, но Python часто рекомендуется для начинающих.
Что такое Open Source? Open Source — это программное обеспечение, исходный код которого доступен для изучения, изменения и распространения.
Как начать изучать программирование? Начните с онлайн-курсов, книг или видеоуроков, которые подходят вашему стилю обучения.


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