Skip to content

Commit 1f68d0d

Browse files
AdrienClairembaultAdrienClairembault
authored
Helpdesk header v2 (#18837)
* Helpdesk header v2 * Fix missing deg units * Update non-dark themes * Fix scss lint * Update @glpi-project/illustrations to 0.3.1 * Update dark themes * Fix scss lint
1 parent 2ee9f10 commit 1f68d0d

27 files changed

+182
-265
lines changed

‎css/helpdesk_home.scss‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,33 @@ header {
101101
}
102102

103103
.search-banner {
104-
background:
105-
url('../pics/serfservice-portal-header-1.svg') no-repeat bottom right,
106-
url('../pics/serfservice-portal-header-2.svg') no-repeat bottom left
107-
;
108104
background-color: var(--glpi-helpdesk-header);
109-
padding-top:150px;
110-
padding-bottom:100px;
105+
position: relative;
106+
107+
.search-banner-content {
108+
padding-top:170px;
109+
padding-bottom:80px;
110+
}
111+
112+
.scene {
113+
position:absolute;
114+
bottom: 0;
115+
width: 555px;
116+
height:90%;
117+
118+
// Hide for screens smaller than 1600px
119+
@media (max-width: 1600px) {
120+
display: none;
121+
}
122+
}
123+
124+
.scene-left {
125+
left: 0;
126+
}
127+
128+
.scene-right {
129+
right: 0;
130+
}
111131
}
112132

113133
.search-overlay {
@@ -152,13 +172,13 @@ header {
152172
}
153173

154174
.tiles-banner {
155-
background: #f6f8fb;
175+
background: var(--glpi-helpdesk-tiles-section-bg);
156176
padding-top:70px;
157177
padding-bottom:70px;
158178
}
159179

160180
.tickets-banner {
161-
background: #fff;
181+
background: var(--glpi-helpdesk-tabs-section-bg);
162182
padding-top:70px;
163183
padding-bottom:70px;
164184
flex-grow: 1;
@@ -203,3 +223,7 @@ header {
203223
padding-bottom: 8px;
204224
}
205225
}
226+
227+
.search-result-container {
228+
background-color: var(--glpi-tabs-bg);
229+
}

‎css/includes/_base.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@
7070
--glpi-logo-reduced: var(--glpi-logo-light-reduced);
7171
--glpi-mainmenu-bg: #2f3f64; // hsl(222, 36%, 29%)
7272
--glpi-helpdesk-header: hsl(223deg, 31%, 80%);
73+
--glpi-helpdesk-tiles-section-bg: #f6f8fb;
74+
--glpi-helpdesk-tabs-section-bg: #fff;
7375
--glpi-mainmenu-fg: #f4f6fa;
7476
--glpi-mainmenu-fg-muted: #f4f6fa99;
7577
--glpi-mainmenu-active-bg: color-mix(in srgb, var(--glpi-mainmenu-bg), white 45%);
@@ -128,6 +130,9 @@
128130
--glpi-illustrations-header-dark: var(--glpi-mainmenu-bg);
129131
--glpi-illustrations-header-light: var(--glpi-helpdesk-header);
130132
--glpi-illustrations-primary: var(--tblr-primary);
133+
--glpi-illustrations-gradient-1: hsl(222deg, 36%, 92%);
134+
--glpi-illustrations-gradient-2: hsl(222deg, 36%, 72%);
135+
--glpi-illustrations-gradient-3: hsl(222deg, 36%, 55%);
131136
}
132137

133138
@media(prefers-reduced-motion) {

‎css/palettes/_aerialgreen.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,9 @@
4343
--glpi-palette-color-2: #365731;
4444
--glpi-palette-color-3: #8ec547;
4545
--glpi-palette-color-4: #fec95c;
46+
47+
// Helpdesk header
48+
--glpi-illustrations-gradient-1: hsl(110deg, 47%, 92%);
49+
--glpi-illustrations-gradient-2: hsl(110deg, 47%, 72%);
50+
--glpi-illustrations-gradient-3: hsl(110deg, 47%, 45%);
4651
}

‎css/palettes/_auror_dark.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ $is-dark: true;
3636
:root[data-glpi-theme="auror_dark"] {
3737
--tblr-dark: #232e3c;
3838
--tblr-light: #9ca8c0;
39-
--tblr-body-bg: #1f2936;
39+
--tblr-body-bg: #1f2936; // hsl(213.9deg, 27.1%, 16.7%)
4040
--tblr-bg-surface: #232e3c;
4141
--tblr-body-color: #9ca8c0;
4242
--tblr-primary-rgb: 254, 201, 92;
@@ -51,6 +51,9 @@ $is-dark: true;
5151
--glpi-form-header-border-color: transparent;
5252
--glpi-mainmenu-bg: #232e3c;
5353
--glpi-mainmenu-fg: #ffffffb3;
54+
--glpi-helpdesk-header: hsl(213.9deg, 27.1%, 30.7%);
55+
--glpi-helpdesk-tiles-section-bg: hsl(213.9deg, 27.1%, 25.7%);
56+
--glpi-helpdesk-tabs-section-bg: hsl(213.9deg, 27.1%, 20.7%);
5457
--glpi-tabs-bg: #1d2531;
5558
--glpi-tabs-fg: var(--tblr-light);
5659
--glpi-tabs-border-color: transparent;
@@ -65,4 +68,9 @@ $is-dark: true;
6568
--glpi-palette-color-2: #131425;
6669
--glpi-palette-color-3: #3a5693;
6770
--glpi-palette-color-4: #fec95c;
71+
72+
// Helpdesk header
73+
--glpi-illustrations-gradient-1: hsl(213.9deg, 27.1%, 70%);
74+
--glpi-illustrations-gradient-2: hsl(213.9deg, 27.1%, 40%);
75+
--glpi-illustrations-gradient-3: hsl(213.9deg, 27.1%, 20%);
6876
}

‎css/palettes/_automn.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,9 @@
4444
--glpi-palette-color-2: #58372e;
4545
--glpi-palette-color-3: #f2b265;
4646
--glpi-palette-color-4: #c06f3d;
47+
48+
// Helpdesk header
49+
--glpi-illustrations-gradient-1: hsl(17deg, 46%, 92%);
50+
--glpi-illustrations-gradient-2: hsl(17deg, 46%, 72%);
51+
--glpi-illustrations-gradient-3: hsl(17deg, 46%, 45%);
4752
}

