/*
- 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.
*/
box-sizing: border-box;
padding: 0;
margin: 0;
+}
+
+[contenteditable]:focus {
+ outline: 0px solid transparent;
}
-.ctdl-main-grid-container { /* This grid contains the "holy grail layout" of the screen */
+.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:
- '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 */
+ '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: header;
+ grid-area: ctdl-mg-banner;
background-color: DarkSlateGrey;
}
.ctdl-grid-sidebar-item { /* Side bar, referenced by the grid container */
- grid-area: menu;
+ grid-area: ctdl-mg-menu;
background-color: GhostWhite;
}
.ctdl-grid-main-item { /* Main content area of the screen, referenced by the grid container */
- grid-area: main;
+ grid-area: ctdl-mg-main;
overflow-x: hidden;
overflow-y: auto;
+ background-color: GhostWhite;
}
.ctdl-main-grid-container > div {
text-align: left;
- padding: 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;
- 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 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
}
border: 1px solid GhostWhite;
background-color: GhostWhite;
color: Black;
- font-size: 1vw;
+ font-size: calc(50% + 0.7vh);
border-radius: 5px;
}
color: #FFFFFF;
}
-.ctdl-logo-img {
- background-color: White;
- border-radius: 5px;
- padding-bottom: 3px;
- padding-left: 3px;
- padding-right: 3px;
-}
-
.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 */
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 */
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 {
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;
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 {
background-color: GhostWhite;
width: 100%;
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;
}
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;
overflow-x: hidden;
overflow-y: scroll;
background-color: #DDDDDD;
.ctdl-mailbox-table tr {
cursor: pointer;
-}
-
-.ctdl-mailbox-table tr:nth-child(even) { /* this gives us the alternating-bar effect */
- background-color: Gainsboro;
+ 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 {
cursor: default;
}
+.ctdl-mail-selected {
+ background-color: Blue;
+ color: White;
+}
+
.ctdl-mail-subject { /* Subject column in mailbox message list */
}
.ctdl-compose-mail { /* mail composition window */
width: 100%;
height: 100%;
- overflow: auto;
- border: 2px dashed red; /* FIXME this goes away after testing */
+ 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