/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * This Source Code Form is "Incompatible With Secondary Licenses", as
 * defined by the Mozilla Public License, v. 2.0. */

/* Custom CSS by me */

@media all {
    :root {
        /* KDE */
        --kde-color-primary: 84, 163, 216;

        /* Set the correct KDE blue accents */

        --accent-color-blue-1: var(--kde-color-primary); /* used in link text */
        --accent-color-blue-2: 75, 143, 191; /* used in hovered link text*/
        --accent-color-blue-3: var(
            --kde-color-primary
        ); /* used in primary button color */
        --accent-color-blue-4: 70, 135, 179; /* used in primary button hover color */
        --accent-color-blue-5: 65, 125, 166; /* used in primary button active color */

        /* other */

        --link-text-color: rgb(49, 111, 152);
        --hovered-link-text-color: rgb(61, 174, 253);
        --selected-text-background-color: rgb(var(--kde-color-primary));
        --control-accent-color: rgb(var(--kde-color-primary));
        --focused-control-border-color: rgb(var(--kde-color-primary));

        /* Use KDE fonts*/

        --font-family-sans-serif: 'Noto Sans', 'FiraGO', sans-serif;
        --font-family-monospace: 'Noto Mono', 'Menlo', monospace;
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        /** Accent Colors */
        --accent-color-blue-1: 169, 219, 255;
        --accent-color-blue-2: 125, 174, 233;

        /* other */

        --link-text-color: rgb(var(--accent-color-blue-1));
        --hovered-link-text-color: rgb(var(--accent-color-blue-2));
    }
}

@font-face {
    font-family: glyph;
    src: url('fonts/glyph/glyph.ttf?5ea9rb') format('truetype'),
        url('fonts/glyph/glyph.woff?5ea9rb') format('woff'),
        url('fonts/glyph/glyph.svg?5ea9rb#glyph') format('svg');
    font-style: normal;
    font-weight: 400;
}

div#header > div#common_links > ul.links > li:nth-child(1) > a::before {
    margin-right: 16px;
    width: 52px;
    content: 'K';
    font-family: glyph;
    font-weight: 400;
    font-size: 32px;
    text-indent: 0;
    text-align: center;
    display: inline-block;
    text-decoration: none !important;
    background: rgb(var(--kde-color-primary));
    height: 48px;
    line-height: 48px;
    color: #fff;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

@media screen {
    /**
   * Global
   */
    body {
        display: flex;
        flex-direction: column;
        position: absolute;
        height: auto;
    }
}

@media screen and (min-width: 800px) {
    /*
   * Fixed global header
   */
    body {
        width: 100%;
    }
}

#footer > * {
    display: none;
}

#footer > #useful-links {
    display: initial;
    text-align: center;
    margin: 8px;
}

#footer > #useful-links > #links-actions {
    display: none;
}

#header #titles {
    display: none;
}

#header #common_links {
    flex: auto !important;
    display: flex;
    align-items: center;
    margin: 0 !important;
    justify-content: center;
}

#header #common_links .links {
    flex-wrap: wrap;
    flex: initial;
    justify-content: center;
    row-gap: 8px;
}

#header #common_links .separator {
    display: none;
}

#header #common_links li,
#header #common_links li.form form,
#header #common_links #mini_login_top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#header #common_links li.form form > *,
#header #common_links #mini_login_top > * {
    margin: auto 4px;
}

#header #common_links #mini_login_top > a {
    padding: 0;
}

#header {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 7px 0;
    /* width: 1024px; */
    width: 100%;
    border-bottom: 2px solid rgb(var(--kde-color-primary));
    height: initial;
    position: sticky;
    top: 0;
    z-index: 10;
}

#header > * {
    flex: none;
    margin: 0 8px;
}

@media screen and (max-width: 1023px) {
    /* Maybe needed in future */
}

#header #quicksearch_top {
    position: relative;
    width: 280px;
    height: 32px;
    padding: 0 8px;
    padding-left: 28px;
}

