Files
freeipa/install/ui/ipa.css

1458 lines
25 KiB
CSS
Raw Normal View History

2011-06-21 11:58:26 -04:00
/* 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;
2010-11-17 14:13:33 -05:00
border-width: 0;
font-family: "Liberation Sans",Arial,Sans;
font-size: 11px;
2010-11-17 14:13:33 -05:00
margin: 0;
padding: 0;
height: 100%;
}
.network-activity-indicator {
visibility: hidden;
width: 16px;
height: 16px;
line-height: 16px;
margin: 5px 3px;
display: inline-block;
}
/* ---- 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;
}
.icon {
display: inline-block;
height: 16px;
width: 16px;
vertical-align: middle;
2011-01-27 16:37:48 -05:00
}
.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;
}
2011-01-27 16:37:48 -05:00
.remove-icon {
background: url(images/remove-icon.png);
margin: -4px 0 0 1px;
}
2011-01-27 16:37:48 -05:00
.update-icon {
background: url(images/update-icon.png);
margin: -4px 0 0 1px;
2011-06-21 11:58:26 -04:00
}
.reset-icon {
background: url(images/reset-icon.png);
margin: -4px 0 0 1px;
2011-06-21 11:58:26 -04:00
}
.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 ---- */
.header-right {
float: right;
}
.header-loggedinas {
line-height: 34px;
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 {
2011-06-14 11:41:17 -04:00
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;
2011-06-21 10:21:14 -04:00
border-left: 1px solid #c9c3ba;
border-right: 1px solid #c9c3ba;
margin: 0 0 0;
padding: 8px 16px 4px 16px;
text-decoration: none;
display: inline-block;
line-height: 19px;
color: #666666;
}
.facet-tab li a.selected {
2011-06-21 10:21:14 -04:00
color: #6C6F73;
background-color: #f1f0ee;
font-weight: bold;
height: 20px;
}
.facet-tab li.settings {
margin-left:1em; margin-right:1em;
}
/* Facet tabs coloring */
.facet-group li a {
background-image: url(images/facet-tab-off.png);
background-repeat: repeat-x;
background-position: 0px -33px;
}
.facet-group li a.selected {
background-image: url(images/facet-tab-on.png);
}
div[name=settings].facet-group li a {
background-position: 0px -66px;
}
.facet-group li[name^=member] a,
.facet-group li[name^=managedby] a {
background-position: 0px 0px;
}
.facet-group li[name^=memberof] a {
background-position: 0px -33px;
}
/* ---- Facet Controls ---- */
.facet-controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30px;
line-height: 30px;
padding: 0 6px 0 6px;
}
.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;
margin: 0 12px;
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 thead {
position: absolute;
top: 0px;
left: 3px;
right: 3px;
}
.content-table tbody {
position: absolute;
top: 31px;
left: 3px;
right: 3px;
bottom: 35px;
}
.content-table tbody tr.disabled {
color: gray;
}
.search-filter {
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;
display: inline-block;
}
.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 {
Better displaying of long names in tables and facet headers Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable. Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem. Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution. In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information. Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway. Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions: cell-spacing: 2px cell-padding: 6px th:right, left; td: left cell-border: th:1px; td:0px It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation. Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem). Also added padding to headers in association adder dialog. https://fedorahosted.org/freeipa/ticket/1890
2011-12-08 10:25:34 +01:00
padding: 0 6px;
background-color:#f6f6f6;
color:#333333;
text-align: left;
border: 1px solid #dfdfdf;
height: 25px;
}
.search-table thead tr th .action-button {
Better displaying of long names in tables and facet headers Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable. Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem. Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution. In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information. Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway. Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions: cell-spacing: 2px cell-padding: 6px th:right, left; td: left cell-border: th:1px; td:0px It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation. Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem). Also added padding to headers in association adder dialog. https://fedorahosted.org/freeipa/ticket/1890
2011-12-08 10:25:34 +01:00
margin: 0 0 0 6px;
}
.search-table tbody td {
Better displaying of long names in tables and facet headers Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable. Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem. Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution. In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information. Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway. Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions: cell-spacing: 2px cell-padding: 6px th:right, left; td: left cell-border: th:1px; td:0px It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation. Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem). Also added padding to headers in association adder dialog. https://fedorahosted.org/freeipa/ticket/1890
2011-12-08 10:25:34 +01:00
padding: 0 0 0 7px;
}
.search-table thead th div,
.search-table tbody td div
{
word-wrap: break-word;
}
.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;
HBAC Details Page The UI framework has been extended to include a collection of widgets: - ipa_widget: base class - ipa_text_widget: text field - ipa_radio_widget: radio button - ipa_textarea_widget: textarea - ipa_button_widget: button - ipa_column_widget: column for table - ipa_table_widget: table These widgets can be used to create input controls. They can also be extended to create custom controls. The framework has also been enhanced to support custom layouts. This can be used to change the look of the application without changing the code. Initially this is only available in details section. Layout consists of a collection of HTML templates. Each template is a complete and valid HTML file representing a portion of a page. The template will be loaded and initialized by the code, then filled with the data from the server. The layouts are located in install/static/layouts/<name> folder. By default, if no templates are used, the fields in the details page are rendered vertically using dd/dt/dd tags. For pages that require different layout, a custom UI needs to be developed. There are two ways to do that: - write a custom widget to generate the UI dynamically - create an HTML template and write the initialization code For components that are quite complex or used frequently, it's might be better to use the first method. For simple pages that are used only in one location or need to support customization, the second method might be preferable. Other benefits of templates: - cleaner code and UI separation - more flexibility in customization - new pages can be developed quickly and require less coding - multiple templates can be used with the same initialization code - easier to maintain The HBAC details page has been implemented using both methods. By default it will use custom widgets to generate the page. To use a custom layout, add the following parameter to the URL, then reload the page: &layout=<name> Currently the only available layout is 'default' which produces the same look as the custom widgets. The HBAC details page is usable, but it still needs additional work. The access time is not working yet. There is no undo button, hint, or validation yet. The table in the association facet has also been changed to use ipa_association_widget which is derived from ipa_table_widget. The Makefile has been updated to include the layouts. The unit tests have been updated as well.
2010-11-02 20:16:55 -05:00
}
.section-table {
width: 100%;
2010-12-20 16:56:14 -05:00
}
.section-cell-label {
vertical-align: top;
width: 120px;
Better displaying of long names in tables and facet headers Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable. Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem. Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution. In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information. Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway. Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions: cell-spacing: 2px cell-padding: 6px th:right, left; td: left cell-border: th:1px; td:0px It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation. Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem). Also added padding to headers in association adder dialog. https://fedorahosted.org/freeipa/ticket/1890
2011-12-08 10:25:34 +01:00
max-width: 120px;
}
.section-cell-field {
Better displaying of long names in tables and facet headers Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable. Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem. Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution. In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information. Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway. Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions: cell-spacing: 2px cell-padding: 6px th:right, left; td: left cell-border: th:1px; td:0px It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation. Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem). Also added padding to headers in association adder dialog. https://fedorahosted.org/freeipa/ticket/1890
2011-12-08 10:25:34 +01:00
max-width: 650px;
}
.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;
Better displaying of long names in tables and facet headers Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable. Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem. Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution. In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information. Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway. Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions: cell-spacing: 2px cell-padding: 6px th:right, left; td: left cell-border: th:1px; td:0px It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation. Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem). Also added padding to headers in association adder dialog. https://fedorahosted.org/freeipa/ticket/1890
2011-12-08 10:25:34 +01:00
word-wrap: break-word;
}
.details-section .section-cell-field {
font-weight: bold;
Better displaying of long names in tables and facet headers Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable. Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem. Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution. In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information. Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway. Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions: cell-spacing: 2px cell-padding: 6px th:right, left; td: left cell-border: th:1px; td:0px It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation. Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem). Also added padding to headers in association adder dialog. https://fedorahosted.org/freeipa/ticket/1890
2011-12-08 10:25:34 +01:00
word-wrap: break-word;
}
.undo {
cursor:pointer;
padding: 0.2em;
}
span.attrhint {
font-size: 8pt;
left: 5em;
margin-left: 12.5em;
position: absolute;
overflow-x: hidden;
}
2010-11-17 14:13:33 -05:00
.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 {
word-wrap: break-word;
/* this should go away once we can fix table scrolling */
overflow: auto;
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.5em 1em;
position: relative;
}
2011-01-25 09:23:55 -05:00
.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;
}
*/
2010-11-17 14:13:33 -05:00
.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;
}
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;
}
.button {
text-decoration: none;
cursor: pointer;
display: inline-block;
height: 18px;
}
.button-label {
padding: 0 0.2em;
display: inline-block;
height: 16px;
line-height: 16px;
}
.action-button {
background: none;
background-image: none;
font-family: "Liberation Sans", Arial, sans-serif;
font-size: 0.9em;
}
.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;
2010-09-16 21:44:03 -04:00
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;
2010-11-17 14:13:33 -05:00
}
/* ---- 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: 18px;
}
.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;
Better displaying of long names in tables and facet headers Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable. Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem. Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution. In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information. Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway. Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions: cell-spacing: 2px cell-padding: 6px th:right, left; td: left cell-border: th:1px; td:0px It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation. Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem). Also added padding to headers in association adder dialog. https://fedorahosted.org/freeipa/ticket/1890
2011-12-08 10:25:34 +01:00
padding: 0.2em 1em;
}
.adder-dialog-content {
position: absolute;
Better displaying of long names in tables and facet headers Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable. Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem. Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution. In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information. Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway. Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions: cell-spacing: 2px cell-padding: 6px th:right, left; td: left cell-border: th:1px; td:0px It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation. Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem). Also added padding to headers in association adder dialog. https://fedorahosted.org/freeipa/ticket/1890
2011-12-08 10:25:34 +01:00
top: 1.9em;
left: 0;
right: 0;
bottom: 0;
}
.adder-dialog-available {
2011-01-25 09:23:55 -05:00
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 {
2011-01-25 09:23:55 -05:00
background-color: #ffffff;
border: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 3em;
2011-01-25 09:23:55 -05:00
}
.adder-dialog-buttons {
padding-top: 10em;
width: 100%;
2011-01-25 09:23:55 -05:00
text-align: center;
}
.adder-dialog-buttons .button {
position: relative;
}
.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 {
Better displaying of long names in tables and facet headers Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable. Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem. Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution. In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information. Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway. Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions: cell-spacing: 2px cell-padding: 6px th:right, left; td: left cell-border: th:1px; td:0px It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation. Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem). Also added padding to headers in association adder dialog. https://fedorahosted.org/freeipa/ticket/1890
2011-12-08 10:25:34 +01:00
top: 2.1em;
}
.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: 6px;
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;
}
/* ---- HBAC Test ---- */
.hbac-test-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 30px;
}
.hbac-test-content {
position: absolute;
top: 30px;
left: 0;
right: 0;
bottom: 30px;
}
.hbac-test-footer {
position: absolute;
height: 25px;
left: 0;
right: 0;
bottom: 0;
}
.hbac-test-title {
font-family: 'Overpass Bold', 'Liberation Sans', Arial, Sans-Serif;
font-size: 1.8em;
color: #3c3c3c;
text-transform: uppercase;
text-shadow: 1px 1px 0 #FFFFFF;
margin: 0;
}
div.entity[name=hbactest] .content-table tbody {
bottom: 68px;
}
div.entity[name=hbactest] .content-table tfoot td[name=external] {
background-color: #F6F6F6;
border: 1px solid #DFDFDF;
color: #333333;
height: 30px;
padding: 0 0.5em;
text-align: left;
}
div.entity[name=hbactest] div.facet[name=run_test] .hbac-test-header {
height: 100px;
}
div.entity[name=hbactest] div.facet[name=run_test] .hbac-test-content {
top: 100px;
}
.hbac-test-top-panel {
position: relative;
width: 100%;
height: 50px;
margin-bottom: 20px;
}
.hbac-test-button-panel {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 130px;
padding: 10px;
border: 1px solid #C9C3BA;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #F6F6F6;
}
.hbac-test-result-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 151px;
padding: 10px;
border: 1px solid #C9C3BA;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #F6F6F6;
}
.hbac-test-navigation-buttons {
float: right;
}