Initial

resources/app/public/less2/applications/applications.less

@@ -0,0 +1,177 @@
+
+.application {
+  position: absolute;
+  z-index: var(--z-index-window);
+  transform-origin: top left;
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  min-width: 200px;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+
+  background: var(--background);
+  font-size: var(--font-size-14);
+  color: var(--color-text-primary);
+
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  box-shadow: 0 0 10px #000;
+
+  &:not(.minimized) {
+    min-height: calc(var(--header-height) + 1rem);
+  }
+
+  // All Applications have window content
+  .window-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    padding: 1rem;
+    overflow: hidden;
+  }
+
+  // Closing or minimizing the Application
+  &.minimizing {
+    transition: max-height 0.25s ease-out, max-width 0.25s ease-out;
+  }
+  &.maximizing {
+    transition: max-height 0.25s ease-in, max-width 0.25s ease-in;
+  }
+  &.minimized .window-content,
+  &.minimizing .window-content,
+  &.maximizing .window-content {
+    display: none;
+  }
+
+  // Framed applications have a window header
+  .window-header {
+    --button-size: 24px;
+
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    flex: 0 0 var(--header-height);
+    position: relative;
+    overflow: hidden;
+    padding: 0 0.5rem;
+    gap: 0.25rem;
+    z-index: 1;
+    cursor: grab;
+
+    background: var(--color-header-background);
+    font-size: var(--font-size-13);
+    color: var(--color-light-1);
+    border-bottom: 1px solid var(--color-border);
+
+    .window-icon {
+      flex: none;
+    }
+
+    .window-title {
+      flex: 1;
+      font-size: inherit;
+      font-family: inherit;
+      font-weight: inherit;
+      text-shadow: none;
+      margin: 0;
+      line-height: var(--header-height);
+      border: none;
+      overflow: hidden;
+      text-align: left;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    button.header-control {
+      flex: 0 0 var(--button-size);
+      height: var(--button-size);
+      padding: 0;
+      margin: 0;
+      border: none;
+    }
+  }
+
+  .controls-dropdown {
+    position: absolute;
+    overflow: hidden auto;
+    top: var(--header-height);
+    right: 0;
+    width: max-content;
+    min-width: 100px;
+    max-width: 300px;
+    max-height: 0;
+    z-index: 1;
+    list-style: none;
+    margin: 0 0.25rem;
+    padding: 0;
+    background: var(--background);
+    border-radius: 0 0 4px 4px;
+    transition: max-height 0.5s;
+    pointer-events: none;
+
+    &.expanded {
+      max-height: calc(100% - var(--header-height));
+      pointer-events: all;
+      box-shadow: 0 0 8px var(--color-cool-3);
+    }
+    .header-control {
+      margin: 0.25rem;
+      > button {
+        --button-background-color: none;
+        --button-text-color: var(--color-text-primary);
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        border: none;
+        font-size: var(--font-size-12);
+      }
+    }
+  }
+
+  .window-resize-handle {
+    position: absolute;
+    inset: auto -2px -3px auto;
+    width: 11px;
+    height: 11px;
+    cursor: nwse-resize;
+    background: transparent url("../ui/resize-handle.webp") no-repeat center / contain;
+  }
+
+  &.minimized .window-resize-handle { display: none; }
+}
+
+// Dark theme backdrop filter
+.theme-dark .application {
+  .window-content {
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+  }
+  .window-resize-handle { filter: invert(1); }
+}
+
+
+/**
+ * Reduced Transparency Preferences
+ */
+@media (prefers-reduced-transparency) {
+  .theme-dark .application,
+  .theme-foundry .application {
+    --background: var(--color-cool-5);
+  }
+  .application .window-content {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+  .app {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+  #tooltip, .locked-tooltip {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}