ywana-core8 0.2.19 → 0.2.21

package/src/desktop/desktop.css

@@ -45,7 +45,11 @@
 }
 
 .desktop-taskbar {
-    
+    position: relative;
+    z-index: 10000; /* Above everything: workspace (1), windows (100-9999), overlays (9000-9999) */
+    background: rgba(0, 0, 0, 0.8); /* Default dark background */
+    backdrop-filter: blur(10px);
+
     & .icon {
         color: white;
         & :hover {
@@ -53,6 +57,45 @@
             background-color: rgba(255, 255, 255, 0.1);
         }
     }
+
+    /* Ensure menu inside taskbar appears above everything */
+    & .menu-icon > menu {
+        z-index: 10001; /* Above taskbar itself */
+        /* Dark theme for taskbar menus */
+        background-color: rgba(40, 40, 40, 0.98);
+        backdrop-filter: blur(10px);
+        border-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    }
+
+    /* Menu items styling for dark theme */
+    & .menu-icon > menu .menu-item > label {
+        color: rgba(255, 255, 255, 0.95);
+    }
+
+    & .menu-icon > menu .menu-item > .icon {
+        color: rgba(255, 255, 255, 0.85);
+    }
+
+    & .menu-icon > menu .menu-item > .meta {
+        color: rgba(255, 255, 255, 0.6);
+    }
+
+    /* Hover state for menu items */
+    & .menu-icon > menu li:hover {
+        background-color: rgba(255, 255, 255, 0.15);
+    }
+
+    /* Disabled items */
+    & .menu-icon > menu .menu-item.disabled > label,
+    & .menu-icon > menu .menu-item.disabled > .icon {
+        color: rgba(255, 255, 255, 0.3);
+    }
+
+    /* Separator */
+    & .menu-icon > menu .menu-separator {
+        border-top-color: rgba(255, 255, 255, 0.15);
+    }
 }
 
 
@@ -73,15 +116,399 @@
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
 
