mrmo/gamboola-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update styles.css

Browse Source
This commit is contained in:
Mohamed Maher
2026-08-22 21:29:28 +00:00
parent 46b7f0ea91
commit 886b1556e9
1 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
styles.css
View File

@@ -605,6 +605,18 @@ button, input, select, textarea { font-family: inherit; }
.tl-item .tl-title { font-size: 13px; font-weight: 700; color: var(--text-main); } .tl-item .tl-title { font-size: 13px; font-weight: 700; color: var(--text-main); }
.tl-item .tl-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .tl-item .tl-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.tl-item .tl-price { font-size: 12.5px; font-weight: 700; color: var(--burgundy); float: left; } .tl-item .tl-price { font-size: 12.5px; font-weight: 700; color: var(--burgundy); float: left; }
.tl-edit-btn {
margin-top: 8px;
border: 1px solid var(--dusty-rose-soft);
background: #fff;
color: var(--burgundy);
font-size: 11px;
font-weight: 700;
padding: 5px 12px;
border-radius: var(--radius-sm, 8px);
cursor: pointer;
}
.tl-edit-btn:active { background: var(--dusty-rose-soft); }
/* ---------- Utilities ---------- */ /* ---------- Utilities ---------- */
.hidden { display: none !important; } .hidden { display: none !important; }
@@ -626,32 +638,33 @@ button, input, select, textarea { font-family: inherit; }
} }
@media (min-width: 900px) { @media (min-width: 900px) {
#app { flex-direction: row; } #app { flex-direction: row; padding-inline-end: 240px; }
.app-header { .app-header {
position: fixed; position: fixed;
top: 0; right: 0; top: 0; right: 0;
width: 240px; width: 240px;
height: 100vh; height: 150px;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: center;
padding: 24px 18px; padding: 24px 18px;
gap: 20px; gap: 12px;
border-bottom: 1px solid rgba(217,163,179,0.3);
} }
.bottom-nav { .bottom-nav {
position: fixed; position: fixed;
top: 0; right: 0; top: 150px; right: 0;
width: 240px; width: 240px;
height: 100vh; height: calc(100vh - 150px);
flex-direction: column; flex-direction: column;
padding-top: 150px; padding-top: 16px;
border-top: none; border-top: none;
border-inline-start: 1px solid rgba(217,163,179,0.3); border-inline-start: 1px solid rgba(217,163,179,0.3);
} }
.nav-btn { flex-direction: row; justify-content: flex-start; gap: 10px; padding-inline: 22px; font-size: 13px; min-height: 50px; } .nav-btn { flex-direction: row; justify-content: flex-start; gap: 10px; padding-inline: 22px; font-size: 13px; min-height: 50px; }
.nav-btn.active::after { display: none; } .nav-btn.active::after { display: none; }
.nav-btn.active { background: var(--dusty-rose-soft); border-radius: var(--radius-sm); margin-inline: 10px; } .nav-btn.active { background: var(--dusty-rose-soft); border-radius: var(--radius-sm); margin-inline: 10px; }
.app-main { margin-inline-end: 240px; max-width: 640px; padding-top: 24px; } .app-main { margin: 0 auto; max-width: 640px; padding-top: 24px; }
.sticky-order-bar, .toast { left: 260px; right: 20px; transform: none; } .sticky-order-bar { right: 260px; left: 20px; transform: none; }
.toast { left: 50%; margin-inline-end: 240px; transform: translateX(-50%); } .toast { left: calc(50% - 120px); transform: translateX(-50%); }
} }