public/style/base.css

/* General structure */
:root {
    --bg-purple: #2a0c55;
    --bg-table-hover: #f2e9ff;
    --bg-alert-purple-light: #cfe2ff;
}

/* Fonts */
:root {
    font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
    :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
}

html {
    height: 100%;
    background-color: #2a0c55;
}

body {
    font-family: "Inter", sans-serif;
    background-color: var(--bg-purple);
    color: white;
}

header {
    text-align: center;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

nav svg {
    fill: whitesmoke;
    margin-top: 0.5em;
}

h1 {
    font-weight: 400;
}

h2, h3 {
    font-weight: 300;
}

.table {
    margin: 0 auto;
    width: 100%;
}

.table td,
.table th {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.force-default-bg  {
    box-shadow: unset !important;
}


/* home page */
#homepage h1 {
    font-size: 3.5rem;
    margin-bottom: 2em;
}

#homepage :is(h1, h2, h3) {
    margin-top: 1em;
}

#homepage img {
    width: 70%;
}

/* Milestones caption on top of list */
body[id^='release_'] caption {
    caption-side: top;
}

#release_esr table + .table  th {
    text-align: center;
}

.table-fxt-clean,
.table-fxt-clean th,
.table-fxt-clean td  {
    border-color: #f2e9ff;
}

.table-fxt-clean {
     border-radius: 6px;
     border-spacing: 0;
     border-collapse: separate;
     border: 1px solid black;
     overflow: hidden;
}

#release_esr .table + .table td {
    width: 6em;
}

body[id^='release_']  .table td {
    text-align: right;
    white-space: nowrap;
    width: 9em;
}

#release_esr .table td:last-child {
    text-align: right;
}

#release_esr .table td {
    text-align: center;
}

body[id^='release_'] .table th details p {
    padding: 0.5rem;
    margin: 0.5em;
    border-left: 3px solid lightgray;
    font-size: small;
    font-weight: normal;
}

/* hide working days when <details> tag not popen */
body[id^='release_']:not(#release_esr) th:has(details) + td small {
    display:none;
}

body[id^='release_']:not(#release_esr) th:has(details[open]) + td small {
    display: inline;
}

body[id^='release_']:not(#release_esr) .table th summary::marker {
    color: lightgray;
    font-size:  small;
}

@media only screen and (max-width: 460px) {
    /* deactivate bootstrap 50% & 75% width on narrow screens */
    .w-50,
    .w-75 {
        width: auto !important;
    }

    #homepage h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5em;
    }

    #homepage :is(h1, h2, h3) {
        margin-top: 0.5em;
    }

    #homepage h3 {
        line-height: 2.7em;
    }

    #homepage div.col-sm {
        margin-bottom: 4em;
    }

    #homepage h3.text-center {
        margin-bottom: 1em;
        margin-top: 0;
    }

    #homepage .alert-primary {
        padding: 0.5rem 0.25rem;
    }

    /* Split the Last uplift tag on mobile */
    body[id^='release_']:not(#release_esr) .table th small span::before{
        content: "\a";
        white-space: pre;
    }

    /* limit horizontal scroll */
    body[id^='release_']:not(#release_esr) .table td {
        text-wrap: auto;
    }

    #beta table#summary ul {
        display: flex;
        flex-direction: column;
    }
}

/* About tooltip */
 #homepage .information {
    color: white;
 }

 #homepage .information:hover {
    color: #ffe343;
 }

/* About page */
#about h3 {
    margin-top: 1em;
}

footer {
    text-align: center;
    margin-top: 2em;
}

.text-color-1 {
    color: purple !important;
    text-shadow: -1px 0px 0px lightgray;
}

.anchor-link {
    visibility: hidden;
    display: inline-block;
    margin-left: -1em;
}

h3:hover .anchor-link {
    visibility: visible;
}

h3:target {
   color: #0dcaf0;
}

h3:target + table {
    box-shadow: 0px 0px 14px -1px #0dcaf0;
}

/* Nightly Page */
#nightly ul.list-group {
    word-break: break-word;
}

