julian/chrom-tool
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix config ui

Browse Source
This commit is contained in:
Julian Freeman
2026-04-16 15:57:09 -04:00
parent b890c609d9
commit 7e912bd9d0
2 changed files with 103 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/styles.css
View File

@@ -321,12 +321,30 @@ button {
}
.config-form-grid {
display: none;
}
.config-form-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
gap: 14px;
margin-top: 12px;
}
.config-form-fields,
.config-form-side {
display: grid;
gap: 10px;
}
.config-form-side {
align-content: start;
padding: 10px 12px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.8));
border: 1px solid rgba(148, 163, 184, 0.14);
}
.icon-option-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -336,8 +354,9 @@ button {
.icon-option-button {
display: grid;
justify-items: center;
gap: 6px;
padding: 10px 8px;
gap: 5px;
min-height: 86px;
padding: 9px 8px;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
background: rgba(255, 255, 255, 0.9);
@@ -350,15 +369,16 @@ button {
}
.icon-option-button img {
width: 28px;
height: 28px;
width: 26px;
height: 26px;
object-fit: contain;
}
.icon-option-button span {
font-size: 0.76rem;
font-size: 0.72rem;
font-weight: 600;
text-align: center;
line-height: 1.25;
}
.icon-option-button.active {
@@ -407,7 +427,7 @@ button {
.config-form-actions {
display: flex;
justify-content: flex-end;
margin-top: 12px;
margin-top: 2px;
}
.primary-button,
@@ -457,6 +477,7 @@ button {
align-items: flex-start;
gap: 10px;
min-width: 0;
flex: 1;
}
.config-icon {
@@ -469,13 +490,18 @@ button {
.config-meta {
display: grid;
gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 10px;
}
.config-meta-row {
display: grid;
gap: 3px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(248, 250, 252, 0.78);
border: 1px solid rgba(148, 163, 184, 0.12);
}
.config-meta-row p {
@@ -880,16 +906,12 @@ button {
}
@media (max-width: 720px) {
.config-form-grid {
.config-form-layout {
grid-template-columns: 1fr;
}
.field-span {
grid-column: auto;
}
.icon-option-grid {
grid-template-columns: 1fr;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sort-bar {
@@ -911,6 +933,10 @@ button {
flex-direction: column;
}
.config-meta {
grid-template-columns: 1fr;
}
.profile-avatar,
.extension-icon {
width: 50px;