source: vbox/trunk/src/VBox/ValidationKit/testmanager/htdocs/css/common.css@ 98103

/* $Id: common.css 98103 2023-01-17 14:15:46Z vboxsync $ */
/** @file
 * Test Manager - Common CSS.
 */

/*
 * Copyright (C) 2012-2023 Oracle and/or its affiliates.
 *
 * This file is part of VirtualBox base platform packages, as
 * available from https://www.virtualbox.org.
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation, in version 3 of the
 * License.
 *
 * This program is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, see <https://www.gnu.org/licenses>.
 *
 * The contents of this file may alternatively be used under the terms
 * of the Common Development and Distribution License Version 1.0
 * (CDDL), a copy of it is provided in the "COPYING.CDDL" file included
 * in the VirtualBox distribution, in which case the provisions of the
 * CDDL are applicable instead of those of the GPL.
 *
 * You may elect to license modified versions of this file under the
 * terms and conditions of either the GPL or the CDDL or both.
 *
 * SPDX-License-Identifier: GPL-3.0-only OR CDDL-1.0
 */

@charset "UTF-8";

/*
 * Basic HTML elements.
 */
* {
    margin:         0;
    padding:        0;
}

html, body {
    height:         100%;
}

body {
    background:     #f9f9f9 repeat-y center;
    font-family:    Georgia, "Times New Roman", Times, serif;
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      0.8em;
    color:          #2f2f2f;
}

p, ul, ol {
    margin-top:     0;
}

div {
    margin:         0;
    padding:        0;
}

h1, h2, h3 {
    margin:         0px 0 10px 0;
    padding:        0;
    font-weight:    normal;
    color:          #2f2f2f;
    line-height:    180%;
}
h1 {
    font-size:      2.4em;
}
h2 {
    font-size:      2.0em;
}
h3 {
    font-size:      1.5em;
}

dl {
    margin-bottom:  10px;
}


/*
 * Misc class stuff.
 */
.clear {
    clear:          both;
}

.left {
    float:          left;
}

.right {
    float:          right;
}



/*
 * The general layout.
 *
 * Note! Not quite sure if something like this will work well everywhere...
 *       Will get back to that when the logic and content is all there, not
 *       worth wasting more time on CSS now.
 */

html, body {
    height:         100%;
}

#wrap {
    position:       relative;
    width:          100%;
    height:         100%;
}

#head-wrap {
    position:       fixed;
    top:            0;
    left:           0;
    height:         74px; /**< header + top-menu. */
    width:          100%;
    background:     #f9f9f9;
}

#logo {
    width:          42px;
    height:         46px;
    top:            0;
    left:           0;
    right:          0;
    bottom:         auto;
    /* Center the image in both directions. */
    display:        flex;
    align-items:    center;
    justify-content: center;
    justify-content: flex-end;
}

#logo img {
    height:         36px;
    width:          36px;
}

#header {
    position:       fixed;
    width:          100%;  /** @todo this is too wide, darn! */
    height:         46px;
    left:           42px;
    top:            0;
    right:          0;
    bottom:         auto;
    margin-top:     0px;
    margin-left:    0px;
    text-align:     left;
    /* Center the h1 child vertically: */
    display:        flex;
    align-items:    center;
}

#login {
    position:       absolute;
    top:            0;
    left:           auto;
    right:          2px;
    bottom:         auto;
    height:         auto;
}

#top-menu {
    position:       fixed;
    padding:        0px;
    width:          99%;
    height:         auto;
    max-height:     22px;
    top:            46px;
    left:           0px;
    right:          0px;
    bottom:         auto;
}

body.tm-wide-side-menu #side-menu-wrap {
    width:          300px;
}
#side-menu-wrap {
    position:       fixed;
    top:            0px;
    left:           0;
    right:          auto;
    bottom:         auto;

    width:          164px;
    height:         100vh;
    min-height:     100vh;
    max-height:     100vh;

    display:        flex;
}

#side-menu {
    margin-top:     46px;
    margin-top:     70px;
    padding-top:    6px
    height:         auto;
    max-height:     100%;
    width:          95%;
    width:          calc(100% - 8px); /* CSS3 */

    display:            flex;
    flex-direction:     column;
    justify-content:    space-between;
}

