diff --git a/public/assets/desktop/desktop.css b/public/assets/desktop/desktop.css index 20b4c585..9a56d25e 100644 --- a/public/assets/desktop/desktop.css +++ b/public/assets/desktop/desktop.css @@ -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; diff --git a/public/assets/desktop/skins/apple/skin.css b/public/assets/desktop/skins/apple/skin.css index 7d356792..a36c561e 100644 --- a/public/assets/desktop/skins/apple/skin.css +++ b/public/assets/desktop/skins/apple/skin.css @@ -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)); } diff --git a/public/assets/desktop/skins/linux/skin.css b/public/assets/desktop/skins/linux/skin.css index 04f6373c..c163bc67 100644 --- a/public/assets/desktop/skins/linux/skin.css +++ b/public/assets/desktop/skins/linux/skin.css @@ -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)); } diff --git a/public/assets/desktop/skins/windows/skin.css b/public/assets/desktop/skins/windows/skin.css index 39a01dc1..76d7c66a 100644 --- a/public/assets/desktop/skins/windows/skin.css +++ b/public/assets/desktop/skins/windows/skin.css @@ -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)); }