Hugging Face's logo

Spaces:
MicroHealth
/
maiko-transcription
Paused

App Files Community
bluenevus commited on
Commit
f5fb6aa
·
1 Parent(s): 89f1203

Update assets/custom.css via AI Editor

Browse files
Files changed (1) hide show
  1. assets/custom.css +54 -38
assets/custom.css CHANGED
@@ -1,56 +1,72 @@
1
- /* Left column navbar */
2
- .dash-bootstrap .dbc-col:nth-child(1) {
3
- background-color: #F8F9FA !important;
4
- min-height: 100vh;
5
  }
6
 
7
- /* Right column main content */
8
- .dash-bootstrap .dbc-col:nth-child(2) {
9
- background-color: #fff !important;
10
- min-height: 100vh;
11
  }
12
 
13
- /* Button Colors */
14
- .btn-primary {
15
- background-color: #1C304A;
16
- border-color: #1C304A;
17
  }
18
- .btn-primary:hover, .btn-primary:focus {
19
- background-color: #116F70;
20
- border-color: #116F70;
 
 
 
 
21
  }
22
 
23
- .btn-secondary {
24
- background-color: #116F70;
25
- border-color: #116F70;
26
  }
27
- .btn-secondary:hover, .btn-secondary:focus {
28
- background-color: #00AEAF;
29
- border-color: #00AEAF;
30
  }
31
 
32
- .btn-tertiary {
33
- background-color: #E0E0E0;
34
- border-color: #E0E0E0;
35
- color: #1C304A;
36
  }
37
- .btn-tertiary:hover, .btn-tertiary:focus {
38
- background-color: #DEF4F4;
39
- border-color: #DEF4F4;
40
- color: #1C304A;
 
 
 
41
  }
42
 
43
- /* Word wrap for any text boxes */
44
- textarea, .dash-textarea, .dbc-form-control, .form-control, .dash-input {
 
 
 
 
 
 
 
 
 
 
 
 
45
  white-space: pre-wrap;
46
- word-break: break-word;
47
- overflow-wrap: break-word;
48
  }
49
 
50
- /* Responsive adjustments */
51
- @media (max-width: 991px) {
52
- .dash-bootstrap .dbc-col:nth-child(1),
53
- .dash-bootstrap .dbc-col:nth-child(2) {
54
- min-height: unset;
 
 
 
 
 
55
  }
56
  }
 
1
+ body {
2
+ font-family: 'Arial', sans-serif;
3
+ background-color: #f8f9fa;
4
+ color: #343a40;
5
  }
6
 
7
+ .container-fluid {
8
+ padding: 20px;
 
 
9
  }
10
 
11
+ h1, h3 {
12
+ color: #495057;
13
+ font-weight: bold;
 
14
  }
15
+
16
+ .btn {
17
+ min-width: 150px;
18
+ padding: 10px 20px;
19
+ font-size: 16px;
20
+ border-radius: 5px;
21
+ transition: all 0.3s ease;
22
  }
23
 
24
+ .btn-primary:hover {
25
+ background-color: #0069d9;
 
26
  }
27
+
28
+ .btn-danger:hover {
29
+ background-color: #c82333;
30
  }
31
 
32
+ .btn-secondary:hover {
33
+ background-color: #5a6268;
 
 
34
  }
35
+
36
+ .btn-warning:hover {
37
+ background-color: #d39e00;
38
+ }
39
+
40
+ .btn-info:hover {
41
+ background-color: #138496;
42
  }
43
 
44
+ #status {
45
+ font-size: 18px;
46
+ font-weight: bold;
47
+ padding: 10px;
48
+ background-color: #e9ecef;
49
+ border-radius: 5px;
50
+ }
51
+
52
+ #transcript-preview {
53
+ background-color: #fff;
54
+ border-radius: 5px;
55
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
56
+ font-size: 14px;
57
+ line-height: 1.6;
58
  white-space: pre-wrap;
 
 
59
  }
60
 
61
+ @media (max-width: 768px) {
62
+ .btn {
63
+ min-width: 100%;
64
+ margin-bottom: 10px;
65
+ }
66
+ .row {
67
+ margin-bottom: 15px;
68
+ }
69
+ #transcript-preview {
70
+ height: 300px;
71
  }
72
  }