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 8395a94a5d5d73a1e8ccb298d547a4895cad4217..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: 3px;
-       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 {
@@ -171,7 +172,7 @@ html,body,h1,h2,h3,h4,h5 {
 }
 
 .ctdl-forum-reading-pane {
-       background-color: DarkSlateGrey;        /* Background behind the message boxes */
+       background-color: White;        /* Background behind the message boxes */
 }
 
 .ctdl-fmsg-wrapper {                           /* message wrapper for forum view */
@@ -180,6 +181,9 @@ html,body,h1,h2,h3,h4,h5 {
        background-color: White;
        margin: 1vw;
        padding: 5px;                           /* inside the box */
+       border-radius: 10px;
+       border-style: outset;
+       border-width: thin;
 }
 
 .ctdl-mmsg-wrapper {                           /* message wrapper for mailbox view */
@@ -275,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 {
@@ -352,6 +362,19 @@ blockquote pre {
        width: 75%;
 }
 
+/* use this class for any small item that needs to be centered on the screen in the main div */
+.ctdl-middle {
+       display: flex;
+       flex-direction: column;
+       justify-content: center;
+       align-items: center;
+       text-align: center;
+       min-height: 100vh;
+       background-color: GhostWhite;
+       overflow: none;
+       border: none;
+}
+
 .ctdl-roomlist-top {
        background-color: GhostWhite;
        width: 100%;
@@ -381,10 +404,11 @@ blockquote pre {
        overflow: hidden;
        border-radius: 10px;
        border-style: outset;
+       border-width: thin;
        background-color: White;
        padding: 0.3vw;
        margin-top: 0;
-       margin-bottom: 0.25vw;
+       margin-bottom: 0.1vw;
        margin-left: 1vw;
        margin-right: 1vw;
 }
@@ -613,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;