InfStarMC/infstarweb
1
0
Fork 0
mirror of https://github.com/Coldsmiles/infstarweb.git synced 2026-04-23 02:30:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Improve layout and styling of sponsor controls section with responsive adjustments

Browse Source
This commit is contained in:
zhangyuheng
2026-02-27 11:09:19 +08:00
parent c4eb218609
commit d0a74226fd
1 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
sponsor.html
View File

@@ -190,22 +190,33 @@
align-items: center;
gap: 20px;
margin-bottom: 40px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.controls-header {
display: flex;
width: 100%;
justify-content: space-between;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 10px;
gap: 12px;
margin-bottom: 24px;
}
/* Mobile adjustment for header */
@media (max-width: 600px) {
.controls-header {
flex-direction: column;
}
}
.cta-button {
height: 48px; /* Match search input height */
padding: 0 24px;
background-color: var(--text-primary);
color: white;
padding: 10px 20px;
border-radius: 99px;
text-decoration: none;
font-weight: 600;
@@ -216,6 +227,8 @@
transition: all 0.2s;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
box-sizing: border-box;
}
.cta-button:hover {
@@ -337,17 +350,19 @@
.search-box {
position: relative;
flex-grow: 0;
width: 100%;
max-width: 400px;
max-width: 320px;
}
.search-box input {
width: 100%;
padding: 12px 20px 12px 44px;
height: 48px; /* Fixed height to match button */
padding: 0 20px 0 44px;
border-radius: 99px;
border: 1px solid rgba(0,0,0,0.1);
background: white;
font-size: 16px;
font-size: 15px;
outline: none;
transition: all 0.2s;
}
@@ -565,17 +580,19 @@
<!-- Controls -->
<div class="controls-section">
<h2 class="section-title" style="margin-bottom: 10px;">❤️ 赞助列表</h2>
<div class="controls-header">
<h2 class="section-title" style="margin-bottom: 0; text-align: left;">❤️ 赞助列表</h2>
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="sponsor-search" placeholder="搜索赞助者姓名...">
</div>
<button class="cta-button outline" id="open-sponsor-modal">
<i class="fas fa-heart"></i> 我要支持
</button>
</div>
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="sponsor-search" placeholder="搜索赞助者姓名...">
</div>
<div class="filter-tags" id="project-filters">
<button class="filter-tag active" data-project="all">全部</button>
<!-- JS injected filters -->