code:
:root {
    --jexcel_header_color: #888;
    --jexcel_header_color_highlighted: #444;
    --jexcel_header_background: #313131;
    --jexcel_header_background_highlighted: #777;
    --jexcel_content_color: #777;
    --jexcel_content_color_highlighted: #333;
    --jexcel_content_background: #3e3e3e;
    --jexcel_content_background_highlighted: #777;
    --jexcel_menu_background: #7e7e7e;
    --jexcel_menu_background_highlighted: #ebebeb;
    --jexcel_menu_color: #ddd;
    --jexcel_menu_color_highlighted: #222;
    --jexcel_border_color: #5f5f5f;
    --jexcel_border_color_highlighted: #999;
    --active_color: #eee;
    --active-color: var(--active_color);
}

.jexcel {
    border-bottom: 1px solid var(--jexcel_border_color);
    border-right: 1px solid var(--jexcel_border_color);
}

.jexcel > tbody > tr > td,
.jexcel > thead > tr > td {
    border-top: 1px solid var(--jexcel_border_color);
    border-left: 1px solid var(--jexcel_border_color);
    background-color: var(--jexcel_content_background);
    color: var(--jexcel_content_color);
}

.jexcel > tbody > tr > td:first-child,
.jexcel > thead > tr > td {
    background-color: var(--jexcel_header_background);
    color: var(--jexcel_header_color);
}

.jexcel > thead > tr > td.selected,
.jexcel > tbody > tr.selected > td:first-child {
    background-color: var(--jexcel_header_background_highlighted);
    color: var(--jexcel_header_color_highlighted);
}

.jexcel > tbody > tr > td.jexcel_cursor a {
    color: var(--active-color);
}

.jexcel_pagination > div > div {
    color: var(--jexcel_header_color);
    background: var(--jexcel_header_background);
    border: 1px solid var(--jexcel_border_color);
}

.jexcel_page,
.jexcel_container input,
.jexcel_container select {
    color: var(--jexcel_header_color);
    background: var(--jexcel_header_background);
    border: 1px solid var(--jexcel_border_color);
}

.jexcel_contextmenu {
    border: 1px solid var(--jexcel_border_color);
    background: var(--jexcel_menu_background);
    color: var(--jexcel_menu_color);
    box-shadow: var(--jexcel_menu_box_shadow);
    -webkit-box-shadow: var(--jexcel_menu_box_shadow);
    -moz-box-shadow: var(--jexcel_menu_box_shadow);
}

.jexcel_contextmenu > div a {
    color: var(--jexcel_menu_color);
}

.jexcel_contextmenu > div:not(.contextmenu-line):hover a {
    color: var(--jexcel_menu_color_highlighted);
}

.jexcel_contextmenu > div:not(.contextmenu-line):hover {
    background: var(--jexcel_menu_background_highlighted);
}

.jexcel_dropdown .jdropdown-container,
.jexcel_dropdown .jdropdown-content {
    background-color: var(--jexcel_content_background);
    color: var(--jexcel_content_color);
}

.jexcel_dropdown .jdropdown-item {
    color: var(--jexcel_content_color);
}

.jexcel_dropdown .jdropdown-item:hover,
.jexcel_dropdown .jdropdown-selected,
.jexcel_dropdown .jdropdown-cursor {
    background-color: var(--jexcel_content_background_highlighted);
    color: var(--jexcel_content_color_highlighted);
}

.jexcel .jcalendar-content {
    background-color: var(--jexcel_header_background);
    color: var(--jexcel_header_color);
}

.jexcel .jcalendar-content > table {
    background-color: var(--jexcel_content_background);
    color: var(--jexcel_content_color);
}

.jexcel .jcalendar-weekday {
    background-color: var(--jexcel_content_background_highlighted);
    color: var(--jexcel_content_color_highlighted);
}

.jexcel .jcalendar-sunday {
    color: var(--jexcel_header_color);
}

.jexcel .jcalendar-selected {
    background-color: var(--jexcel_content_background_highlighted);
    color: var(--jexcel_content_color_highlighted);
}

