편집토론문서 역사

미디어위키:DevTools.css: 두 판 사이의 차이

편집 요약 없음
태그: 되돌려진 기여
(Install package: clbiwiki-portal-frame-checklist-20260721-007 / css/DevTools.css)
 
(같은 사용자의 중간 판 15개는 보이지 않습니다)
1번째 줄: 1번째 줄:
(function (mw, $) {
/* =========================================
    'use strict';
Developer Tools Panel
owner-only floating tools
========================================= */


    var OWNER = 'Nxdsxn';
#dev-tools-panel {
    var JSZIP_URL = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
position:fixed;
right:18px;
bottom:18px;
z-index:99998;
width:306px;
max-height:calc(100vh - 36px);
display:flex;
flex-direction:column;
background:#171717;
border:1px solid;
border-color:#555555 #2b2b2b #050505 #2b2b2b;
border-radius:0;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.70),
0 8px 24px rgba(0,0,0,0.58);
color:#e2e2e2;
font-size:12px;
line-height:1.4;
/* 내부 스크롤을 독립 paint root로 제한해 뒤의 고정 셸을 재합성하지 않는다. */
isolation:isolate;
contain:layout paint style;
transform:translateZ(0);
backface-visibility:hidden;
}


    function isOwner() {
#dev-tools-panel,
        var name = mw.config.get('wgUserName') || '';
#dev-tools-panel * {
        var groups = mw.config.get('wgUserGroups') || [];
box-sizing:border-box;
        return name === OWNER || groups.indexOf('sysop') !== -1 || groups.indexOf('interface-admin') !== -1;
}
    }


    if (!isOwner()) return;
#dev-tools-panel.dev-tools-collapsed {
    if (window.DevToolsPanelInitialized) return;
width:auto;
    window.DevToolsPanelInitialized = true;
min-width:176px;
}


    var sourceFiles = [
#dev-tools-header {
        { title: 'MediaWiki:Common.css', out: 'css/Common.css', ctype: 'text/css' },
display:flex;
        { title: 'MediaWiki:Theme.css', out: 'css/Theme.css', ctype: 'text/css' },
align-items:center;
        { title: 'MediaWiki:Layout.css', out: 'css/Layout.css', ctype: 'text/css' },
justify-content:space-between;
        { title: 'MediaWiki:MainPage.css', out: 'css/MainPage.css', ctype: 'text/css' },
gap:8px;
        { title: 'MediaWiki:Components.css', out: 'css/Components.css', ctype: 'text/css' },
min-height:30px;
        { title: 'MediaWiki:Template.css', out: 'css/Template.css', ctype: 'text/css' },
padding:0 8px 0 10px;
        { title: 'MediaWiki:Template.Infobox.css', out: 'css/Template.Infobox.css', ctype: 'text/css' },
border-bottom:1px solid #050505;
        { title: 'MediaWiki:Icons.css', out: 'css/Icons.css', ctype: 'text/css' },
background:#1d1d1d;
        { title: 'MediaWiki:Editor.css', out: 'css/Editor.css', ctype: 'text/css' },
color:#e2e2e2;
        { title: 'MediaWiki:Dialogs.css', out: 'css/Dialogs.css', ctype: 'text/css' },
font-size:12px;
        { title: 'MediaWiki:DevTools.css', out: 'css/DevTools.css', ctype: 'text/css' },
font-weight:700;
        { title: 'MediaWiki:LangDrawer.css', out: 'css/LangDrawer.css', ctype: 'text/css' },
line-height:1;
        { title: 'MediaWiki:Test.css', out: 'css/Test.css', ctype: 'text/css' },
cursor:default;
        { title: 'MediaWiki:Common.js', out: 'js/Common.js', ctype: 'text/javascript' },
user-select:none;
        { title: 'MediaWiki:Lang.js', out: 'js/Lang.js', ctype: 'text/javascript' },
text-shadow:1px 1px 0 #000;
        { title: 'MediaWiki:DevTools.js', out: 'js/DevTools.js', ctype: 'text/javascript' },
box-shadow:inset 0 1px 0 rgba(255,255,255,0.050);
        { title: 'MediaWiki:LangDrawer.js', out: 'js/LangDrawer.js', ctype: 'text/javascript' },
}
        { title: 'MediaWiki:CategoryNav.js', out: 'js/CategoryNav.js', ctype: 'text/javascript' }
    ];


    function escapeHtml(value) {
#dev-tools-title {
        return String(value == null ? '' : value)
display:flex;
            .replace(/&/g, '&')
align-items:center;
            .replace(/</g, '&lt;')
gap:7px;
            .replace(/>/g, '&gt;')
min-width:0;
            .replace(/"/g, '&quot;')
white-space:nowrap;
            .replace(/'/g, '&#039;');
letter-spacing:.3px;
    }
}


    function buildPanel() {
.dev-tools-led {
        if ($('#dev-tools-panel').length) return;
display:block;
width:7px;
height:7px;
background:#8fd09a;
border:1px solid #050505;
box-shadow:0 0 6px rgba(143,208,154,.28);
}


        var collapsed = localStorage.getItem('dev-tools-collapsed') === 'true';
#dev-tools-toggle {
        var html = '' +
width:22px;
            '<div id="dev-tools-panel" class="' + (collapsed ? 'dev-tools-collapsed' : '') + '">' +
height:22px;
                '<div id="dev-tools-header">' +
padding:0;
                    '<div id="dev-tools-title"><span class="dev-tools-led"></span><span>ADMIN TOOLS</span></div>' +
border:1px solid #202020;
                    '<button type="button" id="dev-tools-toggle" aria-label="도구 접기">' + (collapsed ? '+' : '−') + '</button>' +
border-top-color:#444444;
                '</div>' +
border-bottom-color:#050505;
                '<div id="dev-tools-body">' +
border-radius:0;
                    '<div class="dev-tools-section">' +
background:#141414;
                        '<div class="dev-tools-section-title">SOURCE PACKAGE</div>' +
color:#e2e2e2;
                        '<button type="button" class="dev-tools-button" id="dev-tools-export">CSS / JS ZIP 다운로드</button>' +
font-size:14px;
                        '<div class="dev-tools-note">MediaWiki namespace의 CSS·JS 원본을 ZIP으로 묶습니다.</div>' +
line-height:18px;
                    '</div>' +
font-weight:700;
                    '<div class="dev-tools-section dev-tools-progress-section">' +
text-align:center;
                        '<div class="dev-tools-section-title">PROGRESS TEST</div>' +
cursor:pointer;
                        '<div class="dev-tools-progress-readout" id="dev-tools-progress-readout">SYNC</div>' +
box-shadow:inset 0 1px 0 rgba(255,255,255,0.035);
                        '<label class="dev-tools-label" for="dev-tools-xp-amount">XP AMOUNT</label>' +
}
                        '<input id="dev-tools-xp-amount" class="dev-tools-input" type="number" min="1" step="1" value="10">' +
                        '<label class="dev-tools-label" for="dev-tools-xp-reason">REASON</label>' +
                        '<input id="dev-tools-xp-reason" class="dev-tools-input" type="text" value="관리자 테스트">' +
                        '<div class="dev-tools-grid">' +
                            '<button type="button" class="dev-tools-button" id="dev-tools-xp-add">XP 지급</button>' +
                            '<button type="button" class="dev-tools-button" id="dev-tools-progress-refresh">동기화</button>' +
                        '</div>' +
                        '<button type="button" class="dev-tools-button" id="dev-tools-daily-reset">오늘 XP 보너스 리셋</button>' +
                        '<button type="button" class="dev-tools-button dev-tools-danger" id="dev-tools-level-reset">레벨 리셋</button>' +
                    '</div>' +
                    '<div id="dev-tools-status">READY</div>' +
                '</div>' +
            '</div>';


        $('body').append(html);
#dev-tools-toggle:hover {
    }
