root
/
jenkins
mirror of https://github.com/jenkinsci/jenkins.git
1
0
Fork 0
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Improve accessibility and clean up components (#10198)

This commit is contained in:
Kris Stern 2025-02-01 03:42:44 +08:00 committed by GitHub
parent 6109053fa2 cec920b9be
commit d03a2e11c9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
34 changed files with 350 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/js/widgets/add/addform.scss
View File

@ -183,13 +183,12 @@
}
li {
@include mixins.item;
@include mixins.item($border: false);
-webkit-touch-callout: none;
user-select: none;
padding: 0.75rem 1rem;
min-height: 68px;
cursor: pointer;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25rem 1rem;

25
src/main/scss/abstracts/_mixins.scss
View File

@ -56,11 +56,17 @@
}
}
@mixin item {
@mixin item($border: true) {
position: relative;
appearance: none;
z-index: 0;
text-decoration: none !important;
border-radius: 0.66rem;
font-weight: normal;
border-radius: var(--form-input-border-radius);
cursor: pointer;
background: transparent;
outline: none;
border: none;
&::before,
&::after {
@ -74,11 +80,12 @@
}
&::before {
background-color: transparent;
background-color: var(--item-background);
border: var(--jenkins-border--subtle);
}
&::after {
box-shadow: 0 0 0 0.66rem transparent;
box-shadow: 0 0 0 0.5rem transparent;
}
&:focus-visible {
@ -102,7 +109,7 @@
}
&::after {
box-shadow: 0 0 0 0.33rem var(--item-box-shadow--focus);
box-shadow: 0 0 0 0.25rem var(--item-box-shadow--focus);
}
}
@ -113,4 +120,12 @@
}
}
}
@if $border == false {
&:not(:hover, &:active, &:focus) {
&::before {
border-color: transparent;
}
}
}
}

86
src/main/scss/abstracts/_theme.scss
View File

