2 Copyright (c) 1996-2023 by Art Cancro and the citadel.org team.
3 This program is open source software. Use, duplication, or disclosure
4 are subject to the terms of the GNU General Public License, version 3.
7 * { /* This makes grids consume exactly 100% of their parent containers */
8 box-sizing: border-box;
13 [contenteditable]:focus {
14 outline: 0px solid transparent;
17 .ctdl-main-grid-container { /* This grid implements the "holy grail layout" of the screen */
19 grid-template-rows: 5vh auto;
20 grid-template-columns: 12vw auto;
22 'ctdl-mg-banner ctdl-mg-banner'
23 'ctdl-mg-menu ctdl-mg-main';
25 background-color: DarkSlateGrey; /* This is the color of the lines between the boxes, and also the boxes themselves if not overridden */
26 padding: 0; /* This is the border around the edges of the screen */
31 .ctdl-grid-banner-item { /* Top banner, referenced by the grid container */
32 grid-area: ctdl-mg-banner;
33 background-color: DarkSlateGrey;
36 .ctdl-grid-sidebar-item { /* Side bar, referenced by the grid container */
37 grid-area: ctdl-mg-menu;
38 background-color: GhostWhite;
41 .ctdl-grid-main-item { /* Main content area of the screen, referenced by the grid container */
42 grid-area: ctdl-mg-main;
47 .ctdl-main-grid-container > div {
51 .ctdl-banner-buttons { /* Flexbox container for everything we stick into the banner */
55 justify-content: space-between;
63 .ctdl-banner-left { /* Items which should be grouped to the LEFT side of the banner */
70 .ctdl-banner-center { /* Items which should be grouped to the MIDDLE of the banner */
77 .ctdl-banner-right { /* Items which should be grouped to the RIGHT side of the banner */
84 .ctdl-banner-buttons li, .ctdl-banner-buttons li button {
87 background-color: DarkSlateGrey;
94 .ctdl-banner-buttons li button:hover {
95 background-color: Black;
98 .ctdl-banner-buttons a { /* For example, the Login / Log Off button */
102 .ctdl-banner-buttons span { /* For example, the name of the logged in user */
107 background-color: White;
114 html,body,h1,h2,h3,h4,h5 {
115 font-family: sans-serif
119 display: none; /* set to "block" to make the modal appear */
124 transform: translate(-50%, -50%);
125 border-style: outset;
128 justify-content: center;
131 background-color: GhostWhite;
135 background-color: GhostWhite;
144 background-color: GhostWhite;
148 .ctdl-sidebar-button {
152 border: 1px solid GhostWhite;
153 background-color: GhostWhite;
159 .ctdl-sidebar-button:hover {
163 .ctdl-sidebar-button-selected {
165 background-color: Gainsboro;
168 .ctdl-grid-banner-item button {
169 background-color: #888888;
173 .ctdl-forum-reading-pane {
174 background-color: White; /* Background behind the message boxes */
177 .ctdl-fmsg-wrapper { /* message wrapper for forum view */
180 background-color: White;
182 padding: 5px; /* inside the box */
184 border-style: outset;
188 .ctdl-mmsg-wrapper { /* message wrapper for mailbox view */
190 background-color: White;
191 padding: 5px; /* inside the box */
202 background-color: GhostWhite;
203 margin-bottom: 10px; /* this is the vertical space between the header and the message text */
206 .ctdl-msg-header-info {
210 .ctdl-msg-header-buttons {
217 background-color: Blue;
220 background-color: GhostWhite;
227 .ctdl-msg-button:hover {
228 background-color: #123456;
231 border-color: #123456;
237 text-decoration: none;
241 .ctdl-msg-button a:hover {
251 clip-path: circle(50%);
260 text-decoration: none;
272 .ctdl-fmsg-content { /* message text, when in forum view */
276 .ctdl-mmsg-content { /* message text, when in mailbox view */
280 .ctdl_mail_folders li {
281 color: DarkSlateGrey;
284 .ctdl_mail_folders li:hover {
296 background-color: Gainsboro;
302 text-decoration: none;
308 .ctdl-forum-editor-body {
311 padding-top: 1px black;
312 padding-bottom: 1px black;
316 background-color: #f5f5f5 !important;
317 color: Navy !important;
318 border-left: 2px solid Navy;
325 blockquote blockquote {
326 background-color: #ebebeb !important;
327 color: Maroon !important;
328 border-left: 2px solid Maroon;
331 blockquote blockquote blockquote {
332 background-color: #e1e1e1 !important;
333 color: Green !important;
334 border-left: 2px solid Green;
337 blockquote blockquote blockquote blockquote {
338 background-color: #d7d7d7 !important;
339 color: Purple !important;
340 border-left: 2px solid Purple;
343 blockquote blockquote blockquote blockquote blockquote {
344 background-color: #cdcdcd !important;
345 color: Teal !important;
346 border-left: 2px solid Teal;
354 .ctdl-forum-urlmodal {
359 background-color: GhostWhite;
366 .ctdl-roomlist-floor {
369 .ctdl-roomlist-floor-label {
375 .ctdl-roomlist-floor-rooms {
378 .ctdl-roomlist-room {
382 justify-content: space-around;
386 border-style: outset;
388 background-color: White;
391 margin-bottom: 0.1vw;
396 .ctdl-roomlist-roomicon {
402 .ctdl-roomlist-roomname {
409 .ctdl-roomlist-roomname-hasnewmsgs {
414 .ctdl-roomlist-mtime {
418 .ctdl-mailbox-grid-container {
424 background-color: GhostWhite;
425 grid-template-rows: 15vw 1fr; /* "1fr" means "all of the remaining space" */
428 .ctdl-mailbox-pane { /* list of messages when in mailbox view */
431 background-color: #DDDDDD;
432 border-bottom: solid 3px SlateGrey; /* We can probably turn this into a drag handle */
435 .ctdl-mailbox-table {
437 background-color: GhostWhite;
438 border-collapse: collapse;
441 .ctdl-mailbox-table td {
445 .ctdl-mailbox-table tr {
447 border-top: solid 1px LightGrey;
450 .ctdl-mailbox-table tr:hover {
451 border-top: solid 1px Blue;
452 border-bottom: solid 1px Blue;
453 background-color: LightGrey;
456 .ctdl-mailbox-table th {
460 background-color: SlateGrey;
466 .ctdl-mailbox-table th:hover { /* Suppress highlighting the header bar */
467 background-color: SlateGrey;
472 .ctdl-mail-selected {
473 background-color: Blue;
477 .ctdl-mail-subject { /* Subject column in mailbox message list */
480 .ctdl-mail-sender { /* Sender column in mailbox message list */
483 .ctdl-mail-date { /* Date column in mailbox message list */
487 .ctdl-mail-msgnum { /* # column in mailbox message list */
491 .ctdl-mailbox-reading-pane { /* message reading pane when in mailbox view */
493 background-color: GhostWhite;
499 .ctdl-compose-mail { /* mail composition window */
505 background-color: GhostWhite;
507 grid-template-rows: auto auto auto auto 1fr auto;
508 grid-template-columns: auto 1fr;
510 'ctdl-compose-to-label ctdl-compose-to-line'
511 'ctdl-compose-cc-label ctdl-compose-cc-field'
512 'ctdl-compose-bcc-label ctdl-compose-bcc-field'
513 'ctdl-compose-subject-label ctdl-compose-subject-field'
514 'ctdl-compose-message-box ctdl-compose-message-box'
515 'ctdl-compose-toolbar ctdl-compose-toolbar';
519 .ctdl-compose-to-label {
520 grid-area: ctdl-compose-to-label;
524 .ctdl-compose-to-line {
525 grid-area: ctdl-compose-to-line;
527 padding-right: 0.5vw;
530 border-bottom: 1px solid Grey;
541 .ctdl-compose-to-field {
546 .ctdl-compose-cc-label {
547 grid-area: ctdl-compose-cc-label;
552 .ctdl-compose-cc-field {
553 grid-area: ctdl-compose-cc-field;
554 border-bottom: 1px solid Grey;
558 padding-right: 0.5vw;
563 .ctdl-compose-bcc-label {
564 grid-area: ctdl-compose-bcc-label;
569 .ctdl-compose-bcc-field {
570 grid-area: ctdl-compose-bcc-field;
572 padding-right: 0.5vw;
575 border-bottom: 1px solid Grey;
580 .ctdl-compose-subject-label {
581 grid-area: ctdl-compose-subject-label;
585 .ctdl-compose-subject-field {
586 grid-area: ctdl-compose-subject-field;
588 padding-right: 0.5vw;
591 border-bottom: 1px solid Grey;
595 .ctdl-compose-message-box {
596 grid-area: ctdl-compose-message-box;
600 border-bottom: 1px solid Grey;
605 .ctdl-compose-toolbar {
606 grid-area: ctdl-compose-toolbar;
612 justify-content: space-between;
620 .ctdl-login-screen-grid-container {
622 grid-template-columns: auto auto;
625 .ctdl-login-screen-grid-item {
628 vertical-align: middle;
631 .ctdl-login-screen-grid-item input {
638 background-color: DarkRed;