/* $Id$ */
/** @file
* Test Manager - Common CSS.
*/
/*
* Copyright (C) 2012-2014 Oracle Corporation
*
* This file is part of VirtualBox Open Source Edition (OSE), as
* available from http://www.virtualbox.org. This file is free software;
* you can redistribute it and/or modify it under the terms of the GNU
* General Public License (GPL) as published by the Free Software
* Foundation, in version 2 as it comes in the "COPYING" file of the
* VirtualBox OSE distribution. VirtualBox OSE is distributed in the
* hope that it will be useful, but WITHOUT ANY WARRANTY of any kind.
*
* The contents of this file may alternatively be used under the terms
* of the Common Development and Distribution License Version 1.0
* (CDDL) only, as it comes in the "COPYING.CDDL" file of the
* VirtualBox OSE 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.
*/
/*
* 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;
line-height: 180%;
}
div {
margin: 0;
padding: 0;
}
h1, h2, h3 {
margin: 0px 0 10px 0;
padding: 0;
font-weight: normal;
color: #2f2f2f;
}
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.
*/
#logo {
position: fixed;
width: 100%;
height: 92px;
top: 0;
left: 0;
right: 0;
bottom: auto;
}
#logo img {
height: 64px;
width: 64px;
}
#header {
position: fixed;
width: 100%; /** @todo this is too wide, darn! */
height: 92px;
top: 0;
left: 118px;
right: 0;
bottom: auto;
}
#login {
position: absolute;
top: 0;
left: auto;
right: 0;
right: 10px;
bottom: auto;
}
#side-menu {
position: fixed;
width: 110px;
height: auto;
top: 92px;
left: 0;
right: auto;
bottom: 0;
}
#top-menu {
position: fixed;
width: auto;
height: auto;
max-height: 28px;
top: 92px;
left: 118px;
right: 0;
bottom: auto;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 118px; /**< header + top-menu + padding. */
right: 0;
bottom: 0;
left: 118px;
overflow: auto;
padding-top: 16px;
padding-left: 10px;
padding-right: 10px;
}
/*
* Header and logo.
*/
#logo {
padding: 16px 32px 16px 32px;
}
#header {
margin-top: 22px;
margin-left: 10px;
text-align: left;
}
/*
* 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;
border-radius: 12px;
}
#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 {
padding-top: 36px;
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-bottom: 0.8em;
line-height: 1.2em;
text-align: center;
}
#side-footer {
position: absolute;
top: auto;
bottom: 0;
left: auto;
right: auto;
width: 107px;
margin-left: 2px;
margin-right: 2px;
padding-top: 1em;
padding-bottom: 0.8em;
border-top: thin white ridge;
}
#side-footer p {
margin-left: 3px;
margin-right: 3px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8px;
font-style: normal;
text-align: center;
}
/*
* Navigation in the header.
*/
#top-menu {
margin: 0 auto;
margin-right: 10px;
margin-left: 10px;
}
#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 {
}
/*
* 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;
}
/*
* Generic thead class (first-child doesn't work for multiple header rows).
*/
.tmheader {
background-color: #d0d0d0;
color: black;
}
/*
* 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 {
}
/*
* 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;
}
/*
* 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;
}
/*
* 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%;
}
/*
* 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-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-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;
}
/*
* 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;
}