#nightly table  {
/*    table-layout: fixed;*/
}

#nightly table td a {
    word-wrap: break-word;
}

#nightly table tr th:nth-child(1) {
    width:6em;
}

#nightly table tr th:nth-child(2){
    width: 15em;
}

#nightly table tr td:nth-child(2){
    word-break: break-word;
}

#nightly table tr th:nth-child(3) {
    width: 5em;
}

/* bzimpact value table, avoid fields wrapping on 2 lines */
#nightly table tr table th:nth-child(1) {
   white-space: nowrap;
}

#nightly table thead tr th.sort-asc:after {
    content: "\00A0\25be";
}

#nightly table thead tr th.sort-desc:after {
    content: "\00A0\25b4";
}

#nightly .buildid {
    margin-left: -2em;
}

#nightly ol li::marker {
  color: rgb(110, 110,110);
}

#nightly ol li img {
    filter: grayscale(80%);
}

#nightly ol li img:hover {
    filter: none;
}

#nightly .bug-link {
    display:inline-block;
    width:100%;
    height:100%;
}

#nightly .score-card {
    visibility: hidden;
    position: absolute;
    margin-left: 3em;
    margin-top: -1em;
    min-width: 8em;
    max-width: 11em;
    box-shadow: 8px 10px 11px -1px rgba(128,127,127,0.58);
}

#nightly .score-pill:hover + .score-card {
    visibility: visible;
}

#beta .bz-enhancement::after {
  content: '\002B';
  background-color: #2aba27;
  color: white;
  padding: 0;
  padding-bottom: 1 px;
  display: inline-block;
  border-radius: 3px;
  font-size: small;
  font-weight: bold;
  width: 14px;
  height: 15px;
  text-align: center;
  line-height: 13px;
  margin-top: 4px;
  margin-left:0.5em;
}

/* override Bootstrap striped styles as they don't allow background images */
:is(#beta, #nightly) table:not(#summary)  tr:nth-child(odd) td:not(.text-light),
:is(#beta, #nightly) table:not(#summary) tr:nth-child(even) td:not(.text-light) {
    box-shadow: none !important;
    background-color: white !important;
}

:is(#beta, #nightly) td.android {
    background-image: url("/assets/img/android.svg");
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: right 4px top 8px;
}

#beta table tr td:nth-child(1) {
    width: 8em;
    text-align: left;
    padding-left: 10px;
}

#beta #summary th span.badge {
    top: 5px;
    position:relative;
    font-weight:normal;
}

#beta table tr:not(:first-child)  td:nth-child(2) {
    width: 18em;
}

#beta table .btn .badge {
    top: 0;
}

:is(#beta, #nightly) a[aria-expanded=false] .text-expanded {
    display: none;
}

:is(#beta, #nightly) a[aria-expanded=true] .text-collapsed {
    display: none;
}

#beta li.version {
    width: 7em;
    text-align: center;
}
#beta .bzlink svg {
    vertical-align: top;
}

#beta .bzlink:hover {
    display:inline-block;
    transform: rotate(45deg);
 }


.w-10 {
    width: 10%;
}

/* Global dropdown menu spacing utility */
.fxt-ps-2 {
    padding-left: 2rem;
}

#nav nav + div a svg {
    width: 100px;
    fill: white;
}

#nav nav + div a svg:hover  {
    fill: #00d230 !important;
    color:  red;
}

/* hover effect on the menu icon */
nav svg:hover {
    fill: #0d6efd   ;
}

.bg-purple {
    background-color: var(--bg-purple);
}


#homepage .card-text a {
    color: var(--bs-info);
}

/* Override default bootstrap hover to match our theme */
.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--bg-table-hover);
}


.bg-card-color-purple-fxt {
    background-color: var(--bg-alert-purple-light) !important;
    border-color: var(--bg-alert-purple-light) !important;
}

#homepage .card-header:first-child,
#homepage .border {
    border-color: var(--bg-alert-purple-light) !important;
    opacity: 0.9;
}