]> code.citadel.org Git - citadel.git/blobdiff - webcit-ng/static/css/webcit.css
Tuned up the CSS on more banner buttons
[citadel.git] / webcit-ng / static / css / webcit.css
index 36c8838184b4002f7b39384204e3651c790b5a67..01c168bb162757e6e9a4a3dd5f3e8f19619043aa 100644 (file)
@@ -1,5 +1,5 @@
 /*
-       Copyright (c) 1996-2022 by Art Cancro and the citadel.org team.
+       Copyright (c) 1996-2023 by Art Cancro and the citadel.org team.
        This program is open source software.  Use, duplication, or disclosure
        are subject to the terms of the GNU General Public License, version 3.
 */
@@ -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 {
        display: block;
        background-color: DarkSlateGrey;
        color: White;
-       font-size: 1.25vw;
+       font-size: calc(50% + 0.6vw);
        border: none;
-       padding-left: 4px;
-       padding-right: 4px;
+       padding: 1vh;
 }
 
 .ctdl-banner-buttons li button:hover {
@@ -153,7 +153,7 @@ html,body,h1,h2,h3,h4,h5 {
        border: 1px solid GhostWhite;
        background-color: GhostWhite;
        color: Black;
-       font-size: 1vw;
+       font-size: calc(50% + 0.7vh);
        border-radius: 5px;
 }
 
@@ -172,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 */
@@ -181,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 */
@@ -220,12 +223,13 @@ html,body,h1,h2,h3,h4,h5 {
        border-width: thin;
        border-color: Black;
        cursor: default;
+       font-size: calc(50% + 0.4vh);
 }
 
 .ctdl-msg-button:hover {
        background-color: #123456;
        color: GhostWhite;
-       transition: .3s;
+       transition: .4s;
        border-color: #123456;
        cursor: default;
 }
@@ -241,7 +245,6 @@ html,body,h1,h2,h3,h4,h5 {
        cursor: default;
 }
 
-
 .ctdl-avatar {
        width: 32px;
 }
@@ -276,6 +279,20 @@ html,body,h1,h2,h3,h4,h5 {
        margin-left: 0;
 }
 
+.ctdl_mail_folders li {
+       color: Black;
+       padding-left: 10px;
+}
+
+.ctdl_mail_folders li:hover {
+       color: DarkSlateGrey;
+}
+
+.ctdl_mail_folder_droppable {
+       background-color: LightGrey;
+       font-weight: bold;
+}
+
 .ctdl-avatar {
        float: left;
        padding-right: 2px;
@@ -293,31 +310,48 @@ html,body,h1,h2,h3,h4,h5 {
        text-decoration: none;
 }
 
+.ctdl-msg-body {
+}
+
+.ctdl-forum-editor-body {
+       padding-left: 5px;
+       padding-right: 5px;
+       padding-top: 1px black;
+       padding-bottom: 1px black;
+}
+
 blockquote {
        background-color: #f5f5f5 !important;
        color: Navy !important;
+       border-left: 2px solid Navy;
        margin-bottom: 0px;
        padding-bottom: 0px;
+       margin-left: 1em;
+       padding-left: 1em;
 }
 
 blockquote blockquote {
        background-color: #ebebeb !important;
        color: Maroon !important;
+       border-left: 2px solid Maroon;
 }
 
 blockquote blockquote blockquote {
        background-color: #e1e1e1 !important;
        color: Green !important;
+       border-left: 2px solid Green;
 }
 
 blockquote blockquote blockquote blockquote {
        background-color: #d7d7d7 !important;
        color: Purple !important;
+       border-left: 2px solid Purple;
 }
 
 blockquote blockquote blockquote blockquote blockquote {
        background-color: #cdcdcd !important;
        color: Teal !important;
+       border-left: 2px solid Teal;
 }
 
 blockquote pre {
@@ -329,6 +363,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%;
@@ -358,10 +405,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;
 }
@@ -477,10 +525,12 @@ blockquote pre {
        padding: 0;
        background-color: GhostWhite;
        display: grid;
-       grid-template-rows: auto auto 1fr auto;
+       grid-template-rows: auto auto auto auto 1fr auto;
        grid-template-columns: auto 1fr;
        grid-template-areas:
-               'ctdl-compose-to-label ctdl-compose-to-field'
+               'ctdl-compose-to-label ctdl-compose-to-line'
+               'ctdl-compose-cc-label ctdl-compose-cc-field'
+               'ctdl-compose-bcc-label ctdl-compose-bcc-field'
                'ctdl-compose-subject-label ctdl-compose-subject-field'
                'ctdl-compose-message-box ctdl-compose-message-box'
                'ctdl-compose-toolbar ctdl-compose-toolbar';
@@ -492,11 +542,60 @@ blockquote pre {
        padding: 0.5vw;
 }
 
+.ctdl-compose-to-line {
+       grid-area: ctdl-compose-to-line;
+       padding-left: 0;
+       padding-right: 0.5vw;
+       padding-top: 0.5vw;
+       padding-bottom: 1px;
+       border-bottom: 1px solid Grey;
+       margin-right: 0.5vw;
+       display: flex;
+       flex-direction: row;
+       flex-wrap: nowrap;
+       margin: 0;
+       width: 100%;
+       height: 100%;
+       overflow: hidden;
+}
+
 .ctdl-compose-to-field {
-       grid-area: ctdl-compose-to-field;
+       flex-grow: 1;
+
+}
+
+.ctdl-compose-cc-label {
+       grid-area: ctdl-compose-cc-label;
        padding: 0.5vw;
+       display: none;
+}
+
+.ctdl-compose-cc-field {
+       grid-area: ctdl-compose-cc-field;
        border-bottom: 1px solid Grey;
        margin-right: 0.5vw;
+       display: none;
+       padding-left: 0;
+       padding-right: 0.5vw;
+       padding-top: 0.5vw;
+       padding-bottom: 0;
+}
+
+.ctdl-compose-bcc-label {
+       grid-area: ctdl-compose-bcc-label;
+       padding: 0.5vw;
+       display: none;
+}
+
+.ctdl-compose-bcc-field {
+       grid-area: ctdl-compose-bcc-field;
+       padding-left: 0;
+       padding-right: 0.5vw;
+       padding-top: 0.5vw;
+       padding-bottom: 0;
+       border-bottom: 1px solid Grey;
+       margin-right: 0.5vw;
+       display: none;
 }
 
 .ctdl-compose-subject-label {
@@ -506,7 +605,10 @@ blockquote pre {
 
 .ctdl-compose-subject-field {
        grid-area: ctdl-compose-subject-field;
-       padding: 0.5vw;
+       padding-left: 0;
+       padding-right: 0.5vw;
+       padding-top: 0.5vw;
+       padding-bottom: 0;
        border-bottom: 1px solid Grey;
        margin-right: 0.5vw;
 }
@@ -536,6 +638,39 @@ blockquote pre {
        overflow: hidden;
 }
 
+.ctdl-upload {
+       display: none;                          /* set to 'block' to make it appear when needed */
+       width: 95%;
+       height: 95%;
+       border: 2px dashed #ccc;
+       border-radius: 20px;
+       border-color: Black;
+       justify-content: center;
+       align-items: center;
+       padding: 1em;
+       background-color: GhostWhite;
+}
+
+.ctdl-upload.highlight {
+       border-color: Blue;
+}
+
+.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-form {
+       text-align: center;
+       margin-bottom: 10px;
+}
+
 .ctdl-login-screen-grid-container {
        display: grid;
        grid-template-columns: auto auto;
@@ -552,3 +687,12 @@ blockquote pre {
        border: none;
        font-size: 1.25em;
 }
+
+.ctdl-fatal-error {
+       background-color: DarkRed;
+       margin-left: 1em;
+       margin-right: 1em;
+       padding: 1em;
+       font-size: 2em;
+       color: White;
+}