fx-file-server/filebrowser-proxy/fb-theme.css

:root {
  --fb-bg-url: url('/fb-wallpaper/frappe.webp?v=20260306w');
  --fb-accent: #8caaee;
  --fb-accent-2: #ca9ee6;
  --fb-text: #c6d0f5;
  --fb-subtext: #a5adce;
  --fb-base: #303446;
  --fb-mantle: #292c3c;
  --fb-crust: #232634;
  --fb-surface: rgba(48, 52, 70, 0.78);
  --fb-surface-strong: rgba(41, 44, 60, 0.90);
  --fb-border: rgba(198, 208, 245, 0.20);
}

html,
body {
  background: var(--fb-crust) !important;
  color: var(--fb-text) !important;
  overflow-x: hidden;
}

html::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--fb-accent-2) 28%, transparent), transparent 45%),
    radial-gradient(circle at 80% 15%, color-mix(in srgb, var(--fb-accent) 24%, transparent), transparent 40%),
    var(--fb-bg-url) center/cover no-repeat;
  opacity: 0.36;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fb-crust) 82%, transparent), color-mix(in srgb, var(--fb-crust) 90%, transparent));
  pointer-events: none;
  z-index: 0;
}

#app,
.v-application,
.application {
  position: relative;
  z-index: 1;
  color: var(--fb-text) !important;
}

[class*='toolbar'],
[class*='header'],
.v-toolbar,
.v-app-bar,
header {
  background: var(--fb-surface-strong) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fb-border) !important;
  color: var(--fb-text) !important;
}

[class*='drawer'],
.v-navigation-drawer,
aside {
  background: color-mix(in srgb, var(--fb-mantle) 88%, transparent) !important;
  border-right: 1px solid var(--fb-border) !important;
  backdrop-filter: blur(10px);
}

main,
.v-main,
.v-sheet,
.v-card,
.v-table,
.v-data-table,
.v-table__wrapper,
.v-list,
#listing,
#listing .item,
#listing tr,
#listing li,
[class*='files'],
[class*='list'],
[class*='table'] {
  background: var(--fb-surface) !important;
  border-color: var(--fb-border) !important;
  color: var(--fb-text) !important;
}

.v-list-item,
.v-data-table__tr,
tr,
#listing .item,
[class*='item'],
[class*='file'] {
  background: transparent !important;
  color: var(--fb-text) !important;
  border-radius: 10px !important;
}

.v-list-item:hover,
.v-data-table__tr:hover,
tr:hover,
#listing .item:hover,
[class*='item']:hover,
[class*='file']:hover {
  background: color-mix(in srgb, var(--fb-accent) 14%, transparent) !important;
}

button,
.v-btn,
[type='button'],
[type='submit'] {
  border-radius: 10px !important;
  border: 1px solid var(--fb-border) !important;
  color: var(--fb-text) !important;
}

.v-btn--variant-elevated,
.v-btn--variant-flat,
button.primary,
button[class*='primary'] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--fb-accent) 92%, #fff 8%),
    color-mix(in srgb, var(--fb-accent-2) 92%, #fff 8%)
  ) !important;
  color: #1f2435 !important;
  border: none !important;
  font-weight: 650;
}

input,
textarea,
select,
.v-field,
.v-text-field,
.v-input__control,
.v-field__field,
.v-field__input {
  background: color-mix(in srgb, var(--fb-base) 72%, transparent) !important;
  border: 1px solid var(--fb-border) !important;
  color: var(--fb-text) !important;
  border-radius: 10px !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--fb-subtext) !important;
  opacity: 1;
}

a,
.v-link,
[class*='link'] {
  color: var(--fb-accent) !important;
}

a:hover,
.v-link:hover {
  color: var(--fb-accent-2) !important;
}

/* FB settings theme begin */
.card,
.card.floating,
#dropdown,
#file-selection,
.overlay .card {
  background: color-mix(in srgb, var(--fb-mantle) 90%, transparent) !important;
  color: var(--fb-text) !important;
  border: 1px solid var(--fb-border) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.35) !important;
}

.card .card-title,
.card .card-content,
.card .card-action,
.collapsible > label,
.collapsible .collapse,
table,
table th,
table td {
  color: var(--fb-text) !important;
  border-color: var(--fb-border) !important;
}

