2 * Copyright (c) 1996-2022 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 the grid take up exactly 100% of the screen */
8 box-sizing: border-box;
13 .ctdl-grid-banner-item { /* These grid items will be referenced in the grid container */
15 background-color: DarkSlateGrey;
18 .ctdl-grid-navbar-item {
20 background-color: GhostWhite;
23 .ctdl-grid-main-item {
29 .ctdl-main-grid-container { /* This is so mind-bogglingly simple I can't believe it works */
31 grid-template-rows: 100px auto;
32 grid-template-columns: 200px auto;
37 background-color: DarkSlateGrey; /* This is the color of the lines between the boxes, and also the boxes themselves if not overridden */
38 padding: 0; /* This is the border around the edges of the screen */
43 .ctdl-main-grid-container > div {
48 .ctdl-banner-buttons li { /* Buttons that appear in the top banner are list items that reference this class */
52 background-color: DarkSlateGrey;
57 .ctdl-banner-buttons li:hover { /* Buttons that appear in the top banner also reference this class when hovered over */
58 background-color: Black;
61 .ctdl-banner-buttons a {
65 html,body,h1,h2,h3,h4,h5 {
66 font-family: sans-serif
70 display: none; /* set to "block" to make the modal appear */
75 transform: translate(-50%, -50%);
79 justify-content: center;
82 background-color: GhostWhite;
86 background-color: GhostWhite;
95 background-color: GhostWhite;
99 .ctdl-sidebar-class button {
103 border-color: GhostWhite;
104 background-color: GhostWhite;
109 .ctdl-sidebar-class button:hover {
110 background-color: White;
113 .ctdl-grid-banner-item button {
114 background-color: #888888;
118 .ctdl-forum-reading-pane {
119 background-color: #456789;
122 .ctdl-fmsg-wrapper { /* message wrapper for forum view */
125 background-color: White;
127 padding: 5px; /* inside the box */
130 .ctdl-mmsg-wrapper { /* message wrapper for mailbox view */
132 background-color: White;
133 padding: 5px; /* inside the box */
144 background-color: GhostWhite;
145 margin-bottom: 10px; /* this is the vertical space between the header and the message text */
148 .ctdl-msg-header-info {
152 .ctdl-msg-header-buttons {
159 background-color: Blue;
162 background-color: GhostWhite;
172 .ctdl-msg-button:hover {
173 background-color: #123456;
176 border-color: #123456;
179 .ctdl-msg-button a:hover {
185 text-decoration: none;
198 text-decoration: none;
210 .ctdl-fmsg-content { /* message text, when in forum view */
214 .ctdl-mmsg-content { /* message text, when in mailbox view */
229 text-decoration: none;
233 background-color: #f5f5f5 !important;
234 color: Navy !important;
239 blockquote blockquote {
240 background-color: #ebebeb !important;
241 color: Maroon !important;
244 blockquote blockquote blockquote {
245 background-color: #e1e1e1 !important;
246 color: Green !important;
249 blockquote blockquote blockquote blockquote {
250 background-color: #d7d7d7 !important;
251 color: Purple !important;
254 blockquote blockquote blockquote blockquote blockquote {
255 background-color: #cdcdcd !important;
256 color: Teal !important;
264 .ctdl-forum-urlmodal {
272 .ctdl-roomlist-floor {
275 .ctdl-roomlist-floor-label {
280 .ctdl-roomlist-floor-rooms {
283 .ctdl-roomlist-room {
286 background-color: White;
288 margin-bottom: 0.5vw;
292 .ctdl-roomlist-roomicon {
297 padding-left: 0.75vw;
298 padding-right: 1.75vw;
300 padding-bottom: 0.75vw;
303 .ctdl-roomlist-roomname {
307 .ctdl-roomlist-roomname-hasnewmsgs {
311 .ctdl-roomlist-mtime {
314 .ctdl-mailbox-grid-container {
320 background-color: GhostWhite;
323 .ctdl-mailbox-pane { /* list of messages when in mailbox view */
327 background-color: #DDDDDD;
328 border-bottom: solid 3px SlateGrey; /* We can probably turn this into a drag handle */
331 .ctdl-mailbox-table {
333 background-color: GhostWhite;
334 border-collapse: collapse;
337 .ctdl-mailbox-table td {
341 .ctdl-mailbox-table tr {
345 .ctdl-mailbox-table tr:nth-child(even) { /* this gives us the alternating-bar effect */
346 background-color: Gainsboro;
349 .ctdl-mailbox-table tr:hover {
350 background-color: Blue;
354 .ctdl-mailbox-table th {
358 background-color: SlateGrey;
364 .ctdl-mailbox-table th:hover { /* Suppress highlighting the header bar */
365 background-color: SlateGrey;
370 .ctdl-mail-subject { /* Subject column in mailbox message list */
373 .ctdl-mail-sender { /* Sender column in mailbox message list */
376 .ctdl-mail-date { /* Date column in mailbox message list */
380 .ctdl-mail-msgnum { /* # column in mailbox message list */
384 .ctdl-mailbox-reading-pane { /* message reading pane when in mailbox view */
387 background-color: GhostWhite;
391 .ctdl-compose-mail { /* mail composition window */
395 border: 5px solid red;
396 background-color: yellow;
399 .ctdl-login-screen-grid-container {
401 grid-template-columns: auto auto;
404 .ctdl-login-screen-grid-item {
407 vertical-align: middle;
410 .ctdl-login-screen-grid-item input {