Files
freeipa/install/ui/ipa.css
T
Endi Sukma Dewata 6f0c16e428 Added support for radio buttons in table widget.
The table widget has been modified to support single-valued attribute
using radio buttons needed by some facets in HBAC Test. The widget now
uses 'pagination' flag to determine whether to show the pagination
control. The test data has also been updated.

Ticket #388
2011-12-06 22:07:44 +00:00

1309 lines
22 KiB
CSS

/* Authors:
* Pavel Zuna <pzuna@redhat.com>
* Adam Young <ayoung@redhat.com>
* Endi Sukma Dewata <edewata@redhat.com>
* Kyle Baker <kybaker@redhat.com>
*
* Copyright (C) 2010 Red Hat
*/
@font-face {
font-family: 'Overpass';
src: url('overpass_regular-web.eot');
src: url('overpass_regular-web.eot?#iefix') format('eot'),
url('overpass_regular-web.woff') format('woff'),
url('overpass_regular-web.ttf') format('truetype'),
url('overpass_regular-web.svg#webfontLTZe4IYH') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Overpass Bold';
src: url('overpass_bold-web.eot');
src: url('overpass_bold-web.eot?#iefix') format('eot'),
url('overpass_bold-web.woff') format('woff'),
url('overpass_bold-web.ttf') format('truetype'),
url('overpass_bold-web.svg#webfontzAU82Ltw') format('svg');
font-weight: bold;
font-style: normal;
}
html {
height: 100%;
}
body {
overflow: auto;
background: url(images/outer-background.png);
background-repeat: repeat-x;
background-position: left top;
background-color: #FFFFFF;
border-width: 0;
font-family: "Liberation Sans",Arial,Sans;
font-size: 11px;
margin: 0;
padding: 0;
height: 100%;
}
.network-activity-indicator {
visibility: hidden;
padding-right: 11px;
float: right;
padding-top: 3px;
}
/* ---- Container ---- */
#container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 960px;
margin: 0 auto 0;
}
/* ---- Background ---- */
#background-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 34px;
background: url(images/top-background.png) #0C3B00;
}
#background-navigation {
position: absolute;
top: 34px;
left: 0;
right: 0;
height: 72px;
background: url(images/mainnav-background.png);
}
#background-left {
position: absolute;
top: 106px;
left: 0;
width: 10px;
bottom: 0;
background: url(images/background-left.png);
background-repeat: no-repeat;
}
#background-center {
position: absolute;
top: 106px;
left: 10px;
right: 10px;
bottom: 0;
background: url(images/background-center.png);
background-repeat: repeat-x;
}
#background-right {
position: absolute;
top: 106px;
right: 0;
width: 10px;
bottom: 0;
background: url(images/background-right.png);
background-repeat: no-repeat;
}
.ui-widget {
font-size: 11px;
}
.input_link {
text-decoration: none;
position: relative;
cursor: pointer;
}
.icon {
display: inline-block;
height: 16px;
width: 16px;
vertical-align: middle;
}
.combobox-icon {
background: url(images/combobox-open.png);
}
.expanded-icon {
background: url(images/arrow-expanded.png);
}
.collapsed-icon {
background: url(images/arrow-collapsed.png);
}
.search-icon {
background: url(images/search-icon.png) no-repeat;
}
.add-icon {
background: url(images/add-icon.png);
margin: -4px 0 0 1px;
}
.remove-icon {
background: url(images/remove-icon.png);
margin: -4px 0 0 1px;
}
.update-icon {
background: url(images/update-icon.png);
margin: -4px 0 0 1px;
}
.reset-icon {
background: url(images/reset-icon.png);
margin: -4px 0 0 1px;
}
.register-icon {
background: url(images/entitle-register.png);
margin: -4px 0 0 1px;
}
.import-icon {
background: url(images/entitle-import.png);
margin: -4px 0 0 1px;
}
.consume-icon {
background: url(images/entitle-consume.png);
margin: -4px 0 0 1px;
}
.ipa-icon {
font-size: 0.7em;
padding-right: 0.3em;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
font-weight: bold;
padding: 0.2em;
}
/* ---- Header ---- */
#header {
position: absolute;
top: 0;
left: 6px;
right: 6px;
height: 34px;
background: transparent;
}
#header a {
text-decoration: none;
}
#header a:link {
text-decoration: none;
color: white;
}
#header a:visited {
text-decoration: none;
color: white;
}
#header span.header-logo {
padding-left: 2em;
}
#header span.header-logo a img {
border: 0;
}
/* ---- Logged-in As ---- */
#loggedinas {
float: right;
line-height: 34px;
margin-right: 10px;
color: #fff;
}
/* ---- Navigation ---- */
#navigation {
position: absolute;
top: 34px;
left: 6px;
right: 6px;
height: 102px;
}
#navigation.tabs-3 {
height: 150px;
}
div.tabs {
width: 100%;
min-height: 4em;
background: transparent;
}
/* ---- Tabs level 1 ---- */
.tabs1 > .ui-tabs-nav {
background: transparent;
}
.tabs1 > .ui-tabs-nav > .ui-state-hover {
background: url(images/hover-tab.png);
}
.tabs1 > .ui-tabs-nav {
padding: 33px 0 0;
margin: 0;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.tabs1 > .ui-tabs-nav li {
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
background-image: url(images/mainnav-tab-off.png);
margin: 0 0.4em 0 0;
border-width: 0;
text-align: center;
vertical-align:baseline;
border: 1px solid #A0A0A0;
}
.tabs1 > .ui-tabs-nav > li.ui-tabs-selected {
padding: 0 0;
background-image: url(images/mainnav-tab-on.png);
text-align: center;
}
.tabs1 > .ui-tabs-nav > li > a {
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
font-family: "Overpass Bold","Liberation Sans", Arial, sans-serif;
min-width: 5em;
height: 20px;
color: #858585;
margin: 0 auto;
text-align:center;
font-size:1.5em;
text-shadow: 1px 1px 0 #FFFFFF;
}
.tabs1 > .ui-tabs-nav > li > a:link,
span.main-nav-off > a:visited{
color: #858585;
}
.tabs1 > .ui-tabs-nav > li.ui-tabs-selected > a {
color: #1e5e05;
}
.tabs1 .ui-tabs-panel {
display: block;
border-width: 0;
padding: 0 0 0 0;
background-color: transparent;
}
/* ---- Tabs level 2 ---- */
.tabs2 {
}
.tabs2 > .ui-tabs-nav {
padding: 5px 24px 1px;
margin: 0;
height: 25px;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: transparent;
}
.tabs2 > .ui-tabs-nav > li {
width: auto;
margin: 0;
background: none repeat scroll 0 0 transparent !important;
color: white;
border: none;
}
.tabs2 > .ui-tabs-nav > li.ui-tabs-selected {
background: url(images/nav-arrow.png) no-repeat scroll center 2.1em transparent !important;
height: 3.1em;
border: none;
margin: 0;
}
.tabs2 > .ui-tabs-nav > li > a {
width:auto;
padding: 0.3em 0.8em ;
-moz-border-radius: 2em !important;
-webkit-border-radius: 2em !important;
border-radius: 2em !important;
color: #333333;
font-size: 1em;
font-family: "Liberation Sans", Arial, Sans;
margin: 0 0.3em;
}
.tabs2 > .ui-tabs-nav li > a:link,
span.main-nav-off > a:visited {
color: #333333;
}
.tabs2 > .ui-tabs-nav > li.ui-tabs-selected > a,
.tabs2 > .ui-tabs-nav > li > a:hover {
background-color:#EEEEEE;
color: #164304;
text-shadow: 1px 1px 0 #FFFFFF;
}
/* ---- Tabs level 3 ---- */
.tabs3 {
height: 28px;
}
.tabs3 > .ui-tabs-nav {
padding: 1em 22px 0.1em;
border: none;
background: transparent;
}
.tabs3 > .ui-tabs-nav > li {
background: transparent;
border: 0;
margin: 0 2.4em 1px 0;
}
.tabs3 > .ui-tabs-nav > li > a {
width: auto;
margin: 0;
padding: 0.3em 0 0.3em 0;
font-family: "Overpass", "Liberation Sans", Arial, sans-serif;
font-size: 1.2em;
text-transform: uppercase;
color: #858585;
}
.tabs3 > .ui-tabs-nav > li.ui-tabs-selected > a {
font-family: "Overpass Bold", "Liberation Sans", Arial, sans-serif;
color: #1e5e05;
}
/* ---- Content ---- */
#content {
position: absolute;
top: 151px;
left: 6px;
right: 6px;
bottom: 10px;
}
#content.tabs-3 {
top: 175px;
}
/* ---- Entity ---- */
.entity {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.entity h1 {
margin: 0 0 10px;
}
.entity-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 10px;
margin: 0 0 0;
}
.entity-content div.content-buttons {
float: right;
margin-right: 1.5em;
}
.entity-content div.content-buttons img {
border: 0;
}
/* ---- Facet ---- */
.facet {
position: absolute;
top: 5px;
left: 10px;
right: 10px;
bottom: 0;
}
.facet-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 130px;
margin: 0 12px 0;
}
.facet-title {
position: absolute;
top: 15px;
left: 0;
color: gray;
display: block;
}
.facet-title h3 {
margin: 0;
}
.facet-title span {
display: inline;
}
.facet-pkey {
color:black;
text-transform: none;
}
.breadcrumb {
position: absolute;
top: 0;
left: 0;
}
.breadcrumb a {
cursor: pointer;
}
/* ---- Facet Tabs ---- */
.facet-tabs {
position: absolute;
left: 0;
right: 0;
bottom: 30px;
z-index: 1; /* need to be above facet header */
border-bottom: 1px solid #C9C3BA;
}
.facet-group {
float: left;
margin-right: 1em;
position: relative;
height: 100%;
}
.facet-group-label {
height: 20px;
}
.facet-tab {
height: 31px;
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.facet-tab li {
display: inline-block;
position: relative;
padding-right: 1px;
}
.facet-tab li a {
background-color: #dedbde;
border-left: 1px solid #c9c3ba;
border-right: 1px solid #c9c3ba;
margin: 0 0 0;
padding: 6px 16px;
text-decoration: none;
display: inline-block;
line-height: 19px;
background-image: url(images/facet-tab-off.png);
color: #666666;
}
.facet-tab li a:hover {
background-color: #f1f0ee;
}
.facet-tab li a.selected {
color: #6C6F73;
background-color: #f1f0ee;
font-weight: bold;
background-image: url(images/facet-tab-on.png);
height: 20px;
}
.facet-tab li.settings {
margin-left:1em; margin-right:1em;
}
/* ---- Facet Controls ---- */
.facet-controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30px;
line-height: 30px;
}
.right-aligned-facet-controls {
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
.facet-controls a {
font-size: 1.3em !important;
margin: 0 6px 0 0;
}
/* ---- Facet Content ---- */
.facet-content {
position: absolute;
top: 130px;
left: 0;
right: 0;
bottom: 0;
padding: 0;
}
/* ---- Facet Customization ---- */
.no-facet-tabs .facet-header {
height: 70px;
}
.no-facet-tabs .facet-content {
top: 70px;
}
/* ---- Search Facet ---- */
.content-table {
position: relative;
width: 100%;
height: 100%;
}
.content-table tbody {
position: absolute;
top: 31px;
left: 3px;
right: 4px;
bottom: 32px;
}
.search-filter {
float: right;
width: 215px;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
border-radius: 15px !important;
border: 1px solid #9f9e9e;
background: url(images/search-background.png);
height: 20px;
line-height: 20px;
padding: 0 8px 0;
margin: 5px 0 5px;
}
.search-filter input {
width: 193px;
border: none;
background: transparent;
height: 18px;
}
.search-filter a {
float: right;
margin: 0;
}
.search-controls {
-moz-border-radius: .7em .7em 0 0;
-webkit-border-radius: .7em .7em 0 0;
height:2.5em;
background: -moz-linear-gradient(top, #eeeeee, #dfdfdf);
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
position: relative;
padding: 1em 1.5em;
margin-top: .8em;
}
.search-table {
padding: 0;
width: 100%;
border: none;
}
.search-table > a:link, a:visted {
color:black;
}
.search-table thead tr th {
padding: 0 0.5em;
background-color:#f6f6f6;
color:#333333;
text-align: left;
border: 1px solid #dfdfdf;
height: 25px;
}
.search-table thead tr th .action-button {
margin: 0 0 0 0.5em;
}
.search-table tbody td {
padding-left: 0.5em;
}
.search-table tfoot td {
padding: 0.5em 0 0 1em;
border-top: 1px solid #dfdfdf;
height: 25px;
line-height: 25px;
margin-top: 1em;
}
.search-table span[name=summary] {
float: left;
margin-right: 4em;
}
.search-table .pagination-control {
float: right;
}
.search-table .pagination-control a {
cursor:pointer;
}
.search-table .pagination-control input[name=current_page] {
width: 22px;
}
ul#viewtype {
padding-left: 2em;
}
ul#viewtype li {
color: #656565;
display: inline;
font-weight: bold;
list-style-type: none;
padding-right: 2em;
}
ul#viewtype li img {
vertical-align: middle;
}
ul#viewtype li a {
font-weight: normal;
}
h1 {
font-family: "Overpass Bold","Liberation Sans", Arial, sans-serif;
font-size: 1.5em;
font-weight: normal;
color: #555555;
text-transform: uppercase;
text-shadow: 1px 1px 0 #FFFFFF;
}
h2 {
font-family: "Overpass Bold","Liberation Sans", Arial, sans-serif;
font-size: 1.5em;
font-weight: normal;
color: #333333;
text-transform: uppercase;
margin-left: 1em;
margin-bottom: 0;
text-align: left;
}
h3 {
font-family: "Overpass Bold","Liberation Sans", Arial, sans-serif;
font-size: 1.8em;
color: #3c3c3c;
text-transform: uppercase;
text-shadow: 1px 1px 0 #FFFFFF;
}
.section-expand{
}
hr {
background-color: #EEEEEE;
clear: both;
color: #FFFFFF;
height: 0.1em;
margin-left: 1.5em;
margin-right: 1.5em;
margin-top: 1em;
}
/* ---- Details Facet ---- */
.details-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 32px;
overflow: auto;
border: none;
border-top: 1px solid #DFDFDF;
}
.details-summary {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 29px;
border-top: 1px solid #DFDFDF;
padding-left: 0.5em;
line-height: 25px;
}
.dialog-section {
margin-bottom: 10px;
}
.section-table {
width: 100%;
}
.section-cell-label {
vertical-align: top;
width: 120px;
}
.section-cell-field {
}
.details-section {
margin-top: 1em;
margin-left: 4.5em;
margin-right: 3.3em;
margin-bottom: 1em;
}
.details-section .section-table {
width: 100%;
border-spacing: 12px;
}
.details-section .section-cell-label {
text-align: right;
vertical-align: top;
width: 120px;
}
.details-section .section-cell-field {
font-weight: bold;
}
.undo {
cursor:pointer;
padding: 0.2em;
}
span.attrhint {
font-size: 8pt;
left: 5em;
margin-left: 12.5em;
position: absolute;
overflow-x: hidden;
}
.ui-tabs {
padding:0;
}
.ui-widget-content {
}
a, .ui-widget-content a {
text-decoration: none;
color: #1d85d5;
font-weight: normal;
text-transform: none;
}
.ui-widget-header {
background: -moz-linear-gradient(center top , #225314, #1c400a) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#225314), to(#1c400a));
border: 1px solid #319016;
font-weight: bold;
}
/* ---- Dialog ---- */
.ui-dialog .ui-dialog-titlebar-close span {
background-color: transparent !important;
}
.ui-dialog .ui-dialog-content {
/* this should go away once we can fix table scrolling */
overflow:auto;
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.5em 1em;
position: relative;
}
.ui-dialog .ui-dialog-buttonpane button {
cursor: pointer;
margin: 0.5em 0.4em 0.5em 0;
padding: 0.1em 0.2em;
}
.ui-dialog .ui-dialog-buttonpane {
background-image: none;
border-width: 1px 0 0;
padding: 0.3em 1em 0.5em 0.4em;
text-align: left;
}
/*
.ui-dialog .ui-dialog-content {
min-height: 26em !important;
}
*/
.dialog-message {
margin: 5px 5px 10px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.ui-widget input, .ui-widget select,
.ui-widget textarea, .ui-widget button {
font-family: "Liberation Sans", Arial, sans-serif;
font-size: 11px;
margin-right: .1em;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, #content .ui-state-default {
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
background: -moz-linear-gradient(top, #959595, #5e5e5e);
background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#5e5e5e));
border: 1px solid #777777;
color: #fff;
font-weight: normal;
padding: 0.4em 1em;
}
[title=">>"] {
margin-top: 1em !important;
}
span.sub-nav-off > a:link, span.sub-nav-off > a:visited{
color:white;
}
span.main-nav-off > a:link, span.main-nav-off > a:visited{
color:white;
}
span.main-separator{
background: #333339;
padding:0.1em;
}
.action-button {
background: none;
background-image:none;
font-family: "Liberation Sans", Arial, sans-serif;
font-size: 0.9em;
}
.action-button .button-label {
padding: 0 0.2em;
}
.action-button-disabled {
color: gray;
cursor: default;
}
.aci-attribute-table tbody {
border-bottom: 1px solid #8a8a8a;
height:10em;
}
.aci-attribute-table .aci-attribute-column {
width: 200em; /* it will fit actual width */
}
.entity-views{
list-style-type:none;
}
.entity-views li {
display:inline;
cursor: pointer;
padding: 0.4em;
}
.strikethrough { text-decoration: line-through; }
table.certificate-status {
line-height: 2;
}
table.kerberos-key-status {
line-height: 2;
}
.status-icon {
vertical-align: bottom;
}
.status-valid {
background-image: url(images/check-icon.png);
border: 0.2em solid #008000;
}
.status-valid-active {
background-color: #008000;
}
.status-revoked {
border: 0.2em solid #ff0000;
}
.status-revoked-active {
background-color: #ff0000;
}
.status-missing {
border: 0.2em solid #daa520;
}
.status-missing-active {
background-color: #daa520;
}
.ui-widget-content {
border:0;
}
/* ---- Table ---- */
table.scrollable thead {
display: block;
}
table.scrollable tbody {
display: block;
overflow: auto;
}
.adder-dialog {
position: relative;
width: 100%;
height: 100%;
}
.adder-dialog-top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3em;
line-height: 3em;
}
.adder-dialog-top input[name=filter] {
width: 244px;
}
.adder-dialog-left {
position: absolute;
top: 3.5em;
left: 0;
right: 50%;
bottom: 0;
}
.adder-dialog-right {
position: absolute;
top: 3.5em;
left: 50%;
right: 0;
bottom: 0;
}
.adder-dialog .search-table {
width: 100%;
height: 100%;
}
.adder-dialog tbody {
position: absolute;
bottom: 32px;
left: 3px;
right: 4px;
top: 31px;
}
.adder-dialog-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1.5em;
line-height: 1.5em;
}
.adder-dialog-content {
position: absolute;
top: 1.5em;
left: 0;
right: 0;
bottom: 0;
}
.adder-dialog-available {
background-color: #ffffff;
border: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 3em;
}
.adder-dialog-with-external .adder-dialog-available {
bottom: 4em;
}
.adder-dialog-selected {
background-color: #ffffff;
border: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 3em;
}
.adder-dialog-buttons {
padding-top: 10em;
width: 100%;
text-align: center;
}
.adder-dialog-internal {
background-color: #ffffff;
border: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 23em;
padding-top: 1em;
}
.adder-dialog-external {
border: none;
position: absolute;
left: 0;
bottom: 0;
right: 3em;
height: 4em;
}
.adder-dialog-external .adder-dialog-content {
top: 1.9em;
}
.adder-dialog-external input {
width: 98%;
}
/* ---- Widgets ---- */
.text-widget input {
width: 250px;
}
.multivalued-text-widget [name=value] {
margin-bottom: 1em;
}
.multivalued-text-widget input {
width: 250px;
}
.combobox-widget-input {
display: inline-block;
position: relative;
}
.combobox-widget-input input {
width: 250px;
}
.combobox-widget-input .combobox-icon {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin-top: -2px;
margin-right: 4px;
}
.combobox-widget-list {
visibility: hidden;
border: 1px solid #A0A0A0;
background: #EEEEEE;
padding: 5px;
position: absolute;
left: 0;
right: 0;
z-index: 1010; /* need to be above dialog box */
}
.combobox-widget-list input {
width: 238px;
}
.combobox-widget-list .search-icon {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin-top: -2px;
margin-right: 3px;
}
.host-adder-dialog table.fqdn {
width: 100%;
}
.host-adder-dialog th.hostname {
width: 200px;
}
.host-adder-dialog td.hostname {
vertical-align: top;
}
.host-adder-dialog td.dnszone {
vertical-align: top;
}
.host-adder-dialog input[name=hostname] {
width: 100%;
}
.dnszone-adder-dialog .section-cell-label {
width: 180px;
}
/* Info and simple pages (not main app) */
body.info-page {
background: url(images/static-background.png) repeat-x scroll left top #EDEDED;
}
.info-page h1 {
color: #333333;
margin-bottom: 1.5em;
}
.info-page .container_1 {
margin-left: auto;
margin-right: auto;
width: 960px;
background: url(images/centered-background.png) no-repeat scroll 0 7em transparent;
min-height: 40em;
}
.info-page .textblock {
text-align: center;
margin-top: 6em;
font-size: 1.1em;
}
.info-page .textblockkrb {
text-align: left;
margin-top: 5em;
font-size: 1.1em;
padding-left: 3em;
padding-right: 3em;
}
.info-page .textblockkrb ul li {
list-style-type: none;
padding: .15em;
}
.required-indicator {
color: red;
font-weight: bold;
font-size: 120%;
}
.section-cell-label .required-indicator {
float: right;
margin-right: -10px;
}
.dialog-section .section-cell-label .required-indicator {
margin-right: 0px;
}