diff options
Diffstat (limited to '')
-rw-r--r-- | src/VBox/ValidationKit/testmanager/htdocs/css/common.css | 1183 |
1 files changed, 1183 insertions, 0 deletions
diff --git a/src/VBox/ValidationKit/testmanager/htdocs/css/common.css b/src/VBox/ValidationKit/testmanager/htdocs/css/common.css new file mode 100644 index 00000000..9ccf7a54 --- /dev/null +++ b/src/VBox/ValidationKit/testmanager/htdocs/css/common.css @@ -0,0 +1,1183 @@ +/* $Id: common.css $ */ +/** @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; +} + |