Files
freeipa/install/ui/ipa.css
T
Endi S. Dewata 9704adfe44 Fixed resizing issues.
The UI has been modified to fix some resizing issues:

Previously the height of facet content was roughly calculated using
resize(). Now the height can be more accurately defined in CSS.

Previously the UI width was fixed. The HTML layout and background
images have been modified to support horizontal expansion if needed.
2011-06-13 09:23:29 -04:00

1133 lines
19 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: "FreeWay"; src:url("FreeWay.otf");}
@font-face {font-family: "FreeWayBold"; src:url("FreeWay-Bold.otf");}
html {
height: 100%;
}
body {
overflow: auto;
background: url("outer-bg.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: 5px;
}
/* ---- 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("top-bg.png") #0C3B00;
}
#background-navigation {
position: absolute;
top: 34px;
left: 0;
right: 0;
height: 72px;
background: url("Mainnav-background.png");
}
#background-left {
position: absolute;
top: 106px;
left: 0;
width: 10px;
bottom: 0;
background: url("background-left.png");
background-repeat: no-repeat;
}
#background-center {
position: absolute;
top: 106px;
left: 10px;
right: 10px;
bottom: 0;
background: url("background-center.png");
background-repeat: repeat-x;
}
#background-right {
position: absolute;
top: 106px;
right: 0;
width: 10px;
bottom: 0;
background: url("background-right.png");
background-repeat: no-repeat;
}
.ui-widget {
font-size: 1em;
}
.input_link {
padding: .4em 1em .4em 2em;
text-decoration: none;
position: relative;
cursor: pointer;
}
.input_link_disabled {
cursor: default;
color:black;
}
.input_link span.ui-icon {
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border: 1px solid #B8B8B8;
margin: -0.9em 0.4em 0em -0.3em;
position: absolute;
left: .2em;
top: 50%;
}
.input_link_disabled span.ui-icon {
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border: 1px solid #B8B8B8;
margin: -0.9em 0.4em 0em -0.3em;
position: absolute;
left: .2em;
top: 50%;
}
.ipa-icon {
font-size: 0.7em;
padding-right: 0.3em;
}
/* ---- 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("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("Mainnav-offtab.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("Mainnav-ontab.png");
text-align: center;
}
.tabs1 > .ui-tabs-nav > li > a {
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
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: 4px 10px 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("nav-arrow.png") no-repeat scroll center 2.2em 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 2em 0.1em 2em;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: transparent;
}
/* ---- Content ---- */
#content {
position: absolute;
top: 136px;
left: 6px;
right: 6px;
bottom: 10px;
}
#content.tabs-3 {
top: 175px;
}
/* ---- Entity ---- */
.entity {
height: 100%;
position: relative;
}
.entity h1{
margin: 0 0 10px;
/*
margin-left: 0.5em;
margin-right: 0.5em;
-moz-border-radius: 0.5em 0.5em 0 0;
-webkit-border-radius: 0.5em 0.5em 0 0;
background: -moz-linear-gradient(center top , #EEEEEE, #DFDFDF) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DFDFDF));
*/
}
.entity-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 70px;
margin: 10px 10px 0;
}
.entity-title {
position: absolute;
top: 0;
left: 0;
color: gray;
display: block;
}
.entity-title h3 {
margin: 0;
}
.entity-title span {
display: inline;
}
.entity-pkey {
color:black;
}
.entity-search {
position: absolute;
top: 0;
right: 0;
}
.back-link {
cursor: pointer;
}
.entity-tabs {
position: absolute;
height: 40px;
left: 0;
right: 0;
bottom: 0;
z-index: 1; /* need to be above facet header */
}
.facet-group {
float: left;
/* height: 3em; */
margin-right: 1em;
position: relative;
height: 100%;
}
.facet-group-name {
height: 15px;
}
.facet-tab {
height: 25px;
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.facet-tab li {
display: inline-block;
height: 25px;
position: relative;
}
.facet-tab li a {
color: #42454a;
background-color: #dedbde;
border: 1px solid #c9c3ba;
border-bottom: none;
margin: 5px 0 0;
padding: 0 4px 0;
text-decoration: none;
display: inline-block;
line-height: 19px;
}
.facet-tab li a:hover {
background-color: #f1f0ee;
}
.facet-tab li a.selected {
color: #000;
background-color: #f1f0ee;
font-weight: bold;
margin: 0;
padding: 5px 4px 1px;
}
.facet-tab li.settings {
margin-left:1em; margin-right:1em;
}
.entity-content {
position: absolute;
top: 80px;
left: 0;
right: 0;
bottom: 0;
font-size: 10px;
margin: 0 10px 0;
}
.entity-content div.content-buttons {
float: right;
margin-right: 1.5em;
}
.entity-content div.content-buttons img {
border: 0;
}
/* ---- Facet ---- */
.facet {
width: 100%;
height: 100%;
position: relative;
}
.facet-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
padding: 10px 10px 10px;
border-color: #C9C3BA;
border-style: solid;
border-width: 1px;
background: -moz-linear-gradient(top, #eeeeee, #dfdfdf);
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
}
.facet-content {
position: absolute;
top: 75px;
left: 0;
right: 0;
bottom: 0;
padding: 0;
}
/* ---- Search ---- */
.content-table {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.content-table tbody {
position: absolute;
top: 31px;
left: 3px;
right: 4px;
bottom: 32px;
}
.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-left: 0.5em;
background-color:#f6f6f6;
color:#333333;
text-align: left;
border: 1px solid #dfdfdf;
height: 25px;
}
.search-table tbody td {
padding-left: 0.5em;
}
.search-table tfoot td {
padding-left: 0.5em;
border-top: 1px solid #dfdfdf;
height: 25px;
}
.search-table span[name=summary] {
float: left;
line-height: 25px;
}
.search-table span[name=pagination] {
float: right;
}
.search-table span[name=pagination] a {
cursor:pointer;
}
.search-table span[name=pagination] 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: "FreeWayBold","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: "FreeWayBold","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;
}
.section-expand{
float:left;
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
background-color: -moz-linear-gradient(top, #959595, #5e5e5e);
background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#5e5e5e));
border: 1px solid #b8b8b8;
color: #fff;
margin-right: 0.5em;
margin-top: -0.2em;
}
hr {
background-color: #EEEEEE;
clear: both;
color: #FFFFFF;
height: 0.1em;
margin-left: 1.5em;
margin-right: 1.5em;
margin-top: 1em;
}
/* ---- Details ---- */
.details-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 32px;
overflow: auto;
border: none;
}
.details-summary {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 29px;
border-top: 1px solid #DFDFDF;
padding-left: 0.5em;
line-height: 25px;
}
.details-section {
margin-left: 4.5em;
margin-right: 1.5em;
margin-top: 1.8em;
white-space: nowrap;
padding-bottom: 1.8em;
padding-right: 1.8em;
}
.undo {
cursor:pointer;
}
dl.entryattrs {
clear: both;
margin-left: 1.5em;
margin-top: 1.8em;
white-space: nowrap;
}
dl.entryattrs dt {
clear: left;
float: left;
padding-bottom: 1.8em;
padding-right: 1.8em;
text-align: right;
width: 16em;
margin: 0.5em -0.5em 0 -6em;
}
dl.entryattrs dd {
float: left;
padding-bottom: 0.8em;
margin-left: 0;
}
dl.entryattrs dd.first {
margin-left: 0;
margin-top: 0.5em;
font-weight: bold;
}
dl.entryattrs dd.other {
clear: both;
margin-left: 10.7em;
}
dl.entryattrs input {
margin-right: 0.5em;
margin-bottom: 1em;
}
dl.entryattrs input.otp {
min-width: 15em;
width: 15em;
}
dl.aci-target{
clear: both;
margin-left: 2em;
margin-top: 1.8em;
white-space: nowrap;
}
dl.aci-target dt {
padding-bottom: 1.8em;
padding-left: 2.8em;
text-align: left;
width: 16em;
margin: 0.5em -0.5em 0 -6em;
}
dl.aci-target dd {
}
dl.aci-target dd.other {
margin-left: -1em;
}
dl.aci-target dd.first {
margin-left: 8.5em;
margin-top: -3.7em;
padding-bottom: 2em;
}
dl.aci-target dd.other {
padding-left: 0.7em;
}
dl.aci-target input {
}
#group_filter {
margin-right: 2em;
}
#aci_by_filter {
margin-right: 1em;
}
#aci_by_query {
margin-right: 1em;
}
#aci_by_group {
margin-right: 1em;
}
#aci_by_type {
margin-right: 1em;
margin-top: 2.2em;
}
#aci_attributes_table {
overflow-x: hidden;
width: 46em;
}
#memberof-entity-select {
margin-right: 1em;
}
#group-entity-select {
margin-right: 1em;
}
span.attrhint {
font-size: 8pt;
left: 5em;
margin-left: 12.5em;
position: absolute;
overflow-x: hidden;
}
.ui-tabs {
padding:0;
}
#the positions for these are in the large icon image,
#and need to be specified in pixels.
.ui-icon-minus {
background-position: -48px -129px;
}
.ui-icon-plus {
background-position: -16px -129px;
}
.ui-icon-trash {
background-position: -176px -97px;
}
.ui-dialog .ui-dialog-titlebar-close span {
background-color: transparent !important;
}
.ui-icon {
//background-image: url("ui-icons_222222_256x240.png");
background-color: #e2e2e2;
}
.ui-dialog .ui-dialog-content {
#this should go away once we can fix table scrolling
overflow:auto;
}
.ui-widget-content {
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.5em 1em;
position: relative;
}
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;
}
.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;
}//
.ui-widget input, .ui-widget select,
.ui-widget textarea, .ui-widget button {
font-family: "Liberation Sans", Arial, sans-serif;
font-size: 1.3em;
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;
}
span.ui-icon-search {
background-color: transparent !important;
border: medium none !important;
color: #FFFFFF !important;
margin-left: 0 !important;
}
[title="Find"] {
margin-left: 0.5em !important;
padding: 0.4em 1em 0.4em 2em !important;
}
[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;
}
a.action-button-disabled {
color: gray;
cursor: default;
}
.aci-attribute-table {
}
.aci-attribute-table tbody{
width: 20em;
height:10em;
overflow:auto;
border-bottom: 1px solid #8a8a8a;
}
.aci-attribute-table th.aci-attribute-column{
float: left;
width: 20.5em;
padding: 0.8em 0.5em;
}
.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('check.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;
}
dl.modal {
clear: both;
margin-left: 1em;
margin-top: 1em;
white-space: nowrap;
}
dl.modal dt {
clear: left;
float: left;
padding-bottom: 0;
padding-right: 0;
text-align: right;
width: 10em;
}
dl.modal dd {
float: left;
padding-bottom: 0;
margin-left: 0.8em;
}
/*
#dns-record-resource-filter {
padding: 0 1em;
margin: 0 1em;
}
#dns-record-type-filter {
margin: 0 1em 0 0.5em;
}
*/
.ui-widget-content {
border:0;
}
/* ---- Table ---- */
table.scrollable thead {
display: block;
}
table.scrollable tbody {
display: block;
overflow: auto;
}
.adder-dialog-filter {
height: 2.5em;
padding-top: 0.7em;
}
.adder-dialog-results {
position: relative;
height: 20.0em;
}
.adder-dialog-available {
background-color: #ffffff;
border: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 23em;
padding-top: 1em;
}
.adder-dialog-selected {
background-color: #ffffff;
border: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 23em;
padding-top: 1em;
}
.adder-dialog-buttons {
position: absolute;
top: 7.5em;
left: 23em;
right: 23em;
bottom: 0;
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;
width: 23em;
height: 4em;
}
.expand-collapse-all {
float: right;
padding-right: 1.5em;
}