detached 824e236

feat(taskbar): original XP Luna start button bitmap and taskbar gradient

commit
824e23677d486113efd0853e26ae7958cf50657d
author
Kit · · 2026-09-27 13:28 UTC
committer
Kit · · 2026-09-27 13:28 UTC
parent
c4d09f0
signature
SSH UnverifiedSHA256:H91DFuEG4jpk5edzLA4aUKkpv4zv9Q339ipRmkph6Tk The key is unknown
5 files · +45 -11
Unified
UnifiedSplit
M src/lib/components/desktop/taskbar.svelte +45 -10
@@ -56,8 +56,7 @@
5656 bind:this={startElement}
5757 aria-expanded={menuOpen}
5858 aria-controls="start-menu"
59- onclick={() => (menuOpen = !menuOpen)}
60- ><img src="/aim/start.svg" alt="" width="20" height="20" />démarrer</button
59+ onclick={() => (menuOpen = !menuOpen)}><span class="start-label">démarrer</span></button
6160 >
6261 {#if menuOpen}
6362 <div class="start-menu" id="start-menu" bind:this={menuElement}>
@@ -139,8 +138,26 @@
139138 display: flex;
140139 align-items: stretch;
141140 gap: 4px;
142- background: linear-gradient(#245edb, #3168d5);
143- border-top: 1px solid #0f3d9a;
141+ background: linear-gradient(
142+ to bottom,
143+ #1f2f86 0,
144+ #3165c4 3%,
145+ #3682e5 6%,
146+ #4490e6 10%,
147+ #3883e5 12%,
148+ #2b71e0 15%,
149+ #2663da 18%,
150+ #235bd6 20%,
151+ #2258d5 23%,
152+ #2157d6 38%,
153+ #245ddb 54%,
154+ #2562df 86%,
155+ #245fdc 89%,
156+ #2158d4 92%,
157+ #1d4ec0 95%,
158+ #1941a5 98%
159+ );
160+ border-top: 0;
144161 box-sizing: border-box;
145162 color: white;
146163 font:
@@ -148,20 +165,38 @@
148165 'Pixelated MS Sans Serif',
149166 sans-serif;
150167 }
168+ /* Real XP "start" button: 3-slice of the original bitmap (logo | stretch | rounded cap) */
151169 .start {
152170 display: flex;
153171 align-items: center;
154- gap: 4px;
155172 border: 0;
156- border-radius: 0 14px 14px 0;
157- background: linear-gradient(#3c8f3c, #2c7a2c);
173+ border-radius: 0;
174+ height: 30px;
175+ padding: 0 17px 0 34px;
176+ margin: 0;
177+ background:
178+ url('/desktop/start-left.png') left / auto 100% no-repeat,
179+ url('/desktop/start-right.png') right / auto 100% no-repeat,
180+ url('/desktop/start-mid.png') 34px 0 / calc(100% - 51px) 100% no-repeat;
158181 color: white;
159182 font:
160- bold italic 14px Tahoma,
183+ bold italic 15px 'Franklin Gothic Medium',
184+ 'Trebuchet MS',
185+ Tahoma,
161186 sans-serif;
162- padding: 0 14px 0 6px;
163187 cursor: pointer;
164- box-shadow: inset 0 1px #8acb70;
188+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
189+ }
190+ .start:hover {
191+ filter: brightness(1.08);
192+ }
193+ .start:active,
194+ .start[aria-expanded='true'] {
195+ filter: brightness(0.85);
196+ }
197+ .start-label {
198+ line-height: 1;
199+ padding-bottom: 2px;
165200 }
166201 .start-menu {
167202 position: absolute;
@@ -56,8 +56,7 @@
56 bind:this={startElement}56 bind:this={startElement}
57 aria-expanded={menuOpen}57 aria-expanded={menuOpen}
58 aria-controls="start-menu"58 aria-controls="start-menu"
59- onclick={() => (menuOpen = !menuOpen)}59+ onclick={() => (menuOpen = !menuOpen)}><span class="start-label">démarrer</span></button
60- ><img src="/aim/start.svg" alt="" width="20" height="20" />démarrer</button
61 >60 >
62 {#if menuOpen}61 {#if menuOpen}
63 <div class="start-menu" id="start-menu" bind:this={menuElement}>62 <div class="start-menu" id="start-menu" bind:this={menuElement}>
@@ -139,8 +138,26 @@
139 display: flex;138 display: flex;
140 align-items: stretch;139 align-items: stretch;
141 gap: 4px;140 gap: 4px;
142- background: linear-gradient(#245edb, #3168d5);141+ background: linear-gradient(
143- border-top: 1px solid #0f3d9a;142+ to bottom,
143+ #1f2f86 0,
144+ #3165c4 3%,
145+ #3682e5 6%,
146+ #4490e6 10%,
147+ #3883e5 12%,
148+ #2b71e0 15%,
149+ #2663da 18%,
150+ #235bd6 20%,
151+ #2258d5 23%,
152+ #2157d6 38%,
153+ #245ddb 54%,
154+ #2562df 86%,
155+ #245fdc 89%,
156+ #2158d4 92%,
157+ #1d4ec0 95%,
158+ #1941a5 98%
159+ );
160+ border-top: 0;
144 box-sizing: border-box;161 box-sizing: border-box;
145 color: white;162 color: white;
146 font:163 font:
@@ -148,20 +165,38 @@
148 'Pixelated MS Sans Serif',165 'Pixelated MS Sans Serif',
149 sans-serif;166 sans-serif;
150 }167 }
168+ /* Real XP "start" button: 3-slice of the original bitmap (logo | stretch | rounded cap) */
151 .start {169 .start {
152 display: flex;170 display: flex;
153 align-items: center;171 align-items: center;
154- gap: 4px;
155 border: 0;172 border: 0;
156- border-radius: 0 14px 14px 0;173+ border-radius: 0;
157- background: linear-gradient(#3c8f3c, #2c7a2c);174+ height: 30px;
175+ padding: 0 17px 0 34px;
176+ margin: 0;
177+ background:
178+ url('/desktop/start-left.png') left / auto 100% no-repeat,
179+ url('/desktop/start-right.png') right / auto 100% no-repeat,
180+ url('/desktop/start-mid.png') 34px 0 / calc(100% - 51px) 100% no-repeat;
158 color: white;181 color: white;
159 font:182 font:
160- bold italic 14px Tahoma,183+ bold italic 15px 'Franklin Gothic Medium',
184+ 'Trebuchet MS',
185+ Tahoma,
161 sans-serif;186 sans-serif;
162- padding: 0 14px 0 6px;
163 cursor: pointer;187 cursor: pointer;
164- box-shadow: inset 0 1px #8acb70;188+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
189+ }
190+ .start:hover {
191+ filter: brightness(1.08);
192+ }
193+ .start:active,
194+ .start[aria-expanded='true'] {
195+ filter: brightness(0.85);
196+ }
197+ .start-label {
198+ line-height: 1;
199+ padding-bottom: 2px;
165 }200 }
166 .start-menu {201 .start-menu {
167 position: absolute;202 position: absolute;
D static/aim/start.svg +0 -1
@@ -1,1 +0,0 @@
1-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M1 3l6-1v6H1zM8 2l7-1v7H8zM1 9h6v6l-6-1zM8 9h7v7l-7-1z" fill="#fff"/><path d="M1 3l6-1v6H1z" fill="#f35325"/><path d="M8 2l7-1v7H8z" fill="#81bc06"/><path d="M1 9h6v6l-6-1z" fill="#05a6f0"/><path d="M8 9h7v7l-7-1z" fill="#ffba08"/></svg>
@@ -1,1 +0,0 @@
1-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M1 3l6-1v6H1zM8 2l7-1v7H8zM1 9h6v6l-6-1zM8 9h7v7l-7-1z" fill="#fff"/><path d="M1 3l6-1v6H1z" fill="#f35325"/><path d="M8 2l7-1v7H8z" fill="#81bc06"/><path d="M1 9h6v6l-6-1z" fill="#05a6f0"/><path d="M8 9h7v7l-7-1z" fill="#ffba08"/></svg>
A static/desktop/start-left.png +0 -0 binary file: no text diff

binary file: no text diff

A static/desktop/start-mid.png +0 -0 binary file: no text diff

binary file: no text diff

A static/desktop/start-right.png +0 -0 binary file: no text diff

binary file: no text diff

Keyboard shortcuts

Single-key shortcuts are on. ctrl k and esc work whatever this says.

ctrl k :
go to a section, branch, tag, file or repository
?
this list
j k
move the row cursor down / up
enter
open the row under the cursor; on Files, a directory opens or closes in place
↑ ↓ ← → home end
in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file
l h
on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls
g g G
first / last row
/
filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)
b
switch branch or tag
g s g f g c g b g m g i g r g a
tabs: summary, files, commits, branches & tags, merge requests, issues, releases, actions (when available)
g h
home
w
wide mode: use the whole width of the screen, or not (remembered)
y
copy a permalink pinned to the commit
d u x
diff: split / unified / collapse or expand all
e E
diff: the whole file in view / every file, with the lines the hunks hide
n
merge request: next note in the diff
esc
close a dialog, leave a field

Branches 3

Tags 8

↑↓ moveenter openesc close