background:#202020;
border-color:#444444 #333333 #050505 #333333;
color:#ffffff;
}


    function setStatus(text, type) {
#dev-tools-toggle:active {
        var $status = $('#dev-tools-status');
background:#101010;
        $status.removeClass('dev-tools-status-ok dev-tools-status-error');
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.82);
        if (type === 'ok') $status.addClass('dev-tools-status-ok');
}
        if (type === 'error') $status.addClass('dev-tools-status-error');
        $status.text(text || '');
    }


    function setButtonsDisabled(disabled) {
#dev-tools-body {
        $('#dev-tools-panel button, #dev-tools-panel input').prop('disabled', !!disabled);
min-height:0;
        $('#dev-tools-toggle').prop('disabled', false);
max-height:calc(100vh - 68px);
    }
padding:8px;
background:#080808;
border-top:1px solid rgba(255,255,255,0.018);
overflow-y:auto;
overscroll-behavior:contain;
contain:layout paint;
scrollbar-gutter:stable;
}


    function loadScript(url) {
#dev-tools-panel.dev-tools-collapsed #dev-tools-body {
        return new Promise(function (resolve, reject) {
display:none;
            if (window.JSZip) {
}
                resolve();
                return;
            }


            var script = document.createElement('script');
#dev-tools-panel.dev-tools-collapsed #dev-tools-header {
            script.src = url;
border-bottom:none;
            script.onload = resolve;
}
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }


    function rawUrl(file) {
.dev-tools-section {
        return mw.util.getUrl(file.title, {
display:flex;
            action: 'raw',
flex-direction:column;
            ctype: file.ctype
gap:6px;
        });
margin:0 0 8px;
    }
padding:7px;
background:#101010;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.60);
}


    function fetchRaw(file) {
.dev-tools-section:last-of-type {
        return fetch(rawUrl(file), { credentials: 'same-origin' }).then(function (res) {
margin-bottom:8px;
            if (!res.ok) throw new Error(file.title + ' HTTP ' + res.status);
}
            return res.text();
        });
    }


    function downloadBlob(blob, filename) {
.dev-tools-section-title {
        var url = URL.createObjectURL(blob);
height:18px;
        var a = document.createElement('a');
line-height:18px;
        a.href = url;
padding:0 5px;
        a.download = filename;
background:#1d1d1d;
        document.body.appendChild(a);
border:1px solid #202020;
        a.click();
border-top-color:#333333;
        a.remove();
border-bottom-color:#050505;
        setTimeout(function () {
color:#c8c8c8;
            URL.revokeObjectURL(url);
font-size:9px;
        }, 1000);
font-weight:700;
    }
letter-spacing:.55px;
text-shadow:1px 1px 0 #000;
}


    function exportSources() {
.dev-tools-note {
        setButtonsDisabled(true);
color:#8a8a8a;
        setStatus('ZIP 생성 중...');
font-size:10px;
line-height:1.45;
}


        loadScript(JSZIP_URL)
.dev-tools-section-collapsible {
            .then(function () {
gap:6px;
                var zip = new JSZip();
}
                var meta = [];


                return Promise.all(sourceFiles.map(function (file) {
.dev-tools-section-toggle {
                    return fetchRaw(file).then(function (text) {
display:flex;
                        zip.file(file.out, text);
align-items:center;
                        meta.push(file.out);
gap:6px;
                    }).catch(function (err) {
width:100%;
                        zip.file(file.out + '.ERROR.txt', String(err && err.message ? err.message : err));
height:18px;
                    });
line-height:18px;
                })).then(function () {
padding:0 5px;
                    zip.file('README.txt', 'CLBI Wiki CSS/JS export\nGenerated: ' + new Date().toISOString() + '\n\nFiles:\n' + meta.sort().join('\n') + '\n');
box-sizing:border-box;
                    return zip.generateAsync({ type: 'blob' });
background:#1d1d1d;
                });
border:1px solid #202020;
            })
border-top-color:#333333;
            .then(function (blob) {
border-bottom-color:#050505;
                var stamp = new Date().toISOString().replace(/[:.]/g, '-');
color:#c8c8c8;
                downloadBlob(blob, 'clbiwiki-source-' + stamp + '.zip');
font-size:9px;
                setStatus('ZIP 다운로드 완료', 'ok');
font-weight:700;
            })
letter-spacing:.55px;
            .catch(function (err) {
text-shadow:1px 1px 0 #000;
                setStatus('ZIP 실패: ' + (err && err.message ? err.message : err), 'error');
text-align:left;
            })
cursor:pointer;
            .finally(function () {
}
                setButtonsDisabled(false);
            });
    }


    function withApi(done, fail) {
.dev-tools-section-caret {
        mw.loader.using(['mediawiki.api']).then(function () {
display:inline-flex;
            done(new mw.Api());
align-items:center;
        }, function () {
justify-content:center;
            if (typeof fail === 'function') fail();
width:10px;
        });
min-width:10px;
    }
font-size:10px;
}


    function updateReadout(summary) {
.dev-tools-section-toggle-label {
        var $box = $('#dev-tools-progress-readout');
flex:1 1 auto;
        if (!summary) {
}
            $box.text('NO DATA');
            return;
        }


        $box.html(
.dev-tools-section-content {
            '<span>LVL ' + escapeHtml(summary.level) + '</span>' +
display:flex;
            '<span>' + escapeHtml(summary.totalXp) + ' XP</span>' +
flex-direction:column;
            '<span>TODAY ' + escapeHtml(summary.dailyXp) + ' XP</span>' +
gap:6px;
            '<span>READ ' + escapeHtml(summary.dailyReadCount) + '</span>' +
}
            '<span>DISC ' + escapeHtml(summary.discoveryCount) + '</span>'
        );
    }


    function refreshProgressSummary() {
.dev-tools-section-collapsible.is-collapsed .dev-tools-section-content {
        withApi(function (api) {
display:none;
            api.get({
}
                action: 'progress_summary',
                format: 'json',
                formatversion: 2
            }).then(function (data) {
                var payload = data && data.progress_summary;
                if (payload && payload.available && payload.summary) {
                    updateReadout(payload.summary);
                    if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.requestSummary === 'function') {
                        window.ProgressSystemWebUi.requestSummary(true);
                    }
                    setStatus('진행도 동기화 완료', 'ok');
                } else {
                    updateReadout(null);
                    setStatus('진행도 없음', 'error');
                }
            }).catch(function () {
                setStatus('동기화 실패', 'error');
            });
        }, function () {
            setStatus('mediawiki.api 로드 실패', 'error');
        });
    }


    function runProgressAdmin(operation, extra) {
.dev-tools-grid {
        extra = extra || {};
display:grid;
        setButtonsDisabled(true);
grid-template-columns:1fr 1fr;
        setStatus('요청 처리 중...');
gap:5px;
}


        withApi(function (api) {
.dev-tools-button {
            var payload = $.extend({
display:flex;
                action: 'progress_admin',
align-items:center;
                format: 'json',
justify-content:center;
                formatversion: 2,
width:100%;
                errorformat: 'plaintext',
min-height:25px;
                operation: operation
box-sizing:border-box;
            }, extra);
padding:0 7px;
border-radius:0;
border:1px solid;
border-color:#333333 #202020 #050505 #202020;
background:linear-gradient(to bottom,#171717 0%,#141414 56%,#101010 100%);
color:#c8c8c8;
font-size:10px;
font-weight:700;
line-height:1;
text-align:center;
cursor:pointer;
text-shadow:1px 1px 0 #000;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.040);
}


            api.postWithToken('csrf', payload).then(function (data) {
.dev-tools-button:hover {
                var result = data && data.progress_admin;
background:linear-gradient(to bottom,#202020 0%,#1a1a1a 56%,#141414 100%);
                if (!result || !result.ok) {
border-color:#444444 #333333 #101010 #333333;
                    setStatus('실패: ' + (result && result.reason ? result.reason : 'unknown'), 'error');
color:#ffffff;
                    return;
}
                }


                if (result.summary) {
.dev-tools-button:active {
                    updateReadout(result.summary);
background:linear-gradient(to bottom,#0c0c0c 0%,#101010 55%,#171717 100%);
border-color:#050505 #202020 #333333 #202020;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.82);
}


                    if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.applySummary === 'function') {
.dev-tools-button:disabled,
                        window.ProgressSystemWebUi.applySummary(result.summary, {
.dev-tools-input:disabled {
                            animateGain: operation === 'grant_xp'
cursor:default;
                        });
opacity:.55;
                    } else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.requestSummary === 'function') {
}
                        window.ProgressSystemWebUi.requestSummary();
                    }
                }


                setStatus('완료: ' + operation, 'ok');
.dev-tools-danger {
            }).catch(function (code) {
border-color:#4a2828 #2e2020 #050505 #2e2020;
                setStatus('API 실패: ' + code, 'error');
color:#c88a80;
            }).always(function () {
}
                setButtonsDisabled(false);
            });
        }, function () {
            setButtonsDisabled(false);
            setStatus('mediawiki.api 로드 실패', 'error');
        });
    }


    function bindEvents() {
.dev-tools-danger:hover {
        $(document).on('click', '#dev-tools-toggle', function () {
border-color:#6a3933 #4a2828 #101010 #4a2828;
            var $panel = $('#dev-tools-panel');
color:#e0a199;
            $panel.toggleClass('dev-tools-collapsed');
}
            var collapsed = $panel.hasClass('dev-tools-collapsed');
            localStorage.setItem('dev-tools-collapsed', collapsed ? 'true' : 'false');
            $(this).text(collapsed ? '+' : '−');
        });


        $(document).on('click', '#dev-tools-export', exportSources);
.dev-tools-label {
        $(document).on('click', '#dev-tools-progress-refresh', refreshProgressSummary);
margin:2px 0 -2px;
color:#8a8a8a;
font-size:9px;
font-weight:700;
letter-spacing:.45px;
line-height:1;
}


        $(document).on('click', '#dev-tools-xp-add', function () {
.dev-tools-input {
            var amount = parseInt($('#dev-tools-xp-amount').val(), 10);
width:100%;
            var reason = $('#dev-tools-xp-reason').val() || '관리자 테스트';
height:24px;
background:#070707;
border:1px solid #202020;
border-top-color:#333333;
color:#e2e2e2;
padding:0 7px;
border-radius:0;
font-size:11px;
line-height:22px;
outline:none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.55);
}


            if (!Number.isFinite(amount) || amount <= 0) {
.dev-tools-input:focus {
                setStatus('XP 값이 잘못되었습니다.', 'error');
border-color:#555555 #333333 #050505 #333333;
                return;
background:#0c0c0c;
            }
}


            runProgressAdmin('add_xp', {
.dev-tools-progress-readout {
                amount: amount,
display:grid;
                reason: reason
grid-template-columns:1fr 1fr;
            });
gap:4px;
        });
padding:5px;
background:#070707;
border:1px solid #202020;
color:#c8c8c8;
font-size:9px;
font-weight:700;
line-height:1.25;
text-shadow:1px 1px 0 #000;
}


        $(document).on('click', '#dev-tools-daily-reset', function () {
.dev-tools-progress-readout span {
            runProgressAdmin('reset_daily');
display:block;
        });
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}


        $(document).on('click', '#dev-tools-level-reset', function () {
#dev-tools-status {
            if (!window.confirm('레벨/총 경험치와 오늘 보너스 카운트를 리셋할까요?')) return;
min-height:18px;
            runProgressAdmin('reset_progress');
padding:4px 6px;
        });
background:#101010;
    }
