Spaces:
Running
Running
* { | |
box-sizing: border-box; | |
padding: 0; | |
margin: 0; | |
font-family: sans-serif; | |
} | |
.sidebar { | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 250px; /* Adjust width as needed */ | |
height: 100%; /* Make sidebar full height */ | |
background-color: #f0f0f0; /* Sidebar background color */ | |
/* Add other styling properties as needed */ | |
} | |
body { | |
min-height: 100vh; | |
min-height: -webkit-fill-available; | |
} | |
html { | |
height: -webkit-fill-available; | |
} | |
main { | |
height: 100vh; | |
height: -webkit-fill-available; | |
max-height: 100vh; | |
overflow-x: auto; | |
overflow-y: hidden; | |
} | |
.dropdown-toggle { outline: 0; } | |
.btn-toggle { | |
padding: .25rem .5rem; | |
font-weight: 600; | |
color: var(--bs-emphasis-color); | |
background-color: transparent; | |
} | |
.btn-toggle:hover, | |
.btn-toggle:focus { | |
color: rgba(var(--bs-emphasis-color-rgb), .85); | |
background-color: var(--bs-tertiary-bg); | |
} | |
.btn-toggle::before { | |
width: 1.25em; | |
line-height: 0; | |
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); | |
transition: transform .35s ease; | |
transform-origin: .5em 50%; | |
} | |
[data-bs-theme="dark"] .btn-toggle::before { | |
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); | |
} | |
.btn-toggle[aria-expanded="true"] { | |
color: rgba(var(--bs-emphasis-color-rgb), .85); | |
} | |
.btn-toggle[aria-expanded="true"]::before { | |
transform: rotate(90deg); | |
} | |
.btn-toggle-nav a { | |
padding: .1875rem .5rem; | |
margin-top: .125rem; | |
margin-left: 1.25rem; | |
} | |
.btn-toggle-nav a:hover, | |
.btn-toggle-nav a:focus { | |
background-color: var(--bs-tertiary-bg); | |
} | |
.scrollarea { | |
overflow-y: auto; | |
} | |
html, | |
body { | |
height: 100%; | |
} | |
body { | |
padding: 32px; | |
} | |
body, | |
#container { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
} | |
#container { | |
position: relative; | |
gap: 0.4rem; | |
width: 640px; | |
height: 640px; | |
max-width: 100%; | |
max-height: 100%; | |
border: 2px dashed #D1D5DB; | |
border-radius: 0.75rem; | |
overflow: hidden; | |
cursor: pointer; | |
margin: 1rem; | |
background-size: 100% 100%; | |
background-position: center; | |
background-repeat: no-repeat; | |
font-size: 18px; | |
} | |
#upload { | |
display: none; | |
} | |
svg { | |
pointer-events: none; | |
} | |
#example { | |
font-size: 14px; | |
text-decoration: underline; | |
cursor: pointer; | |
} | |
#example:hover { | |
color: #2563EB; | |
} | |
.bounding-box { | |
position: absolute; | |
box-sizing: border-box; | |
border: solid 2px; | |
} | |
.bounding-box-label { | |
color: white; | |
position: absolute; | |
font-size: 12px; | |
margin: -16px 0 0 -2px; | |
padding: 1px; | |
} |