From aac1a1230fe0f6409871cf120c63f2cb8f7e54d6 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed, 22 Jan 2025 15:14:13 +0000 Subject: [PATCH 1/4] Init --- src/main/js/widgets/add/addform.scss | 3 +- src/main/scss/abstracts/_mixins.scss | 25 ++- src/main/scss/abstracts/_theme.scss | 86 +++++++++-- src/main/scss/base/_style.scss | 17 +- src/main/scss/components/_alert.scss | 8 +- src/main/scss/components/_app-bar.scss | 2 +- src/main/scss/components/_breadcrumbs.scss | 3 +- src/main/scss/components/_buttons.scss | 145 ++++-------------- src/main/scss/components/_cards.scss | 16 +- .../scss/components/_command-palette.scss | 9 +- src/main/scss/components/_dropdowns.scss | 39 +++-- src/main/scss/components/_notice.scss | 1 + src/main/scss/components/_notifications.scss | 4 +- .../components/_row-selection-controller.scss | 12 +- src/main/scss/components/_section.scss | 5 +- .../scss/components/_side-panel-tasks.scss | 18 +-- src/main/scss/components/_spinner.scss | 3 +- src/main/scss/components/_table.scss | 60 +++----- src/main/scss/components/_tabs.scss | 63 ++++---- src/main/scss/components/_tooltips.scss | 6 +- src/main/scss/form/_checkbox.scss | 22 +-- src/main/scss/form/_codemirror.scss | 2 +- src/main/scss/form/_file-upload.scss | 8 +- src/main/scss/form/_input.scss | 22 ++- src/main/scss/form/_layout.scss | 52 +------ src/main/scss/form/_radio.scss | 9 +- src/main/scss/form/_search-bar.scss | 2 +- src/main/scss/form/_select.scss | 22 ++- src/main/scss/form/_textarea.scss | 3 +- src/main/scss/form/_toggle-switch.scss | 22 ++- src/main/scss/pages/_about.scss | 17 +- src/main/scss/pages/_dashboard.scss | 2 +- src/main/scss/pages/_job.scss | 2 +- 33 files changed, 346 insertions(+), 364 deletions(-) diff --git a/src/main/js/widgets/add/addform.scss b/src/main/js/widgets/add/addform.scss index 6270004b00..140657ec88 100644 --- a/src/main/js/widgets/add/addform.scss +++ b/src/main/js/widgets/add/addform.scss @@ -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; diff --git a/src/main/scss/abstracts/_mixins.scss b/src/main/scss/abstracts/_mixins.scss index 7999284e1a..00e3ac00d7 100644 --- a/src/main/scss/abstracts/_mixins.scss +++ b/src/main/scss/abstracts/_mixins.scss @@ -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; + } + } + } } diff --git a/src/main/scss/abstracts/_theme.scss b/src/main/scss/abstracts/_theme.scss index 2aadb8c41b..cba11ac5c1 100644 --- a/src/main/scss/abstracts/_theme.scss +++ b/src/main/scss/abstracts/_theme.scss @@ -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); diff --git a/src/main/scss/base/_style.scss b/src/main/scss/base/_style.scss index d0a8e42237..001a44c73c 100644 --- a/src/main/scss/base/_style.scss +++ b/src/main/scss/base/_style.scss @@ -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); diff --git a/src/main/scss/components/_alert.scss b/src/main/scss/components/_alert.scss index 7ae9bbedd5..7380a43217 100644 --- a/src/main/scss/components/_alert.scss +++ b/src/main/scss/components/_alert.scss @@ -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); + } } diff --git a/src/main/scss/components/_app-bar.scss b/src/main/scss/components/_app-bar.scss index 6ccc36be80..8dbbf58eed 100644 --- a/src/main/scss/components/_app-bar.scss +++ b/src/main/scss/components/_app-bar.scss @@ -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; diff --git a/src/main/scss/components/_breadcrumbs.scss b/src/main/scss/components/_breadcrumbs.scss index 609737acef..593b95c285 100644 --- a/src/main/scss/components/_breadcrumbs.scss +++ b/src/main/scss/components/_breadcrumbs.scss @@ -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); diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index 0ffc8e65a6..113933bfd8 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -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; - - &::before { - background: var(--color) !important; - opacity: 1; - } - - &::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; +.jenkins-button--tertiary { + --button-background: transparent !important; + + &:not(:hover, &:active, &:focus) { + &::before { + border-color: transparent; + } } } @@ -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%; diff --git a/src/main/scss/components/_cards.scss b/src/main/scss/components/_cards.scss index 9a73b4f5bb..4de565b1c2 100644 --- a/src/main/scss/components/_cards.scss +++ b/src/main/scss/components/_cards.scss @@ -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); diff --git a/src/main/scss/components/_command-palette.scss b/src/main/scss/components/_command-palette.scss index bc3aca71cd..1d487915e9 100644 --- a/src/main/scss/components/_command-palette.scss +++ b/src/main/scss/components/_command-palette.scss @@ -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; } } diff --git a/src/main/scss/components/_dropdowns.scss b/src/main/scss/components/_dropdowns.scss index 6c0b230755..4e6a17cf7a 100644 --- a/src/main/scss/components/_dropdowns.scss +++ b/src/main/scss/components/_dropdowns.scss @@ -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 { - background: var(--item-background--hover); - animation: pulse 1s ease-in-out forwards; + &::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% { diff --git a/src/main/scss/components/_notice.scss b/src/main/scss/components/_notice.scss index 812e933f6c..aa58c1cb2a 100644 --- a/src/main/scss/components/_notice.scss +++ b/src/main/scss/components/_notice.scss @@ -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); diff --git a/src/main/scss/components/_notifications.scss b/src/main/scss/components/_notifications.scss index 1f474b1063..8e8ea554e2 100644 --- a/src/main/scss/components/_notifications.scss +++ b/src/main/scss/components/_notifications.scss @@ -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)) { diff --git a/src/main/scss/components/_row-selection-controller.scss b/src/main/scss/components/_row-selection-controller.scss index 1eee5ab1b6..cd984bc29e 100644 --- a/src/main/scss/components/_row-selection-controller.scss +++ b/src/main/scss/components/_row-selection-controller.scss @@ -12,7 +12,7 @@ outline: none; border: none; box-shadow: - 0 0 0 10px transparent, + var(--form-input-glow), inset 0 0 0 0.125rem var(--input-border); border-radius: 6px; transition: var(--standard-transition); @@ -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); } diff --git a/src/main/scss/components/_section.scss b/src/main/scss/components/_section.scss index 160655ed17..410fafb18c 100644 --- a/src/main/scss/components/_section.scss +++ b/src/main/scss/components/_section.scss @@ -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, diff --git a/src/main/scss/components/_side-panel-tasks.scss b/src/main/scss/components/_side-panel-tasks.scss index 034c07822f..a267f25030 100644 --- a/src/main/scss/components/_side-panel-tasks.scss +++ b/src/main/scss/components/_side-panel-tasks.scss @@ -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; + } + } } diff --git a/src/main/scss/components/_spinner.scss b/src/main/scss/components/_spinner.scss index 3454dc8d48..9654c18ce3 100644 --- a/src/main/scss/components/_spinner.scss +++ b/src/main/scss/components/_spinner.scss @@ -19,7 +19,8 @@ &::before { position: relative; margin-right: 0.5lh; - opacity: 0.2; + opacity: 0.3; + border-color: var(--text-color-secondary); } &::after { diff --git a/src/main/scss/components/_table.scss b/src/main/scss/components/_table.scss index 00ef3b3656..a860eeab75 100644 --- a/src/main/scss/components/_table.scss +++ b/src/main/scss/components/_table.scss @@ -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; + border-radius: 13px; - &::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; - } } } } diff --git a/src/main/scss/components/_tabs.scss b/src/main/scss/components/_tabs.scss index 3fc440d3dc..b7ac90c237 100644 --- a/src/main/scss/components/_tabs.scss +++ b/src/main/scss/components/_tabs.scss @@ -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 { diff --git a/src/main/scss/components/_tooltips.scss b/src/main/scss/components/_tooltips.scss index dabd16e1ef..90570a7ce3 100644 --- a/src/main/scss/components/_tooltips.scss +++ b/src/main/scss/components/_tooltips.scss @@ -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 { diff --git a/src/main/scss/form/_checkbox.scss b/src/main/scss/form/_checkbox.scss index 6e5633dd99..92614fefe5 100644 --- a/src/main/scss/form/_checkbox.scss +++ b/src/main/scss/form/_checkbox.scss @@ -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); } } diff --git a/src/main/scss/form/_codemirror.scss b/src/main/scss/form/_codemirror.scss index a34165e8ba..4a860e628b 100644 --- a/src/main/scss/form/_codemirror.scss +++ b/src/main/scss/form/_codemirror.scss @@ -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); diff --git a/src/main/scss/form/_file-upload.scss b/src/main/scss/form/_file-upload.scss index 1969d823ec..5c5f82f6c0 100644 --- a/src/main/scss/form/_file-upload.scss +++ b/src/main/scss/form/_file-upload.scss @@ -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); } } diff --git a/src/main/scss/form/_input.scss b/src/main/scss/form/_input.scss index 0d97b08162..633f1f883a 100644 --- a/src/main/scss/form/_input.scss +++ b/src/main/scss/form/_input.scss @@ -1,7 +1,7 @@ .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%; @@ -13,15 +13,21 @@ height 0s, padding 0s; - &:hover { - border-color: var(--input-border-hover); + &:not(:disabled) { + &:hover { + border-color: var(--input-border-hover); + } + + &:active, + &:focus { + outline: none; + border-color: var(--focus-input-border); + box-shadow: var(--form-input-glow--focus); + } } - &:active, - &:focus { - outline: none; - border-color: var(--focus-input-border); - box-shadow: var(--form-input-glow--focus); + &:disabled { + cursor: not-allowed; } } diff --git a/src/main/scss/form/_layout.scss b/src/main/scss/form/_layout.scss index 2b0706f537..77e5dd58af 100644 --- a/src/main/scss/form/_layout.scss +++ b/src/main/scss/form/_layout.scss @@ -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 { diff --git a/src/main/scss/form/_radio.scss b/src/main/scss/form/_radio.scss index 00a4e52615..6c4828cf59 100644 --- a/src/main/scss/form/_radio.scss +++ b/src/main/scss/form/_radio.scss @@ -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); } diff --git a/src/main/scss/form/_search-bar.scss b/src/main/scss/form/_search-bar.scss index 79d6bfd899..e8b25e63f9 100644 --- a/src/main/scss/form/_search-bar.scss +++ b/src/main/scss/form/_search-bar.scss @@ -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; diff --git a/src/main/scss/form/_select.scss b/src/main/scss/form/_select.scss index e8b2b2973b..12f7377bb6 100644 --- a/src/main/scss/form/_select.scss +++ b/src/main/scss/form/_select.scss @@ -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 { diff --git a/src/main/scss/form/_textarea.scss b/src/main/scss/form/_textarea.scss index db59314073..94af18dd05 100644 --- a/src/main/scss/form/_textarea.scss +++ b/src/main/scss/form/_textarea.scss @@ -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); diff --git a/src/main/scss/form/_toggle-switch.scss b/src/main/scss/form/_toggle-switch.scss index 5f7f46a7f5..33efe7d23c 100644 --- a/src/main/scss/form/_toggle-switch.scss +++ b/src/main/scss/form/_toggle-switch.scss @@ -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 { diff --git a/src/main/scss/pages/_about.scss b/src/main/scss/pages/_about.scss index 99eb40d933..4879090b29 100644 --- a/src/main/scss/pages/_about.scss +++ b/src/main/scss/pages/_about.scss @@ -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; diff --git a/src/main/scss/pages/_dashboard.scss b/src/main/scss/pages/_dashboard.scss index c66b39e450..e8251c2dad 100644 --- a/src/main/scss/pages/_dashboard.scss +++ b/src/main/scss/pages/_dashboard.scss @@ -1,6 +1,6 @@ @use "../abstracts/mixins"; -$min-button-size: 36px; +$min-button-size: 2.375rem; .jenkins-icon-size { display: flex; diff --git a/src/main/scss/pages/_job.scss b/src/main/scss/pages/_job.scss index b9675ee8a6..105817790a 100644 --- a/src/main/scss/pages/_job.scss +++ b/src/main/scss/pages/_job.scss @@ -94,7 +94,7 @@ } .app-builds-container__item { - @include mixins.item; + @include mixins.item($border: false); display: grid; grid-template-columns: auto 1fr auto; From 32e030eddc43580650e125db1968a06ec93eaf94 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed, 22 Jan 2025 15:56:59 +0000 Subject: [PATCH 2/4] Fix input height, fix codemirror gutter --- src/main/scss/form/_codemirror.scss | 3 +-- src/main/scss/form/_input.scss | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/scss/form/_codemirror.scss b/src/main/scss/form/_codemirror.scss index 4a860e628b..fb14e6bb9f 100644 --- a/src/main/scss/form/_codemirror.scss +++ b/src/main/scss/form/_codemirror.scss @@ -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); } } diff --git a/src/main/scss/form/_input.scss b/src/main/scss/form/_input.scss index 633f1f883a..d81ffb2cf7 100644 --- a/src/main/scss/form/_input.scss +++ b/src/main/scss/form/_input.scss @@ -5,6 +5,7 @@ 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 From 305513ab76177436b0717db9267f7b24665c7b9c Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue, 28 Jan 2025 09:56:54 +0000 Subject: [PATCH 3/4] Update _build.scss --- src/main/scss/pages/_build.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/main/scss/pages/_build.scss b/src/main/scss/pages/_build.scss index cb5e3298fa..b8f84d8aca 100644 --- a/src/main/scss/pages/_build.scss +++ b/src/main/scss/pages/_build.scss @@ -15,6 +15,7 @@ pre { background: transparent; + border: none; margin: 0; padding: 0; line-height: 1.75; From cec920b9be5f827e51e8f9411e05ea965bd7c7d3 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed, 29 Jan 2025 14:17:18 +0000 Subject: [PATCH 4/4] Fix incorrect border width --- src/main/scss/components/_row-selection-controller.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/scss/components/_row-selection-controller.scss b/src/main/scss/components/_row-selection-controller.scss index cd984bc29e..b816adf2a9 100644 --- a/src/main/scss/components/_row-selection-controller.scss +++ b/src/main/scss/components/_row-selection-controller.scss @@ -13,7 +13,7 @@ border: none; box-shadow: var(--form-input-glow), - inset 0 0 0 0.125rem var(--input-border); + inset 0 0 0 var(--jenkins-border-width) var(--input-border); border-radius: 6px; transition: var(--standard-transition); cursor: pointer;