today_ai_weather/app/assets/stylesheets/application.tailwind.css
songtianlun 9ac7dd46af
Some checks are pending
Docker / docker (push) Waiting to run
feat: migrate to OpenLayers for map display
- Replaced Leaflet with OpenLayers for improved map rendering
- Added OpenLayers CSS and removed Leaflet CSS
- Updated map controller to use OpenLayers API
- Added marker icon in public directory
- Added scopes and associations for weather art in City model

This change migrates the map display from Leaflet to
OpenLayers, providing better performance and more features.
It also introduces new model associations for weather arts,
allowing to sort cities by latest weather updates.
2025-02-15 00:19:04 +08:00

72 lines
1.3 KiB
CSS

@import "photoswipe/dist/photoswipe.css";
/*@import "leaflet/dist/leaflet.css";*/
@import 'ol/ol.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
.loading {
position: relative;
}
.loading::after {
content: "";
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
border: 2px solid transparent;
border-top-color: currentColor;
border-right-color: currentColor;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to {
transform: translateY(-50%) rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
transform-origin: center center;
}
.map-container {
width: 100%;
height: 400px;
position: relative;
}
/* 使弹出窗口在地图上可见 */
.ol-overlay-container {
will-change: transform;
position: absolute;
transform: translate(-50%, -100%);
pointer-events: auto;
}
/* 添加一个小箭头 */
.ol-overlay-container::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border-width: 8px;
border-style: solid;
border-color: white transparent transparent transparent;
}