#header li.form form::before {
    content: '\E8B6';
    font-size: 20px;
    line-height: 1;
    font-family: 'Material Icons';
    pointer-events: none;
    position: absolute;
    z-index: 10;
    left: 8px;
}

#header #common_links li.form > form {
    margin-left: 8px;
}

/* modifications of index.css */

/* #tiles from bmo is mapped to .bz_common_actions > ul */

.bz_common_actions > ul {
    display: flex;
    margin: 32px 0;
    padding: 0;
    list-style-type: none;
    justify-content: center;
}

.bz_common_actions > ul li {
    flex: none;
    margin: 0;
    padding: 0;
}

.bz_common_actions > ul a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    width: 160px;
    height: 160px;
    color: var(--secondary-label-color);
}

.bz_common_actions > ul a:hover,
.bz_common_actions > ul a:focus,
.bz_common_actions > ul a:active {
    color: var(--primary-button-background-color);
    text-decoration: none;
}

.bz_common_actions > ul > li > a > span::before {
    width: 120px;
    height: 120px;
    font-size: 120px;
    line-height: 120px;
    font-family: 'Material Icons';
    color: inherit;
    display: block;
}

.bz_common_actions > ul > li > a > span {
    text-align: center;
}

#help span::before {
    content: '\E887';
}

#query span::before {
    content: '\E8A0';
}

#enter_bug span::before {
    content: '\E89C';
}

/*
#prefs span::before {
  content: "\E8B8";
}
*/

#account span::before,
#tile-login span::before {
    content: '\E853';
}

#common_queries a.rss::after {
    content: '\E0E5';
    font-family: 'Material Icons';
    pointer-events: none;
    vertical-align: middle;
}

#common_queries {
    text-align: center;
}

#common_queries ul {
    list-style-type: none;
    padding: 0;
}

#bugzilla-body {
    margin: 8px auto 8px;
    max-width: 1024px;
    min-width: 800px;
    width: 100%;
}

#bugzilla-body > *:last-child {
    margin-bottom: 15px;
}

body.narrow_page #bugzilla-body {
    font-size: var(--font-size-large);
    line-height: var(--line-height-comfortable);
}

/* describecomponents.cgi (begin) */

#choose_product tr > * {
    margin: 4px 0 0;
    font-size: var(--font-size-large);
    line-height: var(--line-height-comfortable);
    text-align: left;
    display: block;
}

#choose_product tr > th {
    font-weight: 500;
    font-size: var(--font-size-h3);
    visibility: hidden;
}

#choose_product tr > th * {
    visibility: visible;
}

#bugzilla-body > h1,
#bugzilla-body > #product_desc,
#bugzilla-body > #product_desc + p {
    margin: inherit auto;
    text-align: center;
}

#bugzilla-body > #product_desc + p {
    font-style: italic;
}

#bugzilla-body > #product_desc {
    font-size: var(--font-size-x-large);
    line-height: var(--line-height-comfortable);
}

table#component_table {
    width: 100%;
}

table#component_table > tbody {
    display: grid;
    grid-template-columns: 30% 70%;
}

table#component_table > tbody > tr {
    margin: 8px 0;
    padding: 16px;
    background-color: var(--primary-region-background-color);
}

table#component_table > tbody > tr:nth-child(even) {
    border-top-left-radius: var(--primary-region-border-radius);
    border-bottom-left-radius: var(--primary-region-border-radius);
}

table#component_table > tbody > tr:nth-child(odd) {
    border-top-right-radius: var(--primary-region-border-radius);
    border-bottom-right-radius: var(--primary-region-border-radius);
}

table#component_table > tbody > tr:first-child {
    /* flex-basis: 100%; */
    display: none;
}

/*
table#component_table tr {
	flex: none;
	margin-right: 16px;
	width: 280px;
}
*/