.jexcel_toolbar i.jexcel_toolbar_item {
    color: var(--jexcel_content_color);
}

.jexcel_toolbar i.jexcel_toolbar_item:hover {
    background: var(--jexcel_content_background_highlighted);
    color: var(--jexcel_content_color_highlighted);
}

.jexcel_toolbar {
    background: var(--jexcel_header_background);
}

.jexcel_content::-webkit-scrollbar-track {
    background: var(--jexcel_background_head);
}

.jexcel_content::-webkit-scrollbar-thumb {
    background: var(--jexcel_background_head_highlighted);
}

.jexcel_border_main {
    border: 1px solid #000;
    border-color: var(--jexcel_border_color_highlighted);
}

.jexcel .highlight {
    background-color: var(--jexcel_content_background_highlighted);
}

.jexcel .highlight-bottom {
    border-bottom: 1px solid var(--jexcel_border_color_highlighted);
}
.jexcel .highlight-right {
    border-right: 1px solid var(--jexcel_border_color_highlighted);
}
.jexcel .highlight-left {
    border-left: 1px solid var(--jexcel_border_color_highlighted);
}
.jexcel .highlight-top {
    border-top: 1px solid var(--jexcel_border_color_highlighted);
}
.jexcel .copying-top {
    border-top-color: var(--jexcel_border_color_highlighted);
}
.jexcel .copying-right {
    border-right-color: var(--jexcel_border_color_highlighted);
}
.jexcel .copying-left {
    border-left-color: var(--jexcel_border_color_highlighted);
}
.jexcel .copying-bottom {
    border-bottom-color: var(--jexcel_border_color_highlighted);
}
.jexcel_border_main, .jexcel .highlight-top.highlight-left, .jexcel .highlight-top, .jexcel .highlight-left {
    -webkit-box-shadow: unset;
    box-shadow: unset;
}


