op-packages/luci-theme-design/htdocs/luci-static/design/css/compat-openwrt23.css

/**
 * OpenWrt 23/24 兼容性样å¼<C3A5>è¡¥ä¸?
 * 
 * 这个文件包å<E280A6>«é’ˆå¯¹ OpenWrt 23.x å’?24.x çš„æ ·å¼<C3A5>ä¿®å¤?
 * 新版 LuCI 使用了一些新çš?CSS ç±»å<C2BB><C3A5>和结æž?
 */

/* ============================================
   1. 新版 LuCI 视图容器兼容
   ============================================ */

/* 新版 LuCI 使用 #view 作为主è¦<C3A8>内容容器 */
#view {
    padding: 0;
}

#view > * {
    margin-bottom: 1rem;
}

/* 兼容新版 LuCI �.cbi-map 结构 */
.cbi-map {
    margin-top: 10px;
}

/* ============================================
   2. 新版表å<C2A8>•å…ƒç´ æ ·å¼<C3A5>
   ============================================ */

/* 新版 LuCI çš?input æ ·å¼<C3A5>兼容 */
.cbi-input-text,
.cbi-input-password,
.cbi-input-select {
    color: var(--inputtext_color);
    padding: 5px 10px;
    font-size: 0.92rem;
    border: var(--input_border);
    background-color: var(--inputbg_color);
    border-radius: 8px;
    height: 2.8rem;
    line-height: 2.8rem;
    max-width: 550px;
}

/* 新版 checkbox å’?radio æ ·å¼<C3A5> */
.cbi-input-checkbox,
.cbi-input-radio {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    accent-color: var(--active_color);
}

/* ============================================
   3. 新版按钮样å¼<C3A5>兼容
   ============================================ */

/* 新版 LuCI 按钮类å<C2BB><C3A5> */
.btn.cbi-button,
button.cbi-button {
    -webkit-appearance: none;
    appearance: none;
    text-transform: uppercase;
    color: #fff;
    background-color: #337ab7;
    transition: all 0.2s ease-in-out;
    display: inline-block;
    border: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    min-width: 80px;
    padding: 0 8px;
    height: 35px;
    line-height: 35px;
    border-radius: 8px;
}

/* 新版 primary/positive 按钮 */
.cbi-button-positive,
.cbi-button-action {
    color: var(--bttext_color) !important;
    background-color: var(--active_color) !important;
}

.cbi-button-positive:hover,
.cbi-button-action:hover {
    background-color: #4a8a80 !important;
}

/* 新版 negative 按钮 */
.cbi-button-negative {
    color: #fff !important;
    background-color: #d9534f !important;
}

.cbi-button-negative:hover {
    background-color: #c9302c !important;
}

/* 新版 neutral 按钮 */
.cbi-button-neutral {
    color: #fff !important;
    background-color: #617486 !important;
}

/* ============================================
   4. 新版表格样å¼<C3A5>兼容
   ============================================ */

/* 新版 LuCI 表格结构 */
.table.cbi-section-table {
    width: 100%;
    border-collapse: collapse;
}

.table.cbi-section-table .tr {
    display: table-row;
}

.table.cbi-section-table .th,
.table.cbi-section-table .td {
    display: table-cell;
    padding: 12px;
    vertical-align: middle;
}

/* 新版表格标题�*/
.tr.cbi-section-table-titles {
    background-color: var(--inputbg_color);
    font-weight: bold;
}

/* ============================================
   5. 新版下拉è<E280B0>œå<C593>•å…¼å®¹
   ============================================ */

/* 新版 cbi-dropdown æ ·å¼<C3A5> */
.cbi-dropdown {
    position: relative;
    display: inline-flex;
    min-height: 2.8rem;
    border: var(--input_border);
    background-color: var(--inputbg_color);
    border-radius: 8px;
}

