Mudanças entre as edições de "Widget:CreatorReward"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
 
(4 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<style>
<includeonly>
     .rc-card {
     <style>
         background: #fff;
         .tabber__panel:not(.tabber__panel--active) {
        border: 1px solid #e0e0e0;
            display: none !important;
        border-radius: 12px;
         }
        padding: 1.25rem;
        max-width: 720px;
        margin: 0 auto 16px auto;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        color: #1a1a1a;
         box-sizing: border-box;
    }


    .rc-header {
        .tabber__panel.tabber__panel--active {
        display: flex;
            animation: rcTabIn 0.35s ease-out;
        align-items: center;
         }
         gap: 14px;
        margin-bottom: 16px;
    }


    .rc-sprite-wrap {
        @keyframes rcTabIn {
        width: 56px;
            from {
        height: 56px;
                opacity: 0;
        border-radius: 8px;
                transform: translateY(8px);
        background: #f5f5f5;
            }
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }


    .rc-sprite-wrap img {
            to {
        width: 32px;
                opacity: 1;
        height: 32px;
                transform: translateY(0);
        image-rendering: pixelated;
            }
         image-rendering: -moz-crisp-edges;
         }
    }


    .rc-title {
        .rc-card {
        font-weight: 600;
            background: #fff;
        font-size: 16px;
            border: 1px solid #e0e0e0;
        margin: 0;
            border-radius: 12px;
        color: #1a1a1a;
            padding: 1rem 1.25rem;
    }
            max-width: 720px;
            margin: 0 0 16px 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: #1a1a1a;
            box-sizing: border-box;
        }


    .rc-desc {
        @media (max-width: 760px) {
        font-size: 13px;
            .rc-card {
        color: #666;
                max-width: 100%;
        margin: 4px 0 0 0;
            }
         line-height: 1.4;
         }
    }


    .rc-platforms {
        .rc-header {
        display: grid;
            display: flex;
        grid-template-columns: 1fr 1fr;
            flex-direction: column;
        gap: 12px;
            align-items: flex-start;
    }
            gap: 8px;
            margin-bottom: 14px;
        }


    .rc-platform {
        .rc-sprite-wrap {
        background: #f8f8f8;
            width: 40px;
        border-radius: 8px;
            height: 40px;
        padding: 12px 14px;
            border-radius: 8px;
    }
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }


    .rc-platform-label {
        .rc-sprite-wrap img {
        display: flex;
            width: 32px;
        align-items: center;
            height: 32px;
        gap: 6px;
            image-rendering: pixelated;
        margin: 0 0 8px 0;
            image-rendering: -moz-crisp-edges;
        font-size: 12px;
         }
        font-weight: 600;
         letter-spacing: 0.3px;
    }


    .rc-platform-label.yt {
        .rc-title {
        color: #cc0000;
            font-weight: 600;
    }
            font-size: 16px;
            margin: 0;
            color: #1a1a1a;
        }


    .rc-platform-label.tw {
        .rc-desc {
        color: #9146ff;
            font-size: 13px;
    }
            color: #666;
            margin: 2px 0 0 0;
            line-height: 1.4;
        }


    .rc-platform-label svg {
        .rc-platforms {
        flex-shrink: 0;
            display: grid;
    }
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }


    .rc-reqs {
        .rc-platform {
         font-size: 13px;
            background: #f8f8f8;
         color: #333;
            border-radius: 8px;
         margin: 0;
            padding: 10px 12px;
         line-height: 1.7;
         }
    }
 
        .rc-platform-label {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0 0 6px 0;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.3px;
         }
 
        .rc-platform-label.yt {
            color: #cc0000;
         }
 
         .rc-platform-label.tw {
            color: #9146ff;
        }


    .rc-note {
        .rc-platform-label svg {
        font-size: 12px;
            flex-shrink: 0;
        color: #888;
         }
        margin: 4px 0 0 0;
         line-height: 1.4;
    }


    .rc-showcase {
        .rc-reqs-list {
        margin-top: 16px;
            list-style: disc;
        display: grid;
            margin: 0;
        grid-template-columns: 1fr;
            padding-left: 18px;
        gap: 12px;
            font-size: 13px;
    }
            color: #333;
            line-height: 1.8;
        }


    .rc-showcase-img {
        .rc-reqs-list li {
        width: 100%;
            margin-bottom: 2px;
        border-radius: 8px;
         }
         background: #f5f5f5;
        display: block;
    }


    .rc-showcase-caption {
        .rc-note {
        font-size: 12px;
            font-size: 12px;
        color: #888;
            color: #888;
        text-align: center;
            margin: 4px 0 0 0;
        margin: 4px 0 0 0;
            line-height: 1.4;
    }
        }


    @media (max-width: 520px) {
         .rc-showcase {
         .rc-platforms {
            margin-top: 12px;
            display: grid;
             grid-template-columns: 1fr;
             grid-template-columns: 1fr;
            gap: 12px;
         }
         }
    }
</style>


<div class="rc-card" data-sprite="{{{sprite|}}}" data-title="{{{title|}}}" data-desc="{{{desc|}}}"
        .rc-showcase-img {
    data-yt_req="{{{yt_req|}}}" data-tw_req="{{{tw_req|}}}" data-yt_note="{{{yt_note|}}}" data-tw_note="{{{tw_note|}}}"
            width: 100%;
    data-gif="{{{gif|}}}" data-gif_caption="{{{gif_caption|}}}">
            border-radius: 8px;
</div>
            background: #f5f5f5;
            display: block;
        }


<script>
         .rc-showcase-caption {
    (function () {
             font-size: 12px;
         function resolveFile(filename) {
             color: #888;
             if (!filename) return '';
             text-align: center;
             if (typeof mw !== 'undefined' && mw.util && mw.util.getUrl) {
             margin: 4px 0 0 0;
                return mw.util.getUrl('Especial:FilePath/' + filename);
             }
             return '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename);
         }
         }


         function escapeHtml(str) {
         @media (max-width: 520px) {
             if (!str) return '';
             .rc-platforms {
            var div = document.createElement('div');
                grid-template-columns: 1fr;
            div.appendChild(document.createTextNode(str));
             }
             return div.innerHTML;
         }
         }
    </style>


        function buildCards() {
    <div class="rc-card" data-sprite="<!--{$sprite|escape:'html'}-->" data-title="<!--{$title|escape:'html'}-->"
            var cards = document.querySelectorAll('.rc-card[data-title]');
        data-desc="<!--{$desc|default:''|escape:'html'}-->" data-yt_req="<!--{$yt_req|default:''|escape:'html'}-->"
            for (var i = 0; i < cards.length; i++) {
        data-tw_req="<!--{$tw_req|default:''|escape:'html'}-->"
                var c = cards[i];
        data-yt_note="<!--{$yt_note|default:''|escape:'html'}-->"
                var d = c.dataset;
        data-tw_note="<!--{$tw_note|default:''|escape:'html'}-->" data-gif="<!--{$gif|default:''|escape:'html'}-->"
                if (!d.title) continue;
        data-gif_caption="<!--{$gif_caption|default:''|escape:'html'}-->">
 
    </div>
                var html = '';


                html += '<div class="rc-header">';
    <script>
                 html += ' <div class="rc-sprite-wrap">';
        (function () {
                 if (d.sprite) {
            function resolveFile(filename) {
                     html += '    <img src="' + resolveFile(d.sprite) + '" alt="' + escapeHtml(d.title) + '">';
                 if (!filename) return '';
                 if (typeof mw !== 'undefined' && mw.util && mw.util.getUrl) {
                     return mw.util.getUrl('Especial:FilePath/' + filename);
                 }
                 }
                 html += ' </div>';
                 return '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename);
                html += '  <div>';
            }
                html += '    <p class="rc-title">' + escapeHtml(d.title) + '</p>';
                if (d.desc) {
                    html += '    <p class="rc-desc">' + escapeHtml(d.desc) + '</p>';
                }
                html += '  </div>';
                html += '</div>';


                 html += '<div class="rc-platforms">';
            function esc(str) {
                 if (!str) return '';
                var div = document.createElement('div');
                div.appendChild(document.createTextNode(str));
                return div.innerHTML;
            }


                 html += ' <div class="rc-platform">';
            function reqsToListHtml(reqStr) {
                 html += '   <p class="rc-platform-label yt">';
                 if (!reqStr || !reqStr.trim()) return '';
                html += '      <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">';
                 var items = reqStr.split('*').map(function (s) { return s.trim(); }).filter(function (s) { return s.length > 0; });
                 html += '        <path d="M17.6 2.03C17.39 1.24 16.77 0.62 15.98 0.4C14.56 0 9 0 9 0S3.44 0 2.02 0.4C1.23 0.62 0.61 1.24 0.4 2.03C0 3.45 0 6.38 0 6.38S0 9.31 0.4 10.73C0.61 11.52 1.23 12.14 2.02 12.36C3.44 12.76 9 12.76 9 12.76S14.56 12.76 15.98 12.36C16.77 12.14 17.39 11.52 17.6 10.73C18 9.31 18 6.38 18 6.38S18 3.45 17.6 2.03Z" fill="#CC0000"/>';
                 if (items.length === 0) return '';
                 html += '       <path d="M7.2 9.1L11.88 6.38L7.2 3.66V9.1Z" fill="white"/>';
                 var html = '<ul class="rc-reqs-list">';
                 html += '      </svg>';
                 for (var j = 0; j < items.length; j++) {
                html += '      YouTube';
                     html += '<li>' + items[j] + '</li>';
                html += '    </p>';
                if (d.yt_req) {
                     html += '   <p class="rc-reqs">' + d.yt_req + '</p>';
                 }
                 }
                 if (d.yt_note) {
                 html += '</ul>';
                    html += '    <p class="rc-note">' + escapeHtml(d.yt_note) + '</p>';
                 return html;
                 }
            }
                html += '  </div>';


                html += '  <div class="rc-platform">';
            function buildCards() {
                 html += '   <p class="rc-platform-label tw">';
                 var cards = document.querySelectorAll('.rc-card[data-title]');
                 html += '      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">';
                 for (var i = 0; i < cards.length; i++) {
                html += '        <path d="M1.18 0L0 3.39V14.84H4.06V17H6.12L8.17 14.84H11.29L16 10.02V0H1.18ZM2.35 1.41H14.82V9.32L12.47 11.73H8.76L6.71 13.89V11.73H2.35V1.41ZM6.71 4.24V8.47H8.18V4.24H6.71ZM10.71 4.24V8.47H12.18V4.24H10.71Z" fill="#9146FF"/>';
                     var c = cards[i];
                html += '      </svg>';
                    var d = c.dataset;
                html += '      Twitch';
                     if (!d.title) continue;
                html += '    </p>';
                if (d.tw_req) {
                     html += '    <p class="rc-reqs">' + d.tw_req + '</p>';
                }
                if (d.tw_note) {
                     html += '    <p class="rc-note">' + escapeHtml(d.tw_note) + '</p>';
                }
                html += '  </div>';


                html += '</div>';
                    var html = '';


                if (d.gif) {
                    html += '<div class="rc-header">';
                    html += '<div class="rc-showcase">';
                    html += '  <div class="rc-sprite-wrap">';
                    if (d.sprite) {
                        html += '   <img src="' + resolveFile(d.sprite) + '" alt="' + esc(d.title) + '">';
                    }
                    html += '  </div>';
                     html += '  <div>';
                     html += '  <div>';
                     html += '    <img class="rc-showcase-img" src="' + resolveFile(d.gif) + '" alt="Preview">';
                     html += '    <p class="rc-title">' + esc(d.title) + '</p>';
                     if (d.gif_caption) {
                     if (d.desc) {
                         html += '    <p class="rc-showcase-caption">' + escapeHtml(d.gif_caption) + '</p>';
                         html += '    <p class="rc-desc">' + esc(d.desc) + '</p>';
                     }
                     }
                     html += '  </div>';
                     html += '  </div>';
                     html += '</div>';
                     html += '</div>';
                    html += '<div class="rc-platforms">';
                    html += '  <div class="rc-platform">';
                    html += '    <p class="rc-platform-label yt">';
                    html += '      <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">';
                    html += '        <path d="M17.6 2.03C17.39 1.24 16.77 0.62 15.98 0.4C14.56 0 9 0 9 0S3.44 0 2.02 0.4C1.23 0.62 0.61 1.24 0.4 2.03C0 3.45 0 6.38 0 6.38S0 9.31 0.4 10.73C0.61 11.52 1.23 12.14 2.02 12.36C3.44 12.76 9 12.76 9 12.76S14.56 12.76 15.98 12.36C16.77 12.14 17.39 11.52 17.6 10.73C18 9.31 18 6.38 18 6.38S18 3.45 17.6 2.03Z" fill="#CC0000"/>';
                    html += '        <path d="M7.2 9.1L11.88 6.38L7.2 3.66V9.1Z" fill="white"/>';
                    html += '      </svg>';
                    html += '      YouTube';
                    html += '    </p>';
                    if (d.yt_req) {
                        html += '    ' + reqsToListHtml(d.yt_req);
                    }
                    if (d.yt_note) {
                        html += '    <p class="rc-note">' + esc(d.yt_note) + '</p>';
                    }
                    html += '  </div>';
                    html += '  <div class="rc-platform">';
                    html += '    <p class="rc-platform-label tw">';
                    html += '      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">';
                    html += '        <path d="M1.18 0L0 3.39V14.84H4.06V17H6.12L8.17 14.84H11.29L16 10.02V0H1.18ZM2.35 1.41H14.82V9.32L12.47 11.73H8.76L6.71 13.89V11.73H2.35V1.41ZM6.71 4.24V8.47H8.18V4.24H6.71ZM10.71 4.24V8.47H12.18V4.24H10.71Z" fill="#9146FF"/>';
                    html += '      </svg>';
                    html += '      Twitch';
                    html += '    </p>';
                    if (d.tw_req) {
                        html += '    ' + reqsToListHtml(d.tw_req);
                    }
                    if (d.tw_note) {
                        html += '    <p class="rc-note">' + esc(d.tw_note) + '</p>';
                    }
                    html += '  </div>';
                    html += '</div>';
                    if (d.gif) {
                        html += '<div class="rc-showcase">';
                        html += '  <div>';
                        html += '    <img class="rc-showcase-img" src="' + resolveFile(d.gif) + '" alt="Preview">';
                        if (d.gif_caption) {
                            html += '    <p class="rc-showcase-caption">' + esc(d.gif_caption) + '</p>';
                        }
                        html += '  </div>';
                        html += '</div>';
                    }
                    c.innerHTML = html;
                 }
                 }
            }


                 c.innerHTML = html;
            if (document.readyState === 'loading') {
                 document.addEventListener('DOMContentLoaded', buildCards);
            } else {
                buildCards();
             }
             }
         }
         })();
 
     </script>
        if (document.readyState === 'loading') {
</includeonly>
            document.addEventListener('DOMContentLoaded', buildCards);
        } else {
            buildCards();
        }
     })();
</script>

Edição atual tal como às 23h11min de 14 de março de 2026

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:CreatorReward&oldid=44828”