/*
-Copyright (c) 1996-2022 by Art Cancro and the citadel.org team.
-This program is open source software. You can redistribute it and/or
-modify it under the terms of the GNU General Public License, version 3.
+ 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.
*/
+* { /* This makes grids consume exactly 100% of their parent containers */
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+.ctdl-main-grid-container { /* This grid contains the "holy grail layout" of the screen */
+ 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;
+}
+
+.ctdl-grid-banner-item { /* Top banner, referenced by the grid container */
+ grid-area: header;
+ background-color: DarkSlateGrey;
+}
+
+.ctdl-grid-sidebar-item { /* Side bar, referenced by the grid container */
+ grid-area: menu;
+ background-color: GhostWhite;
+}
+
+.ctdl-grid-main-item { /* Main content area of the screen, referenced by the grid container */
+ grid-area: main;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+.ctdl-main-grid-container > div {
+ text-align: left;
+ padding: 0;
+}
+
+.ctdl-banner-buttons li, .ctdl-banner-buttons li button {
+ float: left;
+ display: block;
+ padding: 8px;
+ background-color: DarkSlateGrey;
+ color: White;
+ font-size: 1.25vw;
+ border: none;
+}
+
+.ctdl-banner-buttons li button:hover {
+ background-color: Black;
+}
+
+.ctdl-banner-buttons a {
+ color: White;
+}
+
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 */
+ z-index: 9;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-style: outset;
+ border-width: 3px;
+ border-color: Black;
+ justify-content: center;
+ align-items: center;
+ padding: 10px;
+ background-color: GhostWhite;
+}
+
+.ctdl-modal-header {
+ background-color: GhostWhite;
+ padding: 10px;
+}
+
+.ctdl-modal-main {
+ padding: 10px;
+}
+
+.ctdl-modal-footer {
+ background-color: GhostWhite;
+ padding: 10px;
+}
+
+.ctdl-sidebar-class button {
+ width: 100%;
+ padding: 10px;
+ text-align: left;
+ border-color: GhostWhite;
+ background-color: GhostWhite;
+ color: #000000;
+ font-size: 1vw;
+}
+
+.ctdl-sidebar-class button:hover {
+ background-color: White;
+}
+
+.ctdl-grid-banner-item button {
+ background-color: #888888;
+ color: #FFFFFF;
}
-.ctdl-msg-reading-pane {
- background-color: #456789;
+.ctdl-forum-reading-pane {
+ background-color: DarkSlateGrey; /* Background behind the message boxes */
}
-.ctdl-msg-wrapper {
+.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 */
+}
+
+.ctdl-mmsg-wrapper { /* message wrapper for mailbox view */
+ overflow: hidden;
+ 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;
+}
+
+.ctdl-msg-button a {
+ color: Black;
}
.ctdl-msg-button:hover {
border-color: #123456;
}
+.ctdl-msg-button a:hover {
+ color: White;
+}
+
+
.ctdl-msg-button a {
text-decoration: none;
}
width: 32px;
}
+.ctdl-avatar img {
+ clip-path: circle(50%);
+}
+
.ctdl-username {
font-weight: bold;
color: #000055;
font-weight: bold;
}
-.ctdl-msg-content {
+.ctdl-fmsg-content { /* message text, when in forum view */
margin-left: 32px;
}
+.ctdl-mmsg-content { /* message text, when in mailbox view */
+ margin-left: 0;
+}
+
.ctdl-avatar {
float: left;
padding-right: 2px;
blockquote {
background-color: #f5f5f5 !important;
- color: navy !important;
+ color: Navy !important;
margin-bottom: 0px;
padding-bottom: 0px;
}
blockquote blockquote {
background-color: #ebebeb !important;
- color: maroon !important;
+ color: Maroon !important;
}
blockquote blockquote blockquote {
background-color: #e1e1e1 !important;
- color: green !important;
+ color: Green !important;
}
blockquote blockquote blockquote blockquote {
background-color: #d7d7d7 !important;
- color: purple !important;
+ color: Purple !important;
}
blockquote blockquote blockquote blockquote blockquote {
background-color: #cdcdcd !important;
- color: teal !important;
+ color: Teal !important;
}
blockquote pre {
margin-right: 1%;
}
+.ctdl-forum-urlmodal {
+ width: 75%;
+}
+
+.ctdl-roomlist-top {
+ 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 {
+ overflow: hidden;
+ border-radius: 10px;
+ border-style: outset;
+ background-color: White;
+ padding: 0.5vw;
+ margin-top: 0;
+ margin-bottom: 0.25vw;
+ 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;
+}
+
+.ctdl-roomlist-roomname {
+ font-size: large;
+}
+
+.ctdl-roomlist-roomname-hasnewmsgs {
+ font-weight: bold;
+}
+
+.ctdl-roomlist-mtime {
+}
+
+.ctdl-mailbox-grid-container {
+ display: grid;
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ background-color: GhostWhite;
+}
+
+.ctdl-mailbox-pane { /* list of messages when in mailbox view */
+ height: 15vw;
+ 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 {
+ width: 100%;
+ background-color: GhostWhite;
+ border-collapse: collapse;
+}
+
+.ctdl-mailbox-table td {
+ padding: 5px;
+}
+
+.ctdl-mailbox-table tr {
+ cursor: pointer;
+}
+
+.ctdl-mailbox-table tr:nth-child(even) { /* this gives us the alternating-bar effect */
+ background-color: Gainsboro;
+}
+
+.ctdl-mailbox-table tr:hover {
+ background-color: Blue;
+ color: White;
+}
+
+.ctdl-mailbox-table th {
+ position: sticky;
+ top: 0;
+ z-index: 6;
+ background-color: SlateGrey;
+ color: White;
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+.ctdl-mailbox-table th:hover { /* Suppress highlighting the header bar */
+ background-color: SlateGrey;
+ color: White;
+ cursor: default;
+}
+
+.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 */
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ border: 2px dashed red; /* FIXME this goes away after testing */
+}
+
+.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;
+}
projects / citadel.git / blobdiff