schoolproject1/style.css at main · RealHope1/schoolproject1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/* style.css */

/* Custom font definition (Tailwind typically imports this, but keeping it explicit) */
body {
    font-family: 'Inter', sans-serif;
    /* Tailwind classes handle background, min-height, flex-direction etc. */
}

/* Custom Text Shadow for Header Title (Tailwind doesn't have this directly) */
.text-shadow-md {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* Custom SVG arrow for Select Field (Tailwind 'appearance-none' removes default, this adds custom) */
.appearance-none {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%234A5568" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em;
}

/* Leaflet Overrides (to match Tailwind aesthetics) */

/* Leaflet Popups */
.leaflet-popup-content-wrapper {
    border-radius: 0.75rem; /* Match UI rounded-lg/xl */
    padding: 0; /* Remove default padding as content handles it */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Soft, deep shadow */
}

.leaflet-popup-content {
    margin: 0; /* Remove default margin */
}

.leaflet-popup-tip {
    background: #fff; /* Match popup background */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Match popup shadow */
}

/* Custom styling for content inside Leaflet Popups */
.info-window-content {
    padding: 1rem; /* Padding for the content inside the popup */
    max-width: 280px; /* Max width to prevent overly wide popups */
}

.info-window-title {
    @apply text-lg font-semibold mb-1 text-gray-800; /* Apply Tailwind classes via CSS for consistency */
}

.info-window-description {
    @apply text-sm text-gray-600 mb-2;
}

.info-window-button {
    @apply bg-blue-500 text-white px-3 py-2 rounded-md hover:bg-blue-600 transition duration-300 text-sm shadow-sm;
}


/* Custom div icon for geolocation marker */
.leaflet-div-icon {
    background: #10B981; /* Tailwind green-500 */
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    width: 20px !important; /* Important to override Leaflet default */
    height: 20px !important;
    margin-left: -10px !important; /* Center the div icon */
    margin-top: -10px !important;
}

/* OSRM Route Line Styling */
.leaflet-pane.leaflet-overlay-pane path.leaflet-polyline {
    stroke: #4A90E2; /* Custom blue from earlier CSS design */
    stroke-opacity: 0.8;
    stroke-width: 7; /* Thicker line for visibility */
    transition: stroke-width 0.2s ease-in-out;
}

.leaflet-pane.leaflet-overlay-pane path.leaflet-polyline:hover {
    stroke-width: 9; /* Slightly thicker on hover */
}

/* Message Area Styling (Tailwind classes will handle most, but these apply colors) */
#message-area {
    /* Base styling via Tailwind classes */
    /* text-sm font-medium flex items-center justify-center text-center */
    /* px-3 py-2 rounded-lg */
}

.message-info {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

.message-success {
    @apply bg-green-100 text-green-800 border border-green-200;
}

.message-warning {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}

.message-error {
    @apply bg-red-100 text-red-800 border border-red-200;
}

/* Styling for Location Details panel text content */
.text-content-title {
    @apply font-semibold text-xl mb-1 text-gray-800;
}

.text-content-coords {
    @apply text-sm text-gray-600 mt-2;
}

/* Specific text colors for messages */
.text-warning {
    @apply text-yellow-700;
}

.text-error {
    @apply text-red-700;
}

/* Directions Summary and Steps */
.direction-summary {
    @apply flex flex-col sm:flex-row justify-around gap-2 my-4 p-3 rounded-lg border border-gray-200 bg-gray-50 text-base text-gray-700;
}

.direction-value {
    @apply font-semibold text-gray-900;
}

.direction-steps {
    @apply list-decimal pl-5 mt-4 text-sm text-gray-700;
}

.direction-steps li {
    @apply mb-2 leading-relaxed;
}

.direction-step-distance {
    @apply font-medium text-gray-600;
}

/* Font Inter (if not already handled by CDN or global import) */
.font-inter {
    font-family: 'Inter', sans-serif;
}