client/ui/assets/css/main.css at c412d3413ab7602418c5b5e83eebdd4b2a2f164c · jumpserver/client · 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
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --color-secondary: var(--ui-color-secondary-500);
  --color-elevated: #1e1e20;
}

@theme .dark {
  --color-elevated: #141419;
}

:root {
  --ui-color-primary-500: #1ab394;
  --ui-color-elevated-500: #303237;
  --ui-color-secondary-500: #141419;
  --ui-color-neutral-100: #d1d1d1;
  --el-font-family: var(--font-sans);
  --bg-hover-light: rgba(0, 0, 0, 0.1);
  --bg-hover-dark: rgba(0, 0, 0, 0.3);
  --bg-selected-light: rgba(209, 209, 209, 0.8);
  --bg-selected-dark: rgba(0, 0, 0, 0.5);
}

.text-xs-plus {
  @apply text-[14px];
}

.text-overflow-ellipsis {
  @apply text-ellipsis overflow-hidden whitespace-nowrap;
}

/* 全局按钮样式 */
.btn-common {
  @apply rounded-lg transition-colors duration-200;
}

.btn-common:hover {
}

.dark .btn-common:hover {
}

/* App Store 风格按钮 */
.btn-connect {
  @apply font-bold rounded-lg text-xs transition-all duration-200;
}

/* .light .btn-connect:hover {
  @apply bg-green-500 text-white;
}

.dark .btn-connect {
  @apply bg-gray-600 hover:bg-gray-700;
} */

/* Header 平台特定颜色 */
.header-bg {
  /* 默认颜色 */
  --header-bg-light: rgb(231, 231, 231);
  --header-bg-dark: #333334;
}

/* Windows 平台 */
.platform-windows .header-bg {
  --header-bg-light: rgb(248, 248, 248);
  --header-bg-dark: #2c2c2e;
}

/* macOS 平台 */
.platform-darwin .header-bg {
  --header-bg-light: rgba(255, 255, 255, 0.8);
  --header-bg-dark: #1e1e1e;
}

/* Linux 平台 */
.platform-linux .header-bg {
  --header-bg-light: rgb(240, 240, 240);
  --header-bg-dark: #2d2d30;
}

/* 主题颜色应用 */
.light .header-bg {
  background-color: var(--header-bg-light);
}

.dark .header-bg {
  background-color: var(--header-bg-dark);
}

html,
body,
#__nuxt,
#app {
  height: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-size-adjust: 100%;
}