diff --git a/core/src/main/resources/hudson/logging/LogRecorderManager/feeds.jelly b/core/src/main/resources/hudson/logging/LogRecorderManager/feeds.jelly
index 6f4ccb7f8d..856992369b 100644
--- a/core/src/main/resources/hudson/logging/LogRecorderManager/feeds.jelly
+++ b/core/src/main/resources/hudson/logging/LogRecorderManager/feeds.jelly
@@ -25,23 +25,17 @@ THE SOFTWARE.
-
diff --git a/core/src/main/resources/lib/hudson/rssBar.jelly b/core/src/main/resources/lib/hudson/rssBar.jelly
index c40d59d733..ba8b89b4eb 100644
--- a/core/src/main/resources/lib/hudson/rssBar.jelly
+++ b/core/src/main/resources/lib/hudson/rssBar.jelly
@@ -26,23 +26,17 @@ THE SOFTWARE.
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
index 1e59d61a31..127b6218f2 100644
--- a/war/src/main/less/base/style.less
+++ b/war/src/main/less/base/style.less
@@ -1413,6 +1413,7 @@ table.progress-bar.red td.progress-bar-done {
.logrecord-container {
border-radius: 10px;
overflow: hidden;
+ margin-bottom: var(--section-padding);
pre {
padding-top: 0;
diff --git a/war/src/main/less/modules/buttons-deprecated.less b/war/src/main/less/modules/buttons-deprecated.less
new file mode 100644
index 0000000000..8accfaa2ee
--- /dev/null
+++ b/war/src/main/less/modules/buttons-deprecated.less
@@ -0,0 +1,302 @@
+@import '../abstracts/theme.less';
+
+// Button: variant mixins
+
+.button-danger() {
+ color: var(--btn-text-color);
+ background-color: var(--danger);
+ border-color: var(--danger);
+
+ &:hover,
+ &:focus {
+ color: var(--btn-text-color);
+ background-color: var(--danger-hover);
+ border-color: var(--danger-hover);
+ }
+
+ &:focus {
+ box-shadow: 0 0 0 0.2rem var(--focus-btn-danger);
+ }
+
+ &:active {
+ color: var(--btn-text-color);
+ background-color: var(--danger-active);
+ border-color: var(--danger-active);
+ }
+}
+
+.button-primary() {
+ color: var(--btn-text-color);
+ background-color: var(--btn-primary-bg);
+ border-color: var(--btn-primary-bg);
+
+ &:hover,
+ &:focus {
+ color: var(--btn-text-color);
+ background-color: var(--btn-primary-bg-hover);
+ border-color: var(--btn-primary-bg-hover);
+ }
+
+ &:focus {
+ box-shadow: 0 0 0 0.2rem var(--focus-btn-primary);
+ }
+
+ &:active {
+ color: var(--btn-text-color);
+ background-color: var(--btn-primary-bg-active);
+ border-color: var(--btn-primary-bg-active);
+ }
+}
+
+.button-secondary() {
+ color: var(--btn-secondary-color);
+ border-color: var(--btn-secondary-border);
+ background-color: var(--btn-secondary-bg);
+
+ &:focus {
+ color: var(--btn-secondary-color--focus);
+ border-color: var(--btn-secondary-border--focus);
+ background-color: var(--btn-secondary-bg--focus);
+ box-shadow: 0 0 0 0.2rem var(--focus-btn-secondary);
+ }
+
+ // Hover MUST be AFTER the focus declaration for this outlined button.
+ // Otherwise, the hover styles will not be applied when hovering over a focused element
+ &:hover {
+ color: var(--btn-secondary-color--hover);
+ border-color: var(--btn-secondary-border--hover);
+ background-color: var(--btn-secondary-bg--hover);
+ }
+
+ &:active {
+ color: var(--btn-secondary-color--active);
+ border-color: var(--btn-secondary-border--active);
+ background-color: var(--btn-secondary-bg--active);
+ }
+}
+
+.button-link {
+ color: var(--primary);
+ background-color: transparent;
+ border-color: transparent;
+ font-weight: var(--btn-link-font-weight);
+
+ &:hover,
+ &:focus {
+ color: var(--btn-link-color--hover);
+ background-color: var(--btn-link-bg--hover);
+ border-color: var(--btn-link-bg--hover);
+ }
+
+ &:focus {
+ box-shadow: none;
+ }
+
+ &:active {
+ color: var(--btn-link-color--active);
+ background-color: var(--btn-link-bg--active);
+ border-color: var(--btn-link-bg--active);
+ }
+}
+
+.button-disabled {
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+// Button styles
+
+.yui-button {
+ display: inline-block;
+}
+
+.yui-button .first-child {
+ display: block;
+}
+
+.yui-button button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+a.yui-button:link,
+a.yui-button:visited {
+ box-sizing: border-box;
+ // vertical padding:
+ // 0.375rem == 6px == 32px (target height) - 4px (borders) - 16 (line) / 2
+ padding: 0.375rem 1rem;
+ margin-right: 0.25rem;
+ margin-left: 0.25rem;
+ min-width: 4.5rem;
+ min-height: 2rem;
+ cursor: pointer;
+ user-select: none;
+ font-size: var(--btn-font-size);
+ line-height: var(--btn-line-height);
+ font-weight: var(--btn-font-weight);
+ text-align: center;
+ vertical-align: middle;
+ text-decoration: none;
+ border: 2px solid;
+ border-radius: 4px;
+ transition:
+ color 0.15s ease-in-out,
+ background-color 0.15s ease-in-out,
+ border-color 0.15s ease-in-out;
+
+ .button-secondary();
+
+ &:focus {
+ outline: none;
+ }
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ & > span {
+ display: inline-block;
+ }
+
+ .svg-icon,
+ i {
+ width: 1rem;
+ height: 1rem;
+ font-size: 1rem;
+ vertical-align: top;
+ flex-shrink: 1;
+ }
+
+ .trailing-icon {
+ margin-left: 0.25rem;
+ }
+}
+
+.yui-button.danger button,
+input[type="button"].danger,
+input[type="reset"].danger,
+input[type="submit"].danger {
+ .button-danger();
+}
+
+.yui-button.primary button,
+input[type="button"].primary,
+input[type="reset"].primary,
+input[type="submit"].primary {
+ .button-primary();
+}
+
+.yui-button.link-button button,
+input[type="button"].link-button,
+input[type="reset"].link-button,
+input[type="submit"].link-button {
+ .button-link();
+}
+
+.yui-button.large-button button,
+input[type="button"].large-button,
+input[type="reset"].large-button,
+input[type="submit"].large-button,
+a.yui-button.large-button {
+ // vertical padding
+ // 0.5rem == 8px == 40px (target height) - 4px (borders) - 20 (line) / 2
+ padding: 0.5rem 1rem;
+ min-width: 6.5rem;
+ min-height: 2.5rem;
+ font-size: var(--btn-large-font-size);
+ line-height: var(--btn-large-line-height);
+
+ .svg-icon,
+ i {
+ vertical-align: top;
+ height: 1.25rem;
+ width: 1.25rem;
+ font-size: 1.25rem;
+ }
+}
+
+.yui-button-disabled button,
+.yui-button button:disabled,
+input[type="button"]:disabled,
+input[type="reset"]:disabled,
+input[type="submit"]:disabled,
+.yui-button-disabled input[type="button"],
+.yui-button-disabled input[type="reset"],
+.yui-button-disabled input[type="submit"] {
+ .button-disabled();
+}
+
+a.yui-button {
+ &.primary {
+ .button-primary();
+ }
+
+ &.danger {
+ .button-danger();
+ }
+
+ &.link-button {
+ .button-link();
+ }
+
+ &.disabled {
+ .button-disabled();
+ }
+}
+
+// Dropdown buttons
+.yui-button.yui-menu-button button,
+.yui-button.yui-split-button button {
+ // These buttons have a caret as the :after element
+ &::after {
+ display: inline-block;
+ margin-left: 0.4em;
+ vertical-align: 0.1875em;
+ content: "";
+ border-top: 0.35em solid;
+ border-right: 0.35em solid transparent;
+ border-bottom: 0;
+ border-left: 0.35em solid transparent;
+ }
+}
+
+.yui-button.yui-menu-button.yui-menu-button-active button,
+.yui-button.yui-split-button.yui-split-button-active button {
+ &::after {
+ border-bottom: 0.35em solid;
+ border-top: 0;
+ }
+}
+
+// Icon buttons
+
+.yui-button.icon-button button,
+a.yui-button.icon-button:link,
+a.yui-button.icon-button:visited {
+ padding: 0.25rem;
+ min-width: 2rem;
+ height: 2rem;
+
+ .svg-icon,
+ i {
+ width: 1rem;
+ height: 1rem;
+ font-size: 1rem;
+ }
+
+ .button-link();
+}
+
+.yui-button.icon-button.large-button button,
+a.yui-button.icon-button.large-button {
+ padding: 0.5rem;
+ min-width: 2.5rem;
+ height: 2.5rem;
+ padding: 0.625rem;
+
+ .svg-icon,
+ i {
+ width: 1.25rem;
+ height: 1.25rem;
+ font-size: 1.25rem;
+ }
+}
diff --git a/war/src/main/less/modules/buttons-temp.less b/war/src/main/less/modules/buttons-temp.less
deleted file mode 100644
index dc032fd11c..0000000000
--- a/war/src/main/less/modules/buttons-temp.less
+++ /dev/null
@@ -1,133 +0,0 @@
-.jenkins-button {
- appearance: none;
- position: relative;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- border: none;
- outline: none;
- margin: 0;
- padding: 0.5rem 0.8rem;
- font-size: 0.8rem;
- font-weight: 500;
- text-decoration: none !important;
- background: transparent;
- color: var(--text-color) !important;
- z-index: 0;
- border-radius: 6px;
- cursor: pointer;
- min-height: 36px;
- text-shadow: 0 1px 0 var(--background);
- white-space: nowrap;
- gap: 1ch;
-
- &::before,
- &::after {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: -1;
- opacity: 0.075;
- border-radius: inherit;
- transition: 0.2s ease;
- }
-
- &::before {
- background: currentColor;
- }
-
- &::after {
- box-shadow: inset 0 -1px 0 rgb(125, 125, 125), 0 0 0 10px transparent;
- }
-
- &:hover {
- &::before {
- opacity: 0.1125;
- }
- }
-
- &:active,
- &:focus {
- &::before {
- opacity: 0.15;
- }
-
- &::after {
- box-shadow: inset 0 -1px 0 rgb(125, 125, 125), 0 0 0 5px currentColor;
- }
- }
-
- svg {
- width: 16px;
- height: 16px;
- }
-}
-
-.jenkins-button--primary {
- color: var(--button-color--primary) !important;
- font-weight: 600;
- text-shadow: none;
-
- &::before,
- &::after {
- color: var(--primary);
- }
-
- &::before {
- opacity: 1;
- }
-
- &::after {
- opacity: 0.2;
- }
-
- &:hover {
- &::before {
- opacity: 0.9;
- }
- }
-
- &:active,
- &:focus {
- &::before {
- opacity: 0.8;
- }
- }
-}
-
-.jenkins-button--transparent {
- &::before {
- opacity: 0;
- }
-
- &::after {
- color: transparent;
- box-shadow: inset 0 -1px 0 transparent, 0 0 0 10px transparent;
- }
-
- &:hover,
- &:active,
- &:focus {
- &::after {
- color: currentColor;
- }
- }
-}
-
-@variants: {
- destructive: var(--red);
-}
-
-each(@variants, {
- .jenkins-button--@{key} {
- color: @value !important;
-
- &::after {
- background: rgba(125, 125, 125, 0.25);
- opacity: 0.1;
- }
- }
-});
diff --git a/war/src/main/less/modules/buttons.less b/war/src/main/less/modules/buttons.less
index aac9e00dbd..5b1ba88eb6 100644
--- a/war/src/main/less/modules/buttons.less
+++ b/war/src/main/less/modules/buttons.less
@@ -1,323 +1,142 @@
-@import '../abstracts/theme.less';
-
-// Button: variant mixins
-
-.button-danger() {
- color: var(--btn-text-color);
- background-color: var(--danger);
- border-color: var(--danger);
-
- &:hover,
- &:focus {
- color: var(--btn-text-color);
- background-color: var(--danger-hover);
- border-color: var(--danger-hover);
- }
-
- &:focus {
- box-shadow: 0 0 0 0.2rem var(--focus-btn-danger);
- }
-
- &:active {
- color: var(--btn-text-color);
- background-color: var(--danger-active);
- border-color: var(--danger-active);
- }
-}
-
-.button-primary() {
- color: var(--btn-text-color);
- background-color: var(--btn-primary-bg);
- border-color: var(--btn-primary-bg);
-
- &:hover,
- &:focus {
- color: var(--btn-text-color);
- background-color: var(--btn-primary-bg-hover);
- border-color: var(--btn-primary-bg-hover);
- }
-
- &:focus {
- box-shadow: 0 0 0 0.2rem var(--focus-btn-primary);
- }
-
- &:active {
- color: var(--btn-text-color);
- background-color: var(--btn-primary-bg-active);
- border-color: var(--btn-primary-bg-active);
- }
-}
-
-.button-secondary() {
- color: var(--btn-secondary-color);
- border-color: var(--btn-secondary-border);
- background-color: var(--btn-secondary-bg);
-
- &:focus {
- color: var(--btn-secondary-color--focus);
- border-color: var(--btn-secondary-border--focus);
- background-color: var(--btn-secondary-bg--focus);
- box-shadow: 0 0 0 0.2rem var(--focus-btn-secondary);
- }
-
- // Hover MUST be AFTER the focus declaration for this outlined button.
- // Otherwise, the hover styles will not be applied when hovering over a focused element
- &:hover {
- color: var(--btn-secondary-color--hover);
- border-color: var(--btn-secondary-border--hover);
- background-color: var(--btn-secondary-bg--hover);
- }
-
- &:active {
- color: var(--btn-secondary-color--active);
- border-color: var(--btn-secondary-border--active);
- background-color: var(--btn-secondary-bg--active);
- }
-}
-
-.button-link {
- color: var(--primary);
- background-color: transparent;
- border-color: transparent;
- font-weight: var(--btn-link-font-weight);
-
- &:hover,
- &:focus {
- color: var(--btn-link-color--hover);
- background-color: var(--btn-link-bg--hover);
- border-color: var(--btn-link-bg--hover);
- }
-
- &:focus {
- box-shadow: none;
- }
-
- &:active {
- color: var(--btn-link-color--active);
- background-color: var(--btn-link-bg--active);
- border-color: var(--btn-link-bg--active);
- }
-}
-
-.button-disabled {
- opacity: 0.5;
- pointer-events: none;
-}
-
-// Button styles
-
-.yui-button {
- display: inline-block;
-}
-
-.yui-button .first-child {
- display: block;
-}
-
-.yui-button button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"],
-a.yui-button:link,
-a.yui-button:visited {
- box-sizing: border-box;
- // vertical padding:
- // 0.375rem == 6px == 32px (target height) - 4px (borders) - 16 (line) / 2
- padding: 0.375rem 1rem;
- margin-right: 0.25rem;
- margin-left: 0.25rem;
- min-width: 4.5rem;
- min-height: 2rem;
- cursor: pointer;
- user-select: none;
- font-size: var(--btn-font-size);
- line-height: var(--btn-line-height);
- font-weight: var(--btn-font-weight);
- text-align: center;
- vertical-align: middle;
- text-decoration: none;
- border: 2px solid;
- border-radius: 4px;
- transition:
- color 0.15s ease-in-out,
- background-color 0.15s ease-in-out,
- border-color 0.15s ease-in-out;
-
- .button-secondary();
-
- &:focus {
- outline: none;
- }
-
+.jenkins-button {
+ appearance: none;
+ position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
+ border: none;
+ outline: none;
+ margin: 0;
+ padding: 0.5rem 0.8rem;
+ font-size: 0.8rem;
+ font-weight: 500;
+ text-decoration: none !important;
+ background: transparent;
+ color: var(--text-color) !important;
+ z-index: 0;
+ border-radius: 6px;
+ cursor: pointer;
+ min-height: 36px;
+ white-space: nowrap;
+ gap: 1ch;
- & > span {
- display: inline-block;
+ &::before,
+ &::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: -1;
+ opacity: 0.075;
+ border-radius: inherit;
+ transition: 0.2s ease;
}
- .svg-icon,
- i {
- width: 1rem;
- height: 1rem;
- font-size: 1rem;
- vertical-align: top;
- flex-shrink: 1;
+ &::before {
+ background: currentColor;
}
- .leading-icon {
- display: flex;
- margin-right: 0.25rem;
+ &::after {
+ box-shadow: inset 0 -1px 0 rgb(125, 125, 125), 0 0 0 10px transparent;
+ }
- svg {
- width: 16px;
- height: 16px;
+ &:hover {
+ &::before {
+ opacity: 0.1125;
}
}
- .trailing-icon {
- margin-left: 0.25rem;
+ &:active,
+ &:focus {
+ &::before {
+ opacity: 0.15;
+ }
+
+ &::after {
+ box-shadow: inset 0 -1px 0 rgb(125, 125, 125), 0 0 0 5px currentColor;
+ }
+ }
+
+ svg {
+ width: 16px;
+ height: 16px;
}
}
-.yui-button.danger button,
-input[type="button"].danger,
-input[type="reset"].danger,
-input[type="submit"].danger {
- .button-danger();
-}
+.jenkins-button--primary {
+ color: var(--button-color--primary) !important;
+ font-weight: 600;
-.yui-button.primary button,
-input[type="button"].primary,
-input[type="reset"].primary,
-input[type="submit"].primary {
- .button-primary();
-}
-
-.yui-button.link-button button,
-input[type="button"].link-button,
-input[type="reset"].link-button,
-input[type="submit"].link-button {
- .button-link();
-}
-
-.yui-button.large-button button,
-input[type="button"].large-button,
-input[type="reset"].large-button,
-input[type="submit"].large-button,
-a.yui-button.large-button {
- // vertical padding
- // 0.5rem == 8px == 40px (target height) - 4px (borders) - 20 (line) / 2
- padding: 0.5rem 1rem;
- min-width: 6.5rem;
- min-height: 2.5rem;
- font-size: var(--btn-large-font-size);
- line-height: var(--btn-large-line-height);
-
- .svg-icon,
- i {
- vertical-align: top;
- height: 1.25rem;
- width: 1.25rem;
- font-size: 1.25rem;
- }
-}
-
-.yui-button-disabled button,
-.yui-button button:disabled,
-input[type="button"]:disabled,
-input[type="reset"]:disabled,
-input[type="submit"]:disabled,
-.yui-button-disabled input[type="button"],
-.yui-button-disabled input[type="reset"],
-.yui-button-disabled input[type="submit"] {
- .button-disabled();
-}
-
-a.yui-button {
- &.primary {
- .button-primary();
- }
-
- &.danger {
- .button-danger();
- }
-
- &.link-button {
- .button-link();
- }
-
- &.disabled {
- .button-disabled();
- }
-}
-
-// Dropdown buttons
-.yui-button.yui-menu-button button,
-.yui-button.yui-split-button button {
- // These buttons have a caret as the :after element
+ &::before,
&::after {
- display: inline-block;
- margin-left: 0.4em;
- vertical-align: 0.1875em;
- content: "";
- border-top: 0.35em solid;
- border-right: 0.35em solid transparent;
- border-bottom: 0;
- border-left: 0.35em solid transparent;
+ color: var(--primary);
+ }
+
+ &::before {
+ opacity: 1;
}
-}
-.yui-button.yui-menu-button.yui-menu-button-active button,
-.yui-button.yui-split-button.yui-split-button-active button {
&::after {
- border-bottom: 0.35em solid;
- border-top: 0;
+ opacity: 0.2;
+ }
+
+ &:hover {
+ &::before {
+ opacity: 0.9;
+ }
+ }
+
+ &:active,
+ &:focus {
+ &::before {
+ opacity: 0.8;
+ }
}
}
-// Icon buttons
-
-.yui-button.icon-button button,
-a.yui-button.icon-button:link,
-a.yui-button.icon-button:visited {
- padding: 0.25rem;
- min-width: 2rem;
- height: 2rem;
-
- .svg-icon,
- i {
- width: 1rem;
- height: 1rem;
- font-size: 1rem;
+.jenkins-button--transparent {
+ &::before {
+ opacity: 0;
}
- .button-link();
-}
+ &::after {
+ color: transparent;
+ box-shadow: inset 0 -1px 0 transparent, 0 0 0 10px transparent;
+ }
-.yui-button.icon-button.large-button button,
-a.yui-button.icon-button.large-button {
- padding: 0.5rem;
- min-width: 2.5rem;
- height: 2.5rem;
- padding: 0.625rem;
-
- .svg-icon,
- i {
- width: 1.25rem;
- height: 1.25rem;
- font-size: 1.25rem;
+ &:hover,
+ &:active,
+ &:focus {
+ &::after {
+ color: currentColor;
+ }
}
}
+@variants: {
+ destructive: var(--red);
+}
+
+each(@variants, {
+ .jenkins-button--@{key} {
+ color: @value !important;
+
+ &::after {
+ background: rgba(125, 125, 125, 0.25);
+ opacity: 0.1;
+ }
+ }
+});
+
.jenkins-buttons-row {
display: flex;
align-items: center;
.jenkins-button {
margin-left: 0!important;
- margin-right: 1rem!important;
+ margin-right: 0.5rem!important;
}
.yui-button {
@@ -334,7 +153,7 @@ a.yui-button.icon-button.large-button {
justify-content: flex-end;
.jenkins-button {
- margin-left: 1rem!important;
+ margin-left: 0.5rem!important;
margin-right: 0!important;
}
diff --git a/war/src/main/less/modules/icon-size.less b/war/src/main/less/modules/icon-size.less
index be78c958e3..6ea5a5eaf4 100644
--- a/war/src/main/less/modules/icon-size.less
+++ b/war/src/main/less/modules/icon-size.less
@@ -3,45 +3,51 @@
align-items: center;
justify-content: space-between;
margin: 2rem 0;
-
+
&__items {
display: flex;
align-items: center;
-
+
ol {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
+ gap: 0.25rem;
}
-
+
li {
width: 32px;
- margin-right: 0.2rem;
-
- .yui-button {
+
+ .jenkins-button {
margin: 0!important;
padding: 0!important;
- width: 32px!important;
- height: 32px!important;
min-width: 0!important;
+ aspect-ratio: 1;
}
}
-
+
.jenkins-icon-size__items-item {
- height: 32px;
- width: 32px;
- border-radius: 4px;
- line-height: 32px;
- background: var(--btn-link-bg--hover);
- text-align: center;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ aspect-ratio: 1;
+ height: 36px;
+ width: 36px;
+ border-radius: 6px;
font-weight: var(--btn-link-font-weight);
font-size: var(--btn-font-size);
- }
-
- & > * {
- margin-right: 0.5rem;
+
+ &::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: 6px;
+ background: currentColor;
+ opacity: 0.05;
+ }
}
}
}
diff --git a/war/src/main/less/styles.less b/war/src/main/less/styles.less
index 15d06eaf31..1e46e19095 100644
--- a/war/src/main/less/styles.less
+++ b/war/src/main/less/styles.less
@@ -36,7 +36,7 @@ html {
@import './modules/badges';
@import './modules/breadcrumbs';
@import './modules/buttons';
-@import './modules/buttons-temp';
+@import './modules/buttons-deprecated';
@import './modules/content-blocks';
@import './modules/icon-size';
@import './modules/icons';