webcit-ng/static/css/webcit.css

   1 /*
   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.
   5  */
   6
   7 * {                             /* This makes the grid take up exactly 100% of the screen */
   8         box-sizing: border-box;
   9         padding: 0;
  10         margin: 0;
  11 }
  12
  13 .ctdl-grid-banner-item {                /* These grid items will be referenced in the grid container */
  14         grid-area: header;
  15         background-color: DarkSlateGrey;
  16 }
  17
  18 .ctdl-grid-sidebar-item {
  19         grid-area: menu;
  20         background-color: GhostWhite;
  21 }
  22
  23 .ctdl-grid-main-item {
  24         grid-area: main;
  25         overflow-x: hidden;
  26         overflow-y: auto;
  27 }
  28
  29 .ctdl-main-grid-container {                     /* This is so mind-bogglingly simple I can't believe it works */
  30         display: grid;
  31         grid-template-rows: 100px auto;
  32         grid-template-columns: 200px auto;
  33         grid-template-areas:
  34                 'header header'
  35                 'menu main';
  36         gap: 3px;
  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 */
  39         width: 100vw;
  40         height: 100vh;
  41 }
  42
  43 .ctdl-main-grid-container > div {
  44         text-align: left;
  45         padding: 0;
  46 }
  47
  48 .ctdl-banner-buttons li {               /* Buttons that appear in the top banner are list items that reference this class */
  49         float: left;
  50         display: block;
  51         padding: 8px;
  52         background-color: DarkSlateGrey;
  53         color: White;
  54         font-size: 1.25vw;
  55 }
  56
  57 .ctdl-banner-buttons li:hover {         /* Buttons that appear in the top banner also reference this class when hovered over */
  58         background-color: Black;
  59 }
  60
  61 .ctdl-banner-buttons a {
  62         color: White;
  63 }
  64
  65 html,body,h1,h2,h3,h4,h5 {
  66         font-family: sans-serif
  67 }
  68
  69 .ctdl-modal {
  70         display: none;                  /* set to "block" to make the modal appear */
  71         z-index: 9;
  72         position: fixed;
  73         top: 50%;
  74         left: 50%;
  75         transform: translate(-50%, -50%);
  76         border-style: outset;
  77         border-width: 3px;
  78         border-color: Black;
  79         justify-content: center;
  80         align-items: center;
  81         padding: 10px;
  82         background-color: GhostWhite;
  83 }
  84
  85 .ctdl-modal-header {
  86         background-color: GhostWhite;
  87         padding: 10px;
  88 }
  89
  90 .ctdl-modal-main {
  91         padding: 10px;
  92 }
  93
  94 .ctdl-modal-footer {
  95         background-color: GhostWhite;
  96         padding: 10px;
  97 }
  98
  99 .ctdl-sidebar-class button {
 100         width: 100%;
 101         padding: 10px;
 102         text-align: left;
 103         border-color: GhostWhite;
 104         background-color: GhostWhite;
 105         color: #000000;
 106         font-size: 1vw;
 107 }
 108
 109 .ctdl-sidebar-class button:hover {
 110         background-color: White;
 111 }
 112
 113 .ctdl-grid-banner-item button {
 114         background-color: #888888;
 115         color: #FFFFFF;
 116 }
 117
 118 .ctdl-forum-reading-pane {
 119         background-color: DarkSlateGrey;
 120 }
 121
 122 .ctdl-fmsg-wrapper {            /* message wrapper for forum view */
 123         overflow: hidden;
 124         border-radius: 10px;
 125         background-color: White;
 126         margin: 1vw;
 127         padding: 5px;           /* inside the box */
 128 }
 129
 130 .ctdl-mmsg-wrapper {            /* message wrapper for mailbox view */
 131         overflow: hidden;
 132         background-color: White;
 133         padding: 5px;           /* inside the box */
 134 }
 135
 136 .ctdl-msg-reply {
 137         margin-left: 5vw;
 138 }
 139
 140 .ctdl-msg-header {
 141         overflow: hidden;
 142         padding: 4px;
 143         min-height: 35px;
 144         background-color: GhostWhite;
 145         margin-bottom: 10px;    /* this is the vertical space between the header and the message text */
 146 }
 147
 148 .ctdl-msg-header-info {
 149         float: left;
 150 }
 151
 152 .ctdl-msg-header-buttons {
 153         float: right;
 154 }
 155
 156 .ctdl-msg-button {
 157         margin-left: 2px;
 158         border-radius: 5px;
 159         background-color: Blue;
 160         color: Black;
 161         padding: 2px;
 162         background-color: GhostWhite;
 163         border-style: solid;
 164         border-width: thin;
 165         border-color: Black;
 166 }
 167
 168 .ctdl-msg-button a {
 169         color: Black;
 170 }
 171
 172 .ctdl-msg-button:hover {
 173         background-color: #123456;
 174         color: GhostWhite;
 175         transition: .3s;
 176         border-color: #123456;
 177 }
 178
 179 .ctdl-msg-button a:hover {
 180         color: White;
 181 }
 182
 183
 184 .ctdl-msg-button a {
 185         text-decoration: none;
 186 }
 187
 188 .ctdl-avatar {
 189         width: 32px;
 190 }
 191
 192 .ctdl-username {
 193         font-weight: bold;
 194         color: #000055;
 195 }
 196
 197 .ctdl-username a {
 198         text-decoration: none;
 199         padding-right: 4px;
 200 }
 201
 202 .ctdl-msgdate {
 203         padding-left: 4px;
 204 }
 205
 206 .ctdl-msgsubject {
 207         font-weight: bold;
 208 }
 209
 210 .ctdl-fmsg-content {                    /* message text, when in forum view */
 211         margin-left: 32px;
 212 }
 213
 214 .ctdl-mmsg-content {                    /* message text, when in mailbox view */
 215         margin-left: 0;
 216 }
 217
 218 .ctdl-avatar {
 219         float: left;
 220         padding-right: 2px;
 221 }
 222
 223 .ctdl-forum-nav {
 224         text-align: center;
 225         color: #ffff00;
 226 }
 227
 228 .ctdl-forum-nav a {
 229         text-decoration: none;
 230 }
 231
 232 blockquote {
 233         background-color: #f5f5f5 !important;
 234         color: Navy !important;
 235         margin-bottom: 0px;
 236         padding-bottom: 0px;
 237 }
 238
 239 blockquote blockquote {
 240         background-color: #ebebeb !important;
 241         color: Maroon !important;
 242 }
 243
 244 blockquote blockquote blockquote {
 245         background-color: #e1e1e1 !important;
 246         color: Green !important;
 247 }
 248
 249 blockquote blockquote blockquote blockquote {
 250         background-color: #d7d7d7 !important;
 251         color: Purple !important;
 252 }
 253
 254 blockquote blockquote blockquote blockquote blockquote {
 255         background-color: #cdcdcd !important;
 256         color: Teal !important;
 257 }
 258
 259 blockquote pre {
 260         margin-left: 1%;
 261         margin-right: 1%;
 262 }
 263
 264 .ctdl-forum-urlmodal {
 265         width: 75%;
 266 }
 267
 268 .ctdl-roomlist-top {
 269         margin: 1%;
 270 }
 271
 272 .ctdl-roomlist-floor {
 273 }
 274
 275 .ctdl-roomlist-floor-label {
 276         font-size: x-large;
 277         margin: 1vw;
 278 }
 279
 280 .ctdl-roomlist-floor-rooms {
 281 }
 282
 283 .ctdl-roomlist-room {
 284         overflow: hidden;
 285         border-radius: 10px;
 286         background-color: White;
 287         padding: 0.5vw;
 288         margin-bottom: 0.5vw;
 289         width: 100%;
 290 }
 291
 292 .ctdl-roomlist-roomicon {
 293         overflow: hidden;
 294         font-size: large;
 295         margin-left: 1vw;
 296         margin-right: 1vw;
 297         padding-left: 0.75vw;
 298         padding-right: 1.75vw;
 299         padding-top: 0.75vw;
 300         padding-bottom: 0.75vw;
 301 }
 302
 303 .ctdl-roomlist-roomname {
 304         font-size: large;
 305 }
 306
 307 .ctdl-roomlist-roomname-hasnewmsgs {
 308         font-weight: bold;
 309 }
 310
 311 .ctdl-roomlist-mtime {
 312 }
 313
 314 .ctdl-mailbox-grid-container {
 315         display: grid;
 316         position: relative;
 317         overflow: hidden;
 318         width: 100%;
 319         height: 100%;
 320         background-color: GhostWhite;
 321 }
 322
 323 .ctdl-mailbox-pane {                                    /* list of messages when in mailbox view */
 324         height: 15vw;
 325         overflow-x: hidden;
 326         overflow-y: scroll;
 327         background-color: #DDDDDD;
 328         border-bottom: solid 3px SlateGrey;             /* We can probably turn this into a drag handle */
 329 }
 330
 331 .ctdl-mailbox-table {
 332         width: 100%;
 333         background-color: GhostWhite;
 334         border-collapse: collapse;
 335 }
 336
 337 .ctdl-mailbox-table td {
 338         padding: 5px;
 339 }
 340
 341 .ctdl-mailbox-table tr {
 342         cursor: pointer;
 343 }
 344
 345 .ctdl-mailbox-table tr:nth-child(even) {                /* this gives us the alternating-bar effect */
 346         background-color: Gainsboro;
 347 }
 348
 349 .ctdl-mailbox-table tr:hover {
 350         background-color: Blue;
 351         color: White;
 352 }
 353
 354 .ctdl-mailbox-table th {
 355         position: sticky;
 356         top: 0;
 357         z-index: 6;
 358         background-color: SlateGrey;
 359         color: White;
 360         padding-top: 5px;
 361         padding-bottom: 5px;
 362 }
 363
 364 .ctdl-mailbox-table th:hover {                          /* Suppress highlighting the header bar */
 365         background-color: SlateGrey;
 366         color: White;
 367         cursor: default;
 368 }
 369
 370 .ctdl-mail-subject {                                    /* Subject column in mailbox message list */
 371 }
 372
 373 .ctdl-mail-sender {                                     /* Sender column in mailbox message list */
 374 }
 375
 376 .ctdl-mail-date {                                       /* Date column in mailbox message list */
 377         white-space: nowrap;
 378 }
 379
 380 .ctdl-mail-msgnum {                                     /* # column in mailbox message list */
 381         white-space: nowrap;
 382 }
 383
 384 .ctdl-mailbox-reading-pane {                            /* message reading pane when in mailbox view */
 385         overflow-x: hidden;
 386         overflow-y: auto;
 387         background-color: GhostWhite;
 388         padding: 5px;
 389 }
 390
 391 .ctdl-compose-mail {                                    /* mail composition window */
 392         width: 100%;
 393         height: 100%;
 394         overflow: auto;
 395         border: 5px solid red;
 396         background-color: yellow;
 397 }
 398
 399 .ctdl-login-screen-grid-container {
 400         display: grid;
 401         grid-template-columns: auto auto;
 402 }
 403
 404 .ctdl-login-screen-grid-item {
 405         padding: 20px;
 406         font-size: 1.25em;
 407         vertical-align: middle;
 408 }
 409
 410 .ctdl-login-screen-grid-item input {
 411         height: 100%;
 412         border: none;
 413         font-size: 1.25em;
 414 }