优化镜像标签输入框

This commit is contained in:
NewName
2025-05-20 20:25:07 +08:00
parent 50ac5947da
commit 0593ef9212

View File

@@ -298,38 +298,80 @@
width: 100%;
margin-top: 20px;
position: relative;
background: var(--card-bg);
padding: 15px;
border-radius: 10px;
border: 2px solid #39c5bc;
box-shadow: 0 2px 8px rgba(57, 197, 188, 0.1);
}
.tag-search-container::before {
content: '🔍 标签搜索';
display: block;
margin-bottom: 10px;
color: #39c5bc;
font-weight: bold;
font-size: 0.9rem;
}
.tag-search-input {
width: 100%;
padding: 10px 15px;
padding: 12px 40px 12px 15px;
border-radius: 8px;
border: 1px solid var(--border-color);
background-color: var(--inputcolor);
color: var(--inputcolor-font);
font-size: 0.9rem;
font-size: 1rem;
transition: all 0.3s ease;
}
.tag-search-input:focus {
outline: none;
border-color: #39c5bc;
box-shadow: 0 0 0 3px rgba(57, 197, 188, 0.2);
}
.tag-search-input::placeholder {
color: #888;
font-style: italic;
}
.tag-search-clear {
position: absolute;
right: 10px;
right: 25px;
top: 50%;
transform: translateY(-50%);
transform: translateY(-5%);
background: none;
border: none;
color: var(--fontcolor);
cursor: pointer;
padding: 5px;
padding: 8px;
opacity: 0.6;
font-size: 1.2rem;
transition: all 0.3s ease;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.tag-search-clear:hover {
opacity: 1;
background-color: rgba(57, 197, 188, 0.1);
transform: translateY(-5%) scale(1.1);
}
@media (prefers-color-scheme: dark) {
.tag-search-container {
border-color: #39c5bc;
box-shadow: 0 2px 8px rgba(57, 197, 188, 0.2);
}
.tag-search-input::placeholder {
color: #666;
}
}
.tag-title {
@@ -887,12 +929,12 @@
docker pull ${fullRepoName}
<button class="copy-button" onclick="copyToClipboard('docker pull ${fullRepoName}')">复制</button>
</div>
<div class="tag-search-container">
<input type="text" class="tag-search-input" placeholder="搜索标签..." oninput="filterTags(this.value)">
<button class="tag-search-clear" onclick="clearTagSearch()">✕</button>
</div>
</div>
</div>
<div class="tag-search-container">
<input type="text" class="tag-search-input" placeholder="输入关键词搜索标签,支持模糊匹配..." oninput="filterTags(this.value)">
<button class="tag-search-clear" onclick="clearTagSearch()">×</button>
</div>
<div id="tagsContainer"></div>
`;