Custom theme for the Magiak Module "bindhosts". Only for main use in MMRL.

custom.css

@import url("https://mui.kernelsu.org/mmrl/colors.css");

:root {
  /* Background colors */
  --bg-primary: var(--background);
  --bg-secondary: var(--tonalSurface);
  --bg-input: var(--surfaceBright);

  /* Text colors */
  --text-primary: var(--onSurface);
  /* --text-muted: #757575; */

  /* Border colors */
  /* --border-color: #ccc; */

  /* Scroll bar colors */
  /* --scroll-bar-color: #ddd; */

  /* Button colors */
  --btn-primary: var(--primary);
  --btn-primary-text: var(--onPrimary);
  /* --btn-delete: #FF4D4D; */
  --btn-edit: var(--error);

  /* Prompt colors */
  /* --prompt-success: #4CAF50; */
  /* --prompt-error: #f44336; */

  /* Shadow colors */
  --shadow-light: transparent;
  --shadow-medium: transparent;
}

.header {
  height: calc(var(--window-inset-top) + 64px) !important;
  box-shadow: none !important;
  background-color: var(--tonalSurface) !important;
  border-radius: 0px 0px 20px 20px;

  .back-button {
    background-color: unset;
  }
}

.content {
  height: calc(
    100vh - var(--window-inset-top) - var(--window-inset-bottom) - 144px
  ) !important;
  top: calc(var(--window-inset-top) + 64px) !important;
  bottom: calc(var(--window-inset-bottom) + 80px) !important;
}

.host-list {
  mask-image: linear-gradient(
    transparent 0%,
    black 16px,
    black calc(100% - 15px),
    transparent 100%
  );
}

.box {
  box-shadow: none !important;
}

.box,
.overlay-content {
  li {
    border-bottom-style: solid;
    border-bottom-color: var(--outlineVariant);
    border-bottom-width: 1px;
  }
}

.host-list-header,
.host-list-row {
  border-bottom-style: solid;
  border-bottom-color: var(--outlineVariant);
  border-bottom-width: 1px;
}

#copy-link {
  color: var(--primary) !important;
}

.documents a {
  color: var(--primary) !important;
}

.document-content {
  background-color: var(--background) !important;
}

.action-button,
.import-button {
  svg {
    fill: var(--onPrimary);
  }
}

.footer {
  box-shadow: none !important;
  border-radius: 20px 20px 0px 0px;

  .focused-footer-btn::after {
    background-color: var(--filledTonalButtonContainerColor);
  }

  .footer-btn-text {
    color: var(--onSurface);
  }

  .footer-btn-icon {
    svg {
      fill: var(--filledTonalButtonContentColor);
    }
  }
}

pre,
code {
  color: var(--onSurface) !important;
  background-color: var(--tonalSurface) !important;
}

.title-container {
  color: var(--onSurface);
}