table#component_table .component_name {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: normal;
    display: block;
}

table#component_table .component_description {
    font-size: var(--font-size-large);
    line-height: var(--line-height-comfortable);
}

/* describecomponents.cgi (end) */

.vcard a .fn::after,
.vcard a .ln::after {
    display: none;
}

body.bz_bug pre {
    font-size-adjust: unset;
    color: var(--primary-text-color);
    font-size: var(--font-size-x-large);
    line-height: var(--line-height-comfortable);
}

/* weekly-bug-summary.cgi (begin) */

form[action='weekly-bug-summary.cgi'] ~ table {
    border-collapse: collapse;
    border-top: 1px solid var(--grid-border-color);
    background-color: var(--grid-background-color);
}

form[action='weekly-bug-summary.cgi'] ~ table > tbody > tr:first-child,
form[action='weekly-bug-summary.cgi'] ~ table tr.column_header {
    background-color: var(--grid-header-background-color) !important;
}

form[action='weekly-bug-summary.cgi'] ~ table tr {
    border-bottom: 1px solid var(--grid-border-color);
}

form[action='weekly-bug-summary.cgi'] ~ table th {
    padding: 4px 8px;
    font-size: var(--font-size-small);
    white-space: nowrap;
    text-align: left;
}

form[action='weekly-bug-summary.cgi'] ~ table td {
    padding: 8px;
    vertical-align: middle;
}

@media screen and (prefers-color-scheme: dark) {
    form[action='weekly-bug-summary.cgi'] ~ table td[style*='#'] {
        color: var(--inverted-label-color);
    }
}

/* weekly-bug-summary.cgi (end) */

/* show_activity.cgi (begin) */

table#bug_activity {
    border-collapse: collapse;
    border-top: 1px solid var(--grid-border-color);
    background-color: var(--grid-background-color);
}

table#bug_activity > tbody > tr:first-child,
table#bug_activity tr.column_header {
    background-color: var(--grid-header-background-color) !important;
}

table#bug_activity tr {
    border-bottom: 1px solid var(--grid-border-color);
}

table#bug_activity th {
    padding: 4px 8px;
    font-size: var(--font-size-small);
    white-space: nowrap;
    text-align: left;
}

table#bug_activity td {
    padding: 8px;
    vertical-align: middle;
}

table#bug_activity td[rowspan] {
    vertical-align: top;
}

/* show_activity.cgi (end) */

/* YUI (start) */

.yui-skin-sam .yui-calcontainer {
    background-color: var(--primary-region-background-color) !important;
    left: revert !important;
    top: revert !important;
    z-index: 10;
}

.yui-skin-sam .yui-calendar .calweekdaycell {
    color: var(--application-foreground-color) !important;
}

.yui-skin-sam .yui-calendar td.calcell {
    border-color: var(--control-border-color) !important;
    background-color: var(--application-background-color) !important;
}

.yui-skin-sam .yui-calendar td.calcell a {
    color: var(--link-text-color) !important;
}

.yui-skin-sam .yui-calendar td.calcell.calcellhover a {
    background-color: var(--primary-button-background-color) !important;
    color: var(--primary-button-foreground-color) !important;
}

.yui-skin-sam .yui-button button,
.yui-skin-sam .yui-button a,
.yui-skin-sam .yui-button a:visited {
    color: var(--application-foreground-color) !important;
}

.yui-skin-sam .yui-calendar td.calcell.today a {
    color: var(--control-foreground-color) !important;
    background-color: var(--control-accent-color) !important;
}

.calendar_button,
.calendar_button:hover {
    box-shadow: none !important;
    padding: 0 !important;
    background-color: initial !important;
}

li.yui-ac-highlight {
    background: rgb(var(--accent-color-blue-3)) !important;
    color: var(--application-foreground-color) !important;
}

.yui-skin-sam .yui-ac-content {
    background: var(--primary-region-background-color) !important;
}

/* YUI (end) */