diff --git a/README.md b/README.md index 4730b25..dc7868c 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ A theme for Jenkins to give a dark look. ``` -NOTE: This has not been tested with Jenkins 2.x. +NOTE: Tested with both Jenkins version 1.6xx+ and 2.x (some things on 2.x are not styled properly yet.) ``` You will need to add the domains that you want this to apply to yourself if you use the Stylish plugin. @@ -15,6 +15,7 @@ You will need to add the domains that you want this to apply to yourself if you - Click `Configure System` and scroll to `Theme` section - Specify the URL of `http://camalot.github.io/jenkins-dark-stylish/jenkins-dark.min.css` for the CSS - Click `Save` +- Profit! ### Native Jenkins Plugin - Download the [latest release hpi file](https://github.com/camalot/jenkins-dark-stylish/releases/latest) @@ -41,6 +42,20 @@ _NOTE: these steps may be slightly different for FireFox version of Stylish_ - Add your domains that you want this to apply to - Profit! +### Install the plugin via chef and the [jenkins-cookbook](https://supermarket.chef.io/cookbooks/jenkins) + +``` +jenkins_dark_theme_version = '1.0.105' +jenkins_dark_source = "https://github.com/camalot/jenkins-dark-stylish/releases/download/jenkins-dark-stylish-#{jenkins_dark_theme_version}/jenkins-dark-stylish-#{jenkins_dark_theme_version}.hpi" + +jenkins_plugin 'jenkins-dark-theme' do + action [:install] + source jenkins_dark_source +end +``` +- Profit! + + ## Screenshots ![Jenkins Menu](http://i.imgur.com/7nL7lLg.png) diff --git a/appveyor.yml b/appveyor.yml index cbce801..a4794b2 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -130,6 +130,5 @@ after_deploy: & git push origin gh-pages; } } catch [Exception] { - "$_.Exception.GetType().FullName, $_.Exception.Message" | Write-Error; - throw; + "$_.Exception.GetType().FullName, $_.Exception.Message" | Write-Warning; } diff --git a/jenkins-dark.less b/jenkins-dark.less index 326f448..551ea75 100644 --- a/jenkins-dark.less +++ b/jenkins-dark.less @@ -10,10 +10,9 @@ } @import url( './parts/_keyframes.less'); @import url('./parts/_scrollbar.less'); +@import url('./parts/_dialogs.less'); #main-panel, -.bottom-sticker-inner, -.top-sticker-inner, body, html { background: @background-dark; @@ -41,13 +40,15 @@ a, a:link, a:visited { text-decoration: none; - color: @blue; + /* this is !important because there are places that it is set to black inline and no available selector. */ + color: @blue !important; outline: none; } .setting-input, input[type='password']:hover, input[type='text']:hover { border-color: #4183C4; + } .setting-input, input[type='password'], @@ -57,8 +58,8 @@ input[type='text'] { color: @text-light; background-color: #3a3a3a; outline: none; - padding: 6px 5px 4px; - border-radius: 0; + padding: 6px 5px 4px !important; + border-radius: 0 !important; box-shadow: none; } footer { @@ -73,10 +74,7 @@ footer { @import url( './parts/_notifications.less'); @import url( './parts/_wtf.less'); @import url( './parts/_code-editor.less'); -.bottom-sticker-edge { - /* hide the shadow on the bottom panel */ - display: none; -} + #menuSelector { -webkit-filter: invert(100%); } @@ -104,13 +102,16 @@ footer { } .section-header { margin: 5px; + margin-bottom: 5px; + margin-top: 5px; padding: 10px; + padding-bottom: 10px; font-size: 3em; background-color: @blue; color: @text-light; text-transform: uppercase; - border: none; - border-bottom: none; + border: none !important; + border-bottom: none !important; } @import url("./parts/_breadcrumbs.less"); @import url("./parts/_side-panel.less"); diff --git a/parts/_dashboard.less b/parts/_dashboard.less index b7c93d2..1191b9d 100644 --- a/parts/_dashboard.less +++ b/parts/_dashboard.less @@ -7,6 +7,7 @@ table#computers { } .dashboard { table#projectstatus { + .job-status-disabled, .job-status-red-anime, .job-status-yellow-anime, .job-status-green-anime, @@ -26,6 +27,17 @@ table#computers { vertical-align: middle; } } + + .job-status-disabled { + color: darken(@text-light,10%) !important; + text-decoration: line-through; + opacity: 0.5; + a { + color: darken(@text-light,10%) !important; + text-decoration: line-through; + } + } + &.stripped-odd tr:nth-child(even), &.stripped tr { &.job-status-red-anime, diff --git a/parts/_dialogs.less b/parts/_dialogs.less new file mode 100644 index 0000000..cc05800 --- /dev/null +++ b/parts/_dialogs.less @@ -0,0 +1,61 @@ +@import url( './_variables.less'); + + +.bottom-sticker-inner, +.top-sticker-inner { + background: @background-dark !important; + color: @text-light !important; + + border-radius: 0 !important; + border: 0 !important; +} + +#bottom-sticker { + left: 250px !important; + right: 0 !important; +} + +.bottom-sticker-edge { + /* hide the shadow on the bottom panel */ + display: none !important; +} + +#jenkins { + .jenkins-config { + background: @background-dark !important; + color: @text-light !important; + border: 0 !important; + table.config-table { + background: @background-dark !important; + color: @text-light !important; + } + } +} + + +.jenkins-config-widgets { + background: @background-dark !important; + border: 0 !important; + border-radius: 0 !important; + + .form-config.tabBarFrame { + border: 0 !important; + .tabBar { + + .tab { + border: 0; + border-bottom: solid lighten(@background-333,10%) 6px; + border-radius: 0 !important; + background-color: @background-333; + &:hover { + background-color: darken(@blue,10%); + border-bottom: solid darken(@blue,15%) 6px; + } + &.active { + background-color: @white; + border-bottom: solid @blue 6px; + } + } + } + } +} diff --git a/parts/_icons.less b/parts/_icons.less index 51d466d..f592a94 100644 --- a/parts/_icons.less +++ b/parts/_icons.less @@ -66,16 +66,16 @@ img[src$="artifactory-icon.png"][height="16px"] { } img[src$="search.png"] { - &[width="48"] { + &[width="48"], &[src*="/48x48/"] { content: @search-image-48; } - &[width="32"] { + &[width="32"], &[src*="/32x32/"] { content: @search-image-32; } - &[width="24"] { + &[width="24"], &[src*="/24x24/"] { content: @search-image-24; } - &[width="16"] { + &[width="16"], &[src*="/16x16/"] { content: @search-image-16; } } @@ -95,16 +95,16 @@ img[src$="search.png"] { } } img[src$="save.png"] { - &[width="48"] { + &[width="48"], &[src*="/48x48/"] { content: @save-image-48; } - &[width="32"] { + &[width="32"], &[src*="/32x32/"] { content: @save-image-32; } - &[width="24"] { + &[width="24"], &[src*="/24x24/"] { content: @save-image-24; } - &[width="16"] { + &[width="16"], &[src*="/16x16/"] { content: @save-image-16; } } @@ -125,16 +125,16 @@ img[src$="save.png"] { } } img[src$="clock.png"] { - &[width="48"] { + &[width="48"], &[src*="/48x48/"] { content: @gear-image-48; } - &[width="32"] { + &[width="32"], &[src*="/32x32/"] { content: @gear-image-32; } - &[width="24"] { + &[width="24"], &[src*="/24x24/"] { content: @gear-image-24; } - &[width="16"] { + &[width="16"], &[src*="/16x16/"] { content: @gear-image-16; } } @@ -196,16 +196,16 @@ img.icon-yellow-anime { img[src$="yellow_anime.gif"] { vertical-align: text-top; .spinning-build-image(); - &[width="48"] { + &[width="48"], &[src*="/48x48/"] { content: @spinner-yellow-image-48; } - &[width="32"] { + &[width="32"], &[src*="/32x32/"] { content: @spinner-yellow-image-32; } - &[width="24"] { + &[width="24"], &[src*="/24x24/"] { content: @spinner-yellow-image-24; } - &[width="16"] { + &[width="16"], &[src*="/16x16/"] { content: @spinner-yellow-image-16; } } @@ -227,16 +227,16 @@ img.icon-yellow { img[src$="yellow.png"] { vertical-align: text-top; - &[width="48"] { + &[width="48"], &[src*="/16x16/"] { content: @yellow-image-48; } - &[width="32"] { + &[width="32"], &[src*="/32x32/"] { content: @yellow-image-32; } - &[width="24"] { + &[width="24"], &[src*="/24x24/"] { content: @yellow-image-24; } - &[width="16"] { + &[width="16"], &[src*="/16x16/"] { content: @yellow-image-16; } } @@ -260,16 +260,16 @@ img.icon-blue-anime { img[src$="blue_anime.gif"] { vertical-align: text-top; .spinning-build-image(); - &[width="48"] { + &[width="48"], &[src*="/48x48/"] { content: @spinner-green-image-48; } - &[width="32"] { + &[width="32"], &[src*="/32x32/"] { content: @spinner-green-image-32; } - &[width="24"] { + &[width="24"], &[src*="/24x24/"] { content: @spinner-green-image-24; } - &[width="16"] { + &[width="16"], &[src*="/16x16/"] { content: @spinner-green-image-16; } } @@ -290,16 +290,16 @@ img.icon-blue { } img[src$="blue.png"] { vertical-align: text-top; - &[width="48"] { + &[width="48"], &[src*="/48x48/"] { content: @green-image-48; } - &[width="32"] { + &[width="32"], &[src*="/32x32/"] { content: @green-image-32; } - &[width="24"] { + &[width="24"], &[src*="/24x24/"] { content: @green-image-24; } - &[width="16"] { + &[width="16"], &[src*="/16x16/"] { content: @green-image-16; } } @@ -322,16 +322,16 @@ img.icon-red-anime { img[src$="red_anime.gif"] { vertical-align: text-top; .spinning-build-image(); - &[width="48"] { + &[width="48"], &[src*="/48x48/"] { content: @spinner-red-image-48; } - &[width="32"] { + &[width="32"], &[src*="/32x32/"] { content: @spinner-red-image-32; } - &[width="24"] { + &[width="24"], &[src*="/24x24/"] { content: @spinner-red-image-24; } - &[width="16"] { + &[width="16"], &[src*="/16x16/"] { content: @spinner-red-image-16; } } @@ -351,16 +351,16 @@ img.icon-red { } img[src$="red.png"] { vertical-align: text-top; - &[width="48"] { + &[width="48"], &[src*="/48x48/"] { content: @red-image-48; } - &[width="32"] { + &[width="32"], &[src*="/32x32/"] { content: @red-image-32; } - &[width="24"] { + &[width="24"], &[src*="/24x24/"] { content: @red-image-24; } - &[width="16"] { + &[width="16"], &[src*="/16x16/"] { content: @red-image-16; } } @@ -389,22 +389,23 @@ img[src$="nobuilt_anime.gif"], img[src$="grey_anime.gif"] { vertical-align: text-top; .spinning-build-image(); - &[width="48"] { + &[width="48"], &[src*="/48x48/"] { content: @spinner-grey-image-48; } - &[width="32"] { + &[width="32"], &[src*="/32x32/"] { content: @spinner-grey-image-32; } - &[width="24"] { + &[width="24"], &[src*="/24x24/"] { content: @spinner-grey-image-24; } - &[width="16"] { + &[width="16"], &[src*="/16x16/"] { content: @spinner-grey-image-16; } } img { &.icon-grey, &.icon-aborted, + &.icon-disabled, &.icon-nobuilt { &.icon-xlg { content: @grey-image-48; @@ -421,22 +422,24 @@ img { } } img[src$="aborted.png"], +img[src$="disabled.png"], img[src$="nobuilt.png"], img[src$="grey.png"] { vertical-align: text-top; - &[width="48"] { + &[width="48"], &[src*="/48x48/"] { content: @grey-image-48; } - &[width="32"] { + &[width="32"], &[src*="/32x32/"] { content: @grey-image-32; } - &[width="24"] { + &[width="24"], &[src*="/24x24/"] { content: @grey-image-24; } - &[width="16"] { + &[width="16"], &[src*="/16x16/"] { content: @grey-image-16; } } + // weather img.icon-health-00to19 { &.icon-xlg { diff --git a/parts/_notifications.less b/parts/_notifications.less index 41e44ff..5ac018d 100644 --- a/parts/_notifications.less +++ b/parts/_notifications.less @@ -55,7 +55,7 @@ p.info { display: block; background-color: @background-error; color: @text-light; - background-image: @error-image-48; + background-image: @error-image-48 !important; min-height: 50px; vertical-align: middle; form { @@ -68,11 +68,11 @@ p.info { } .help { - border-color: @background-black; - background-color: @background-555; - color: @text-light; + border-color: @background-black !important; + background-color: @background-555 !important; + color: @text-light !important; padding-left: 56px; - background-image: @help-image-48; + background-image: @help-image-48 !important; background-repeat: no-repeat; background-position: 4px center; .from-plugin { diff --git a/plugin/src/main/resources/com/bit13/jenkins/JenkinsDarkThemeDecorator/header.jelly b/plugin/src/main/resources/com/bit13/jenkins/JenkinsDarkThemeDecorator/header.jelly index ece186c..122b77b 100644 --- a/plugin/src/main/resources/com/bit13/jenkins/JenkinsDarkThemeDecorator/header.jelly +++ b/plugin/src/main/resources/com/bit13/jenkins/JenkinsDarkThemeDecorator/header.jelly @@ -1,4 +1,8 @@ - + + + + +