yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

插件UI
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-12-28 14:04:05 +08:00
parent feddfc2e64
commit 4c8fb130ba
2 changed files with 192 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
plugins/addon/theme_configurator/template/admin/index.html
View File

@@ -3,7 +3,6 @@
<div id="theme-config-app" class="admin-container" v-cloak> <div id="theme-config-app" class="admin-container" v-cloak>
<!-- 顶部工具栏 --> <!-- 顶部工具栏 -->
<header class="admin-header"> <header class="admin-header">
<div class="admin-header__left">
<div class="admin-logo"> <div class="admin-logo">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -12,8 +11,6 @@
</svg> </svg>
<span>黑果云模板控制器</span> <span>黑果云模板控制器</span>
</div> </div>
</div>
<div class="admin-header__right">
<button class="btn btn-primary btn-lg" @click="saveConfig" :disabled="saving"> <button class="btn btn-primary btn-lg" @click="saveConfig" :disabled="saving">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" v-if="!saving"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" v-if="!saving">
<path d="M13.5 2.5H2.5V13.5H13.5V2.5Z" stroke="currentColor" stroke-width="1.5"/> <path d="M13.5 2.5H2.5V13.5H13.5V2.5Z" stroke="currentColor" stroke-width="1.5"/>
@@ -23,57 +20,61 @@
<span v-if="saving">保存中...</span> <span v-if="saving">保存中...</span>
<span v-else>保存全部配置</span> <span v-else>保存全部配置</span>
</button> </button>
</div>
</header> </header>
<!-- 主体布局 --> <!-- Tab导航 -->
<div class="admin-layout"> <nav class="admin-tabs">
<!-- 侧边栏导航 --> <a class="tab-item" :class="{active: activeSection === 'basic'}" @click.prevent="activeSection = 'basic'">
<aside class="admin-sidebar"> <svg viewBox="0 0 24 24" fill="none">
<nav class="sidebar-nav">
<a href="#basic" class="nav-item" :class="{active: activeSection === 'basic'}" @click="activeSection = 'basic'">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/> <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
<line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" stroke-width="2"/> <line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" stroke-width="2"/>
<line x1="9" y1="21" x2="9" y2="9" stroke="currentColor" stroke-width="2"/> <line x1="9" y1="21" x2="9" y2="9" stroke="currentColor" stroke-width="2"/>
</svg> </svg>
<span>基础配置</span> 基础配置
</a> </a>
<a href="#seo" class="nav-item" :class="{active: activeSection === 'seo'}" @click="activeSection = 'seo'"> <a class="tab-item" :class="{active: activeSection === 'seo'}" @click.prevent="activeSection = 'seo'">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <svg viewBox="0 0 24 24" fill="none">
<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/> <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
<path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg> </svg>
<span>SEO设置</span> SEO设置
</a> </a>
<a href="#home" class="nav-item" :class="{active: activeSection === 'home'}" @click="activeSection = 'home'"> <a class="tab-item" :class="{active: activeSection === 'home'}" @click.prevent="activeSection = 'home'">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <svg viewBox="0 0 24 24" fill="none">
<path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2"/> <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2"/>
</svg> </svg>
<span>首页内容</span> 首页内容
</a> </a>
<a href="#nav" class="nav-item" :class="{active: activeSection === 'nav'}" @click="activeSection = 'nav'"> <a class="tab-item" :class="{active: activeSection === 'nav'}" @click.prevent="activeSection = 'nav'">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <svg viewBox="0 0 24 24" fill="none">
<line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="3" y1="6" x2="21" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <line x1="3" y1="6" x2="21" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="3" y1="18" x2="21" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <line x1="3" y1="18" x2="21" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg> </svg>
<span>导航配置</span> 导航配置
</a> </a>
<a href="#advanced" class="nav-item" :class="{active: activeSection === 'advanced'}" @click="activeSection = 'advanced'"> <a class="tab-item" :class="{active: activeSection === 'footer'}" @click.prevent="activeSection = 'footer'">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <svg viewBox="0 0 24 24" fill="none">
<rect x="3" y="17" width="18" height="4" stroke="currentColor" stroke-width="2"/>
<line x1="3" y1="3" x2="21" y2="3" stroke="currentColor" stroke-width="2"/>
<line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/>
</svg>
底部/链接
</a>
<a class="tab-item" :class="{active: activeSection === 'advanced'}" @click.prevent="activeSection = 'advanced'" v-if="showAdvanced">
<svg viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/> <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
<path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg> </svg>
<span>高级设置</span> 高级设置
</a> </a>
</nav> </nav>
</aside>
<!-- 主内容区 --> <!-- 主内容区 -->
<main class="admin-main"> <main class="admin-main">
<section id="basic" class="config-section" :class="{active: activeSection === 'basic'}"> <section id="basic" class="config-section" :class="{active: activeSection === 'basic'}">
<div class="section-card"> <div class="section-card">
<div class="section-header"> <div class="section-header">
@@ -600,7 +601,7 @@
<t-button class="ml-10" variant="outline" @click="toggleAdvanced"> <t-button class="ml-10" variant="outline" @click="toggleAdvanced">
{{ showAdvanced ? "隐藏高级 JSON" : "显示高级 JSON" }} {{ showAdvanced ? "隐藏高级 JSON" : "显示高级 JSON" }}
</t-button> </t-button>
</div> </main>
</div> </div>
<script src="/plugins/addon/theme_configurator/template/admin/lang/index.js"> </main> <script src="/plugins/addon/theme_configurator/template/admin/lang/index.js"> </main>

