/* =========================================================== WINDOWS XP (Luna) THEME SKIN - Applies when is present - Keeps your current Start icon image, changes colors/gradients - Styles taskbar, start button, windows, menus, desktop icons ===========================================================*/ /* == Core Desktop Background & Typography == */ /* == Layering sanity so desktop & overlays behave == */ body.theme-xp #stars{ z-index: 2 !important; } body.theme-xp #noiseOverlay{ z-index: 3 !important; } body.theme-xp #desktop{ z-index: 4 !important; } body.theme-xp .win{ z-index: 6 !important; } body.theme-xp #taskbar{ z-index: 8 !important; } /* =========================================================== TASKBAR + START ===========================================================*/ /* == Taskbar == */ body.theme-xp #taskbar{ height: 34px; /* a bit taller to feel like XP */ background: linear-gradient(#4d89cb 0%, #3a74b6 42%, #2a5f9a 43%, #235288 100%); border-top: 1px solid #1a3e6a; border-left: 1px solid #1a3e6a; border-right: 1px solid #0f2743; box-shadow: inset 0 1px 0 #6fa2e0, inset 0 -1px 0 #1a3e6a; display:flex; align-items:center; gap:8px; padding:4px 6px; } /* == Start button (KEEP your existing icon) == */ body.theme-xp #startBtn{ /* keep your current icon sprite */ background: linear-gradient(#50d850, #2d902d) padding-box, #c0ffc0; /* fallback */ border: 1px solid #1e6b1e; border-radius: 8px; padding: 6px 12px 6px 28px; /* room for icon */ color:#fff; font-weight:bold; font-family: Tahoma, sans-serif; text-shadow: 0 1px 0 rgba(0,0,0,.3); box-shadow: inset 0 1px 0 #80f180, inset 0 -1px 0 #1d621d, 1px 1px 2px rgba(0,0,0,.35); position: relative; cursor: pointer; /* re-apply your icon image exactly as before */ background-image: linear-gradient(#50d850, #2d902d), url("Assets/IMG/retroicon.png"); background-repeat: no-repeat, no-repeat; background-position: center center, 6px center; background-size: auto, 16px 16px; } body.theme-xp #startBtn:active{ box-shadow: inset 0 1px 0 #1d621d, inset 0 -1px 0 #80f180; transform: translateY(1px); } /* == Task buttons == */ body.theme-xp .task{ background: linear-gradient(#e7f0ff, #cfe0ff); border: 1px solid #7aa1d9; border-radius: 5px; padding: 4px 10px; color:#083a7a; box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08); } body.theme-xp .task:active{ background: linear-gradient(#cfe0ff, #e7f0ff); } /* == Clock == */ body.theme-xp #clock{ color:#ffffff; font-family: Tahoma, sans-serif; text-shadow: 0 1px 0 rgba(0,0,0,.5); min-width: 90px; text-align: right; } /* =========================================================== WINDOWS (BORDERS, TITLEBARS, CONTENT) ===========================================================*/ /* == Window chrome == */ body.theme-xp .win{ background:#f6f6f6; border: 2px solid #3a6ea5; border-radius: 6px; box-shadow: 3px 3px 6px rgba(0,0,0,.35); overflow: hidden; /* Ensure rounded corners clip */ } /* == Titlebar == */ body.theme-xp .win .titlebar{ background: linear-gradient(#5390d9 0%, #3a6fd9 45%, #2b59b5 46%, #244b93 100%); color:#fff; font-family: Tahoma, sans-serif; font-size: 13px; font-weight: bold; padding: 4px 8px; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid #1c3c7d; text-shadow: 0 1px 1px rgba(0,0,0,.5); } /* == Titlebar buttons (close/min/max) == */ body.theme-xp .win .winbtn{ width: 20px; height: 18px; border-radius: 4px; border: 1px solid #1c3c7d; background: linear-gradient(#e7f0ff, #cfe0ff); box-shadow: inset 0 1px 0 #fff; cursor: pointer; } body.theme-xp .win .winbtn:active{ background: linear-gradient(#cfe0ff, #e7f0ff); } /* == Window content == */ body.theme-xp .win .content{ background:#f9fbff; color:#111; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); } /* =========================================================== MENUS / DROPDOWNS (Win95 Paint & generic XP-ish) ===========================================================*/ body.theme-xp .p95-menu{ background:#e6eefc; border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #7aa1d9; border-bottom:1px solid #7aa1d9; } body.theme-xp .p95-menu li:hover{ background:#3a6fd9; color:#fff; } body.theme-xp .p95-menu .menu-drop{ background:#f4f7ff; border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #7aa1d9; border-bottom:1px solid #7aa1d9; } body.theme-xp .p95-menu .menu-drop button:hover{ background:#3a6fd9; color:#fff; } /* =========================================================== DESKTOP ICONS ===========================================================*/ body.theme-xp #desktop .icon{ color:#ffffff; text-shadow: 1px 1px 2px rgba(0,0,0,.9); font-size:12px; filter: drop-shadow(0 0 6px rgba(0,0,0,.25)); } body.theme-xp #desktop .icon img{ width:48px; height:48px; image-rendering: pixelated; } /* =========================================================== MEDIA PLAYER VISIBILITY (XP vs Win95 cassette) ===========================================================*/ body.theme-xp #wmpContainer{ display:block !important; } body.theme-xp #player95{ display:none !important; } /* =========================================================== OPTIONAL: XP Scrollbar polish (modern browser support) ===========================================================*/ body.theme-xp *{ scrollbar-color: #3a6fd9 #eef4ff; /* thumb, track */ } body.theme-xp *::-webkit-scrollbar{ height:12px; width:12px; } body.theme-xp *::-webkit-scrollbar-thumb{ background: linear-gradient(#6aa3f0, #3a6fd9); border: 1px solid #1c3c7d; border-radius: 10px; } body.theme-xp *::-webkit-scrollbar-track{ background:#eef4ff; } /* =========================================================== START MENU PANEL (if you have one with id #startMenu) ===========================================================*/ body.theme-xp #startMenu{ background: linear-gradient(#f7fbff, #e3efff); border:1px solid #2b59b5; border-radius: 8px; box-shadow: 4px 6px 16px rgba(0,0,0,.35); color:#083a7a; } body.theme-xp #startMenu .header{ background: linear-gradient(#3a74b6, #235288); color:#fff; font-weight:bold; padding:8px 10px; } body.theme-xp #startMenu .section-title{ color:#083a7a; font-weight:bold; margin:6px 10px; } body.theme-xp #startMenu a{ color:#083a7a; text-decoration:none; } body.theme-xp #startMenu a:hover{ background:#d7e6ff; }