huggingfacejs/image-classification-vue

1h1, h2, h3, h4, h5, h6 {2  margin-bottom: 1rem;3}4 5.flex {6  display: flex;7}8 9.flex-row {10  flex-direction: row;11}12 13.flex-column {14  flex-direction: column;15}16 17.justify-center {18  justify-content: center;19}20 21.justify-between {22  justify-content: space-between;23}24 25.align-center {26  align-items: center;27}28 29/* Grid utilities */30.grid {31  display: grid;32}33 34.grid-cols {35  grid-template-columns: repeat(1, minmax(0, 1fr));36}37 38@media (min-width: 640px) {39  .grid-cols {40    grid-template-columns: repeat(2, minmax(0, 1fr));41  }42}43 44@media (min-width: 768px) {45  .grid-cols {46    grid-template-columns: repeat(3, minmax(0, 1fr));47  }48}49 50.grid-cols-1 {51  grid-template-columns: repeat(1, minmax(0, 1fr));52}53 54.grid-cols-2 {55  grid-template-columns: repeat(2, minmax(0, 1fr));56}57 58.grid-cols-3 {59  grid-template-columns: repeat(3, minmax(0, 1fr));60}61 62.grid-cols-4 {63  grid-template-columns: repeat(4, minmax(0, 1fr));64}65 66/* Gap utilities */67.gap-0 {68  gap: 0;69}70 71.gap-1 {72  gap: 0.25rem;73}74 75.gap-2 {76  gap: 0.5rem;77}78 79.gap-3 {80  gap: 0.75rem;81}82 83.gap-4 {84  gap: 1rem;85}86 87/* Responsive container class */88 89.container {90  width: 100%;91  max-width: 1280px;92  margin: 0 auto;93  padding: 2rem;94}95 96.btn-error {97  background-color: #c10c0c;98  border-color: #c10c0c;99}100 101.btn-error:hover {102  background-color: #a80c0c;103  border-color: #a80c0c;104}105 106.btn-warning {107  background-color: #c1a10c;108  border-color: #c1a10c;109}110 111.btn-warning:hover {112  background-color: #a88c0c;113  border-color: #a88c0c;114}115 116.btn-success {117  background-color: #0cc14e;118  border-color: #0cc14e;119}120 121.btn-success:hover {122  background-color: #0ca83d;123  border-color: #0ca83d;124}125 126.btn-primary {127  background-color: #0c6fc1;128  border-color: #0c6fc1;129}130 131.btn-primary:hover {132  background-color: #0c5fa8;133  border-color: #0c5fa8;134}135 136/* B&W + Gray buttons */137 138.btn-bw {139  background-color: #fff;140  border-color: #fff;141  color: #000;142}143 144.btn-bw:hover {145  background-color: #000;146  border-color: #000;147  color: #fff;148}149 150.btn-gray {151  background-color: #ccc;152  border-color: #ccc;153  color: #000;154}155 156.btn-gray:hover {157  background-color: #000;158  border-color: #000;159  color: #fff;160}161 162.image-container {163  display: flex;164  justify-content: center;165}166 167#detected-objects-container {168  position: absolute;169}170 171.bounding-box {172  position: absolute;173  border: 3px solid red;174}175 176.tooltip {177  position: absolute;178  bottom: 100%;179  left: 50%;180  transform: translateX(-50%);181  background-color: rgba(0, 0, 0, 0.8);182  color: white;183  font-size: 16px;184  font-weight: bold;185  padding: 4px 8px;186  border-radius: 4px;187  white-space: nowrap;188  opacity: 0;189  transition: opacity 0.3s;190}191 192.bounding-box:hover .tooltip {193  opacity: 1;194}195