Add tunnel UI styling
linuztx committed
May 15, 2025 at 09:08 UTC
3801a07492680451b118088b83f002f14e836e40
1 file changed
+178
webui/css/tunnel.css
new
+178
@@ -0,0 +1,178 @@
1
+/* Tunnel Modal Styles */
2
+.tunnel-container {
3
+ padding: 1rem;
4
+ width: 100%;
5
+}
6
+
7
+.tunnel-description {
8
+ margin-bottom: 1.5rem;
9
+ text-align: center;
10
+}
11
+
12
+.tunnel-actions {
13
+ display: flex;
14
+ justify-content: center;
15
+ margin-top: 2rem;
16
+ margin-bottom: 2rem;
17
+}
18
+
19
+.tunnel-link-container {
20
+ margin-top: 1rem;
21
+}
22
+
23
+.tunnel-link-field {
24
+ display: flex;
25
+ align-items: center;
26
+ margin-bottom: 0.5rem;
27
+ background-color: var(--bg-color-secondary);
28
+ border: 1px solid var(--border-color);
29
+ border-radius: 4px;
30
+}
31
+
32
+.tunnel-link-input {
33
+ flex: 1;
34
+ padding: 0.75rem;
35
+ background-color: transparent;
36
+ border: none;
37
+ color: var(--text-color);
38
+ font-size: 0.9rem;
39
+ outline: none;
40
+}
41
+
42
+.copy-link-button {
43
+ padding: 0.5rem 0.75rem;
44
+ background: none;
45
+ border: none;
46
+ border-left: 1px solid var(--border-color);
47
+ color: var(--text-color);
48
+ cursor: pointer;
49
+ transition: background-color 0.2s;
50
+}
51
+
52
+.copy-link-button:hover {
53
+ background-color: var(--bg-color-tertiary);
54
+}
55
+
56
+.copy-link-button i,
57
+.refresh-link-button i,
58
+.btn i {
59
+ margin-right: 6px;
60
+}
61
+
62
+.tunnel-link-info {
63
+ margin-top: 1rem;
64
+ font-size: 1rem;
65
+ color: var(--text-color);
66
+ text-align: center;
67
+ line-height: 1.5;
68
+}
69
+
70
+.loading-spinner {
71
+ display: flex;
72
+ justify-content: center;
73
+ align-items: center;
74
+ margin-top: 2rem;
75
+ margin-bottom: 2rem;
76
+ min-height: 38px;
77
+ font-style: italic;
78
+ color: var(--text-color-secondary);
79
+}
80
+
81
+.loading-spinner i {
82
+ font-size: 1.5rem;
83
+ margin-right: 10px;
84
+ color: var(--accent-color);
85
+}
86
+
87
+.refresh-link-button {
88
+ padding: 0.5rem 0.75rem;
89
+ background: none;
90
+ border: none;
91
+ border-left: 1px solid var(--border-color);
92
+ color: var(--text-color);
93
+ cursor: pointer;
94
+ transition: background-color 0.2s;
95
+}
96
+
97
+.refresh-link-button:hover {
98
+ background-color: var(--bg-color-tertiary);
99
+ color: var(--accent-color);
100
+}
101
+
102
+.tunnel-link-persistence {
103
+ margin-top: 0.75rem;
104
+ font-size: 0.95rem;
105
+ color: rgba(255, 255, 255, 0.7);
106
+ text-align: center;
107
+ font-style: italic;
108
+}
109
+
110
+.btn-danger {
111
+ background-color: #dc3545;
112
+ color: white;
113
+ border: none;
114
+}
115
+
116
+.btn-danger:hover {
117
+ background-color: #bd2130;
118
+}
119
+
120
+.stop-tunnel-container {
121
+ margin-top: 20px;
122
+ display: flex;
123
+ justify-content: center;
124
+}
125
+
126
+/* Section title icon styling */
127
+.section-title i {
128
+ margin-right: 8px;
129
+}
130
+
131
+/* Copy button states */
132
+.copy-success {
133
+ background-color: rgba(40, 167, 69, 0.15) !important;
134
+ color: #28a745 !important;
135
+ border-left: 1px solid rgba(40, 167, 69, 0.5) !important;
136
+ transition: all 0.3s ease-in-out;
137
+}
138
+
139
+.copy-error {
140
+ background-color: rgba(220, 53, 69, 0.15) !important;
141
+ color: #dc3545 !important;
142
+ border-left: 1px solid rgba(220, 53, 69, 0.5) !important;
143
+ transition: all 0.3s ease-in-out;
144
+}
145
+
146
+/* Animation for copy button */
147
+@keyframes pulse {
148
+ 0% { transform: scale(1); }
149
+ 50% { transform: scale(1.05); }
150
+ 100% { transform: scale(1); }
151
+}
152
+
153
+.copy-success, .copy-error {
154
+ animation: pulse 0.5s;
155
+}
156
+
157
+/* Refresh button state */
158
+.refreshing {
159
+ opacity: 0.7;
160
+ pointer-events: none;
161
+ background-color: rgba(108, 117, 125, 0.15) !important;
162
+ border-left: 1px solid rgba(108, 117, 125, 0.5) !important;
163
+}
164
+
165
+/* Create and Stop button states */
166
+.creating, .stopping {
167
+ opacity: 0.8;
168
+ pointer-events: none;
169
+ cursor: not-allowed;
170
+}
171
+
172
+.creating {
173
+ background-color: rgba(0, 123, 255, 0.7) !important;
174
+}
175
+
176
+.stopping {
177
+ background-color: rgba(220, 53, 69, 0.7) !important;
178
+}