#side-menu-body {
    display:        block;
    max-height:     100%;
    overflow:       auto;
}

body.tm-wide-side-menu #main {
    margin-left:    300px;
}
#main {
    height:         100%;
    margin-top:     74px;  /**< header + top-menu + padding. */
    margin-left:    164px;
    padding-left:   2px;
    padding-right:  2px;
    padding-top:    2px;
    padding-bottom: 2px;
}


/*
 * Header and logo specifics.
 */
#header h1 {
    margin-left:    8px;
    margin-top:     0px;
    margin-right:   0px;
    margin-bottom:  0px;
    font-weight:    bold;
    font-size:      2.2em;
    font-family:    Times New, Times, serif;
}

#login p {
    line-height:    100%;
}


/*
 * Navigation menus (common).
 */
#top-menu, #side-menu {
    font-weight:    bold;
    font-size:      1em;
    font-family:    Arial, Helvetica, sans-serif;
    background-color: #c0d0e0;
    padding:        2px 2px 2px 2px;
}

#top-menu.tm-top-menu-wo-side {
    border-radius:  12px;
}
#top-menu {
    border-radius:  12px 12px 12px 0px;
}

#side-menu {
    border-radius:  0px 0px 12px 12px;
}

#head-wrap {
    line-height:    180%;
}

#top-menu ul li a, #side-menu ul li a {
    text-decoration: none;
    color:          #000000;
    font-weight:    bold;
    font-size:      1em;
    font-family:    Arial, Helvetica, sans-serif;
}

#top-menu a:hover, #top-menu .current_page_item a, #side-menu a:hover, #side-menu .current_page_item a {
    text-decoration: none;
    color:          #b23c1c;
}


/*
 * Navigation in on the left side.
 */


/* Side menu: */
#side-menu {
    /* margin-top and padding-top are set up in layout !*/
    margin-right:   3px;
    margin-left:    3px;
    margin-bottom:  3px;
}

#side-menu p {
    margin-right:   3px;
    margin-left:    3px;
}

#side-menu ul {
    list-style:     none;
    margin-left:    3px;
    margin-right:   3px;
}

#side-menu li {
    padding-top:    0.3em;
    padding-bottom: 0.3em;
    line-height:    1.0em;
    text-align:     left;
}

#side-menu .subheader_item {
    font-style:     italic;
    font-size:      1.1em;
    text-decoration: underline;
}

.subheader_item:not(:first-child) {
    margin-top:     0.5em;
}

/* The following is for the element of / not element of checkbox, supplying text and hiding the actual box. */
input.tm-side-filter-union-input {
    display:        none;
}
input.tm-side-filter-union-input + label {
    vertical-align: middle;
}
input.tm-side-filter-union-input[type=checkbox]:checked + label::after {
    content:        '∉'; /* U+2209: not an element of. */
}
input.tm-side-filter-union-input[type=checkbox] + label::after {
    content:        '∈'; /* U+2208: element of. */
}

/* Webkit: Pretty scroll bars on the menu body as well as inside filter criteria. */
#side-menu ::-webkit-scrollbar {
    width:                  8px;
}
#side-menu ::-webkit-scrollbar-track {
    -webkit-box-shadow:     inset 0 0 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius:  4px;
    border-radius:          4px;
}
#side-menu ::-webkit-scrollbar-thumb {
    -webkit-box-shadow:     inset 0 0 3px rgba(0, 0, 0, 0.5);
    -webkit-border-radius:  4px;
    border-radius:          4px;
    background:             rgba(112, 128, 144, 0.9);
}
#side-menu ::-webkit-scrollbar-thumb:window-inactive {
    background:             rgba(112, 128, 144, 0.7);
}

