Spaces:
Paused
Paused
Update styles.py
Browse files
styles.py
CHANGED
|
@@ -7,7 +7,6 @@ CUSTOM_CSS = """
|
|
| 7 |
display: inline-block;
|
| 8 |
margin-bottom: 5px;
|
| 9 |
}
|
| 10 |
-
|
| 11 |
.tooltip-container .tooltip-text {
|
| 12 |
visibility: hidden;
|
| 13 |
width: 200px;
|
|
@@ -24,24 +23,20 @@ CUSTOM_CSS = """
|
|
| 24 |
opacity: 0;
|
| 25 |
transition: opacity 0.3s;
|
| 26 |
}
|
| 27 |
-
|
| 28 |
.tooltip-container:hover .tooltip-text {
|
| 29 |
visibility: visible;
|
| 30 |
opacity: 1;
|
| 31 |
}
|
| 32 |
-
|
| 33 |
.input-label {
|
| 34 |
font-weight: 500;
|
| 35 |
color: #31333F;
|
| 36 |
}
|
| 37 |
-
|
| 38 |
.progress-container {
|
| 39 |
width: 100%;
|
| 40 |
background-color: #f0f2f6;
|
| 41 |
border-radius: 10px;
|
| 42 |
margin: 10px 0;
|
| 43 |
}
|
| 44 |
-
|
| 45 |
.progress-bar {
|
| 46 |
height: 20px;
|
| 47 |
background-color: #007bff;
|
|
@@ -49,14 +44,12 @@ CUSTOM_CSS = """
|
|
| 49 |
transition: width 0.5s ease-in-out;
|
| 50 |
position: relative;
|
| 51 |
}
|
| 52 |
-
|
| 53 |
.progress-label {
|
| 54 |
position: absolute;
|
| 55 |
right: 10px;
|
| 56 |
color: white;
|
| 57 |
font-weight: bold;
|
| 58 |
}
|
| 59 |
-
|
| 60 |
.success-message {
|
| 61 |
padding: 1rem;
|
| 62 |
background-color: #d4edda;
|
|
@@ -64,7 +57,6 @@ CUSTOM_CSS = """
|
|
| 64 |
border-radius: 5px;
|
| 65 |
margin: 1rem 0;
|
| 66 |
}
|
| 67 |
-
|
| 68 |
.error-message {
|
| 69 |
padding: 1rem;
|
| 70 |
background-color: #f8d7da;
|
|
@@ -88,12 +80,10 @@ def create_progress_bar(value: int, label: str = "") -> str:
|
|
| 88 |
"""Create a progress bar with optional label."""
|
| 89 |
return f"""
|
| 90 |
<div class="progress-container">
|
| 91 |
-
<div class="progress-bar" style="width: {value}%;">
|
| 92 |
-
<span class="progress-label">{label if label else f'{value}%'}</span>
|
| 93 |
-
</div>
|
| 94 |
</div>
|
| 95 |
"""
|
| 96 |
|
| 97 |
def create_status_message(message: str, type: str = "success") -> str:
|
| 98 |
"""Create a status message of specified type."""
|
| 99 |
-
return f'<div class="{type}-message">{message}</div>'
|
|
|
|
| 7 |
display: inline-block;
|
| 8 |
margin-bottom: 5px;
|
| 9 |
}
|
|
|
|
| 10 |
.tooltip-container .tooltip-text {
|
| 11 |
visibility: hidden;
|
| 12 |
width: 200px;
|
|
|
|
| 23 |
opacity: 0;
|
| 24 |
transition: opacity 0.3s;
|
| 25 |
}
|
|
|
|
| 26 |
.tooltip-container:hover .tooltip-text {
|
| 27 |
visibility: visible;
|
| 28 |
opacity: 1;
|
| 29 |
}
|
|
|
|
| 30 |
.input-label {
|
| 31 |
font-weight: 500;
|
| 32 |
color: #31333F;
|
| 33 |
}
|
|
|
|
| 34 |
.progress-container {
|
| 35 |
width: 100%;
|
| 36 |
background-color: #f0f2f6;
|
| 37 |
border-radius: 10px;
|
| 38 |
margin: 10px 0;
|
| 39 |
}
|
|
|
|
| 40 |
.progress-bar {
|
| 41 |
height: 20px;
|
| 42 |
background-color: #007bff;
|
|
|
|
| 44 |
transition: width 0.5s ease-in-out;
|
| 45 |
position: relative;
|
| 46 |
}
|
|
|
|
| 47 |
.progress-label {
|
| 48 |
position: absolute;
|
| 49 |
right: 10px;
|
| 50 |
color: white;
|
| 51 |
font-weight: bold;
|
| 52 |
}
|
|
|
|
| 53 |
.success-message {
|
| 54 |
padding: 1rem;
|
| 55 |
background-color: #d4edda;
|
|
|
|
| 57 |
border-radius: 5px;
|
| 58 |
margin: 1rem 0;
|
| 59 |
}
|
|
|
|
| 60 |
.error-message {
|
| 61 |
padding: 1rem;
|
| 62 |
background-color: #f8d7da;
|
|
|
|
| 80 |
"""Create a progress bar with optional label."""
|
| 81 |
return f"""
|
| 82 |
<div class="progress-container">
|
| 83 |
+
<div class="progress-bar" style="width: {value}%;"><span class="progress-label">{label if label else f'{value}%'}</span></div>
|
|
|
|
|
|
|
| 84 |
</div>
|
| 85 |
"""
|
| 86 |
|
| 87 |
def create_status_message(message: str, type: str = "success") -> str:
|
| 88 |
"""Create a status message of specified type."""
|
| 89 |
+
return f'<div class="{type}-message">{message}</div>'
|