code:
    /* ライトモード（デフォルト）のスタイル */
    :root {
        --bg-color: #ffffff;
        --text-color: #000000;
        --header-bg: #f8f9fa;
        --border-color: #ccc;
        --cell-bg: #ffffff;
        --cell-bg-selected: #eef5fa;
        --button-bg: #f8f9fa;
        --button-text: #000000;
        --cell-bg-even: #ffffff;
        --cell-bg-odd: #f5f5f5;
        --input-text-color: #000000;
        --row-number-color: #666;
        --highlight-text-color: #0066cc;
    }

    /* ダークモードのスタイル */
    [data-theme="dark"] {
        --bg-color: #1a1a1a;
        --text-color: #efefef;
        --header-bg: #2d2d2d;
        --border-color: #404040;
        --cell-bg: #2d2d2d;
        --cell-bg-selected: #404040;
        --button-bg: #404040;
        --button-text: #ffffff;
        --cell-bg-even: #2d2d2d;
        --cell-bg-odd: #363636;
        --input-text-color: ##efefef;
        --row-number-color: #888;
        --highlight-text-color: #66b3ff;
    }

    body {
        background-color: var(--bg-color);
        color: var(--text-color);
        transition: background-color 0.3s, color 0.3s;
    }

    /* コンテナのスタイル */
    .container {
        width: 95vw;  /* ビューポート幅の90% */
        margin: 0;
        padding: 0 20px;
        min-width: 800px;  /* 最小幅を設定（必要に応じて調整） */
    }

    /* スプレッドシートのスタイル */
    #spreadsheet {
        margin-top: 20px;
        height: calc(100vh - 150px);
        overflow: auto;
        width: 100% !important;
        overflow-x: auto;
    }

    /* ヘッダー行を固定するスタイル */
    .jexcel>thead {
        position: sticky !important;
        top: 0;
        z-index: 2;
        background-color: var(--header-bg);
    }

    /* ヘッダーセルのスタイル */
    .jexcel>thead>tr>td {
        background-color: var(--header-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
        font-weight: bold;
        position: sticky !important;
        top: 0;
        z-index: 2;
        font-size: 0.85em !important;
        padding: 4px 6px !important;
    }

    /* jspreadsheetのカスタムスタイル */
    .jexcel {
        border-color: var(--border-color) !important;
    }

    .jexcel>tbody>tr>td {
        background-color: var(--cell-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    /* 編集中のセルのスタイル */
    .jexcel>tbody>tr>td>input,
    .jexcel>tbody>tr>td>textarea {
        color: var(--input-text-color) !important;
        background-color: var(--cell-bg) !important;
        border: 1px solid var(--border-color) !important;
    }

    /* jsuites input スタイルの上書き */
    .jexcel .jexcel_richtext {
        color: var(--input-text-color) !important;
        background-color: var(--cell-bg) !important;
    }

    /* エディタモードのスタイル */
    .jexcel_content {
        color: var(--input-text-color) !important;
        background-color: var(--cell-bg) !important;
        width: 100% !important;
    }

    /* jsuites editor のスタイル */
    .jexcel .jexcel-editor {
        color: var(--input-text-color) !important;
        background-color: var(--cell-bg) !important;
    }

    /* インラインエディタのスタイル */
    .jexcel-editor {
        color: var(--input-text-color) !important;
        background-color: var(--cell-bg) !important;
    }

    /* ドロップダウンのスタイル */
    .jexcel>tbody>tr>td>select {
        color: var(--input-text-color) !important;
        background-color: var(--cell-bg) !important;
    }

    /* 編集モードのセルのスタイル */
    .jexcel>tbody>tr>td.edition {
        color: var(--input-text-color) !important;
        background-color: var(--cell-bg) !important;
    }

    .jexcel>tbody>tr>td.highlight {
        background-color: var(--cell-bg-selected) !important;
    }

    /* 偶数行と奇数行の背景色を設定 */
    .jexcel>tbody>tr:nth-child(even)>td {
        background-color: var(--cell-bg-even) !important;
    }

    .jexcel>tbody>tr:nth-child(odd)>td {
        background-color: var(--cell-bg-odd) !important;
    }

    /* 選択時のスタイルを優先 */
    .jexcel>tbody>tr>td.highlight {
        background-color: var(--cell-bg-selected) !important;
    }

    /* コントロール部分のスタイル */
    .controls {
        padding: 10px;
        background-color: var(--bg-color);
    }

    .controls button {
        background-color: var(--button-bg);
        color: var(--button-text);
        border: 1px solid var(--border-color);
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .controls button:hover {
        opacity: 0.8;
    }

    .controls button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    #darkModeToggle {
        float: right;
        font-size: 1.2em;
        padding: 5px 10px;
    }

    /* ツールチップのスタイル */
    .tooltip {
        position: relative;
        display: inline-block;
    }

    .tooltip .tooltip-text {
        visibility: hidden;
        background-color: var(--header-bg);
        color: var(--text-color);
        text-align: center;
        padding: 5px 10px;
        border-radius: 6px;
        border: 1px solid var(--border-color);

        /* ツールチップの位置 */
        position: absolute;
        z-index: 1;
        width: 200px;
        bottom: 100%;
        left: 50%;
        margin-left: -100px;

        /* フェードイン効果 */
        opacity: 0;
        transition: opacity 0.3s;
    }

    /* 矢印 */
    .tooltip .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: var(--border-color) transparent transparent transparent;
    }

    /* ホバー時の表示 */
    .tooltip:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }

    /* 既存のtooltipスタイルを削除し、新しいスタイルを追加 */
    .jexcel-tooltip {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    /* ヘルプボタンのスタイル */
    .help-link {
        text-decoration: none;
        float: right;
        margin-right: 10px;
    }

    .help-button {
        background-color: var(--button-bg);
        color: var(--button-text);
        border: 1px solid var(--border-color);
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 1.2em;
    }

    .help-button:hover {
        opacity: 0.8;
        background-color: var(--cell-bg-selected);
    }

    .jexcel-tooltip-content {
        display: none;
        position: absolute;
        background-color: var(--header-bg);
        color: var(--text-color);
        padding: 8px;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        width: 200px;
        z-index: 1000;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        font-weight: normal;
        font-size: 12px;
        white-space: normal;
    }

    .jexcel-tooltip:hover .jexcel-tooltip-content {
        display: block;
    }

    /* 矢印の追加 */
    .jexcel-tooltip-content::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 0 6px 6px 6px;
        border-style: solid;
        border-color: transparent transparent var(--border-color) transparent;
    }

    /* ハイライトスタイル */
    .highlight-error {
        color: #e74c3c;
        /* font-weight: bold; */
    }

    .highlight-function {
        color: #e74c3c;
    }

    .highlight-variable {
        color: #007bff;
    }
    .highlight-green {
        color: #00533c;
    }
    /* ダークモード */
    [data-theme='dark'] .highlight-error {
        color: #ff7675;
    }

    [data-theme='dark'] .highlight-function {
        color: #f39212;
    }

    [data-theme='dark'] .highlight-variable {
        color: #00c3ff;
    }

    [data-theme='dark'] .highlight-green {
        color: #00c089;
    }
    /* テキストセルのスタイル調整 */
    .jexcel td {
        white-space: pre-wrap !important; /* 改行を保持 */
        line-height: 1.4;
    }

    /* ボタンセクションのスタイル */
    .button-section {
        display: flex;
        align-items: center;
        gap: 10px;  /* ボタン間の間隔を統一 */
        padding: 10px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        width: 100%;
        margin-bottom: 10px;
    }

    /* 共通のボタンスタイル */
    .button-section button {
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* インポートボタンのスタイル */
    .import-button {
        background-color: #4834d4;  /* 紫がかった青 */
        color: white;
        border: 1px solid #3c28b8;
    }

    .import-button:hover {
        background-color: #686de0;
        border-color: #4834d4;
    }

    /* エクスポートボタンのスタイル */
    .export-button {
        background-color: #2ecc71;  /* 緑 */
        color: white;
        border: 1px solid #27ae60;
    }

    .export-button:hover {
        background-color: #27ae60;
        border-color: #219a52;
    }

    /* 無効化状態のスタイル */
    .export-button:disabled {
        background-color: #95a5a6;
        border-color: #7f8c8d;
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* ダークモード対応 */
    [data-theme='dark'] .import-button {
        background-color: #5f27cd;
        border-color: #4834d4;
    }

    [data-theme='dark'] .import-button:hover {
        background-color: #786fa6;
        border-color: #5f27cd;
    }

    [data-theme='dark'] .export-button {
        background-color: #00b894;
        border-color: #00a885;
    }

    [data-theme='dark'] .export-button:hover {
        background-color: #00a885;
        border-color: #009876;
    }

    [data-theme='dark'] .export-button:disabled {
        background-color: #636e72;
        border-color: #2d3436;
    }

    /* ユーティリティボタン（ダークモード・ヘルプ）のスタイル */
    .utility-button {
        width: 36px;  /* 正方形のボタン */
        padding: 0 !important;
        margin-right: auto;  /* 左寄せ */
    }

    /* ファイル情報のスタイル */
    #fileInfo {
        margin-left: auto;  /* 右寄せ */
        color: #6c757d;
        font-size: 14px;
    }

    /* ボタンホバー効果 */
    .button-section button:hover {
        background-color: #f8f9fa;
        border-color: #adb5bd;
    }

    /* ダークモード対応 */
    [data-theme='dark'] .button-section {
        background-color: #2d3436;
        border-bottom-color: #4a5568;
    }

    [data-theme='dark'] .button-section button {
        background-color: #2d3436;
        border-color: #4a5568;
        color: #f8f9fa;
    }

    [data-theme='dark'] .button-section button:hover {
        background-color: #4a5568;
        border-color: #718096;
    }

    [data-theme='dark'] #fileInfo {
        color: #a0aec0;
    }

    /* レスポンシブ対応 */
    @media screen and (max-width: 840px) {  /* スクロールバーの幅も考慮 */
        .container {
            padding: 0 10px;  /* 小さい画面では余白を減らす */
        }
    }

repo_name: napo/erafl

license: unknown


code:
<link rel="stylesheet" href="css/jsuites.css" type="text/css" />
<link rel="stylesheet" href="css/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />

                <button id="darkModeToggle" class="utility-button">🌙</button>
                <button class="utility-button help-button" title="口上作成ガイドを開く"
                    onclick="window.open('https://docs.google.com/spreadsheets/d/1THU0zlp2WFZzTKuAy5B5ZjhxJaqSWndKpku--18X3V8/edit?gid=572982793#gid=572982793', '_blank')">❔</button>

            <input type="file" id="xmlFile" accept=".xml" style="display: none;" />
            <button id="importCommandXml" class="import-button">コマンド口上XMLをインポート</button>
            <button id="importEventXml" class="import-button">イベント口上XMLをインポート</button>
            <button id="importCombatXml" class="import-button">戦闘口上XMLをインポート</button>
            <button id="exportButton" class="export-button" disabled>口上XMLをエクスポート</button>
            ファイルが選択されていません


code:
<link rel="stylesheet" href="css/jsuites.css" type="text/css" />
<link rel="stylesheet" href="css/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />

                <button id="darkModeToggle" class="utility-button">🌙</button>
                <button class="utility-button help-button" title="ヘルプを開く"
                    onclick="window.open('https://docs.google.com/spreadsheets/d/1THU0zlp2WFZzTKuAy5B5ZjhxJaqSWndKpku--18X3V8/edit?gid=572982793#gid=572982793', '_blank')">❔</button>

            <input type="file" id="xmlFile" accept=".xml" style="display: none;" />
            <button id="importCommandXml" class="import-button">エネミーデータXMLをインポート</button>
            <button id="saveAsButton" class="export-button" disabled>XMLをエクスポート</button>
            ファイルが選択されていません


code:
const sourceTableContextMenuItems = (obj, x, y, e) => {
    let items = [];
    if (obj.options.allowInsertRow == true) {
        items.push({
            title: obj.options.text.insertANewRowBefore,
            onclick: function() {
                obj.insertRow(1, parseInt(y), 1);
            }
        });

        items.push({
            title: obj.options.text.insertANewRowAfter,
            onclick: function() {
                obj.insertRow(1, parseInt(y));
            }
        });
    }
    // undoが正しく機能しないのでいったん保留
    // items.push({
    //     title: obj.options.text.duplicateSelectedRow,
    //     onclick: function() {
    //         // 現在の状態をundoスタックに保存
    //         // obj.undo.saveState();

    //         // 選択された行のデータを取得と複製
    //         const selectedRow = parseInt(y);
    //         const rowData = obj.getRowData(selectedRow);

    //         // 行を挿入してデータをセット
    //         obj.insertRow(1, selectedRow);
    //         const newRowIndex = selectedRow + 1;
    //         obj.setRowData(newRowIndex, rowData);

    //         // 新しい状態をundoスタックに保存
    //         // obj.undo.saveState();

    //         // エクスポートボタンを有効化
    //         document.getElementById('exportButton').disabled = false;
    //     }
    // });

    if (obj.options.allowDeleteRow == true) {
        items.push({
            title: obj.options.text.deleteSelectedRows,
            onclick: () => {
                obj.deleteRow(obj.getSelectedRows().length ? undefined : parseInt(y));
            },
        });
        items.push({
            title: obj.options.text.paste,
            shortcut: 'Ctrl + V',
            onclick: () => {
                if (obj.selectedCell) {
                    navigator.clipboard.readText().then((text) => {
                        if (text) {
                            jspreadsheet.current.paste(obj.selectedCell[0], obj.selectedCell[1], text);
                        }
                    });
                }
            },
        });
        items.push({
            title: obj.options.text.copy,
            shortcut: 'Ctrl + C',
            onclick: () => {
                obj.copy();
            },
        });
    }
    return items;
};