style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  line-height: 2.0;
  font-weight: 400;

  color-scheme: light dark;
  background-color: #193747;

  font-synthesis: none;
  text-rendering: optimizeLegibility;

  @apply text-slate-300 font-sans antialiased
}

.header-text {
  @apply mb-4 text-4xl font-bold leading-none tracking-tight text-slate-100 md:text-5xl text-center
}

.subheader-text {
  @apply mb-4 text-3xl font-bold leading-none tracking-tight text-slate-100 md:text-4xl text-center
}

.smallheader-text {
  @apply text-2xl font-bold leading-none tracking-tight text-slate-100 md:text-2xl text-center
}

.text-link {
  @apply inline-block border-b-2 font-bold text-gray-50 hover:border-gray-50 border-gray-50/10 transition-colors duration-150
}

.start-btn {
  @apply bg-green-500 hover:bg-green-700 text-gray-50 font-bold py-2 px-4 border border-green-700 rounded flex items-center h-9 text-sm w-48
}

.stop-btn {
  @apply bg-gray-500 hover:bg-gray-700 text-gray-50 font-bold py-2 px-4 border border-gray-700 rounded flex items-center h-9 text-sm w-48
}

.new-universe-btn {
  @apply bg-green-700 hover:bg-green-900 text-gray-50 font-bold py-2 px-4 border border-green-900 rounded flex items-center h-9 text-sm w-48
}

.predefined-universe-btn {
  @apply bg-green-700 hover:bg-green-900 text-gray-50 font-bold py-2 px-4 border border-green-900 rounded flex items-center h-9 text-sm w-48
}

.clear-btn {
  @apply bg-yellow-700 hover:bg-yellow-900 text-gray-50 font-bold py-2 px-4 border border-yellow-900 rounded flex items-center h-9 text-sm w-48
}

.random-universe-btn {
  @apply bg-yellow-700 hover:bg-yellow-900 text-gray-50 font-bold py-2 px-4 border border-yellow-900 rounded flex items-center h-9 text-sm w-48
}

.create-new-universe-btn {
  @apply bg-green-500 hover:bg-green-700 text-gray-50 font-bold py-2 px-4 border border-green-700 rounded flex items-center h-9 text-sm w-20
}

.cancel-btn {
  @apply bg-gray-500 hover:bg-gray-700 text-gray-50 font-bold py-2 px-4 border border-gray-700 rounded flex items-center h-9 text-sm w-20
}

.slider-label {
  @apply mb-2 inline-block font-bold text-gray-50
}

.slider-input {
  @apply cursor-pointer appearance-none border-transparent bg-green-500 hover:bg-green-700 w-64 h-2 rounded-full focus:outline-none disabled:bg-green-900 disabled:cursor-not-allowed thumb-color-green
}

.thumb-color-green::-webkit-slider-thumb {
  @apply appearance-none w-4 h-4 bg-emerald-200 hover:bg-emerald-100 rounded-full cursor-pointer border-none
}

.thumb-color-green::-moz-range-thumb {
  @apply appearance-none w-4 h-4 bg-emerald-200 hover:bg-emerald-100 rounded-full cursor-pointer border-none
}

.thumb-color-green::-ms-thumb {
  @apply appearance-none w-4 h-4 bg-emerald-200 hover:bg-emerald-100 rounded-full cursor-pointer border-none
}

.thumb-color-green:disabled::-webkit-slider-thumb {
  @apply bg-emerald-700 cursor-not-allowed;
}

.thumb-color-green:disabled::-moz-range-thumb {
  @apply bg-emerald-700 cursor-not-allowed;
}

.thumb-color-green:disabled::-ms-thumb {
  @apply bg-emerald-700 cursor-not-allowed;
}

.checkbox-input {
  @apply w-4 h-4 appearance-none bg-gray-50 border-2 border-gray-50 rounded-sm focus:outline-none
}

.checkbox-input:checked {
  @apply bg-green-500 hover:bg-green-700 border-transparent
}

.checkbox-input:not(:checked) {
  @apply bg-gray-50 hover:bg-gray-300 border-transparent
}

.slider-indicator {
  @apply text-gray-50
}

.header-icon {
  @apply w-16 h-16
}

.small-icon {
  @apply w-6 h-6 mb-1
}

.btn-icon {
  @apply w-4 h-4 mr-2
}

.white-icon {
  @apply filter brightness-0 invert
}

.start-icon {
  width: 1rem;
  height: 1rem;
  background-image: url('/assets/img/start_icon.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.stop-icon {
  width: 1rem;
  height: 1rem;
  background-image: url('/assets/img/stop_icon.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.invisible {
  visibility: hidden;
}

.modal-container {
  @apply fixed z-50 top-0 left-0 w-full h-full items-center justify-center hidden
}

.modal-new-universe-content {
  background-color: #193747;
  @apply rounded-lg shadow-md p-6 w-96 overflow-y-auto z-50
}

.modal-predefined-universe-content {
  background-color: #193747;
  @apply rounded-lg shadow-md p-6 w-6/12 overflow-y-auto z-50
}

.modal-overlay {
  @apply fixed top-0 left-0 w-full h-full bg-black opacity-50 z-40
}

.hover-icon:hover {
  filter: invert(92%) sepia(0%) saturate(1%) hue-rotate(75deg) brightness(90%) contrast(91%);
}

.card-container {
  background-color: #465E6B;
  @apply shadow-md rounded-lg overflow-hidden flex-1 transition-colors duration-300 hover:bg-emerald-400
}

.card-header {
  @apply text-xl font-bold mb-2 text-gray-50
}

.card-content {
  @apply text-gray-50
}

#modal-new-universe:target {
  display: flex
}

#modal-new-universe:target #modal-overlay {
  display: block
}

#modal-predefined-universe:target {
  display: flex
}

#modal-predefined-universe:target #modal-overlay {
  display: block
}