view_mail.js: more progress on upload dialog

[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 269924ce7545b30ee2a8538298618bcbf89866ea..90b6b674c273dd755fee542de8be7725d9264f1b 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -21,9 +21,9 @@
        grid-template-areas:
                'ctdl-mg-banner ctdl-mg-banner'
                'ctdl-mg-menu ctdl-mg-main';
-       gap: 1px;
-       background-color: DarkSlateGrey;        /* This is the color of the lines between the boxes, and also the boxes themselves if not overridden */
-       padding: 0;                             /* This is the border around the edges of the screen */
+       gap: 1px;                               /* This is the thickness of the lines between the boxes */
+       background-color: DarkSlateGrey;        /* This is the color of the lines between the boxes */
+       padding: 0;                             /* This is the border around the edges of the screen (0 for no border) */
        width: 100vw;
        height: 100vh;
 }
@@ -42,6 +42,7 @@
        grid-area: ctdl-mg-main;
        overflow-x: hidden;
        overflow-y: auto;
+       background-color: GhostWhite;
 }
 
 .ctdl-main-grid-container > div {
@@ -278,11 +279,17 @@ html,body,h1,h2,h3,h4,h5 {
 }
 
 .ctdl_mail_folders li {
-       color: DarkSlateGrey;
+       color: Black;
+       padding-left: 10px;
 }
 
 .ctdl_mail_folders li:hover {
-       color: Black;
+       color: DarkSlateGrey;
+}
+
+.ctdl_mail_folder_droppable {
+       background-color: LightGrey;
+       font-weight: bold;
 }
 
 .ctdl-avatar {
@@ -630,6 +637,34 @@ blockquote pre {
        overflow: hidden;
 }
 
+.ctdl-compose-attachments-title {
+       padding: 1em;
+       background: Gainsboro;
+       display: flex;
+       flex-wrap: nowrap;
+       flex-direction: row;
+       justify-content: space-between;
+       align-items: auto;
+       align-content: start
+}
+
+.ctdl-upload-drop-area {                       /* shamelessly swiped from https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/ */
+       border: 2px dashed #ccc;
+       border-radius: 20px;
+       width: 480px;
+       font-family: sans-serif;
+       margin: 100px auto;
+       padding: 20px;
+}
+
+.ctdl-upload-drop-area.highlight {
+       border-color: purple;
+}
+
+.my-form {
+       margin-bottom: 10px;
+}
+
 .ctdl-login-screen-grid-container {
        display: grid;
        grid-template-columns: auto auto;