/*
- * 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-banner-item { /* 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-navbar-item {
- grid-area: menu;
+.ctdl-grid-sidebar-item { /* Side bar, referenced by the grid container */
+ grid-area: ctdl-mg-menu;
background-color: GhostWhite;
}
-.ctdl-grid-main-item {
- 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;
-}
-
-.ctdl-main-grid-container { /* This is so mind-bogglingly simple I can't believe it works */
- display: grid;
- grid-template-rows: 100px auto;
- grid-template-columns: 200px auto;
- grid-template-areas:
- 'header header'
- 'menu 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 */
- width: 100vw;
- height: 100vh;
+ background-color: GhostWhite;
}
.ctdl-main-grid-container > div {
text-align: left;
- padding: 0;
}
-.ctdl-banner-buttons li { /* Buttons that appear in the top banner are list items that reference this class */
+.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;
- padding: 8px;
background-color: DarkSlateGrey;
color: White;
- font-size: 1.25vw;
+ font-size: calc(50% + 0.6vw);
+ border: none;
+ padding: 1vh;
}
-.ctdl-banner-buttons li:hover { /* Buttons that appear in the top banner also reference this class when hovered over */
+.ctdl-banner-buttons li button:hover {
background-color: Black;
}
-.ctdl-banner-buttons a {
+.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: 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%;
padding: 10px;
}
-.ctdl-sidebar-class button {
+.ctdl-sidebar-button {
width: 100%;
padding: 10px;
text-align: left;
- border-color: GhostWhite;
+ border: 1px solid GhostWhite;
background-color: GhostWhite;
- color: #000000;
- font-size: 1vw;
+ color: Black;
+ font-size: calc(50% + 0.7vh);
+ border-radius: 5px;
}
-.ctdl-sidebar-class button:hover {
- background-color: White;
+.ctdl-sidebar-button:hover {
+ border-color: Blue;
+}
+
+.ctdl-sidebar-button-selected {
+ font-weight: bold;
+ background-color: Gainsboro;
}
.ctdl-grid-banner-item button {
}
.ctdl-forum-reading-pane {
- background-color: #456789;
+ 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;
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;
+ padding: 5px; /* inside the box */
}
.ctdl-msg-reply {
padding: 4px;
min-height: 35px;
background-color: GhostWhite;
- margin-bottom: 10px; /* this is the vertical space between the header and the message text */
+ margin-bottom: 10px; /* this is the vertical space between the header and the message text */
}
.ctdl-msg-header-info {
border-style: solid;
border-width: thin;
border-color: Black;
-}
-
-.ctdl-msg-button a {
- 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;
}
-.ctdl-msg-button a:hover {
- color: White;
-}
-
-
.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;
+ 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 {
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;
+ border-style: outset;
+ border-width: thin;
background-color: White;
- padding: 0.5vw;
- margin-bottom: 0.5vw;
- width: 100%;
+ 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 {
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 */
- height: 15vw;
+.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-table {
}
.ctdl-mailbox-table td {
- padding-top: 5px;
- padding-bottom: 5px;
+ padding: 5px;
}
-.ctdl-mailbox-table tr:nth-child(even) { /* this gives us the alternating-bar effect */
- background-color: Gainsboro;
+.ctdl-mailbox-table tr {
+ cursor: pointer;
+ border-top: solid 1px LightGrey;
}
.ctdl-mailbox-table tr:hover {
- background-color: Blue;
- color: White;
+ border-top: solid 1px Blue;
+ border-bottom: solid 1px Blue;
+ background-color: LightGrey;
}
.ctdl-mailbox-table th {
padding-bottom: 5px;
}
-.ctdl-mailbox-table th:hover { /* Suppress highlighting the header bar */
+.ctdl-mailbox-table th:hover { /* Suppress highlighting the header bar */
background-color: SlateGrey;
color: White;
+ cursor: default;
}
-.ctdl-mailbox-reading-pane { /* message reading pane when in mailbox view */
- overflow-x: hidden;
- overflow-y: auto;
+.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 {
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