You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
465 lines
10 KiB
465 lines
10 KiB
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
min-height: calc(100% + env(safe-area-inset-top));
|
|
padding: env(safe-area-inset-top) env(safe-area-inset-right)
|
|
env(safe-area-inset-bottom) env(safe-area-inset-left);
|
|
}
|
|
|
|
body {
|
|
@apply bg-gray-900;
|
|
}
|
|
|
|
code {
|
|
@apply px-2 py-1 bg-gray-800 rounded-md;
|
|
}
|
|
|
|
input[type='search']::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.searchbar {
|
|
padding-top: env(safe-area-inset-top);
|
|
height: calc(4rem + env(safe-area-inset-top));
|
|
}
|
|
|
|
.sidebar {
|
|
@apply border-r border-gray-700;
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-left: env(safe-area-inset-left);
|
|
background: linear-gradient(180deg, rgba(31, 41, 55, 1) 0%, #131928 100%);
|
|
}
|
|
|
|
.slideover {
|
|
padding-top: calc(1.5rem + env(safe-area-inset-top));
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
.sidebar-close-button {
|
|
top: env(safe-area-inset-top);
|
|
}
|
|
|
|
.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 font-bold leading-7 text-gray-300 sm:text-2xl sm:leading-9 sm:truncate;
|
|
}
|
|
|
|
a.slider-title {
|
|
@apply transition duration-300 hover:text-white;
|
|
}
|
|
|
|
a.slider-title svg {
|
|
@apply w-6 h-6 ml-2;
|
|
}
|
|
|
|
.media-page {
|
|
@apply relative px-4 -mx-4 bg-center bg-cover;
|
|
margin-top: calc(-4rem - env(safe-area-inset-top));
|
|
padding-top: calc(4rem + env(safe-area-inset-top));
|
|
}
|
|
|
|
.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 font-bold xl:text-4xl;
|
|
}
|
|
|
|
h1 .media-year {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
.media-attributes {
|
|
@apply flex items-center mt-1 space-x-1 text-xs text-gray-300 sm:text-sm xl:text-base xl:mt-0;
|
|
}
|
|
|
|
.media-attributes a {
|
|
@apply transition duration-300 hover:text-white hover:underline;
|
|
}
|
|
|
|
.media-actions {
|
|
@apply relative 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 font-bold text-gray-300 sm:text-2xl;
|
|
}
|
|
|
|
.media-overview p {
|
|
@apply pt-2 text-sm text-gray-400 sm: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 text-gray-300;
|
|
}
|
|
|
|
a.crew-name,
|
|
.media-fact-value a,
|
|
.media-fact-value button {
|
|
@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 font-bold text-gray-300 bg-gray-900 border border-gray-700 rounded-lg shadow;
|
|
}
|
|
|
|
.media-fact {
|
|
@apply flex justify-between px-4 py-2 border-b border-gray-700 last:border-b-0;
|
|
}
|
|
|
|
.media-fact-value {
|
|
@apply ml-2 text-sm font-normal text-right text-gray-400;
|
|
}
|
|
|
|
.media-ratings {
|
|
@apply flex items-center justify-center px-4 py-2 font-medium 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 font-bold leading-8 text-gray-100;
|
|
}
|
|
|
|
.description {
|
|
@apply max-w-4xl mt-1 text-sm leading-5 text-gray-400;
|
|
}
|
|
|
|
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 truncate;
|
|
}
|
|
|
|
.card-field-name {
|
|
@apply mr-2 font-bold;
|
|
}
|
|
|
|
.card-field a {
|
|
@apply transition duration-300 hover:text-white hover:underline;
|
|
}
|
|
|
|
.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-sm text-white sm:col-span-2;
|
|
}
|
|
|
|
.form-input-field {
|
|
@apply flex max-w-xl rounded-md shadow-sm;
|
|
}
|
|
|
|
.actions {
|
|
@apply pt-5 mt-8 text-white border-t border-gray-700;
|
|
}
|
|
|
|
label,
|
|
.group-label {
|
|
@apply block mb-1 text-sm font-bold leading-5 text-gray-400;
|
|
}
|
|
|
|
label.checkbox-label {
|
|
@apply sm:mt-1;
|
|
}
|
|
|
|
label.text-label {
|
|
@apply sm:mt-2;
|
|
}
|
|
|
|
label a {
|
|
@apply text-gray-100 transition duration-300 hover:text-white hover:underline;
|
|
}
|
|
|
|
.label-required {
|
|
@apply ml-1 text-red-500;
|
|
}
|
|
|
|
.label-tip {
|
|
@apply block font-medium text-gray-500;
|
|
}
|
|
|
|
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,
|
|
textarea.rounded-l-only {
|
|
@apply rounded-r-none;
|
|
}
|
|
|
|
input.rounded-r-only,
|
|
select.rounded-r-only,
|
|
textarea.rounded-r-only {
|
|
@apply rounded-l-none;
|
|
}
|
|
|
|
input.short {
|
|
@apply w-20;
|
|
}
|
|
|
|
select.short {
|
|
@apply w-min;
|
|
}
|
|
|
|
button > span {
|
|
@apply whitespace-nowrap;
|
|
}
|
|
|
|
button.input-action {
|
|
@apply relative inline-flex items-center px-3 sm:px-3.5 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 last:rounded-r-md;
|
|
}
|
|
|
|
.button-md svg,
|
|
button.input-action svg,
|
|
.plex-button svg {
|
|
@apply w-5 h-5 ml-2 mr-2 first:ml-0 last:mr-0;
|
|
}
|
|
|
|
.button-sm svg {
|
|
@apply w-4 h-4 ml-1.5 mr-1.5 first:ml-0 last:mr-0;
|
|
}
|
|
|
|
.modal-icon {
|
|
@apply flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto text-white bg-gray-800 rounded-full ring-1 ring-gray-500 sm:mx-0 sm:h-10 sm:w-10;
|
|
}
|
|
|
|
.modal-icon svg {
|
|
@apply w-6 h-6;
|
|
}
|
|
|
|
svg.icon-md {
|
|
@apply w-5 h-5;
|
|
}
|
|
|
|
svg.icon-sm {
|
|
@apply w-4 h-4;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.toast {
|
|
width: 360px;
|
|
}
|
|
|
|
.react-select-container {
|
|
@apply w-full;
|
|
}
|
|
|
|
.react-select-container .react-select__control {
|
|
@apply text-white bg-gray-700 border border-gray-500 rounded-md hover:border-gray-500;
|
|
}
|
|
|
|
.react-select-container-dark .react-select__control {
|
|
@apply bg-gray-800 border border-gray-700;
|
|
}
|
|
|
|
.react-select-container .react-select__control--is-focused {
|
|
@apply text-white bg-gray-700 border border-gray-500 rounded-md shadow;
|
|
}
|
|
|
|
.react-select-container-dark .react-select__control--is-focused {
|
|
@apply bg-gray-800 border-gray-600;
|
|
}
|
|
|
|
.react-select-container .react-select__menu {
|
|
@apply text-gray-300 bg-gray-700;
|
|
}
|
|
|
|
.react-select-container-dark .react-select__menu {
|
|
@apply bg-gray-800;
|
|
}
|
|
|
|
.react-select-container .react-select__option--is-focused {
|
|
@apply text-white bg-gray-600;
|
|
}
|
|
|
|
.react-select-container-dark .react-select__option--is-focused {
|
|
@apply bg-gray-700;
|
|
}
|
|
|
|
.react-select-container .react-select__indicator-separator {
|
|
@apply bg-gray-500;
|
|
}
|
|
|
|
.react-select-container .react-select__indicator {
|
|
@apply text-gray-500;
|
|
}
|
|
|
|
.react-select-container .react-select__placeholder {
|
|
@apply text-gray-400;
|
|
}
|
|
|
|
.react-select-container .react-select__multi-value {
|
|
@apply bg-gray-800 border border-gray-500 rounded-md;
|
|
}
|
|
|
|
.react-select-container .react-select__multi-value__label {
|
|
@apply text-white;
|
|
}
|
|
|
|
.react-select-container .react-select__multi-value__remove {
|
|
@apply cursor-pointer rounded-r-md hover:bg-red-700 hover:text-red-100;
|
|
}
|
|
|
|
.react-select-container .react-select__input {
|
|
@apply text-base text-white border-none shadow-sm;
|
|
}
|
|
|
|
.react-select-container .react-select__input input:focus {
|
|
@apply text-white border-none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.absolute-top-shift {
|
|
top: calc(-4rem - env(safe-area-inset-top));
|
|
}
|
|
|
|
.min-h-screen-shift {
|
|
min-height: calc(100vh + env(safe-area-inset-top));
|
|
}
|
|
|
|
/* 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 */
|
|
}
|
|
|
|
@media all and (display-mode: browser) {
|
|
.pwa-only {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|