diff --git a/.gitignore b/.gitignore index bc0081e4..f2d7b964 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ node_modules/ .vagrant/ .sass-cache/ _site/ -dist/ \ No newline at end of file +dist/ +package-lock.json \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index b408a52c..39fdc604 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -52,9 +52,19 @@ module.exports = function (grunt) { dest: 'images/' }] } + }, + watch: { + styles: { + files: ['**/*.less'], + tasks: ['less', 'cssmin'], + options: { + spawn: false, + } + } } }); + grunt.loadNpmTasks('grunt-contrib-watch'); // Default task(s). grunt.registerTask('default', ['clean', 'less', 'imageEmbed', 'cssmin']); }; \ No newline at end of file diff --git a/less/dark.less b/less/dark.less index b7b8d74c..4a4fd10f 100644 --- a/less/dark.less +++ b/less/dark.less @@ -1,14 +1,25 @@ @import "style"; /* Dark */ -@color-primary: #282A36; -@color-bg: #44475A; +@color-primary: #27292A; +@color-bg: #3C3F41; @color-text: lighten(@color-bg, 50%); -@color-link: #f8f8f2; +@color-link: @color-text; +@color-link-hover: #FFFFFF; @color-grey: @color-text; @color-green: #50fa7b; @color-yellow: #ffb86c; @color-red: #FF5555; -@color-white: #44475A; +@color-white: #45494A; @color-black: @color-primary; -@color-footer-bg: @color-primary; \ No newline at end of file +@color-footer-bg: @color-primary; + +@color-button: #00adff; +@color-button-active: #92aac3; +@color-button-hover: @color-button-active; + +@color-accent-light: #1E1E1E; + +@color-console-text: #FFFFFF; + +@internal-table-borde-color: @color-accent-light; \ No newline at end of file diff --git a/less/functions.less b/less/functions.less index a94e2f76..b058d7d8 100644 --- a/less/functions.less +++ b/less/functions.less @@ -7,6 +7,7 @@ @data-uri: data-uri("image/svg+xml;charset=UTF-8", '@{url-new}'); @new-uri: replace("@{data-uri}", "@{encoded-default}", "@{encoded-white}"); background-image: e(@new-uri); + content: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); } .icon(@size) { // outer mixin diff --git a/less/images.less b/less/images.less index 9aa352e1..d29a334f 100644 --- a/less/images.less +++ b/less/images.less @@ -3,22 +3,6 @@ /* Src */ -[src$='blue.png'] { - .icon-img('../images/ic_check_circle_black.svg', @color-green); -} - -[src$='red.png'] { - .icon-img('../images/ic_error_black.svg', @color-red); -} - -[src$='yellow.png'] { - .icon-img('../images/ic_warning_black.svg', @color-yellow); -} - -[src$='grey.png'], [src$='aborted.png'], [src$='nobuilt.png'], [src$='disabled.png'] { - .icon-img('../images/ic_remove_circle_black.svg', @color-grey); -} - .icon-health-80plus { .icon-img('../images/weather-sunny.svg', @color-grey); } @@ -39,40 +23,162 @@ .icon-img('../images/weather-pouring.svg', @color-grey); } -.icon-blue-anime { - .icon-img('../images/ic_autorenew_black.svg', @color-green); -} - -.icon-red-anime { - .icon-img('../images/ic_autorenew_black.svg', @color-red); +.icon-sm, +.icon-md, +.icon-lg, +.icon32x32, +.icon-xlg { + background-size: 100% 100% !important; +} + +#projectstatus, +#buildHistory, +#main-panel { + .build-icon, + .build-caption, + .job-status-blue, + .job-status-red, + .job-status-grey, + .job-status-yellow, + .job-status-nobuilt, + .job-status-aborted, + .job-status-disabled, + .job-status-blue-anime, + .job-status-red-anime, + .job-status-grey-anime, + .job-status-yellow-anime, + .job-status-nobuilt-anime, + .job-status-aborted-anime { + .icon-blue, + .icon-red, + .icon-grey, + .icon-yellow, + .icon-nobuilt, + .icon-aborted, + .icon-disabled, + .icon-blue-anime, + .icon-red-anime, + .icon-grey-anime, + .icon-yellow-anime, + .icon-nobuilt-anime, + .icon-aborted-anime, + .icon-disabled-anime { + content: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); + border-radius: 50%; + + &.icon-sm { + margin-left: 2px; + border: 6px solid; + width: 12px !important; + height: 12px !important; + } + + &.icon-md { + margin-left: 2px; + border: 9px solid; + width: 18px !important; + height: 18px !important; + } + + &.icon-lg { + margin-left: 4px; + border: 11px solid; + width: 22px !important; + height: 22px !important; + } + + &.icon-xlg { + border: 18px solid; + width: 36px!important; + height: 36px!important; + margin-bottom: 2px; + } + } + + .icon-blue { + border-color: @color-green !important; + &-anime { + border-top-color: @color-green !important; + } + } + + .icon-red { + border-color: @color-red !important; + &-anime { + border-top-color: @color-red !important; + } + } + + .icon-grey, + .icon-nobuilt, + .icon-aborted, + .icon-disabled { + border-color: @color-grey !important; + &-anime { + border-top-color: @color-black !important; + } + } + + .icon-yellow { + border-color: @color-yellow !important; + &-anime { + border-top-color: @color-yellow !important; + } + } + + .icon-blue-anime, + .icon-red-anime, + .icon-grey-anime, + .icon-yellow-anime, + .icon-disabled-anime, + .icon-aborted-anime, + .icon-nobuilt-anime { + animation: rotating 1s linear infinite; + &.icon-sm { + border: 3px solid @color-grey; + } + &.icon-md, + &.icon-lg { + border: 4px solid @color-grey; + } + &.icon-xlg { + border: 5px solid @color-grey; + margin-right: 5px; + } + } + } } -.icon-grey-anime, .icon-nobuilt-anime { - .icon-img('../images/ic_autorenew_black.svg', @color-grey); -} -.icon-yellow-anime { - .icon-img('../images/ic_autorenew_black.svg', @color-yellow); -} - -.icon-blue-anime, -.icon-red-anime, -.icon-grey-anime, -.icon-yellow-anime, -.icon-nobuilt-anime { - -webkit-animation: rotating 2s linear infinite; - animation: rotating 2s linear infinite; -} [src$='/shelve-project-icon.png'] { .icon(@size-md); .icon-img('../images/package-variant.svg', @color-grey); } -.icon-clock { +.icon-clock, +.icon-clock-anime { .icon-img('../images/ic_play_circle_outline_black.svg', @color-grey); } +.icon-clock-anime { + animation: pulse 1s infinite; +} + +@keyframes pulse { + 0% { + transform: scale(0.8); + } + + 70% { + transform: scale(1); + } + + 100% { + transform: scale(0.8); + } +} + .icon-new-package { .icon-img('../images/ic_add_circle_outline_black.svg', @color-grey); } @@ -189,6 +295,10 @@ .icon-img('../images/stop.svg', @color-grey); } +.icon-fav-inactive { + background-image: url("data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTIyLjg3OXB4IiBoZWlnaHQ9IjExNy4xODhweCIgdmlld0JveD0iMCAwIDEyMi44NzkgMTE3LjE4OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTIyLjg3OSAxMTcuMTg4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNNjQuMzk1LDEuOTY5bDE1LjcxMywzNi43OWwzOS44NTMsMy41NzVjMS43NTksMC4xNTIsMy4wNiwxLjcwMSwyLjkwNywzLjQ1OWMtMC4wNzMsMC44NTctMC40NzksMS42MDQtMS4wNzksMi4xMjkgbDAuMDAyLDAuMDAxTDkxLjY0MSw3NC4yNWw4LjkxNywzOS4wMjFjMC4zOTUsMS43MjMtMC42ODMsMy40MzktMi40MDYsMy44MzRjLTAuODgzLDAuMjAzLTEuNzYzLDAuMDE4LTIuNDY2LTAuNDQxTDYxLjQ0MSw5Ni4xOTEgTDI3LjA4NywxMTYuNzNjLTEuNTE2LDAuOTA2LTMuNDgsMC40MTItNC4zODctMS4xMDRjLTAuNDQxLTAuNzM2LTAuNTUtMS41OC0wLjM3My0yLjM1NWgtMC4wMDNsOC45MTgtMzkuMDIxTDEuMDkyLDQ3LjkyNCBjLTEuMzI5LTEuMTYzLTEuNDYzLTMuMTgzLTAuMzAxLTQuNTEyYzAuNTkxLTAuNjc2LDEuNDA1LTEuMDQyLDIuMjM1LTEuMDg3bDM5Ljc0OC0zLjU2NmwxNS43MjEtMzYuODEgYzAuNjkyLTEuNjI3LDIuNTcyLTIuMzg0LDQuMTk5LTEuNjkyQzYzLjQ5NCwwLjU5Nyw2NC4wODQsMS4yMjUsNjQuMzk1LDEuOTY5TDY0LjM5NSwxLjk2OXogTTc0Ljk2Nyw0My4wMjNMNjEuNDQxLDExLjM1MSBMNDcuOTE0LDQzLjAyM2wtMC4wMDQtMC4wMDFjLTAuNDQ4LDEuMDUxLTEuNDQ3LDEuODI2LTIuNjY1LDEuOTMybC0zNC4zMDYsMy4wNzhsMjUuODE5LDIyLjU0NWMwLjk0OSwwLjc0LDEuNDM4LDEuOTg4LDEuMTUyLDMuMjQgbC03LjY3NCwzMy41NzhsMjkuNTA2LTE3LjY0MWMwLjk4Ni0wLjYxNywyLjI3NC0wLjY3MiwzLjM0Mi0wLjAzM2wyOS41NjMsMTcuNjc0bC03LjY3My0zMy41NzhsMC4wMDMtMC4wMDIgYy0wLjI1Mi0xLjEwOSwwLjA5Ni0yLjMxOCwxLjAxMi0zLjExOWwyNS45NTUtMjIuNjY0TDc3LjgxNSw0NC45N0M3Ni42MDcsNDQuOTMyLDc1LjQ3Miw0NC4yMDgsNzQuOTY3LDQzLjAyM0w3NC45NjcsNDMuMDIzeiIvPjwvZz48L3N2Zz4=") !important; +} + [src$='/atom.gif'] { .icon(@size-md); .icon-img('../images/rss-box.svg', @color-yellow); @@ -236,20 +346,12 @@ h1 > [src$='diskusage48.png'] { .icon(@size-md); } -/* Size */ - -.icon-sm { - .icon(@size-sm); -} - -.icon-md { - .icon(@size-md); -} - -.icon-lg, .icon32x32 { - .icon(@size-lg); -} - -.icon-xlg { - .icon(@size-xl); -} +#spinner { + animation: rotating 1s linear infinite; + border: 3px solid @color-grey; + border-top-color: @color-black !important; + border-radius: 50%; + width: 20px; + margin-top: 10px; + content: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); +} \ No newline at end of file diff --git a/less/style.less b/less/style.less index bc2b3dd8..4c77133d 100644 --- a/less/style.less +++ b/less/style.less @@ -1,20 +1,20 @@ -@import 'variables'; -@import 'functions'; -@import 'images'; +@import "variables"; +@import "functions"; +@import "images"; @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,500,300); -// @font-face { -// font-family: "custom font"; -// src: url("custom font url.woff") format('woff'); -// } - * { font-family: @font-primary, sans-serif !important; } -body, table, form, td, th, p { +body, +table, +form, +td, +th, +p { color: @color-text !important; - font-size: 14px !important; + font-size: 12px !important; } body { @@ -22,30 +22,22 @@ body { background-color: @color-bg; } -a, a:hover, a:visited, a:link { +pre { + font-family: monospace !important; +} + +a, +a:hover, +a:visited, +a:link { + font-size: 12px; text-decoration: none !important; color: @color-link; &:hover { - text-decoration: underline !important; - color: @color-button-hover !important; + color: @color-link-hover !important; } } -h2 { - margin-bottom: 0px; - margin-top: 2em; - font-weight: normal; -} - -h3 { - color: #c9851d; - font-size: 3em; - font-weight: normal; -} - -#page-body { -} - #header { height: 45px; background-color: @color-primary; @@ -53,9 +45,6 @@ h3 { z-index: 1030; letter-spacing: 1px; padding: 3px; - //Custom logo - path here - //background: url('logo.png') no-repeat, @color-primary; - //background-size: auto 45px, cover; .login { top: inherit; @@ -69,31 +58,33 @@ h3 { b { font-weight: 400; } - //Custom logo - hide the default images, but retain the link - //#jenkins-home-link img { - // opacity: 0; - //} } .searchbox { padding: 2px 10px; } - #search-box { - background: darken(@color-primary, 10%); - padding: 18px 15px; - border-radius: 3px; - height: 26px; - border: 0; - box-shadow: none; - color: @color-white; - } - .icon-help { - .icon-img('../images/ic_help_outline_black.svg', @color-white); + .icon-img("../images/ic_help_outline_black.svg", @color-white); } } +select, +input, +.CodeMirror-scroll { + color: @color-text !important; + background: darken(@color-primary, 10%) !important; + border: 0 !important; + box-shadow: none !important; +} + +.build-search-row input, +#search-box { + padding: 17px 15px; + border-radius: 3px; + height: 26px; +} + #breadcrumbBar { background-color: transparent; } @@ -109,78 +100,185 @@ A.breadcrumbBarAnchor.mouseIsOverMenuSelector { #breadcrumbs { color: @color-text !important; + background-color: @color-accent-light; text-decoration: none; + border-bottom: none !important; + LI A:link, + LI A:visited { + color: @color-text !important; + } +} + +#pipeline-box .table-box { + .table-viewPort { + border: none !important; + + .stage-start .cell-box { + .stage-start-time { + background-color: transparent !important; + border: none !important; + .date { + background-color: transparent !important; + } + } + .changeset-box { + text-shadow: none !important; + } + } + + tr.totals .stage-start .cell-color { + color: @color-text !important; + } + } + + tr td { + text-shadow: none !important; + } + + td { + &.SUCCESS .cell-color .stage-wrapper { + background-color: @color-green !important; + } + &.FAILED .cell-color .stage-wrapper { + background-color: @color-red !important; + } + .cell-color { + background-color: none; + .stage-wrapper { + border: none; + color: @color-black; + div span { + opacity: 1 !important; + font-size: 1em !important; + text-shadow: none !important; + font-weight: normal !important; + } + .status { + text-shadow: none; + color: @color-black; + font-weight: normal; + } + } + } + } } #disable-project { float: right; } -#notification-bar{ +#notification-bar { height: 50px !important; } -#executors .pane-content > table tr td:first-child { - color: #aaa !important; - font-weight: bold; - font-size: 1.3em !important; - text-align: center; +#executors .pane-content > table tr { + td:first-child { + color: #aaa !important; + font-weight: bold; + font-size: 1.3em !important; + text-align: center; + } + td:nth-child(3) { + display: none; + } } .pane-frame { - border: 0; - - &:hover, &.mouseover { - border: 0 !important; + border: @table-border; + border-radius: 0; + + &:hover, + &.mouseover { + border: @table-border !important; } - .pane-header, .pane-footer { - background: @color-bg; - margin-bottom: 5px; + .single-line:hover, + .single-line.model-link-active { + background: @color-accent-light !important; + } +} + +.bigtable { + tr { + border-color: @table-header-color; + } + th { + border-bottom: none !important; + background-color: @color-accent-light; + } +} + +.pane-header, +.pane-footer { + color: @color-text; + background-color: @table-header-color; border-radius: 0; border: 0; - } +} - .pane-header { - border-bottom: 2px solid @color-accent-light; - } +.pane-header { + border-bottom: 2px solid @table-header-color; +} - .single-line:hover, .single-line.model-link-active { - background: @color-accent-light !important; - } +table.stripped-odd tr:nth-child(odd), +table.stripped tr:nth-child(even) { + background: darken(@color-bg, 2%); } -.bigtable { - th { - border-bottom: 2px solid @color-accent-light; - background-color: transparent; +table.stripped, +table.stripped-even, +table.stripped-odd { + tr:hover { + background: lighten(@color-bg, 2%) !important; } } -table.stripped-odd tr:nth-child(odd) { - background: darken(@color-bg, 2%); +table.sortable { + a.sortheader { + color: lighten(@color-accent-light, 50%); + } +} + +table.parameters { + tbody:hover { + background-color: @color-accent-light; + } } .tabBar { .tab { + background: @tab-inactive-background; &:first-child { margin-left: 0; } &.active a { - background: @color-accent-light; + background: @tab-active-background; } a { + border: @table-border !important; + border-bottom: none !important; padding: 5px 10px; - border-radius: 0; + border-radius: 0; + color: @color-text !important; + &:hover { + background: lighten(@tab-active-background, 10%); + } } } } +#projectstatus { + tbody tr:first-child th:first-child, + tbody tr:first-child th:last-child { + border-radius: 0; + } + .header { + border: none; + } +} + #buildHistoryPage { .build-search-row { - input { - padding: 5px; - } td { padding: 0; } @@ -214,7 +312,7 @@ footer { #management-links { padding-left: 0 !important; a { - margin-right: 10px; + margin-right: 10px; font-weight: 600; } tr { @@ -235,7 +333,7 @@ th.pane { } .bottom-sticker-edge { - display: none + display: none; } .bottom-sticker-inner { @@ -268,30 +366,34 @@ table.progress-bar { } td { - vertical-align: middle; + vertical-align: middle; } .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover { - background-color: transparent !important + background-color: transparent !important; } .yuimenuitemlabel { outline: none; } +#main-panel > div { + background-color: transparent !important; +} + #main-panel-content > div:nth-child(2) { - background-color: transparent !important + background-color: transparent !important; } #jenkins .yui-button { button { text-decoration: none; text-align: center; - letter-spacing: .5px; - transition: .1s ease-out; + letter-spacing: 0.5px; + transition: 0.1s ease-out; cursor: pointer; border: none !important; border-radius: 3px; @@ -317,11 +419,43 @@ td { } } +.jenkins-config-widgets .form-config.tabBarFrame { + border-bottom: 5px solid @tab-inactive-background !important; + .tabBar { + .tab.active, + .tab:hover { + color: @color-text !important; + background-color: @tab-active-background !important; + border-color: @tab-active-background !important; + } + } +} + +.bottom-sticker-inner { + border: none !important; + padding-left: 36px !important; + background: @color-accent-light !important; +} + +.jenkins-config-widgets .form-config.tabBarFrame .tabBar .tab:hover + +.jenkins-config table .section-header { + border-top: 1px solid @tab-inactive-background !important; +} + +.jenkins-config, +.jenkins-config-widgets { + background-color: @tab-active-background !important; + border-color: @table-border-color !important; +} + #enable-project .yui-button { vertical-align: middle; } -.console-output, .console-output * { +.ace-tomorrow, +.console-output, +.console-output * { position: relative; font-family: @font-console, Courier, monospace !important; background: @color-console-bg; @@ -329,6 +463,17 @@ td { cursor: text; } +.ace-tomorrow { + .ace_gutter { + color: @color-text; + background: @table-header-color; + } + .ace_gutter-active-line, + .ace_active-line { + background: darken(@table-header-color, 5%) !important; + } +} + .console-output { padding: 10px 20px; a { @@ -347,10 +492,39 @@ td { // make headings on the config pages easier to read .section-header { - font-size: 2em; - border-bottom: none !important; - font-weight: lighter !important; - margin-bottom: 0.2em; - margin-top: 1.5em !important; - padding-bottom: 3px; + font-size: 2em; + border-bottom: none !important; + font-weight: lighter !important; + margin-bottom: 0.2em; + margin-top: 1.5em !important; + padding-bottom: 3px; +} + +.sonar-qg, +.sonar-ce { + color: @color-text !important; + font-size: 12px !important; + font-weight: normal !important; + display: list-item; + list-style-type: disc; + list-style-position: inside; + margin: 0 !important; + padding: 0 !important; } + +#jenkins .yuimenu .bd { + border: 1px solid @table-border-color; + box-shadow: none; +} + +.yui-skin-sam { + .yuimenuitemlabel { + color: @color-text !important; + } + .yuimenu .bd { + background-color: @tab-active-background; + } + .yuimenuitem-selected { + background-color: @tab-inactive-background; + } +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 71c308b0..95e8effc 100644 --- a/less/variables.less +++ b/less/variables.less @@ -16,8 +16,9 @@ @color-primary: #0172BA; @color-accent-light: #B3D4FF; @color-link: #34568E; +@color-link-hover: #0172BA; @color-button: #36578C; -@color-button-hover: #0172BA; +@color-button-hover: @color-link-hover; @color-button-active: #FFCC53; @color-bg: @color-white; @@ -31,4 +32,13 @@ /* Font */ @font-primary: 'Open Sans'; -@font-console: 'Courier New'; \ No newline at end of file +@font-console: 'Courier New'; + + + +@table-header-color: @color-accent-light; +@table-border: 1px solid @table-border-color; +@table-border-color: @table-header-color; + +@tab-active-background: @table-header-color; +@tab-inactive-background: #2D2D2D; \ No newline at end of file diff --git a/package.json b/package.json index bd2b74a3..3e8363f2 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "url": "https://github.com/aarjithn/jenkins-neo-theme" }, "keywords": [ - "modern theme", + "modern theme", "clean design", "jenkins" ], @@ -28,6 +28,7 @@ "grunt-contrib-jshint": "^0.6.5", "grunt-contrib-less": "^1.1.0", "grunt-contrib-uglify": "^0.2.7", + "grunt-contrib-watch": "^1.1.0", "grunt-image-embed": "^0.3.3", "grunt-rev": "^0.1.0", "install": "^0.3.0",