OpenSource/jenkins
1
0 Fork 0
mirror of https://github.com/jenkinsci/jenkins.git synced 2026-10-26 19:15:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Standardise Jenkins branding during Sign in, Registration, and About Jenkins (#27046)

Browse Source
This commit is contained in:
Jan Faracik authored and GitHub committed 2026-07-19 09:17:32 +01:00
1 parent e4a54e6d0f
commit f75bc4b1bf
9 files changed
+158 -265
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

core/src/main/resources/hudson/AboutJenkins/index.jelly
+1 -4
View File
@@ -49,10 +49,7 @@ THE SOFTWARE.
permissions="${app.MANAGE_AND_SYSTEM_READ}">
<script src="${resURL}/jsbundles/section-to-tabs.js" type="text/javascript" defer="true" />
<div class="app-about-branding">
<div class="app-about-branding__aurora"></div>
<img src="${imagesURL}/svgs/logo.svg" alt="${%logo}" />
</div>
<l:branding clazz="app-about-branding" />
<p class="jenkins-page-description jenkins-!-text-color">${%blurb}</p>
core/src/main/resources/jenkins/model/Jenkins/login.jelly
+2
View File
@@ -70,6 +70,8 @@ THE SOFTWARE.
<st:include it="${simpleDecorator}" page="simple-branding.jelly" />
<main id="main-panel" class="app-sign-in-register__content">
<div class="app-sign-in-register__content-inner">
<img src="${imagesURL}/svgs/logo.svg" aria-hidden="true" class="app-sign-in-register__content-logo" />
<h1>${%Sign in to Jenkins}</h1>
<st:include it="${simpleDecorator}" page="simple-header.jelly" />
core/src/main/resources/jenkins/model/SimplePageDecorator/simple-branding.jelly
+2 -5
View File
@@ -22,9 +22,6 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-->
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core">
<section class="app-sign-in-register__branding">
<div class="app-sign-in-register__branding__starburst"></div>
<img src="${imagesURL}/svgs/logo.svg" alt="${%logo}"/>
</section>
<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
<l:branding clazz="app-sign-in-register__branding" />
</j:jelly>
core/src/main/resources/lib/layout/branding.jelly
+14
View File
@@ -0,0 +1,14 @@
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
<st:documentation>
<st:attribute name="clazz">
Additional CSS class(es) to add.
</st:attribute>
</st:documentation>
<div class="app-branding ${attrs.clazz}">
<div class="app-branding__conic">
<img src="${imagesURL}/svgs/logo.svg" alt="${%Jenkins illustration}" />
</div>
</div>
</j:jelly>
src/main/scss/abstracts/_theme.scss
+1 -1
View File
@@ -335,7 +335,7 @@ $semantics: (
--item-box-shadow--focus: oklch(from var(--text-color-secondary) l c h / 0.1);
// Page
--page-inset: 0px;
--page-inset: 0.3125rem;
// Deprecated
--primary: var(--accent-color); // Use var(--accent-color) instead
src/main/scss/components/_branding.scss
+91
View File
@@ -0,0 +1,91 @@
.app-branding {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: var(--standard-transition);
z-index: 0;
border-radius: var(--form-input-border-radius);
&::before,
&::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
&::before {
background-color: color-mix(
in sRGB,
var(--text-color-secondary) 20%,
transparent
);
background-image:
radial-gradient(
ellipse 85% 65% at 20% 25%,
var(--light-orange) 0%,
transparent 78%
),
radial-gradient(
ellipse 80% 60% at 80% 20%,
var(--light-purple) 0%,
transparent 80%
),
radial-gradient(
ellipse 78% 58% at 28% 75%,
var(--light-blue) 0%,
transparent 78%
),
radial-gradient(
ellipse 80% 60% at 78% 72%,
var(--light-pink) 0%,
transparent 80%
),
radial-gradient(
ellipse 90% 70% at 50% 50%,
var(--light-cyan) 0%,
transparent 84%
);
inset: -100px;
opacity: 0.5;
}
&::after {
border: var(--jenkins-border--subtle);
z-index: 1;
}
.app-branding__conic {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
&::before {
content: "";
position: absolute;
inset: 0;
flex: 1;
backdrop-filter: invert(1%) blur(60px);
mask-image: repeating-conic-gradient(
from 0deg,
var(--background) 0deg,
transparent 20deg
);
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 80px;
height: 60%;
max-height: 250px;
}
}
}
src/main/scss/components/_index.scss
+1
View File
@@ -2,6 +2,7 @@
@use "app-bar";
@use "avatar";
@use "badges";
@use "branding";
@use "breadcrumbs";
@use "buttons";
@use "cards";
src/main/scss/pages/_about.scss
+5 -121
View File
@@ -1,124 +1,3 @@
.app-about-branding {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--section-padding) * 2);
pointer-events: none;
margin-bottom: var(--section-padding);
overflow: hidden;
border-radius: 1rem;
&::before,
&::after {
content: "";
position: absolute;
z-index: 1;
}
&::before {
width: 120%;
aspect-ratio: 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;
}
&::after {
inset: 0;
border: var(--jenkins-border--subtle);
border-radius: inherit;
}
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);
}
}
.app-about-heading {
font-weight: 600;
font-family: Georgia, serif;
@@ -132,3 +11,8 @@
color: var(--text-color-secondary);
margin: 0;
}
.app-about-branding {
height: 230px;
margin-bottom: var(--section-padding);
}
src/main/scss/pages/_sign-in-register.scss
+41 -134
View File
@@ -4,100 +4,46 @@
@use "../form/checkbox";
@use "../form/input";
@use "../components/buttons";
@property --opacity {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@use "../components/branding";
.app-sign-in-register {
position: fixed;
inset: 0;
display: grid;
grid-template-columns: 40vw 1fr;
width: 100vw;
height: 100vh;
min-height: 100dvh;
padding: 0;
margin: 0;
@media (width < 992px) {
grid-template-columns: 1fr;
}
}
.app-sign-in-register__branding {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 40vw;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: var(--page-inset) 0 var(--page-inset) var(--page-inset);
border-radius: var(--form-input-border-radius);
@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%);
}
&__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
);
}
img {
min-height: 15rem;
height: 25vh;
max-height: 30rem;
z-index: 1;
}
}
.app-sign-in-register__content {
display: flex;
align-items: center;
align-items: safe center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
overflow-y: auto;
}
.app-sign-in-register__content-logo {
height: 3.5rem;
align-self: start;
@media (width >= 992px) {
margin-left: 40vw;
}
@media (height <= 600px) {
align-items: stretch;
display: none;
}
}
@@ -105,49 +51,42 @@
display: flex;
align-items: stretch;
flex-direction: column;
gap: 1.6rem;
gap: 1.5rem;
margin: calc(var(--section-padding) * 3) var(--section-padding);
width: 100%;
@media (width >= 430px) {
width: 430px;
}
max-width: 430px;
* {
box-sizing: border-box;
}
h1 {
font-size: 1.8rem;
font-size: 1.75rem;
font-family: Georgia, serif;
text-align: left;
margin-bottom: 0;
@media (width <= 600px) {
font-size: 1.6rem;
}
}
input {
padding: 0.6rem 0.75rem;
padding: 0.625rem 0.75rem;
border-radius: var(--form-input-border-radius);
font-size: 0.95rem;
font-size: 0.9375rem;
@media (width <= 600px) {
@media (width < 992px) {
font-size: 1rem;
}
}
.app-sign-in-register__form-label {
display: block;
font-size: 0.95rem;
font-size: 0.9375rem;
margin-bottom: 0.5rem;
font-weight: var(--font-bold-weight);
}
button {
padding: 0.9rem 1rem;
font-size: 0.95rem;
padding: 0.875rem 1rem;
font-size: 0.9375rem;
}
form {
@@ -163,8 +102,8 @@
&::before {
content: "";
position: absolute;
inset: calc(50% + 1px) 0;
height: 2px;
inset: calc(50% + (var(--jenkins-border-width) / 2)) 0;
height: var(--jenkins-border-width);
border-radius: var(--form-input-border-radius);
background-color: var(--input-border);
}
@@ -173,9 +112,9 @@
@include mixins.link;
z-index: 1;
padding: 0 0.2rem;
padding: 0 0.25rem;
font-weight: var(--font-bold-weight);
font-size: 0.95rem;
font-size: 0.9375rem;
margin: 0;
color: var(--link-color);
text-underline-offset: 2px;
@@ -194,8 +133,8 @@
&::after {
content: "";
position: absolute;
inset: 0 -0.1rem;
border-radius: 0.4rem;
inset: 0 -0.125rem;
border-radius: 0.5rem;
box-shadow: 0 0 0 0.625rem transparent;
transition: var(--standard-transition);
pointer-events: none;
@@ -212,7 +151,7 @@
}
.jenkins-checkbox {
font-size: 0.95rem;
font-size: 0.9375rem;
}
& > div {
@@ -222,40 +161,8 @@
}
}
@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;
font-size: 0.9375rem;
color: var(--error-color);
font-weight: var(--font-bold-weight);
@@ -265,13 +172,13 @@
&:not(:empty) {
& + input {
margin-top: 0.7rem;
margin-top: 0.75rem;
}
}
}
.app-sign-in-register__password-notice {
font-size: 0.95rem;
font-size: 0.9375rem;
color: var(--text-color-secondary);
}
@@ -286,7 +193,7 @@
#passwordStrengthWrapper {
margin-top: 0.75rem;
font-size: 0.95rem;
font-size: 0.9375rem;
#passwordStrength {
transition: var(--standard-transition);