341
plugins/addon/theme_configurator/template/admin/theme.css
View File

@@ -1,6 +1,6 @@
/* ============================================ /* ============================================
黑果云模板控制器 - 现代管理后台 黑果云模板控制器 - 顶部Tab样式
设计风格: 侧边栏 + 卡片式 + Ant Design配色 设计风格: 现代化标签页 + 卡片式 + Ant Design配色
============================================ */ ============================================ */
:root { :root {
@@ -13,18 +13,16 @@
/* 背景色 */ /* 背景色 */
--bg-body: #f0f2f5; --bg-body: #f0f2f5;
--bg-container: #ffffff; --bg-container: #ffffff;
--bg-sidebar: #001529;
--bg-header: #ffffff; --bg-header: #ffffff;
/* 文字色 */ /* 文字色 */
--text-primary: #262626; --text-primary: #262626;
--text-secondary: #595959; --text-secondary: #595959;
--text-tertiary: #8c8c8c; --text-tertiary: #8c8c8c;
--text-light: rgba(255, 255, 255, 0.85);
/* 边框色 */ /* 边框色 */
--border: #d9d9d9; --border: #d9d9d9;
--border-light: #e8e8e8; --border-light: #e8e8f0;
--border-lighter: #f0f0f0; --border-lighter: #f0f0f0;
/* 间距 */ /* 间距 */
@@ -34,13 +32,8 @@
/* 阴影 */ /* 阴影 */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
} }
/* ============================================
全局样式
============================================ */
[v-cloak] { [v-cloak] {
display: none; display: none;
} }
@@ -60,8 +53,10 @@ body {
.admin-container { .admin-container {
min-height: 100vh; min-height: 100vh;
display: flex; background: var(--bg-body);
flex-direction: column; padding: var(--spacing-lg);
max-width: 1400px;
margin: 0 auto;
} }
/* ============================================ /* ============================================
@@ -69,29 +64,21 @@ body {
============================================ */ ============================================ */
.admin-header { .admin-header {
height: 60px; background: var(--bg-container);
background: var(--bg-header); border-radius: 8px 8px 0 0;
border-bottom: 1px solid var(--border-light); padding: var(--spacing-lg);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 var(--spacing-lg); border-bottom: 1px solid var(--border-lighter);
position: sticky; margin-bottom: 0;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
}
.admin-header__left {
display: flex;
align-items: center;
} }
.admin-logo { .admin-logo {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
font-size: 16px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -100,70 +87,53 @@ body {
color: var(--primary); color: var(--primary);
} }
.admin-header__right {
display: flex;
align-items: center;
gap: 12px;
}
/* ============================================ /* ============================================
主体布局 Tab导航
============================================ */ ============================================ */
.admin-layout { .admin-tabs {
background: var(--bg-container);
border-bottom: 1px solid var(--border-lighter);
display: flex; display: flex;
flex: 1; gap: 8px;
overflow: hidden; padding: 0 var(--spacing-lg);
} }
/* ============================================ .tab-item {
侧边栏 position: relative;
============================================ */ padding: 14px 20px;
color: var(--text-secondary);
.admin-sidebar {
width: 220px;
background: var(--bg-sidebar);
overflow-y: auto;
flex-shrink: 0;
}
.sidebar-nav {
padding: var(--spacing-md) 0;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px var(--spacing-lg);
color: var(--text-light);
text-decoration: none; text-decoration: none;
transition: all 0.3s;
cursor: pointer; cursor: pointer;
border-left: 3px solid transparent; transition: all 0.3s;
border-bottom: 2px solid transparent;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
} }
.nav-item svg { .tab-item svg {
flex-shrink: 0; width: 16px;
height: 16px;
opacity: 0.7; opacity: 0.7;
} }
.nav-item:hover { .tab-item:hover {
background: rgba(255, 255, 255, 0.08); color: var(--primary);
color: #ffffff;
} }
.nav-item:hover svg { .tab-item:hover svg {
opacity: 1; opacity: 1;
} }
.nav-item.active { .tab-item.active {
background: var(--primary); color: var(--primary);
border-left-color: #ffffff; border-bottom-color: var(--primary);
color: #ffffff;
} }
.nav-item.active svg { .tab-item.active svg {
opacity: 1; opacity: 1;
} }
@@ -172,9 +142,10 @@ body {
============================================ */ ============================================ */
.admin-main { .admin-main {
flex: 1; background: var(--bg-container);
overflow-y: auto; border-radius: 0 0 8px 8px;
padding: var(--spacing-lg); padding: var(--spacing-lg);
min-height: 600px;
} }
.config-section { .config-section {
@@ -191,34 +162,27 @@ body {
.section-card { .section-card {
background: var(--bg-container); background: var(--bg-container);
border: 1px solid var(--border-lighter);
border-radius: 8px; border-radius: 8px;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid var(--border-lighter);
overflow: hidden; overflow: hidden;
} }
.section-header { .section-header {
padding: 20px var(--spacing-lg); padding: 16px var(--spacing-lg);
border-bottom: 1px solid var(--border-lighter); border-bottom: 1px solid var(--border-lighter);
background: #fafafa;
} }
.section-header h2 { .section-header h2 {
margin: 0 0 4px 0; margin: 0;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.section-header h2 svg {
color: var(--primary);
flex-shrink: 0;
} }
.section-desc { .section-desc {
margin: 0; margin: 4px 0 0 0;
font-size: 13px; font-size: 13px;
color: var(--text-tertiary); color: var(--text-tertiary);
} }
@@ -231,15 +195,18 @@ body {
表单样式 表单样式
============================================ */ ============================================ */
.form-group { .form-fields,
margin-bottom: var(--spacing-lg); .form-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-lg);
} }
.form-group:last-child { .form-item {
margin-bottom: 0; margin-bottom: 0;
} }
.form-group label { .form-item label {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
font-size: 14px; font-size: 14px;
@@ -247,32 +214,6 @@ body {
color: var(--text-primary); color: var(--text-primary);
} }
.form-group label .required {
color: #ff4d4f;
margin-left: 4px;
}
.form-control {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 4px;
font-size: 14px;
transition: all 0.3s;
background: var(--bg-container);
}
.form-control:hover {
border-color: var(--primary);
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-light);
outline: none;
}
.form-hint { .form-hint {
margin-top: 4px; margin-top: 4px;
font-size: 12px; font-size: 12px;
@@ -286,6 +227,7 @@ body {
.upload-control { .upload-control {
display: flex; display: flex;
gap: var(--spacing-sm); gap: var(--spacing-sm);
align-items: center;
} }
.upload-control .t-input { .upload-control .t-input {
@@ -321,7 +263,6 @@ body {
flex-shrink: 0; flex-shrink: 0;
} }
/* 主按钮 */
.btn-primary { .btn-primary {
background: var(--primary); background: var(--primary);
color: #ffffff; color: #ffffff;
@@ -333,12 +274,6 @@ body {
border-color: var(--primary-hover); border-color: var(--primary-hover);
} }
.btn-primary:active:not(:disabled) {
background: var(--primary-active);
border-color: var(--primary-active);
}
/* 次要按钮 */
.btn-secondary { .btn-secondary {
background: var(--bg-container); background: var(--bg-container);
color: var(--text-primary); color: var(--text-primary);
@@ -350,7 +285,6 @@ body {
border-color: var(--primary); border-color: var(--primary);
} }
/* 危险按钮 */
.btn-danger { .btn-danger {
background: var(--bg-container); background: var(--bg-container);
color: #ff4d4f; color: #ff4d4f;
@@ -363,21 +297,18 @@ body {
border-color: #ff4d4f; border-color: #ff4d4f;
} }
/* 大按钮 */
.btn-lg { .btn-lg {
height: 40px; height: 40px;
padding: 0 24px; padding: 0 24px;
font-size: 15px; font-size: 15px;
} }
/* 小按钮 */
.btn-sm { .btn-sm {
height: 28px; height: 28px;
padding: 0 12px; padding: 0 12px;
font-size: 13px; font-size: 13px;
} }
/* 图标按钮 */
.btn-icon { .btn-icon {
width: 28px; width: 28px;
height: 28px; height: 28px;
@@ -387,9 +318,6 @@ body {
color: var(--text-secondary); color: var(--text-secondary);
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px; font-size: 16px;
transition: all 0.3s; transition: all 0.3s;
} }
@@ -408,16 +336,11 @@ body {
配置项列表 配置项列表
============================================ */ ============================================ */
.config-list {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.config-item { .config-item {
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
margin-bottom: var(--spacing-md);
} }
.config-item__header { .config-item__header {
@@ -429,7 +352,9 @@ body {
border-bottom: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
} }
.config-item__title { .config-item__title,
.config-item__header h4 {
margin: 0;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
@@ -444,68 +369,56 @@ body {
padding: var(--spacing-md); padding: var(--spacing-md);
} }
/* 添加按钮 */ .banner-item {
.btn-add-item { border: 1px solid var(--border-light);
width: 100%;
height: 48px;
border: 2px dashed var(--border);
background: #fafafa;
border-radius: 6px; border-radius: 6px;
color: var(--text-tertiary); overflow: hidden;
font-size: 14px; margin-bottom: var(--spacing-md);
cursor: pointer; }
.banner-item__header {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
justify-content: center; padding: 12px var(--spacing-md);
gap: 8px; background: #fafafa;
transition: all 0.3s; border-bottom: 1px solid var(--border-light);
} }
.btn-add-item:hover { .banner-item__header h4 {
border-color: var(--primary); margin: 0;
color: var(--primary); font-size: 14px;
background: var(--primary-light); font-weight: 500;
} color: var(--text-primary);
.btn-add-item svg {
font-size: 20px;
} }
/* ============================================ /* ============================================
空状态 空状态
============================================ */ ============================================ */
.empty-state { .empty-state,
padding: 60px 20px; .empty-tip {
text-align: center; padding: 40px 20px;
border: 2px dashed var(--border);
border-radius: 6px;
color: var(--text-tertiary); color: var(--text-tertiary);
} background: #fafafa;
text-align: center;
.empty-state svg {
width: 64px;
height: 64px;
opacity: 0.3;
margin-bottom: 16px;
}
.empty-state p {
margin: 0;
font-size: 14px; font-size: 14px;
margin-bottom: var(--spacing-md);
} }
/* ============================================ /* ============================================
提示框 提示框
============================================ */ ============================================ */
.alert { .alert,
.alert-info {
padding: 12px 16px; padding: 12px 16px;
border-radius: 4px; border-radius: 4px;
margin-bottom: var(--spacing-md); margin-bottom: var(--spacing-md);
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
}
.alert-info {
background: var(--primary-light); background: var(--primary-light);
border-left: 3px solid var(--primary); border-left: 3px solid var(--primary);
color: var(--text-secondary); color: var(--text-secondary);
@@ -532,7 +445,6 @@ body {
background: #fafafa; background: #fafafa;
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
margin-bottom: var(--spacing-md);
} }
.form-switch label { .form-switch label {
@@ -546,53 +458,37 @@ body {
============================================ */ ============================================ */
.json-editor textarea { .json-editor textarea {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
font-size: 13px; font-size: 13px !important;
line-height: 1.6; line-height: 1.6 !important;
padding: 16px !important; padding: 16px !important;
background: #1e1e1e; background: #1e1e1e !important;
color: #d4d4d4; color: #d4d4d4 !important;
border: 1px solid #3c3c3c; border: 1px solid #3c3c3c !important;
border-radius: 4px; border-radius: 4px !important;
min-height: 400px; min-height: 400px;
} }
.json-editor textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15);
}
/* ============================================ /* ============================================
响应式 标题
============================================ */ ============================================ */
@media (max-width: 1024px) { .sub-title {
.admin-sidebar { margin: 24px 0 16px;
width: 180px; padding-left: 12px;
} font-size: 15px;
font-weight: 600;
color: var(--text-primary);
border-left: 3px solid var(--primary);
} }
@media (max-width: 768px) { .mt-10,
.admin-sidebar { .mt-20 {
position: fixed; margin-top: 16px;
left: -220px; }
top: 60px;
bottom: 0;
z-index: 99;
transition: left 0.3s;
}
.admin-sidebar.is-open { .ml-10 {
left: 0; margin-left: 12px;
}
.admin-main {
padding: var(--spacing-md);
}
.section-body {
padding: var(--spacing-md);
}
} }
/* ============================================ /* ============================================
@@ -600,8 +496,7 @@ body {
============================================ */ ============================================ */
.t-input, .t-input,
.t-textarea, .t-textarea {
.t-select {
border-radius: 4px !important; border-radius: 4px !important;
} }
@@ -621,7 +516,21 @@ body {
border-color: var(--primary) !important; border-color: var(--primary) !important;
} }
.t-button--primary:hover { /* ============================================
background: var(--primary-hover) !important; 响应式
border-color: var(--primary-hover) !important; ============================================ */
@media (max-width: 768px) {
.admin-container {
padding: var(--spacing-sm);
}
.admin-tabs {
overflow-x: auto;
flex-wrap: nowrap;
}
.tab-item {
flex-shrink: 0;
}
} }