Hugging Face's logo

Spaces:
Scalino84
/
fluxi
Sleeping

App Files Community
Scalino84 commited on
Commit
bf9cf56
·
verified ·
1 Parent(s): 67067dd

Upload /bck/static/style2.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. bck/static/style2.css +169 -0
bck/static/style2.css ADDED
@@ -0,0 +1,169 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Optimierte CSS für das gesamte Projekt */
2
+
3
+ :root {
4
+ --primary-color: #3b5998;
5
+ --secondary-color: #4c4f6b;
6
+ --background-gradient-start: #1a1a2e;
7
+ --background-gradient-end: #16213e;
8
+ --text-color: #ffffff;
9
+ --text-color-light: #000000;
10
+ --input-bg-color: rgba(255, 255, 255, 0.9);
11
+ --modal-bg-color: rgba(20, 20, 30, 0.95);
12
+ --modal-text-color: #ffffff;
13
+ --border-color: rgba(255, 255, 255, 0.2);
14
+ --focus-shadow-color: rgba(59, 89, 152, 0.4);
15
+ --transition-speed: 0.3s;
16
+ --border-radius: 10px;
17
+ }
18
+
19
+ /* Body und globale Stile */
20
+ body {
21
+ margin: 0;
22
+ padding: 0;
23
+ min-height: 100vh;
24
+ background: linear-gradient(120deg, var(--background-gradient-start), var(--background-gradient-end));
25
+ color: var(--text-color);
26
+ font-family: 'Poppins', sans-serif;
27
+ display: flex;
28
+ flex-direction: column;
29
+ align-items: center;
30
+ overflow-x: hidden;
31
+ }
32
+
33
+ /* Modale Popups */
34
+ .modal-content {
35
+ background: var(--modal-bg-color);
36
+ color: var(--modal-text-color);
37
+ border-radius: var(--border-radius);
38
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
39
+ }
40
+
41
+ .modal-header, .modal-footer {
42
+ border: none;
43
+ color: var(--modal-text-color);
44
+ }
45
+
46
+ .modal-header .btn-close {
47
+ color: var(--modal-text-color);
48
+ }
49
+
50
+ .modal-body {
51
+ color: var(--modal-text-color);
52
+ font-size: 16px;
53
+ }
54
+
55
+ #progressMessage {
56
+ color: black; /* oder eine andere sichtbare Farbe */
57
+ }
58
+
59
+ /* Eingabefelder */
60
+ textarea.form-control, input.form-control, select.form-control {
61
+ background: var(--input-bg-color);
62
+ color: var(--text-color-light);
63
+ border: 1px solid var(--border-color);
64
+ border-radius: var(--border-radius);
65
+ padding: 12px;
66
+ font-size: 16px;
67
+ transition: box-shadow var(--transition-speed), border-color var(--transition-speed);
68
+ }
69
+
70
+ textarea.form-control:focus, input.form-control:focus, select.form-control:focus {
71
+ outline: none;
72
+ border-color: var(--primary-color);
73
+ box-shadow: 0 0 8px var(--focus-shadow-color);
74
+ }
75
+
76
+ /* Labels */
77
+ label.form-label {
78
+ color: var(--text-color-light);
79
+ }
80
+
81
+ /* Buttons */
82
+ button {
83
+ padding: 12px 24px;
84
+ font-size: 16px;
85
+ color: var(--text-color);
86
+ background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
87
+ border: none;
88
+ border-radius: var(--border-radius);
89
+ cursor: pointer;
90
+ box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
91
+ transition: all var(--transition-speed) ease;
92
+ }
93
+
94
+ button:hover {
95
+ background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
96
+ transform: scale(1.03);
97
+ }
98
+
99
+ /* Dropdown-Buttons */
100
+ .dropdown-menu .dropdown-item {
101
+ padding: 10px 15px;
102
+ background: var(--input-bg-color);
103
+ color: var(--text-color-light);
104
+ transition: background-color var(--transition-speed), color var(--transition-speed);
105
+ }
106
+
107
+ .dropdown-menu .dropdown-item:hover {
108
+ background: var(--secondary-color);
109
+ color: var(--text-color);
110
+ }
111
+
112
+ /* Fortschrittsanzeige */
113
+ .progress {
114
+ height: 16px;
115
+ background-color: rgba(255, 255, 255, 0.04);
116
+ border-radius: var(--border-radius);
117
+ overflow: hidden;
118
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
119
+ }
120
+
121
+ .progress-bar {
122
+ background-color: var(--primary-color);
123
+ transition: width var(--transition-speed);
124
+ }
125
+
126
+ /* Responsives Design */
127
+ @media (max-width: 768px) {
128
+ textarea.form-control, input.form-control {
129
+ font-size: 14px;
130
+ padding: 10px;
131
+ }
132
+
133
+ button {
134
+ font-size: 14px;
135
+ padding: 10px 20px;
136
+ }
137
+ }
138
+ .image-container {
139
+ position: relative;
140
+ text-align: center;
141
+ max-height: 80vh;
142
+ overflow: auto;
143
+ }
144
+
145
+ .image-container img {
146
+ max-width: 100%;
147
+ height: auto;
148
+ transition: transform 0.2s;
149
+ }
150
+
151
+ .image-container img:hover {
152
+ transform: scale(1.02);
153
+ }
154
+
155
+ .modal-dialog {
156
+ max-width: 90vw;
157
+ margin: 1.75rem auto;
158
+ }
159
+
160
+ .image-details {
161
+ margin-top: 1rem;
162
+ padding: 1rem;
163
+ background-color: rgba(0,0,0,0.02);
164
+ border-radius: 4px;
165
+ }
166
+
167
+ .modal-footer {
168
+ justify-content: space-between;
169
+ }