Initial layout of mail compose screen.

[citadel.git] / webcit-ng / static / css / webcit.css

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index b0af8d64eac7b429de5b8525ed335b70bfb96a5a..004de4c9f2d2694e708000ce7afdc62eda61ba2a 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -467,9 +467,49 @@ blockquote pre {
 .ctdl-compose-mail {                           /* mail composition window */
        width: 100%;
        height: 100%;
-       overflow: auto;
-       border: 2px dashed red;                 /* FIXME this goes away after testing */
+       overflow: none;
+       border: none;
+       padding: 0;
        background-color: GhostWhite;
+       display: grid;
+       grid-template-rows: auto auto 1fr;
+       grid-template-columns: auto 1fr;
+       grid-template-areas:
+               'ctdl-compose-to-label ctdl-compose-to-field'
+               'ctdl-compose-subject-label ctdl-compose-subject-field'
+               'ctdl-compose-message-box ctdl-compose-message-box';
+       gap: 3px;
+}
+
+.ctdl-compose-to-label {
+       grid-area: ctdl-compose-to-label;
+       padding: 0.5vw;
+}
+
+.ctdl-compose-to-field {
+       grid-area: ctdl-compose-to-field;
+       padding: 0.5vw;
+       border-bottom: 1px solid Grey;
+       margin-right: 0.5vw;
+}
+
+.ctdl-compose-subject-label {
+       grid-area: ctdl-compose-subject-label;
+       padding: 0.5vw;
+}
+
+.ctdl-compose-subject-field {
+       grid-area: ctdl-compose-subject-field;
+       padding: 0.5vw;
+       border-bottom: 1px solid Grey;
+       margin-right: 0.5vw;
+}
+
+.ctdl-compose-message-box {
+       grid-area: ctdl-compose-message-box;
+       overflow-x: wrap;
+       overflow-y: auto;
+       padding: 0.5vw;
 }
 
 .ctdl-login-screen-grid-container {