Initial commit

src/style.css

@@ -0,0 +1,104 @@
+/* mail module styles */
+
+.mail-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  isolation: isolate;
+}
+
+.mail-toolbar {
+  flex-shrink: 0;
+}
+
+.mail-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.mail-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color));
+  overflow-y: auto;
+}
+
+.mail-main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.mail-wrapper {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.mail-list-panel {
+  width: 320px;
+  min-width: 280px;
+  max-width: 450px;
+  border-right: 1px solid rgb(var(--v-border-color));
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.mail-reader-panel {
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Tiptap editor styles */
+.tiptap-editor {
+  outline: none;
+}
+
+.tiptap-editor p.is-editor-empty:first-child::before {
+  color: rgb(var(--v-theme-on-surface-variant));
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+/* Message list item styles */
+.message-item {
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.message-item:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.04);
+}
+
+.message-item.selected {
+  background-color: rgba(var(--v-theme-primary), 0.12);
+}
+
+.message-item.unread {
+  font-weight: 600;
+}
+
+/* Responsive adjustments */
+@media (max-width: 960px) {
+  .mail-wrapper {
+    flex-direction: column;
+  }
+  
+  .mail-list-panel {
+    width: 100%;
+    max-width: 100%;
+    border-right: none;
+    border-bottom: 1px solid rgb(var(--v-border-color));
+  }
+  
+  .mail-reader-panel {
+    width: 100%;
+  }
+}