diff --git a/core/src/main/resources/hudson/model/View/AsynchPeople/people-resources.js b/core/src/main/resources/hudson/model/View/AsynchPeople/people-resources.js index 3a90ccf9d7eb..880d302694f3 100644 --- a/core/src/main/resources/hudson/model/View/AsynchPeople/people-resources.js +++ b/core/src/main/resources/hudson/model/View/AsynchPeople/people-resources.js @@ -27,15 +27,13 @@ function display(data) { d = document.createElement('td'); var a = document.createElement('a'); a.href = rootURL + "/" + e.url; + a.className = "jenkins-table__link" a.appendChild(document.createTextNode(e.id)); d.appendChild(a); r.appendChild(d); d = document.createElement('td'); - var a = document.createElement('a'); - a.href = rootURL + "/" + e.url; - a.appendChild(document.createTextNode(e.fullName)); - d.appendChild(a); + d.appendChild(document.createTextNode(e.fullName)); r.appendChild(d); d = document.createElement('td'); @@ -55,4 +53,4 @@ function display(data) { ts_refresh(p); } -} \ No newline at end of file +} diff --git a/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly b/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly index 863035f7cb83..c2bb1da166b3 100644 --- a/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly +++ b/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly @@ -34,7 +34,7 @@ THE SOFTWARE. -
${%blurb}
+${%blurb}
+ | - ${user.id} + ${user.id} | - ${user.fullName} + ${user.fullName} |
- |
diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
index b7a7290ddf04..be86e3ee03f7 100644
--- a/war/src/main/less/abstracts/theme.less
+++ b/war/src/main/less/abstracts/theme.less
@@ -21,9 +21,9 @@
// branding
--primary: #024cb6;
--secondary: #4d545d;
- --success: #138347;
- --danger: #cc0003;
- --warning: #ea6b19;
+ --success: var(--green);
+ --danger: var(--red);
+ --warning: var(--orange);
--focus: #3fb3f7;
--focus-btn-primary: fade(#0b6aa2, 50%);
--focus-btn-secondary: fade(#0b6aa2, 50%);
@@ -174,7 +174,7 @@
--table-body-background: white;
--table-body-foreground: black;
--table-border-radius: 10px;
- --table-body-radius: 6px;
+ --table-row-border-radius: 4px;
// Deprecated
--even-row-color: var(--very-light-grey);
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
index fe6ff82159e0..59099898d164 100644
--- a/war/src/main/less/base/style.less
+++ b/war/src/main/less/base/style.less
@@ -718,6 +718,12 @@ table.parameters > tbody:hover {
table {
border-radius: 0;
min-width: 450px;
+ box-sizing: content-box;
+ padding-bottom: 2px;
+
+ * {
+ box-sizing: border-box;
+ }
}
}
diff --git a/war/src/main/less/modules/table.less b/war/src/main/less/modules/table.less
index b0bee21e995e..1a6762c4979c 100644
--- a/war/src/main/less/modules/table.less
+++ b/war/src/main/less/modules/table.less
@@ -1,12 +1,12 @@
.jenkins-table {
+ --table-padding: 0.55rem;
+
width: calc(100% - 10px);
background: var(--table-background);
- border-collapse: collapse;
- border-radius: 6px;
- overflow: hidden;
- box-shadow: 0 0 0 5px var(--table-background);
- margin: 5px;
- --table-padding: 0.55rem;
+ border-radius: calc(var(--table-border-radius) + 2px);
+ border: 5px solid var(--table-background);
+ border-bottom-width: 3px;
+ border-spacing: 0 2px;
* {
-webkit-border-horizontal-spacing: 0;
@@ -52,7 +52,6 @@
& > tr {
background: var(--table-body-background);
color: var(--table-body-foreground);
- border-bottom: 2px solid var(--table-background);
& > td {
vertical-align: middle;
@@ -61,36 +60,43 @@
height: 50px;
&:first-of-type {
- border-radius: var(--table-body-radius) 0 0 var(--table-body-radius);
padding-left: calc(var(--table-padding) * 2);
}
&:last-of-type {
- border-radius: 0 var(--table-body-radius) var(--table-body-radius) 0;
padding-right: var(--table-padding);
}
}
- &:last-of-type {
- border-bottom: none;
- }
- }
-
- & > tr:first-of-type {
+ // Style the rows so that the first and last have a larger border radius
& > td:first-of-type {
- border-radius: var(--table-border-radius) 0 0 var(--table-body-radius);
+ border-top-left-radius: var(--table-row-border-radius);
+ border-bottom-left-radius: var(--table-row-border-radius);
}
+
& > td:last-of-type {
- border-radius: 0 var(--table-border-radius) var(--table-body-radius) 0;
+ border-top-right-radius: var(--table-row-border-radius);
+ border-bottom-right-radius: var(--table-row-border-radius);
}
- }
- & > tr:last-of-type {
- & > td:first-of-type {
- border-radius: var(--table-body-radius) 0 0 var(--table-border-radius);
+ // First row
+ &:first-of-type {
+ & > td:first-of-type {
+ border-top-left-radius: var(--table-border-radius);
+ }
+ & > td:last-of-type {
+ border-top-right-radius: var(--table-border-radius);
+ }
}
- & > td:last-of-type {
- border-radius: 0 var(--table-body-radius) var(--table-border-radius) 0;
+
+ // Last row
+ &:last-of-type {
+ & > td:first-of-type {
+ border-bottom-left-radius: var(--table-border-radius);
+ }
+ & > td:last-of-type {
+ border-bottom-right-radius: var(--table-border-radius);
+ }
}
}
}
@@ -102,10 +108,10 @@
}
&__cell--tight {
- padding-left: 0!important;
- text-align: center!important;
+ padding-left: 0 !important;
+ text-align: center !important;
white-space: nowrap;
- width: 60px;
+ width: 3.5rem;
}
&__cell--no-wrap {
@@ -120,15 +126,15 @@
display: inline-flex;
}
- &__button, &__link, &__icon {
+ &__button, &__icon {
svg, .build-status-icon__wrapper, img {
- width: 24px!important;
- height: 24px!important;
+ width: 24px !important;
+ height: 24px !important;
}
}
&--medium {
- --table-padding: 0.4rem!important;
+ --table-padding: 0.4rem !important;
tbody > tr > td {
height: 40px;
@@ -136,8 +142,8 @@
.jenkins-table__button, .jenkins-table__link, .jenkins-table__icon {
svg, .build-status-icon__wrapper, img {
- width: 20px!important;
- height: 20px!important;
+ width: 20px !important;
+ height: 20px !important;
}
}
}
@@ -151,14 +157,14 @@
.jenkins-table__button, .jenkins-table__link, .jenkins-table__icon {
svg, .build-status-icon__wrapper, img {
- width: 16px!important;
- height: 16px!important;
+ width: 16px !important;
+ height: 16px !important;
}
}
}
&__button, &__link {
- color: var(--link-color)!important;
+ color: var(--link-color) !important;
}
&__button, .sortheader, &__link {
@@ -176,54 +182,68 @@
font-weight: inherit;
font-size: inherit;
background: transparent;
- text-decoration: none!important;
- line-height: 1!important;
+ text-decoration: none !important;
+ line-height: 1 !important;
+ transition: var(--standard-transition);
- &::before {
+ &::before,
+ &::after {
content: "";
position: absolute;
top: -7px;
left: -10px;
bottom: -7px;
right: -10px;
- border-radius: 5px;
- background: var(--text-color);
+ border-radius: 6px;
z-index: -1;
+ transition: var(--standard-transition);
+ }
+
+ &::before {
+ background: var(--text-color);
opacity: 0;
- transition: 0.2s ease;
+ }
+
+ &::after {
+ opacity: 0.05;
+ box-shadow: 0 0 0 10px transparent;
}
&:hover {
&::before {
- opacity: 0.05!important;
- border-radius: 5px;
+ opacity: 0.05 !important;
+ border-radius: 6px;
background: var(--text-color);
}
}
&:focus, &:active {
&::before {
- opacity: 0.1!important;
+ opacity: 0.1 !important;
border-radius: 5px;
background: var(--text-color);
}
+
+ &::after {
+ box-shadow: 0 0 0 5px var(--text-color);
+ }
}
&--green {
- color: var(--green)!important;
+ color: var(--green) !important;
}
&--orange {
- color: var(--orange)!important;
+ color: var(--orange) !important;
}
&--red {
- color: var(--red)!important;
+ color: var(--red) !important;
}
}
&__badge {
- margin-left: 1rem!important;
+ margin-left: 1rem !important;
&::before {
top: -5px;
@@ -234,5 +254,12 @@
background: var(--link-color);
opacity: 0.05;
}
+
+ &::after {
+ top: -5px;
+ left: -8px;
+ bottom: -5px;
+ right: -8px;
+ }
}
}