@1kbirds/chidori-mock-gmail 0.1.0

package/src/ui/styles.css

@@ -0,0 +1,340 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #202124;
+  background: #f6f8fc;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+.gmail-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 248px 1fr;
+}
+
+.gmail-sidebar {
+  padding: 18px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.gmail-brand {
+  font-size: 23px;
+  font-weight: 600;
+  padding-left: 8px;
+}
+
+.gmail-compose {
+  width: fit-content;
+  border: 0;
+  border-radius: 8px;
+  padding: 13px 20px;
+  background: #c2e7ff;
+  color: #001d35;
+  box-shadow: 0 1px 2px rgb(60 64 67 / 30%);
+  cursor: pointer;
+}
+
+.gmail-sidebar nav,
+.gmail-labels {
+  display: grid;
+  gap: 3px;
+}
+
+.gmail-sidebar nav button,
+.gmail-labels button {
+  border: 0;
+  border-radius: 0 18px 18px 0;
+  padding: 8px 12px;
+  background: transparent;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  text-align: left;
+}
+
+.gmail-sidebar nav button.active,
+.gmail-labels button.active {
+  background: #d3e3fd;
+  font-weight: 700;
+}
+
+.gmail-labels h2 {
+  margin: 0;
+  padding: 0 12px;
+  color: #5f6368;
+  font-size: 13px;
+}
+
+.gmail-account {
+  margin-top: auto;
+  display: grid;
+  gap: 5px;
+  padding: 10px;
+  color: #5f6368;
+  font-size: 13px;
+}
+
+.gmail-account strong {
+  color: #202124;
+}
+
+.gmail-account button,
+.gmail-actions button,
+.gmail-composer button {
+  border: 1px solid #dadce0;
+  background: #fff;
+  border-radius: 6px;
+  padding: 7px 10px;
+  cursor: pointer;
+}
+
+.gmail-main {
+  min-width: 0;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.gmail-toolbar {
+  min-height: 66px;
+  display: grid;
+  grid-template-columns: minmax(260px, 680px) auto;
+  align-items: center;
+  gap: 18px;
+  padding: 12px 20px;
+}
+
+.gmail-toolbar input {
+  border: 0;
+  border-radius: 8px;
+  background: #eaf1fb;
+  padding: 13px 16px;
+  outline: 0;
+}
+
+.gmail-toolbar div {
+  display: grid;
+  gap: 2px;
+  justify-self: end;
+  text-align: right;
+}
+
+.gmail-toolbar span {
+  color: #5f6368;
+  font-size: 12px;
+}
+
+.gmail-workspace {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(280px, 420px) 1fr;
+  gap: 16px;
+  padding: 0 20px 20px 0;
+}
+
+.gmail-list,
+.gmail-reader {
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  overflow: hidden;
+}
+
+.gmail-list {
+  display: grid;
+  align-content: start;
+}
+
+.gmail-list button {
+  border: 0;
+  border-bottom: 1px solid #f1f3f4;
+  background: #fff;
+  padding: 12px 14px;
+  text-align: left;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 3px 10px;
+  cursor: pointer;
+}
+
+.gmail-list button.selected {
+  background: #eef4ff;
+}
+
+.gmail-list button.unread strong,
+.gmail-list button.unread span {
+  font-weight: 800;
+}
+
+.gmail-list strong,
+.gmail-list small {
+  grid-column: 1 / -1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.gmail-list small,
+.gmail-list time {
+  color: #5f6368;
+  font-size: 12px;
+}
+
+.gmail-reader {
+  padding: 22px;
+  overflow: auto;
+}
+
+.gmail-reader-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  border-bottom: 1px solid #f1f3f4;
+  padding-bottom: 16px;
+}
+
+.gmail-reader h1 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 500;
+}
+
+.gmail-reader p {
+  color: #5f6368;
+}
+
+.gmail-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: start;
+  gap: 8px;
+}
+
+.gmail-thread {
+  display: grid;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.gmail-thread-message {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 14px;
+}
+
+.gmail-thread-message header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.gmail-thread-message header div {
+  display: grid;
+  gap: 2px;
+}
+
+.gmail-thread-message span,
+.gmail-thread-message time {
+  color: #5f6368;
+  font-size: 12px;
+}
+
+.gmail-thread-message p {
+  color: #202124;
+  white-space: pre-wrap;
+}
+
+.gmail-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.gmail-attachments span {
+  border: 1px solid #dadce0;
+  border-radius: 6px;
+  padding: 7px 9px;
+}
+
+.gmail-empty {
+  display: grid;
+  min-height: 300px;
+  place-items: center;
+  color: #5f6368;
+}
+
+.gmail-composer {
+  position: fixed;
+  right: 24px;
+  bottom: 0;
+  width: min(560px, calc(100vw - 32px));
+  background: #fff;
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0 8px 28px rgb(60 64 67 / 32%);
+  overflow: hidden;
+  display: grid;
+}
+
+.gmail-composer header {
+  background: #f2f6fc;
+  padding: 10px 12px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.gmail-composer header button {
+  border: 0;
+  background: transparent;
+}
+
+.gmail-composer input,
+.gmail-composer textarea {
+  border: 0;
+  border-bottom: 1px solid #f1f3f4;
+  padding: 10px 12px;
+  outline: 0;
+}
+
+.gmail-composer textarea {
+  min-height: 220px;
+  resize: vertical;
+}
+
+.gmail-composer footer {
+  padding: 10px 12px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.gmail-composer .gmail-send {
+  background: #0b57d0;
+  color: #fff;
+  border-color: #0b57d0;
+}
+
+@media (max-width: 860px) {
+  .gmail-shell,
+  .gmail-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .gmail-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .gmail-toolbar div {
+    justify-self: start;
+    text-align: left;
+  }
+}