/* Filters: */
.tm-side-filter-title-buttons {
    float:          right;
}
body.tm-wide-side-menu .tm-side-filter-title-buttons input {
    display:        none;
}
.tm-side-filter-title-buttons input {
    display:        inline;
}
.tm-side-filter-title-buttons input {
    font-size:      0.6em;
}
.tm-side-filter-dt-buttons input {
    font-size:      0.6em;
}
body.tm-wide-side-menu .tm-side-filter-dt-buttons input[type=submit] {
    display:        inline;
}
.tm-side-filter-dt-buttons input[type=submit] {
    display:        none;
}
.tm-side-filter-dt-buttons {
    float:          right;
}

#side-filters p:first-child {
    margin-top:     0.5em;
    font-style:     italic;
    font-size:      1.1em;
    text-decoration: underline;
}

#side-filters dd.sf-collapsible {
    display:        block;
}

#side-filters dd.sf-expandable {
    display:        none;
}

#side-filters a {
    text-decoration: none;
    color:          #000000;
}

#side-filters dt {
    margin-top:     0.4em;
}

#side-filters dd {
    font-size:      0.82em;
    font-family:    "Arial Narrow", Arial, sans-serif;
    font-weight:    normal;
    clear:          both;       /* cancel .tm-side-filter-dt-buttons */
}

#side-filters li, #side-filters input[type=checkbox], #side-filters p {
    line-height:    0.9em;
    vertical-align: text-bottom;
}

#side-filters input[type=checkbox] {
    margin-right:   0.20em;
    width:          1.0em;
    height:         1.0em;
}
@supports(-moz-appearance:meterbar) {
    #side-filters input[type=checkbox] {
        /* not currently used */
    }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE 10+ specific tweaks */
    #side-filters input[type=checkbox] {
        width:          1.1em;
        height:         1.1em;
    }
}

#side-filters dd > ul {
    max-height:     22em;
    overflow:       auto;
}

#side-filters ul ul {
    margin-left:    1.4em;
}

#side-filters li {
    padding-top:    1px;
    padding-bottom: 1px;
    overflow-wrap:  break-word;
}

ul.sf-checkbox-collapsible {
    display:        block;
}

ul.sf-checkbox-expandable {
    display:        none;
}

.side-filter-irrelevant {
    font-style:     italic;
    font-weight:    normal;
}
.side-filter-count {
    font-size:      smaller;
    vertical-align: text-top;
}

/* Footer: */
#side-footer {
    width:          100%;
    margin-left:    2px;
    margin-right:   2px;
    margin-top:     1em;
    padding-top:    1em;
    padding-bottom: 0.8em;
    border-top:     thin white ridge;
}

#side-footer p {
    margin-left:    3px;
    margin-right:   3px;
    margin-bottom:  0.5em;
    font-family:    Times New, Times, serif;
    font-size:      0.86em;
    font-style:     normal;
    font-weight:    normal;
    line-height:    1.2em;
    text-align:     center;
}


/*
 * Navigation in the header.
 */
#top-menu {
   margin-right:   3px;                 /* same as #side-menu! */
   margin-left:    3px;
}

#top-menu ul li a {
   padding:         .1em 1em;
}

#top-menu ul li {
   display:         inline;
}

#top-menu ul {
   margin:          0;
   padding:         0;
   list-style:      none;
   list-style-type: none;
   text-align:      center;
}

#top-menu a {
   border:          none;
}

#top-menu .current_page_item a {
}

/*
 * Time navigation forms on a line with some padding between them.
 */
.tmtimenav form {
    display: inline-block;
}

.tmtimenav form + form {
    padding-left: 0.6em;
}

/*
 * Items per page and next.
 */
.tmnextanditemsperpage form {
    display: inline-block;
    padding-left: 1em;
}

/*
 * Error message (typically a paragraph in the body).
 */
.tmerrormsg {
    color:          #ff0000;
    white-space:    pre;
    font-family:    Monospace, "Lucida Console", "Courier New", "Courier";
    display:        block;
    border:         1px solid;
    margin:         1em;
    padding:        0.6em;
}


/*
 * Generic odd/even row and sub-row attribs.
 */
.tmeven {
    background-color: #ececec;
}

.tmodd {
    background-color: #fcfcfc;
}

/** @todo adjust the sub row colors (see change logs for examples). */
.tmeveneven {
    background-color: #d8e0f8;
}

