freeipa/install/ui/ipa.css
Adam Young 1b12a28278 action panel to top tabs
replacing the action panel with the Design for 2.1
Significantly cleaned up implementation of intra-entity navigation
requires additional CSS work
still need to integrate the search controls onto each page
cleaning up interface between entity and facet
simplified nested tabs logic

Fixed role navigation
select default tab from the search widget
fixed unit tests and jsl
keep tabs area allocated

set default tab selected whenever the pkey changes.

Removing styling that is changing positions of buttons.  The logic for that was for action-panel, but does not translate to entity-header.

change from metadata name to label for I18N

set selected tab in entity_init.

Default title for entities without search and pkeys

associations in table now link.

remove colon from title when not showing pkey

added Managed by facet group.

Removed entities that are, for some reason, invalid.
2011-04-26 16:49:23 -04:00

889 lines
16 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");}
body{
background-image:url("outer-bg.png");
background-repeat:repeat-x;
background-position:left top;
background-color:#F3F2F2;
border-width: 0;
font-family:"Liberation Sans",Arial,Sans;
font-size:11px;
margin: 0;
}
.network-activity-indicator{
display:none;
}
.center-container {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.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 ---- */
div.header {
background: url("top-bg.png") #0C3B00;
width: 100%;
height: 3.8em;
}
div.header a {
text-decoration: none;
}
div.header a:link {
text-decoration: none;
color: white;
}
div.header a:visited {
text-decoration: none;
color: white;
}
div.header span.header-logo {
padding-left: 2em;
}
div.header span.header-logo a img {
border: 0;
}
div.header span.header-loggedinas {
width: 96em;
color: #fff;
display: block;
padding-left: 71em;
margin-top: -2.6em;
margin-left: auto;
margin-right: 27.6em;
width: 20em;
}
/* ---- Navigation ---- */
div.tabs {
overflow: auto;
width: 100%;
height: 100%;
min-height: 40em;
background: url("centered-bg.png") no-repeat scroll 0 8.4em transparent;
}
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-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 {
}
.aci-attribute-table th.style {
}
#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;
}
/*Navigation */
.tabs1 .ui-tabs-nav {
padding-left: 4px;
padding-top: 2.3em;
margin: 0;
border: none;
background-image: url("Mainnav-background.png");
-moz-border-radius: 0;
-webkit-border-radius: 0;
height: 3.5em;
}
.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-widget-content .ui-icon {
//background-image: url("ui-icons_222222_256x240.png");
background-color: #e2e2e2;
}
.ui-widget-content {
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.5em 1em;
position: relative;
}
.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;
}
.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 {
-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="details"] {
margin-top: -.7em !important;
}
[title=">>"] {
display: block;
margin-top: 1em !important;
}
.tabs1 .ui-tabs-nav li {
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
background-image: url("Mainnav-offtab.png");
margin: 0 0.2em;
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;
margin: 0 0.2em;
}
.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;
padding: none;
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;
}
.tabs2 .ui-tabs-nav {
padding: 0.2em 6em 0.1em 2em;
margin-top: 0em;
height: 25px;
background-image: url("Subnav-background.png");
}
.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;
}
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;
}
/* Entity */
.entity-container h1{
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));
}
.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;
}
.content {
font-size: 10px;
margin-top: 1.4em;
float: left;
min-width: 70em;
}
/* Search */
.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 > a:link,a:visted{
color:black;
}
.search-table{
padding: 0;
width:100%;
border: none;
}
.search-table td{
padding-left: 0.5em;
}
.search-table th{
padding-left: 0.5em;
background-color:#f6f6f6;
color:#333333;
text-align: left;
border: 1px solid #dfdfdf;
}
.search-table tfoot tr td span{
border-top: 1px solid #dfdfdf;
margin-top: 1em;
padding: 0.9em 0 0 1em;
display: block;
}
.aci-attribute-table tbody{
height:30em;
overflow-x:hidden;
border-bottom: 1px solid #8a8a8a;
}
.aci-attribute-table th.aci-attribute-column{
float: left;
width: 46.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: 0em 1em;
margin: 0 1em;
}
#dns-record-type-filter {
margin: 0 1em 0 0.5em;
}
.ui-widget-content {
border:0;
}
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: 24.4em;
right: 25;
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;
}
div.entity-header {
width:100%px;
padding:10px;
margin:10px;
}
.entity-header h3{
text-transform: uppercase;
color:gray;
padding-right:5em;
}
.entity-header h3 span{
color:black;
}
.entity-search{
float:right;
}
.entity-tabs {
list-style-type: none;
#margin: 30px 0 0 0;
padding: 1em 0 0.3em 0;
height: 3em;
}
.entity-tabs li {
display: inline;
}
.entity-tabs li a {
color: #42454a;
background-color: #dedbde;
border: 1px solid #c9c3ba;
border-bottom: none;
padding: 0.3em;
text-decoration: none;
}
.entity-tabs li a:hover {
background-color: #f1f0ee;
}
.entity-tabs li a.selected {
color: #000;
background-color: #f1f0ee;
font-weight: bold;
padding: 0.7em 0.3em 0.38em 0.3em;
}
.entity-tabs-section {
float: left;
height: 3em;
display:inline;
margin-right:1em;
}
ul.entity-tabs li.settings {
margin-left:1em; margin-right:1em;
}
div.content {
padding-top: 1em;
margin-top: 1em;
width: 100%;
}
div.content div.content-buttons {
float: right;
margin-right: 1.5em;
}
div.content div.content-buttons img {
border: 0;
}