mirror of
https://github.com/ansible/awx.git
synced 2026-02-15 10:10:01 -03:30
78baabf676
This PR consists of the restyling for the Job Details page, specifically for the details panel and for the events summary panel. It includes, but is not limited to changes to the tables, icons, status representations, expendables panels, positioning on screen, the search bars, the toggles, and the pie chart. I also added a CodeMirror instance for the Results panel as a follow up to my last PR. Remaining items: Responsiveness is the main one, a lot of JS side styling was done on the job detail page to make it fit on one screen. I'll need to have a deeper dive with UX to figure out what we want to do when this page is displayed on smaller browsers. I also have not gotten to the stdout out for htis page.
355 lines
6.6 KiB
Plaintext
355 lines
6.6 KiB
Plaintext
/*********************************************
|
|
* Copyright (c) 2015 Ansible, Inc.
|
|
*
|
|
* lists.less
|
|
*
|
|
* custom styles for generated lists
|
|
*
|
|
*/
|
|
|
|
@import "awx/ui/client/src/shared/branding/colors.default.less";
|
|
|
|
|
|
table, tbody {
|
|
border-collapse: separate !important;
|
|
}
|
|
|
|
.List-well {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.List-table{
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.List-tableHeader{
|
|
height: 30px;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
color: @list-header-txt;
|
|
background-color: @list-header-bg;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
border-bottom-width:0px!important;
|
|
}
|
|
|
|
.List-tableHeader:first-of-type {
|
|
border-top-left-radius: 5px;
|
|
}
|
|
|
|
.List-tableHeader:last-of-type {
|
|
border-top-right-radius: 5px;
|
|
text-align: right;
|
|
}
|
|
|
|
.List-tableHeaderSort {
|
|
color: @list-header-icon;
|
|
}
|
|
|
|
.List-tableRow {
|
|
height: 40px;
|
|
font-size: 14px;
|
|
color: @list-item;
|
|
}
|
|
|
|
.List-tableRow--selected,
|
|
.List-tableRow--selected > :first-child {
|
|
border-left: 5px solid @list-row-select-bord;
|
|
}
|
|
|
|
.List-tableRow--selected > :first-child {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.List-tableRow--evenRow {
|
|
background-color: @list-alt-item-bg;
|
|
}
|
|
|
|
.List-tableCell {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
border-top:0px!important;
|
|
}
|
|
|
|
.List-actionButtonCell {
|
|
padding-top:5px;
|
|
padding-right: 15px;
|
|
display:flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.List-actionButton {
|
|
font-size: 16px;
|
|
height: 30px;
|
|
min-width: 30px;
|
|
color: @list-action-icon;
|
|
background-color: @list-actn-bg;
|
|
border: none;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.List-actionButton:hover {
|
|
background-color: @list-actn-bg-hov !important;
|
|
color: @list-actn-icn-hov;
|
|
}
|
|
|
|
.List-actionButton--delete:hover {
|
|
background-color: @list-actn-del-bg-hov !important;
|
|
}
|
|
|
|
.List-actionButton + .List-actionButton {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
/* -- Pagination -- */
|
|
.List-pagination {
|
|
margin-top: 20px;
|
|
font-size: 12px;
|
|
color: @list-pagin-text;
|
|
text-transform: uppercase;
|
|
height: 22px;
|
|
display: flex;
|
|
}
|
|
|
|
.List-paginationPagerHolder {
|
|
display: flex;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.List-paginationPager {
|
|
display: flex;
|
|
}
|
|
|
|
.List-paginationPager--pageof {
|
|
line-height: 22px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.List-paginationPager--item {
|
|
border-color: @list-pagin-bord;
|
|
}
|
|
|
|
.List-paginationPager--active {
|
|
border-color: @list-pagin-bord-act!important;
|
|
background-color: @list-pagin-bg-act!important;
|
|
}
|
|
|
|
.List-paginationItemsOf {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.List-header {
|
|
display: flex;
|
|
height: 34px;
|
|
align-items: center;
|
|
}
|
|
|
|
.List-title {
|
|
align-items: center;
|
|
flex: 1 0 auto;
|
|
display: flex;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.List-titleBadge {
|
|
font-size: 11px;
|
|
font-weight: normal;
|
|
padding: 1px 10px;
|
|
height: 14px;
|
|
margin: 3px 0;
|
|
background-color: @list-title-badge;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.List-titleText {
|
|
color: @list-title-txt;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.List-actions {
|
|
justify-content: flex-end;
|
|
display: flex;
|
|
margin-top: -10px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.List-auxAction {
|
|
justify-content: flex-end;
|
|
display: flex;
|
|
}
|
|
|
|
.List-auxActionStream {
|
|
width: 175px;
|
|
}
|
|
|
|
.List-buttonSubmit {
|
|
background-color: @submit-button-bg;
|
|
color: @submit-button-text;
|
|
}
|
|
|
|
.List-buttonSubmit:hover,
|
|
.List-buttonSubmit:focus {
|
|
color: @submit-button-text;
|
|
background-color: @submit-button-bg-hov;
|
|
}
|
|
|
|
.List-buttonDefault {
|
|
background-color: @btn-bg;
|
|
color: @btn-txt;
|
|
border-color: @btn-bord;
|
|
}
|
|
|
|
.List-buttonDefault:hover,
|
|
.List-buttonDefault:focus {
|
|
background-color: @btn-bg-hov;
|
|
color: @btn-txt;
|
|
}
|
|
|
|
.List-searchDropdown {
|
|
border-top-left-radius: 5px!important;
|
|
border-bottom-left-radius: 5px!important;
|
|
height: 34px!important;
|
|
border-color: @default-second-border;
|
|
color: @default-icon;
|
|
background-color: @default-bg;
|
|
border-right: none;
|
|
}
|
|
|
|
.List-searchDropdown:focus,
|
|
.List-searchDropdown:active,
|
|
.List-searchDropdown.active
|
|
{
|
|
color: @default-icon;
|
|
background-color: @default-tertiary-bg;
|
|
}
|
|
|
|
.List-searchDropdown:hover {
|
|
background-color: @default-tertiary-bg;
|
|
color: @default-icon;
|
|
}
|
|
|
|
.List-searchDropdownCarat {
|
|
border-top-color: @default-icon!important;
|
|
}
|
|
|
|
.List-searchInput {
|
|
background-color: @list-srch-inpt-bg!important;
|
|
font-size: 14px!important;
|
|
color: @list-srch-inpt-txt!important;
|
|
border-color: @list-srch-inpt-bord!important;
|
|
border-radius: 0px 5px 5px 0px!important;
|
|
padding-left: 15px!important;
|
|
height: 34px!important;
|
|
padding-right: 45px!important;
|
|
font-family: 'Open Sans', sans-serif;
|
|
}
|
|
|
|
.List-searchInput:placeholder-shown {
|
|
color: @list-srch-inpt-ph-txt!important;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.List-searchInput:focus {
|
|
border-color: @list-srch-inpt-focus!important;
|
|
}
|
|
|
|
.List-searchInputIcon {
|
|
height: 32px;
|
|
width: 32px;
|
|
border-left: 1px solid @list-srch-inpt-bord;
|
|
color: @list-srch-btn-icon!important;
|
|
float: right;
|
|
position: relative;
|
|
top: -33px;
|
|
left: -2px;
|
|
z-index: 10;
|
|
font-size: 16px;
|
|
background-color: @list-srch-btn-bg;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-top-right-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
|
|
.List-searchInputIcon:hover {
|
|
cursor: pointer;
|
|
background-color: @list-srch-btn-hov-bg;
|
|
color: @list-srch-btn-icon;
|
|
}
|
|
|
|
.List-searchNoResults {
|
|
color: @default-interface-txt;
|
|
}
|
|
|
|
.List-noItems {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 200px;
|
|
border-radius: 5px;
|
|
border: 1px solid @list-no-items-bord;
|
|
background-color: @list-no-items-bg;
|
|
color: @list-no-items-txt;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.List-editButton--selected {
|
|
background-color: @list-actn-bg-hov !important;
|
|
color: @list-actn-icn-hov;
|
|
}
|
|
|
|
.List-searchWidget {
|
|
height: 34px;
|
|
}
|
|
|
|
.List-searchRow {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.List-staticColumn--smallStatus {
|
|
width: 25px;
|
|
padding-right: 0px!important;
|
|
}
|
|
|
|
.List-staticColumn--mediumStatus {
|
|
width: 51px;
|
|
padding-right: 0px!important;
|
|
}
|
|
|
|
.List-staticColumn--toggle {
|
|
width: 55px;
|
|
padding-right: 0px !important;
|
|
}
|
|
|
|
.List-staticColumn--schedulerTime {
|
|
max-width: 164px;
|
|
}
|
|
|
|
.List-staticColumnAdjacent {
|
|
padding-left: 10px!important;
|
|
}
|
|
|
|
.List-titleLockup {
|
|
margin-left: 4px;
|
|
margin-right: 6px;
|
|
display: inline-block;
|
|
margin-top: 0px;
|
|
padding-bottom: 2px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.List-titleLockup:before {
|
|
content: "\007C";
|
|
color: #d7d7d7;
|
|
display: block;
|
|
font-size: 13px;
|
|
}
|