.tmevenodd {
    background-color: #e8f0ff;
}

.tmoddeven {
    background-color: #d8e0f8;
}

.tmoddodd {
    background-color: #e8f0ff;
}

/*
 * Multi color row/item coloring, 0..7.
 */
.tmshade0 { background-color: #ececec; }
.tmshade1 { background-color: #fbfbfb; }
.tmshade2 { background-color: #e4e4e4; }
.tmshade3 { background-color: #f4f4f4; }
.tmshade4 { background-color: #e0e0e0; }
.tmshade5 { background-color: #f0f0f0; }
.tmshade6 { background-color: #dcdcdc; }
.tmshade7 { background-color: #fdfdfd; }


/*
 * Generic thead class (first-child doesn't work for multiple header rows).
 */
.tmheader {
   background-color: #d0d0d0;
   color:            black;
}

/*
 * Generic class for div elements wrapping pre inside a table.  This prevents
 * the <pre> from taking up way more screen space that available.
 */
.tdpre {
    display:        table;
    table-layout:   fixed;
    width:          100%;
}
.tdpre pre {
    overflow:       auto;
}


/*
 * A typical table.
 */
/* table.tmtable th {
    background-color: #d0d0d0;
    color:            black;
} */

table.tmtable caption {
    text-align:     left;
}

table.tmtable {
    width:          100%;
    border-spacing: 0px;
}

table.tmtable th {
    font-size:      1.3em;
    text-align:     center;
}

table.tmtable, table.tmtable tr, table.tmtable td, table.tmtable th {
    vertical-align: top;
}

table.tmtable {
    border-left:    1px solid black;
    border-top:     1px solid black;
    border-right:   none;
    border-bottom:  none;
}

table.tmtable td, table.tmtable th {
    border-left:    none;
    border-top:     none;
    border-right:   1px solid black;
    border-bottom:  1px solid black;
}

table.tmtable td {
    padding-left:   3px;
    padding-right:  3px;
    padding-top:    3px;
    padding-bottom: 3px;
}

table.tmtable th {
    padding-left:   3px;
    padding-right:  3px;
    padding-top:    6px;
    padding-bottom: 6px;
}

.tmtable td {
}

tr.tmseparator td {
    border-bottom:      2px solid black;
    font-size:          0;
    padding-top:        0;
    padding-bottom:     0;
}



/*
 * Table placed inside of a big table used to display *all* stuff of a category.
 */

table.tminnertbl tr:nth-child(odd) {
    background-color: #e8e8e8;
}
table.tminnertbl tr:nth-child(even) {
    background-color: #f8f8f8;
}
table.tminnertbl tr:first-child {
    background-color: #d0d0d0;
    color:            black;
}

table.tminnertbl {
    border-style:    dashed;
    border-spacing:  1px;
    border-width:    1px;
    border-color:    gray;
    border-collapse: separate;
}

table.tminnertbl th, table.tminnertbl td {
    font-size:      1em;
    text-align:     center;
    border-style:   none;
    padding:        1px;
    border-width:   1px;
    border-color:   #FFFFF0;
}

/*
 * Table placed inside a form.
 */
table.tmformtbl {
    border-style:   none;
    border-spacing: 1px;
    border-width:   1px;
    border-collapse: separate;
}

table.tmformtbl th, table.tmformtbl td {
    font-size:      1em;
    padding-left:   0.5em;
    padding-right:  0.5em;
    padding-bottom: 1px;
    padding-top:    1px;
    border-width:   1px;
}

table.tmformtbl th, table.tmformtbl thead {
    background-color: #d0d0d0;
    font-size:      1em;
    font-weight:    bold;
}

table.tmformtbl tr.tmodd {
    background:     #e2e2e2;
}

table.tmformtblschedgroupmembers tr td:nth-child(3),
table.tmformtblschedgroupmembers tr td:nth-child(4) {
    text-align: center;
}


/*
 * Change log table (used with tmtable).
 */
table.tmchangelog > tbody  {
    font-size:      1em;
}

table.tmchangelog tr.tmodd  td:nth-child(1),
table.tmchangelog tr.tmeven td:nth-child(1),
table.tmchangelog tr.tmodd  td:nth-child(2),
table.tmchangelog tr.tmeven td:nth-child(2) {
    min-width:      5em;
    max-width:      10em; /* futile */
}

table.tmchangelog tr.tmeven {
    background-color: #e8f0ff;
}

table.tmchangelog tr.tmodd {
    background-color: #d8e0f8;
}

table.tmchangelog tr.tmoddeven, table.tmchangelog tr.tmeveneven {
    background-color: #fcfcfc;
}

table.tmchangelog tr.tmoddodd, table.tmchangelog tr.tmevenodd {
    background-color: #ececec;
}

table.tmchangelog tr.tmoddeven, table.tmchangelog tr.tmeveneven, table.tmchangelog tr.tmoddodd, table.tmchangelog tr.tmevenodd {
    font-size:      0.86em;
}

.tmsyschlogattr {
    font-size:      0.80em;
}

.tmsyschlogspacer {
    width:          0.8em;
}

td.tmsyschlogspacer:not(:last-child) {
    width:          1.8em;
    border-bottom:  0px solid green !important;
}

.tmsyschlogevent {
    border-bottom:  0px solid green !important;
}

.tmsyschlogspacerrowabove {
    height:         0.22em;
}

.tmsyschlogspacerrowbelow {
    height:         0.80em;
}


/*
 * Elements to be shows on *Show All* pages.
 */

ul.tmshowall  {
    margin-left:    15px;
    margin-right:   15px;
}

li.tmshowall {
    margin-left:    5px;
    margin-right:   5px;
}


/*
 * List navigation table
 */
table.tmlistnavtab {
    width:          100%;
}

table.tmlistnavtab tr td:nth-child(1) {
    text-align:     left;
}

table.tmlistnavtab tr td:nth-child(2) {
    text-align:     right;
}


/*
 * A typical form.
 *
 * Note! This _has_ to be redone. It sucks for the wide fields and such.
 */
.tmform ul {
    list-style:     none;
    list-style-type: none;
}

.tmform li {
    line-height:    160%;
}


.tmform-field {
    display:        block;
    clear:          both;
}

.tmform-field label {
    float:          left;
    text-align:     right;
    width:          20%;
    min-width:      10em;
    max-width:      16em;
    padding-right:  0.9em;
}

.tmform-error-desc {
    display:        block;
    color:          #ff0000;
    font-style:     italic;
}

.tmform-button {
    float:          left;
    padding-top:    0.8em;
}

.tmform-field input {
}

.tmform-field-tiny-int input {
    width:          2em;
}

.tmform-field-int input {
    width:          6em;
}

.tmform-field-long input {
    width:          9em;
}

.tmform-field-submit input {
}

.tmform-field-string input {
    width:          24em;
}

.tmform-field-subname input {
    width:          10em;
}

.tmform-field-timestamp input {
    width:          20em;
}

.tmform-field-uuid input {
    width:          24em;
}

.tmform-field-wide input {
    width:          78%;
    overflow:       hidden;
}

.tmform-field-wide100 input {
    width:          100%;
    overflow:       hidden;
}

.tmform-field-list {
    padding-top:    2px;
    padding-bottom: 2px;
}

.tmform-checkboxes-container {
    padding:        3px;
    overflow:       auto;
    border:         1px dotted #cccccc;
}

.tmform-checkbox-holder {
    float:          left;
    min-width:      20em;
}

#tmform-checkbox-list-os-arches .tmform-checkbox-holder {
    min-width:      11em;
}

#tmform-checkbox-list-build-types .tmform-checkbox-holder {
    min-width:      6em;
}

.tmform-input-readonly {
    background:     #ADD8EF;
    color:          #ffffff;
}

/* (Test case argument variation.) */

table.tmform-innertbl {
    border-style:   none;
    border-spacing: 1px;
    border-width:   1px;
    border-collapse: separate;
    width:          78%;
}

table.tmform-innertbl caption {
    text-align:     left;
}

table.tmform-innertbl th, table.tmform-innertbl td {
    font-size:      1em;
    text-align:     center;
    border-style:   none;
    /* padding-top:    1px;*/
    /*padding-bottom: 1px;*/
    padding-left:   2px;
    padding-right:  2px;
    border-width:   1px;
    border-color:   #FFFFF0;
    background-color: #f9f9f9;
}

.tmform-inntertbl-td-wide input {
    width:          100%;
    overflow:       hidden;
}

.tmform-inntertbl-td-wide {
    width:          100%;
}


/*
 * The test case argument variation table.
 */
table.tmform-testcasevars  {
    border-style:   none;
    border-spacing: 0px;
    border-width:   0px;
    border-collapse: collapse;
    width:          78%;
}

table.tmform-testcasevars tbody {
    border-style:   solid;
    border-spacing: 1px;
    border-width:   1px;
    margin: 2px;
}

table.tmform-testcasevars td {
    padding-right:  3px;
    padding-left:   3px;
}

table.tmform-testcasevars td:first-child, table.tmform-testcasevars td:nth-child(3) {
    width:          8em;
    text-align:     right;
}
table.tmform-testcasevars td:nth-child(5) {
    width:          4em;
    text-align:     left;
}


.tmform-testcasevars caption {
    text-align:     left;
}

tr.tmform-testcasevars-first-row td {
    padding-top:    0px;
    padding-bottom: 0px;
    background-color: #e3e3ec;
}

.tmform-testcasevars-inner-row td {
    padding-top:    0px;
    padding-bottom: 0px;
}

tr.tmform-testcasevars-final-row td {
    padding-top:    0px;
    padding-bottom: 1px;
}

td.tmform-testcasevars-stupid-border-column {
    /* Stupid hack. */
    min-width:      2px;
    width:          0.1%;
}



/*
 * Log viewer.
 */
.tmlog a[href] {
    background-color:   #e0e0e0;
    padding-left:       0.8em;
    padding-right:      0.8em;
}

.tmlog pre {
    background-color:   #000000;
    color:              #00ff00;
    font-family:        "Monospace", "Lucida Console", "Courier New", "Courier";
}


/*
 * Debug SQL traceback.
 */
#debug, #debug h1, #debug h2, #debug h3,
#debug2, #debug2 h1, #debug2 h2, #debug2 h3 {
    color:          #00009f;
}

table.tmsqltable {
    border-collapse: collapse;
}

table.tmsqltable, table.tmsqltable tr, table.tmsqltable td, table.tmsqltable th {
    border:         1px solid;
    vertical-align: middle;
    padding: 0.1ex 0.5ex;
}

table.tmsqltable pre {
    text-align:     left;
}

table.tmsqltable tr td {
    text-align:     left;
}

table.tmsqltable tr td:nth-child(1),
table.tmsqltable tr td:nth-child(2),
table.tmsqltable tr td:nth-child(3),
table.tmsqltable tr td:nth-child(4) {
    text-align:     right;
}



/*
 * Various more or less common span classes.
 */
.tmspan-offline {
    color:      #f08020;
    font-size:  0.75em;
}

.tmspan-online {
    font-size:  0.75em;
}

.tmspan-name, .tmspan-osarch {
    font-weight: bold;
}

.tmspan-osver1 {
    font-style: italic;
}

.tmspan-osver2 {
    font-style: normal;
}


/*
 * Subversion tooltip.
 */
.tmvcstooltip {
    padding:    0px;
    min-width:  50em;
    overflow:   hidden;
    border:     0px none;
}

.tmvcstooltip iframe {
    padding:    0px;
    margin:     0px;
    border:     0px none;
    width:      100%;
    //overflow:   auto;
    overflow:   hidden;
}

.tmvcstooltipnew {
    padding:    0px;
    min-width:  50em;
    overflow:   hidden;
    border:     0px none;
    background-color: #f9f9f9;
}


/*
 * Workaround for flickering tooltips in the column bar graphs (see
 * https://github.com/google/google-visualization-issues/issues/2162).
 */
.google-visualization-tooltip {
    pointer-events: none;
}