Template:modernframe

Вернуться

Line 1: Line 1:
<div class="modern-frame" style="margin:{{{margin|12px 0px}}};>
<div class="modern-frame" style="margin:{{{margin|12px 0px}}};">
 
<div class="modern-frame__title" style="background-color:{{{background-color|var(--wiki-surface-2)}}};border:2px solid {{{border-color|var(--wiki-border)}}};justify-content:{{#if:{{{picture|}}}|space-between|center}};">
<div class="modern-frame__title" style="background-color:{{{background-color|#33333f}}};border:2px solid {{{border-color|#454555}}};justify-content:{{#if:{{{picture|}}}|space-between|center}};>
{{#if:{{{picture|}}}|<div>{{{picture}}}</div>}}
{{#if:{{{picture|}}}|<div>{{{picture}}}</div>}}
<div>'''{{{title}}}'''</div>
<div>'''{{{title}}}'''</div>
{{#if:{{{picture|}}}|<div>{{{picture}}}</div>}}
{{#if:{{{picture|}}}|<div>{{{picture}}}</div>}}
</div>
</div>
 
<div class="modern-frame__content {{{class}}}" style="background:color-mix(in oklch, {{{background-color|var(--wiki-surface-2)}}} {{{opacity|27}}}%, transparent);border:2px solid color-mix(in oklch, {{{border-color|var(--wiki-border)}}} 52%, transparent);border-top:none;padding:{{{padding|12px 10px}}};{{{style}}}">{{{content}}}</div></div><!--
<div class="modern-frame__content {{{class}}}" style="background:{{{background-color|#33333f}}}{{{transparency|45}}};border:2px solid {{{border-color|#454555}}}85;border-top:none;padding:{{{padding|12px 10px}}};{{{style}}}>{{{content}}}</div></div><!--
-->{{#css:
-->{{#css:
.modern-frame {
.modern-frame {
Line 13: Line 11:
     flex-direction: column;
     flex-direction: column;
}
}
.modern-frame__title {
.modern-frame__title {
     position: relative;
     position: relative;
Line 20: Line 17:
     min-height: 32px;
     min-height: 32px;
     padding: 2px 8px;
     padding: 2px 8px;
     color: #e5e5e5;
     color: var(--wiki-text);
     font-size: 15px;
     font-size: 15px;
     font-family: "Noto Sans", sans-serif;
     font-family: "Noto Sans", sans-serif;
     border-radius: 0.3em 0.3em 0 0;
     border-radius: 0.3em 0.3em 0 0;
     border-bottom: 3px solid #00000045 !important;
     border-bottom: 3px solid oklch(0 0 0 / 0.27) !important;
}
}
.modern-frame__content {
.modern-frame__content {
     border-radius: 0 0 0.3em 0.3em;
     border-radius: 0 0 0.3em 0.3em;
     box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.4);
     box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.4);
}
}
@media (max-width: 800px) {
@media (max-width: 800px) {
     .modern-frame__content {
     .modern-frame__content {