border:1px solid #202020;
color:#8a8a8a;
font-size:10px;
line-height:1.25;
word-break:keep-all;
text-shadow:1px 1px 0 #000;
}


     $(function () {
#dev-tools-status.dev-tools-status-error {
        buildPanel();
color:#d46262;
        bindEvents();
}
        refreshProgressSummary();
 
    });
#dev-tools-status.dev-tools-status-ok {
})(mediaWiki, jQuery);
color:#95c884;
}
 
/* =========================================
Analog hover normalization
========================================= */
#dev-tools-panel button,
#dev-tools-panel .dev-tools-button,
#dev-tools-panel .dev-tools-action,
#dev-tools-panel .dev-tools-control,
#dev-tools-panel input,
#dev-tools-panel select {
transition:none !important;
}
/* -----------------------------------------
Language status editor
----------------------------------------- */
 
.dev-tools-language-page {
min-height:20px;
padding:0 5px;
display:flex;
align-items:center;
background:#080808;
border:1px solid #202020;
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}
 
.dev-tools-language-list {
display:flex;
flex-direction:column;
gap:4px;
}
 
.dev-tools-language-row {
display:grid;
grid-template-columns:minmax(0, 1fr) 118px;
gap:5px;
align-items:center;
min-height:24px;
}
 
