mixly3/common/templates/html/statusbar/statusbar-serial.html

<style>
    div[m-id="{{d.mId}}"] {
        position: relative;
        width: 100%;
        height: 100%;
    }

    div[m-id="{{d.mId}}"] > .content {
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 25px;
    }

    div[m-id="{{d.mId}}"] > .send {
        position: absolute;
        left: 0px;
        bottom: 0px;
        right: 0px;
        height: 25px;
        display: flex;
        flex-direction: row;
        z-index: 1;
    }

    div[m-id="{{d.mId}}"] > .send > .box {
        flex-grow: 1;
        height: 100%;
        font-size: 13px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        position: relative;
    }

    div[m-id="{{d.mId}}"] > .send > .box > input {
        font-family: Consolas, "Courier New", monospace;
        position: absolute;
        height: 100%;
        width: 100%;
        border-style: solid;
        border-width: 1px;
        padding-left: 5px;
        padding-right: 100px;
    }

    div[m-id="{{d.mId}}"] > .send > .box > .setting {
        position: absolute;
        right: 0px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
    }

    div[m-id="{{d.mId}}"] > .send > .box > .setting label {
        height: 18px;
        font-size: 11px;
        padding: 2px;
        margin: auto 5px auto 0px;
        line-height: 15px;
        border-radius: 2px;
    }

    html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > .box > .setting label {
        border-color: #c9c9c9;
        color: #000;
    }

    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > .box > .setting label {
        border-color: rgba(128, 128, 128, 0.35);
        color: #fff;
    }

    html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > .box > .setting .btn-check:checked+.btn {
        background-color: var(--app-light-color);
        border-color: var(--app-light-color);
        color: #fff;
    }

    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > .box > .setting .btn-check:checked+.btn {
        background-color: var(--app-dark-color);
        border-color: var(--app-dark-color);
    }

    div[m-id="{{d.mId}}"] > .send > .select2 {
        border-style: solid;
        border-width: 1px 1px 1px 0;
    }

    html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > *,
    html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > .box > input,
    html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send .select2-selection--single {
        border-color: #c9c9c9;
        background-color: #ffffff;
    }

    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > *,
    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > .box > input,
    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send .select2-selection--single {
        border-color: rgba(128, 128, 128, 0.35);
        background-color: #1e1e1e;
    }

    div[m-id="{{d.mId}}"] > .send .select2-selection--single {
        height: 23px;
        border: none;
        border-radius: 0px;
    }

    div[m-id="{{d.mId}}"] > .send .select2-selection--single > span {
        height: 23px;
        line-height: 24px;
    }

    html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > .setting-menu > option:checked {
      color: white;
      background-color: var(--app-light-color);
    }

    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > .setting-menu > option:checked {
      color: white;
      background-color: var(--app-dark-color);
    }

    html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > .box > input:focus {
        border-color: var(--app-light-color) !important;
    }

    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > .box > input:focus {
        border-color: var(--app-dark-color) !important;
    }
</style>
<div m-id="{{ d.mId }}">
    <div class="content"></div>
    <div class="send">
        <div class="box">
            <input type="text" placeholder="{{d.sendInfo}}" autocomplete="off" disabled>
            <div class="setting">
                <input type="checkbox" class="btn-check hex" id="{{ d.mId }}-hex" autocomplete="off">
                <label class="btn btn-outline-primary" for="{{ d.mId }}-hex">HEX</label><br>
                <input type="checkbox" class="btn-check dtr" id="{{ d.mId }}-dtr" autocomplete="off">
                <label class="btn btn-outline-primary" for="{{ d.mId }}-dtr">DTR</label><br>
                <input type="checkbox" class="btn-check rts" id="{{ d.mId }}-rts" autocomplete="off">
                <label class="btn btn-outline-primary" for="{{ d.mId }}-rts">RTS</label><br>
            </div>
        </div>
        <select data-id="send-with" class="setting-menu" style="width: 60px;">
            <option value="no">no</option>
            <option value="\n">\n</option>
            <option value="\r">\r</option>
            <option value="\r\n" selected>\r\n</option>
        </select>
        <select data-id="baud" class="setting-menu" style="margin-right: 2px;border-right-width: 0;width: 90px;">
            <option value="300">300</option>
            <option value="600">600</option>
            <option value="750">750</option>
            <option value="1200">1200</option>
            <option value="2400">2400</option>
            <option value="4800">4800</option>
            <option value="9600" selected>9600</option>
            <option value="19200">19200</option>
            <option value="31250">31250</option>
            <option value="38400">38400</option>
            <option value="57600">57600</option>
            <option value="74880">74880</option>
            <option value="115200">115200</option>
            <option value="230400">230400</option>
            <option value="250000">250000</option>
            <option value="460800">460800</option>
            <option value="500000">500000</option>
            <option value="921600">921600</option>
            <option value="1000000">1000000</option>
            <option value="2000000">2000000</option>
        </select>
    </div>
</div>