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