.dev-tools-language-name {
display:flex;
align-items:center;
min-width:0;
height:24px;
padding:0 6px;
box-sizing:border-box;
background:#080808;
border:1px solid #202020;
color:#c8c8c8;
font-size:10px;
font-weight:700;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}
 
.dev-tools-select {
width:100%;
height:24px;
box-sizing:border-box;
padding:0 4px;
background:#080808;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#e2e2e2;
font-size:9px;
font-weight:700;
line-height:1;
outline:none;
text-shadow:1px 1px 0 #000;
}
 
.dev-tools-select:hover {
background:#101010;
border-color:#333333 #202020 #050505 #202020;
color:#ffffff;
}
 
.dev-tools-select:focus {
background:#101010;
border-color:#444444 #333333 #050505 #333333;
}
/* -----------------------------------------
Package installer
----------------------------------------- */
 
.dev-tools-package-section {
position:relative;
}
 
.dev-tools-file-input {
width:100%;
box-sizing:border-box;
min-height:24px;
padding:4px;
background:#080808;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#cfcfcf;
font-size:9px;
font-weight:700;
line-height:1.2;
outline:none;
text-shadow:1px 1px 0 #000;
}
 
.dev-tools-file-input:hover,
.dev-tools-file-input:focus {
background:#101010;
border-color:#444444 #333333 #050505 #333333;
color:#ffffff;
}
 
.dev-tools-package-summary {
min-height:20px;
padding:5px;
box-sizing:border-box;
background:#080808;
border:1px solid #202020;
color:#a8a8a8;
font-size:9px;
font-weight:700;
line-height:1.35;
text-shadow:1px 1px 0 #000;
}
 
.dev-tools-package-list {
max-height:185px;
overflow:auto;
background:#050505;
border:1px solid #1a1a1a;
padding:3px;
box-sizing:border-box;
}
 
.dev-tools-package-subtitle {
height:18px;
display:flex;
align-items:center;
padding:0 4px;
margin:3px 0;
box-sizing:border-box;
background:#101010;
border:1px solid #242424;
color:#d0d0d0;
font-size:8px;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
text-shadow:1px 1px 0 #000;
}
 
.dev-tools-package-row {
display:grid;
grid-template-columns:minmax(0, 1fr) 14px minmax(0, 1fr);
gap:3px;
align-items:center;
min-height:20px;
padding:2px 3px;
box-sizing:border-box;
border-bottom:1px solid #111111;
color:#bdbdbd;
font-size:8px;
font-weight:700;
line-height:1.25;
text-shadow:1px 1px 0 #000;
}
 
.dev-tools-package-row:last-child {
border-bottom:0;
}
 
