|
|
<style> |
|
|
|
|
|
.st-emotion-cache-13ln4jf { |
|
|
width: 350px !important; |
|
|
} |
|
|
.custom-dropdown { |
|
|
position: relative; display: inline-block; width: 100%; |
|
|
} |
|
|
.size-button { |
|
|
background-color: #f0f2f6; color: #31333F; padding: 8px 12px; |
|
|
border: 1px solid #ced4da; border-radius: 0.5rem; cursor: pointer; |
|
|
display: flex; justify-content: space-between; align-items: center; |
|
|
width: 100%; font-size: 14px; |
|
|
} |
|
|
.size-button:hover { border-color: #4A90E2; } |
|
|
.dropdown-content { |
|
|
display: none; position: absolute; background-color: #ffffff; |
|
|
min-width: 300px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); |
|
|
z-index: 1000; border-radius: 0.5rem; padding: 8px 0; border: 1px solid #ddd; |
|
|
} |
|
|
.custom-dropdown:hover .dropdown-content { display: block; } |
|
|
.dropdown-item { |
|
|
display: flex; align-items: center; padding: 10px 15px; |
|
|
color: #31333F; text-decoration: none; gap: 15px; |
|
|
} |
|
|
.dropdown-item:hover, .dropdown-item.active { background-color: #f0f2f6; } |
|
|
.item-icon { font-size: 20px; } |
|
|
.item-text { flex-grow: 1; } |
|
|
.item-primary { font-weight: 500; } |
|
|
.item-subtitle { font-size: 12px; color: #555; } |
|
|
.item-checkmark { font-weight: bold; color: #4A90E2; width: 20px; text-align: right; } |
|
|
|
|
|
.dynamic-canvas-container { |
|
|
width: 100%; max-width: 90vw; margin: 2rem auto; border: 1px solid #EAECEE; |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.05); border-radius: 8px; padding: 2%; |
|
|
overflow: hidden; resize: both; transition: aspect-ratio 0.3s ease-in-out; |
|
|
display: flex; flex-direction: column; background: #fff; |
|
|
} |
|
|
.dynamic-canvas-container .stTextArea textarea { |
|
|
transition: font-size 0.2s; |
|
|
} |
|
|
</style> |