.button,
.button--red,
.button--blue,
.button--flat,
.card .action,
#dropdown .action,
#file-selection .action {
  background: color-mix(in srgb, var(--fb-base) 70%, transparent) !important;
  color: var(--fb-text) !important;
  border: 1px solid var(--fb-border) !important;
  box-shadow: none !important;
}

.button:hover,
.card .action:hover,
#dropdown .action:hover,
#file-selection .action:hover {
  background: color-mix(in srgb, var(--fb-accent) 22%, transparent) !important;
}

.input,
.input--textarea,
.card input,
.card select,
.card textarea,
.tusConditionalSettings input {
  background: color-mix(in srgb, var(--fb-base) 70%, transparent) !important;
  color: var(--fb-text) !important;
  border: 1px solid var(--fb-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--fb-subtext) !important;
}

#dropdown {
  backdrop-filter: blur(8px);
}

.rules input[type='text'],
.rules button,
.card code {
  background: color-mix(in srgb, var(--fb-base) 60%, transparent) !important;
  color: var(--fb-text) !important;
  border-color: var(--fb-border) !important;
}
/* FB settings theme end */

/* FB breadcrumb theme begin */
.breadcrumbs,
#breadcrumbs,
header .breadcrumbs,
main .breadcrumbs,
#editor-container .breadcrumbs {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  height: 3em !important;
  min-height: 3em !important;
  padding: 0 0.6em !important;
  margin: 0 0 0.45em 0 !important;
  background: color-mix(in srgb, var(--fb-mantle) 88%, transparent) !important;
  border: 1px solid var(--fb-border) !important;
  border-radius: 10px !important;
  color: var(--fb-text) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.breadcrumbs > span,
#breadcrumbs > span,
#editor-container .breadcrumbs > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 100% !important;
  max-width: 100% !important;
  gap: 2px !important;
  white-space: nowrap !important;
}

.breadcrumbs a,
.breadcrumbs span,
.breadcrumbs i,
#breadcrumbs a,
#breadcrumbs span,
#breadcrumbs i,
.breadcrumbs .action,
#breadcrumbs .action {
  color: var(--fb-text) !important;
  line-height: 1 !important;
}

.breadcrumbs a,
#breadcrumbs a,
.breadcrumbs .action,
#breadcrumbs .action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.1em !important;
  padding: 0 0.35em !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* remove inner frame to avoid layered boxes in Home area */
.breadcrumbs .action,
#breadcrumbs .action,
.breadcrumbs a,
#breadcrumbs a {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.breadcrumbs a:hover,
#breadcrumbs a:hover,
.breadcrumbs .action:hover,
#breadcrumbs .action:hover {
  background: color-mix(in srgb, var(--fb-accent) 18%, transparent) !important;
  color: var(--fb-accent-2) !important;
}

.breadcrumbs .chevron,
#breadcrumbs .chevron,
.breadcrumbs .home,
#breadcrumbs .home {
  color: var(--fb-subtext) !important;
}
/* FB breadcrumb theme end */

/* FB iconview theme begin */
#listing.mosaic {
  padding-top: 0.6em !important;
  padding-left: 0.35em !important;
  padding-right: 0.35em !important;
  margin: 0 !important;
}

#listing.mosaic .item,
#listing.mosaic.gallery .item {
  box-sizing: border-box !important;
  border: 1px solid var(--fb-border) !important;
  box-shadow: none !important;
  background: color-mix(in srgb, var(--fb-base) 58%, transparent) !important;
  overflow: hidden !important;
}

#listing.mosaic .item > div,
#listing.mosaic.gallery .item > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#listing.mosaic .item div:last-of-type {
  width: calc(100% - 5.2em) !important;
  padding-right: 0.15em !important;
}

#listing.mosaic.gallery .item div:last-of-type {
  width: calc(100% - 1em) !important;
  border-top: 1px solid color-mix(in srgb, var(--fb-border) 70%, transparent) !important;
  background: color-mix(in srgb, var(--fb-mantle) 72%, transparent) !important;
}
/* FB iconview theme end */



/* Search/toolbar hotfix (20260306x2) */
#search #input input,
header #search #input input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#search #input {
  box-shadow: none !important;
}

header > div:last-child {
  margin-left: auto !important;
}