audiobookshelf/client/assets/app.css

@import './fonts.css';
@import './transitions.css';
@import './draggable.css';
@import './defaultStyles.css';
@import './absicons.css';

:root {
  --bookshelf-texture-img: url(/textures/wood_default.jpg);
  --bookshelf-divider-bg: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
}

.page {
  width: 100%;
  height: calc(100% - 64px);
  max-height: calc(100% - 64px);
}

.page.streaming {
  height: calc(100% - 64px - 165px);
  max-height: calc(100% - 64px - 165px);
}

#bookshelf {
  height: calc(100% - 40px);
  background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);

  /* For Firefox */
  scrollbar-width: thin;
  scrollbar-color: #855620 rgba(0, 0, 0, 0);
}

.bookshelf-row {
  /* Sidebar width + scrollbar width */
  width: calc(100vw - 88px);
}

@media (max-width: 768px) {
  #bookshelf {
    height: calc(100% - 80px);
  }

  .bookshelf-row {
    width: 100vw;
  }
}

#page-wrapper {
  background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);
}

/* width */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar:horizontal {
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #855620;
  border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #704922;
}

.no-scroll::-webkit-scrollbar {
  display: none;
  opacity: 0;
}

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

/* Chrome, Safari, Edge, Opera */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


.tracksTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #474747;
}

.tracksTable tr:nth-child(even) {
  background-color: #2e2e2e;
}

.tracksTable tr {
  background-color: #373838;
}

.tracksTable tr:hover:not(:has(th)) {
  background-color: #474747;
}

.tracksTable td {
  padding: 4px 8px;
}

.tracksTable th {
  padding: 4px 8px;
  font-size: 0.75rem;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
}

.arrow-down-small {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
}

.triangle-right {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-top: 8px solid rgb(34, 127, 35);
  border-right: 8px solid rgb(34, 127, 35);
}

.icon-text {
  font-size: 1.1rem;
}

.box-shadow-md {
  box-shadow: 2px 8px 6px #111111aa;
}

.box-shadow-sm-up {
  box-shadow: 0px -5px 8px #11111122;
}

.box-shadow-md-up {
  box-shadow: 0px -8px 8px #11111144;
}

.box-shadow-lg-up {
  box-shadow: 0px -12px 8px #111111ee;
}

.box-shadow-xl {
  box-shadow: 2px 14px 8px #111111aa;
}

.box-shadow-book {
  box-shadow: 4px 1px 8px #11111166, -4px 1px 8px #11111166, 1px -4px 8px #11111166;
}

.shadow-height {
  height: calc(100% - 4px);
}

.box-shadow-book3d {
  box-shadow: 4px 1px 8px #11111166, 1px -4px 8px #11111166;
}

.box-shadow-side {
  box-shadow: 5px 0px 5px #11111166;
}

/*
Bookshelf Label
*/
.categoryPlacard {
  letter-spacing: 1px;
}

.shinyBlack {
  background-color: #2d3436;
  background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
  border-color: rgba(255, 244, 182, 0.6);
  border-style: solid;
  color: #fce3a6;
}


.cover-bg {
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  top: -20px;
  left: -20px;
  background-size: 100% 100%;
  background-position: center;
  opacity: 1;
  filter: blur(20px);
}

/* Padding for toastification toasts in the top right to not cover appbar/toolbar */
.app-bar-and-toolbar .Vue-Toastification__container.top-right {
  padding-top: 104px;
}

.app-bar .Vue-Toastification__container.top-right {
  padding-top: 64px;
}

.no-bars .Vue-Toastification__container.top-right {
  padding-top: 8px;
}

.abs-btn::before {
  content: '';
  position: absolute;
  border-radius: 6px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.1s ease-in-out;
}

.abs-btn:hover:not(:disabled)::before {
  background-color: rgba(255, 255, 255, 0.1);
}

.abs-btn:disabled::before {
  background-color: rgba(0, 0, 0, 0.2);
}