+/* ============================================
+   DESKTOP OVERLAY SYSTEM
+   Z-INDEX LAYERS:
+   - Workspace:        1
+   - Windows:          100-9999
+   - Desktop Overlays: 9000-9999
+   - Taskbar:          10000
+   - Taskbar Menus:    10001
+   ============================================ */
+
+/* Desktop Overlay Layer Container */
+/* Note: Positioned within workspace-container to not cover taskbar */
+.desktop-overlay-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none; /* Allow clicks through when no overlays */
+    z-index: 9000; /* Above windows (100-9999) but below taskbar (10000) */
+}
+
+/* Individual Desktop Overlay */
+.desktop-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: auto;
+    display: flex;
+}
+
+/* Backdrop */
+.desktop-overlay--backdrop {
+    background: rgba(0, 0, 0, 0.16);
+}
+
+/* Backdrop with blur */
+.desktop-overlay--blur {
+    backdrop-filter: blur(1px);
+}
+
+/* Overlay content container */
+.desktop-overlay__content {
+    position: relative;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+/* ============================================
+   POSITION VARIANTS
+   ============================================ */
+
+.desktop-overlay--position-center {
+    align-items: center;
+    justify-content: center;
+}
+
+.desktop-overlay--position-top {
+    align-items: flex-start;
+    justify-content: center;
+}
+
+.desktop-overlay--position-bottom {
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.desktop-overlay--position-left {
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.desktop-overlay--position-right {
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.desktop-overlay--position-top-left {
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+.desktop-overlay--position-top-right {
+    align-items: flex-start;
+    justify-content: flex-end;
+}
+
+.desktop-overlay--position-bottom-left {
+    align-items: flex-end;
+    justify-content: flex-start;
+}
+
+.desktop-overlay--position-bottom-right {
+    align-items: flex-end;
+    justify-content: flex-end;
+}
+
+.desktop-overlay--position-custom {
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+.desktop-overlay--size-auto .desktop-overlay__content {
+    width: auto;
+    height: auto;
+}
+
+.desktop-overlay--size-full .desktop-overlay__content {
+    width: 100%;
+    height: 100%;
+}
+
+.desktop-overlay--size-large .desktop-overlay__content {
+    width: 80%;
+    height: 80%;
+    max-width: 1200px;
+    max-height: 800px;
+}
+
+.desktop-overlay--size-medium .desktop-overlay__content {
+    width: 60%;
+    height: 60%;
+    max-width: 800px;
+    max-height: 600px;
+}
+
+.desktop-overlay--size-small .desktop-overlay__content {
+    width: 40%;
+    height: 40%;
+    max-width: 500px;
+    max-height: 400px;
+}
+
+.desktop-overlay--size-custom .desktop-overlay__content {
+    /* Custom size set via inline styles */
+}
+
+/* ============================================
+   ANIMATIONS - ENTER
+   ============================================ */
+
+/* Fade */
+.desktop-overlay--enter-fade {
+    animation: desktopOverlayFadeIn var(--animation-duration, 300ms) ease-out;
+}
+
+@keyframes desktopOverlayFadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Slide Up */
+.desktop-overlay--enter-slide-up .desktop-overlay__content {
+    animation: desktopOverlaySlideUp var(--animation-duration, 300ms) ease-out;
+}
+
+@keyframes desktopOverlaySlideUp {
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Slide Down */
+.desktop-overlay--enter-slide-down .desktop-overlay__content {
+    animation: desktopOverlaySlideDown var(--animation-duration, 300ms) ease-out;
+}
+
+@keyframes desktopOverlaySlideDown {
+    from {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Slide Left */
+.desktop-overlay--enter-slide-left .desktop-overlay__content {
+    animation: desktopOverlaySlideLeft var(--animation-duration, 300ms) ease-out;
+}
+
+@keyframes desktopOverlaySlideLeft {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Slide Right */
+.desktop-overlay--enter-slide-right .desktop-overlay__content {
+    animation: desktopOverlaySlideRight var(--animation-duration, 300ms) ease-out;
+}
+
+@keyframes desktopOverlaySlideRight {
+    from {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Scale */
+.desktop-overlay--enter-scale .desktop-overlay__content {
+    animation: desktopOverlayScaleIn var(--animation-duration, 300ms) ease-out;
+}
+
+@keyframes desktopOverlayScaleIn {
+    from {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+/* None */
+.desktop-overlay--enter-none {
+    /* No animation */
+}
+
+/* ============================================
+   ANIMATIONS - EXIT
+   ============================================ */
+
+/* Fade */
+.desktop-overlay--exit-fade {
+    animation: desktopOverlayFadeOut var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlayFadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+/* Slide Up */
+.desktop-overlay--exit-slide-up .desktop-overlay__content {
+    animation: desktopOverlaySlideUpExit var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlaySlideUpExit {
+    from {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+}
+
+/* Slide Down */
+.desktop-overlay--exit-slide-down .desktop-overlay__content {
+    animation: desktopOverlaySlideDownExit var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlaySlideDownExit {
+    from {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+}
+
+/* Slide Left */
+.desktop-overlay--exit-slide-left .desktop-overlay__content {
+    animation: desktopOverlaySlideLeftExit var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlaySlideLeftExit {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+
+/* Slide Right */
+.desktop-overlay--exit-slide-right .desktop-overlay__content {
+    animation: desktopOverlaySlideRightExit var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlaySlideRightExit {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+/* Scale */
+.desktop-overlay--exit-scale .desktop-overlay__content {
+    animation: desktopOverlayScaleOut var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlayScaleOut {
+    from {
+        transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+}
+
+/* None */
+.desktop-overlay--exit-none {
+    /* No animation */
+}
+
+/* ============================================
+   LAUNCHPAD SPECIFIC OVERLAY
+   ============================================ */
+
+.desktop-overlay--launchpad {
+    align-items: flex-end;
+    justify-content: flex-start;
+}
+
+.desktop-overlay__content--launchpad {
+    padding: 0 0 0 15px;
+}
+
 /* Responsive design */
 @media (max-width: 768px) {
     .desktop {
         font-size: 14px;
     }
+
+    .desktop-overlay--size-large .desktop-overlay__content {
+        width: 90%;
+        height: 90%;
+    }
+
+    .desktop-overlay--size-medium .desktop-overlay__content {
+        width: 80%;
+        height: 80%;
+    }
+
+    .desktop-overlay--size-small .desktop-overlay__content {
+        width: 70%;
+        height: 70%;
+    }
 }
 
 @media (max-width: 480px) {
     .desktop {
         font-size: 12px;
     }
+
+    .desktop-overlay--size-large .desktop-overlay__content,
+    .desktop-overlay--size-medium .desktop-overlay__content,
+    .desktop-overlay--size-small .desktop-overlay__content {
+        width: 95%;
+        height: 95%;
+    }
 }