overseerr/src/styles/globals.css

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

body {
  @apply bg-gray-900;
}

.plex-button {
  @apply flex justify-center w-full px-4 py-2 text-sm font-medium text-center text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md disabled:opacity-50;
  background-color: #cc7b19;
}

.plex-button:hover {
  background: #f19a30;
}

ul.cards-vertical,
ul.cards-horizontal {
  @apply grid gap-4;
}

ul.cards-vertical {
  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
}

ul.cards-horizontal {
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
}

.slider-header {
  @apply relative flex mt-6 mb-4;
}

.slider-title {
  @apply inline-flex items-center text-xl leading-7 text-gray-300 sm:text-2xl sm:leading-9 sm:truncate;
}

a.slider-title {
  @apply hover:text-white;
}

.media-page {
  @apply relative px-4 pt-16 -mx-4 -mt-16 bg-center bg-cover;
}

.media-page-bg-image {
  @apply absolute inset-0 w-full h-full;
  z-index: -10;
}

.media-header {
  @apply flex flex-col items-center pt-4 xl:flex-row xl:items-end;
}

.media-poster {
  @apply w-32 overflow-hidden rounded shadow md:rounded-lg md:shadow-2xl md:w-44 xl:w-52 xl:mr-4;
}

.media-status {
  @apply mb-2 space-x-2;
}

.media-title {
  @apply flex flex-col flex-1 mt-4 text-center text-white xl:mr-4 xl:mt-0 xl:text-left;
}

.media-title > h1 {
  @apply text-2xl xl:text-4xl;
}

h1 > .media-year {
  @apply text-2xl;
}

.media-attributes {
  @apply mt-1 text-xs sm:text-sm xl:text-base xl:mt-0;
}

.media-actions {
  @apply relative z-10 flex flex-wrap items-center justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap xl:mt-0;
}

.media-actions > * {
  @apply mb-3 sm:mb-0;
}

.media-overview {
  @apply flex flex-col pt-8 pb-4 text-white lg:flex-row;
}

.media-overview-left {
  @apply flex-1 lg:mr-8;
}

.tagline {
  @apply mb-4 text-xl italic text-gray-400 lg:text-2xl;
}

.media-overview h2 {
  @apply text-xl sm:text-2xl;
}

.media-overview p {
  @apply pt-2 text-sm text-gray-400 lg:text-base;
}

ul.media-crew {
  @apply grid grid-cols-2 gap-6 mt-6 sm:grid-cols-3;
}

ul.media-crew > li {
  @apply flex flex-col col-span-1 font-bold;
}

a.crew-name {
  @apply font-normal text-gray-400 transition duration-300 hover:underline hover:text-gray-100;
}

.media-overview-right {
  @apply w-full mt-8 lg:w-80 lg:mt-0;
}

.media-facts {
  @apply text-sm bg-gray-900 border border-gray-700 rounded-lg shadow;
}

.media-fact {
  @apply flex px-4 py-2 border-b border-gray-700 last:border-b-0;
}

.media-fact-value {
  @apply flex-1 text-sm text-right text-gray-400;
}

.media-ratings {
  @apply flex items-center justify-center px-4 py-2 border-b border-gray-700 last:border-b-0;
}

.media-rating {
  @apply flex items-center mr-4 last:mr-0;
}

.error-message {
  @apply relative top-0 bottom-0 left-0 right-0 flex flex-col items-center justify-center h-screen text-center text-gray-300;
}

.heading {
  @apply text-2xl leading-8 text-gray-100;
}

.description {
  @apply max-w-4xl mt-1 text-sm leading-5 text-gray-500;
}

img.avatar-sm {
  @apply w-5 h-5 mr-1.5 rounded-full transition duration-300 scale-100 transform-gpu group-hover:scale-105;
}

.card-field {
  @apply flex items-center py-0.5 sm:py-1 text-sm;
}

.card-field-name {
  @apply mr-2 font-medium;
}

.section {
  @apply mt-6 mb-10 text-white;
}

.form-row {
  @apply max-w-6xl mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start;
}

.form-input {
  @apply text-white sm:col-span-2;
}

.form-input-field {
  @apply flex max-w-lg rounded-md shadow-sm;
}

.label-required {
  @apply text-red-500;
}

.label-tip {
  @apply block text-gray-500;
}

.actions {
  @apply pt-5 mt-8 text-white border-t border-gray-700;
}

label {
  @apply block mb-1 text-sm font-medium leading-5 text-gray-400;
}

label.checkbox-label {
  @apply sm:mt-1;
}

label.text-label {
  @apply sm:mt-2;
}

button,
input,
select,
textarea {
  @apply disabled:cursor-not-allowed;
}

input[type='checkbox'] {
  @apply w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md;
}

input[type='text'],
input[type='password'],
select,
textarea {
  @apply flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md sm:text-sm sm:leading-5;
}

input.rounded-l-only,
select.rounded-l-only {
  @apply rounded-r-none;
}

input.rounded-r-only,
select.rounded-r-only {
  @apply rounded-l-none;
}

input.short,
select.short {
  width: 4.875rem;
}

.protocol {
  @apply inline-flex items-center px-3 text-gray-100 bg-gray-600 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm;
}

.error {
  @apply mt-2 text-sm text-red-500;
}

.form-group {
  @apply mt-6 text-white;
}

.group-label {
  @apply block mb-1 text-sm font-medium leading-6 text-gray-400;
}

.toast {
  width: 360px;
}

/* Used for animating height */
.extra-max-height {
  max-height: 100rem;
}

.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

code {
  @apply px-2 py-1 bg-gray-800 rounded-md;
}

input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}