‎css/palettes/_classic.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,9 @@
4444
--glpi-palette-color-2: #877C52;
4545
--glpi-palette-color-3: #C0CC7B;
4646
--glpi-palette-color-4: #FEC95C;
47+
48+
// Helpdesk header
49+
--glpi-illustrations-gradient-1: hsl(69deg, 26%, 92%);
50+
--glpi-illustrations-gradient-2: hsl(69deg, 26%, 62%);
51+
--glpi-illustrations-gradient-3: hsl(69deg, 26%, 45%);
4752
}

‎css/palettes/_clockworkorange.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,9 @@
4242
--glpi-palette-color-2: #b2341c;
4343
--glpi-palette-color-3: #ff7c64;
4444
--glpi-palette-color-4: #fff;
45+
46+
// Helpdesk header
47+
--glpi-illustrations-gradient-1: hsl(10deg, 73%, 92%);
48+
--glpi-illustrations-gradient-2: hsl(10deg, 73%, 62%);
49+
--glpi-illustrations-gradient-3: hsl(10deg, 73%, 45%);
4550
}

‎css/palettes/_dark.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,9 @@
4242
--glpi-palette-color-2: #fff;
4343
--glpi-palette-color-3: #585957;
4444
--glpi-palette-color-4: #3f403e;
45+
46+
// Helpdesk header
47+
--glpi-illustrations-gradient-1: hsl(30deg, 5%, 92%);
48+
--glpi-illustrations-gradient-2: hsl(30deg, 5%, 62%);
49+
--glpi-illustrations-gradient-3: hsl(30deg, 5%, 45%);
4550
}

‎css/palettes/_darker.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ $is-dark: true;
5151
--tblr-badge-color: var(--tblr-dark);
5252
--glpi-mainmenu-bg: #242323; // hsl(0deg, 1%, 14%)
5353
--glpi-helpdesk-header: #1f1e1e;
54-
--glpi-illustrations-header-light: hsl(31deg, 5%, 75%);
54+
--glpi-helpdesk-tiles-section-bg: hsl(0deg, 1.6%, 20%);
55+
--glpi-helpdesk-tabs-section-bg: hsl(0deg, 1.6%, 10%);
56+
--glpi-illustrations-header-light: hsl(40deg, 5%, 4%);
5557
--glpi-mainmenu-fg: #f4f6fa;
5658
--glpi-form-header-border-color: transparent;
5759
--glpi-form-header-fg: var(--tblr-light);
@@ -66,4 +68,9 @@ $is-dark: true;
6668
--glpi-palette-color-2: #131e21;
6769
--glpi-palette-color-3: #585957;
6870
--glpi-palette-color-4: #3f403e;
71+
72+
// Helpdesk header
73+
--glpi-illustrations-gradient-1: hsl(0deg, 1%, 70%);
74+
--glpi-illustrations-gradient-2: hsl(0deg, 1%, 35%);
75+
--glpi-illustrations-gradient-3: hsl(0deg, 1%, 20%);
6976
}

‎css/palettes/_flood.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,17 @@
3838
--tblr-badge-bg: #d0d9f0;
3939
--tblr-badge-color: rgb(58, 73, 102);
4040
--glpi-mainmenu-bg: #006573; // hsl(187deg, 100%, 23%);
41-
--glpi-helpdesk-header: hsl(188deg, 92%, 90%);
41+
--glpi-helpdesk-header: hsl(188deg, 40%, 61%);
4242
--glpi-mainmenu-fg: #f4f6fa;
4343
--glpi-search-bg: #fcf7f1;
4444
--glpi-search-fg: #756d61;
4545
--glpi-palette-color-1: #006573;
4646
--glpi-palette-color-2: #005572;
4747
--glpi-palette-color-3: #81beaa;
4848
--glpi-palette-color-4: #f4d4ad;
49+
50+
// Helpdesk header
51+
--glpi-illustrations-gradient-1: hsl(187deg, 50%, 92%);
52+
--glpi-illustrations-gradient-2: hsl(187deg, 40%, 70%);
53+
--glpi-illustrations-gradient-3: hsl(187deg, 50%, 35%);
4954
}

0 commit comments

Comments
 (0)