/*
- * Copyright (c) 1996-2022 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.
- */
+ 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.
+*/
-
-* { /* This makes the grid take up exactly 100% of the screen */
+* { /* This makes grids consume exactly 100% of their parent containers */
box-sizing: border-box;
padding: 0;
margin: 0;
+}
+
+[contenteditable]:focus {
+ outline: 0px solid transparent;
}
-.ctdl-grid-item-1 { /* These grid items will be referenced in the grid container */
- grid-area: header;
+.ctdl-main-grid-container { /* This grid implements the "holy grail layout" of the screen */
+ display: grid;
+ grid-template-rows: 5vh auto;
+ grid-template-columns: 12vw auto;
+ grid-template-areas:
+ 'ctdl-mg-banner ctdl-mg-banner'
+ 'ctdl-mg-menu ctdl-mg-main';
+ 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;
+}
+
+.ctdl-grid-banner-item { /* Top banner, referenced by the grid container */
+ grid-area: ctdl-mg-banner;
+ background-color: DarkSlateGrey;
}
-.ctdl-grid-item-2 {
- grid-area: menu;
+.ctdl-grid-sidebar-item { /* Side bar, referenced by the grid container */
+ grid-area: ctdl-mg-menu;
+ background-color: GhostWhite;
}
-.ctdl-grid-item-3 {
- grid-area: main;
+.ctdl-grid-main-item { /* Main content area of the screen, referenced by the grid container */
+ grid-area: ctdl-mg-main;
overflow-x: hidden;
overflow-y: auto;
+ background-color: GhostWhite;
}
-.ctdl-grid-container { /* This is so mind-bogglingly simple I can't believe it works */
- display: grid;
- grid-template-areas:
- 'header header header header header header'
- 'menu main main main main main'
- 'menu main main main main main'
- 'menu main main main main main'
- 'menu main main main main main'
- 'menu main main main main main'
- 'menu main main main main main'
- 'menu main main main main main';
- gap: 3px;
- background-color: #456789; /* This is the color of the lines between the boxes */
- padding: 0; /* This is the border around the edges of the screen */
- width: 100vw;
- height: 100vh;
+.ctdl-main-grid-container > div {
+ text-align: left;
}
-.ctdl-grid-container > div {
- background-color: #DDEEFF;
- text-align: left;
- padding: 10px 0;
+.ctdl-banner-buttons { /* Flexbox container for everything we stick into the banner */
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.ctdl-banner-left { /* Items which should be grouped to the LEFT side of the banner */
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+}
+
+.ctdl-banner-center { /* Items which should be grouped to the MIDDLE of the banner */
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+}
+
+.ctdl-banner-right { /* Items which should be grouped to the RIGHT side of the banner */
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+}
+
+.ctdl-banner-buttons li, .ctdl-banner-buttons li button {
+ float: left;
+ display: block;
+ background-color: DarkSlateGrey;
+ color: White;
+ /* font-size: 1.7vh; */
+ font-size: calc(50% + 0.6vw);
+ border: none;
+ padding: 1vh;
+}
+
+.ctdl-banner-buttons li button:hover {
+ background-color: Black;
+}
+
+.ctdl-banner-buttons a { /* For example, the Login / Log Off button */
+ color: White;
+}
+
+.ctdl-banner-buttons span { /* For example, the name of the logged in user */
+ color: White;
+}
+
+.ctdl-logo-img {
+ background-color: White;
+ border-radius: 5px;
+ padding-bottom: 3px;
+ padding-left: 3px;
+ padding-right: 3px;
}
html,body,h1,h2,h3,h4,h5 {
- font-family: verdana, sans-serif
+ font-family: sans-serif
}
.ctdl-modal {
- display: none; /* set to "block" to make the modal appear */
+ display: none; /* set to "block" to make the modal appear */
z-index: 9;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
border-style: outset;
border-width: 3px;
+ border-color: Black;
justify-content: center;
align-items: center;
padding: 10px;
- background-color: #DDDDDD;
+ background-color: GhostWhite;
+}
+
+.ctdl-modal-header {
+ background-color: GhostWhite;
+ padding: 10px;
+}
+
+.ctdl-modal-main {
+ padding: 10px;
}
-.ctdl-sidebar-class button {
+.ctdl-modal-footer {
+ background-color: GhostWhite;
+ padding: 10px;
+}
+
+.ctdl-sidebar-button {
width: 100%;
- background-color: blue;
+ padding: 10px;
text-align: left;
+ border: 1px solid GhostWhite;
+ background-color: GhostWhite;
+ color: Black;
+ font-size: calc(50% + 0.7vh);
+ border-radius: 5px;
+}
+
+.ctdl-sidebar-button:hover {
+ border-color: Blue;
+}
+
+.ctdl-sidebar-button-selected {
+ font-weight: bold;
+ background-color: Gainsboro;
+}
+
+.ctdl-grid-banner-item button {
background-color: #888888;
color: #FFFFFF;
}
-.ctdl-msg-reading-pane {
- background-color: #456789;
+.ctdl-forum-reading-pane {
+ background-color: White; /* Background behind the message boxes */
}
-.ctdl-fmsg-wrapper { /* message wrapper for forum view */
+.ctdl-fmsg-wrapper { /* message wrapper for forum view */
overflow: hidden;
border-radius: 10px;
- background-color: white;
+ background-color: White;
margin: 1vw;
- padding: 5px; /* inside the box */
+ padding: 5px; /* inside the box */
+ border-radius: 10px;
+ border-style: outset;
+ border-width: thin;
}
-.ctdl-mmsg-wrapper { /* message wrapper for mailbox view */
+.ctdl-mmsg-wrapper { /* message wrapper for mailbox view */
overflow: hidden;
- background-color: white;
- padding: 5px; /* inside the box */
- border-style: solid; /* could also be: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden */
- border-width: 1px;
+ background-color: White;
+ padding: 5px; /* inside the box */
}
.ctdl-msg-reply {
.ctdl-msg-header {
overflow: hidden;
padding: 4px;
+ min-height: 35px;
background-color: GhostWhite;
+ margin-bottom: 10px; /* this is the vertical space between the header and the message text */
}
.ctdl-msg-header-info {
.ctdl-msg-button {
margin-left: 2px;
border-radius: 5px;
- background-color: blue;
- color: black;
+ background-color: Blue;
+ color: Black;
padding: 2px;
background-color: GhostWhite;
border-style: solid;
border-width: thin;
- border-color: black;
+ border-color: Black;
+ cursor: default;
}
.ctdl-msg-button:hover {
color: GhostWhite;
transition: .3s;
border-color: #123456;
+ cursor: default;
}
.ctdl-msg-button a {
+ color: Black;
text-decoration: none;
+ cursor: default;
+}
+
+.ctdl-msg-button a:hover {
+ color: White;
+ cursor: default;
}
.ctdl-avatar {
width: 32px;
}
+.ctdl-avatar img {
+ clip-path: circle(50%);
+}
+
.ctdl-username {
font-weight: bold;
color: #000055;
font-weight: bold;
}
-.ctdl-fmsg-content { /* message text, when in forum view */
+.ctdl-fmsg-content { /* message text, when in forum view */
margin-left: 32px;
}
-.ctdl-mmsg-content { /* message text, when in mailbox view */
+.ctdl-mmsg-content { /* message text, when in mailbox view */
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;
.ctdl-forum-nav {
text-align: center;
- color: #ffff00;
+ color: Black;
+ background-color: Gainsboro;
+ padding-top: 5px;
+ padding-bottom: 5px;
}
.ctdl-forum-nav a {
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;
+ 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;
+ color: Maroon !important;
+ border-left: 2px solid Maroon;
}
blockquote blockquote blockquote {
background-color: #e1e1e1 !important;
- color: green !important;
+ color: Green !important;
+ border-left: 2px solid Green;
}
blockquote blockquote blockquote blockquote {
background-color: #d7d7d7 !important;
- color: purple !important;
+ color: Purple !important;
+ border-left: 2px solid Purple;
}
blockquote blockquote blockquote blockquote blockquote {
background-color: #cdcdcd !important;
- color: teal !important;
+ color: Teal !important;
+ border-left: 2px solid Teal;
}
blockquote pre {
margin-right: 1%;
}
+.ctdl-forum-urlmodal {
+ 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 {
- margin: 1%;
+ background-color: GhostWhite;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ border: none;
}
.ctdl-roomlist-floor {
.ctdl-roomlist-floor-label {
font-size: x-large;
margin: 1vw;
+ margin-bottom: 0;
}
.ctdl-roomlist-floor-rooms {
}
.ctdl-roomlist-room {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-around;
+ align-items: center;
overflow: hidden;
border-radius: 10px;
- background-color: white;
- padding: 0.5vw;
- margin-bottom: 0.5vw;
- width: 100%;
+ border-style: outset;
+ border-width: thin;
+ background-color: White;
+ padding: 0.3vw;
+ margin-top: 0;
+ margin-bottom: 0.1vw;
+ margin-left: 1vw;
+ margin-right: 1vw;
}
.ctdl-roomlist-roomicon {
overflow: hidden;
font-size: large;
- margin-left: 1vw;
- margin-right: 1vw;
- padding-left: 0.75vw;
- padding-right: 1.75vw;
- padding-top: 0.75vw;
- padding-bottom: 0.75vw;
+ margin-right: auto;
}
.ctdl-roomlist-roomname {
font-size: large;
+ margin-right: auto;
+ padding-left: 1vw;
+ padding-right: 1vw;
}
.ctdl-roomlist-roomname-hasnewmsgs {
font-weight: bold;
+ margin-right: auto;
}
.ctdl-roomlist-mtime {
+ margin-left: auto;
+}
+
+.ctdl-mailbox-grid-container {
+ display: grid;
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ background-color: GhostWhite;
+ grid-template-rows: 15vw 1fr; /* "1fr" means "all of the remaining space" */
+}
+
+.ctdl-mailbox-pane { /* list of messages when in mailbox view */
+ overflow-x: hidden;
+ overflow-y: scroll;
+ background-color: #DDDDDD;
+ border-bottom: solid 3px SlateGrey; /* We can probably turn this into a drag handle */
}
-.ctdl-mailbox-heading {
+.ctdl-mailbox-table {
+ width: 100%;
+ background-color: GhostWhite;
+ border-collapse: collapse;
+}
+
+.ctdl-mailbox-table td {
+ padding: 5px;
+}
+
+.ctdl-mailbox-table tr {
+ cursor: pointer;
+ border-top: solid 1px LightGrey;
+}
+
+.ctdl-mailbox-table tr:hover {
+ border-top: solid 1px Blue;
+ border-bottom: solid 1px Blue;
+ background-color: LightGrey;
+}
+
+.ctdl-mailbox-table th {
position: sticky;
top: 0;
z-index: 6;
+ background-color: SlateGrey;
+ color: White;
+ padding-top: 5px;
+ padding-bottom: 5px;
}
-.ctdl-mailbox-pane { /* list of messages when in mailbox view */
- width: 100%;
- height: 20em;
- overflow-x: hidden;
- overflow-y: scroll;
+.ctdl-mailbox-table th:hover { /* Suppress highlighting the header bar */
+ background-color: SlateGrey;
+ color: White;
+ cursor: default;
}
-.ctdl-reading-pane { /* message reading/composing pane when in mailbox view */
+.ctdl-mail-selected {
+ background-color: Blue;
+ color: White;
+}
+
+.ctdl-mail-subject { /* Subject column in mailbox message list */
+}
+
+.ctdl-mail-sender { /* Sender column in mailbox message list */
+}
+
+.ctdl-mail-date { /* Date column in mailbox message list */
+ white-space: nowrap;
+}
+
+.ctdl-mail-msgnum { /* # column in mailbox message list */
+ white-space: nowrap;
+}
+
+.ctdl-mailbox-reading-pane { /* message reading pane when in mailbox view */
overflow: auto;
+ background-color: GhostWhite;
+ padding: 5px;
+ overflow: auto;
+ border: none;
}
-.ctdl-compose-mail { /* mail composition window */
+.ctdl-compose-mail { /* mail composition window */
width: 100%;
height: 100%;
- overflow: auto;
- border: 5px solid red;
- background-color: yellow;
+ overflow: none;
+ border: none;
+ padding: 0;
+ background-color: GhostWhite;
+ display: grid;
+ grid-template-rows: auto auto auto auto 1fr auto;
+ grid-template-columns: auto 1fr;
+ grid-template-areas:
+ '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';
+ gap: 3px;
+}
+
+.ctdl-compose-to-label {
+ grid-area: ctdl-compose-to-label;
+ 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 {
+ 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 {
+ grid-area: ctdl-compose-subject-label;
+ padding: 0.5vw;
+}
+
+.ctdl-compose-subject-field {
+ grid-area: ctdl-compose-subject-field;
+ padding-left: 0;
+ padding-right: 0.5vw;
+ padding-top: 0.5vw;
+ padding-bottom: 0;
+ 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;
+ border-bottom: 1px solid Grey;
+ margin-left: 0.5vw;
+ margin-right: 0.5vw;
+}
+
+.ctdl-compose-toolbar {
+ grid-area: ctdl-compose-toolbar;
+ overflow: none;
+ padding: 0.5vw;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0:
+ width: 100%;
+ height: 100%;
+ 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;
+}
+
+.ctdl-login-screen-grid-item {
+ padding: 20px;
+ font-size: 1.25em;
+ vertical-align: middle;
+}
+
+.ctdl-login-screen-grid-item input {
+ height: 100%;
+ 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;
}
projects / citadel.git / blobdiff