userContent.css

@import url(userContent/bitwarden.css);

:root {
  --bg1: #101010;
  --bg2: #161616;
  --bg3: #202020;
  --fg1: #d4be98;
  --fg2: #aa9e7a;
  --fg3: #80775d;
  --fg4: #635945;
}

@-moz-document url-prefix("about:"), @-moz-document url-prefix("chrome:") {
  * {
    border-radius: 0px!important;
  }
  :root {
    background-color: var(--bg1)!important;
    font-family: 'xos4 Terminus'!important;
  }
}

@-moz-document url-prefix(about:) {
  * {
    border-radius: 0px!important;
  }
  /*  Colors  */
  :root {
    font-family: 'xos4 Terminus'!important;
    --in-content-page-color: var(--fg1)!important;
    --newtab-background-color: var(--bg1)!important;
    --in-content-background-color: var(--bg1)!important;
    --in-content-page-background: var(--bg1)!important;
    --in-content-table-background: var(--bg1)!important;
    --in-content-box-background-odd: var(--bg1)!important;
    --in-content-button-background-hover: var(--bg3)!important;
    --in-content-button-background: var(--bg2)!important;
    --in-content-accent-color: var(--fg1)!important;
    --in-content-box-border-color: transparent!important;
    --in-content-box-background: var(--bg2)!important;
    --in-content-focus-outline: 2px solid var(--fg1)!important;
  }
  #categories > .category[selected],
  #categories > .category.selected {
    color: var(--fg1)!important;
    background-color: var(--bg3)!important;
    &:hover {
      background-color: var(--bg3)!important;
    }
  }
  #categories > .category:hover {
    background-color: var(--bg2)!important;
  }
  .textbox-search-sign {
    display: none!important;
  }
}

/*  Newtab  */
@-moz-document url("about:home"), url("about:newtab") {
  :root {
    font-family: 'xos4 Terminus'!important;
  }
  /*  Firefox home  */
  .logo-and-wordmark > .wordmark {
    height: 82px !important;
    margin-inline-start: 16px !important;
    width: 134px !important;
    background-size: 134px !important;
  }
  @media screen and (min-width: 1325px) {
    .ds-outer-wrapper-breakpoint-override main {
      width: 986px !important;
    }
  }
  @media screen and (min-width: 850px) and (max-width: 1324px) {
    .ds-outer-wrapper-breakpoint-override main {
      width: calc(78% + 1px) !important;
    }
  }
  @media screen and (max-width: 849px) {
    .ds-outer-wrapper-breakpoint-override main {
      width: calc(55% + 168px) !important;
    }
  }
  .outer-wrapper.ds-outer-wrapper-breakpoint-override {
    padding: 30px 32px !important;
  }

  .search-wrapper .search-handoff-button .fake-caret {
    top: 13px !important;
    inset-inline-start: 48px !important;
  }
  .search-wrapper .logo-and-wordmark {
    opacity: 0.9 !important;
    order: 1 !important;
    margin-bottom: 0 !important;
    flex: 1 !important;
    flex-basis: 20% !important;
  }
  .search-wrapper .search-handoff-button .fake-caret {
    top: 13px !important;
    inset-inline-start: 48px !important;
  }
  .search-wrapper .logo-and-wordmark {
    opacity: 0.9 !important;
    order: 1 !important;
    margin-bottom: 0 !important;
    flex: 1 !important;
    flex-basis: 20% !important;
  }
  .outer-wrapper .search-wrapper {
    padding: 0px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: space-around !important;
    gap: 20px 10px !important;
  }
  .search-wrapper .logo-and-wordmark .logo {
    background-size: 60px !important;
    height: 60px !important;
    width: 60px !important;
  }
  .search-wrapper .search-inner-wrapper {
    min-height: 42px !important;
    order: 2 !important;
    flex: 3 !important;
    flex-basis: 60% !important;
    top: 4px !important;
  }
  .search-wrapper .search-inner-wrapper {
    min-height: 42px !important;
    order: 2 !important;
    flex: 3 !important;
    flex-basis: 60% !important;
    top: 4px !important;
  }
  .outer-wrapper.ds-outer-wrapper-breakpoint-override.only-search.visible-logo {
    display: flex !important;
    padding-top: 0px !important;
    vertical-align: middle;
  }
  .customize-menu {
    border-radius: 10px 0 0 10px !important;
  }
  #root > div {
    align-items: center;
    display: flex;
  }
}

@-moz-document url("about:privatebrowsing") {
  /*  Firefox home private  */
  .logo-and-wordmark > .wordmark {
    height: 82px !important;
    margin-inline-start: 16px !important;
    width: 134px !important;
    background-size: 134px !important;
  }
  @media screen and (min-width: 1325px) {
    .showPrivate.showSearch.container {
      width: 986px !important;
    }
  }
  @media screen and (min-width: 850px) and (max-width: 1324px) {
    .showPrivate.showSearch.container {
      width: calc(78% + 1px) !important;
    }
    body {
      padding: 48px calc(40px + 10%) !important;
    }
  }
  @media screen and (max-width: 849px) {
    .showPrivate.showSearch.container {
      width: calc(55% + 170px) !important;
    }
    body {
      padding: 48px calc(25% - 80px) !important;
    }
  }
  .outer-wrapper.ds-outer-wrapper-breakpoint-override {
    padding: 30px 32px !important;
  }

  #search-handoff-button {
    border-radius: 10px !important;
    background-color: color-mix(in srgb, FieldText 13%, -moz-Dialog) !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  }
  .fake-textbox {
    color: FieldText !important;
  }
  .search-inner-wrapper {
    min-width: 0 !important;
    flex-grow: 2 !important;
    max-width: 720px;
    height: 42px !important;
  }
  .showPrivate.showSearch.container {
    padding: 0px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: space-around !important;
  }
  .logo-and-wordmark .logo {
    background-size: 60px !important;
    height: 60px !important;
    width: 60px !important;
  }
  .logo-and-wordmark {
    max-width: fit-content !important;
    max-height: 82px !important;
    opacity: 0.9 !important;
    margin-bottom: 0 !important;
    flex: 1 !important;
    flex-basis: 20% !important;
  }
  .showPrivate.showSearch.container {
    display: flex !important;
    padding-top: 0px !important;
    vertical-align: middle;
    flex-direction: row;
    align-items: center;
    max-width: unset !important;
    width: -moz-available !important;
    gap: 20px 0px !important;
  }
  .customize-menu {
    border-radius: 10px 0 0 10px !important;
  }
  #root > div {
    align-items: center;
    display: flex;
  }
  .info {
    display: none;
  }
  .wordmark {
    background-size: 134px !important;
    margin-inline-start: 0 !important;
    fill: FieldText !important;
  }
}