mirror of
https://github.com/hamster1963/nezha-dash.git
synced 2025-04-24 21:10:45 +08:00
Update globals.css
This commit is contained in:
Soga
GitHub
parent
71ae9c6d06
commit
bc25b7c854
@ -1,126 +1,206 @@
|
|||||||
<!DOCTYPE html>
|
@tailwind base;
|
||||||
<html lang="zh-CN">
|
@tailwind components;
|
||||||
<head>
|
@tailwind utilities;
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Geolocation and Weather Info</title>
|
|
||||||
|
|
||||||
<!-- 引入 Tailwind CSS -->
|
@layer base {
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
:root {
|
||||||
|
/* 全局颜色变量 */
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 20 14.3% 4.1%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 20 14.3% 4.1%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 20 14.3% 4.1%;
|
||||||
|
--primary: 24 9.8% 10%;
|
||||||
|
--primary-foreground: 60 9.1% 97.8%;
|
||||||
|
--secondary: 60 4.8% 95.9%;
|
||||||
|
--secondary-foreground: 24 9.8% 10%;
|
||||||
|
--muted: 60 4.8% 95.9%;
|
||||||
|
--muted-foreground: 25 5.3% 44.7%;
|
||||||
|
--accent: 60 4.8% 95.9%;
|
||||||
|
--accent-foreground: 24 9.8% 10%;
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 60 9.1% 97.8%;
|
||||||
|
--border: 20 5.9% 90%;
|
||||||
|
--input: 20 5.9% 90%;
|
||||||
|
--ring: 20 14.3% 4.1%;
|
||||||
|
--radius: 1rem;
|
||||||
|
|
||||||
<style>
|
/* 图表颜色 */
|
||||||
@tailwind base;
|
--chart-1: 220 70% 50%;
|
||||||
@tailwind components;
|
--chart-2: 340 75% 55%;
|
||||||
@tailwind utilities;
|
--chart-3: 30 80% 55%;
|
||||||
|
--chart-4: 280 65% 60%;
|
||||||
|
--chart-5: 160 60% 45%;
|
||||||
|
--chart-6: 180 50% 50%;
|
||||||
|
--chart-7: 216 50% 50%;
|
||||||
|
--chart-8: 252 50% 50%;
|
||||||
|
--chart-9: 288 50% 50%;
|
||||||
|
--chart-10: 324 50% 50%;
|
||||||
|
|
||||||
@layer base {
|
/* 背景图片 */
|
||||||
/* 自定义变量和样式 */
|
--background-image: url('https://t.mwm.moe/ys/');
|
||||||
:root {
|
}
|
||||||
--background: 0 0% 100%;
|
|
||||||
--foreground: 20 14.3% 4.1%;
|
|
||||||
--card: 0 0% 100%;
|
|
||||||
--card-foreground: 20 14.3% 4.1%;
|
|
||||||
--popover: 0 0% 100%;
|
|
||||||
--popover-foreground: 20 14.3% 4.1%;
|
|
||||||
--primary: 24 9.8% 10%;
|
|
||||||
--primary-foreground: 60 9.1% 97.8%;
|
|
||||||
--secondary: 60 4.8% 95.9%;
|
|
||||||
--secondary-foreground: 24 9.8% 10%;
|
|
||||||
--muted: 60 4.8% 95.9%;
|
|
||||||
--muted-foreground: 25 5.3% 44.7%;
|
|
||||||
--accent: 60 4.8% 95.9%;
|
|
||||||
--accent-foreground: 24 9.8% 10%;
|
|
||||||
--destructive: 0 84.2% 60.2%;
|
|
||||||
--destructive-foreground: 60 9.1% 97.8%;
|
|
||||||
--border: 20 5.9% 90%;
|
|
||||||
--input: 20 5.9% 90%;
|
|
||||||
--ring: 20 14.3% 4.1%;
|
|
||||||
--radius: 1rem;
|
|
||||||
--chart-1: 220 70% 50%;
|
|
||||||
--chart-2: 340 75% 55%;
|
|
||||||
--chart-3: 30 80% 55%;
|
|
||||||
--chart-4: 280 65% 60%;
|
|
||||||
--chart-5: 160 60% 45%;
|
|
||||||
--chart-6: 180 50% 50%;
|
|
||||||
--chart-7: 216 50% 50%;
|
|
||||||
--chart-8: 252 50% 50%;
|
|
||||||
--chart-9: 288 50% 50%;
|
|
||||||
--chart-10: 324 50% 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
/* 黑暗模式变量 */
|
||||||
@apply bg-background text-foreground;
|
.dark {
|
||||||
font-family: Arial, sans-serif;
|
--background: 20 14.3% 4.1%;
|
||||||
}
|
--foreground: 60 9.1% 97.8%;
|
||||||
|
--card: 20 14.3% 4.1%;
|
||||||
|
--card-foreground: 60 9.1% 97.8%;
|
||||||
|
--popover: 20 14.3% 4.1%;
|
||||||
|
--popover-foreground: 60 9.1% 97.8%;
|
||||||
|
--primary: 60 9.1% 97.8%;
|
||||||
|
--primary-foreground: 24 9.8% 10%;
|
||||||
|
--secondary: 12 6.5% 15.1%;
|
||||||
|
--secondary-foreground: 60 9.1% 97.8%;
|
||||||
|
--muted: 12 6.5% 15.1%;
|
||||||
|
--muted-foreground: 24 5.4% 63.9%;
|
||||||
|
--accent: 12 6.5% 15.1%;
|
||||||
|
--accent-foreground: 60 9.1% 97.8%;
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 60 9.1% 97.8%;
|
||||||
|
--border: 12 6.5% 15.1%;
|
||||||
|
--input: 12 6.5% 15.1%;
|
||||||
|
--ring: 24 5.7% 82.9%;
|
||||||
|
--chart-1: 220 70% 50%;
|
||||||
|
--chart-2: 340 75% 55%;
|
||||||
|
--chart-3: 30 80% 55%;
|
||||||
|
--chart-4: 280 65% 60%;
|
||||||
|
--chart-5: 160 60% 45%;
|
||||||
|
--chart-6: 180 50% 50%;
|
||||||
|
--chart-7: 216 50% 50%;
|
||||||
|
--chart-8: 252 50% 50%;
|
||||||
|
--chart-9: 288 50% 50%;
|
||||||
|
--chart-10: 324 50% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
/* 加入背景图片 */
|
/* 全局样式 */
|
||||||
body::before {
|
* {
|
||||||
content: "";
|
@apply border-border;
|
||||||
position: fixed;
|
}
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: -1;
|
|
||||||
background: rgba(255, 255, 255, 0.5) url(https://t.mwm.moe/ys/) no-repeat center center fixed;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 字体样式 */
|
html {
|
||||||
.glowing-text {
|
@apply scroll-smooth;
|
||||||
font-size: 50px; /* 调整字体大小 */
|
}
|
||||||
font-weight: bold;
|
|
||||||
color: white; /* 设置文字颜色 */
|
|
||||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* 增加发光效果 */
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.6); /* 背景半透明黑色 */
|
|
||||||
display: inline-block; /* 保证文字背景大小合适 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-detail {
|
body {
|
||||||
font-size: 24px; /* 调整天气详情字体大小 */
|
@apply bg-background text-foreground;
|
||||||
color: white;
|
background-image: var(--background-image);
|
||||||
background-color: rgba(0, 0, 0, 0.6); /* 背景半透明黑色 */
|
background-size: cover;
|
||||||
padding: 15px;
|
background-position: center;
|
||||||
border-radius: 10px;
|
font-synthesis-weight: none;
|
||||||
margin: 10px 0;
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#mapContainer {
|
@layer utilities {
|
||||||
width: 100%;
|
/* 数字步骤样式 */
|
||||||
height: 500px; /* 调整地图大小 */
|
.step {
|
||||||
margin-top: 20px;
|
counter-increment: step;
|
||||||
border: 2px solid rgba(255, 255, 255, 0.8); /* 边框颜色 */
|
}
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flag-img {
|
.step:before {
|
||||||
width: 100px; /* 设置国旗大小 */
|
@apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-px font-mono text-base font-medium;
|
||||||
height: auto;
|
@apply ml-[-50px] mt-[-4px];
|
||||||
margin: 20px;
|
content: counter(step);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container mx-auto text-center">
|
|
||||||
<!-- 发光文字标题 -->
|
|
||||||
<h1 class="glowing-text">Geolocation and Weather Info</h1>
|
|
||||||
|
|
||||||
<!-- 天气详情 -->
|
@media (max-width: 640px) {
|
||||||
<p class="weather-detail">当前温度：25°C，天气：晴</p>
|
/* 移动端容器样式 */
|
||||||
|
.container {
|
||||||
|
@apply px-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<!-- 地图容器 -->
|
/* 选中文本样式 */
|
||||||
<div id="mapContainer"></div>
|
::selection {
|
||||||
|
@apply bg-stone-300 dark:bg-stone-800;
|
||||||
|
}
|
||||||
|
|
||||||
<!-- 国旗图片 -->
|
/* Hamster 加载动画 */
|
||||||
<img class="flag-img" src="https://flagcdn.com/w320/cn.png" alt="国旗">
|
.hamster-loading-wrapper {
|
||||||
</div>
|
--size: 12px;
|
||||||
|
height: var(--size);
|
||||||
|
width: var(--size);
|
||||||
|
inset: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
<!-- 引入地图API的JS代码和天气数据获取 -->
|
.hamster-loading-wrapper[data-visible="false"] {
|
||||||
<script>
|
transform-origin: center;
|
||||||
// 这里可以加入获取地理位置信息和天气信息的JavaScript代码
|
animation: hamster-fade-out 0.2s ease forwards;
|
||||||
</script>
|
}
|
||||||
</body>
|
|
||||||
</html>
|
.hamster-spinner {
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
height: var(--size);
|
||||||
|
width: var(--size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamster-loading-bar {
|
||||||
|
--gray11: hsl(0, 0%, 43.5%);
|
||||||
|
animation: hamster-spin 0.8s linear infinite;
|
||||||
|
background: var(--gray11);
|
||||||
|
border-radius: 6px;
|
||||||
|
height: 13%;
|
||||||
|
left: -10%;
|
||||||
|
position: absolute;
|
||||||
|
top: -3.9%;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamster-loading-bar:nth-child(n) {
|
||||||
|
animation-delay: calc((n - 1) * -0.1s);
|
||||||
|
transform: rotate(calc((n - 1) * 45deg)) translate(120%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 动画 */
|
||||||
|
@keyframes hamster-fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hamster-fade-out {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hamster-spin {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0.15;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
.scrollbar-hidden {
|
||||||
|
@apply scrollbar-none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.scrollbar-none {
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-none::-webkit-scrollbar {
|
||||||
|
display: none; /* Chrome, Safari 和 Opera */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user