Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add CSS variables - prerequisite for Dark mode #4752

Merged
merged 31 commits into from
May 31, 2020
Merged

Add CSS variables - prerequisite for Dark mode #4752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
7606a10
JENKINS-60924 Add PostCSS pre-processor
95jonpet May 26, 2020
611f6ad
Add alpha support for CSS variables
timja May 26, 2020
a7934a7
Yui theming and side panel fixes
timja May 27, 2020
a9b9310
More overrides
timja May 27, 2020
7b04563
Revert "More overrides"
timja May 27, 2020
94b9311
Add manage styles
timja May 27, 2020
cb37c39
Tweak buttons
timja May 27, 2020
f824f3a
Fix IE 11
timja May 27, 2020
670b907
Review comments
timja May 27, 2020
78928fa
Standardize dark link variables
fqueiruga May 28, 2020
19f931d
Rename variables to BEM-like status
fqueiruga May 28, 2020
48610d5
Renames background variables to bg
fqueiruga May 28, 2020
330b6f3
Merge remote-tracking branch 'fqueiruga/rename-background-variables' …
timja May 28, 2020
d0fbb44
Rename last bg variable
fqueiruga May 28, 2020
86c0bd0
Update war/src/main/less/abstracts/colors.less
timja May 28, 2020
daf9cd3
Mostly complete add job screen
timja May 28, 2020
4b5b72d
Merge branch 'dark-mode' of github.com:timja/jenkins into dark-mode
timja May 29, 2020
999c71f
Fix configure job, help, preview text
timja May 29, 2020
d5398ee
Merge pull request #6 from fqueiruga/rename-bg-variable
timja May 29, 2020
23fdc52
Merge branch 'master' into dark-mode
timja May 29, 2020
461805f
Merge branch 'dark-mode' of github.com:timja/jenkins into dark-mode
timja May 29, 2020
37d2e15
Fix typo
timja May 29, 2020
fb31dd1
Rename to border-radius
timja May 29, 2020
6627e85
Update core/src/main/resources/lib/layout/breadcrumbs.css
timja May 29, 2020
f9df961
Plugin manager fixes
timja May 29, 2020
07abb84
Typo fix
timja May 29, 2020
2faf971
Fix secretTextarea
timja May 29, 2020
c12b42c
Fix admin monitor pop out
timja May 29, 2020
49e501f
Fix autocomplete on addJob
timja May 29, 2020
cbfc042
Fix CLI dark mode
timja May 29, 2020
fbdd4d7
Plugin manager categories themeable
timja May 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion core/src/main/resources/hudson/PluginManager/_table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,11 @@ time {
.plugin-manager__category-label:visited {
display: inline-block;
border: 1px solid #ccc;
border: 1px solid var(--input-border);
background-color: #fbfbfb;
background-color: var(--plugin-manager-category-link-bg-color);
color: #333;
color: var(--plugin-manager-category-text-color);
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
Expand All @@ -36,7 +39,11 @@ time {
.plugin-manager__category-label:focus,
.plugin-manager__category-label:active {
background-color: #f2f2f2;
background-color: var(--plugin-manager-category-link-bg-color--hover);
border-color: #333;
border-color: var(--plugin-manager-category-link-border-color--hover);
color: #333;
color: var(--plugin-manager-category-link-color--hover);
}

.plugin-manager__search-input {
Expand All @@ -46,7 +53,8 @@ time {

font-size: 1rem;
line-height: 1.5;
color: #4d545d;
color: #333;
color: var(--text-color);

border-radius: 4px;
border: 1px solid grey;
Expand Down
2 changes: 1 addition & 1 deletion core/src/main/resources/hudson/cli/CLIAction/index.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ THE SOFTWARE.
<table>
<j:forEach items="${h.getCLICommands()}" var="command">
<tr>
<td><a href="command/${command.name}" style="color: black; font-weight: bold">${command.name}</a></td>
<td><a href="command/${command.name}">${command.name}</a></td>
<td>${command.shortDescription}</td>
</tr>
</j:forEach>
Expand Down
4 changes: 4 additions & 0 deletions core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
text-align: left;
display: block;
background-color: #fff;
background-color: var(--background);
border-radius: 5px;

/* Darken the box shadow to make the popup visible over the search box */
Expand Down Expand Up @@ -92,17 +93,20 @@
#visible-am-container #visible-am-list a:link {
display: inline-block;
color: #204A87;
color: var(--link-color);
text-decoration: underline;
padding: 0;
font-weight: normal;
}
#visible-am-container #visible-am-list a:visited {
color: #5c3566;
color: var(--link-color);
}
#visible-am-container #visible-am-list a:hover,
#visible-am-container #visible-am-list a:focus,
#visible-am-container #visible-am-list a:active {
color: #5c3566;
color: var(--link-color);
text-decoration-color: #5c3566;
background-color: transparent;
text-decoration: underline;
Expand Down
4 changes: 4 additions & 0 deletions core/src/main/resources/lib/form/password/password.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,10 @@

.hidden-password-legend {
border: 1px solid #ccc;
border: 1px solid var(--input-border);
timja marked this conversation as resolved.
Show resolved Hide resolved
border-radius: 3px;
background: #f9f9f9;
background: var(--input-hidden-password-bg-color);
flex-grow: 1;
align-items: center;
display: inline-flex;
Expand All @@ -42,7 +44,9 @@

.hidden-password input[type='button'] {
background: #4b99d0;
background: var(--btn-primary-bg);
color: #fff;
color: var(--btn-text-color);
border-radius: 4px;
border: none;
padding: 7px;
Expand Down
4 changes: 4 additions & 0 deletions core/src/main/resources/lib/form/secretTextarea/secret.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,10 @@

.secret-header {
border: 1px solid #ccc;
border: 1px solid var(--input-border);
border-radius: 3px;
background: #f9f9f9;
background: var(--input-hidden-password-bg-color);
display: flex;
justify-content: space-around;
}
Expand Down Expand Up @@ -65,7 +67,9 @@

.secret input[type='button'] {
background: #4b99d0;
background: var(--btn-primary-bg);
color: #fff;
color: var(--btn-text-color);
border-radius: 4px;
border: none;
padding: 1em 2em;
Expand Down
2 changes: 2 additions & 0 deletions core/src/main/resources/lib/layout/breadcrumbs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
line-height: 1.5;
padding: 0 1.25rem;
background-color: #F8F8F8;
background-color: var(--breadcrumbs-bg);
timja marked this conversation as resolved.
Show resolved Hide resolved
}

#breadcrumbs {
Expand Down Expand Up @@ -66,6 +67,7 @@
display: inline-block;
display: inline-flex;
color: #4d545d;
color: var(--breadcrumbs-text-color);
}

#breadcrumbs LI A:hover, #breadcrumbs LI A:focus {
Expand Down
1 change: 1 addition & 0 deletions war/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"less": "^3.10.3",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.8.0",
"postcss-custom-properties": "^9.1.1",
"postcss-loader": "^3.0.0",
"style-loader": "^1.2.1",
"stylelint-config-standard": "^19.0.0",
Expand Down
3 changes: 2 additions & 1 deletion war/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
module.exports = {
parser: "postcss-less",
plugins: [
require('autoprefixer')
require('autoprefixer'),
require('postcss-custom-properties')
timja marked this conversation as resolved.
Show resolved Hide resolved
timja marked this conversation as resolved.
Show resolved Hide resolved
]
};
46 changes: 22 additions & 24 deletions war/src/main/js/widgets/add/addform.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@

form > .header {
position: relative;
border: 1px solid #cccccc;
timja marked this conversation as resolved.
Show resolved Hide resolved
border: 1px solid var(--input-border);
border-bottom: none;
background: #eeeeee;
background: var(--light-bg-color);
-webkit-border-top-left-radius: 3px;
-moz-border-top-left-radius: 3px;
border-top-left-radius: 3px;
Expand All @@ -18,9 +18,9 @@

form > .footer {
position: relative;
border: 1px solid #cccccc;
border: 1px solid var(--input-border);
border-top: none;
background: #eeeeee;
background: var(--light-bg-color);
height: 110px;

.btn-decorator {
Expand All @@ -29,8 +29,8 @@
padding: 20px 30px;
width: auto;
border-top-right-radius: 10px;
border: 1px solid #aaccbb;
background: rgba(245, 249, 239, 0.75);
border: 1px solid var(--add-item-btn-decorator-border-color);
background: var(--add-item-btn-decorator-bg-color);
text-align: center;
z-index: 10;

Expand All @@ -53,13 +53,13 @@

.item-copy {
position: relative;
border: 1px solid #cccccc;
border: 1px solid var(--input-border);
border-top: none;
padding: 20px;
background-color: #f9f9f9;
background-color: var(--light-bg-color);

p.description {
font-size: @font-size-base;
font-size: var(--font-size-base);
margin-top: 0;
}

Expand All @@ -68,7 +68,7 @@
padding-left: 58px;

/* This is needed because <s:textbox /> included YUI styles and we need to override this one */
font-family: @font-family-sans !important;
font-family: var(--font-family-sans) !important;

input[type=radio] {
display: none;
Expand All @@ -94,7 +94,7 @@
.input-help {
color: #666;
font-style: italic;
font-size: @font-size-sm;
font-size: var(--font-size-sm);
padding-top: 2px;
}

Expand All @@ -116,7 +116,7 @@
top: 10px;
height: 48px;
width: 48px;
background: #ffffff;
background: var(--input-color);
border: 1px solid #6699cc;
border-radius: 50%;
opacity: .9;
Expand Down Expand Up @@ -210,19 +210,17 @@
}

input {
background-color: #fff;
padding: 5px 10px;
border: 1px solid #999;
width: 50%;
min-width: 300px;
}

.categories {
border: 1px solid #cccccc;
background-color: #f9f9f9;
border: 1px solid var(--input-border);
background-color: var(--bright-bg-color);

.category {
border-bottom: 1px solid #cccccc;
border-bottom: 1px solid var(--input-border);
padding: 10px;

.header {
Expand Down Expand Up @@ -276,16 +274,16 @@
.j-item-options {

li:hover, li:focus {
border-color: #cccccc;
background: rgba(255, 255, 255, 0.65);
border-color: var(--input-border);
background: var(--light-bg-color--hover);
outline: 0;
}

li.active {
cursor: text;
background-color: #ffffff;
border-color: #6699cc;
box-shadow: inset 999rem 0 #ffffff;
background-color: var(--background);
border-color: var(--input-border);
box-shadow: inset 999rem 0 var(--background);
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
Expand Down Expand Up @@ -318,9 +316,9 @@

label {
display: block;
font-size: @font-size-base;
font-size: var(--font-size-base);
font-weight: bold;
color: #000;
color: var(--text-color);
padding-bottom: 5px;
cursor: pointer;

Expand Down
Loading