.dev-tools-package-source,
.dev-tools-package-target {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
 
.dev-tools-package-target {
color:#e2e2e2;
}
 
.dev-tools-package-arrow {
color:#777777;
text-align:center;
}
 
.dev-tools-package-skipped {
color:#777777;
}
 
.dev-tools-package-skipped .dev-tools-package-target {
color:#9a9a9a;
}
 
.dev-tools-package-empty {
min-height:20px;
display:flex;
align-items:center;
padding:0 4px;
color:#777777;
font-size:8px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
}
 
 
.dev-tools-svg-section .dev-tools-textarea,
.dev-tools-svg-textarea {
    width: 100%;
    min-height: 72px;
     resize: vertical;
    box-sizing: border-box;
    background: #070707;
    color: #e2e2e2;
    border: 1px solid #2a2a2a;
    padding: 6px;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.45;
}
 
.dev-tools-svg-section .dev-tools-textarea:focus,
.dev-tools-svg-textarea:focus {
    outline: none;
    border-color: #4a4a4a;
}
 
.dev-tools-svg-summary {
    margin-top: 6px;
    color: #b8b8b8;
    font-size: 11px;
    line-height: 1.45;
}
 
.dev-tools-svg-list {
    margin-top: 6px;
}
 
/* -----------------------------------------
Decoration editor
----------------------------------------- */
.dev-tools-decoration-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:5px;
}
 
.dev-tools-decoration-grid label {
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
color:#8a8a8a;
font-size:8px;
font-weight:700;
letter-spacing:.35px;
line-height:1;
text-shadow:1px 1px 0 #000;
}
 
.dev-tools-decoration-grid .dev-tools-input {
height:22px;
padding:0 5px;
font-size:10px;
}
 
.dev-tools-decoration-continent-row {
display:grid;
grid-template-columns:minmax(0, 1fr) 108px;
gap:5px;
align-items:stretch;
}
 
.dev-tools-decoration-continent-readout {
min-width:0;
height:25px;
display:flex;
align-items:center;
padding:0 6px;
box-sizing:border-box;
background:#070707;
border:1px solid #202020;
border-top-color:#333333;
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1;
letter-spacing:.35px;
text-shadow:1px 1px 0 #000;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
 
.dev-tools-decoration-scope-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
}
 
.dev-tools-decoration-scope-grid label {
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
color:#8a8a8a;
font-size:8px;
font-weight:700;
letter-spacing:.35px;
line-height:1;
text-shadow:1px 1px 0 #000;
}
 
.dev-tools-decoration-scope-grid .dev-tools-input {
height:22px;
padding:0 5px;
font-size:10px;
}
 
/* -----------------------------------------
Decoration layer editor v2
----------------------------------------- */
.dev-tools-decoration-section.is-editing {
border-color:#555555 #2b2b2b #050505 #2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
inset 0 -1px 0 rgba(0,0,0,0.76),
0 0 0 1px rgba(255,255,255,0.020);
}
 
.dev-tools-decoration-headline {
display:grid;
grid-template-columns:82px minmax(0, 1fr);
gap:5px;
}
 
.dev-tools-decoration-mode,
.dev-tools-decoration-page {
height:22px;
min-width:0;
display:flex;
align-items:center;
padding:0 6px;
box-sizing:border-box;
background:#070707;
border:1px solid #202020;
border-top-color:#333333;
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1;
letter-spacing:.35px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}
 
.dev-tools-decoration-section.is-editing .dev-tools-decoration-mode {
background:#1d1d1d;
border-color:#555555 #333333 #050505 #333333;
color:#ffffff;
}
 
.dev-tools-decoration-mainbar {
display:grid;
grid-template-columns:1.1fr .9fr .9fr;
gap:5px;
}
 
.dev-tools-decoration-layerbar {
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:5px;
}
 
.dev-tools-button.is-active,
#dev-tools-decoration-grid-toggle[data-grid="1"] {
background:linear-gradient(to bottom,#242424 0%,#1d1d1d 56%,#141414 100%);
border-color:#555555 #333333 #101010 #333333;
color:#ffffff;
}
 
.dev-tools-decoration-layer-list {
min-height:58px;
max-height:132px;
overflow:auto;
display:flex;
flex-direction:column;
gap:3px;
padding:4px;
background:#070707;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.58);
}
 
.dev-tools-decoration-layer {
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:6px;
width:100%;
min-height:25px;
padding:0 7px;
box-sizing:border-box;
background:#101010;
border:1px solid #202020;
color:#c8c8c8;
font-size:10px;
font-weight:700;
line-height:1;
text-align:left;
cursor:pointer;
text-shadow:1px 1px 0 #000;
}
 
.dev-tools-decoration-layer:hover {
background:#171717;
border-color:#333333;
color:#ffffff;
}
 
.dev-tools-decoration-layer.is-selected {
background:#1d1d1d;
border-color:#555555 #333333 #050505 #333333;
color:#ffffff;
}
 
.dev-tools-decoration-layer-name,
.dev-tools-decoration-layer-meta {
display:flex;
align-items:center;
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
 
.dev-tools-decoration-layer-meta {
justify-content:flex-end;
color:#8a8a8a;
font-size:9px;
font-weight:700;
}
 
.dev-tools-decoration-empty {
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
color:#626262;
font-size:10px;
font-weight:700;
text-align:center;
}
 
.dev-tools-decoration-quickbar {
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
}
 
.dev-tools-decoration-work-preview {
touch-action:none;
outline:1px dashed rgba(216,216,216,.55) !important;
outline-offset:0;
box-shadow:0 0 0 1px #050505, 0 0 14px rgba(255,255,255,.10) !important;
filter:drop-shadow(0 2px 0 rgba(0,0,0,.65));
}
 
.dev-tools-decoration-work-preview.is-selected {
outline:1px dashed #ffffff !important;
box-shadow:0 0 0 1px #050505, 0 0 22px rgba(255,255,255,.26) !important;
}
 
.dev-tools-decoration-work-preview.is-dragging {
outline-style:solid !important;
}
 
.dev-tools-decoration-grid-overlay {
position:absolute;
inset:0;
z-index:2147483000;
pointer-events:none;
background-image:
linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px),
linear-gradient(to right, transparent calc(50% - 1px), rgba(255,255,255,.32) calc(50% - 1px), rgba(255,255,255,.32) calc(50% + 1px), transparent calc(50% + 1px)),
linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255,255,255,.32) calc(50% - 1px), rgba(255,255,255,.32) calc(50% + 1px), transparent calc(50% + 1px));
background-size:16px 16px, 16px 16px, 100% 100%, 100% 100%;
background-position:0 0, 0 0, 0 0, 0 0;
opacity:.72;
mix-blend-mode:screen;
}
 
