Piwigo_Bratonien_Tools/css/public_selection.css

#bratonien-selection-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#bratonien-selection-toggle.active {
  color: #f0a646;
}

.bratonien-selection-bar {
  position: sticky;
  top: .5rem;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .85rem;
  margin: 0 0 1rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: .35rem;
  background: rgba(32,32,32,.96);
  box-shadow: 0 .25rem .8rem rgba(0,0,0,.2);
}

.bratonien-selection-status {
  white-space: nowrap;
}

.bratonien-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.bratonien-selection-actions button {
  min-height: 2.25rem;
  padding: .35rem .7rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: .25rem;
  background: rgba(255,255,255,.05);
  color: inherit;
  cursor: pointer;
}

.bratonien-selection-actions button:hover:not(:disabled),
.bratonien-selection-actions button:focus:not(:disabled) {
  border-color: rgba(240,166,70,.7);
}

.bratonien-selection-actions .bratonien-selection-primary {
  border-color: #f0a646;
  background: #f0a646;
  color: #242424;
  font-weight: 700;
}

.bratonien-selection-actions button:disabled {
  opacity: .45;
  cursor: default;
}

.bratonien-selection-error {
  flex-basis: 100%;
  color: #e58b8b;
}

.bratonien-selectable {
  position: relative;
}

.bratonien-selection-active .bratonien-selectable {
  cursor: pointer;
}

.bratonien-selection-active .bratonien-selectable::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 3px solid transparent;
  box-sizing: border-box;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.bratonien-selection-active .bratonien-selectable.bratonien-selected::after {
  border-color: #f0a646;
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,.14);
}

.bratonien-selection-active .bratonien-selectable.bratonien-selected::before {
  content: '\2713';
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 20;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1.8rem;
  text-align: center;
  border-radius: 50%;
  background: #f0a646;
  color: #242424;
  font-weight: 800;
  pointer-events: none;
}

@media (max-width: 640px) {
  .bratonien-selection-bar {
    align-items: stretch;
  }

  .bratonien-selection-actions {
    width: 100%;
  }

  .bratonien-selection-actions button {
    flex: 1 1 auto;
  }
}