.cbi-dropdown > ul {
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.cbi-dropdown > ul > li {
    display: flex;
    align-items: center;
    padding: 0.5em;
}

.cbi-dropdown[open] > ul.dropdown {
    position: absolute;
    z-index: 1100;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sectionbg_color);
    border: var(--input_border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cbi-dropdown[open] > ul.dropdown > li {
    padding: 0.5em 1em;
    cursor: pointer;
}

.cbi-dropdown[open] > ul.dropdown > li:hover {
    background-color: var(--active_color);
    color: #fff;
}

/* ============================================
   6. 新版标签页样å¼<C3A5>å…¼å®?
   ============================================ */

/* 新版 LuCI 标签�*/
.cbi-tabmenu {
    display: flex;
    flex-wrap: wrap;
    border-bottom: var(--tabmenu_bottom);
    margin-bottom: 1rem;
}

.cbi-tabmenu > li {
    display: inline-block;
    margin-right: 0.5rem;
}

.cbi-tabmenu > li > a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--text_color);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.cbi-tabmenu > li.cbi-tab > a,
.cbi-tabmenu > li > a:hover {
    color: var(--active_color);
    border-bottom-color: var(--active_color);
}

/* ============================================
   7. 新版模æ€<C3A6>框样å¼<C3A5>兼容
   ============================================ */

/* 新版 modal æ ·å¼<C3A5> */
.modal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 90%;
    max-width: 600px;
    min-height: 32px;
    margin: 5em auto;
    padding: 1em;
    border-radius: 8px;
    background: var(--model_background);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal > * {
    flex-basis: 100%;
    margin-bottom: 0.5em;
}

.modal > h4 {
    color: var(--text_color);
    margin-bottom: 1em;
}

.modal > .btn,
.modal > .cbi-button {
    flex-basis: auto;
    margin: 0.25em;
}

/* ============================================
   8. 新版进度æ<C2A6>¡æ ·å¼<C3A5>å…¼å®?
   ============================================ */

/* 新版进度æ<C2A6>?*/
.cbi-progressbar {
    position: relative;
    min-width: 11rem;
    height: 1.5rem;
    background-color: var(--progressbar_color);
    border-radius: 5px;
    overflow: hidden;
}

.cbi-progressbar > div {
    height: 100%;
    background: var(--progressbar);
    transition: width 0.25s ease-in;
}

.cbi-progressbar::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: attr(title);
    text-align: center;
    line-height: 1.5rem;
    font-size: 0.75rem;
    color: var(--progressbartxt_color);
}

/* ============================================
   9. 新版状æ€<C3A6>指示器兼容
   ============================================ */

/* 新版状æ€<C3A6>å¾½ç«?*/
.ifacebadge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.6rem;
    background-color: var(--active_color);
    color: #fff;
    border-radius: 8px;
    font-size: 0.85rem;
}

.ifacebadge > img,
.ifacebadge > em {
    width: 16px;
    height: 16px;
}

/* 区域徽章 */
.zonebadge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* ============================================
   10. 新版å“<C3A5>应å¼<C3A5>布局兼容
   ============================================ */

@media screen and (max-width: 992px) {
    /* 新版移动端è<C2AF>œå<C593>?*/
    .main-left {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .main-left.active,
    .main-left[style*="width: 17rem"],
    .main-left:not([style*="width: 0"]) {
        transform: translateX(0);
    }
}

/* ============================================
   11. 新版 LuCI 特定页é<C2B5>¢ä¿®å¤<C3A5>
   ============================================ */

/* 系统概览页é<C2B5>¢ */
[data-page="admin-status-overview"] .cbi-section {
    margin-bottom: 1rem;
}

/* 网络接å<C2A5>£é¡µé<C2B5>¢ */
[data-page="admin-network-network"] .ifacebox {
    margin: 0.5rem;
    border-radius: 8px;
    overflow: hidden;
}

/* 无线页é<C2B5>¢ */
[data-page="admin-network-wireless"] .cbi-section-table {
    overflow-x: auto;
}

/* 软件包页é<C2B5>?*/
[data-page="admin-system-opkg"] .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

[data-page="admin-system-opkg"] .controls input[type="text"] {
    flex: 1;
    min-width: 200px;
}

/* ============================================
   12. 深色模å¼<C3A5>增强
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* 新版深色模å¼<C3A5>下的代ç <C3A7>å<EFBFBD>?*/
    code, pre {
        background-color: #2d2d2d;
        color: #f8f8f2;
    }
    
    /* 新版深色模å¼<C3A5>下的表格 */
    .table.cbi-section-table .tr:nth-child(even) {
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    /* 新版深色模å¼<C3A5>下的输入æ¡?*/
    .cbi-input-text:focus,
    .cbi-input-password:focus,
    .cbi-input-select:focus {
        border-color: var(--active_color);
        box-shadow: 0 0 6px var(--active_color);
    }
}

/* ============================================
   13. 打å<E2809C>°æ ·å¼<C3A5>
   ============================================ */

@media print {
    .main-left,
    .navbar,
    header,
    .showSide,
    .darkMask {
        display: none !important;
    }
    
    .main-right {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ============================================
   14. æ— éšœç¢<C3A7>访问增å¼?
   ============================================ */

/* 焦点å<C2B9>¯è§<C3A8>æ€?*/
:focus-visible {
    outline: 2px solid var(--active_color);
    outline-offset: 2px;
}

/* å‡<C3A5>少动画 (用户å<C2B7><C3A5>好) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}