body.clbi-decoration-edit-mode::before {
content:"DECORATION EDIT MODE";
position:fixed;
left:50%;
top:8px;
z-index:99997;
transform:translateX(-50%);
height:22px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
background:#101010;
border:1px solid #050505;
box-shadow:
inset 0 1px 0 #555555,
inset 0 -1px 0 #101010,
0 5px 16px rgba(0,0,0,.54);
color:#e2e2e2;
font-size:10px;
font-weight:700;
letter-spacing:.45px;
line-height:1;
text-shadow:1px 1px 0 #000;
pointer-events:none;
}

2026년 7월 21일 (화) 11:56 기준 최신판

/* =========================================
Developer Tools Panel
owner-only floating tools
========================================= */

#dev-tools-panel {
position:fixed;
right:18px;
bottom:18px;
z-index:99998;
width:306px;
max-height:calc(100vh - 36px);
display:flex;
flex-direction:column;
background:#171717;
border:1px solid;
border-color:#555555 #2b2b2b #050505 #2b2b2b;
border-radius:0;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.70),
0 8px 24px rgba(0,0,0,0.58);
color:#e2e2e2;
font-size:12px;
line-height:1.4;
/* 내부 스크롤을 독립 paint root로 제한해 뒤의 고정 셸을 재합성하지 않는다. */
isolation:isolate;
contain:layout paint style;
transform:translateZ(0);
backface-visibility:hidden;
}

#dev-tools-panel,
#dev-tools-panel * {
box-sizing:border-box;
}

#dev-tools-panel.dev-tools-collapsed {
width:auto;
min-width:176px;
}

#dev-tools-header {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-height:30px;
padding:0 8px 0 10px;
border-bottom:1px solid #050505;
background:#1d1d1d;
color:#e2e2e2;
font-size:12px;
font-weight:700;
line-height:1;
cursor:default;
user-select:none;
text-shadow:1px 1px 0 #000;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.050);
}

#dev-tools-title {
display:flex;
align-items:center;
gap:7px;
min-width:0;
white-space:nowrap;
letter-spacing:.3px;
}

.dev-tools-led {
display:block;
width:7px;
height:7px;
background:#8fd09a;
border:1px solid #050505;
box-shadow:0 0 6px rgba(143,208,154,.28);
}

#dev-tools-toggle {
width:22px;
height:22px;
padding:0;
border:1px solid #202020;
border-top-color:#444444;
border-bottom-color:#050505;
border-radius:0;
background:#141414;
color:#e2e2e2;
font-size:14px;
line-height:18px;
font-weight:700;
text-align:center;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.035);
}

#dev-tools-toggle:hover {
background:#202020;
border-color:#444444 #333333 #050505 #333333;
color:#ffffff;
}

#dev-tools-toggle:active {
background:#101010;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.82);
}

#dev-tools-body {
min-height:0;
max-height:calc(100vh - 68px);
padding:8px;
background:#080808;
border-top:1px solid rgba(255,255,255,0.018);
overflow-y:auto;
overscroll-behavior:contain;
contain:layout paint;
scrollbar-gutter:stable;
}

#dev-tools-panel.dev-tools-collapsed #dev-tools-body {
display:none;
}

#dev-tools-panel.dev-tools-collapsed #dev-tools-header {
border-bottom:none;
}

.dev-tools-section {
display:flex;
flex-direction:column;
gap:6px;
margin:0 0 8px;
padding:7px;
background:#101010;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.60);
}

.dev-tools-section:last-of-type {
margin-bottom:8px;
}

.dev-tools-section-title {
height:18px;
line-height:18px;
padding:0 5px;
background:#1d1d1d;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#c8c8c8;
font-size:9px;
font-weight:700;
letter-spacing:.55px;
text-shadow:1px 1px 0 #000;
}

.dev-tools-note {
color:#8a8a8a;
font-size:10px;
line-height:1.45;
}

.dev-tools-section-collapsible {
gap:6px;
}

.dev-tools-section-toggle {
display:flex;
align-items:center;
gap:6px;
width:100%;
height:18px;
line-height:18px;
padding:0 5px;
box-sizing:border-box;
background:#1d1d1d;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#c8c8c8;
font-size:9px;
font-weight:700;
letter-spacing:.55px;
text-shadow:1px 1px 0 #000;
text-align:left;
cursor:pointer;
}

.dev-tools-section-caret {
display:inline-flex;
align-items:center;
justify-content:center;
width:10px;
min-width:10px;
font-size:10px;
}

.dev-tools-section-toggle-label {
flex:1 1 auto;
}

.dev-tools-section-content {
display:flex;
flex-direction:column;
gap:6px;
}

.dev-tools-section-collapsible.is-collapsed .dev-tools-section-content {
display:none;
}

.dev-tools-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
}

