Raditya_Indra_Putranto/WebGIS_Jalan-JalanRusak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply LocalGuide design system (red-orange primary, teal secondary)

Browse Source 
- Replace indigo primary with red-orange (#EA580C) + teal secondary (#0D9488)
- Navbar: active tab pill red-orange, hover warm orange
- Map: floating info bar slim pill, EXIF button red-orange, legend title bold red-orange
- Draw toolbar: warm orange hover overrides
- Modal: teal focus rings, pill buttons, btn-danger outline style
- Dashboard: stats grid 3 columns with left-border accents per type
- Table: pill filter chips, teal search focus, warm row hover (#FFF7ED)
- Minimap header: red-orange color

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
GuavaPopper
2026-06-11 20:55:22 +07:00
parent f0109e5512
commit dfac50507b
2 changed files with 114 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+103 -41
View File
@@ -1,15 +1,23 @@
:root {
--primary: #4f46e5;
--primary-hover: #4338ca;
--bg-light: #f3f4f6;
--primary: #EA580C;
--primary-hover: #C2410C;
--primary-light: #FED7AA;
--secondary: #0D9488;
--secondary-light: #CCFBF1;
--tertiary: #EAB308;
--bg-light: #F8FAFC;
--bg-white: #ffffff;
--text-main: #1f2937;
--text-muted: #6b7280;
--border: #e5e7eb;
--jalan-nasional: #ef4444; /* Red */
--jalan-provinsi: #f97316; /* Orange */
--jalan-kabupaten: #eab308; /* Yellow */
--text-main: #1E293B;
--text-muted: #64748B;
--border: #E2E8F0;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--radius: 8px;
--radius-pill: 9999px;
--jalan-nasional: #ef4444;
--jalan-provinsi: #f97316;
--jalan-kabupaten: #eab308;
--parsil-shm: #22c55e;
--parsil-hgb: #3b82f6;
--parsil-hgu: #a855f7;
@@ -61,11 +69,11 @@ body {
.nav-btn {
border: none;
background: transparent;
padding: 10px 20px;
padding: 8px 18px;
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
border-radius: 8px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.2s;
display: flex;
@@ -74,13 +82,13 @@ body {
}
.nav-btn:hover {
background: var(--bg-light);
color: var(--text-main);
background: var(--primary-light);
color: var(--primary);
}
.nav-btn.active {
background: #eef2ff;
color: var(--primary);
background: var(--primary);
color: white;
}
/* VIEW CONTROLLER */
@@ -110,21 +118,39 @@ main {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.95);
padding: 12px 24px;
border-radius: 50px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
background: rgba(255, 255, 255, 0.97);
padding: 10px 20px;
border-radius: var(--radius-pill);
box-shadow: var(--shadow-md);
font-size: 13px;
font-weight: 500;
z-index: 999;
pointer-events: none;
display: flex;
align-items: center;
gap: 8px;
gap: 12px;
color: var(--text-main);
white-space: nowrap;
}
.floating-info i { color: var(--primary); }
.btn-exif {
background: var(--primary);
color: white;
border: none;
padding: 7px 14px;
font-size: 12px;
border-radius: var(--radius-pill);
cursor: pointer;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
transition: background 0.2s;
}
.btn-exif:hover { background: var(--primary-hover); }
.floating-legend {
position: absolute;
bottom: 80px;
@@ -137,7 +163,7 @@ main {
font-size: 12px;
min-width: 180px;
}
.floating-legend h4 { margin-bottom: 10px; color: var(--text-main); font-size: 13px;}
.floating-legend h4 { margin-bottom: 10px; color: var(--primary); font-size: 13px; font-weight: 700; }
.legend-grid div { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--text-muted);}
.legend-grid span { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
@@ -156,7 +182,7 @@ main {
.stats-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}
@@ -171,6 +197,9 @@ main {
align-items: center;
border: 1px solid var(--border);
}
.stat-card--jalan { border-left: 4px solid var(--primary); }
.stat-card--parsil { border-left: 4px solid var(--secondary); }
.stat-card--titik { border-left: 4px solid var(--tertiary); }
.stat-info h3 { font-size: 14px; color: var(--text-muted); font-weight: 500; margin-bottom: 5px; }
.stat-info h2 { font-size: 32px; color: var(--text-main); }
@@ -206,21 +235,29 @@ main {
}
.tab-btn {
padding: 8px 16px;
border: 1px solid var(--border);
background: var(--bg-white);
border-radius: 8px;
font-size: 14px;
padding: 7px 14px;
border: 1.5px solid var(--border);
background: white;
border-radius: var(--radius-pill);
font-size: 13px;
cursor: pointer;
font-weight: 500;
color: var(--text-muted);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}
.tab-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
.tab-btn.active {
background: #eef2ff;
color: var(--primary);
border-color: #c7d2fe;
background: var(--primary);
color: white;
border-color: var(--primary);
}
.search-box {
@@ -243,7 +280,10 @@ main {
outline: none;
transition: border-color 0.2s;
}
.search-box input:focus { border-color: var(--primary); }
.search-box input:focus {
border-color: var(--secondary);
box-shadow: 0 0 0 3px var(--secondary-light);
}
.table-wrapper {
overflow-x: auto;
@@ -272,7 +312,7 @@ td {
cursor: pointer;
}
tr:hover td { background-color: #f9fafb; }
tr:hover td { background-color: #FFF7ED; }
.status-badge {
padding: 4px 10px;
@@ -314,6 +354,7 @@ tr:hover td { background-color: #f9fafb; }
font-weight: 600;
border-bottom: 1px solid var(--border);
background: #f9fafb;
color: var(--primary);
}
#minimap {
@@ -390,8 +431,8 @@ tr:hover td { background-color: #f9fafb; }
.form-group input:focus, .form-group select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
border-color: var(--secondary);
box-shadow: 0 0 0 3px var(--secondary-light);
}
.form-group input[readonly] {
@@ -408,6 +449,8 @@ tr:hover td { background-color: #f9fafb; }
.form-actions {
margin-top: 25px;
display: flex;
gap: 10px;
}
.btn-primary {
@@ -416,21 +459,40 @@ tr:hover td { background-color: #f9fafb; }
color: white;
border: none;
padding: 12px;
border-radius: 8px;
border-radius: var(--radius-pill);
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: background 0.2s;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger {
background: #ef4444;
color: white;
border: none;
background: transparent;
color: #ef4444;
border: 1.5px solid #ef4444;
padding: 12px;
border-radius: 8px;
border-radius: var(--radius-pill);
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.2s;
}
.btn-danger:hover { background: #fef2f2; }
/* Leaflet Draw Toolbar — LocalGuide overrides */
.leaflet-draw-toolbar a:hover,
.leaflet-draw-edit-toolbar a:hover {
background-color: var(--primary-light) !important;
border-color: var(--primary) !important;
}
.leaflet-bar a:hover {
color: var(--primary);
border-color: var(--primary);
}
.leaflet-draw-section .leaflet-draw-toolbar {
border-radius: var(--radius);
overflow: hidden;
}
.btn-danger:hover { background: #dc2626; }