From 7f182a840fc3e100b77370af745e1a4dd32814c2 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Fri, 10 Jan 2025 11:43:55 +0000 Subject: [PATCH 01/38] Init --- .../resources/hudson/AboutJenkins/index.jelly | 3 +- .../SimplePageDecorator/simple-branding.jelly | 5 +- .../main/resources/lib/layout/branding.jelly | 8 + src/main/scss/components/_branding.scss | 162 ++++++++++++++++++ src/main/scss/components/_index.scss | 1 + src/main/scss/pages/_about.scss | 111 +----------- src/main/scss/pages/_sign-in-register.scss | 95 +--------- 7 files changed, 185 insertions(+), 200 deletions(-) create mode 100644 core/src/main/resources/lib/layout/branding.jelly create mode 100644 src/main/scss/components/_branding.scss diff --git a/core/src/main/resources/hudson/AboutJenkins/index.jelly b/core/src/main/resources/hudson/AboutJenkins/index.jelly index 6d589663f576..007b4466d957 100644 --- a/core/src/main/resources/hudson/AboutJenkins/index.jelly +++ b/core/src/main/resources/hudson/AboutJenkins/index.jelly @@ -32,8 +32,7 @@ THE SOFTWARE.
-
- ${%logo} +
diff --git a/core/src/main/resources/jenkins/model/SimplePageDecorator/simple-branding.jelly b/core/src/main/resources/jenkins/model/SimplePageDecorator/simple-branding.jelly index 20997b85bb24..f2b2a97fbd11 100644 --- a/core/src/main/resources/jenkins/model/SimplePageDecorator/simple-branding.jelly +++ b/core/src/main/resources/jenkins/model/SimplePageDecorator/simple-branding.jelly @@ -22,9 +22,8 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. --> - + diff --git a/core/src/main/resources/lib/layout/branding.jelly b/core/src/main/resources/lib/layout/branding.jelly new file mode 100644 index 000000000000..5d9d6ed2596e --- /dev/null +++ b/core/src/main/resources/lib/layout/branding.jelly @@ -0,0 +1,8 @@ + + +
+
+ ${%Jenkins illustration} +
+
+ diff --git a/src/main/scss/components/_branding.scss b/src/main/scss/components/_branding.scss new file mode 100644 index 000000000000..8069a405f090 --- /dev/null +++ b/src/main/scss/components/_branding.scss @@ -0,0 +1,162 @@ +@property --rotation { + syntax: ""; + initial-value: 0deg; + inherits: false; +} + +@keyframes sunburst-rotation { + to { + --rotation: 360deg; + } +} + +$positions: ( + (75%, 25%), // Top-right + (75%, 50%), // Center-right + (75%, 75%), // Bottom-right + (50%, 75%), // Bottom-center + (25%, 75%), // Bottom-left + (25%, 50%), // Center-left + (25%, 25%), // Top-left + (50%, 25%) // Top-center +); + +// Generate @property definitions for each --x{index} and --y{index} +@mixin generate-properties($positions) { + @for $i from 1 through length($positions) { + @property --x#{$i} { + syntax: ""; + initial-value: nth(nth($positions, $i), 1); // Use initial value from positions + inherits: false; + } + + @property --y#{$i} { + syntax: ""; + initial-value: nth(nth($positions, $i), 2); // Use initial value from positions + inherits: false; + } + } +} + +@mixin generate-keyframes($positions) { + $total: length($positions); + + @keyframes aurora { + @for $i from 1 through $total { + $step: $i / $total * 100%; // Calculate the percentage for this step + $position: nth($positions, $i); + $x: nth($position, 1); + $y: nth($position, 2); + + #{$step} { + @for $j from 1 through $total { + $current-position: nth($positions, ($i + $j - 1) % $total + 1); + $current-x: nth($current-position, 1); + $current-y: nth($current-position, 2); + + --x#{$j}: #{$current-x}; + --y#{$j}: #{$current-y}; + } + } + } + } +} + +@mixin generate-gradients($positions) { + $colors: (var(--light-purple), var(--light-orange), var(--light-blue), var(--light-red), var(--light-red), var(--light-cyan), var(--light-indigo), var(--light-pink)); // Define colors + $gradient-list: (); + + @for $i from 1 through length($positions) { + $color: nth($colors, $i); // Get the color for this gradient + $gradient: radial-gradient(circle at var(--x#{$i}) var(--y#{$i}), #{$color} 0%, transparent 50%); + $gradient-list: append($gradient-list, $gradient, comma); + } + + background-image: $gradient-list; +} + +@mixin generate-gradients2($positions) { + $colors: (var(--light-orange), var(--light-cyan), var(--light-yellow), var(--light-indigo), var(--light-blue), var(--light-pink), var(--light-green), var(--light-pink)); // Define colors + $gradient-list: (); + + @for $i from 1 through length($positions) { + $color: nth($colors, $i); // Get the color for this gradient + $gradient: radial-gradient(circle at var(--x#{$i}) var(--y#{$i}), #{$color} 0%, transparent 50%); + $gradient-list: append($gradient-list, $gradient, comma); + } + + background-image: $gradient-list; +} + +// Use the mixin to generate the keyframes +@include generate-properties($positions); +@include generate-keyframes($positions); + +.app-branding { + position: relative; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + transition: var(--standard-transition); + z-index: 0; + + &::before, &::after { + content: ""; + position: absolute; + inset: -100px; + z-index: -1; + opacity: 0.4; + @media (prefers-reduced-motion: no-preference) { + animation: aurora 10s infinite linear; + } + } + + &::before { + @include generate-gradients($positions); + } + + &::after { + @include generate-gradients2($positions); + rotate: -180deg; + animation-duration: 6s; + opacity: 0.5; + } + + .idk { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + + &::before { + content: ""; + position: absolute; + inset: 0; + backdrop-filter: invert(2%) blur(100px); + mask-image: repeating-conic-gradient( + from var(--rotation), + var(--background) 0deg, + transparent 20deg + ); + opacity: 0.4; + flex: 1; + + @media (prefers-reduced-motion: no-preference) { + animation: sunburst-rotation 100s infinite linear; + } + } + + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + min-height: 80px; + height: 60%; + max-height: 250px + } + } +} diff --git a/src/main/scss/components/_index.scss b/src/main/scss/components/_index.scss index d9c4133a2730..8ff617d69edc 100644 --- a/src/main/scss/components/_index.scss +++ b/src/main/scss/components/_index.scss @@ -1,6 +1,7 @@ @use "app-bar"; @use "alert"; @use "badges"; +@use "branding"; @use "breadcrumbs"; @use "buttons"; @use "buttons-deprecated"; diff --git a/src/main/scss/pages/_about.scss b/src/main/scss/pages/_about.scss index 4417d5750ed1..cbd85093f855 100644 --- a/src/main/scss/pages/_about.scss +++ b/src/main/scss/pages/_about.scss @@ -3,116 +3,15 @@ display: flex; align-items: center; justify-content: center; - padding: calc(var(--section-padding) * 2); pointer-events: none; margin-bottom: var(--section-padding); + height: 250px; + border-radius: var(--form-input-border-radius); 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; - &::before { - content: ""; - position: absolute; - width: 120%; - aspect-ratio: 1; - z-index: 1; - background: repeating-conic-gradient( - var(--background) 0deg, - rgb(100 100 100 / 0.25) 20deg - ); - animation: app-about-starburst 100s linear infinite; - opacity: 0.25; - } - - img { - height: 7.5rem; - z-index: 1; - } -} - -.app-about-branding__aurora { - position: absolute; - width: 120%; - aspect-ratio: 1; - - &::before, - &::after { - content: ""; - position: absolute; - inset: 0; - z-index: -1; - border-radius: 100%; - } - - &::before { - background-color: var(--color); - background-image: radial-gradient( - at 40% 20%, - hsl(28 100% 74% / 1) 0, - transparent 50% - ), - radial-gradient(at 80% 0%, hsl(189 100% 56% / 1) 0, transparent 50%), - radial-gradient(at 0% 50%, hsl(355 85% 93% / 1) 0, transparent 50%), - radial-gradient(at 80% 50%, hsl(359 70% 46%) 0, transparent 50%), - radial-gradient(at 0% 100%, hsl(22 100% 77% / 1) 0, transparent 50%), - radial-gradient(at 80% 100%, hsl(242 100% 70% / 1) 0, transparent 50%), - radial-gradient(at 0% 0%, hsl(343 100% 76% / 1) 0, transparent 50%); - opacity: 0.4; - animation: app-about-aurora-one 7s linear infinite; - } - - &::after { - background-image: radial-gradient( - at 40% 20%, - hsl(212 100% 74% / 1) 0, - transparent 50% - ), - radial-gradient(at 80% 0%, hsl(13 100% 56% / 1) 0, transparent 50%), - radial-gradient(at 0% 50%, hsl(179 85% 93% / 1) 0, transparent 50%), - radial-gradient(at 80% 50%, hsl(164 100% 76% / 1) 0, transparent 50%), - radial-gradient(at 0% 100%, hsl(206 100% 77% / 1) 0, transparent 50%), - radial-gradient(at 80% 100%, hsl(66 100% 70% / 1) 0, transparent 50%), - radial-gradient(at 0% 0%, hsl(167 100% 76% / 1) 0, transparent 50%); - opacity: 0.2; - animation: app-about-aurora-two 14s linear infinite; - } -} - -@keyframes app-about-aurora-one { - 0% { - opacity: 0.4; - } - - 50% { - opacity: 0.2; - transform: rotate(-180deg); - } - - 100% { - opacity: 0.4; - transform: rotate(-360deg); - } -} - -@keyframes app-about-aurora-two { - 0% { - opacity: 0.2; - } - - 50% { - opacity: 0.55; - transform: rotate(180deg); - } - - 100% { - opacity: 0.2; - transform: rotate(360deg); - } -} - -@keyframes app-about-starburst { - to { - transform: rotate(360deg); + & > div { + width: 100%; + height: 100%; } } diff --git a/src/main/scss/pages/_sign-in-register.scss b/src/main/scss/pages/_sign-in-register.scss index b2dfa943cf12..6325aaee7104 100644 --- a/src/main/scss/pages/_sign-in-register.scss +++ b/src/main/scss/pages/_sign-in-register.scss @@ -4,12 +4,7 @@ @use "../form/checkbox"; @use "../form/input"; @use "../components/buttons"; - -@property --opacity { - syntax: ""; - initial-value: 0deg; - inherits: false; -} +@use "../components/branding"; .app-sign-in-register { width: 100vw; @@ -29,59 +24,13 @@ justify-content: center; overflow: hidden; - @media (width < 992px) { - display: none; - } - - &::before, - &::after { - content: ""; - position: absolute; - min-height: 130%; - min-width: 130%; - aspect-ratio: 1; - object-fit: cover; - z-index: -1; - } - - &::before { - background-image: radial-gradient( - at 40% 20%, - var(--orange) 0, - transparent 50% - ), - radial-gradient(at 80% 0%, var(--cyan) 0, transparent 50%), - radial-gradient(at 0% 50%, var(--light-pink) 0, transparent 50%), - radial-gradient(at 80% 50%, var(--light-red) 0, transparent 50%), - radial-gradient(at 0% 100%, var(--light-yellow) 0, transparent 50%), - radial-gradient(at 80% 100%, var(--dark-purple) 0, transparent 50%), - radial-gradient(at 0% 0%, var(--pink) 0, transparent 50%); - } - - &::after { - background-image: radial-gradient( - at 40% 20%, - var(--light-cyan) 0, - transparent 50% - ), - radial-gradient(at 80% 0%, var(--dark-orange) 0, transparent 50%), - radial-gradient(at 0% 50%, var(--light-blue) 0, transparent 50%), - radial-gradient(at 80% 50%, var(--light-green) 0, transparent 50%), - radial-gradient(at 0% 100%, var(--light-red) 0, transparent 50%), - radial-gradient(at 80% 100%, var(--light-yellow) 0, transparent 50%), - radial-gradient(at 0% 0%, var(--cyan) 0, transparent 50%); + & > div { + width: 100%; + height: 100%; } - &__starburst { - position: absolute; - inset: 0; - z-index: 1; - backdrop-filter: invert(2%) blur(100px); - mask-image: repeating-conic-gradient( - from var(--opacity), - var(--background) 0deg, - transparent 20deg - ); + @media (width < 992px) { + display: none; } img { @@ -228,38 +177,6 @@ } } -@keyframes aurora-one { - 0% { - opacity: 0.3; - } - - 50% { - opacity: 0.15; - transform: rotate(-180deg); - } - - 100% { - opacity: 0.3; - transform: rotate(-360deg); - } -} - -@keyframes aurora-two { - 0% { - opacity: 0.15; - } - - 50% { - opacity: 0.5; - transform: rotate(180deg); - } - - 100% { - opacity: 0.15; - transform: rotate(360deg); - } -} - .app-sign-in-register__error { font-size: 0.95rem; color: var(--error-color); From 2c6f66e67615acbc2acc608f6b2dcf0919ac275d Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Fri, 10 Jan 2025 11:47:44 +0000 Subject: [PATCH 02/38] Update _branding.scss --- src/main/scss/components/_branding.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/scss/components/_branding.scss b/src/main/scss/components/_branding.scss index 8069a405f090..27cf89cec5f3 100644 --- a/src/main/scss/components/_branding.scss +++ b/src/main/scss/components/_branding.scss @@ -135,13 +135,13 @@ $positions: ( content: ""; position: absolute; inset: 0; - backdrop-filter: invert(2%) blur(100px); + backdrop-filter: invert(3%) blur(50px); mask-image: repeating-conic-gradient( from var(--rotation), var(--background) 0deg, transparent 20deg ); - opacity: 0.4; + opacity: 0.45; flex: 1; @media (prefers-reduced-motion: no-preference) { From f17fec6bf45551b8d810219e87f259f915355896 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed, 11 Mar 2026 07:45:21 +0000 Subject: [PATCH 03/38] Update index.jelly --- core/src/main/resources/hudson/AboutJenkins/index.jelly | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/core/src/main/resources/hudson/AboutJenkins/index.jelly b/core/src/main/resources/hudson/AboutJenkins/index.jelly index ba4c77a12508..c7e8df9748dc 100644 --- a/core/src/main/resources/hudson/AboutJenkins/index.jelly +++ b/core/src/main/resources/hudson/AboutJenkins/index.jelly @@ -50,8 +50,7 @@ THE SOFTWARE.