.dev-tools-button {
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:25px;
box-sizing:border-box;
padding:0 7px;
border-radius:0;
border:1px solid;
border-color:#333333 #202020 #050505 #202020;
background:linear-gradient(to bottom,#171717 0%,#141414 56%,#101010 100%);
color:#c8c8c8;
font-size:10px;
font-weight:700;
line-height:1;
text-align:center;
cursor:pointer;
text-shadow:1px 1px 0 #000;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.040);
}

.dev-tools-button:hover {
background:linear-gradient(to bottom,#202020 0%,#1a1a1a 56%,#141414 100%);
border-color:#444444 #333333 #101010 #333333;
color:#ffffff;
}

.dev-tools-button:active {
background:linear-gradient(to bottom,#0c0c0c 0%,#101010 55%,#171717 100%);
border-color:#050505 #202020 #333333 #202020;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.82);
}

.dev-tools-button:disabled,
.dev-tools-input:disabled {
cursor:default;
opacity:.55;
}

.dev-tools-danger {
border-color:#4a2828 #2e2020 #050505 #2e2020;
color:#c88a80;
}

.dev-tools-danger:hover {
border-color:#6a3933 #4a2828 #101010 #4a2828;
color:#e0a199;
}

.dev-tools-label {
margin:2px 0 -2px;
color:#8a8a8a;
font-size:9px;
font-weight:700;
letter-spacing:.45px;
line-height:1;
}

.dev-tools-input {
width:100%;
height:24px;
background:#070707;
border:1px solid #202020;
border-top-color:#333333;
color:#e2e2e2;
padding:0 7px;
border-radius:0;
font-size:11px;
line-height:22px;
outline:none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.55);
}

.dev-tools-input:focus {
border-color:#555555 #333333 #050505 #333333;
background:#0c0c0c;
}

.dev-tools-progress-readout {
display:grid;
grid-template-columns:1fr 1fr;
gap:4px;
padding:5px;
background:#070707;
border:1px solid #202020;
color:#c8c8c8;
font-size:9px;
font-weight:700;
line-height:1.25;
text-shadow:1px 1px 0 #000;
}

.dev-tools-progress-readout span {
display:block;
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

#dev-tools-status {
min-height:18px;
padding:4px 6px;
background:#101010;
border:1px solid #202020;
color:#8a8a8a;
font-size:10px;
line-height:1.25;
word-break:keep-all;
text-shadow:1px 1px 0 #000;
}

#dev-tools-status.dev-tools-status-error {
color:#d46262;
}

#dev-tools-status.dev-tools-status-ok {
color:#95c884;
}

/* =========================================
Analog hover normalization
========================================= */
#dev-tools-panel button,
#dev-tools-panel .dev-tools-button,
#dev-tools-panel .dev-tools-action,
#dev-tools-panel .dev-tools-control,
#dev-tools-panel input,
#dev-tools-panel select {
transition:none !important;
}
/* -----------------------------------------
Language status editor
----------------------------------------- */

.dev-tools-language-page {
min-height:20px;
padding:0 5px;
display:flex;
align-items:center;
background:#080808;
border:1px solid #202020;
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}

.dev-tools-language-list {
display:flex;
flex-direction:column;
gap:4px;
}

.dev-tools-language-row {
display:grid;
grid-template-columns:minmax(0, 1fr) 118px;
gap:5px;
align-items:center;
min-height:24px;
}

.dev-tools-language-name {
display:flex;
align-items:center;
min-width:0;
height:24px;
padding:0 6px;
box-sizing:border-box;
background:#080808;
border:1px solid #202020;
color:#c8c8c8;
font-size:10px;
font-weight:700;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}

.dev-tools-select {
width:100%;
height:24px;
box-sizing:border-box;
padding:0 4px;
background:#080808;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#e2e2e2;
font-size:9px;
font-weight:700;
line-height:1;
outline:none;
text-shadow:1px 1px 0 #000;
}

.dev-tools-select:hover {
background:#101010;
border-color:#333333 #202020 #050505 #202020;
color:#ffffff;
}

.dev-tools-select:focus {
background:#101010;
border-color:#444444 #333333 #050505 #333333;
}
/* -----------------------------------------
Package installer
----------------------------------------- */

.dev-tools-package-section {
position:relative;
}

.dev-tools-file-input {
width:100%;
box-sizing:border-box;
min-height:24px;
padding:4px;
background:#080808;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#cfcfcf;
font-size:9px;
font-weight:700;
line-height:1.2;
outline:none;
text-shadow:1px 1px 0 #000;
}

.dev-tools-file-input:hover,
.dev-tools-file-input:focus {
background:#101010;
border-color:#444444 #333333 #050505 #333333;
color:#ffffff;
}

.dev-tools-package-summary {
min-height:20px;
padding:5px;
box-sizing:border-box;
background:#080808;
border:1px solid #202020;
color:#a8a8a8;
font-size:9px;
font-weight:700;
line-height:1.35;
text-shadow:1px 1px 0 #000;
}

.dev-tools-package-list {
max-height:185px;
overflow:auto;
background:#050505;
border:1px solid #1a1a1a;
padding:3px;
box-sizing:border-box;
}

.dev-tools-package-subtitle {
height:18px;
display:flex;
align-items:center;
padding:0 4px;
margin:3px 0;
box-sizing:border-box;
background:#101010;
border:1px solid #242424;
color:#d0d0d0;
font-size:8px;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
text-shadow:1px 1px 0 #000;
}

.dev-tools-package-row {
display:grid;
grid-template-columns:minmax(0, 1fr) 14px minmax(0, 1fr);
gap:3px;
align-items:center;
min-height:20px;
padding:2px 3px;
box-sizing:border-box;
border-bottom:1px solid #111111;
color:#bdbdbd;
font-size:8px;
font-weight:700;
line-height:1.25;
text-shadow:1px 1px 0 #000;
}

.dev-tools-package-row:last-child {
border-bottom:0;
}

.dev-tools-package-source,
.dev-tools-package-target {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.dev-tools-package-target {
color:#e2e2e2;
}

.dev-tools-package-arrow {
color:#777777;
text-align:center;
}

.dev-tools-package-skipped {
color:#777777;
}

.dev-tools-package-skipped .dev-tools-package-target {
color:#9a9a9a;
}

.dev-tools-package-empty {
min-height:20px;
display:flex;
align-items:center;
padding:0 4px;
color:#777777;
font-size:8px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
}


.dev-tools-svg-section .dev-tools-textarea,
.dev-tools-svg-textarea {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    box-sizing: border-box;
    background: #070707;
    color: #e2e2e2;
    border: 1px solid #2a2a2a;
    padding: 6px;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.45;
}

.dev-tools-svg-section .dev-tools-textarea:focus,
.dev-tools-svg-textarea:focus {
    outline: none;
    border-color: #4a4a4a;
}

.dev-tools-svg-summary {
    margin-top: 6px;
    color: #b8b8b8;
    font-size: 11px;
    line-height: 1.45;
}

.dev-tools-svg-list {
    margin-top: 6px;
}

/* -----------------------------------------
Decoration editor
----------------------------------------- */
.dev-tools-decoration-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:5px;
}

