Move desktop into apps/desktop

2025-12-22 19:23:52 +00:00 · 2022-05-05 17:16:23 +02:00
parent 9852f2ec22
commit 28bc4113b9
331 changed files with 2 additions and 2 deletions
--- a/apps/desktop/src/scss/header.scss
+++ b/apps/desktop/src/scss/header.scss
@@ -0,0 +1,192 @@
+.header {
+  -webkit-app-region: drag;
+  min-height: 44px;
+  max-height: 44px;
+  border-bottom: 1px solid #000000;
+  display: grid;
+  grid-template-columns: 25% 1fr 25%;
+  grid-column-gap: 5px;
+  justify-items: center;
+  align-items: center;
+
+  @include themify($themes) {
+    background-color: themed("headerBackgroundColor");
+    border-bottom-color: themed("headerBorderColor");
+  }
+
+  app-search {
+    grid-column-start: 2;
+    width: 100%;
+  }
+
+  app-account-switcher {
+    justify-self: end;
+    height: 100%;
+  }
+
+  .search {
+    padding: 0 7px;
+    width: 100%;
+    text-align: left;
+    position: relative;
+
+    .bwi {
+      position: absolute;
+      top: 7px;
+      left: 15px;
+
+      @include themify($themes) {
+        color: themed("headerInputPlaceholderColor");
+      }
+    }
+
+    input {
+      width: 100%;
+      margin: 0;
+      border: none;
+      padding: 5px 10px 5px 30px;
+      border-radius: $border-radius;
+
+      @include themify($themes) {
+        background-color: themed("headerInputBackgroundColor");
+        color: themed("headerInputColor");
+      }
+
+      &:focus {
+        border-radius: $border-radius;
+        outline: none;
+
+        @include themify($themes) {
+          background-color: themed("headerInputBackgroundFocusColor");
+        }
+      }
+
+      &::-webkit-input-placeholder {
+        @include themify($themes) {
+          color: themed("headerInputPlaceholderColor");
+        }
+      }
+    }
+  }
+}
+
+.account-switcher {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-column-gap: 5px;
+  align-items: center;
+  justify-items: center;
+  padding: 0 10px;
+  height: 100%;
+  user-select: none;
+
+  border: none;
+  background: transparent;
+  width: auto;
+
+  @include themify($themes) {
+    color: themed("accountSwitcherTextColor");
+  }
+
+  img {
+    display: block;
+  }
+
+  span {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    @include themify($themes) {
+      background-color: themed("headerBorderColor");
+      color: themed("accountSwitcherTextColor");
+    }
+  }
+}
+
+.account-switcher-dropdown {
+  @include themify($themes) {
+    background-color: themed("accountSwitcherBackgroundColor");
+  }
+  margin-right: 5px;
+  margin-top: 1px; // Fix for border-bottom in header
+  width: 100%;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
+    0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  border-radius: $border-radius;
+
+  button {
+    border: none;
+    background: transparent;
+    width: 100%;
+    padding: 5px 10px;
+
+    @include themify($themes) {
+      color: themed("textColor");
+    }
+
+    &:hover {
+      @include themify($themes) {
+        background-color: themed("backgroundColorAlt2");
+      }
+    }
+  }
+
+  .accounts {
+    padding: 7px 0;
+
+    .account {
+      display: grid;
+      grid-template-columns: 24px auto 24px;
+      grid-column-gap: 11px;
+      align-items: center;
+      justify-items: left;
+
+      .accountInfo {
+        display: grid;
+        text-align: left;
+
+        .email {
+          font-size: $font-size-base;
+          max-width: 168px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .server {
+          font-size: $font-size-small;
+        }
+
+        .status {
+          font-size: $font-size-small;
+          font-style: italic;
+        }
+      }
+    }
+  }
+
+  .border {
+    @include themify($themes) {
+      background: themed("borderColor");
+    }
+    left: 10px;
+    width: calc(100% - 20px);
+    height: 1px;
+    position: relative;
+  }
+
+  .add {
+    margin: 4px 0;
+    text-align: left;
+  }
+
+  .accountLimitReached {
+    display: block;
+    margin: 4px 0;
+    padding: 5px 10px;
+    font-size: $font-size-small;
+  }
+}