Successful
\n" + - "Changed
\n" + - "Unreachable
\n" + - "Failed
\n" + - "\n"; - - event_socket = Socket({ - scope: scope, - endpoint: "job_events" - }); - - event_socket.init(); - - event_socket.on("job_events-" + job_id, function(data) { - data.event = data.event_name; - $log.debug('push event: ' + data.id); - if (event_queue.length < 100) { - event_queue.push(data); - } - else { - // if we get too far behind, clear the queue and refresh - scope.$emit('LoadJob'); - } - }); - - if (scope.removeAPIComplete) { - scope.removeAPIComplete(); - } - scope.removeAPIComplete = scope.$on('APIComplete', function() { - // process any events sitting in the queue - var url, hostId = 0, taskId = 0, playId = 0; - - function notEmpty(x) { - return Object.keys(x).length > 0; - } - - function getMaxId(x) { - var keys = Object.keys(x); - keys.sort(); - return keys[keys.length - 1]; - } - - // Find the max event.id value in memory - if (notEmpty(scope.hostResults)) { - hostId = getMaxId(scope.hostResults); - } - else if (notEmpty(scope.tasks)) { - taskId = getMaxId(scope.tasks); - } - else if (notEmpty(scope.plays)) { - playId = getMaxId(scope.plays); - } - lastEventId = Math.max(hostId, taskId, playId); - - api_complete = true; - Wait('stop'); - - DigestEvents({ - scope: scope, - queue: event_queue, - lastEventId: lastEventId - }); - - // Draw the graph - if (JobIsFinished(scope)) { - url = scope.job.related.job_events + '?event=playbook_on_stats'; - Rest.setUrl(url); - Rest.get() - .success(function(data) { - if (data.count > 0) { - LoadHostSummary({ - scope: scope, - data: data.results[0].event_data - }); - DrawGraph({ scope: scope, resize: true }); - Wait('stop'); - } - }) - .error(function(data, status) { - ProcessErrors(scope, data, status, null, { hdr: 'Error!', - msg: 'Call to ' + url + '. GET returned: ' + status }); - }); - } - else { - // Draw the graph based on summary values in memory - DrawGraph({ scope: scope, resize: true }); - } - }); - - if (scope.removeInitialDataLoaded) { - scope.removeInitialDataLoaded(); - } - scope.removeInitialDataLoaded = scope.$on('InitialDataLoaded', function() { - // Load data for the host summary table - if (!api_complete) { - ReloadHostSummaryList({ - scope: scope, - callback: 'APIComplete' - }); - } - }); - - if (scope.removePlaysReady) { - scope.removePlaysReady(); - } - scope.removePlaysReady = scope.$on('PlaysReady', function() { - // Select the most recent play, which will trigger tasks and hosts to load - var ids = Object.keys(scope.plays), - lastPlay = (ids.length > 0) ? ids[ids.length - 1] : null; - SelectPlay({ - scope: scope, - id: lastPlay, - callback: 'InitialDataLoaded' - }); - }); - - if (scope.removeLoadJobDetails) { - scope.removeLoadJobDetails(); - } - scope.removeRefreshJobDetails = scope.$on('LoadJobDetails', function(e, events_url) { - - // Call to load all the job bits including, plays, tasks, hosts results and host summary - var url = scope.job.url + 'job_plays/?order_by=id'; - - scope.tasks = {}; - scope.hostResults = []; - scope.hostResultsMap = {}; - api_complete = false; - - Rest.setUrl(url); - Rest.get() - .success( function(data) { - data.forEach(function(event, idx) { - var status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful', - start = event.started, - end, - elapsed; - if (idx < data.length - 1) { - // end date = starting date of the next event - end = data[idx + 1].started; - } - else if (JobIsFinished(scope)) { - // this is the last play and the job already finished - end = scope.job_status.finished; - } - if (end) { - elapsed = GetElapsed({ - start: start, - end: end - }); - } - else { - elapsed = '00:00:00'; - } - scope.plays[event.id] = { - id: event.id, - name: event.play, - created: start, - finished: end, - status: status, - elapsed: elapsed, - playActiveClass: '' - }; - scope.host_summary.ok += data.ok_count; - scope.host_summary.changed += data.changed_count; - scope.host_summary.unreachable += (data.unreachable_count) ? data.unreachable_count : 0; - scope.host_summary.failed += data.failed_count; - scope.host_summary.total = scope.host_summary.ok + scope.host_summary.changed + - scope.host_summary.unreachable + scope.host_summary.failed; - }); - - scope.$emit('PlaysReady', events_url); - }) - .error( function(data, status) { - ProcessErrors(scope, data, status, null, { hdr: 'Error!', - msg: 'Call to ' + url + '. GET returned: ' + status }); - }); - }); - - - if (scope.removeGetCredentialNames) { - scope.removeGetCredentialNames(); - } - scope.removeGetCredentialNames = scope.$on('GetCredentialNames', function(e, data) { - var url; - if (data.credential) { - url = GetBasePath('credentials') + data.credential + '/'; - Rest.setUrl(url); - Rest.get() - .success( function(data) { - scope.credential_name = data.name; - }) - .error( function(data, status) { - scope.credential_name = ''; - ProcessErrors(scope, data, status, null, { hdr: 'Error!', - msg: 'Call to ' + url + '. GET returned: ' + status }); - }); - } - if (data.cloud_credential) { - url = GetBasePath('credentials') + data.credential + '/'; - Rest.setUrl(url); - Rest.get() - .success( function(data) { - scope.cloud_credential_name = data.name; - }) - .error( function(data, status) { - scope.credential_name = ''; - ProcessErrors(scope, data, status, null, { hdr: 'Error!', - msg: 'Call to ' + url + '. GET returned: ' + status }); - }); - } - }); - - - if (scope.removeLoadJob) { - scope.removeLoadJob(); - } - scope.removeLoadJobRow = scope.$on('LoadJob', function() { - //Wait('start'); - // Load the job record - Rest.setUrl(GetBasePath('jobs') + job_id + '/'); - Rest.get() - .success(function(data) { - scope.job = data; - scope.job_template_name = data.name; - scope.project_name = (data.summary_fields.project) ? data.summary_fields.project.name : ''; - scope.inventory_name = (data.summary_fields.inventory) ? data.summary_fields.inventory.name : ''; - scope.job_template_url = '/#/job_templates/' + data.unified_job_template; - scope.inventory_url = (scope.inventory_name && data.inventory) ? '/#/inventories/' + data.inventory : ''; - scope.project_url = (scope.project_name && data.project) ? '/#/projects/' + data.project : ''; - scope.job_type = data.job_type; - scope.playbook = data.playbook; - scope.credential = data.credential; - scope.cloud_credential = data.cloud_credential; - scope.forks = data.forks; - scope.limit = data.limit; - scope.verbosity = data.verbosity; - scope.job_tags = data.job_tags; - - // In the case that the job is already completed, or an error already happened, - // populate scope.job_status info - scope.job_status.status = (data.status === 'waiting' || data.status === 'new') ? 'pending' : data.status; - scope.job_status.started = data.started; - scope.job_status.status_class = ((data.status === 'error' || data.status === 'failed') && data.job_explanation) ? "alert alert-danger" : ""; - scope.job_status.finished = data.finished; - scope.job_status.explanation = data.job_explanation; - - if (data.started && data.finished) { - scope.job_status.elapsed = GetElapsed({ - start: data.started, - end: data.finished - }); - } - else { - scope.job_status.elapsed = '00:00:00'; - } - if ($rootScope.myInterval) { - window.clearInterval($rootScope.myInterval); - } - scope.setSearchAll('host'); - scope.$emit('LoadJobDetails', data.related.job_events); - scope.$emit('GetCredentialNames', data); - }) - .error(function(data, status) { - ProcessErrors(scope, data, status, null, { hdr: 'Error!', - msg: 'Failed to retrieve job: ' + $routeParams.id + '. GET returned: ' + status }); - }); - }); - - if (scope.removeRefreshCompleted) { - scope.removeRefreshCompleted(); - } - scope.removeRefreshCompleted = scope.$on('RefreshCompleted', function() { - refresh_count++; - if (refresh_count === 1) { - // First time. User just loaded page. - scope.$emit('LoadJob'); - } - else { - // Check if we need to redraw the group - setTimeout(function() { DrawGraph({ scope: scope, resize: true }); }, 500); - } - }); - - scope.adjustSize = function() { - var height, ww = $(window).width(); - if (ww < 1240) { - $('#job-summary-container').hide(); - $('#job-detail-container').css({ "width": "100%", "padding-right": "15px" }); - $('#summary-button').show(); - } - else { - $('.overlay').hide(); - $('#summary-button').hide(); - $('#hide-summary-button').hide(); - $('#job-detail-container').css({ "width": "58.33333333%", "padding-right": "7px" }); - $('#job-summary-container .job_well').css({ - 'box-shadow': 'none', - 'height': 'auto' - }); - $('#job-summary-container').css({ - "width": "41.66666667%", - "padding-left": "7px", - "padding-right": "15px", - "z-index": 0 - }); - setTimeout(function() { $('#job-summary-container .job_well').height($('#job-detail-container').height() - 18); }, 500); - $('#job-summary-container').show(); - } - // Detail table height adjusting. First, put page height back to 'normal'. - $('#plays-table-detail').height(150); - $('#plays-table-detail').mCustomScrollbar("update"); - $('#tasks-table-detail').height(150); - $('#tasks-table-detail').mCustomScrollbar("update"); - $('#hosts-table-detail').height(150); - $('#hosts-table-detail').mCustomScrollbar("update"); - height = $('#wrap').height() - $('.site-footer').outerHeight() - $('.main-container').height(); - if (height > 15) { - // there's a bunch of white space at the bottom, let's use it - $('#plays-table-detail').height(150 + (height / 3)); - $('#plays-table-detail').mCustomScrollbar("update"); - $('#tasks-table-detail').height(150 + (height / 3)); - $('#tasks-table-detail').mCustomScrollbar("update"); - $('#hosts-table-detail').height(150 + (height / 3)); - $('#hosts-table-detail').mCustomScrollbar("update"); - } - // Summary table height adjusting. - height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() - - $('#hosts-summary-section .table-header').outerHeight() - - $('#summary-search-section').outerHeight() - 20; - $('#hosts-summary-table').height(height); - $('#hosts-summary-table').mCustomScrollbar("update"); - scope.$emit('RefreshCompleted'); - }; - - setTimeout(function() { scope.adjustSize(); }, 500); - - // Use debounce for the underscore library to adjust after user resizes window. - $(window).resize(_.debounce(function(){ - scope.adjustSize(); - }, 500)); - - scope.setSearchAll = function(search) { - if (search === 'host') { - scope.search_all_label = 'Host'; - scope.searchAllDisabled = false; - scope.search_all_placeholder = 'Search all by host name'; - } - else { - scope.search_all_label = 'Failures'; - scope.search_all_placeholder = 'Show failed events'; - scope.searchAllDisabled = true; - scope.search_all_placeholder = ''; - } - }; - - scope.selectPlay = function(id) { - SelectPlay({ - scope: scope, - id: id - }); - }; - - scope.selectTask = function(id) { - SelectTask({ - scope: scope, - id: id - }); - }; - - scope.toggleSummary = function(hide) { - var docw, doch, height = $('#job-detail-container').height(), slide_width; - if (!hide) { - docw = $(window).width(); - doch = $(window).height(); - slide_width = (docw < 840) ? '100%' : '80%'; - $('#summary-button').hide(); - $('.overlay').css({ - width: $(document).width(), - height: $(document).height() - }).show(); - - // Adjust the summary table height - $('#job-summary-container .job_well').height(height - 18).css({ - 'box-shadow': '-3px 3px 5px 0 #ccc' - }); - height = Math.floor($('#job-detail-container').height() * 0.5) - - $('#hosts-summary-section .header').outerHeight() - - $('#hosts-summary-section .table-header').outerHeight() - - $('#hide-summary-button').outerHeight() - - $('#summary-search-section').outerHeight() - - $('#hosts-summary-section .header').outerHeight() - - $('#hosts-summary-section .legend').outerHeight(); - $('#hosts-summary-table').height(height - 50); - $('#hosts-summary-table').mCustomScrollbar("update"); - - $('#hide-summary-button').show(); - - $('#job-summary-container').css({ - top: 0, - right: 0, - width: slide_width, - 'z-index': 2000, - 'padding-right': '15px', - 'padding-left': '15px' - }).show('slide', {'direction': 'right'}); - - setTimeout(function() { DrawGraph({ scope: scope, resize: true }); }, 500); - } - else { - $('.overlay').hide(); - $('#summary-button').show(); - $('#job-summary-container').hide('slide', {'direction': 'right'}); - } - }; - - scope.objectIsEmpty = function(obj) { - if (angular.isObject(obj)) { - return (Object.keys(obj).length > 0) ? false : true; - } - return true; - }; - - scope.HostDetailOnTotalScroll = _.debounce(function() { - // Called when user scrolls down (or forward in time). Using _.debounce - var url, mcs = arguments[0]; - scope.$apply(function() { - if (!scope.auto_scroll && scope.activeTask && scope.hostResults.length) { - scope.auto_scroll = true; - url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&'; - url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : ''; - url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : ''; - url += 'host__name__gt=' + scope.hostResults[scope.hostResults.length - 1].name + '&host__isnull=false&page_size=' + (scope.hostTableRows / 3) + '&order_by=host__name'; - Wait('start'); - Rest.setUrl(url); - Rest.get() - .success(function(data) { - data.results.forEach(function(row) { - scope.hostResults.push({ - id: row.id, - status: ( (row.failed) ? 'failed': (row.changed) ? 'changed' : 'successful' ), - host_id: row.host, - task_id: row.parent, - name: row.event_data.host, - created: row.created, - msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' ) - }); - if (scope.hostResults.length > scope.hostTableRows) { - scope.hostResults.splice(0,1); - } - }); - if (data.next) { - // there are more rows. move dragger up, letting user know. - setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop - 15) + 'px'}); }, 700); - } - scope.auto_scroll = false; - Wait('stop'); - }) - .error(function(data, status) { - ProcessErrors(scope, data, status, null, { hdr: 'Error!', - msg: 'Call to ' + url + '. GET returned: ' + status }); - }); - } - else { - scope.auto_scroll = false; - } - }); - }, 300); - - scope.HostDetailOnTotalScrollBack = _.debounce(function() { - // Called when user scrolls up (or back in time) - var url, mcs = arguments[0]; - scope.$apply(function() { - if (!scope.auto_scroll && scope.activeTask && scope.hostResults.length) { - scope.auto_scroll = true; - url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&'; - url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : ''; - url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : ''; - url += 'host__name__lt=' + scope.hostResults[0].name + '&host__isnull=false&page_size=' + (scope.hostTableRows / 3) + '&order_by=-host__name'; - Wait('start'); - Rest.setUrl(url); - Rest.get() - .success(function(data) { - data.results.forEach(function(row) { - scope.hostResults.unshift({ - id: row.id, - status: ( (row.failed) ? 'failed': (row.changed) ? 'changed' : 'successful' ), - host_id: row.host, - task_id: row.parent, - name: row.event_data.host, - created: row.created, - msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' ) - }); - if (scope.hostResults.length > scope.hostTableRows) { - scope.hostResults.pop(); - } - }); - if (data.next) { - // there are more rows. move dragger down, letting user know. - setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop + 15) + 'px' }); }, 700); - } - Wait('stop'); - scope.auto_scroll = false; - }) - .error(function(data, status) { - ProcessErrors(scope, data, status, null, { hdr: 'Error!', - msg: 'Call to ' + url + '. GET returned: ' + status }); - }); - } - else { - scope.auto_scroll = false; - } - }); - }, 300); - - scope.HostSummaryOnTotalScroll = function(mcs) { - var url; - if (!scope.auto_scroll && scope.hosts) { - url = GetBasePath('jobs') + job_id + '/job_host_summaries/?'; - url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : ''; - url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : ''; - url += 'host__name__gt=' + scope.hosts[scope.hosts.length - 1].name + '&page_size=' + (scope.hostSummaryTableRows / 3) + '&order_by=host__name'; - Wait('start'); - Rest.setUrl(url); - Rest.get() - .success(function(data) { - setTimeout(function() { - scope.$apply(function() { - data.results.forEach(function(row) { - scope.hosts.push({ - id: row.host, - name: row.summary_fields.host.name, - ok: row.ok, - changed: row.changed, - unreachable: row.dark, - failed: row.failures - }); - if (scope.hosts.length > scope.hostSummaryTableRows) { - scope.hosts.splice(0,1); - } - }); - if (data.next) { - // there are more rows. move dragger up, letting user know. - setTimeout(function() { $('#hosts-summary-table .mCSB_dragger').css({ top: (mcs.draggerTop - 15) + 'px'}); }, 700); - } - }); - }, 100); - Wait('stop'); - }) - .error(function(data, status) { - ProcessErrors(scope, data, status, null, { hdr: 'Error!', - msg: 'Call to ' + url + '. GET returned: ' + status }); - }); - } - else { - scope.auto_scroll = false; - } - }; - - scope.HostSummaryOnTotalScrollBack = function(mcs) { - var url; - if (!scope.auto_scroll && scope.hosts) { - url = GetBasePath('jobs') + job_id + '/job_host_summaries/?'; - url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : ''; - url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : ''; - url += 'host__name__lt=' + scope.hosts[0].name + '&page_size=' + (scope.hostSummaryTableRows / 3) + '&order_by=-host__name'; - Wait('start'); - Rest.setUrl(url); - Rest.get() - .success(function(data) { - setTimeout(function() { - scope.$apply(function() { - data.results.forEach(function(row) { - scope.hosts.unshift({ - id: row.host, - name: row.summary_fields.host.name, - ok: row.ok, - changed: row.changed, - unreachable: row.dark, - failed: row.failures - }); - if (scope.hosts.length > scope.hostSummaryTableRows) { - scope.hosts.pop(); - } - }); - if (data.next) { - // there are more rows. move dragger down, letting user know. - setTimeout(function() { $('#hosts-summary-table .mCSB_dragger').css({ top: (mcs.draggerTop + 15) + 'px' }); }, 700); - } - }); - }, 100); - Wait('stop'); - }) - .error(function(data, status) { - ProcessErrors(scope, data, status, null, { hdr: 'Error!', - msg: 'Call to ' + url + '. GET returned: ' + status }); - }); - } - else { - scope.auto_scroll = false; - } - }; - - scope.searchAllByHost = function() { - var nxtPlay; - if (scope.search_all_hosts_name) { - FilterAllByHostName({ - scope: scope, - host: scope.search_all_hosts_name - }); - scope.searchAllHostsEnabled = false; - } - else { - scope.search_all_tasks = []; - scope.search_all_plays = []; - scope.searchAllHostsEnabled = true; - nxtPlay = scope.plays[scope.plays.length - 1].id; - SelectPlay({ - scope: scope, - id: nxtPlay - }); - ReloadHostSummaryList({ - scope: scope - }); - } - }; - - scope.allHostNameKeyPress = function(e) { - if (e.keyCode === 13) { - scope.searchAllByHost(); - } - }; - - scope.filterByStatus = function(choice) { - var key, keys, nxtPlay; - if (choice === 'Failed') { - scope.searchAllStatus = 'failed'; - for(key in scope.plays) { - if (scope.plays[key].status === 'failed') { - nxtPlay = key; - } - } - } - else { - scope.searchAllStatus = ''; - keys = Object.keys(scope.plays); - nxtPlay = (keys.length > 0) ? keys[keys.length - 1] : null; - } - SelectPlay({ - scope: scope, - id: nxtPlay - }); - ReloadHostSummaryList({ - scope: scope - }); - //setTimeout(function() { - // SelectPlay({ scope: scope, id: scope.activePlay }); - //}, 2000); - }; - - scope.viewEvent = function(event_id) { - $log.debug(event_id); - }; - -} - -JobDetailController.$inject = [ '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath', - 'Wait', 'Rest', 'ProcessErrors', 'DigestEvents', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'SelectHost', 'FilterAllByHostName', 'DrawGraph', - 'LoadHostSummary', 'ReloadHostSummaryList', 'JobIsFinished' -]; diff --git a/awx/ui/static/js/controllers/JobStdout.js.tmp b/awx/ui/static/js/controllers/JobStdout.js.tmp deleted file mode 100644 index 8743f90df3..0000000000 --- a/awx/ui/static/js/controllers/JobStdout.js.tmp +++ /dev/null @@ -1,85 +0,0 @@ -/************************************ - * Copyright (c) 2014 AnsibleWorks, Inc. - * - * JobStdout.js - * - */ - -'use strict'; - -function JobStdoutController ($rootScope, $scope, $compile, $routeParams, ClearScope, GetBasePath, Wait, Rest, ProcessErrors, Socket) { - - ClearScope(); - - var available_height, job_id = $routeParams.id, - api_complete = false, - stdout_url, - event_socket = Socket({ - scope: $scope, - endpoint: "job_events" - }); - - Wait('start'); - - event_socket.init(); - - event_socket.on("job_events-" + job_id, function() { - if (api_complete) { - $scope.$emit('LoadStdout'); - } - }); - - if ($scope.removeLoadStdout) { - $scope.removeLoadStdout(); - } - $scope.removeLoadStdout = $scope.$on('LoadStdout', function() { - Rest.setUrl(stdout_url + '?format=json&start_line=-1000'); - Rest.get() - .success(function(data) { - if (data.content) { - $('#pre-container-content').empty().html(data.content); - } - else { - $('#pre-container-content').empty(); - } - setTimeout(function() { $('#pre-container').mCustomScrollbar("scrollTo", 'bottom'); }, 1000); - }) - .error(function(data, status) { - ProcessErrors($scope, data, status, null, { hdr: 'Error!', - msg: 'Failed to retrieve stdout for job: ' + job_id + '. GET returned: ' + status }); - }); - }); - - function resizeToFit() { - available_height = $(window).height() - $('.main-menu').outerHeight() - $('#main_tabs').outerHeight() - - $('#breadcrumb-container').outerHeight() - $('.site-footer').outerHeight() * 2; - if ($(window).width() < 768) { - available_height += 55; - } - else if ($(window).width() > 1240) { - available_height += 5; - } - $('#pre-container').height(available_height); - $('#pre-container').mCustomScrollbar("update"); - } - resizeToFit(); - - $(window).resize(_.debounce(function() { - resizeToFit(); - }, 500)); - - Rest.setUrl(GetBasePath('jobs') + job_id + '/'); - Rest.get() - .success(function(data) { - $scope.job = data; - stdout_url = data.related.stdout; - $scope.$emit('LoadStdout'); - }) - .error(function(data, status) { - ProcessErrors($scope, data, status, null, { hdr: 'Error!', - msg: 'Failed to retrieve job: ' + job_id + '. GET returned: ' + status }); - }); -} - -JobStdoutController.$inject = [ '$rootScope', '$scope', '$compile', '$routeParams', 'ClearScope', 'GetBasePath', 'Wait', 'Rest', 'ProcessErrors', 'Socket' ]; - diff --git a/awx/ui/static/less/ansible-ui.less.tmp b/awx/ui/static/less/ansible-ui.less.tmp deleted file mode 100644 index c984f0b906..0000000000 --- a/awx/ui/static/less/ansible-ui.less.tmp +++ /dev/null @@ -1,1767 +0,0 @@ -/********************************************* - * Copyright (c) 2014 AnsibleWorks, Inc. - * - * ansible-ui.css - * - * custom styles for ansible-ui - * - */ - -@active-color: #c6e5e5; -@black: #171717; -@blue: #1778c3; /* logo blue */ -@blue-link: #1778c3; -@blue-dark: #2a6496; /* link hover */ -@green: #5bb75b; -@grey: #A9A9A9; -@grey-txt: #707070; -@info: #d9edf7; /* alert info background color */ -@info-border: #bce8f1; /* alert info border color */ -@info-color: #3a87ad; -@red: #da4f49; -@red-hover: #AE3F3A; -@warning: #FF9900; -@well: #f5f5f5; /* well background color */ -@well-border: #e3e3e3; -@white: #FFF; - -@tip-background: #0088CC; -@tip-color: #fff; - -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - src: url(/static/fonts/OpenSans-Regular.ttf); -} - -@font-face { - font-family: 'Open Sans'; - font-style: bold; - font-weight: 600; - src: url(/static/fonts/OpenSans-Bold.ttf); -} - -@import "main-layout.less"; -@import "animations.less"; -@import "jquery-ui-overrides.less"; -@import "codemirror.less"; -@import "angular-scheduler.less"; -@import "log-viewer.less"; -@import "job-details.less"; -@import "jobs.less"; -@import "inventory-edit.less"; -@import "breadcrumbs.less"; -@import "stdout.less"; - - -/* Bootstrap fix that's causing a right margin to appear - whenver a modal is opened */ -body.modal-open { - margin-right: 0; -} - - -/* Helper Classes */ -.pad-right-sm { padding-right: 10px; } -.pad-left-md { padding-left: 30px; } -.pad-left-sm { padding-left: 10px; } -.pad-left-lg { padding-left: 50px; } -.normal-weight { font-weight: normal; } -.small-text { font-size: 12px; font-weight: normal; } -.no-bullets { list-style: none; } -.nowrap { white-space: nowrap; } -.capitalize { text-transform: capitalize; } -.grey-txt { color: @grey; } -.text-center { text-align: center !important; } -.cursor-pointer { cursor: pointer } - -.red-txt, -a.red-txt:visited, -a.red-txt:hover, -a.red-txt:active { - color: @red; -} - -/* Used on inventory groups/hosts lists for long names */ -.ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -blockquote { - font-size: 14px; -} - -.group-name { - display: inline-block; - width: 85%; -} - -a { - color: @blue; - text-decoration: none; -} - -a:hover, -a:focus { - color: @blue-dark; - text-decoration: none; -} - -/* Old style TB default button with grey background */ -.btn-grey { - color: #333; - background-color: #ccc; - border-color: #ccc; -} - -.btn-grey:hover { - background-color: #FFF; -} - -/* Make buttons appear to be disabled, but allow mouse events */ -.btn-disabled { - opacity: 0.35; - filter: alpha(opacity=65); - -webkit-box-shadow: none; - box-shadow: none; -} - -.btn-disabled { - cursor: not-allowed; -} - -/* Bring primary (blue) buttons in line with link colors */ -.btn-primary { - background-color: @blue; -} - -.btn-primary:hover { - background-color: @blue-dark; -} - -/* List Actions column */ -.actions { - a { - font-size: 14px; - margin-right: 12px; - } - a:last-child { - margin-right: 0; - } - a:hover { - cursor: pointer; - } - .dropdown .caret { - border-top-color: @blue; - } -} - -#home_groups_table .actions .cancel { padding-right: 3px; } - -.success-badge { - color: #ffffff; - background-color: #5cb85c; -} - -.bold-text .checkbox-inline { - font-weight: bold; -} - -/* Disable textarea re-sizing as a general rule */ -textarea { - resize: none; -} - -textarea.allowresize { - resize: both; -} - -/* Working... spinner */ -.spinny { - display: none; - position: fixed; - z-index: 2000; - width: 75px; - height: 75px; - text-align:center; - color: #eee; - background-color: @black; - border: 1px solid @grey; - border-radius: 6px; - padding-top: 10px; - - p { - padding-top: 10px; - font-size: 11px; - } -} - -.prepend-asterisk:before { - content: "\002A\00A0"; - color: @red; -} - -.subtitle { - font-size: 16px; -} - -.license-version { - font-size: 18px; - color: @grey-txt; -} - -.modal-dialog .ui-accordion .ui-accordion-content { - overflow: hidden; -} - -.overlay { - display: none; - position: absolute; - top: 0; - left: 0; - z-index: 1999; - background-color: @black; - opacity: 0; -} - -/* TB tooltip overrides */ - .popover-content { - width: 100%; - } - h3.popover-title, .popover-content, .popover-content blockquote, .popover-content a { - font-size: 12px; - } - .flyout thead> tr> th, .flyout tbody> tr> td, .flyout tbody> tr> td> a { - font-size: 12px; - } - .popover-title { - padding-top: 5px; - padding-bottom: 5px; - } - .popover { - z-index: 2000; - min-width: 200px; - max-width: 325px; - } - .popover pre { - white-space: pre-wrap; - } - .popover-footer { - font-size: 12px; - margin-top: 10px; - text-align: right; - color: @grey; - .key { - color: @white; - background-color: @grey; - padding: 0 1px 1px 1px; - border-radius: 3px; - } - } - .tooltip { - z-index: 2050; - opacity: 1.0; - } - -.alert { - margin-top: 15px; - margin-bottom: 15px; -} - -hr { - border-color: #e3e3e3; -} - -.help { - display: inline-block; -} - -.help-auto-off { - margin-top: 15px; - margin-bottom: 15px; - margin-left: 10px; - label { - font-weight: normal; - } -} - -/* help collapse */ - h4.panel-title { - font-size: 14px; - } - - .panel-heading:hover { - cursor: pointer; - } - - .panel-default>.panel-heading .collapse-help-icon { - color: @grey; - } - - .collapsible-help { - margin-top: 20px; - margin-bottom: 20px; - dl { - margin-left: 15px; - } - dt { - margin-top: 15px; - } - } - -th.actions-column, -td.actions { - white-space: nowrap; -} - -.tab-content { - padding-top: 15px; -} - -.btn .caret { - border-top-color: #696969; -} - -.btn-light { - color: #333; - background-color: #ddd; - border-color: #ddd; -} - -.refresh-grp { - display: inline-block; - text-align: right; - margin-left: 0; - margin-top: 0; - padding: 0; - line-height: normal; - - .refresh-msg { - font-size: 10px; - } -} - -.btn-light:hover { - color: #333; - background-color: #ccc; - border-color: #ccc; -} - -.ssh-key-field, .mono-space { - font-family: Fixed, monospace; -} - -/* Make a div or any element behave like pre. Use in conjunction with .mono-space */ -.pre { - white-space: pre; -} - - -dd { - margin-left: 15px; -} - -/* Use code-breakable in pop-over text to indent and wrap code segments */ - -.code-breakable { - padding-left: 10px; - word-wrap: break-word; -} - -.break { - word-break: break-all; -} - -.login-alert { - margin-bottom: 25px; - font-size: 14px; - font-weight: normal; - color: @blue-link; - text-align: center; -} - -.controls { - min-height: 15px; -} - -/* The sticky footer: http://css-tricks.com/snippets/css/sticky-footer, with less variables */ - @footer-height: 68px; - @footer-margin: 22px; - @push-height: (@footer-height + @footer-margin); - #wrap { - min-height: 100%; - height: 100%; - height: auto !important; - margin-bottom: -(@push-height); - } - #wrap:after { - content: ""; - display: block; - } - - #wrap:after { - height: @push-height; - } - - .site-footer { - height: @footer-height; - margin-top: @footer-margin; - } - - -#navbar-container, .main-menu { - width: 100%; - background-color: @black; -} - -.text-justify { - text-align: justify; -} - -.help-link, -.help-link:active, -.help-link:visited, -.ui-widget-content a.help-link, -.ui-widget-content a.help-link:active, -.ui-widget-content a.help-link:visited { - color: @grey; - text-decoration: none; -} - -.help-link:hover, -.ui-widget-content a.help-link:hover { - color: @black; - text-decoration: none; -} - -.navbar.site-footer { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin-bottom: 0; - background-color: @black; -} - -.site-footer { - color: @grey; - text-align: center; - padding-top: 10px; - padding-bottom: 10px; - font-size: 12px; - - a, - a:active, - a:visited { - color: @grey; - } - - a:hover { - color: @blue; - } - - .help { - padding-top: 14px; - font-weight: normal; - } - - .logo { - text-align: right; - } - - .logo img { - max-width: 46px; - } - - .copyright { - padding-top: 6px; - font-weight: normal; - text-align: center; - } -} - -.modal-header.login-header { - text-align: center; - background-color: @black; - border-left: 1px solid #686868; - border-right: 1px solid #686868; - border-top: 1px solid #686868; - border-top-left-radius: 6px; - border-top-right-radius: 6px; -} - -.login-header img { - width: 327px; -} - -.form-title { - display: inline-block; - width: 100%; - vertical-align: middle; - font-weight: bold; - padding-left: 15px; - margin-bottom: 10px; -} - -.form-group { - margin-bottom: 25px; -} - -.form-cancel { - float: right; - margin-right: 10px; -} - -.form-title-hr { - margin-bottom: 20px; -} - -.form-horizontal .buttons { - margin-top: 25px; -} - -.label-text { - padding-right: 10px; -} - -#group_form #group_tabs { - margin-top: 25px; -} - -/* Outline required fields in Red when there is an error */ - .form-control.ng-dirty.ng-invalid, .form-control.ng-dirty.ng-invalid:focus { - border-color: rgba(204, 0, 0, 0.8); - outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(204, 0, 0, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(204, 0, 0, 0.6); - } - -/* For some reason TB 3 RC1 does not provide an input-mini */ - -.input-mini { - height: 26px; - padding: 3px 8px; - font-size: 12px; - border-radius: 3px; -} - -.error { - margin-top: 5px; - font-size: 12px; - line-height: normal; - color: @red; -} - -.xsmall { - font-size: 12px; -} - -.note { - padding-top: 15px; - font-size: 12px; -} - -legend { - font-size: medium; - font-weight: bold; -} - -.navigation { - margin: 15px 0 15px 0; -} - -.page-number { - display: inline-block; - padding: 0; - margin: 0; -} - -.page-number-small { - display: inline-block; - margin-left: 10px; - font-size: 11px; -} - -/* Pagination */ - .page-label { - font-size: 12px; - margin-top: 0; - text-align: right; - } - - .pagination { - margin-top: 0; - margin-bottom: 7px; - } - - .pagination > li > a { - padding: 3px 6px; - font-size: 10px; - } - - .modal-body { - .pagination { - margin-top: 15px; - margin-bottom: 0; - } - .pagination > li > a { - border: none; - padding-top: 0; - padding-bottom: 0; - } - .pagination > .active > a { - background-color: #fff; - color: #428bca; - border-color: none; - border: 1px solid #428bca; - } - } - -.footer-navigation { - margin: 10px 0 10px 0; -} - -.lookup-navigation { - margin: 15px 0 0 0; - /*padding-top: 20px;*/ - -} - -#lookup-modal-dialog { - overflow-x: hidden; - .instructions { - margin-top: 0; - margin-bottom: 20px; - } -} - -.related-footer { - margin: 10px 0 0 0; -} - -select.page-size { - width: 65px; - height: 24px; - font-size: 10px; -} - -.page-size-label { - margin-left: 15px; - font-size: 10.5px; - font-weight: normal; -} - -.accordion-heading { - font-weight: bold; - color: @blue-link; -} - -.accordion-heading i { - margin-right: 5px; -} - -.status-actions { - display: inline-block; - height: 25px; -} - -.status-spin { - display: inline-block; - margin-left: 15px; - font-size: 22px; - vertical-align: middle; -} - -/* Search Widget */ - - .search-widget label { - display: inline-block; - padding-right: 15px; - vertical-align: middle; - } - - #search_value_input { - padding-right: 25px; - } - - .search-reset-start { - color: @grey; - float: right; - position: relative; - top: -25px; - left: -10px; - z-index: 10; - } - - .search-reset-start:hover { - cursor: pointer; - color: @black; - } - - .ui-widget-content a.search-reset-start { - color: @grey; - } - -/* breadcrumbs */ -.nav-path { - padding: 5px 0 10px 0; - margin-right: 2px; - margin-bottom: 15px; - font-size: 14px; - font-weight: bold; - background-color: #f5f5f5; - border: 1px solid #d8d8d8; - border-radius: 6px; - box-shadow: 3px 3px 4px 0 #808080; - - .breadcrumb { - display: inline-block; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - margin-bottom: 0; - margin-left: 10px; - } - - .dropdown { - display: inline-block; - margin-right: 0; - paddding-right: 0; - - .toggle, .toggle:visited, .toggle:hover, .toggle:active { - color: @black; - } - - li a.active { - color: @grey; - } - - .crumb-icon { - font-size: 12px; - } - } -} - -.actions .dropdown { - display: inline-block; -} - -/* Display drop-down menus on hover. Remove margin between toggle link - and menu, allowing smooth mouse movement between toggle and menu - - http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click -*/ - - .dropdown-toggle:hover .dropdown-menu, .dropdown:hover .dropdown-menu { - display: block; - } - - .dropdown-menu li:hover { - visibility: visible; - } - - .dropdown-menu { - margin-top: 0; - z-index: 200; - } - -/* end */ - - -.greeting { - padding-right: 22px; -} - -.breadcrumb .active { - color: @black; -} - -.nav-tabs > li > a { - font-weight: bold; -} - -input[type="text"].field-mini-height { - height: 12px; - font-size: 10.5px; -} - -select.field-mini-height { - height: 22px; - font-size: 10.5px; -} - -.ask-checkbox { - margin-left: 10px; -} - -.no-padding { - padding: 0; - margin: 0; -} - -input[type="checkbox"].checkbox-no-label { - margin-top: 10px; -} - -.checkbox-group { - .radio-inline + .radio-inline, - .checkbox-inline + .checkbox-inline { - margin-left: 0; - } - .checkbox-inline, .radio-inline { - margin-right: 10px; - } -} - -.checkbox-options { - font-weight: normal; - padding-right: 20px; -} - -/* Display list actions next to search widget */ -.list-actions { - text-align: right; - margin-bottom: 10px; - - button { - margin-left: 4px; - } - - .fa-lg { - vertical-align: -8%; - } -} - -.jqui-accordion { - .list-actions { - margin: 0; - } - /*.list-wrapper { - background-color: @well; - padding: 10px; - border-radius: 4px; - border: 1px solid @well-border; - }*/ - .ui-accordion-content { - padding-left: 15px; - padding-right: 15px; - } - .page-label { - margin-top: 5px; - } -} - -#home-list-actions { - margin-bottom: 15px; -} - -/* End Display list actions */ - - -/* Enable table-hover to work when table is in a well */ - -.table-hover tbody tr:hover > td, -.table-hover tbody tr:hover > th { - background-color: #fff; -} - -.table-hover-inverse tbody tr:hover > td, -.table-hover-inverse tbody tr:hover > th { - background-color: @active-color; -} - -.table > thead > tr > td.success, -.table > tbody > tr > td.success, -.table > tfoot > tr > td.success, -.table > thead > tr > th.success, -.table > tbody > tr > th.success, -.table > tfoot > tr > th.success, -.table > thead > tr.success > td, -.table > tbody > tr.success > td, -.table > tfoot > tr.success > td, -.table > thead > tr.success > th, -.table > tbody > tr.success > th, -.table > tfoot > tr.success > th { - background-color: @active-color; -} -.table-hover > tbody > tr > td.success:hover, -.table-hover > tbody > tr > th.success:hover, -.table-hover > tbody > tr.success:hover > td, -.table-hover > tbody > tr.success:hover > th { - background-color: @active-color; -} - -.table-summary thead > tr > th, -.table-summary tbody > tr > th, -.table-summary tfoot > tr > th, -.table-summary thead > tr > td, -.table-summary tbody > tr > td, -.table-summary tfoot > tr > td { - border-top: 1px solid #ccc; -} - -.table-summary thead > tr > th { - border-bottom: 1px solid #ccc; -} - -/* Table without row borders */ - -.table-no-border thead > tr > th, -.table-no-border tbody > tr > th, -.table-no-border tfoot > tr > th, -.table-no-border thead > tr > td, -.table-no-border tbody > tr > td, -.table-no-border tfoot > tr > td { - border-top: none; -} - -/* Less padding on .table-condensed */ -.table-condensed>tbody>tr>td, -.table-condensed>thead>tr>th { - padding-top: 3px; - padding-bottom: 3px; -} - -/* Table info rows */ - -.loading-info { - color: @grey-txt; - font-weight: normal; - padding: 15px 0; -} - -/* Status Icons */ - - .license-expired, - .license-invalid, - .icon-failures-true, - .active-failures-true a, - .active-failures-true a:active, - .job-failed, - .job-error { - color: #da4f49; - } - - .icon-failures-true a:hover { - color: @red; - } - - .job-failures-true { - padding-top: 5px; - color: #da4f49; - } - - .job-event-status, - .license-status { - padding-top: 5px; - } - - - .job-new, - .license-valid, - .job-success, - .job-successful { - color: @green; - } - - .icon-job-active:before, - .icon-job-running:before, - .icon-job-success:before, - .icon-job-successful:before, - .icon-job-changed:before, - .icon-job-ok:before { - content: "\f111"; - } - - .icon-job-stopped:before, - .icon-job-error:before, - .icon-job-failed:before, - .icon-job-canceled:before, - .icon-job-unreachable:before { - content: "\f06a"; - } - - .icon-job-pending:before, - .icon-job-waiting:before, - .icon-job-new:before, - .icon-job-none:before, - .icon-job-skipped:before, - .icon-job-no-matching-hosts:before { - content: "\f10c"; - } - - .icon-job-active, - .icon-job-running, - .icon-job-success, - .icon-job-successful, - .icon-job-ok { - color: @green; - } - - .icon-job-running { - .pulsate(); - } - - .icon-job-changed, - .job-changed { - color: @warning; - } - - .icon-job-stopped, - .icon-job-error, - .icon-job-failed, - .icon-job-canceled, - .icon-job-unreachable { - color: @red; - } - - .icon-job-none, - .icon-job-pending, - .icon-job-waiting, - .icon-job-new, - .icon-job-skipped, - .icon-job-no-matching-hosts { - color: @grey; - opacity: 0.45; - } - - .icon-schedule-enabled-true:before { - content: "\f04d"; - } - - .icon-schedule-enabled-false:before { - content: "\f04b"; - } - - .icon-socket-ok:before { - content: "\f111"; - color: @green; - } - .icon-socket-error:before { - content: "\f111"; - color: @red; - } - .icon-socket-connecting:before { - content: "\f042"; - color: @warning; - } - - .badge { - padding: 2px 3px 3px 4px; - font-size: 10px; - font-weight: normal; - line-height: 1; - } - -/* job_events page */ - - #jobevents_table { - div.return-code { - display: inline-block; - margin-left: 10px; - } - textarea { - white-space: pre-wrap; - resize: vertical; - } - } - - #password-modal .alert-info { - margin-top: 0; - margin-bottom: 25px; - } - -/* Inventory job status badge */ - .failures-true { - background-color: @red; - color: #fff; - } - - .failures-false { - background-color: @green; - color: #fff; - } - -/* Cloud inventory status. i.e. inventory_source.status values */ - - .icon-cloud-na:before, - .icon-cloud-never:before, - .icon-cloud-updating:before, - .icon-cloud-running:before, - .icon-cloud-successful:before, - .icon-cloud-pending:before, - .icon-cloud-failed:before, - .icon-cloud-canceled:before, - .icon-cloud-error:before { - content: "\f0c2"; - } - - /*.icon-cloud-failed:before, - .icon-cloud-error:before { - content: "\f06a"; - }*/ - - .icon-cloud-na, - .icon-cloud-never, - a.icon-cloud-na:hover, - a.icon-cloud-never:hover { - color: @grey; - } - - .icon-cloud-updating, - .icon-cloud-running, - .icon-cloud-successful, - .icon-cloud-pending, - a.icon-cloud-updating:hover, - a.icon-cloud-successful:hover { - color: @green; - } - - .icon-cloud-failed, - .icon-cloud-error, - .icon-cloud-canceled, - a.icon-cloud-failed:hover { - color: @red; - } - - .icon-cloud-updating, - .icon-cloud-running, - .icon-cloud-pending { - .pulsate(); - } - - .icon-enabled-true:before { - content: "\f046"; - } - - .icon-enabled-true { - color: @green; - width: 14px; - - } - .icon-enabled-false:before { - content: "\f096"; - } - - .icon-enabled-false{ - color: @red; - width: 14px; - } - -/* Inventory cloud sourced? indicator */ - .icon-cloud-true:before { - content: "\f111"; - } - - .icon-cloud-false:before { - content: "\f111"; - } - - .icon-cloud-true { - color: @green; - } - - .icon-cloud-false { - color: @grey; - } -/* end */ - - .field-success { - color: #5bb75b; - } - - .field-success input { - border-color: #5bb75b; - } - - .field-failure { - color: @red; - } - - .field-failure input { - border-color: @red; - } - - .field-badge { - font-size: 12px; - margin-right: 3px; - } - - .license-warning, - .license-demo { - color: @warning; - } - - .job-detail-status { - display: inline-block; - margin-top: 5px; - font-size: 15px; - } - - /*.form-items .search-widget { - margin-top: 15px; - }*/ - - .form-items .item-count { - display: inline-block; - margin-top: 25px; - font-size: small; - } - - .child-event a { - color: @black; - cursor: default; - } - /* Padding levels used on job events and inventory groups */ - .level { display: inline-block; } - .level-1 { padding-left: 15px; } - .level-2 { padding-left: 30px; } - .level-3 { padding-left: 45px; } - .level-4 { padding-left: 60px; } - .level-5 { padding-left: 75px; } - .level-6 { padding-left: 90px; } - .level-7 { padding-left: 105px; } - .level-8 { padding-left: 120px; } - .level-9 { padding-left: 135px; } - .level-10 { padding-left: 150px; } - - .level-3-detail { - padding-left: 80px; - } - - #job_events .control-group { - margin-top: 0; - margin-bottom: 10px; - } - -/* End Jobs Page */ - - -/* License Accordion */ - #license-collapse .ui-accordion-content { - overflow: hidden; - } - -/* Inventory nav links */ - .navigation-links { - - padding: 0; - margin-top: -10px; - - a { - margin-right: 15px; - } - - a:last-child { - margin-right: 20px; - } - } - -/* Dashboard */ - #home #container1.col-lg-6, - #home #container3.col-lg-6 { - padding-right: 7px; - } - - #home #container2.col-lg-6, - #home #container4.col-lg-6 { - padding-left: 7px; - } - - -/* Inventory Edit */ - - #groups-container.col-lg-6 { - padding-right: 7px; - } - - #hosts-container.col-lg-6 { - padding-left: 7px; - padding-right: 17px; - } - - #groups-container .well, - #hosts-container .well { - padding: 8px; - margin-bottom: 0; - } - - #inventories_table i[class*="icon-job-"], - #home_groups_table i[class*="icon-job-"] { - margin-left: 10px; - } - - .selected { - font-weight: bold; - color: @blue-dark; - } - - .inventory-title { - font-size: 16px; - font-weight: bold; - } - - .active-row { - background-color: @white; - border-bottom: 1px solid #ddd; - border-right: 1px solid #ddd; - } - - #groups_table .actions .cancel { padding-right: 2px; } - - .node-toggle, .node-no-toggle { - /* also used on job evetns */ - float: none; - padding-top: 3px; - padding-left: 0; - margin-right: 5px; - margin-left: 0; - } - - .node-no-toggle { - opacity: .30; - } - - .draggable-clone { - opacity: .60; - font-weight: bold; - /*z-index: 2000; - overflow: visible; - whitespace: wrap; - text-overflow: clip;*/ - } - - .droppable-hover { - background-color: @info; - color: @info-color; - padding: 6px; - border: 1px solid @info-border; - border-radius: 4px; - /*overflow: visible; - whitespace: wrap; - text-overflow: clip;*/ - } - - #group-delete-dialog .help-container, - #password-modal .help-container { - .help-link, - .help-link:active, - .help-link:visited { - color: @blue-link; - } - - .help-link:hover { - color: @blue-dark; - } - } - -// Inventory edit dialog, source form, ec2 -#source_form.squeeze .form-group { - margin-bottom: 10px; -} - -.disabled { - color: @grey; -} - -a.disabled:hover { - color: @grey; - cursor: not-allowed; -} -a.btn-disabled:hover { - cursor: not-allowed; -} - -/* Variable Editing */ - .parse-selection { - display: inline-block; - margin: 5px 0 8px 0; - font-size: 12px; - line-height: normal; - } - - .parse-selection input { - margin-left: 5px; - } - - .parse-select .parse-label { - margin-left: 3px; - } - - .external-editor-link { - display: inline-block; - margin-left: 20px; - } - -.slider { - display: inline-block; - width: 100px; - margin: 0 10px; - vertical-align: middle; -} - -/* Sort link styles */ - -.list-header:hover { - cursor: pointer; -} - -.list-header i { - margin-left: 10px; -} - -.list-header .icon-sort { - color: #ccc; -} - -.list-header .icon-sort-down, -.list-header .icon-sort-up { - color: @black; -} - -/* job_events syles */ - -#jobevents_table .actions i { - padding-top: 0; - margin-right: 0; -} - -tr td button i { - padding-top: 0; - margin-right: 0; -} - -.event-form { - margin-top: 10px; - margin-bottom: 5px; - - label { - font-weight: normal; - } -} - -.event-detail-host { - padding-top: 10px; - padding-bottom: 5px; -} - -.form-section-title { - width: 100%; - margin-top: 0; - margin-bottom: 10px; - font-weight: bold; - border-bottom: 1px solid #d8d8d8; -} - -.modal-backdrop, -.modal-backdrop.fade.in { - opacity: 0.6; - filter: alpha(opacity=60); -} - -.modal-body .ui-accordion .ui-accordion-content { - padding: 10px; -} - -/* overrides to TB modal */ - -.modal-header { - padding: 15px 10px; - color: #2078be; - border-bottom: 1px solid #eee; - -webkit-border-top-right-radius: 3px; - -moz-border-top-right-radius: 3px; - border-top-right-radius: 3px; - -webkit-border-top-left-radius: 3px; - -moz-border-top-left-radius: 3px; - border-top-left-radius: 3px; -} - -.modal { - border: 1px solid @black; -} - -#alert-modal, #alert-modal2 { - z-index: 2100; -} - -.close { - color: @grey; - opacity: .7; - filter: alpha(opacity=70); -} - -.modal-header h3 { - margin: 0; - font-size: 22px; - font-weight: bold; - text-rendering: optimizeLegibility; -} - -.modal-body { - padding-top: 30px; -} - -#prompt-modal .modal-body { - padding-bottom: 30px; -} - -.skinny-modal .modal-body { - padding: 5px 10px 0 10px; -} - -/* form navigation */ -.navigation-buttons { - height: 40px; -} - - -/* PW progress bar */ -.pw-progress { - margin-top: 10px; - - li { - line-height: normal; - margin-bottom: 10px; - } - ul:last-child { - margin-top: 10px; - } - -} - -/* Home page */ - -.failed-column { - a:link, a:visited { - color: @red; - } - a:hover { - color: @red-hover; - } -} - -/* Help modal dialog */ - -#help-modal { - overflow: hidden; - padding: 10px; - - img { - max-width: 450px; - margin-top: 15px; - margin-bottom: 15px; - border: 1px solid @grey; - box-shadow: 3px 3px 5px 0 @grey; - } -} - -#help-modal .img-container { - width: 100%; - text-align: center; -} - -.help-box { - width: 100%; - margin-top: 15px; - border-radius: 6px; - padding: 8px; - color: @grey-txt; - font-size: 14px; - } - - -/* Activity Stream Widget */ - - #stream-container { - display: none; - border-radius: 8px; - z-index: 20; /* has to be greater than tree selector */ - - .nav-path { - margin-bottom: 15px; - margin-top: 5px; - } - } - - #stream-content { - border: 1px solid @grey; - border-radius: 8px; - padding: 8px; - - h5 { - margin-top: 0; - margin-bottom: 20px; - } - } - -/* job stdout */ - - #pre-container { - overflow: auto; - width: 100%; - border-radius: 4px; - margin: 0; - } - - -/* ng-cloak directive */ - -[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { - display: none !important; -} - - -/* Large desktop */ - -@media (min-width: 1200px) { - - .delete-btn { - /* Used on job and project page to make cancel and delete buttons have an equal width */ - width: 60px; - } - - .label-text { - text-align: right; - } - -} - -@media (min-width: 768px) and (max-width: 1199px) { - - .level-1, - .level-2, - .level-3, - .level-4, - .level-5, - .level-6, - .level-7, - .level-8, - .level-9, - .level-10, - .level-3-detail { - padding-left: 0; - } - - .list-actions button, .list-actions .checkbox-inline { - margin-top: 10px; - } - - .label-text { - text-align: left; - } - - .group-name { - width: 80%; - } - - #groups-container.col-lg-6 { - padding-right: 15px; - } - - #hosts-container.col-lg-6 { - margin-top: 15px; - padding-left: 15px; - padding-right: 15px; - .well { - margin-bottom: 0; - } - } - -} - - -/* Landscape phone to portrait tablet */ - -@media (max-width: 767px) { - - /* The sticky footer: http://css-tricks.com/snippets/css/sticky-footer, with less variables */ - @footer-height: 140px; - @footer-margin: 15px; - @push-height: (@footer-height + @footer-margin); - #wrap { - min-height: 100%; - height: 100%; - height: auto !important; - margin-bottom: -(@push-height); - } - #wrap:after { - content: ""; - display: block; - } - #wrap:after { - height: @push-height; - } - .site-footer { - height: @footer-height; - margin-top: @footer-margin; - padding-top: 5px; - padding-bottom: 5px; - .logo { - text-align: center; - padding-top: 10px; - margin-bottom: 10px; - } - } - - /* Job events */ - - .level-1, - .level-2, - .level-3, - .level-4, - .level-5, - .level-6, - .level-7, - .level-8, - .level-9, - .level-10, - .level-3-detail { - padding-left: 0; - } - - table { - word-wrap: break-word; - table-layout: fixed; - } - - th.actions-column, - td.actions { - white-space: normal; - } - - td.actions .btn { - width: 75px; - margin-bottom: 5px; - } - - .list-actions button, .list-actions .checkbox-inline { - margin-top: 10px; - } - - .group-name { - width: 80%; - } - - .label-text { - text-align: left; - } - - .list-action-label { - display: none; - } - - #groups-container.col-lg-6 { - padding-right: 15px; - } - - #hosts-container.col-lg-6 { - margin-top: 15px; - padding-left: 15px; - padding-right: 15px; - } - -}