.dev-tools-decoration-grid label {
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
color:#8a8a8a;
font-size:8px;
font-weight:700;
letter-spacing:.35px;
line-height:1;
text-shadow:1px 1px 0 #000;
}

.dev-tools-decoration-grid .dev-tools-input {
height:22px;
padding:0 5px;
font-size:10px;
}

.dev-tools-decoration-continent-row {
display:grid;
grid-template-columns:minmax(0, 1fr) 108px;
gap:5px;
align-items:stretch;
}

.dev-tools-decoration-continent-readout {
min-width:0;
height:25px;
display:flex;
align-items:center;
padding:0 6px;
box-sizing:border-box;
background:#070707;
border:1px solid #202020;
border-top-color:#333333;
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1;
letter-spacing:.35px;
text-shadow:1px 1px 0 #000;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.dev-tools-decoration-scope-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
}

.dev-tools-decoration-scope-grid label {
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
color:#8a8a8a;
font-size:8px;
font-weight:700;
letter-spacing:.35px;
line-height:1;
text-shadow:1px 1px 0 #000;
}

.dev-tools-decoration-scope-grid .dev-tools-input {
height:22px;
padding:0 5px;
font-size:10px;
}

/* -----------------------------------------
Decoration layer editor v2
----------------------------------------- */
.dev-tools-decoration-section.is-editing {
border-color:#555555 #2b2b2b #050505 #2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
inset 0 -1px 0 rgba(0,0,0,0.76),
0 0 0 1px rgba(255,255,255,0.020);
}

.dev-tools-decoration-headline {
display:grid;
grid-template-columns:82px minmax(0, 1fr);
gap:5px;
}

.dev-tools-decoration-mode,
.dev-tools-decoration-page {
height:22px;
min-width:0;
display:flex;
align-items:center;
padding:0 6px;
box-sizing:border-box;
background:#070707;
border:1px solid #202020;
border-top-color:#333333;
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1;
letter-spacing:.35px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}

.dev-tools-decoration-section.is-editing .dev-tools-decoration-mode {
background:#1d1d1d;
border-color:#555555 #333333 #050505 #333333;
color:#ffffff;
}

.dev-tools-decoration-mainbar {
display:grid;
grid-template-columns:1.1fr .9fr .9fr;
gap:5px;
}

.dev-tools-decoration-layerbar {
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:5px;
}

.dev-tools-button.is-active,
#dev-tools-decoration-grid-toggle[data-grid="1"] {
background:linear-gradient(to bottom,#242424 0%,#1d1d1d 56%,#141414 100%);
border-color:#555555 #333333 #101010 #333333;
color:#ffffff;
}

.dev-tools-decoration-layer-list {
min-height:58px;
max-height:132px;
overflow:auto;
display:flex;
flex-direction:column;
gap:3px;
padding:4px;
background:#070707;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.58);
}

.dev-tools-decoration-layer {
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:6px;
width:100%;
min-height:25px;
padding:0 7px;
box-sizing:border-box;
background:#101010;
border:1px solid #202020;
color:#c8c8c8;
font-size:10px;
font-weight:700;
line-height:1;
text-align:left;
cursor:pointer;
text-shadow:1px 1px 0 #000;
}

.dev-tools-decoration-layer:hover {
background:#171717;
border-color:#333333;
color:#ffffff;
}

.dev-tools-decoration-layer.is-selected {
background:#1d1d1d;
border-color:#555555 #333333 #050505 #333333;
color:#ffffff;
}

.dev-tools-decoration-layer-name,
.dev-tools-decoration-layer-meta {
display:flex;
align-items:center;
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.dev-tools-decoration-layer-meta {
justify-content:flex-end;
color:#8a8a8a;
font-size:9px;
font-weight:700;
}

.dev-tools-decoration-empty {
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
color:#626262;
font-size:10px;
font-weight:700;
text-align:center;
}

.dev-tools-decoration-quickbar {
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
}

.dev-tools-decoration-work-preview {
touch-action:none;
outline:1px dashed rgba(216,216,216,.55) !important;
outline-offset:0;
box-shadow:0 0 0 1px #050505, 0 0 14px rgba(255,255,255,.10) !important;
filter:drop-shadow(0 2px 0 rgba(0,0,0,.65));
}

.dev-tools-decoration-work-preview.is-selected {
outline:1px dashed #ffffff !important;
box-shadow:0 0 0 1px #050505, 0 0 22px rgba(255,255,255,.26) !important;
}

.dev-tools-decoration-work-preview.is-dragging {
outline-style:solid !important;
}

.dev-tools-decoration-grid-overlay {
position:absolute;
inset:0;
z-index:2147483000;
pointer-events:none;
background-image:
linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px),
linear-gradient(to right, transparent calc(50% - 1px), rgba(255,255,255,.32) calc(50% - 1px), rgba(255,255,255,.32) calc(50% + 1px), transparent calc(50% + 1px)),
linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255,255,255,.32) calc(50% - 1px), rgba(255,255,255,.32) calc(50% + 1px), transparent calc(50% + 1px));
background-size:16px 16px, 16px 16px, 100% 100%, 100% 100%;
background-position:0 0, 0 0, 0 0, 0 0;
opacity:.72;
mix-blend-mode:screen;
}

body.clbi-decoration-edit-mode::before {
content:"DECORATION EDIT MODE";
position:fixed;
left:50%;
top:8px;
z-index:99997;
transform:translateX(-50%);
height:22px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
background:#101010;
border:1px solid #050505;
box-shadow:
inset 0 1px 0 #555555,
inset 0 -1px 0 #101010,
0 5px 16px rgba(0,0,0,.54);
color:#e2e2e2;
font-size:10px;
font-weight:700;
letter-spacing:.45px;
line-height:1;
text-shadow:1px 1px 0 #000;
pointer-events:none;
}