private/desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

skin
All checks were successful
Deploy / deploy-staging (push) Successful in 8s
Details
Deploy / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-06-08 01:02:43 +02:00
parent b23e390952
commit 89dcc251b7
4 changed files with 338 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
public/assets/desktop/desktop.css
View File

@@ -381,6 +381,7 @@ h1 {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.start-button-icon {
@@ -484,6 +485,14 @@ h1 {
backdrop-filter: blur(24px);
}
.start-menu::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.start-menu[hidden] {
display: none !important;
}
@@ -508,6 +517,10 @@ h1 {
gap: 12px;
}
.start-menu-column {
align-content: start;
}
.start-menu-entry {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
@@ -558,6 +571,11 @@ h1 {
gap: 10px;
flex: 1;
overflow: auto;
scrollbar-width: none;
}
.taskbar-apps::-webkit-scrollbar {
display: none;
}
.taskbar-app-button {
@@ -618,6 +636,10 @@ h1 {
font-size: 13px;
}
.window-content p:last-child {
margin-bottom: 0;
}
@media (max-width: 1100px) {
.desktop-stage {
min-height: 100vh;

127
public/assets/desktop/skins/apple/skin.css
View File

@@ -1,8 +1,8 @@
body[data-skin="apple"] {
--accent: #fb7185;
--taskbar-bg: rgba(45, 45, 45, 0.65);
--window-bg: #fffbeb;
--window-header-bg: #fff1d6;
--taskbar-bg: rgba(41, 41, 46, 0.52);
--window-bg: rgba(255, 251, 239, 0.96);
--window-header-bg: linear-gradient(180deg, rgba(255, 248, 233, 0.98), rgba(251, 233, 199, 0.94));
--desktop-font: "SF Pro Display", "Helvetica Neue", sans-serif;
--taskbar-height: 72px;
--taskbar-left: 50%;
@@ -13,40 +13,120 @@ body[data-skin="apple"] {
--taskbar-justify: center;
--stage-top-offset: 34px;
--icon-top: 56px;
--shell-text: #f5f4f8;
--card-bg: rgba(255, 255, 255, 0.18);
--shell-border: rgba(255, 255, 255, 0.22);
}
body[data-skin="apple"] .system-bar {
background: rgba(244, 244, 245, 0.82);
height: 34px;
padding: 0 16px;
background: rgba(244, 244, 245, 0.74);
color: #111827;
backdrop-filter: blur(26px);
}
body[data-skin="apple"] .desktop-icons {
left: auto;
right: 24px;
justify-items: end;
width: min(160px, calc(100% - 48px));
}
body[data-skin="apple"] .taskbar {
gap: 10px;
padding: 10px 12px;
transform: translateX(-50%);
border: 1px solid rgba(255, 255, 255, 0.26);
box-shadow: 0 18px 40px rgba(17, 24, 39, 0.22);
backdrop-filter: blur(30px) saturate(1.1);
}
body[data-skin="apple"] .start-button {
order: 2;
min-width: 92px;
min-width: 56px;
justify-content: center;
background: rgba(255, 255, 255, 0.24);
padding: 10px 12px;
background: rgba(255, 255, 255, 0.18);
}
body[data-skin="apple"] .start-button-label {
display: none;
}
body[data-skin="apple"] .tray {
order: 1;
flex: 0 0 auto;
gap: 6px;
}
body[data-skin="apple"] .taskbar-apps {
order: 3;
justify-content: center;
flex: 0 1 auto;
}
body[data-skin="apple"] .start-menu {
left: 50%;
bottom: 106px;
bottom: 108px;
transform: translateX(-50%);
width: min(880px, calc(100% - 48px));
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 14px;
padding: 22px;
border-radius: 28px;
background: linear-gradient(180deg, rgba(250, 250, 252, 0.42), rgba(219, 223, 231, 0.34));
border-color: rgba(255, 255, 255, 0.28);
box-shadow: 0 26px 80px rgba(10, 14, 24, 0.28);
}
body[data-skin="apple"] .start-menu::before {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 28%, transparent);
}
body[data-skin="apple"] .start-menu-header {
padding-bottom: 14px;
border-bottom-color: rgba(15, 23, 42, 0.08);
}
body[data-skin="apple"] .start-menu-header .eyebrow,
body[data-skin="apple"] .start-menu .eyebrow {
color: #475569;
}
body[data-skin="apple"] .start-menu-header h2,
body[data-skin="apple"] .start-menu-entry,
body[data-skin="apple"] .start-menu-entry small,
body[data-skin="apple"] .start-menu-entry strong {
color: #0f172a;
}
body[data-skin="apple"] .start-menu-column {
gap: 14px;
}
body[data-skin="apple"] .start-menu-block {
padding: 14px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.34);
border: 1px solid rgba(255, 255, 255, 0.36);
}
body[data-skin="apple"] .start-menu-entry {
grid-template-columns: 40px minmax(0, 1fr);
padding: 10px 12px;
border: 0;
border-radius: 14px;
background: rgba(255, 255, 255, 0.42);
}
body[data-skin="apple"] .start-menu-entry-toggle {
display: none;
}
body[data-skin="apple"] .start-menu-entry-badge {
border-radius: 12px;
background: rgba(15, 23, 42, 0.08);
}
body[data-skin="apple"] .window {
@@ -61,7 +141,7 @@ body[data-skin="apple"] .window-header {
justify-content: flex-start;
gap: 14px;
padding: 10px 14px;
background: linear-gradient(180deg, #fff7eb, #fde9c9);
background: linear-gradient(180deg, rgba(255, 249, 237, 0.98), rgba(248, 231, 199, 0.95));
}
body[data-skin="apple"] .window-title {
@@ -70,6 +150,7 @@ body[data-skin="apple"] .window-title {
transform: translateX(-50%);
font-size: 13px;
color: #4b5563;
font-weight: 600;
}
body[data-skin="apple"] .window-action {
@@ -85,6 +166,8 @@ body[data-skin="apple"] .taskbar-app-button {
min-width: 56px;
padding: 10px 12px;
justify-content: center;
border-radius: 16px;
background: rgba(255, 255, 255, 0.12);
}
body[data-skin="apple"] .taskbar-app-button-label {
@@ -95,4 +178,32 @@ body[data-skin="apple"] .taskbar-app-button-badge {
width: 30px;
height: 30px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.16);
}
body[data-skin="apple"] .taskbar-app-button.is-focused {
transform: translateY(-4px) scale(1.06);
background: rgba(255, 255, 255, 0.18);
}
body[data-skin="apple"] .tray-pill,
body[data-skin="apple"] .tray-skin-button {
color: #f8fafc;
background: rgba(255, 255, 255, 0.12);
}
body[data-skin="apple"] .widget-card {
border-radius: 22px;
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.22);
}
body[data-skin="apple"] .desktop-icon {
width: 88px;
background: transparent;
}
body[data-skin="apple"] .desktop-icon-badge {
border-radius: 18px;
background: linear-gradient(180deg, rgba(86, 99, 180, 0.75), rgba(44, 46, 96, 0.82));
}

111
public/assets/desktop/skins/linux/skin.css
View File

@@ -1,19 +1,25 @@
body[data-skin="linux"] {
--accent: #86efac;
--taskbar-bg: linear-gradient(180deg, rgba(33, 46, 42, 0.98), rgba(21, 31, 28, 0.98));
--window-bg: #f9fafb;
--window-header-bg: #eceff3;
--accent: #84d8a6;
--taskbar-bg: linear-gradient(180deg, rgba(43, 49, 45, 0.98), rgba(28, 33, 30, 0.99));
--window-bg: #f5f7f6;
--window-header-bg: #ecefe9;
--desktop-font: "Noto Sans", "Ubuntu", sans-serif;
--taskbar-height: 48px;
--taskbar-height: 42px;
--taskbar-left: 0;
--taskbar-right: 0;
--taskbar-bottom: 0;
--taskbar-width: 100%;
--taskbar-radius: 0;
--taskbar-justify: flex-start;
--shell-text: #eef4ee;
--card-bg: rgba(32, 42, 36, 0.22);
--shell-border: rgba(206, 224, 213, 0.14);
}
body[data-skin="linux"] .taskbar {
gap: 10px;
min-height: 42px;
padding: 6px 8px;
border-left: 0;
border-right: 0;
border-bottom: 0;
@@ -22,14 +28,55 @@ body[data-skin="linux"] .taskbar {
}
body[data-skin="linux"] .start-button {
border-radius: 10px;
background: linear-gradient(180deg, rgba(92, 185, 118, 0.24), rgba(55, 110, 75, 0.28));
min-width: 108px;
border-radius: 4px;
padding: 8px 12px;
background: linear-gradient(180deg, rgba(132, 216, 166, 0.3), rgba(67, 123, 86, 0.36));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body[data-skin="linux"] .start-menu {
left: 12px;
bottom: 58px;
border-radius: 18px 18px 0 0;
left: 0;
bottom: 42px;
transform: none;
grid-template-columns: minmax(240px, 280px) minmax(320px, 420px);
gap: 14px;
width: min(760px, calc(100% - 12px));
padding: 12px;
border-radius: 8px 8px 0 0;
background: linear-gradient(180deg, rgba(46, 52, 48, 0.98), rgba(28, 32, 30, 0.99));
box-shadow: 0 -14px 32px rgba(0, 0, 0, 0.22);
}
body[data-skin="linux"] .start-menu::before {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 22%, transparent);
}
body[data-skin="linux"] .start-menu-header {
padding: 0 4px 10px;
}
body[data-skin="linux"] .start-menu-header h2 {
font-size: 20px;
font-weight: 600;
}
body[data-skin="linux"] .start-menu-column:first-of-type {
padding-right: 10px;
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-skin="linux"] .start-menu-entry {
grid-template-columns: 38px minmax(0, 1fr) auto;
padding: 10px 12px;
border-radius: 8px;
}
body[data-skin="linux"] .start-menu-entry-badge,
body[data-skin="linux"] .start-menu-entry-toggle {
min-width: 28px;
height: 28px;
border-radius: 6px;
}
body[data-skin="linux"] .window {
@@ -46,6 +93,7 @@ body[data-skin="linux"] .window-header {
body[data-skin="linux"] .window-title {
font-size: 13px;
color: #334155;
font-weight: 600;
}
body[data-skin="linux"] .window-actions {
@@ -71,6 +119,47 @@ body[data-skin="linux"] .window-action span {
}
body[data-skin="linux"] .taskbar-app-button {
border-radius: 6px;
border-radius: 4px;
min-width: 136px;
padding: 7px 10px;
background: rgba(255, 255, 255, 0.08);
}
body[data-skin="linux"] .taskbar-app-button.is-focused {
background: rgba(132, 216, 166, 0.24);
color: #eff8ef;
}
body[data-skin="linux"] .taskbar-app-button-badge {
width: 22px;
height: 22px;
border-radius: 5px;
background: rgba(8, 15, 10, 0.2);
}
body[data-skin="linux"] .tray {
margin-left: auto;
gap: 6px;
}
body[data-skin="linux"] .tray-pill {
padding: 6px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
}
body[data-skin="linux"] .widget-card {
border-radius: 12px;
background: rgba(29, 40, 34, 0.3);
}
body[data-skin="linux"] .desktop-icon {
width: 88px;
padding: 10px 8px;
background: transparent;
}
body[data-skin="linux"] .desktop-icon-badge {
border-radius: 10px;
background: linear-gradient(180deg, rgba(66, 125, 85, 0.9), rgba(31, 62, 43, 0.95));
}

111
public/assets/desktop/skins/windows/skin.css
View File

@@ -1,44 +1,91 @@
body[data-skin="windows"] {
--accent: #60a5fa;
--taskbar-bg: linear-gradient(180deg, rgba(24, 39, 75, 0.94), rgba(15, 23, 42, 0.96));
--window-bg: #f8fafc;
--window-header-bg: linear-gradient(180deg, #eff6ff, #dbeafe);
--accent: #6cb8ff;
--taskbar-bg: linear-gradient(180deg, rgba(25, 34, 54, 0.88), rgba(18, 23, 37, 0.96));
--window-bg: #f3f7fb;
--window-header-bg: linear-gradient(180deg, #eff7ff, #d7e6f8);
--desktop-font: "Segoe UI", "IBM Plex Sans", sans-serif;
--taskbar-height: 54px;
--taskbar-height: 56px;
--taskbar-left: 0;
--taskbar-right: 0;
--taskbar-bottom: 0;
--taskbar-width: 100%;
--taskbar-radius: 0;
--taskbar-justify: flex-start;
--taskbar-justify: center;
--icon-top: 22px;
--icon-left: 24px;
--shell-text: #eff4ff;
--card-bg: rgba(25, 37, 58, 0.2);
--shell-border: rgba(186, 207, 240, 0.18);
}
body[data-skin="windows"] .taskbar {
padding: 8px 14px;
gap: 12px;
padding: 8px 16px;
border-left: 0;
border-right: 0;
border-bottom: 0;
backdrop-filter: blur(12px);
backdrop-filter: blur(18px);
box-shadow: 0 -10px 28px rgba(7, 12, 23, 0.35);
}
body[data-skin="windows"] .start-button {
min-width: 94px;
min-width: 48px;
justify-content: center;
border-radius: 6px;
background: linear-gradient(180deg, rgba(76, 144, 255, 0.4), rgba(35, 86, 171, 0.4));
padding: 10px 12px;
margin-left: auto;
background: rgba(255, 255, 255, 0.12);
}
body[data-skin="windows"] .start-button-label {
display: none;
}
body[data-skin="windows"] .start-menu {
left: 12px;
bottom: 62px;
border-radius: 14px 14px 0 0;
left: 50%;
bottom: 68px;
transform: translateX(-50%);
grid-template-columns: minmax(320px, 380px) minmax(220px, 280px);
width: min(760px, calc(100% - 32px));
padding: 22px;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(33, 43, 66, 0.82), rgba(19, 26, 40, 0.92));
border-color: rgba(173, 199, 232, 0.2);
}
body[data-skin="windows"] .start-menu::before {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 18%, transparent);
}
body[data-skin="windows"] .start-menu-header {
padding-bottom: 14px;
}
body[data-skin="windows"] .start-menu-header h2 {
font-size: 24px;
font-weight: 600;
}
body[data-skin="windows"] .start-menu-column:last-child {
padding-left: 10px;
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-skin="windows"] .start-menu-entry {
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
}
body[data-skin="windows"] .start-menu-entry-badge {
border-radius: 10px;
background: rgba(131, 176, 255, 0.16);
}
body[data-skin="windows"] .window {
border-radius: 10px 10px 0 0;
border: 1px solid rgba(69, 120, 194, 0.45);
box-shadow: 0 28px 80px rgba(8, 17, 33, 0.28);
}
body[data-skin="windows"] .window-header {
@@ -49,6 +96,7 @@ body[data-skin="windows"] .window-header {
body[data-skin="windows"] .window-title {
color: #12345b;
font-weight: 600;
}
body[data-skin="windows"] .window-actions {
@@ -79,6 +127,41 @@ body[data-skin="windows"] .window-action span {
body[data-skin="windows"] .taskbar-app-button {
border-radius: 6px;
min-width: 148px;
min-width: 156px;
background: rgba(255, 255, 255, 0.14);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
body[data-skin="windows"] .taskbar-app-button.is-focused {
background: linear-gradient(180deg, rgba(121, 190, 255, 0.92), rgba(86, 161, 255, 0.88));
}
body[data-skin="windows"] .taskbar-app-button-badge {
border-radius: 7px;
background: rgba(8, 21, 41, 0.24);
}
body[data-skin="windows"] .taskbar-apps {
justify-content: center;
flex: 0 1 auto;
min-width: 0;
margin-right: auto;
}
body[data-skin="windows"] .tray {
margin-left: auto;
}
body[data-skin="windows"] .widget-card {
background: rgba(23, 35, 56, 0.34);
border-color: rgba(188, 210, 241, 0.16);
}
body[data-skin="windows"] .desktop-icon {
border-radius: 12px;
}
body[data-skin="windows"] .desktop-icon-badge {
border-radius: 14px;
background: linear-gradient(180deg, rgba(45, 82, 148, 0.84), rgba(21, 40, 74, 0.92));
}