@ -80,6 +80,13 @@ $semantics: (
from var(--text-color) 96.8% 0.005 h / 0.8
);
// App bar
--bottom-app-bar-shadow: color-mix(
in sRGB,
var(--text-color-secondary) 7.5%,
transparent
);
// Alert call outs
--alert-success-text-color: var(--success-color);
--alert-success-bg-color: color-mix(
@ -125,8 +132,41 @@ $semantics: (
// Typography
--text-color-secondary: var(--secondary);
// Borders
--jenkins-border-width: 1.5px;
--jenkins-border-color: color-mix(
in sRGB,
var(--text-color-secondary) 12%,
var(--card-background)
);
--jenkins-border-color--subtle: color-mix(
in sRGB,
currentColor 1.5%,
transparent
);
/* This is a harsher border - for dividers, content blocks and more */
--jenkins-border: var(--jenkins-border-width) solid
var(--jenkins-border-color);
/* This is a subtle border - for increasing contrast on elements, such as buttons, menu and more */
--jenkins-border--subtle: var(--jenkins-border-width) solid
var(--jenkins-border-color--subtle);
--jenkins-border--subtle-shadow: 0 0 0 1.5px
var(--jenkins-border-color--subtle);
@media (resolution <= 1x) {
--jenkins-border-width: 2px;
}
@media (prefers-contrast: more) {
--focus-input-border: var(--text-color);
--jenkins-border-color: var(--text-color);
--jenkins-border-color--subtle: var(--text-color);
}
// Table
--table-background: oklch(from var(--text-color-secondary) l c h / 0.1);
--table-background: oklch(from var(--text-color-secondary) l c h / 0.075);
--table-header-foreground: var(--text-color);
--table-body-background: var(--background);
--table-body-foreground: var(--text-color);
@ -158,7 +198,8 @@ $semantics: (
// Command Palette
--command-palette-results-backdrop-filter: contrast(0.7) brightness(1.5)
saturate(1.4) blur(20px);
--command-palette-inset-shadow: inset 0 0 2px 2px rgb(255 255 255 / 0.1);
--command-palette-inset-shadow: inset 0 0 2px 2px rgb(255 255 255 / 0.1),
var(--jenkins-border--subtle-shadow);
::backdrop {
--command-palette-backdrop-background: radial-gradient(
@ -171,21 +212,23 @@ $semantics: (
// Tooltips
--tooltip-backdrop-filter: saturate(2) blur(20px);
--tooltip-color: var(--text-color);
--tooltip-box-shadow: 0 0 8px 2px rgb(0 0 30 / 0.05),
0 0 1px 1px rgb(0 0 20 / 0.025), 0 10px 20px rgb(0 0 20 / 0.15);
--tooltip-box-shadow: 0 0 8px 2px rgb(0 0 50 / 0.05),
var(--jenkins-border--subtle-shadow), 0 10px 50px rgb(0 0 20 / 0.1);
// Dropdowns
--dropdown-backdrop-filter: saturate(1.5) blur(20px);
--dropdown-box-shadow: 0 10px 30px rgb(0 0 20 / 0.2),
0 2px 10px rgb(0 0 20 / 0.05), inset 0 -1px 2px rgb(255 255 255 / 0.025);
--dropdown-box-shadow: var(--jenkins-border--subtle-shadow),
0 10px 30px rgb(0 0 20 / 0.1), 0 2px 10px rgb(0 0 20 / 0.05),
inset 0 -1px 2px rgb(255 255 255 / 0.025);
// Dialogs
::backdrop {
--dialog-backdrop-background: hsl(240 10% 20% / 0.8);
}
--dialog-box-shadow: 0 10px 40px rgb(0 0 20 / 0.15),
0 2px 15px rgb(0 0 20 / 0.05), inset 0 0 2px 2px rgb(255 255 255 / 0.025);
--dialog-box-shadow: var(--jenkins-border--subtle-shadow),
0 10px 40px rgb(0 0 20 / 0.15), 0 2px 15px rgb(0 0 20 / 0.05),
inset 0 0 2px 2px rgb(255 255 255 / 0.025);
// Dark link
--link-dark-color: var(--text-color);
@ -219,12 +262,20 @@ $semantics: (
--card-border-color--active: oklch(
from var(--text-color-secondary) l c h / 0.5
);
--card-border-width: 2px;
--card-border-width: var(--jenkins-border-width);
@media (prefers-contrast: more) {
--card-border-color: var(--text-color);
}
// Tab bar
--tabs-background: oklch(from var(--text-color-secondary) l c h / 0.1);
--tabs-item-background: transparent;
--tabs-item-foreground: var(--text-color);
--tabs-item-foreground: color-mix(
in sRGB,
var(--text-color-secondary),
var(--text-color)
);
--tabs-item-background--hover: rgb(0 0 0 / 0.05);
--tabs-item-foreground--hover: var(--text-color);
--tabs-item-background--active: rgb(0 0 0 / 0.1);
@ -268,14 +319,21 @@ $semantics: (
}
--form-label-font-weight: var(--font-bold-weight);
--form-input-padding: 0.625rem;
--form-input-padding: 0.5rem 0.625rem;
--form-input-border-radius: 0.625rem;
--form-input-glow: 0 0 0 10px transparent;
--form-input-glow--focus: 0 0 0 5px var(--focus-input-glow);
--pre-background: rgb(0 0 0 / 0.05);
--form-input-glow: 0 0 0 0.5rem transparent;
--form-input-glow--focus: 0 0 0 0.25rem var(--focus-input-glow);
--pre-background: var(--button-background);
--pre-color: var(--text-color);
--selection-color: oklch(from var(--accent-color) l c h / 0.2);
@media (prefers-contrast: more) {
--input-border: var(--text-color) !important;
--input-border-hover: var(--text-color) !important;
--form-input-glow--focus: 0 0 0 4px
color-mix(in sRGB, var(--text-color), transparent);
}
// Animations
--standard-transition: 0.3s ease;
--elastic-transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5);

17
src/main/scss/base/_style.scss
View File

@ -152,6 +152,7 @@ pre {
margin: 0 0 var(--section-padding);
padding: 0.8rem 1rem;
border-radius: var(--form-input-border-radius);
border: var(--jenkins-border--subtle);
background-color: var(--pre-background);
color: var(--pre-color);
font-family: var(--font-family-mono);
@ -290,21 +291,13 @@ pre.console {
padding: 1rem;
margin: 1rem 0;
word-break: break-word;
border-radius: 6px;
border-radius: var(--form-input-border-radius);
background-color: var(--button-background);
border: var(--jenkins-border--subtle);
z-index: 0;
--section-padding: 0.8rem;
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--text-color);
opacity: 0.05;
z-index: -1;
border-radius: inherit;
}
p:first-of-type {
margin-top: 0;
}
@ -536,7 +529,7 @@ table.fingerprint-in-build td {
top: 0;
left: 10px;
bottom: 0;
width: 2px;
width: var(--jenkins-border-width);
background: var(--input-border);
border-radius: 2px;
transition: var(--standard-transition);

8
src/main/scss/components/_alert.scss
View File

@ -2,8 +2,8 @@
.jenkins-alert {
font-size: var(--font-size-sm);
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
margin-bottom: var(--section-padding);
border: var(--jenkins-border-width) solid transparent;
border-radius: var(--form-input-border-radius);
strong {
@ -52,4 +52,8 @@
color: var(--alert-danger-text-color);
}
}
@media (prefers-contrast: more) {
border-color: var(--text-color);
}
}

2
src/main/scss/components/_app-bar.scss
View File

@ -151,7 +151,7 @@
top: -30px;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(#556, 0.075) 110%);
background: linear-gradient(transparent, var(--bottom-app-bar-shadow) 110%);
max-width: 100%;
height: 30px;
opacity: 0;

3
src/main/scss/components/_breadcrumbs.scss
View File

@ -30,7 +30,7 @@
padding: 0.2rem 0.4rem;
& > a {
@include mixins.item;
@include mixins.item($border: false);
display: inline-flex;
align-items: center;
@ -40,7 +40,6 @@
margin: 0;
padding: 0;
color: var(--text-color);
text-decoration: none;
margin-right: 0 !important;
transition: var(--standard-transition);

143
src/main/scss/components/_buttons.scss
View File

@ -1,34 +1,24 @@
@use "../abstracts/mixins";
.jenkins-button {
--item-background: var(--button-background);
--item-background--hover: var(--button-background--hover);
--item-background--active: var(--button-background--active);
--item-box-shadow--focus: var(--button-box-shadow--focus);
@include mixins.item;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
outline: none;
margin: 0;
padding: 0.5rem 0.9rem;
padding: 0.5rem 1rem;
font-size: var(--font-size-sm);
font-weight: normal;
text-decoration: none !important;
background: transparent;
color: var(--text-color) !important;
cursor: pointer;
min-height: 2.25rem;
min-height: 2.375rem;
white-space: nowrap;
gap: 1ch;
&::before {
background: var(--button-background);
}
svg {
width: 1.125rem;
height: 1.125rem;
@ -42,118 +32,41 @@
}
.jenkins-button--primary {
--button-background: oklch(from var(--accent-color) l c h);
--button-background--hover: oklch(from var(--accent-color) l c h / 0.9);
--button-background--active: oklch(from var(--accent-color) l c h / 0.8);
--button-box-shadow--focus: oklch(from var(--accent-color) l c h / 0.4);
color: var(--button-color--primary) !important;
&::before {
background: var(--accent-color) !important;
}
&::after {
box-shadow: 0 0 0 0.66rem var(--accent-color);
opacity: 0;
}
&:not(:disabled) {
&:hover {
&::before {
opacity: 0.9;
}
}
&:active,
&:focus-visible {
&::before {
opacity: 0.8;
}
&::after {
box-shadow: 0 0 0 0.33rem var(--accent-color);
opacity: 0.2;
}
}
}
}
.jenkins-button--tertiary {
&::before {
background: transparent;
}
}
// Support for custom colors
// Modifier classes must include 'color' in name to work
.jenkins-button[class*="color"] {
background: transparent;
--button-background: oklch(from currentColor l c h / 0.1);
--button-background--hover: oklch(from currentColor l c h / 0.15);
--button-background--active: oklch(from currentColor l c h / 0.25);
--button-box-shadow--focus: oklch(from currentColor l c h / 0.125);
color: var(--color) !important;
&::before {
background: currentColor !important;
opacity: 0.1;
}
&::after {
box-shadow: 0 0 0 0.66rem currentColor;
opacity: 0;
}
&:not(:disabled) {
&:hover {
&::before {
opacity: 0.15;
}
}
&:active {
&::before {
opacity: 0.2;
}
&::after {
box-shadow: 0 0 0 0.33rem currentColor;
opacity: 0.1;
}
}
}
}
.jenkins-button--primary[class*="color"] {
background: transparent;
--button-background: oklch(from var(--color) l c h);
--button-background--hover: oklch(from var(--color) l c h / 0.9);
--button-background--active: oklch(from var(--color) l c h / 0.8);
--button-box-shadow--focus: oklch(from var(--color) l c h / 0.4);
color: var(--background) !important;
}
.jenkins-button--tertiary {
--button-background: transparent !important;
&:not(:hover, &:active, &:focus) {
&::before {
background: var(--color) !important;
opacity: 1;
border-color: transparent;
}
&::after {
box-shadow: 0 0 0 0.66rem var(--color);
opacity: 0;
}
&:not(:disabled) {
&:hover {
&::before {
opacity: 0.9;
}
}
&:active,
&:focus-visible {
&::before {
opacity: 0.8;
}
&::after {
box-shadow: 0 0 0 0.33rem var(--color);
opacity: 0.3;
}
}
}
}
.jenkins-button--tertiary[class*="color"] {
&::before {
opacity: 0;
}
}
@ -249,7 +162,7 @@
in sRGB,
var(--success-color) 10%,
transparent
);
) !important;
--button-background--hover: var(--button-background);
--button-background--active: var(--button-background);
@ -352,13 +265,13 @@ $jenkins-split-button-border-radius: 0.2rem;
}
.stop-button-link {
--item-background: color-mix(in sRGB, var(--red) 15%, transparent);
--item-background--hover: color-mix(in sRGB, var(--red) 20%, transparent);
--item-background--active: color-mix(in sRGB, var(--red) 25%, transparent);
--item-box-shadow--focus: transparent;
@include mixins.item;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
@ -366,10 +279,6 @@ $jenkins-split-button-border-radius: 0.2rem;
height: 1rem;
border-radius: 0.25rem;
&::before {
background: color-mix(in sRGB, var(--red) 15%, transparent);
}
svg {
width: 87.5%;
height: 87.5%;

16
src/main/scss/components/_cards.scss
View File

@ -27,14 +27,22 @@ $card-padding: 1rem;
}
&:not(:hover) {
.jenkins-card__unveil {
color: var(--text-color-secondary) !important;
.jenkins-card__unveil,
.jenkins-card__reveal {
color: var(--text-color-secondary);
}
}
@media (prefers-contrast: more) {
.jenkins-card__unveil,
.jenkins-card__reveal {
color: var(--text-color) !important;
}
}
&:hover {
.jenkins-card__reveal {
color: var(--text-color) !important;
color: var(--text-color);
}
}
@ -42,7 +50,6 @@ $card-padding: 1rem;
display: flex;
flex-direction: column;
padding: 0 $card-padding $card-padding;
color: var(--text-color-secondary);
&:empty {
display: none;
@ -69,7 +76,6 @@ $card-padding: 1rem;
width: 26px;
height: 26px;
border-radius: 0.33rem;
color: var(--text-color-secondary) !important;
transition:
scale var(--standard-transition),
opacity var(--standard-transition);

9
src/main/scss/components/_command-palette.scss
View File

@ -86,6 +86,7 @@
max-width: unset;
input {
padding: 0 0.5rem 0 45px;
background: transparent !important;
--input-border: transparent;
@ -136,7 +137,7 @@
}
&__item {
@include mixins.item;
@include mixins.item($border: false);
--item-background--hover: color-mix(
in sRGB,
@ -152,19 +153,15 @@
display: flex;
align-items: center;
justify-content: flex-start;
background: transparent;
padding: 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--text-color) !important;
transition: var(--standard-transition);
box-shadow: 0 0 0 10px transparent;
border: none;
outline: none;
&--hover {
&::before {
background-color: var(--item-background--hover);
border: var(--jenkins-border--subtle) !important;
}
}

35
src/main/scss/components/_dropdowns.scss
View File

@ -1,9 +1,10 @@
@use "../abstracts/mixins";
$dropdown-padding: 0.4rem;
$dropdown-border-radius: 1rem;
$dropdown-padding: 0.375rem;
.tippy-box[data-theme~="dropdown"] {
border-radius: 15px;
border-radius: $dropdown-border-radius;
box-shadow: var(--dropdown-box-shadow);
outline: none !important;
background: color-mix(in sRGB, var(--background) 85%, transparent);
@ -76,22 +77,15 @@ $dropdown-padding: 0.4rem;
&__separator {
position: relative;
height: 0.125rem;
height: var(--jenkins-border-width);
margin: $dropdown-padding calc($dropdown-padding * -1);
border: none;
&::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--text-color-secondary);
opacity: 0.1;
}
background-color: var(--jenkins-border-color);
}
&__heading {
color: var(--text-color-secondary) !important;
margin: $dropdown-padding 0.55rem;
margin: $dropdown-padding 0.65rem;
font-size: 0.8125rem;
font-weight: var(--font-bold-weight);
opacity: 0.8;
@ -123,7 +117,7 @@ $dropdown-padding: 0.4rem;
--item-background--active: var(--button-background--active);
--item-box-shadow--focus: var(--button-box-shadow--focus);
@include mixins.item;
@include mixins.item($border: false);
appearance: none;
display: inline-flex;
@ -138,7 +132,7 @@ $dropdown-padding: 0.4rem;
text-decoration: none !important;
background: transparent;
color: var(--text-color) !important;
border-radius: 0.66rem;
border-radius: calc($dropdown-border-radius - $dropdown-padding);
cursor: pointer;
min-height: 36px;
white-space: nowrap;
@ -223,14 +217,25 @@ $dropdown-padding: 0.4rem;
&:hover {
.jenkins-dropdown__item--selected {
background: transparent;
&::before {
opacity: 0;
}
}
}
}
.jenkins-dropdown__item--selected {
&::before {
background: var(--item-background--hover);
border: var(--jenkins-border--subtle) !important;
animation: pulse 1s ease-in-out forwards;
}
&:hover {
&::before {
opacity: 1 !important;
}
}
@keyframes pulse {
50% {

1
src/main/scss/components/_notice.scss
View File

@ -6,6 +6,7 @@
gap: 1rem;
min-height: 15rem;
background: var(--button-background);
border: var(--jenkins-border--subtle);
border-radius: var(--form-input-border-radius);
font-size: var(--font-size-base);
margin-bottom: var(--section-padding);

4
src/main/scss/components/_notifications.scss
View File

@ -36,8 +36,8 @@
inset: 0;
border-radius: inherit;
z-index: -1;
background: var(--background);
opacity: 0.3;
background: oklch(from var(--background) l c h / 0.3);
border: var(--jenkins-border--subtle);
}
@supports not (backdrop-filter: blur(15px)) {

14
src/main/scss/components/_row-selection-controller.scss
View File

@ -12,8 +12,8 @@
outline: none;
border: none;
box-shadow:
0 0 0 10px transparent,
inset 0 0 0 0.125rem var(--input-border);
var(--form-input-glow),
inset 0 0 0 var(--jenkins-border-width) var(--input-border);
border-radius: 6px;
transition: var(--standard-transition);
cursor: pointer;
@ -21,14 +21,14 @@
&:hover {
box-shadow:
0 0 0 10px transparent,
var(--form-input-glow),
inset 0 0 0 0.3125rem var(--input-border-hover);
}
&:active,
&:focus {
box-shadow:
0 0 0 5px var(--focus-input-glow),
0 0 0 4px var(--focus-input-glow),
inset 0 0 0 0.3125rem var(--focus-input-border);
}
@ -61,19 +61,19 @@
&--all {
box-shadow:
0 0 0 10px transparent,
var(--form-input-glow),
inset 0 0 0 0.6875rem var(--focus-input-border);
&:hover {
box-shadow:
0 0 0 10px transparent,
var(--form-input-glow),
inset 0 0 0 1.375rem var(--focus-input-border);
}
&:active,
&:focus {
box-shadow:
0 0 0 5px var(--focus-input-glow),
0 0 0 4px var(--focus-input-glow),
inset 0 0 0 1.375rem var(--focus-input-border);
}

5
src/main/scss/components/_section.scss
View File

@ -1,7 +1,7 @@
@use "../abstracts/mixins";
.jenkins-section {
border-top: 2px solid var(--panel-border-color);
border-top: var(--jenkins-border);
padding: var(--section-padding) 0 0 0;
max-width: 1800px;
@ -55,7 +55,7 @@
}
.jenkins-section__item a {
@include mixins.item;
@include mixins.item($border: false);
display: flex;
text-decoration: none;
@ -90,6 +90,7 @@
border-radius: 100%;
pointer-events: none;
background: var(--item-background--active);
border: var(--jenkins-border--subtle);
}
img,

18
src/main/scss/components/_side-panel-tasks.scss
View File

@ -61,17 +61,11 @@ $background-outset: 0.7rem;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.55rem $background-outset;
padding: 0.5rem $background-outset;
gap: 0.65rem;
width: 100%;
cursor: pointer;
font-weight: normal !important;
font-size: var(--font-size-sm);
color: var(--text-color) !important;
background: transparent;
outline: none;
border: none;
text-decoration: none;
color: var(--text-color);
margin: 0;
transition: opacity var(--standard-transition);
@ -100,7 +94,7 @@ $background-outset: 0.7rem;
}
&--active {
font-weight: 500 !important;
font-weight: 450;
cursor: default;
svg * {
@ -115,4 +109,10 @@ $background-outset: 0.7rem;
box-shadow: none !important;
}
}
&:not(:hover, &:active, &:focus, &--active) {
&::before {
border-color: transparent;
}
}
}

3
src/main/scss/components/_spinner.scss
View File

@ -19,7 +19,8 @@
&::before {
position: relative;
margin-right: 0.5lh;
opacity: 0.2;
opacity: 0.3;
border-color: var(--text-color-secondary);
}
&::after {

58
src/main/scss/components/_table.scss
View File

@ -6,10 +6,12 @@
position: relative;
width: 100%;
background: var(--table-background);
border-radius: calc(var(--table-border-radius) + 4px);
border: 4px solid var(--table-background);
border-bottom-width: 2px;
border-spacing: 0 2px;
border-radius: calc(
var(--table-border-radius) + (var(--card-border-width) * 2)
);
border: calc(var(--card-border-width) * 2) solid var(--table-background);
border-bottom-width: var(--card-border-width);
border-spacing: 0 var(--card-border-width);
background-clip: padding-box;
margin-bottom: var(--section-padding);
@ -18,8 +20,8 @@
&::before {
content: "";
position: absolute;
inset: -4px -4px -2px;
border: var(--card-border-width) solid var(--table-border-color);
inset: -3px -3px -2px;
border: var(--jenkins-border--subtle);
border-radius: inherit;
pointer-events: none;
}
@ -38,8 +40,8 @@
padding-top: calc(var(--table-padding) * 0.9);
padding-bottom: calc((var(--table-padding) * 0.9) + 2px);
padding-left: 1.6rem;
font-weight: var(--font-bold-weight);
font-size: var(--font-size-sm);
font-weight: var(--font-bold-weight);
&[align="center"] {
text-align: center;
@ -257,7 +259,7 @@
&__button,
.sortheader,
&__link {
@include mixins.item;
@include mixins.item($border: false);
align-items: center;
justify-content: center;
@ -283,39 +285,23 @@
}
&__badge {
@include mixins.item;
--item-background: color-mix(in sRGB, currentColor 5%, transparent);
--item-background--hover: color-mix(in sRGB, currentColor 10%, transparent);
--item-background--active: color-mix(
in sRGB,
currentColor 15%,
transparent
);
--item-box-shadow--focus: color-mix(in sRGB, currentColor 5%, transparent);
margin-left: 1rem !important;
&::before {
inset: -5px -8px;
border-radius: 13px;
background: currentColor;
opacity: 0.05;
}
&::before,
&::after {
inset: -5px -8px;
box-shadow: 0 0 0 10px currentColor;
opacity: 0;
}
&:hover {
&::before {
background: currentColor;
border-radius: 6px;
}
}
&:active,
&:focus {
&::before {
background: currentColor;
border-radius: 6px;
}
&::after {
box-shadow: 0 0 0 5px currentColor;
opacity: 0.025;
}
}
}
}

63
src/main/scss/components/_tabs.scss
View File

@ -1,3 +1,7 @@
@use "../abstracts/mixins";
$border-radius: 100px;
.tabBarFrame {
position: relative;
}
@ -7,8 +11,8 @@
display: inline-flex;
align-items: center;
flex-wrap: wrap;
background: var(--tabs-background);
border-radius: var(--tabs-border-radius);
background: var(--button-background);
border-radius: $border-radius;
padding: 2px;
margin-bottom: var(--section-padding);
@ -16,7 +20,7 @@
content: "";
position: absolute;
inset: 0;
border: var(--card-border-width) solid var(--tabs-border-color);
border: var(--jenkins-border--subtle);
border-radius: inherit;
pointer-events: none;
}
@ -27,38 +31,28 @@
}
.tabBar .tab a {
position: relative;
@include mixins.item($border: false);
display: flex;
align-items: center;
justify-content: center;
min-width: 3rem;
text-decoration: none;
margin: 2px;
padding: 0.4rem 1.2rem;
border-radius: 100px;
background: var(--tabs-item-background);
min-height: 36px;
padding: 0 1.2rem;
border-radius: $border-radius;
color: var(--tabs-item-foreground);
font-weight: var(--font-bold-weight);
font-weight: normal;
font-size: var(--font-size-sm);
transition: var(--standard-transition);
cursor: pointer;
min-width: 3.75rem;
&:hover {
background: var(--tabs-item-background--hover);
color: var(--tabs-item-foreground--hover);
}
&:active,
&:focus {
outline: none;
background: var(--tabs-item-background--active);
color: var(--tabs-item-foreground--active);
&::before,
&::after {
inset: 2px;
}
}
.tabBar .tab .addTab svg {
width: 1.25rem;
height: 1.25rem;
width: 1.125rem;
height: 1.125rem;
}
.tabBar .tab [type="radio"] {
@ -66,10 +60,25 @@
}
.tabBar .tab.active a {
background: var(--tabs-item-background--selected);
color: var(--tabs-item-foreground--selected);
z-index: 2;
cursor: default;
font-weight: 450;
color: var(--tabs-item-foreground--active);
&::before {
background-clip: padding-box;
background-color: var(--tabs-item-background--selected) !important;
border: var(--jenkins-border--subtle) !important;
}
&::after {
display: none;
}
&::before,
&::after {
inset: 0;
}
}
.jenkins-tab-pane__title {

6
src/main/scss/components/_tooltips.scss
View File

@ -36,7 +36,7 @@
position: absolute;
inset: 0;
border-radius: 0.375rem;
border: 0.1rem solid var(--text-color-secondary);
border: var(--jenkins-border-width) solid var(--text-color-secondary);
opacity: 0.3;
mask-image: linear-gradient(
-45deg,
@ -101,8 +101,8 @@
position: absolute;
inset: 0;
border-radius: 0.375rem;
border: 0.1rem solid var(--text-color-secondary);
opacity: 0.3;
border: var(--jenkins-border-width) solid var(--text-color-secondary);
opacity: 0.2;
}
svg {

22
src/main/scss/form/_checkbox.scss
View File

@ -32,7 +32,7 @@
& + label {
&::before {
box-shadow:
0 0 0 5px var(--focus-input-glow),
var(--form-input-glow--focus),
inset 0 0 0 5px var(--focus-input-border);
}
}
@ -44,7 +44,7 @@
& + label {
&::before {
box-shadow:
0 0 0 5px var(--focus-input-glow),
var(--form-input-glow--focus),
inset 0 0 0 12px var(--focus-input-border);
}
}
@ -58,7 +58,7 @@
& + label {
&::before {
box-shadow:
0 0 0 5px var(--focus-input-glow),
var(--form-input-glow--focus),
inset 0 0 0 12px var(--focus-input-border);
}
}
@ -71,7 +71,7 @@
&:focus {
&::before {
box-shadow:
0 0 0 5px var(--focus-input-glow),
var(--form-input-glow--focus),
inset 0 0 0 12px var(--focus-input-border);
}
}
@ -80,7 +80,7 @@
& + label {
&::before {
box-shadow:
0 0 0 10px transparent,
var(--form-input-glow),
inset 0 0 0 12px var(--focus-input-border);
}
@ -97,7 +97,7 @@
&::before {
opacity: 0.35 !important;
box-shadow:
0 0 0 10px transparent,
var(--form-input-glow),
inset 0 0 0 2px var(--input-border) !important;
}
}
@ -106,7 +106,7 @@
& + label {
&::before {
box-shadow:
0 0 0 10px transparent,
var(--form-input-glow),
inset 0 0 0 12px var(--focus-input-border) !important;
}
@ -138,8 +138,8 @@
transition: var(--standard-transition);
margin-right: 11px;
box-shadow:
0 0 0 10px transparent,
inset 0 0 0 2px var(--input-border);
var(--form-input-glow),
inset 0 0 0 var(--jenkins-border-width) var(--input-border);
background: var(--input-color);
}
@ -171,7 +171,7 @@
&:hover {
&::before {
box-shadow:
0 0 0 10px transparent,
var(--form-input-glow),
inset 0 0 0 5px var(--input-border-hover);
}
}
@ -180,7 +180,7 @@
&:focus {
&::before {
box-shadow:
0 0 0 5px var(--focus-input-glow),
var(--form-input-glow--focus),
inset 0 0 0 5px var(--focus-input-border);
}
}

5
src/main/scss/form/_codemirror.scss
View File

@ -1,7 +1,7 @@
.CodeMirror {
display: block;
background: var(--input-color);
border: 2px solid var(--input-border);
border: var(--jenkins-border-width) solid var(--input-border);
border-radius: var(--form-input-border-radius);
width: 100%;
box-shadow: var(--form-input-glow);
@ -48,8 +48,7 @@
}
.CodeMirror-gutter-text {
padding: var(--form-input-padding) calc(var(--form-input-padding) * 0.5)
var(--form-input-padding) var(--form-input-padding);
padding: 0.5rem calc(0.625rem * 0.5) 0.625rem 0.5rem;
color: var(--text-color-secondary);
}
}

8
src/main/scss/form/_file-upload.scss
View File

@ -24,7 +24,6 @@
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
outline: none;
margin: 0 1rem 0 0;
padding: 0.5rem 0.85rem 0.5rem 2.5rem;
@ -34,7 +33,7 @@
padding: 0.5rem 0.85rem;
}
font-size: 0.8rem;
font-size: var(--font-size-sm);
font-weight: normal;
color: var(--text-color);
border-radius: var(--form-input-border-radius);
@ -43,7 +42,8 @@
white-space: nowrap;
background: var(--button-background);
transition: var(--standard-transition);
box-shadow: 0 0 0 10px transparent;
box-shadow: var(--form-input-glow);
border: var(--jenkins-border--subtle);
&:hover {
background: var(--button-background--hover);
@ -51,7 +51,7 @@
&:active {
background: var(--button-background--active);
box-shadow: 0 0 0 5px var(--button-box-shadow--focus);
box-shadow: 0 0 0 4px var(--button-box-shadow--focus);
}
}

9
src/main/scss/form/_input.scss
View File

@ -1,10 +1,11 @@
.jenkins-input {
display: block;
background: var(--input-color);
border: 2px solid var(--input-border);
border: var(--jenkins-border-width) solid var(--input-border);
padding: var(--form-input-padding);
border-radius: var(--form-input-border-radius);
width: 100%;
min-height: 2.375rem;
box-shadow: var(--form-input-glow);
// Set height transition to 0s as vertical resizing has a delay/lag otherwise
@ -13,6 +14,7 @@
height 0s,
padding 0s;
&:not(:disabled) {
&:hover {
border-color: var(--input-border-hover);
}
@ -25,6 +27,11 @@
}
}
&:disabled {
cursor: not-allowed;
}
}
input,
textarea,
select {

52
src/main/scss/form/_layout.scss
View File

@ -1,3 +1,5 @@
@use "../abstracts/mixins";
.jenkins-form {
max-width: var(--form-item-max-width);
}
@ -70,6 +72,8 @@
align-items: center;
background-color: var(--button-background);
border-radius: var(--form-input-border-radius);
outline: var(--jenkins-border--subtle);
outline-offset: calc(var(--jenkins-border-width) * -1);
padding: 0 1rem;
gap: 1.5rem;
@ -89,12 +93,14 @@
}
.jenkins-help-button {
position: relative;
@include mixins.item;
--item-background: var(--button-background);
display: inline-flex;
justify-content: center;
align-items: center;
margin-left: 1ch;
color: var(--text-color) !important;
border-radius: 100%;
span {
@ -110,47 +116,6 @@
mask-position: center;
mask-repeat: no-repeat;
}
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--text-color-secondary);
opacity: 0.1;
border-radius: inherit;
transition: var(--standard-transition);
}
&::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid
color-mix(in sRGB, var(--text-color-secondary), transparent);
box-shadow: var(--form-input-glow);
border-radius: inherit;
opacity: 0.1;
transition: var(--standard-transition);
}
&:hover {
&::before {
opacity: 0.2;
}
}
&:active,
&:focus {
outline: none;
&::before {
opacity: 0.3;
}
&::after {
box-shadow: 0 0 0 5px var(--text-color);
}
}
}
.jenkins-select-help {
@ -170,7 +135,6 @@
gap: 0.45rem;
margin-left: 0.4rem;
font-size: 0.8rem;
font-weight: var(--font-bold-weight);
cursor: default;
svg {

9
src/main/scss/form/_radio.scss
View File

@ -1,10 +1,9 @@
$jenkins-radio-size: 1.375rem;
$jenkins-radio-border-size: 0.125rem;
$jenkins-radio-border-size: 1.5px;
$jenkins-radio-border-hover-size: 0.3125rem;
$jenkins-radio-border-active-size: 0.5rem;
$jenkins-radio-border-checked-size: 0.4rem;
$jenkins-radio-glow-size: 0.625rem;
$jenkins-radio-glow-active-size: 0.3125rem;
$jenkins-radio-glow-size: 0.5rem;
.jenkins-radio-help-wrapper {
display: flex;
@ -37,7 +36,7 @@ $jenkins-radio-glow-active-size: 0.3125rem;
&:active {
& + label::before {
box-shadow:
0 0 0 $jenkins-radio-glow-active-size var(--focus-input-glow),
var(--form-input-glow--focus),
inset 0 0 0 $jenkins-radio-border-active-size
var(--focus-input-border);
}
@ -62,7 +61,7 @@ $jenkins-radio-glow-active-size: 0.3125rem;
&:active {
& + label::before {
box-shadow:
0 0 0 $jenkins-radio-glow-active-size var(--focus-input-glow),
var(--form-input-glow--focus),
inset 0 0 0 $jenkins-radio-border-active-size
var(--focus-input-border);
}

2
src/main/scss/form/_search-bar.scss
View File

@ -153,7 +153,7 @@
--search-bar-height: 3rem;
width: 100%;
margin-block: -6px;
margin-block: -5px;
@media (min-width: breakpoints.$tablet-breakpoint) {
max-width: 50vw;

22
src/main/scss/form/_select.scss
View File

@ -8,26 +8,28 @@
top: 0;
right: 13px;
bottom: 0;
width: 12px;
width: 0.625rem;
background-color: currentColor;
mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='336px' height='192px' viewBox='0 0 336 192' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3ePath%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='arrow' transform='translate(0.000000, 0.000000)' fill='%23FF0000' fill-rule='nonzero'%3e%3cpath d='M7.02943725,7.02943725 C16.3053957,-2.24652118 31.2852799,-2.34214962 40.6788451,6.74255194 L40.9705627,7.02943725 L168,134.059 L295.029437,7.02943725 C304.305396,-2.24652118 319.28528,-2.34214962 328.678845,6.74255194 L328.970563,7.02943725 C338.246521,16.3053957 338.34215,31.2852799 329.257448,40.6788451 L328.970563,40.9705627 L184.970563,184.970563 C175.694604,194.246521 160.71472,194.34215 151.321155,185.257448 L151.029437,184.970563 L7.02943725,40.9705627 C-2.34314575,31.5979797 -2.34314575,16.4020203 7.02943725,7.02943725 Z' id='Path'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
pointer-events: none;
transition: translate var(--elastic-transition);
}
&__input {
appearance: none;
display: block;
border: 2px solid var(--input-border);
border: var(--jenkins-border-width) solid var(--input-border);
padding: var(--form-input-padding);
width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255
max-width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255
border-radius: var(--form-input-border-radius);
box-shadow: 0 0 0 10px transparent;
box-shadow: var(--form-input-glow);
transition: var(--standard-transition);
min-height: 38px;
cursor: pointer;
&:hover {
border-color: var(--input-border-hover);
@ -37,27 +39,33 @@
&:focus {
outline: none;
border-color: var(--focus-input-border);
box-shadow: 0 0 0 5px var(--focus-input-glow);
box-shadow: var(--form-input-glow--focus);
}
&:disabled {
pointer-events: none;
}
}
&:hover {
&::after {
translate: 0 1px;
}
}
}
.jenkins-multi-select {
position: relative;
width: 100%;
border: 2px solid var(--input-border);
border: var(--jenkins-border-width) solid var(--input-border);
border-radius: var(--form-input-border-radius);
box-shadow: 0 0 0 10px transparent;
box-shadow: var(--form-input-glow);
transition: var(--standard-transition);
outline: none;
&:focus {
border-color: var(--focus-input-border);
box-shadow: 0 0 0 5px var(--focus-input-glow);
box-shadow: var(--form-input-glow--focus);
}
&:disabled {

3
src/main/scss/form/_textarea.scss
View File

@ -6,7 +6,8 @@
}
.textarea-preview {
background-color: var(--very-light-grey);
background-color: var(--button-background);
border: var(--jenkins-border--subtle);
padding: var(--form-input-padding);
margin-top: 0.5rem;
border-radius: var(--form-input-border-radius);

22
src/main/scss/form/_toggle-switch.scss
View File

@ -69,6 +69,13 @@
&:active,
&:focus {
&::before {
box-shadow:
inset 0 0 0 1.5px
color-mix(in sRGB, var(--text-color-secondary) 9%, transparent),
var(--form-input-glow--focus);
}
&::after {
left: 20px;
width: 25px;
@ -101,6 +108,7 @@
cursor: pointer;
line-height: 30px;
font-weight: var(--form-label-font-weight);
user-select: none;
&::before {
display: inline-block;
@ -113,8 +121,9 @@
transition: var(--standard-transition);
margin-right: 1rem;
box-shadow:
inset 0 0 0 1px rgb(0 0 0 / 0.05),
0 0 0 10px transparent;
inset 0 0 0 1.5px
color-mix(in sRGB, var(--text-color-secondary) 9%, transparent),
var(--form-input-glow);
}
&::after {
@ -132,7 +141,8 @@
mask-position: center;
border-radius: 100px;
transition: var(--standard-transition);
box-shadow: 0 1px 0 rgb(0 0 0 / 0.1);
box-shadow: 0 0 0 1.5px
color-mix(in sRGB, var(--text-color-secondary) 9%, transparent);
}
&:hover::before {
@ -143,8 +153,10 @@
&:focus {
&::before {
box-shadow:
inset 0 0 0 1px rgb(0 0 0 / 0.05),
0 0 0 5px var(--focus-input-glow);
inset 0 0 0 1.5px
color-mix(in sRGB, var(--text-color-secondary) 9%, transparent),
0 0 0 4px
color-mix(in sRGB, var(--text-color-secondary) 25%, transparent);
}
&::after {

17
src/main/scss/pages/_about.scss
View File

@ -7,15 +7,18 @@
pointer-events: none;
margin-bottom: var(--section-padding);
overflow: hidden;
mask-border-source: url("data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 22.5C0 15.5109 0 12.0163 1.14181 9.25975C2.66422 5.58433 5.58433 2.66422 9.25975 1.14181C12.0163 0 15.5109 0 22.5 0C29.4891 0 32.9837 0 35.7402 1.14181C39.4157 2.66422 42.3358 5.58433 43.8582 9.25975C45 12.0163 45 15.5109 45 22.5C45 29.4891 45 32.9837 43.8582 35.7402C42.3358 39.4157 39.4157 42.3358 35.7402 43.8582C32.9837 45 29.4891 45 22.5 45C15.5109 45 12.0163 45 9.25975 43.8582C5.58433 42.3358 2.66422 39.4157 1.14181 35.7402C0 32.9837 0 29.4891 0 22.5Z' fill='%23D9D9D9'/%3E%3C/svg%3E%0A");
mask-border-slice: 49% fill;
border-radius: 1rem;
&::before {
&::before,
&::after {
content: "";
position: absolute;
z-index: 1;
}
&::before {
width: 120%;
aspect-ratio: 1;
z-index: 1;
background: repeating-conic-gradient(
var(--background) 0deg,
rgb(100 100 100 / 0.25) 20deg
@ -24,6 +27,12 @@
opacity: 0.25;
}
&::after {
inset: 0;
border: var(--jenkins-border--subtle);
border-radius: inherit;
}
img {
height: 7.5rem;
z-index: 1;

1
src/main/scss/pages/_build.scss
View File

@ -15,6 +15,7 @@
pre {
background: transparent;
border: none;
margin: 0;
padding: 0;
line-height: 1.75;

2
src/main/scss/pages/_dashboard.scss
View File

@ -1,6 +1,6 @@
@use "../abstracts/mixins";
$min-button-size: 36px;
$min-button-size: 2.375rem;
.jenkins-icon-size {
display: flex;

2
src/main/scss/pages/_job.scss
View File

@ -94,7 +94,7 @@
}
.app-builds-container__item {
@include mixins.item;
@include mixins.item($border: false);
display: grid;
grid-template-columns: auto 1fr auto;